/**
 * IC Header Shell v6.0 (Enterprise Edition)
 * Depends on: css/ic-material-core.css
 * Scope: Levitating monolith shell, nav pill, bloom submenus, mobile overlay.
 * Philosophy: CSS-first states; JS only toggles classes + custom props.
 * 
 * Changelog v6.0:
 * - Introduced CSS variables for repeated values
 * - Removed dead CSS (empty ::before/::after rules)
 * - Consolidated duplicate box-shadow declarations
 * - Single layout breakpoint: 1400px (below = mobile; covers iPad Pro landscape)
 * - Reduced will-change usage for better compositing performance
 * - Optimized transition properties
 */

/* ==========================================================================
   CSS Custom Properties (Header-specific)
   ========================================================================== */

:root {
  /* Layout */
  --ic-header-top-offset: var(--ic-space-md);
  --ic-header-height-expanded: var(--ic-space-3xl);
  --ic-header-height-compact: calc(var(--ic-header-height-expanded) - 32px);
  --ic-header-height-compact-inner: calc(var(--ic-header-height-compact) - 6px);
  --ic-header-max-width: min(94vw, 1400px);
  --ic-header-max-width-compact: min(92vw, 1400px);
  --ic-header-logo-stack: calc(var(--ic-space-xl) + var(--ic-space-2xs));
  --ic-header-top-stacked: calc(var(--ic-header-top-offset) + var(--ic-header-logo-stack));
  --ic-header-top-sticky: var(--ic-header-top-offset);
  
  /* Behavior thresholds */
  --ic-header-sticky-threshold: 120;
  --ic-header-compact-velocity: 5;
  --ic-header-max-blur: 80;
  
  /* Appearance - consolidated values */
  --ic-header-radius: 999px;
  --ic-header-blur: var(--ic-blur-lg, 60px);
  --ic-header-bg: var(--ic-menu-bg, var(--ic-white-alpha-94, rgba(255, 255, 255, 0.94)));
  --ic-header-border: var(--ic-border-strong, 1px solid rgba(255, 255, 255, 0.6));
  
  /* Shadow - unified drop-shadow for overflow:hidden compatibility */
  --ic-header-shadow-filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
  --ic-header-shadow: 0 18px 46px -34px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.9);
  
  /* Motion - Design System Easing Tokens (bricks-css-variables.json)
   * --ic-ease-standard, --ic-ease-enter, --ic-ease-in
   */
  
  /* Stagger timing */
  --ic-stagger-delay: 0.06s;
  --ic-stagger-base: 0.15s;
  
  --ic-header-dur: 0.42s;
  --ic-header-ease: var(--ic-ease-standard);
  --ic-logo-dur: 0.38s;
  --ic-logo-ease: var(--ic-ease-enter);
  
  /* Mobile menu vertical rhythm */
  --ic-mobile-link-pad-y: calc(var(--ic-space-xs) + 4px);
  --ic-mobile-sublink-pad-y: calc(var(--ic-space-xs) + 1px);
  --ic-mobile-pill-gap: var(--ic-space-xs);
  
  /* Mobile dimensions */
  --ic-header-mobile-size: 72px;
  
  /* Mobile panel */
  --ic-header-mobile-panel-top: 110px;
  --ic-header-mobile-panel-padding: var(--ic-space-lg);
  
  /* Submenu */
  --ic-header-submenu-radius: var(--ic-radius-md);
  
  /* Breakpoints (for reference; @media uses 1400px / 1401px)
   * Covers iPad Pro landscape (1366px); theme needs viewport meta. */
  --ic-header-breakpoint-mobile: 1400px;
  --ic-header-breakpoint-desktop: 1400px;
}

/* Scroll lock when mobile menu is open */
html.ic-lock,
html.ic-lock body {
  overflow: hidden;
  height: 100%;
}

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

