/**
 * Bengal SSG Default Theme
 * Header & Navigation Styles
 */

/* ============================================
   SITE HEADER
   ============================================ */

header[role="banner"] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  /* Glass effect */
  overflow: visible;
  /* allow dropdowns to overflow */
  /* Peaceful glow animation - matches footer */
  animation: header-glow 8s ease-in-out infinite;
}

/* Peaceful slow glow animation for header border */
@keyframes header-glow {

  0%,
  100% {
    box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent),
      0 2px 8px 0 color-mix(in srgb, var(--color-primary) 5%, transparent);
  }

  50% {
    box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-primary) 10%, transparent),
      0 2px 12px 0 color-mix(in srgb, var(--color-primary) 10%, transparent);
  }
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
  header[role="banner"] {
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
  }
}

[data-theme="dark"] header[role="banner"] {
  background-color: rgba(26, 26, 26, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  animation: header-glow-dark 8s ease-in-out infinite;
}

/* Dark mode header glow - slightly brighter */
@keyframes header-glow-dark {

  0%,
  100% {
    box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-primary) 3%, transparent),
      0 2px 10px 0 color-mix(in srgb, var(--color-primary) 8%, transparent);
  }

  50% {
    box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-primary) 15%, transparent),
      0 2px 14px 0 color-mix(in srgb, var(--color-primary) 12%, transparent);
  }
}

@supports not (backdrop-filter: blur(12px)) {
  [data-theme="dark"] header[role="banner"] {
    background-color: rgba(26, 26, 26, 0.95);
  }
}

/* ============================================
   HEADER APPSHELL PATTERN
   Full-width edge-to-edge with internal padding
   ============================================ */

/* Header wrapper - full width, no negative margins needed since it's at body level */
.header-appshell {
  width: 100%;
  /* No breakout needed - header is already at body level */
}

header nav {
  padding-block: var(--space-1);
}

/* Header nav content - internal padding, constrained width */
.header-nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  /* Internal padding - content doesn't touch edges */
  padding-inline: var(--space-5);
  max-width: var(--container-3xl, 1920px);
  margin-inline: auto;
}

/* Responsive padding adjustments */
@media (min-width: 400px) {
  .header-nav-content {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .header-nav-content {
    padding-inline: var(--space-8);
  }
}

/* Ultra-wide screens - constrain content width, header stays full-width */
@media (min-width: 1920px) {
  .header-nav-content {
    max-width: var(--container-3xl, 1920px);
  }
}

/* ============================================
   HEADER CONFIGURATION VARIANTS
   Controlled via data attributes set by theme config
   ============================================ */

/* Non-sticky header - scrolls away with content */
header[role="banner"][data-sticky="false"] {
  position: relative;
}

/* Centered navigation variant
   Uses absolute positioning for true centering regardless of logo/actions width */
@media (min-width: 768px) {
  .header-nav-content[data-nav-position="center"] {
    position: relative;
  }

  .header-nav-content[data-nav-position="center"] .nav-main {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Ensure nav doesn't overlap logo or actions */
    max-width: calc(100% - 400px);
  }

  /* Ensure logo and actions stay at edges */
  .header-nav-content[data-nav-position="center"] .logo {
    z-index: 1;
  }

  .header-nav-content[data-nav-position="center"] .header-actions {
    z-index: 1;
  }
}

/* ============================================
   LOGO / SITE TITLE
   ============================================ */

.logo {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease-out);
}

.logo:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Brand presentation variants */
.brand-image {
  display: inline-block;
  height: 1.5em;
  vertical-align: middle;
}

.brand-text {
  display: inline-block;
  line-height: 1;
}

/* ============================================
   MAIN NAVIGATION
   ============================================ */

.nav-main {
  display: none;
}

@media (min-width: 768px) {
  .nav-main {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
}

/* Nav main is now the <ul> element directly */
.nav-main {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-main a,
.nav-main .nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast) var(--ease-out);
}

