/* ============================================================
   HINTAREMONTILLE.FI — valikko ja mega-paneeli  (v1.2)

   KORJAUS v1.2: layout ohjataan nyt Elementorin omilla
   CSS-muuttujilla (--width, --display, --gap ...) eikä niiden
   ohi. Elementorin container asettaa esim. width:var(--width),
   joten --width:auto toimii varmasti, kun taas pelkkä
   width:auto jäi häviölle.
   ============================================================ */

/* ---------- Palkki ---------- */
.hr-nav.hr-nav{
  --width:100% !important;
  --display:flex !important;
  --flex-direction:column !important;
  --padding-top:0px !important; --padding-bottom:0px !important;
  --padding-left:0px !important; --padding-right:0px !important;
  position:relative !important; z-index:9990;
  background:var(--hr-white);
  border-bottom:1px solid var(--hr-soft);
  font-family:var(--hr-body);
  overflow:visible;
}
.hr-nav.hr-nav .e-con,
.hr-nav.hr-nav .e-con-inner,
.hr-nav.hr-nav .elementor-widget-container{ overflow:visible; }

.hr-nav__inner.hr-nav__inner{
  --width:100% !important;
  --display:flex !important;
  --flex-direction:row !important;
  --align-items:center !important;
  --justify-content:flex-start !important;
  --gap:30px !important;
  --flex-wrap:nowrap !important;
  max-width:1240px; margin-inline:auto;
  padding:0 clamp(20px,5vw,64px);
  min-height:74px;
  position:static !important;
}

/* ---------- Logo ---------- */
.hr-nav__logo.hr-nav__logo{ --width:auto !important; flex:0 0 auto; }
.hr-nav__logo.hr-nav__logo img{ max-height:38px; width:auto; display:block; }

/* ---------- Linkkirivi ---------- */
.hr-nav__menu.hr-nav__menu{
  --width:auto !important;
  --display:flex !important;
  --flex-direction:row !important;
  --align-items:center !important;
  --gap:2px !important;
  --flex-wrap:nowrap !important;
  flex:0 1 auto;
  position:static !important;
}

.hr-nav__item.hr-nav__item{
  --width:auto !important;
  --display:flex !important;
  --flex-direction:column !important;
  --gap:0px !important;
  flex:0 0 auto;
  position:static !important;
}

.hr-nav__link.hr-nav__link{ width:auto; flex:0 0 auto; }
.hr-nav__link.hr-nav__link p{ margin:0; }
.hr-nav__link.hr-nav__link a{
  display:inline-flex; align-items:center; gap:7px;
  padding:26px 14px; white-space:nowrap;
  font-family:var(--hr-body);
  font-size:.95rem; font-weight:500; line-height:1;
  color:var(--hr-text); text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.hr-nav__link.hr-nav__link a:hover,
.hr-nav__link.hr-nav__link a:focus-visible{
  color:var(--hr-live); border-bottom-color:var(--hr-live);
}
.hr-nav__link.hr-nav__link a:focus-visible{ outline:3px solid var(--hr-live); outline-offset:-3px; }

.hr-nav__link--panel.hr-nav__link--panel a::after{
  content:""; width:7px; height:7px; margin-top:-3px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s ease;
}
.hr-nav__item.hr-nav__item:hover .hr-nav__link--panel a::after,
.hr-nav__item.hr-nav__item:focus-within .hr-nav__link--panel a::after{
  transform:rotate(-135deg); margin-top:2px;
}

/* ---------- Mega-paneeli ---------- */
.hr-panel.hr-panel{
  --width:100% !important;
  --display:block !important;
  --padding-top:0px !important; --padding-bottom:0px !important;
  --padding-left:0px !important; --padding-right:0px !important;
  position:absolute !important; left:0; right:0; top:100%;
  background:var(--hr-white);
  border-bottom:1px solid var(--hr-soft);
  box-shadow:0 18px 40px -18px rgba(0,88,189,.28);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:9991;
}
.hr-nav__item.hr-nav__item:hover .hr-panel,
.hr-nav__item.hr-nav__item:focus-within .hr-panel,
.hr-nav__item.hr-nav__item.is-open .hr-panel{
  opacity:1; visibility:visible; transform:translateY(0);
}

.hr-panel__grid.hr-panel__grid{
  --width:100% !important;
  --display:grid !important;
  --gap:0px !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.9fr);
  align-items:start;
  max-width:1240px; margin-inline:auto;
  padding:0 clamp(20px,5vw,64px);
}
@media (max-width:1180px){
  .hr-panel__grid.hr-panel__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.hr-panel__col.hr-panel__col{
  --width:auto !important;
  --display:flex !important;
  --flex-direction:column !important;
  --gap:0px !important;
  min-width:0;                       /* estää sisällön ylivuodon sarakkeesta */
  padding:34px 30px 36px 0;
  border-right:1px solid var(--hr-soft);
}
.hr-panel__col.hr-panel__col:last-child{ border-right:0; }
.hr-panel__col--calc.hr-panel__col--calc{
  background:var(--hr-tint);
  padding-left:30px; padding-right:clamp(20px,5vw,64px);
  margin-right:calc(-1 * clamp(20px,5vw,64px));
  border-right:0;
}

.hr-panel__k.hr-panel__k{ width:100%; }
.hr-panel__k.hr-panel__k .elementor-heading-title{
  font-family:var(--hr-body); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--hr-muted); line-height:1.4;
}

