/* ===========================================================
   Kernels & Cones — SITE-CHROME.CSS
   Shared UI chrome for every page:
   - Variables & tokens
   - Container helper
   - Header (desktop)
   - Mobile drawer navigation
   - Footer
   -----------------------------------------------------------
   TABLE OF CONTENTS
   01) CSS Variables (Theme Tokens)
   02) Layout Helper (container)
   03) Header / Top Navigation (desktop)
   04) Mobile Drawer Navigation
   05) Footer
   06) Utilities & Media Queries
   =========================================================== */


/* ===========================================================
   01) CSS VARIABLES (THEME TOKENS)
   Keep brand colors and shared tokens here.
   =========================================================== */
:root{
  /* Brand */
  --accent-blue:   #1673ff;
  --accent-pink:   #D81B60;
  --accent-yellow: #ffc21a;

  /* Greys */
  --text:  #1a1a1a;
  --muted: #6e6e73;
  --line:  #e5e5ea;

  /* Surfaces */
  --chip:  #f5f5f7;
  --panel: #ffffff;

  /* Effects */
  --shadow-header: 0 2px 16px rgba(0,0,0,.06);

  /* Radius */
  --pill: 999px;
  --radius-2xl: 22px;

  /* Width */
  --container: 1100px;
}


/* ===========================================================
   02) LAYOUT HELPER
   =========================================================== */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}


/* ===========================================================
   03) HEADER / TOP NAVIGATION (DESKTOP)
   Markup injected by site-chrome.js → header.site-header
   =========================================================== */
header.site-header{
  position: fixed;           /* was: sticky */
  top: 0; left: 0; right: 0; /* pin to viewport edges */
  z-index: 100;
  background: color-mix(in oklab, #ffffff 86%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-header);
}

/* give the header a predictable height */
:root { --header-h: 66px; }     /* adjust if your header is taller/shorter */
.nav-wrap { min-height: var(--header-h); }
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}

/* Brand (logo tile + wordmark) */
.brand a{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--text);
  font-weight:700; letter-spacing:-.01em;
}
.brand .logo{
  width:28px; height:28px; border-radius:8px;
  background: linear-gradient(180deg,#111 0%,#444 100%); /* swap for your image below */
  box-shadow: inset 0 1px 1px rgba(255,255,255,.15), 0 2px 6px rgba(0,0,0,.12);
}
/* Optional: use your real logo image instead of gradient */
.brand .logo{
  background: #fff url('/assets/kernels-logo.png') center/cover no-repeat;
  box-shadow: 0 2px 8px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}

/* Pill nav chips */
.nav-links{
  list-style:none; display:flex; gap:6px; margin:0; padding:0;
}
.nav-links a{
  display:inline-block;
  padding:8px 12px;
  border-radius: var(--pill);
  text-decoration:none;
  color:var(--text);
  transition: background-color .18s ease, color .18s ease, outline .18s ease;
}
.nav-links a:hover,
.nav-links a:focus{
  background: var(--chip);
  color: var(--text);
  outline: none;
}
.nav-links a[aria-current="page"]{
  background: var(--chip);
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #e8e8ed;
}
/* Keep CTA text white in all states (beats .nav-links a) */
.nav-links .nav-cta,
.nav-links .nav-cta:link,
.nav-links .nav-cta:visited,
.nav-links .nav-cta:hover,
.nav-links .nav-cta:focus,
.nav-links .nav-cta:active {
  color: #fff !important;
}

/* Only non-CTA links get the hover color */
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta):focus {
  background: var(--chip);
  color: var(--text);
}

/* Book/Contact — Apple blue pill */
.nav-cta{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  color:#fff;
  background:#0a84ff;           /* iOS/macOS system blue */
  padding:12px 20px;            /* tweak for size */
  border-radius:9999px;         /* full pill */
  border:1px solid #0a84ff;
  box-shadow:0 6px 16px rgba(10,132,255,.22);
  transition:background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

/* hover: tiny lift */
.nav-cta:hover,
.nav-cta:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(10,132,255,.28);
  outline: none;
}

.nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(10,132,255,.22);
}

/* clean keyboard focus ring */
.nav-cta:focus-visible{
  outline:2px solid #b3d6ff;
  outline-offset:3px;
}




/* --- Hamburger toggle (unchanged, tidy) --- */
.nav-toggle{
  display:none;
  border:none; background:transparent;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  display:block; width:22px; height:2px; background:var(--text);
  position:relative; content:"";
}
.nav-toggle span::before{ position:absolute; left:0; top:-6px; }
.nav-toggle span::after { position:absolute; left:0; top: 6px; }



/* ===========================================================
   04) MOBILE DRAWER NAVIGATION
   Markup injected by site-chrome.js → .mobile-drawer / .drawer-content
   =========================================================== */
.mobile-drawer{ display:none; }
.mobile-drawer.open{ display:block; }

.drawer-overlay{
  position: fixed; inset: 0;
  background: rgba(40,40,56,0.11);
  backdrop-filter: blur(1px);
  z-index: 1200;
  animation: fade .18s ease;
}
.drawer-overlay[hidden]{ display: none !important; }
@keyframes fade { from { opacity:0 } to { opacity:1 } }

.drawer-content{
  position: fixed; top: 0; right: 0; height: 100vh;
  width: 88vw; max-width: 330px; background: #fff;
  box-shadow: -12px 0 40px rgba(0,0,0,.08);
  z-index: 1201;
  display:flex; flex-direction:column; align-items:stretch;
  padding: 32px 24px 22px;
  border-top-left-radius: var(--radius-2xl);
  border-bottom-left-radius: var(--radius-2xl);
  animation: slide .24s cubic-bezier(.17,.84,.44,1.08);
}
@keyframes slide { from { transform: translateX(100%); opacity: 0 } to { transform: translateX(0); opacity: 1 } }

.close-drawer{
  position:absolute; top:18px; right:20px;
  background:none; border:none; font-size:2.3rem;
  color: var(--accent-pink); cursor:pointer; padding:0; z-index:1300;
}
.close-drawer:hover, .close-drawer:focus{ color: var(--accent-yellow); }

.drawer-menu-list{
  list-style:none; padding:0; margin:48px 0 0;
  display:flex; flex-direction:column; gap:22px;
}
.drawer-menu-list a{
  font-size:1.05rem; font-weight:500; color:var(--text);
  text-decoration:none; border-radius:12px; padding:12px 18px; display:block;
  transition: background-color .18s ease, color .18s ease, outline .18s ease;
}
.drawer-menu-list a:hover,
.drawer-menu-list a:focus{ background:#f2f2f2; color:#000; }
.drawer-menu-list a:focus    { outline:2px solid var(--accent-blue); outline-offset:3px; }


/* ===========================================================
   05) FOOTER
   Markup injected by site-chrome.js → footer.site-footer
   =========================================================== */
footer.site-footer{
  border-top:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  padding:28px 0;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer a:hover, .site-footer a:focus{ text-decoration:underline; }
.footer-links{ margin:0; }


/* ===========================================================
   06) UTILITIES & MEDIA QUERIES
   =========================================================== */
.hide-mobile { display: block; }
.show-mobile { display: none; }

/* Responsive nav: show hamburger, hide desktop links */
@media (max-width: 950px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .hide-mobile{ display:none; }
  .show-mobile{ display:block; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .drawer-overlay, .drawer-content{ animation: none; }
}