/* Non-clickable dropdown trigger (e.g., Dev menu with no unique link) */
.nav-main .nav-dropdown-trigger {
  cursor: default;
}

/* Nav links with dropdowns - position relative for dropdown positioning */
.nav-main>li.has-dropdown>a {
  position: relative;
}

.nav-main a:hover,
.nav-main .nav-dropdown-trigger:hover,
.nav-main .nav-dropdown-trigger:focus {
  color: var(--color-primary);
  background-color: var(--color-bg-hover);
  text-decoration: none;
}

.nav-main a svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.nav-main li.active>a {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  font-weight: var(--weight-semibold);
}

.nav-main li.active-trail>a {
  color: var(--color-primary);
}

/* ============================================
   SUBMENU / NESTED NAVIGATION
   ============================================ */

/* Nav items with submenus - position relative for dropdown */
.nav-main>li {
  position: relative;
}

/* Nav link becomes positioning context for dropdown (when JS adds has-dropdown) */
.nav-main>li.has-dropdown>a {
  position: relative;
}

/* Dropdown menu - positioned relative to nav item */
.nav-main .submenu {
  position: absolute;
  top: calc(100% + var(--space-2));
  /* Align with nav link's left edge */
  left: 0;
  min-width: 200px;
  padding: var(--space-2) 0;
  margin-top: 0;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast) var(--ease-out),
    visibility var(--transition-fast) var(--ease-out),
    transform var(--transition-fast) var(--ease-out);
  z-index: var(--z-dropdown);
  pointer-events: none;
  /* Prevent interaction when hidden */

  /* Reset flex layout */
  display: block;
}

/* Fallback: Show dropdown on hover (works even without JavaScript) */
.nav-main>li:hover>.submenu,
.nav-main>li:focus-within>.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Dropdown is open (JavaScript-controlled via data-state OR hover fallback) */
.nav-main>li[data-state="open"] .submenu,
.nav-main>li.has-dropdown[data-state="open"] .submenu,
.nav-main>li.has-dropdown:hover .submenu,
.nav-main>li.has-dropdown:hover>.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  /* Enable interaction when visible */
}

/* Also show when hovering over submenu itself */
.nav-main>li.has-dropdown .submenu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Nav link state styling (Supabase/Radix pattern) */
.nav-main>li.has-dropdown>a[data-state="open"] {
  color: var(--color-primary);
  background-color: var(--color-bg-hover);
}

