/* Dark-hero nav + mobile drawer, shared by every page whose first screen is a dark hero (homepage, About).
   Moved verbatim out of v2/home.css (the "header" and "mobile menu" blocks, incl. their two small-phone nav-inner rules);
   the only change is the scope: `.kx-home ` became `.kx-nav-dark `. A page opts in with <body class="... kx-nav-dark">.
   Loads AFTER colors_and_type.css and styles.css (which define the shared fixed .kx-nav / .kx-mobile) and after the
   page's own sheet (home.css). Behaviour (scrolled class, drawer) is /includes/profile.js. */

.kx-nav-dark {
  /* the three tokens these rules use; same values as v2/home.css, declared here too so neither file depends on the other's load order */
  --kxh-text-on-dark-2: #D6D3D1;   /* body copy on dark panels (~11:1 on #1F1D1B); --panel-text-secondary stays for small meta */
  --kxh-terracotta-text: #A94418;  /* terracotta for SMALL text on linen/white (~5:1); #E8703A is ~3.1:1 there */
  --kxh-line-warm: #E2DBD2;        /* hairlines and card borders on linen */
}

/* ---------- header (the shared fixed .kx-nav, restyled for a dark-hero page) ---------- */
.kx-nav-dark .kx-nav-inner { padding-top: 16px; padding-bottom: 16px; }
.kx-nav-dark .kx-nav-right { gap: 32px; }
.kx-nav-dark .kx-nav-link { font-size: 15px; color: var(--kxh-text-on-dark-2); padding: 12px 0; }
.kx-nav-dark .kx-nav-link:hover { color: var(--panel-text); }
.kx-nav-dark .kx-nav.scrolled .kx-nav-link { color: var(--fg2); }
.kx-nav-dark .kx-nav.scrolled .kx-nav-link:hover { color: var(--fg1); }
.kx-nav-dark .kx-nav-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: transparent;
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; color: var(--panel-text) !important; }
.kx-nav-dark .kx-nav-cta:hover { background: var(--terracotta-glow); }
.kx-nav-dark .kx-nav.scrolled .kx-nav-cta { color: var(--fg1) !important; }
/* the shared sheet switches to the burger at <=768px; this design keeps the full nav at 768 (mobile is <=767px) */
@media (min-width: 768px) {
  .kx-nav-dark .kx-nav-right { display: flex; }
  .kx-nav-dark .kx-burger { display: none; }
}
.kx-nav-dark .kx-nav .kx-burger { margin-right: -10px; }

/* ---------- mobile menu (shared .kx-mobile drawer) ---------- */
.kx-nav-dark .kx-mobile-scrim { background: rgba(0,0,0,.5); }
.kx-nav-dark .kx-mobile-panel { width: min(82vw, 320px); padding: 12px 20px 28px; gap: 0; overflow-y: auto; }
.kx-nav-dark .kx-mobile-top { height: 48px; margin-bottom: 12px; }
.kx-nav-dark .kx-mobile-top .kx-burger { margin-right: -10px; }
.kx-nav-dark .kx-mobile-primary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px;
  background: var(--terracotta); color: var(--fg1); border-radius: 10px; text-decoration: none; }
.kx-nav-dark .kx-mobile-primary b { display: block; font-weight: 600; font-size: 17px; }
.kx-nav-dark .kx-mobile-primary svg { flex: none; }
.kx-nav-dark .kx-mobile-asat { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 12px; }
.kx-nav-dark .kx-mobile-link { display: flex; align-items: center; min-height: 52px; padding: 0; font-family: var(--font-body); font-weight: 500; font-size: 17px; color: var(--fg1); border-bottom: 1px solid var(--kxh-line-warm); }
.kx-nav-dark .kx-mobile-primary + .kx-mobile-link { margin-top: 12px; border-top: 0; }
.kx-nav-dark .kx-mobile-link:hover { color: var(--kxh-terracotta-text); }
.kx-nav-dark .kx-mobile-foot { margin-top: auto; padding-top: 24px; font-size: 14px; line-height: 1.5; color: var(--fg2); }

/* ---------- small screens: tighter fixed-nav padding (were in home.css's <=767px blocks) ---------- */
@media (max-width: 767px) {
  .kx-nav-dark .kx-nav-inner { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .kx-nav-dark .kx-nav-inner { padding-top: 6px; padding-bottom: 6px; }
}