@keyframes ic-header-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes ic-header-enter-mobile {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes ic-logo-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes ic-nav-stagger {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ic-mobile-stagger {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   Header Monolith (Main Container)
   ========================================================================== */

.ic-header-monolith {
  position: fixed;
  top: var(--ic-header-top-stacked);
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  width: auto;
  max-width: var(--ic-header-max-width);
  min-height: calc(var(--ic-header-height-expanded) - 8px);
  z-index: var(--ic-z-sticky, 20);
  
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 var(--ic-space-lg);
  
  /* Appearance */
  background: var(--ic-header-bg);
  border: var(--ic-header-border);
  border-radius: var(--ic-header-radius);
  backdrop-filter: blur(var(--ic-header-blur)) saturate(190%);
  -webkit-backdrop-filter: blur(var(--ic-header-blur)) saturate(190%);
  box-shadow: var(--ic-header-shadow);
  
  /* Typography */
  font-family: var(--ic-font-sans);
  color: var(--ic-color-ink);
  letter-spacing: var(--ic-letter-normal);
  line-height: var(--ic-line-body);
  
  /* Performance - GPU acceleration hints
     NOTE: contain: layout style isolates layout calculations but
     limits positioned descendants to this containing block.
     Do not use absolute/fixed positioned elements that need to
     overflow the header bounds. */
  isolation: isolate;
  backface-visibility: hidden;
  will-change: transform, opacity;
  contain: layout style;
  
  /* Transitions - GPU-optimized (no layout-triggering properties) */
  transition:
    transform var(--ic-header-dur) var(--ic-header-ease),
    opacity var(--ic-header-dur) var(--ic-header-ease),
    filter var(--ic-header-dur) var(--ic-header-ease);
}

/* Entry animation */
@media (prefers-reduced-motion: no-preference) {
  .ic-header-monolith {
    animation: ic-header-enter 0.9s var(--ic-ease-standard) both;
    animation-delay: 0.12s;
  }
  
  .ic-header-logo-top {
    animation: ic-logo-enter 0.6s var(--ic-ease-standard) both;
  }
}

.ic-header-monolith.ic-no-reveal {
  animation: none !important;
}

/* Logo hidden state */
.ic-header-monolith.is-logo-hidden {
  top: var(--ic-header-top-sticky);
}

/* Sticky state */
.ic-header-monolith.is-sticky,
.ic-header-monolith.ic-surface-glass.is-sticky {
  width: auto;
  max-width: var(--ic-header-max-width-compact);
  height: auto;
  min-height: var(--ic-header-height-compact-inner);
  padding: var(--ic-space-sm) var(--ic-space-lg);
  gap: var(--ic-space-md);
  border-radius: var(--ic-header-radius);
  /* Shadow via filter (defined at end of file) - box-shadow disabled for overflow:hidden parents */
  box-shadow: none;
  transform: translateX(-50%) translateY(-6px);
  animation: none;
}

/* Compact state */
.ic-header-monolith.is-compact {
  height: auto;
  min-height: var(--ic-header-height-compact-inner);
  border-radius: var(--ic-header-radius);
  box-shadow: var(--ic-header-shadow);
  transform: translateX(-50%) translateY(-4px);
}

/* Unsticking transition */
.ic-header-monolith.is-unsticking {
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Header Brand (Logo in Header)
   ========================================================================== */

.ic-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  flex: 0 0 auto;
  
  /* Hidden by default - GPU-optimized (no max-width animation) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scaleX(0);
  transform-origin: left center;
  
  /* Appearance */
  text-decoration: none;
  color: var(--ic-color-brand, var(--ic-color-gold-500));
  
  /* Transitions - GPU-optimized (transform instead of max-width) */
  transition:
    opacity var(--ic-duration-normal) var(--ic-ease-standard),
    transform var(--ic-duration-normal) var(--ic-ease-standard),
    visibility 0s linear var(--ic-duration-normal);
}

.ic-header-brand.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scaleX(0);
  transform-origin: left center;
}

/* Show brand when sticky */
.ic-header-monolith.is-sticky .ic-header-brand {
  opacity: 1;
  visibility: visible;
  /* Optical correction: shift logo down 2px for visual centering */
  transform: translateY(2px) scaleX(1);
  transition:
    opacity var(--ic-duration-normal) var(--ic-ease-standard),
    transform var(--ic-duration-normal) var(--ic-ease-standard),
    visibility 0s linear 0s;
}

.ic-header-brand .ic-icon {
  width: 2.4em;
  height: 2.4em;
  flex-shrink: 0;
}

.ic-icon-brand {
  width: auto;
  height: 32px;
}

/* SVG logo in brand */
.ic-header-brand svg {
  width: auto;
  height: 32px;
  display: block;
}

/* ==========================================================================
   Logo Top (Standalone Logo Above Header)
   ========================================================================== */

.ic-header-logo-top {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  z-index: calc(var(--ic-z-sticky, 20) + 1);
  
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: var(--ic-space-2xs);
  
  /* Appearance */
  background: none;
  color: var(--ic-color-brand, var(--ic-color-gold-500));
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  
  /* Transitions */
  transition:
    opacity var(--ic-logo-dur) var(--ic-logo-ease),
    transform var(--ic-logo-dur) var(--ic-logo-ease);
  transform-origin: center center;
}

.ic-header-logo-top.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-12px);
  pointer-events: none;
}

