/* ==========================================================================
   Tenos — site header + navigation dropdowns + header search.
   Markup: resources/views/sections/header.blade.php
   Behaviour: resources/js/nav.js (close-on-outside/Escape, burger, search row)
   The dropdowns are <details>/<summary> — they open and close without JS.
   ========================================================================== */

.m-header{
  position:sticky;top:0;z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--grey-100);
}
.m-header__inner{
  display:flex;align-items:center;gap:clamp(16px, 2vw, 32px);
  min-height:var(--tn-header-h);
}

/* --- Brand ---------------------------------------------------------------- */
.m-header__brand{display:flex;align-items:center;flex:none;text-decoration:none}
/* Wordmark + descriptor lockup (332×50). */
.m-header__logo{width:clamp(150px, 15vw, 250px);height:auto;display:block}

/* --- Nav row -------------------------------------------------------------- */
.m-header__nav{flex:1;min-width:0}
.m-navdrop__row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.5rem, 3.4vw, 3.5rem);
  margin:0;padding:0;list-style:none;
}
.m-navdrop__item>summary,
.m-navdrop__link{
  display:inline-flex;align-items:center;gap:0.4rem;
  padding:6px 0;border-bottom:2px solid transparent;
  color:var(--navy);font-size:1.0625rem;text-decoration:none;
  cursor:pointer;list-style:none;white-space:nowrap;
}
.m-navdrop__item>summary::-webkit-details-marker{display:none}
.m-navdrop__item>summary:hover,
.m-navdrop__link:hover{border-bottom-color:currentColor}
.m-navdrop__link.is-active,
.m-navdrop__item>summary.is-active{border-bottom-color:currentColor}
.m-navdrop__item[open]>summary{border-bottom-color:currentColor;opacity:0.6}

.m-navdrop__lead{  margin-bottom:30px; }
/* --- Dropdown panels ------------------------------------------------------ */
.m-navdrop__panel{
  position:absolute;left:0;right:0;top:100%;z-index:40;
  background:var(--grey-50);
  padding-block:clamp(28px, 3vw, 56px) clamp(36px, 4vw, 72px);
  box-shadow:0 18px 30px -22px rgba(11, 11, 15, 0.35);

}
/* The panel anchors to the header bar, not the item that opened it. */
.m-header{position:sticky}
.m-navdrop__item{position:static}

.m-navdrop__card{
  background:var(--white);
  padding:clamp(24px, 2.4vw, 34px) clamp(24px, 2.4vw, 40px);
}
.m-navdrop__card--list{width:min(100%, 400px)}
.m-navdrop__card--columns{
  display:grid;
  grid-template-columns:minmax(90px, 0.7fr) repeat(4, minmax(0, 1fr));
  gap:clamp(20px, 3vw, 48px);
  align-items:start;
}
.m-navdrop__card--feature{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.85fr);
  gap:clamp(24px, 4vw, 72px);
  align-items:start;
  background:none;padding:0;
}

.m-navdrop__group{display:grid;gap:0.75rem;align-content:start}
.m-navdrop__group>a{text-decoration:none;font-size:1rem}
.m-navdrop__group>a:hover{text-decoration:underline}
.m-navdrop__group [aria-current="page"]{font-weight:500;text-decoration:underline;text-underline-offset:3px}

.m-navdrop__heading{
  margin:0 0 0.5rem;
  font-family:var(--font-display);font-size:1.0625rem;font-weight:700;line-height:1.2;
  color:var(--navy);
}
a.m-navdrop__heading{display:block;text-decoration:none}
a.m-navdrop__heading:hover{text-decoration:underline}

/* Edit lockup */
.m-navdrop__lockup{display:flex;align-items:center;gap:clamp(16px, 1.6vw, 26px);margin-bottom:1.5rem}
.m-navdrop__roundel{
  flex:none;display:grid;place-items:center;
  width:clamp(72px, 7vw, 94px);aspect-ratio:1;border-radius:50%;
  background:var(--navy);color:var(--white);
  font-family:var(--font-display);font-size:clamp(1.5rem, 1.9vw, 2rem);
  font-weight:600;letter-spacing:-0.02em;
}
.m-navdrop__wordmark{
  font-family:var(--font-display);font-size:clamp(1.6rem, 2.4vw, 2.25rem);
  font-weight:700;line-height:1.05;letter-spacing:-0.02em;color:var(--navy);
}
.m-navdrop__lead{
  margin:0 0 0.75rem;
  font-family:var(--font-display);font-size:var(--step-h3);font-weight:300;line-height:1.2;
  color:var(--navy);
}
.m-navdrop__panel p:first-child{margin:0}