[data-theme="dark"] .nav-main .submenu {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.nav-main .submenu li {
  margin: 0;
  width: 100%;
  list-style: none;
}

.nav-main .submenu a {
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border-radius: 0;
  font-size: var(--text-sm);
}

.nav-main .submenu li:first-child a {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.nav-main .submenu li:last-child a {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.nav-main .submenu li.active>a {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  font-weight: var(--weight-semibold);
}

/* Submenu Icons - Premium dropdown styling */
.nav-main .submenu a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.submenu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  color: var(--color-text-tertiary);
  transition: color var(--transition-fast);
}

.nav-main .submenu a:hover .submenu-icon {
  color: var(--color-primary);
}

.nav-main .submenu li.active>a .submenu-icon {
  color: var(--color-primary);
}

.submenu-text {
  flex: 1;
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

/* Mobile Menu Toggle Button - Neumorphic style */
.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Apple HIG: Minimum 44×44px touch target */
  width: 44px;
  max-width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  /* Neumorphic button style */
  background: linear-gradient(180deg,
      var(--color-surface, var(--color-bg-elevated)),
      var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--neumorphic-subtle);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-out);
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  flex-shrink: 0;
}

.mobile-nav-toggle:hover {
  color: var(--color-text-primary);
  box-shadow: var(--neumorphic-hover);
  transform: translateY(-1px);
}

.mobile-nav-toggle:active {
  box-shadow: var(--neumorphic-subtle-pressed);
  transform: translateY(0) scale(0.98);
}

@media (min-width: 768px) {
  .mobile-nav-toggle {
    display: none;
  }
}

.mobile-nav-toggle svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ============================================
   MOBILE NAV FOOTER - Theme Controls
   ============================================ */

.mobile-nav-footer {
  padding: var(--space-4);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

[data-theme="dark"] .mobile-nav-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
}

/* Redesigned theme controls for mobile - segmented control style */
.mobile-nav-footer .theme-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-nav-footer .theme-dropdown {
  width: 100%;
  position: relative;
}

/* Mobile theme button - larger, full width */
.mobile-nav-footer .theme-dropdown__button {
  width: 100%;
  height: 2.75rem;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: linear-gradient(180deg,
      var(--color-surface, var(--color-bg-elevated)),
      var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--neumorphic-subtle);
}

/* Show label text on mobile */
.mobile-nav-footer .theme-dropdown__label {
  display: inline;
  color: var(--color-text-primary);
}

/* Larger icon on mobile */
.mobile-nav-footer .theme-dropdown__icon svg {
  width: 20px;
  height: 20px;
}

.mobile-nav-footer .theme-dropdown__button:hover {
  box-shadow: var(--neumorphic-hover);
}

/* Theme dropdown menu - slides up from button */
.mobile-nav-footer .theme-dropdown__menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.5rem);
  top: auto;
  width: 100%;
  max-width: none;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-2);
  margin: 0;
  /* Frosted glass dropdown */
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.95),
      rgba(250, 250, 250, 0.92));
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  box-shadow:
    0 -8px 32px rgba(0, 0, 0, 0.12),
    var(--neumorphic-subtle);
  z-index: calc(var(--z-modal) + 10);
  /* Animation */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.mobile-nav-footer .theme-dropdown__menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-theme="dark"] .mobile-nav-footer .theme-dropdown__menu {
  background: linear-gradient(180deg,
      rgba(40, 40, 44, 0.96),
      rgba(32, 32, 36, 0.92));
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 -8px 32px rgba(0, 0, 0, 0.3),
    var(--neumorphic-subtle);
}

/* Section labels in dropdown */
.mobile-nav-footer .theme-dropdown__menu li.separator {
  height: auto;
  background: none;
  padding: var(--space-2) var(--space-2) var(--space-1);
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--color-border);
}

.mobile-nav-footer .theme-dropdown__menu li.separator:first-child {
  border-top: none;
  margin-top: 0;
}

/* Menu buttons - left aligned like desktop */
.mobile-nav-footer .theme-dropdown__menu button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--transition-fast) var(--ease-out);
}

.mobile-nav-footer .theme-dropdown__menu button:hover,
.mobile-nav-footer .theme-dropdown__menu button:focus {
  background: linear-gradient(180deg,
      var(--color-surface, var(--color-bg-elevated)),
      var(--color-bg-secondary));
  border-color: var(--color-border);
  box-shadow: var(--neumorphic-subtle);
}

.mobile-nav-footer .theme-dropdown__menu button:active {
  box-shadow: var(--neumorphic-subtle-pressed);
  transform: scale(0.98);
}

.mobile-nav-footer .theme-dropdown__menu button.active {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-elevated)),
      color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-secondary)));
  border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
  color: var(--color-primary);
  box-shadow: var(--neumorphic-active);
  justify-content: space-between;
}

.mobile-nav-footer .theme-dropdown__menu button.active::after {
  position: static;
  margin-left: auto;
}

/* (Removed legacy single-button theme toggle styles) */

/* Theme Controls (toggle + dropdown) */
.theme-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Header actions wrapper (Search + Theme) - Desktop Only */
.header-actions {
  display: none;
}

@media (min-width: 768px) {
  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
}

.theme-dropdown {
  position: relative;
}