.ic-header-logo-top.is-morphing,
.ic-header-brand.is-morphing {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.ic-header-logo-top.is-morph {
  opacity: 1;
  pointer-events: none;
}

.ic-logo-desktop {
  height: 54px;
  width: auto;
  display: block;
}

.ic-logo-mobile {
  display: none;
  height: 40px;
  width: auto;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.ic-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: var(--ic-space-xs);
  height: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  position: relative;
}

.ic-nav-item {
  position: relative;
  height: auto;
  display: inline-flex;
  align-items: stretch;
  --nav-index: 0;
}

/* Nav-item stagger indices for cinematic entrance */
.ic-nav-item:nth-child(1) { --nav-index: 0; }
.ic-nav-item:nth-child(2) { --nav-index: 1; }
.ic-nav-item:nth-child(3) { --nav-index: 2; }
.ic-nav-item:nth-child(4) { --nav-index: 3; }
.ic-nav-item:nth-child(5) { --nav-index: 4; }
.ic-nav-item:nth-child(6) { --nav-index: 5; }
.ic-nav-item:nth-child(7) { --nav-index: 6; }
.ic-nav-item:nth-child(8) { --nav-index: 7; }

/* Cinematic nav-link entrance animation */
@media (prefers-reduced-motion: no-preference) {
  .ic-header-monolith:not(.ic-no-reveal) .ic-nav-item {
    opacity: 0;
    animation: ic-nav-stagger 0.5s var(--ic-ease-enter) forwards;
    animation-delay: calc(var(--ic-stagger-base) + var(--nav-index) * var(--ic-stagger-delay));
  }
}

.ic-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ic-space-2xs);
  padding: calc(var(--ic-space-xs) + 6px) var(--ic-space-md);
  
  /* Typography */
  font-size: var(--ic-type-md);
  font-weight: 500;
  letter-spacing: var(--ic-letter-normal);
  line-height: 1.3;
  white-space: nowrap;
  
  /* Appearance */
  color: var(--ic-color-ink);
  text-decoration: none !important;
  border-radius: var(--ic-header-radius);
  border: none;
  background: transparent;
  box-shadow: none;
  
  /* Performance */
  isolation: isolate;
  
  /* Transitions */
  transition:
    color var(--ic-duration-normal) var(--ic-ease-standard),
    opacity var(--ic-duration-normal) var(--ic-ease-standard);
}

/* Remove animated underline pseudo-elements (override Bricks/WP defaults) */
.ic-nav-link::before,
.ic-nav-link::after,
.ic-nav-item > a::before,
.ic-nav-item > a::after,
.brx-submenu-toggle::before,
.brx-submenu-toggle::after,
.bricks-nav-menu a::before,
.bricks-nav-menu a::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  transform: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* Chevron */
.ic-nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(var(--ic-space-2xs) + 2px);
  color: currentColor;
  opacity: var(--ic-chevron-opacity, 0.6);
  transition:
    transform var(--ic-duration-normal) var(--ic-ease-standard),
    opacity var(--ic-duration-normal) var(--ic-ease-standard);
}

.ic-nav-chevron .ic-chevron {
  width: 7px;
  height: 5px;
  display: block;
}

.ic-nav-link[aria-haspopup="true"] .ic-nav-chevron {
  transform: rotate(0deg);
}

