/* =========================
	   Site Nav — shared styling
	   Stacking: dropdown (400) > page-nav (300) > bar (200)
	   ========================= */
	
	:root{
	  /* Layout */
	  --site-nav-height: 64px;
	  --site-nav-max-width: 1200px;
	  --site-nav-pad-x: 24px;
	  --site-nav-gap: clamp(18px, 4vw, 40px);
	  --site-nav-sticky-top: calc(-1 * --site-nav-height)
	
	  /* Colors */
	  --site-nav-bg: #fff;
	  --site-nav-fg: #111;
	  --site-nav-divider: rgba(0,0,0,.08);
	  --site-nav-accent: #4f8cff;
	
	  /* Brand sizes (kept independent of page typography) */
	  --site-nav-brand-size: 18px;
	  --site-nav-tagline-size: 13px;
	  
	  /* font */
	
	  /* Dropdown block */
	  --site-nav-submenu-pad: 16px;
	  --site-nav-submenu-radius: 10px;
	
	  /* Z order */
	  --site-nav-z: 200;              /* bar */
	  --site-nav-dropdown-z: 400;     /* dropdown above page-nav */
	}
	
	/* Bar */
	#site-nav{
	  position: sticky;
	  top: var(--site-nav-sticky-top, 0);
	  z-index: var(--site-nav-z);
	  background: var(--site-nav-bg);
	  color: var(--site-nav-fg);
	}
	#site-nav::after{
	  content:"";
	  position:absolute; left:0; right:0; bottom:0; height:1px;
	  background: var(--site-nav-divider);
	}
	
	/* Row */
	#site-nav > ul{
	  list-style:none; margin:0 auto; padding:0 var(--site-nav-pad-x);
	  max-width:var(--site-nav-max-width);
	  height:var(--site-nav-height);
	  display:flex; align-items:center; justify-content:flex-start; gap:var(--site-nav-gap);
	}
	
	/* Brand (first li) */
	#site-nav > ul > li:first-child{ margin-right: clamp(32px, 8vw, 120px); }
	#site-nav > ul > li:first-child > a{ display:block; text-decoration:none; color:inherit; }
	#site-nav h1,#site-nav h2{ margin:0; line-height:1; }
	#site-nav h1{ font-size:var(--site-nav-brand-size); font-weight:700; }
	#site-nav h2{ font-size:var(--site-nav-tagline-size); font-weight:500; opacity:.75; margin-top:.15em; }
	/* No hover underline for the brand */
	#site-nav > ul > li:first-child::after{ content:none; }
	
	/* Top-level items */
	#site-nav > ul > li{ position:relative; }  /* anchors the underline */
	#site-nav > ul > li > a{
	  display:block; line-height:var(--site-nav-height);
	  padding:0 .25rem; text-decoration:none; color:inherit; font-weight:600;
	}
	
	/* Animated underline ONLY under the hovered LI */
	#site-nav > ul > li.has-submenu::after{
	  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
	  background:var(--site-nav-accent);
	  transform:scaleX(0); transform-origin:left; transition:transform .18s ease-out;
	  z-index: 1; /* above the 1px divider */
	}
	#site-nav > ul > li.has-submenu:hover::after{ transform:scaleX(1); }
	
	/* Submenu — full viewport width, fixed, above page-nav */
	#site-nav .has-submenu > ul{
	  position: fixed;
	  left:0; right:0;
	  top: calc(var(--site-nav-height) + var(--site-nav-sticky-top, 0px));
	  z-index: var(--site-nav-dropdown-z);
	  background: var(--site-nav-bg);
	  list-style:none; margin:0; padding: var(--site-nav-submenu-pad) var(--site-nav-pad-x);
	  border-radius: 0 0 var(--site-nav-submenu-radius) var(--site-nav-submenu-radius);
	  border: 0; box-shadow: none;
	
	  /* Flex row so 1/2/3/4 items distribute evenly and center */
	  display:flex; gap: .75rem; justify-content: center; align-items: stretch; flex-wrap: nowrap;
	
	  opacity:0; pointer-events:none; transition:opacity .14s ease;
	}
	#site-nav .has-submenu:hover > ul,
	#site-nav .has-submenu > ul:hover{
	  opacity:1; pointer-events:auto;
	}
	
	/* Each submenu card: equal width, but clamp for very wide/very narrow */
	#site-nav .has-submenu > ul > li{
	  flex: 1 1 25%;
	  min-width: 240px;           /* prevents squish on narrow */
	  max-width: 25%;             /* 4-up at wide; if only 2 items they’ll sit centered at 50% each */
	  padding:.6rem .8rem; border-radius:.5rem;
	}
	#site-nav .has-submenu > ul > li:hover{
	  background: color-mix(in oklab, var(--site-nav-accent) 14%, transparent);
	}
	#site-nav .has-submenu > ul > li > a{
	  display:block; text-decoration:none; color:inherit; padding:0;
	}
	
	/* Submenu text roles */
	#site-nav .name{ font-weight:700; }
	#site-nav .desc{ opacity:.85; }
	#site-nav .date{ font-weight:700; }
	
	/* Mobile toggle (hidden for now) */
	label[for="collapsed"], #show-sitenav{ display:none; }