/* --- Actions -------------------------------------------------------------- */
.m-header__actions{display:flex;align-items:center;gap:clamp(10px, 1.2vw, 18px);flex:none;margin-left:auto}
/* Borderless icon button — no container, but the navy glyph keeps it obvious. */
.m-header__search-toggle{
  display:grid;place-items:center;width:40px;height:40px;
  border:0;background:none;color:var(--navy);cursor:pointer;
  transition:color var(--speed) var(--ease),transform var(--speed) var(--ease);
}
.m-header__search-toggle:hover,
.m-header__search-toggle[aria-expanded="true"]{color:var(--ink);transform:scale(1.08)}
.m-header__cta{min-height:48px;padding:0 1.6rem}
.m-header__toggle{
  display:none;place-items:center;width:44px;height:44px;border-radius:50%;
  border:0;background:none;color:var(--navy);cursor:pointer;
}
.m-header__nav-contact{display:none}

/* --- Search row ----------------------------------------------------------- */
.m-header__searchrow{border-top:1px solid var(--grey-100);background:var(--white)}
.m-header__searchform{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding-block:14px;color:var(--ink);
}
.m-header__searchform svg{flex:none}
.m-header__searchform input{
  flex:1;min-width:0;border:0;outline:none;background:none;
  font:inherit;font-size:1.0625rem;color:var(--ink);
}
.m-header__searchform input::placeholder{color:#6E76A8}

/* Live-suggest dropdown (injected by search.js) */
.tn-suggest{
  position:absolute;top:100%;left:0;right:0;z-index:60;
  background:var(--white);border:1px solid var(--grey-100);
  box-shadow:0 24px 40px -24px rgba(11, 11, 15, 0.35);
  max-height:min(60vh, 480px);overflow:auto;
}
.tn-suggest__label{
  padding:10px 16px 4px;font-size:0.75rem;font-weight:700;
  letter-spacing:0.04em;text-transform:uppercase;color:#6E76A8;
}
.tn-suggest__item,.tn-suggest__all{
  display:block;padding:10px 16px;text-decoration:none;color:var(--ink);
}
.tn-suggest__item:hover,.tn-suggest__item.is-active,
.tn-suggest__all:hover,.tn-suggest__all.is-active{background:var(--grey-50)}
.tn-suggest__title{display:block;font-weight:500}
.tn-suggest__meta{display:block;font-size:0.8125rem;color:#6E76A8}
.tn-suggest__all{font-weight:700;border-top:1px solid var(--grey-100)}
.tn-suggest__none{padding:14px 16px;color:#6E76A8}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 1080px){
  .m-header__toggle{display:grid}
  .m-header__cta{display:none}
  .m-header__nav-contact{display:block}

  .m-header__nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--white);border-bottom:1px solid var(--grey-100);
    max-height:0;overflow:hidden;
    transition:max-height var(--speed) var(--ease);
  }
  .m-header__nav[data-open="true"]{max-height:min(80vh, 720px);overflow:auto}

  .m-navdrop__row{
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:8px var(--gutter) 24px;gap:0;
  }
  .m-navdrop__row>li{border-bottom:1px solid var(--grey-100)}
  .m-navdrop__row>li:last-child{border-bottom:0}
  .m-navdrop__item>summary,
  .m-navdrop__link{display:flex;width:100%;padding:14px 0;border-bottom:0}

  .m-navdrop__panel{position:static;box-shadow:none;background:none;padding-block:0 1.25rem}
  .m-navdrop__panel .container{padding-inline:0}
  .m-navdrop__card{padding:0;background:none}
  .m-navdrop__card--list{width:100%}
  .m-navdrop__card--columns,
  .m-navdrop__card--feature{grid-template-columns:1fr;gap:1.25rem}
  .m-navdrop__roundel{width:56px;font-size:1.1rem}
  .m-navdrop__wordmark{font-size:1.3rem}
}

@media (prefers-reduced-motion: reduce){
  .m-header__nav{transition:none}
}