.ic-nav-link[aria-haspopup="true"][aria-expanded="true"] .ic-nav-chevron,
.ic-nav-item:hover > .ic-nav-link[aria-haspopup="true"] .ic-nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Nav link states */
.ic-nav-link:hover {
  color: var(--ic-color-gold-text, #7a6f3d) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.ic-nav-link:hover::before,
.ic-nav-link:hover::after {
  display: none !important;
  opacity: 0 !important;
}

.ic-nav-link.is-active,
.ic-nav-link[aria-current="page"],
.ic-nav-link[aria-current="true"],
.ic-nav-item.is-active > .ic-nav-link,
.ic-nav-item.current-menu-item > .ic-nav-link,
.ic-nav-item.current_page_item > .ic-nav-link,
.ic-nav-item.current-menu-ancestor > .ic-nav-link,
.ic-nav-item.current-menu-parent > .ic-nav-link {
  color: var(--ic-color-gold-text, #7a6f3d) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Submenu
   ========================================================================== */

.ic-nav-submenu {
  position: absolute;
  top: calc(100% + var(--ic-space-xs));
  left: 0;
  transform: translateY(6px);
  z-index: var(--ic-z-dropdown, 10);
  
  /* Layout */
  min-width: 200px;
  max-width: 300px;
  padding: var(--ic-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--ic-space-2xs);
  white-space: nowrap;
  
  /* Appearance */
  background: var(--ic-white, #ffffff);
  border: var(--ic-border-default, 1px solid rgba(0, 0, 0, 0.08));
  border-radius: var(--ic-header-submenu-radius);
  box-shadow: var(--ic-header-shadow);
  
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
  /* CLS Prevention: Skip rendering off-screen submenus */
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
  
  /* Transitions */
  transition:
    opacity var(--ic-duration-normal) var(--ic-ease-standard),
    transform var(--ic-duration-normal) var(--ic-ease-standard);
}

/* Submenu open state */
.ic-nav-item:hover > .ic-nav-submenu,
.ic-nav-item:focus-within > .ic-nav-submenu,
.ic-nav-submenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  content-visibility: visible;
}

.ic-nav-submenu .ic-nav-item {
  position: relative;
  display: block;
}

/* Nested (L3) submenu */
.ic-nav-submenu .ic-nav-submenu {
  top: -10px;
  left: calc(100% + var(--ic-space-xs));
  min-height: auto;
  align-items: stretch;
}

/* Viewport clamping */
.ic-nav-submenu[data-align="left"] {
  left: 0;
  transform: translateY(0);
}

.ic-nav-submenu[data-align="right"] {
  left: auto;
  right: 0;
  transform: translateY(0);
}

.ic-nav-submenu .ic-nav-item:hover > .ic-nav-submenu,
.ic-nav-submenu .ic-nav-item:focus-within > .ic-nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Submenu item stagger animation */
.ic-nav-subitem {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--ic-duration-normal) var(--ic-ease-standard),
    transform var(--ic-duration-normal) var(--ic-ease-spring);
  transition-delay: calc(var(--ic-sub-index, 0) * 0.03s);
}

.ic-nav-item:hover > .ic-nav-submenu .ic-nav-subitem,
.ic-nav-item:focus-within > .ic-nav-submenu .ic-nav-subitem,
.ic-nav-submenu.is-open .ic-nav-subitem {
  opacity: 1;
  transform: translateY(0);
}

/* Submenu links */
.ic-nav-submenu .ic-nav-link {
  width: 100%;
  justify-content: flex-start;
  border-radius: 12px;
  padding: 7px 10px 7px 12px;
  font-size: var(--ic-type-md);
  letter-spacing: var(--ic-letter-normal);
  font-weight: 500;
}

.ic-nav-submenu .ic-nav-item > .ic-nav-link[aria-haspopup="true"] {
  justify-content: space-between;
  gap: var(--ic-space-md);
  padding-right: 10px;
}

.ic-nav-submenu .ic-nav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  right: -2px;
}

.ic-nav-submenu .ic-nav-link[aria-haspopup="true"] .ic-nav-chevron {
  transform: rotate(-90deg);
}

.ic-nav-submenu .ic-nav-chevron .ic-chevron {
  width: 8px;
  height: 6px;
}

/* L2 (nested) submenu: smaller, tighter chevrons */
.ic-nav-submenu .ic-nav-submenu .ic-nav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  right: 0;
  padding-left: var(--ic-space-2xs);
}

.ic-nav-submenu .ic-nav-submenu .ic-nav-chevron .ic-chevron {
  width: 6px;
  height: 4px;
}

.ic-nav-submenu .ic-nav-submenu .ic-nav-item > .ic-nav-link[aria-haspopup="true"] {
  padding-right: 8px;
}

.ic-nav-submenu .ic-nav-link[aria-haspopup="true"][aria-expanded="true"] .ic-nav-chevron,
.ic-nav-submenu .ic-nav-item:hover > .ic-nav-link[aria-haspopup="true"] .ic-nav-chevron,
.ic-nav-submenu .ic-nav-item:focus-within > .ic-nav-link[aria-haspopup="true"] .ic-nav-chevron {
  transform: rotate(90deg);
}

/* Hover/Focus-State für alle Submenu-Links (L2 + L3) */
.ic-nav-submenu .ic-nav-item:hover > .ic-nav-link,
.ic-nav-submenu .ic-nav-item:focus-within > .ic-nav-link {
  background: var(--ic-color-paper-warm, rgba(250, 248, 244, 0.8));
}

/* ==========================================================================
   Mobile Toggle / Burger
   ========================================================================== */

.ic-header-toggle {
  display: none;
  appearance: none;
  flex: 0 0 auto;
  
  /* Appearance */
  border: var(--ic-border-strong);
  background: var(--ic-plate-bg, var(--ic-white-alpha-80, rgba(255, 255, 255, 0.8)));
  color: var(--ic-color-ink);
  padding: var(--ic-space-xs) var(--ic-space-sm);
  border-radius: var(--ic-space-xl);
  
  /* Typography */
  font-size: var(--ic-type-sm);
  font-weight: 600;
  
  /* Layout */
  align-items: center;
  justify-content: center;
  
  box-shadow: inset 0 1px 0 var(--ic-white-alpha-80, rgba(255, 255, 255, 0.8)), var(--ic-shadow-soft);
  
  /* Interaction states */
  transition: transform 120ms var(--ic-ease-spring), box-shadow 120ms var(--ic-ease-spring);
}

/* Desktop-only hover/active effects */
@media (min-width: 1401px) {
  .ic-header-toggle:hover {
    box-shadow: inset 0 1px 0 var(--ic-white-alpha-80), var(--ic-shadow-md);
  }
  
  .ic-header-toggle:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
  }
}

