/* TM CMS component */
/* ===================================================================
   HEADER — desktop nav spacing + mobile hamburger.
   Replaces the old --HEADER-- component CSS. Header chrome (header,
   .hdr, .logo, .btn*) stays in the template (global) CSS.
   =================================================================== */

/* tighten the top bar so the 5 links never crowd the CTA before collapse */
.hdr{ gap:24px; }

/* NAV (desktop) — one scaling gap instead of gap(42) + per-link padding(20) */
nav{ display:flex; align-items:center; gap:clamp(16px,2vw,38px); margin:0 auto; }
nav a{
  color:var(--dim); font-size:14px; font-weight:600; letter-spacing:1.5px;
  white-space:nowrap; padding:6px 0;
  border-bottom:2px solid transparent;
  transition:color .18s, border-color .18s;
}
nav a:hover, nav a.on, nav a.active{ color:#fff; border-bottom-color:var(--green); }
nav a.active::after{ content:none; }     /* use border-bottom, not the global ::after underline */

.nav-cta{ display:none; }                /* CTA inside the panel: mobile only */

/* hamburger (hidden on desktop) */
.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  width:42px; height:42px; margin-left:auto;
  padding:0; border:0; background:none; cursor:pointer;
}
.nav-toggle span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .22s, opacity .2s; }
.nav-toggle span + span{ margin-top:5px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- MOBILE: collapse to hamburger ---------- */
@media(max-width:980px){
  .hdr{ gap:16px; }
  .nav-toggle{ display:inline-flex; }
  .hdr-cta{ display:none; }              /* desktop CTA hidden; lives in the panel now */

  nav{                                    /* dropdown panel; overrides old global nav{display:none} */
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:6px 0 12px;
    background:var(--ink);
    border-bottom:2px solid var(--green);
    box-shadow:0 18px 30px rgba(0,0,0,.4);
  }
  nav.open{ display:flex; }
  nav a{ padding:14px 32px; font-size:15px; border-bottom:0; }
  nav a:hover, nav a.on, nav a.active{ color:var(--green); border-bottom:0; }
  .nav-cta{ display:flex; gap:12px; padding:14px 32px 6px; }
  .nav-cta .btn{ flex:1; }
}