/* ══════════════════════════════════════════
   EiGHT's CHiLi — MAIN LAYOUT
   ══════════════════════════════════════════ */

/* ══ SCROLL OFFSET — all anchor targets get breathing room ══ */
[id] { scroll-margin-top: var(--space-lg); }

/* ══════════════════════════════════════════
   MAIN LAYOUT — LEFT PANEL + CONTENT
   ══════════════════════════════════════════ */
.main-layout {
  display: grid;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: 100vh;
  padding-bottom: var(--space-2xl);
}

.topbar { grid-area: topbar; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

/* No-sidebar layout — content spans full width; navigation comes from the
   in-section split-list headings instead of a left sidebar. */
.main-layout--no-sidebar,
.is-mobile .main-layout--no-sidebar {
  grid-template-areas: "topbar" "content";
  grid-template-columns: 1fr;
}
/* Fixed hero — pinned behind the viewport (moved out of .content, which is a
   container and would otherwise trap position:fixed). The announcement and the
   main layout sit above it (z-index), and the content scrolls up and overlays
   the hero; #mainLayout's opaque bg does the covering. */
.hero-section--fullbleed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  margin: 0;
  z-index: 0;
}
.announcement { position: relative; z-index: 2; }
.main-layout--no-sidebar { position: relative; z-index: 1; }
/* Full-bleed white bg (escapes the content's side padding) so the scrolling
   content covers the fixed hero edge-to-edge; content stays inset via padding. */
.main-layout--no-sidebar #mainLayout {
  background: #fff;
  margin-left: calc(-1 * var(--space-md));
  margin-right: calc(-1 * var(--space-md));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-2xl);   /* blank space at the top of the content sheet */
}
/* Cart/topbar pinned top-right, just below the announcement banner, so it
   stays visible on scroll (the topbar row collapses since it now floats). */
.main-layout--no-sidebar:not(.is-mobile) { grid-template-rows: 0 1fr; }
.main-layout--no-sidebar:not(.is-mobile) .topbar {
  position: fixed;
  top: var(--space-md);
  right: 0;
  z-index: 50;
}

.sidebar {
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.logo {
  font-size: var(--fs-headline);
  color: var(--dark);
  line-height: var(--line-height-hero);
}

/* ══════════════════════════════════════════
   NAV
   ══════════════════════════════════════════ */
.nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Links styled like the split-layout list: serif headline, dimmed at rest,
   full opacity on hover / current. No underline. */
.nav-item,
.nav-item-muted,
.nav-sub-item {
  font-family: var(--font-serif);
  font-size: var(--fs-serif-headline);
  line-height: var(--line-height-headline);
  color: var(--dark);
  text-decoration: none;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity var(--transition);
}
.nav-item:hover,
.nav-sub-item:hover,
.nav-item.is-current,
.nav-sub-item.is-current,
.nav-sub-item.is-active { opacity: 1; }
.nav-item-muted { cursor: default; }
.nav-sub {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: var(--space-md);
}
.nav-sub.is-open { display: flex; }

/* ══════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════ */
.content {
  min-width: 0;
  overflow: hidden;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  /* Query container so block widths (--block-cell uses 100cqi) measure
     the real content width, at any column nesting depth. */
  container-type: inline-size;
}
/* Brand icon at the top of the sidebar rail. */
.logo--rail { display: block; margin-bottom: var(--space-sm); }
.logo--rail img { display: block; width: 100px; height: auto; }
/* When the floating wordmark is present it plays the role of the sidebar logo,
   so hide the real one but keep its slot (nav links stay put); the float lands
   exactly on top of this hidden slot. */
body:has(.hero-logo-float) .logo--rail {
  visibility: hidden;
  /* Drop the slot by the banner height so the (pinned) float rests with a gap
     below the promo banner and still lands exactly on this slot when scrolled. */
  margin-top: var(--announcement-h);
}

/* Floating wordmark: fixed overlay pinned (via JS-measured left/top/width) to
   the sidebar logo slot, so it shows over the hero and stays put as you scroll. */
.hero-logo-float {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  z-index: 5;
  display: block;
}
.hero-logo-float img { display: block; width: 100%; height: auto; }

.topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 var(--space-md) 0 0;
  gap: var(--space-md);
}

/* ══════════════════════════════════════════
   HERO OVERLAY — sidebar floats transparent over a full-bleed hero
   ══════════════════════════════════════════ */
.main-layout--hero-overlay:not(.is-mobile) {
  grid-template-rows: 0 1fr;
}
.main-layout--hero-overlay:not(.is-mobile) .sidebar {
  z-index: 50;
  transition: background var(--transition);
}
.main-layout--hero-overlay:not(.is-mobile) .sidebar.is-over-hero {
  background: transparent;
}
.main-layout--hero-overlay:not(.is-mobile) .sidebar.is-over-hero:hover {
  background: #fff;
}
.main-layout--hero-overlay:not(.is-mobile) .sidebar.is-over-hero .nav-links,
.main-layout--hero-overlay:not(.is-mobile) .sidebar.is-over-hero .legal-panel-nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.main-layout--hero-overlay:not(.is-mobile) .sidebar.is-over-hero:hover .nav-links,
.main-layout--hero-overlay:not(.is-mobile) .sidebar.is-over-hero:hover .legal-panel-nav {
  opacity: 1;
  pointer-events: auto;
}
.main-layout--hero-overlay:not(.is-mobile) .topbar {
  position: fixed;
  top: var(--announcement-h);
  right: 0;
  z-index: 50;
  background: transparent;
}
.main-layout--hero-overlay:not(.is-mobile) .content {
  overflow: visible;
}

/* ══════════════════════════════════════════
   MOBILE LAYOUT
   ══════════════════════════════════════════ */
.is-mobile .main-layout {
  grid-template-areas:
    "sidebar topbar"
    "content content";
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  overflow-x: hidden;
}
.is-mobile .sidebar {
  position: static;
  height: auto;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: 0;
}
.is-mobile .logo { flex-shrink: 0; }
.is-mobile .topbar { align-self: start; height: auto; padding-top: var(--space-md); }
.is-mobile .nav-links { flex: 1; text-align: left; align-items: flex-start; min-width: 0; }
.is-mobile .nav-sub { padding-left: 0; }
.is-mobile .content { margin-left: 24px; }
.is-mobile .content { overflow: visible; }
.is-mobile .announcement { height: auto; padding: var(--space-xs) var(--space-md); flex-direction: column; gap: 2px; }
.is-mobile .announcement-sep { display: none; }
body.is-mobile { overflow-x: hidden; padding-bottom: var(--space-md); }
html:has(body.is-mobile) { overflow-x: hidden; }

/* ══ MOBILE MENU ══ */
.mobile-menu-btn {
  display: none;
  font-size: var(--fs-body);
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--dark);
  padding: var(--space-xs) 0 0;
  text-align: left;
}
.is-mobile .mobile-menu-btn { display: block; }
.is-mobile .nav-links { display: none; }
.mobile-panel .nav-sub { padding-left: var(--space-md); }

.mobile-panel {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 999;
  padding: var(--space-lg) var(--space-md);
  overflow-y: auto;
  flex-direction: column;
}
.mobile-panel.is-open { display: flex; }
.mobile-panel .nav-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-xs);
  align-self: center;
}
.mobile-panel-close {
  align-self: center;
  font-size: var(--fs-body);
  text-transform: uppercase;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--dark);
  padding: var(--space-md) 0 0;
}