.theme-dropdown__button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.75rem;
  /* Match search button height */
  padding: 0 0.5rem;
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-medium, 500);
  color: var(--color-text-secondary);
  background: linear-gradient(180deg,
      var(--color-surface, var(--color-bg-elevated)),
      var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-medium, 6px);
  box-shadow: var(--neumorphic-subtle);
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s);
  white-space: nowrap;
}

.theme-dropdown__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.theme-dropdown__icon svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  display: block;
  flex-shrink: 0;
}

/* Theme dropdown chevron icon (direct child SVG, not inside icon span) */
.theme-dropdown__button>svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
  display: block;
}

.theme-dropdown__icon circle {
  transform-origin: center;
}

/* Label - hidden on desktop (icon-only), visible on mobile */
.theme-dropdown__label {
  display: none;
}

.theme-dropdown__button:hover {
  color: var(--color-text-primary);
  box-shadow: var(--neumorphic-hover);
  transform: translateY(-1px);
}

.theme-dropdown__button:active {
  box-shadow: var(--neumorphic-subtle-pressed);
  transform: translateY(0) scale(0.98);
}

.theme-dropdown__button[aria-expanded="true"] {
  color: var(--color-primary);
  box-shadow: var(--neumorphic-hover);
}

.theme-dropdown__menu {
  position: absolute;
  right: 0;
  margin-top: 0.5rem;
  min-width: 180px;
  padding: 0.25rem;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  /* Neumorphic shadow for dropdown */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(255, 255, 255, 0.3),
    inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.1),
    4px 4px 12px rgba(0, 0, 0, 0.12),
    -2px -2px 6px rgba(255, 255, 255, 0.2);
  list-style: none;
  display: none;
  z-index: var(--z-dropdown);
  transition: box-shadow 0.2s ease;
}

.theme-dropdown__menu.open {
  display: block;
}

/* Override for mobile nav footer - use visibility/opacity for smooth animation */
.mobile-nav-footer .theme-dropdown__menu {
  display: block;
}

.theme-dropdown__menu li {
  margin: 0;
}

.theme-dropdown__menu li.separator {
  height: auto;
  background: none;
  padding: var(--space-2) var(--space-2) var(--space-1);
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--color-border-light);
}

.theme-dropdown__menu li.separator:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: var(--space-1);
}

.theme-dropdown__menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  padding: 0.5rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-out), box-shadow 0.2s ease;
}

.theme-dropdown__menu button:hover,
.theme-dropdown__menu button:focus {
  background: var(--color-bg-secondary);
  color: var(--color-primary);
}

.theme-dropdown__menu button:active {
  /* Neumorphic pressed state for menu items */
  box-shadow:
    inset 1px 1px 2px rgba(0, 0, 0, 0.1),
    inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.15),
    0.5px 0.5px 1px rgba(0, 0, 0, 0.05);
  background: var(--color-bg-tertiary);
}

.theme-dropdown__menu button.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  position: relative;
}

.theme-dropdown__menu button.active::after {
  content: '✓';
  position: absolute;
  right: 0.5rem;
  color: var(--color-primary);
  font-size: var(--text-base);
}

/* ============================================
   DARK MODE - Theme Dropdown
   ============================================ */

/* Dark mode inherits via CSS variables - no explicit overrides needed */

[data-theme="dark"] .theme-dropdown__menu {
  /* Neumorphic shadow for dark mode dropdown */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(255, 255, 255, 0.08),
    inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.4),
    4px 4px 12px rgba(0, 0, 0, 0.3),
    -2px -2px 6px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .theme-dropdown__menu button:active {
  /* Neumorphic pressed state for menu items - dark mode */
  box-shadow:
    inset 1px 1px 2px rgba(0, 0, 0, 0.3),
    inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.08),
    0.5px 0.5px 1px rgba(0, 0, 0, 0.15);
  background: var(--color-bg-tertiary);
}

/* ============================================
   PALETTE-SPECIFIC ACTIVE NAVIGATION STYLING
   ============================================ */