.ic-burger {
  position: relative;
  width: 36px;
  height: 36px;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: var(--ic-space-2xs);
  
  /* Reset */
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.ic-burger span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 3px;
  border-radius: var(--ic-header-radius);
  background: var(--ic-color-ink);
  margin: 0;
  transform-origin: center;
  transition: all var(--ic-duration-normal) var(--ic-ease-spring);
  z-index: 2;
}

.ic-burger span:nth-child(1) { transform: translate(-50%, -6px); }
.ic-burger span:nth-child(2) { transform: translate(-50%, 0); }
.ic-burger span:nth-child(3) { transform: translate(-50%, 6px); }

.ic-burger.is-open span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.ic-burger.is-open span:nth-child(2) { opacity: 0; transform: translate(-50%, 0); }
.ic-burger.is-open span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

/* Burger active state */
.ic-burger:active {
  transform: scale(0.92);
}

/* ==========================================================================
   Mobile Panel
   ========================================================================== */

.ic-mobile-panel {
  position: fixed;
  inset: 0;
  padding-top: var(--ic-header-mobile-panel-top);
  z-index: var(--ic-z-modal, 50);
  
  /* Appearance */
  background: var(--ic-bg-white, var(--ic-white-alpha-94, rgba(255, 255, 255, 0.94)));
  backdrop-filter: blur(var(--ic-blur-lg, 60px)) saturate(190%);
  -webkit-backdrop-filter: blur(var(--ic-blur-lg, 60px)) saturate(190%);
  box-shadow: var(--ic-header-shadow);
  
  /* Layout */
  padding-inline: var(--ic-space-md);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.98);
  
  /* Exit Transition (ease-in for closing) */
  transition:
    opacity 0.35s var(--ic-ease-in, cubic-bezier(0.4, 0, 1, 1)),
    transform 0.35s var(--ic-ease-in, cubic-bezier(0.4, 0, 1, 1)),
    visibility 0s 0.35s;
  
  isolation: isolate;
}

@supports not (backdrop-filter: blur(30px)) {
  .ic-mobile-panel {
    background: var(--ic-white-alpha-94, rgba(255, 255, 255, 0.94));
    box-shadow: var(--ic-shadow-soft);
  }
}

.ic-mobile-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  
  /* Enter Transition (ease-out for opening) */
  transition:
    opacity 0.45s var(--ic-ease-enter, cubic-bezier(0, 0, 0.2, 1)),
    transform 0.45s var(--ic-ease-enter, cubic-bezier(0, 0, 0.2, 1)),
    visibility 0s 0s;
}

/* Cinematic stagger animation for mobile menu items */
@media (prefers-reduced-motion: no-preference) {
  .ic-mobile-panel.is-open .ic-mobile-item {
    --mobile-index: 0;
    opacity: 0;
    animation: ic-mobile-stagger 0.4s var(--ic-ease-enter) forwards;
    animation-delay: calc(0.1s + var(--mobile-index) * 0.05s);
  }
  
  .ic-mobile-panel.is-open .ic-mobile-item:nth-child(1) { --mobile-index: 0; }
  .ic-mobile-panel.is-open .ic-mobile-item:nth-child(2) { --mobile-index: 1; }
  .ic-mobile-panel.is-open .ic-mobile-item:nth-child(3) { --mobile-index: 2; }
  .ic-mobile-panel.is-open .ic-mobile-item:nth-child(4) { --mobile-index: 3; }
  .ic-mobile-panel.is-open .ic-mobile-item:nth-child(5) { --mobile-index: 4; }
  .ic-mobile-panel.is-open .ic-mobile-item:nth-child(6) { --mobile-index: 5; }
  .ic-mobile-panel.is-open .ic-mobile-item:nth-child(7) { --mobile-index: 6; }
  .ic-mobile-panel.is-open .ic-mobile-item:nth-child(8) { --mobile-index: 7; }
  .ic-mobile-panel.is-open .ic-mobile-item:nth-child(9) { --mobile-index: 8; }
  .ic-mobile-panel.is-open .ic-mobile-item:nth-child(10) { --mobile-index: 9; }
}

.ic-mobile-panel-inner {
  padding: 20px 0;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior: contain;
  
  display: flex;
  flex-direction: column;
  gap: var(--ic-space-sm);
  max-width: 1100px;
  margin: 0 auto;
}