/* =============== Mobile overlay for site nav (checkbox-driven) =============== */
/* Touch nothing on desktop */
@media (min-width: 861px){
	#global-site-menu,
	.site-menu-button {
	  display: none;
	}
}

/* ---------------------------- */
/* Mobile overlay toggle only   */
/* ---------------------------- */
@media (max-width: 860px) {

  /*  Button (always visible on mobile)  */
  .site-menu-button{
    position: fixed;
    top: 10px; right: 10px;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: #fff;
    border-radius: 9999px;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    z-index: 10001;            /* above the overlay */
    cursor: pointer;
  }
  .site-menu-button::before{
    content:"+";
    font: 700 28px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    transform: translateY(-1px);
  }

  /* The checkbox itself can be visually hidden but still clickable via the label */
  .site-menu-switch{
    position: fixed;
    top: 12px; right: 12px;
    width: 44px; height: 44px;
    margin: 0; opacity: 0;
    z-index: 10002;           /* keep on top for accessibility */
  }

  /* Closed state: keep the desktop bar out of the way on mobile */
  #site-nav{
    position: fixed;
    inset: 0;                 /* top/right/bottom/left: 0 */
    padding: 20px 16px 28px;
    background: #fff;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 10000;           /* above page nav */
  }

  /* When closed, don’t show the inline bar layout */
  #site-nav > ul{
    display: block;           /* vertical list inside overlay */
  }
  
  #site-nav .has-submenu > ul {
  	padding-block: 0;
  }
  
  
  #site-nav > ul > li{
    display: none;            /* hidden until opened */
  }
  
  #site-nav .has-submenu > ul > li {
  	max-width: 100%;
  	width: 100%;
  }

  /* OPEN state: checkbox checked -> show overlay, show all items */
  .site-menu-switch:checked + .site-menu-button::before{ content:"×"; font-size: 30px; }
  .site-menu-switch:checked ~ #site-nav{
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .site-menu-switch:checked ~ #site-nav > ul > li{
    display: block;
  }

  /* Ensure all submenus are expanded in the overlay */
  .site-menu-switch:checked ~ #site-nav .has-submenu > ul{
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* A little spacing polish for overlay items (non-destructive) */
  #site-nav h1, #site-nav h2{ margin: 0 0 .75rem; }
  #site-nav > ul > li{ border-bottom: 1px solid rgba(0,0,0,.06); }
  #site-nav > ul > li:last-child{ border-bottom: 0; }

  /* Optional: prevent background scroll while open (supported in modern Safari/Chromium) */
  html:has(#global-site-menu:checked){ overflow: hidden; }
}