/* ═══════════════════════════════════════════════════════════════
   MOBILE — responsive nav (burger + fullscreen menu) and shared
   mobile guards. Loaded on every page BEFORE the inline styles,
   so selectors are specificity-bumped (.nav .x) where they must
   override page CSS. Markup for the menu is built by
   assets/nav-mobile.js — without JS the desktop links stay
   visible as a fallback.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Screen-reader-only utility (used by the hidden index H1) ─── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Burger button (hidden on desktop) ────────────────────────── */

.nav .nav-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav .nav-burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: currentColor;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

.nav .nav-burger span:nth-child(1) { top: 17px; }
.nav .nav-burger span:nth-child(2) { top: 25px; }

body.nav-mobile-open .nav-burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.nav-mobile-open .nav-burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* burger color follows the nav link color scheme */
.nav .nav-burger { color: #0a0a0a; }
.nav:not(.nav--scrolled) .nav-burger { color: currentColor; }
body.nav-mobile-open .nav .nav-burger { color: #fff; }

/* ─── Fullscreen menu panel ────────────────────────────────────── */

.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky, 200) - 1);
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px var(--site-px, 1.6rem) 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms ease, visibility 350ms;
  overflow-y: auto;
}

body.nav-mobile-open .nav-mobile {
  opacity: 1;
  visibility: visible;
}

body.nav-mobile-open {
  overflow: hidden;
}

/* keep the fixed nav readable above the dark panel */
body.nav-mobile-open .nav {
  background: transparent !important;
  border-bottom-color: transparent !important;
}

body.nav-mobile-open .nav .nav-logo-dark  { display: none !important; }
body.nav-mobile-open .nav .nav-logo-light { display: block !important; }
body.nav-mobile-open .nav .nav-cta {
  background: #fff;
  color: #0a0a0a;
}

/* ─── Menu links (KUTASSY editorial style) ─────────────────────── */

.nav-mobile-link {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: var(--weight-black, 900);
  letter-spacing: -0.03em;
  line-height: 1.15;
  padding-block: 0.35em;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--mnav-delay, 0ms);
}

body.nav-mobile-open .nav-mobile-link {
  opacity: 1;
  transform: none;
}

.nav-mobile-group {
  padding-block: 0.6em;
}

.nav-mobile-group-label {
  display: block;
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9em;
  opacity: 0;
  transition: opacity 500ms ease;
  transition-delay: var(--mnav-delay, 0ms);
}

body.nav-mobile-open .nav-mobile-group-label { opacity: 1; }

.nav-mobile-sublink {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: clamp(1.1rem, 4.6vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding-block: 0.42em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
              color 200ms ease;
  transition-delay: var(--mnav-delay, 0ms);
}

.nav-mobile-sublink:active { color: #fff; }

body.nav-mobile-open .nav-mobile-sublink {
  opacity: 1;
  transform: none;
}

/* ─── Mobile breakpoint ────────────────────────────────────────── */

@media (max-width: 900px) {
  /* hide desktop links uniformly (case study pages lacked this),
     which also removes the hidden mega panel's layout width */
  .nav .nav-links { display: none; }

  .nav .nav-burger { display: block; }

  /* with the middle grid column gone, grid auto-placement pushed the
     CTA into the center column — switch to flex so it right-aligns */
  .nav .nav-inner { display: flex; justify-content: space-between; }

  /* slightly tighter contact pill next to the burger */
  .nav .nav-cta-wrap { gap: 4px; align-items: center; }
}

/* ─── Shared footer collapse (case study pages lacked it) ──────── */

@media (max-width: 768px) {
  .footer .footer-hero { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .footer .footer-tagline { text-align: left; }
  .footer .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-6); }
}

@media (min-width: 901px) {
  .nav-mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-mobile,
  .nav-mobile-link,
  .nav-mobile-sublink,
  .nav-mobile-group-label,
  .nav .nav-burger span {
    transition: none;
  }
}