/* Ensure proper accordion collapse behavior */
.ic-mobile-panel .ic-mobile-accordion .ic-mobile-submenu:not(.is-open) {
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.ic-mobile-panel-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ==========================================================================
   Mobile Accordion / List
   ========================================================================== */

.ic-mobile-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ic-space-xs);
}

.ic-mobile-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ic-mobile-pill-gap);
}

.ic-mobile-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0 var(--ic-space-lg);
}

.ic-mobile-panel .ic-mobile-accordion > li {
  width: 100%;
  margin-left: 0;
}

.ic-mobile-panel .ic-mobile-accordion > li > .ic-mobile-submenu {
  /* Override grid for nested - use flex when open */
  width: 100%;
  margin-top: 0;
}

.ic-mobile-panel .ic-mobile-accordion > li > .ic-mobile-submenu.is-open {
  display: flex;
  flex-direction: column;
  gap: var(--ic-mobile-pill-gap);
}

.ic-mobile-panel .ic-mobile-accordion > li > .ic-mobile-submenu > li {
  width: calc(100% - 6%);
  margin-left: 6%;
  padding-left: 0;
}

.ic-mobile-panel .ic-mobile-accordion > li > .ic-mobile-submenu > li > .ic-mobile-submenu {
  /* L3 submenu - uses base grid collapse */
}

.ic-mobile-panel .ic-mobile-accordion > li > .ic-mobile-submenu > li > .ic-mobile-submenu.is-open {
  display: flex;
  flex-direction: column;
  gap: var(--ic-mobile-pill-gap);
}

.ic-mobile-panel .ic-mobile-accordion > li > .ic-mobile-submenu > li > .ic-mobile-submenu > li {
  width: calc(100% - 12%);
  margin-left: 12%;
  padding-left: 0;
}

.ic-mobile-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--ic-space-xs);
  padding: 0;
  width: 100%;
  min-height: calc(var(--ic-space-md) + var(--ic-space-xs));
  
  /* Appearance */
  border-radius: var(--ic-header-radius);
  background: var(--ic-color-paper, #faf9f5);
  border: var(--ic-border-default, 1px solid rgba(0, 0, 0, 0.08));
  box-shadow: var(--ic-header-shadow);
  overflow: hidden;
}

.ic-mobile-toggle {
  order: 2;
  flex: 0 0 calc(var(--ic-space-md) + var(--ic-space-sm));
  width: calc(var(--ic-space-md) + var(--ic-space-sm));
  min-width: calc(var(--ic-space-md) + var(--ic-space-sm));
  align-self: stretch;
  
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px 0 auto !important;
  z-index: 5;
  
  /* Appearance */
  background: transparent;
  color: var(--ic-color-ink);
  border-left: var(--ic-border-default, 1px solid rgba(0, 0, 0, 0.08));
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
  cursor: pointer;
  
  transition: all 0.25s var(--ic-ease-standard);
}

.ic-toggle-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: currentColor;
}

.ic-toggle-icon .ic-chevron {
  width: 12px;
  height: 8px;
  display: block;
  opacity: var(--ic-chevron-opacity, 0.6);
  transition:
    transform var(--ic-duration-fast) var(--ic-ease-standard),
    opacity var(--ic-duration-fast) var(--ic-ease-standard);
}

.ic-toggle-icon.is-open .ic-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.ic-mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  /* GPU-optimized animation - Fixed collapse */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition:
    grid-template-rows var(--ic-duration-normal) var(--ic-ease-standard),
    opacity var(--ic-duration-fast) ease,
    visibility 0s linear var(--ic-duration-normal);
}

.ic-mobile-submenu > * {
  overflow: hidden;
  min-height: 0;
}

.ic-mobile-submenu.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  padding-top: var(--ic-space-2xs);
  padding-bottom: var(--ic-space-2xs);
  transition:
    grid-template-rows var(--ic-duration-normal) var(--ic-ease-standard),
    opacity var(--ic-duration-fast) ease,
    visibility 0s linear 0s;
}