/* Brown Bengal - Warm amber active navigation */
[data-palette="brown-bengal"] .nav-main li.active>a,
[data-palette="brown-bengal"] .nav-main .submenu li.active>a {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

[data-theme="dark"][data-palette="brown-bengal"] .nav-main li.active>a,
[data-theme="dark"][data-palette="brown-bengal"] .nav-main .submenu li.active>a {
  background-color: var(--color-primary-light);
}

/* Blue Bengal - Soft powder blue active navigation */
[data-palette="blue-bengal"] .nav-main li.active>a,
[data-palette="blue-bengal"] .nav-main .submenu li.active>a {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

[data-theme="dark"][data-palette="blue-bengal"] .nav-main li.active>a,
[data-theme="dark"][data-palette="blue-bengal"] .nav-main .submenu li.active>a {
  background-color: var(--color-primary-light);
}

/* Silver Bengal - High contrast monochrome active navigation */
[data-palette="silver-bengal"] .nav-main li.active>a,
[data-palette="silver-bengal"] .nav-main .submenu li.active>a {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

[data-theme="dark"][data-palette="silver-bengal"] .nav-main li.active>a,
[data-theme="dark"][data-palette="silver-bengal"] .nav-main .submenu li.active>a {
  background-color: var(--color-primary-light);
}

/* Charcoal Bengal - Dramatic slate active navigation */
[data-palette="charcoal-bengal"] .nav-main li.active>a,
[data-palette="charcoal-bengal"] .nav-main .submenu li.active>a {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

[data-theme="dark"][data-palette="charcoal-bengal"] .nav-main li.active>a,
[data-theme="dark"][data-palette="charcoal-bengal"] .nav-main .submenu li.active>a {
  background-color: var(--color-primary-light);
}

/* ============================================
   POPOVER PATTERN: Theme Menu
   See: assets/COMPONENT-PATTERNS.md

   - Element: <div id="theme-menu" popover class="*--popover">
   - Browser: show/hide, light dismiss, escape, top layer
   - JS: positioning (theme.js → positionPopover)
   - Suffix: --popover indicates this pattern
   ============================================ */

/* Theme controls container */
.theme-controls {
  position: relative;
}

/* Popover menu container */
.theme-dropdown__menu--popover {
  /* Appearance */
  margin: 0;
  padding: var(--space-2);
  min-width: 180px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.08);

  /* Fixed positioning - JS sets exact position relative to trigger */
  position: fixed;
  inset: unset;

  /* Hidden by default */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease,
    display 0.15s allow-discrete, overlay 0.15s allow-discrete;
}

/* Open state - visible */
.theme-dropdown__menu--popover:popover-open {
  opacity: 1;
  transform: translateY(0);
}

/* Entry animation starting point */
@starting-style {
  .theme-dropdown__menu--popover:popover-open {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Dark mode popover */
[data-theme="dark"] .theme-dropdown__menu--popover {
  background: var(--color-bg-primary);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Menu sections */
.theme-dropdown__menu--popover .theme-menu-section {
  border: none;
  margin: 0;
  padding: 0;
}

.theme-dropdown__menu--popover .theme-menu-section+.theme-menu-section {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-light);
}

/* Section legends */
.theme-dropdown__menu--popover legend.separator {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Theme option buttons */
.theme-dropdown__menu--popover .theme-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-out);
  text-align: left;
}

.theme-dropdown__menu--popover .theme-option svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  transition: color var(--transition-fast);
}

.theme-dropdown__menu--popover .theme-option:hover {
  background: var(--color-bg-secondary);
  color: var(--color-primary);
}

.theme-dropdown__menu--popover .theme-option:hover svg {
  color: var(--color-primary);
}

.theme-dropdown__menu--popover .theme-option:active {
  background: var(--color-bg-tertiary);
  transform: scale(0.98);
}

.theme-dropdown__menu--popover .theme-option.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.theme-dropdown__menu--popover .theme-option.active svg {
  color: var(--color-primary);
}

/* Active checkmark */
.theme-dropdown__menu--popover .theme-option.active::after {
  content: '✓';
  margin-left: auto;
  font-size: var(--text-base);
  color: var(--color-primary);
}

/* Trigger button styling for popover mode */
.theme-controls button[popovertarget] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: linear-gradient(180deg,
      var(--color-surface, var(--color-bg-elevated)),
      var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--neumorphic-subtle);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.theme-controls button[popovertarget]:hover {
  color: var(--color-text-primary);
  box-shadow: var(--neumorphic-hover);
  transform: translateY(-1px);
}

.theme-controls button[popovertarget]:active {
  box-shadow: var(--neumorphic-subtle-pressed);
  transform: translateY(0) scale(0.98);
}

/* Reduced motion - no animations */
@media (prefers-reduced-motion: reduce) {
  .theme-dropdown__menu--popover {
    transition: none;
  }

  @starting-style {
    .theme-dropdown__menu--popover:popover-open {
      opacity: 1;
      transform: none;
    }
  }

  .theme-dropdown__menu--popover:not(:popover-open) {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   DIALOG PATTERN: Mobile Navigation
   See: assets/COMPONENT-PATTERNS.md

   - Element: <dialog id="mobile-nav-dialog">
   - Browser: focus trap, escape key, backdrop, inert
   - JS: link close, submenu toggles (mobile-nav.js)
   ============================================ */

/* Dialog as slide-in drawer from right */
.mobile-nav-dialog {
  /* Reset dialog defaults */
  position: fixed;
  margin: 0;
  padding: 0;
  border: none;
  max-width: none;
  max-height: none;

  /* Position as right drawer */
  inset: 0 0 0 auto;
  width: min(320px, 85vw);
  height: 100%;

  /* Appearance - frosted glass */
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.95),
      rgba(250, 250, 250, 0.92));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    -8px 0 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.05);

  /* Flex layout for header/content/footer */
  display: flex;
  flex-direction: column;

  /* Animation - slide in from right */
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete;
}

/* Open state */
.mobile-nav-dialog[open] {
  transform: translateX(0);
  opacity: 1;
}

/* Entry animation */
@starting-style {
  .mobile-nav-dialog[open] {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Backdrop styling */
.mobile-nav-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .mobile-nav-dialog[open]::backdrop {
    opacity: 0;
  }
}

/* Glowing accent edge */
.mobile-nav-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 50%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 30%, transparent) 50%,
      transparent 100%);
  z-index: 10;
}

