/* ========== HERO ========== */

/*** herojen responsiiviset säädöt, < 1289 (deskari marginaalit häviää) ***/
@media (max-width: 1289px) {
  #redan-hero > .kt-row-column-wrap { /* heron kuvasuhde ja reunapaddingit */
    min-height: 70vw;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  #redan-hero h1 { /* hero teksti positiointi ala marginilla */
    margin-bottom: 20vw;
    font-size: clamp(28px, 5vw, 48px);
  }
  #mobile-header .site-branding, /* logo kun < 1290px */
  #main-header .site-branding
   {
     padding-left: 5vw; 
  }
  #main-header .site-bottom-header-wrap .site-container { /* vasen valikko < 1290px */
    padding-left: 5vw;
  }

  #mobile-header .menu-toggle-icon {
    padding-right: 5vw;
    margin-top: 46px;
  }

  .redan-row > .kt-row-column-wrap {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
  .redan-row .kt-has-3-columns {
    column-gap: 5vw !important; 
  }


  /*** otsikkojen fonttikoot kapeammilla näytöillä: ***/
  .redan-row h2 {
    font-size: clamp(30px, 5vw, 42px) !important;
    line-height: 1.5em !important;
    margin-top: 0.8em !important;
    margin-bottom: 0.8em !important;
  }
  .redan-row h3 {
    font-size: clamp(23px, 2vw, 25px) !important;
  }

  p.redan-ingress {
    font-size: clamp(18px, 2vw, 22px) !important;
  }

  .redan-icons p {
    font-size: clamp(18px, 2vw, 24px) !important;
  }

}

.redan-row ul {
  padding-left: 1.3em !important;
}

h3.redan {
  color: var(--global-palette1) !important;
}

.redan-row .redan-yritys {
  font-weight: 700 !important;
  line-height: 1.5em !important;
  font-size: 15px;
}

.redan-row .redan-yritys ul {
  line-height: 2em !important;
}

.redan-henkilo h3.redan {
  margin: 0.5em 0 0.2em 0;
}

.redan-henkilo .rooli {
  font-weight: bold;
  margin: 0;
}


/* palvelupolku numeroympyrälista */
ol.steps-list {
  padding-left: 0 !important;
}
.steps-list li {
  counter-increment: step;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 600;
}
.steps-list li::before {
  content: counter(step);
  width: 26px;
  height: 26px;
  border: 2px solid #e4572e;
  border-radius: 50%;
  color: #e4572e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 13px;
}

/*** puhelinnäkymän erityissäädöt logo, hampurilainen ja hero: ***/
@media (max-width: 768px) {

  #mobile-header .site-branding.mobile-site-branding {
    padding-top: 12px;
  }

  #mobile-header .menu-toggle-icon {
    margin-top: 12px;
  }

  #redan-hero h1 { /* hero teksti positiointi ala marginilla */
    margin-bottom: 5vw; 
    /*text-shadow: 0px 0px 10px #000;*/
    font-size: clamp(20px, 5vw, 28px);
  }
}

/*** Mobiili off canvas valikon logo ja sulkurasti ***/
.drawer-header {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  padding: 0 !important;
  padding-right: 9px !important;
}

.mobile-menu-logo {
  width: 86px;
  margin-left: 9px;
  padding-top: 32px;
  margin-bottom: 20px;
}


/*** Redan vasen pystynavigaatio deskarilla ***/ 
.header-navigation .menu {
  flex-direction: column;
  justify-content: left;
}

.header-navigation .menu > li {
  margin-bottom: 2px;
}

/* menu pystysuunnassa */
.site-header .main-navigation .menu {
  flex-direction: column;
  align-items: flex-start;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
  padding: 0 !important;
}

/* Estä active-tila anchor-linkiltä (esim. yritys #yhteystiedot) */
.menu-item.current-menu-item a[href*="#"],
.menu-item.current_page_item a[href*="#"] {
  color: #a4a5a6 !important;
}
/* MUTTA hover toimii */
.menu-item a[href*="#"]:hover {
  color: #e9511d !important; /* redan oranssi hoveriin */
}