/* ==========================================================================
   TECHIE ZEST — HEADER / NAVIGATION  (→ header.php)
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--white) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--white) 97%, transparent);
  box-shadow: 0 10px 26px -24px rgba(7,30,63,.48);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); height: var(--header-h);
}
.nav__menu {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); list-style: none;
}
.nav__link {
  font-size: var(--step--1); font-weight: var(--weight-medium); letter-spacing: 0.01em;
  color: var(--text-soft); padding: 0.4rem 0; position: relative;
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
  background: var(--emerald); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--navy-ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Services dropdown (desktop) ------------------------------------
   Parent stays a real link to the Services overview; hover/focus-within
   reveals the inner pages. No JS needed on desktop.                     */
.nav__item--drop { position: relative; }
.nav__item--drop > .nav__link { display: inline-flex; align-items: center; gap: 5px; }
.nav__caret { transition: transform var(--dur) var(--ease); }
.nav__item--drop:hover > .nav__link .nav__caret,
.nav__item--drop:focus-within > .nav__link .nav__caret { transform: rotate(180deg); }
/* highlight the parent while on any service page */
.nav__item--drop.is-current > .nav__link { color: var(--navy-ink); }
.nav__item--drop.is-current > .nav__link::after { transform: scaleX(1); }

.nav__drop {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 264px; padding: var(--space-2xs);
  list-style: none; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 1px 0 color-mix(in srgb, var(--gold) 42%, transparent) inset;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
  z-index: 10;
}
/* invisible bridge so the pointer can cross the gap without closing */
.nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__item--drop:hover > .nav__drop,
.nav__item--drop:focus-within > .nav__drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav__drop li + li { margin-top: 1px; }
.nav__drop a {
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: 0.62rem 0.8rem; border-radius: var(--radius);
  font-size: var(--step--1); font-weight: var(--weight-medium);
  color: var(--text-soft); white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__drop a:hover, .nav__drop a:focus-visible { background: #F5F7FB; color: var(--navy-ink); }
.nav__drop a[aria-current="page"] { color: var(--navy-ink); background: color-mix(in srgb, var(--emerald) 8%, transparent); }
.nav__drop-lead {
  color: var(--navy-ink) !important; font-weight: var(--weight-semi) !important;
  justify-content: space-between;
  border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0 !important;
  margin-bottom: 2px;
}
.nav__drop-lead svg { transition: transform var(--dur) var(--ease); }
.nav__drop-lead:hover svg { transform: translateX(3px); }

.nav__actions { display: flex; align-items: center; gap: var(--space-sm); }

.nav__toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  color: var(--navy-ink);
}
.nav__toggle svg { width: 26px; height: 26px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---- Mobile full-screen navigation ---------------------------------- */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: calc(var(--z-header) - 1);
  background: var(--white);
  padding: var(--space-xl) var(--gutter) var(--space-2xl);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { list-style: none; display: flex; flex-direction: column; }
.mobile-nav__list li { border-bottom: 1px solid var(--line); }
.mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) 0; font-size: var(--step-2); font-weight: var(--weight-semi);
  color: var(--navy-ink); letter-spacing: var(--tracking-flat);
}
.mobile-nav__link .idx { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); }
.mobile-nav__actions { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }

/* ---- Services sub-menu (mobile, expandable) ------------------------- */
.mobile-subnav__toggle {
  width: 100%; background: none; border: 0; cursor: pointer;
  font-family: inherit; color: var(--navy-ink);
}
.mobile-subnav__toggle .m-caret { color: var(--text-faint); transition: transform var(--dur) var(--ease); }
.mobile-subnav__toggle[aria-expanded="true"] .m-caret { transform: rotate(180deg); }
.mobile-subnav {
  list-style: none; overflow: hidden;
  padding-bottom: var(--space-sm);
  display: flex; flex-direction: column; gap: var(--space-3xs);
}
.mobile-subnav[hidden] { display: none; }
.mobile-subnav a {
  display: block; padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md);
  font-size: var(--step-0); font-weight: var(--weight-medium); color: var(--text-soft);
}
.mobile-subnav a:hover, .mobile-subnav a[aria-current="page"] { color: var(--emerald-deep); }

@media (max-width: 960px) {
  .nav__menu, .nav__actions .btn--ghost { display: none; }
  .nav__toggle { display: inline-flex; }
}