/* Dark mode */
[data-theme="dark"] .mobile-nav-dialog {
  background: linear-gradient(180deg,
      rgba(30, 30, 32, 0.96),
      rgba(24, 24, 26, 0.92));
  box-shadow:
    -8px 0 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Dialog header (form method="dialog") */
.mobile-nav-dialog .mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

[data-theme="dark"] .mobile-nav-dialog .mobile-nav-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

/* Header actions container - Search + Close buttons */
.mobile-nav-dialog .mobile-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Navigation content */
.mobile-nav-dialog .mobile-nav-content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-nav-dialog .mobile-nav-content ul {
  padding: var(--space-3);
  margin: 0;
  list-style: none;
}

.mobile-nav-dialog .mobile-nav-content li {
  margin: 0;
}

/* Navigation links - same as classic mobile nav */
.mobile-nav-dialog .mobile-nav-content a,
.mobile-nav-dialog .mobile-nav-content .nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--transition-fast) var(--ease-out);
}

/* Non-clickable dropdown trigger in mobile nav */
.mobile-nav-dialog .mobile-nav-content .nav-dropdown-trigger {
  cursor: default;
}

.mobile-nav-dialog .mobile-nav-content a:hover,
.mobile-nav-dialog .mobile-nav-content .nav-dropdown-trigger:hover,
.mobile-nav-dialog .mobile-nav-content .nav-dropdown-trigger:focus {
  color: var(--color-primary);
  background: linear-gradient(180deg,
      var(--color-surface, var(--color-bg-elevated)),
      var(--color-bg-secondary));
  border-color: var(--color-border);
  box-shadow: var(--neumorphic-subtle);
  text-decoration: none;
}