/* Closed submenu children should have no height */
.ic-mobile-submenu:not(.is-open) > li {
  height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

.ic-mobile-submenu.is-open > li:first-child {
  margin-top: var(--ic-space-2xs);
}

.ic-mobile-submenu.is-open > li:last-child {
  margin-bottom: var(--ic-space-2xs);
}

.ic-mobile-submenu .ic-mobile-link {
  font-size: var(--ic-type-md);
  padding-block: var(--ic-mobile-sublink-pad-y);
  padding-inline: var(--ic-space-md);
  line-height: 1.25;
  border-radius: 0;
}

.ic-mobile-link {
  order: 1;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  position: relative;
  
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding-block: var(--ic-mobile-link-pad-y);
  padding-inline: var(--ic-space-md);
  padding-right: calc(var(--ic-space-md) + 28px);
  overflow: hidden;
  
  /* Typography */
  font-size: var(--ic-type-lg);
  font-weight: 500;
  text-decoration: none;
  
  /* Appearance */
  color: var(--ic-color-ink);
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  
  /* Transitions */
  transition:
    color var(--ic-duration-normal) var(--ic-ease-standard),
    opacity var(--ic-duration-normal) var(--ic-ease-standard);
}

.ic-mobile-link span {
  color: inherit;
}

/* Mobile link states */
.ic-mobile-link:hover,
.ic-mobile-link.is-active,
.ic-mobile-link[aria-current="page"],
.ic-mobile-link[aria-current="true"],
.ic-mobile-item.is-active > .ic-mobile-row .ic-mobile-link,
.ic-mobile-item.current-menu-item > .ic-mobile-row .ic-mobile-link,
.ic-mobile-item.current_page_item > .ic-mobile-row .ic-mobile-link,
.ic-mobile-item.current-menu-ancestor > .ic-mobile-row .ic-mobile-link,
.ic-mobile-item.current-menu-parent > .ic-mobile-row .ic-mobile-link {
  color: var(--ic-color-gold-text, #7a6f3d) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Desktop Breakpoint (1400px+)
   ========================================================================== */

@media (min-width: 1401px) {
  .ic-nav {
    flex: 0 0 auto;
    gap: var(--ic-space-2xs);
  }
  
  .ic-header-toggle,
  .ic-burger {
    display: none !important;
  }
  
  .ic-nav {
    display: flex !important;
  }
  
  .ic-header-monolith {
    padding-inline: var(--ic-space-lg);
  }
  
  .ic-nav-link {
    padding: calc(var(--ic-space-xs) + 2px) var(--ic-space-sm);
    position: relative;
  }
  
  .ic-nav-item > .ic-nav-link,
  .ic-nav-submenu .ic-nav-link {
    padding-right: var(--ic-space-sm);
  }
  
  .ic-nav-link[aria-haspopup="true"] .ic-nav-chevron .ic-chevron {
    width: 6px;
    height: 4px;
    transform: scale(0.85);
    transform-origin: center;
  }
  
  /* Guard against JS forcing mobile nav on wide viewports */
  .ic-force-mobile-nav .ic-nav {
    display: flex !important;
  }
  
  .ic-force-mobile-nav .ic-header-toggle,
  .ic-force-mobile-nav .ic-burger {
    display: none !important;
  }
}

/* ==========================================================================
   Mobile Breakpoint (1400px and below)
   ========================================================================== */

@media (max-width: 1400px) {
  .ic-logo-desktop {
    display: block;
    height: 48px;
  }
  
  .ic-logo-mobile {
    display: none;
  }
  
  .ic-nav {
    display: none;
  }
  
  .ic-header-toggle {
    display: inline-flex;
  }
  
  .ic-burger {
    display: flex;
  }
  
  /* Hide brand in mobile header pill */
  .ic-header-brand {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    max-width: 0 !important;
  }
  
  /* Mobile monolith becomes circular button */
  .ic-header-monolith {
    width: var(--ic-header-mobile-size) !important;
    height: var(--ic-header-mobile-size) !important;
    min-height: var(--ic-header-mobile-size) !important;
    max-width: var(--ic-header-mobile-size) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    background: var(--ic-bg-white, var(--ic-white-alpha-94, rgba(255, 255, 255, 0.94)));
    border: var(--ic-border-default, 1px solid rgba(0, 0, 0, 0.08));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  
  .ic-header-monolith.is-sticky {
    width: var(--ic-header-mobile-size) !important;
    height: var(--ic-header-mobile-size) !important;
    min-height: var(--ic-header-mobile-size) !important;
    max-width: var(--ic-header-mobile-size) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    gap: 0 !important;
  }
  
  @media (prefers-reduced-motion: no-preference) {
    .ic-header-monolith {
      animation: ic-header-enter-mobile 0.7s var(--ic-ease-standard) both;
      animation-delay: 0.08s;
    }
  }
  
  .ic-header-toggle {
    border: none;
    background: transparent;
    box-shadow: none;
    width: auto;
    height: 100%;
    padding: var(--ic-space-sm);
  }
  
  .ic-burger {
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 12px;
  }
  
  .ic-burger span {
    background: var(--ic-color-gold-text, #7a6f3d);
  }
  
  /* Remove hover box on mobile */
  .ic-header-toggle,
  .ic-header-toggle:hover,
  .ic-header-toggle:focus,
  .ic-header-toggle:active,
  .ic-burger,
  .ic-burger:hover,
  .ic-burger:focus,
  .ic-burger:active {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }
}

/* Force mobile nav class - applies mobile styles regardless of viewport width */
.ic-force-mobile-nav .ic-nav {
  display: none !important;
}

.ic-force-mobile-nav .ic-header-toggle {
  display: inline-flex !important;
}

.ic-force-mobile-nav .ic-burger {
  display: flex !important;
}

/* Force mobile: Round pill shape */
.ic-force-mobile-nav .ic-header-monolith {
  width: var(--ic-header-mobile-size, 72px) !important;
  height: var(--ic-header-mobile-size, 72px) !important;
  min-height: var(--ic-header-mobile-size, 72px) !important;
  max-width: var(--ic-header-mobile-size, 72px) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
}

.ic-force-mobile-nav .ic-header-monolith.is-sticky {
  width: var(--ic-header-mobile-size, 72px) !important;
  height: var(--ic-header-mobile-size, 72px) !important;
  min-height: var(--ic-header-mobile-size, 72px) !important;
  max-width: var(--ic-header-mobile-size, 72px) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  gap: 0 !important;
}

/* Force mobile: Golden burger icon */
.ic-force-mobile-nav .ic-burger span {
  background: var(--ic-color-gold-text, #7a6f3d) !important;
}

/* Force mobile: Hide brand */
.ic-force-mobile-nav .ic-header-brand {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Force mobile: Clean toggle appearance */
.ic-force-mobile-nav .ic-header-toggle,
.ic-force-mobile-nav .ic-header-toggle:hover,
.ic-force-mobile-nav .ic-header-toggle:focus,
.ic-force-mobile-nav .ic-header-toggle:active,
.ic-force-mobile-nav .ic-burger,
.ic-force-mobile-nav .ic-burger:hover,
.ic-force-mobile-nav .ic-burger:focus,
.ic-force-mobile-nav .ic-burger:active {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* ==========================================================================
   Focus States (Accessibility - WCAG 2.1 compliant)
   ========================================================================== */

.ic-nav-link:focus-visible,
.ic-mobile-link:focus-visible,
.ic-header-toggle:focus-visible,
.ic-mobile-toggle:focus-visible,
.ic-burger:focus-visible {
  outline: var(--ic-focus-visible-outline, 2px solid var(--ic-color-gold-500, #a79a63));
  outline-offset: var(--ic-focus-visible-offset, 2px);
  box-shadow: var(--sem-state-focus-ring, 0 0 0 3px rgba(167, 154, 99, 0.4));
}

/* Submenu keyboard navigation */
.ic-nav-subitem:focus-within {
  background: var(--ic-color-paper-warm);
  border-radius: 12px;
}

.ic-nav-submenu .ic-nav-link:focus-visible {
  background: var(--ic-color-paper-warm);
  outline-offset: -2px;
}

/* ==========================================================================
   Reduced Motion - Full accessibility support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions */
  .ic-header-monolith,
  .ic-header-logo-top,
  .ic-header-brand,
  .ic-nav-item,
  .ic-nav-link,
  .ic-nav-submenu,
  .ic-nav-subitem,
  .ic-mobile-link,
  .ic-mobile-panel,
  .ic-mobile-item,
  .ic-mobile-submenu,
  .ic-burger span {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  
  /* Ensure immediate visibility without animation */
  .ic-header-monolith {
    transform: translateX(-50%) translateZ(0) !important;
    animation: none !important;
  }
  
  .ic-nav-item {
    opacity: 1 !important;
    animation: none !important;
  }
  
  .ic-mobile-panel.is-open .ic-mobile-item {
    opacity: 1 !important;
    animation: none !important;
  }
  
  .ic-nav-item:hover > .ic-nav-submenu,
  .ic-nav-item:focus-within > .ic-nav-submenu,
  .ic-nav-submenu .ic-nav-item:hover > .ic-nav-submenu,
  .ic-nav-submenu .ic-nav-item:focus-within > .ic-nav-submenu {
    transform: translateY(0) !important;
  }
  
  /* Disable stagger delays */
  .ic-nav-subitem {
    transition-delay: 0ms !important;
  }
}

/* ==========================================================================
   Backdrop Filter Fallback
   ========================================================================== */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ic-nav-submenu {
    background: var(--ic-white, #ffffff);
  }
}

/* ==========================================================================
   STICKY HEADER SHADOW - Using filter: drop-shadow() for overflow:hidden compatibility
   ========================================================================== */

.ic-header-monolith.is-sticky {
  /* Drop-shadow filter - not clipped by parent overflow: hidden */
  filter: 
    drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
}