/* ---------- Linkkilista ---------- */
.hr-navlist.hr-navlist{ width:100%; }
.hr-navlist.hr-navlist ul{ list-style:none; margin:14px 0 0; padding:0; }
.hr-navlist.hr-navlist li{ margin:0; padding:0; }
.hr-navlist.hr-navlist a{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding:9px 0; text-decoration:none;
  font-family:var(--hr-display); font-weight:700; font-size:.95rem;
  color:var(--hr-ink); line-height:1.35;
  transition:color .15s ease;
}
.hr-navlist.hr-navlist a:hover,
.hr-navlist.hr-navlist a:focus-visible{ color:var(--hr-live); }
.hr-navlist.hr-navlist a:focus-visible{ outline:3px solid var(--hr-live); outline-offset:2px; }
.hr-navlist.hr-navlist .p{
  font-family:var(--hr-body); font-weight:500; font-size:.8rem;
  color:var(--hr-muted); white-space:nowrap; flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.hr-navlist.hr-navlist .soon{ color:var(--hr-muted); flex-wrap:wrap; }
.hr-navlist.hr-navlist .soon .p{ opacity:.75; }
.hr-navlist.hr-navlist .soon::after{
  content:"tulossa"; font-family:var(--hr-body); font-size:9px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--hr-muted);
  background:var(--hr-soft); padding:3px 5px; flex:0 0 auto;
}
.hr-panel__note.hr-panel__note{
  width:100%; font-size:.82rem; line-height:1.5;
  color:var(--hr-muted); margin-top:16px;
}
.hr-panel__note.hr-panel__note p{ margin:0; }

/* ---------- CTA ja hampurilainen ---------- */
.hr-nav__cta.hr-nav__cta{ --width:auto !important; flex:0 0 auto; margin-left:auto; }
.hr-nav__cta.hr-nav__cta .elementor-button{
  font-family:var(--hr-display); font-weight:700; font-size:.93rem;
  background:var(--hr-ink); color:var(--hr-white);
  padding:12px 24px; border-radius:999px; border:0; fill:var(--hr-white);
  white-space:nowrap; transition:background-color .18s ease;
}
.hr-nav__cta.hr-nav__cta .elementor-button:hover,
.hr-nav__cta.hr-nav__cta .elementor-button:focus-visible{ background:var(--hr-live); color:var(--hr-white); }
.hr-nav__cta.hr-nav__cta .elementor-button:focus-visible{ outline:3px solid var(--hr-live); outline-offset:3px; }