.mobile-nav-dialog .mobile-nav-content li.active>a {
  color: var(--color-primary);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-elevated)),
      color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-secondary)));
  border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  box-shadow: var(--neumorphic-active);
  font-weight: var(--weight-semibold);
}

/* Submenus in dialog */
.mobile-nav-dialog .submenu {
  display: none;
  padding-left: var(--space-4);
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
  margin-left: var(--space-4);
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  list-style: none;
}

.mobile-nav-dialog .submenu a {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
}

.mobile-nav-dialog li.has-submenu.submenu-open>.submenu {
  display: block;
}

/* ============================================
   MOBILE NAV - Split Button Pattern
   Section link + chevron toggle for expand
   ============================================ */

/* Container for section link + toggle */
.mobile-nav-dialog .mobile-nav-item-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: var(--space-1);
}

/* Section link takes remaining space */
.mobile-nav-dialog .mobile-nav-item-row>a,
.mobile-nav-dialog .mobile-nav-item-row>.nav-dropdown-trigger {
  flex: 1;
  margin-bottom: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

/* Chevron toggle button */
.mobile-nav-dialog .mobile-nav-toggle-submenu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-left: 1px solid var(--color-border-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-dialog .mobile-nav-toggle-submenu:hover,
.mobile-nav-dialog .mobile-nav-toggle-submenu:focus {
  color: var(--color-primary);
  background: linear-gradient(180deg,
      var(--color-surface, var(--color-bg-elevated)),
      var(--color-bg-secondary));
  border-color: var(--color-border);
}

.mobile-nav-dialog .mobile-nav-toggle-submenu:active {
  transform: scale(0.95);
}

/* Chevron icon rotation */
.mobile-nav-dialog .mobile-nav-toggle-submenu svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast) var(--ease-out);
}

.mobile-nav-dialog li.has-submenu.submenu-open .mobile-nav-toggle-submenu svg {
  transform: rotate(180deg);
}

/* When row is in active state, style the toggle button too */
.mobile-nav-dialog li.active>.mobile-nav-item-row .mobile-nav-toggle-submenu,
.mobile-nav-dialog li.active-trail>.mobile-nav-item-row .mobile-nav-toggle-submenu {
  color: var(--color-primary);
  border-left-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
}

/* For items with href='#' (no navigation), make entire trigger clickable */
.mobile-nav-dialog .mobile-nav-content .nav-dropdown-trigger {
  cursor: pointer;
}

/* Dialog footer */
.mobile-nav-dialog .mobile-nav-footer {
  padding: var(--space-4);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

[data-theme="dark"] .mobile-nav-dialog .mobile-nav-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
}

/* Button styles in dialog */
.mobile-nav-dialog .mobile-nav-search,
.mobile-nav-dialog .mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: var(--space-8);
  padding: 0 0.75rem;
  background: linear-gradient(180deg,
      var(--color-surface, var(--color-bg-elevated)),
      var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--neumorphic-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-out);
}

.mobile-nav-dialog .mobile-nav-search:hover,
.mobile-nav-dialog .mobile-nav-close:hover {
  color: var(--color-text-primary);
  box-shadow: var(--neumorphic-hover);
  transform: translateY(-1px);
}

.mobile-nav-dialog .mobile-nav-search svg,
.mobile-nav-dialog .mobile-nav-close svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-dialog {
    transition: none;
  }

  .mobile-nav-dialog::backdrop {
    transition: none;
  }

  @starting-style {
    .mobile-nav-dialog[open] {
      transform: none;
      opacity: 1;
    }

    .mobile-nav-dialog[open]::backdrop {
      opacity: 1;
    }
  }
}