.hr-burger.hr-burger{ --width:auto !important; display:none; flex:0 0 auto; }
.hr-burger.hr-burger .elementor-button{
  position:relative !important; width:46px; height:44px; padding:0;
  background:transparent; border:1px solid var(--hr-soft); border-radius:0;
  font-size:0; color:transparent; overflow:hidden;
}
.hr-burger.hr-burger .elementor-button-text{ font-size:0; }
.hr-burger.hr-burger .elementor-button::before,
.hr-burger.hr-burger .elementor-button::after{
  content:""; position:absolute !important; left:13px; right:13px; height:2px;
  background:var(--hr-ink); transition:transform .2s ease, top .2s ease;
}
.hr-burger.hr-burger .elementor-button::before{ top:15px; }
.hr-burger.hr-burger .elementor-button::after{ top:26px; }
.hr-nav.hr-nav.is-open .hr-burger .elementor-button::before{ top:21px; transform:rotate(45deg); }
.hr-nav.hr-nav.is-open .hr-burger .elementor-button::after{ top:21px; transform:rotate(-45deg); }
.hr-burger.hr-burger .elementor-button:focus-visible{ outline:3px solid var(--hr-live); outline-offset:2px; }

/* ============================================================
   MOBIILI — alle 1024 px
   ============================================================ */
@media (max-width:1024px){
  .hr-burger.hr-burger{ display:block; }
  .hr-nav__cta.hr-nav__cta{ margin-left:auto; margin-right:10px; }
  .hr-nav__cta.hr-nav__cta .elementor-button{ padding:11px 18px; font-size:.87rem; }

  .hr-nav__menu.hr-nav__menu{
    --width:auto !important;
    --flex-direction:column !important;
    --align-items:stretch !important;
    --gap:0px !important;
    position:absolute !important; left:0; right:0; top:100%;
    background:var(--hr-white);
    border-bottom:1px solid var(--hr-soft);
    box-shadow:0 18px 40px -18px rgba(0,88,189,.28);
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .28s ease, visibility .28s;
    padding:0 clamp(20px,5vw,64px);
  }
  .hr-nav.hr-nav.is-open .hr-nav__menu{
    max-height:min(78vh,760px); overflow-y:auto; visibility:visible;
  }
  .hr-nav__item.hr-nav__item{ --width:100% !important; border-bottom:1px solid var(--hr-soft); }
  .hr-nav__link.hr-nav__link a{ padding:17px 0; justify-content:space-between; width:100%; border-bottom:0; }

  .hr-panel.hr-panel{
    position:static !important; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; transition:none;
    max-height:0; overflow:hidden;
  }
  .hr-nav__item.hr-nav__item:hover .hr-panel{ max-height:0; }
  .hr-nav__item.hr-nav__item.is-open .hr-panel,
  .hr-nav__item.hr-nav__item.is-open:hover .hr-panel{ max-height:2200px; padding-bottom:14px; }

  .hr-panel__grid.hr-panel__grid{ grid-template-columns:1fr; padding:0; }
  .hr-panel__col.hr-panel__col{
    padding:16px 0 18px; border-right:0; border-top:1px solid var(--hr-soft);
  }
  .hr-panel__col--calc.hr-panel__col--calc{
    background:transparent; padding-left:0; padding-right:0; margin-right:0;
  }
}

/* ============================================================
   ELEMENTORIN EDITORI
   Editorissa paneeli näytetään auki ja normaalissa virrassa,
   jotta sisältöä voi muokata. Etusivulla se käyttäytyy
   normaalisti. Tämä sääntö EI vaikuta kävijöihin.
   ============================================================ */
body.elementor-editor-active .hr-panel.hr-panel,
body.elementor-editor-preview .hr-panel.hr-panel{
  position:static !important; opacity:1; visibility:visible; transform:none;
  box-shadow:none; transition:none;
  border-top:2px dashed var(--hr-soft);
}
body.elementor-editor-active .hr-nav__inner.hr-nav__inner,
body.elementor-editor-preview .hr-nav__inner.hr-nav__inner{
  --flex-wrap:wrap !important;
}

@media (prefers-reduced-motion:reduce){
  .hr-panel.hr-panel,.hr-nav__menu.hr-nav__menu{ transition-duration:.01ms !important; }
}