/* emergence-theme-header.css — header/nav + theme variables ONLY.
   Extracted from emergence-theme.css on 2026-07-26.
   Use on self-styled (redesigned) pages: gives the shared header light/dark
   theming WITHOUT the page-wide !important overrides (card backgrounds,
   heading readability pills, .shell gutter caps) that fight custom page CSS.
   Legacy pages keep including the full emergence-theme.css until redesigned. */

:root, [data-emergence-theme="light"] {
  color-scheme: light;

  /* Brand allocations */
  --em-color-brand-primary: #3f7f48;
  --em-color-brand-primary-hover: #2f6f3a;
  --em-color-brand-primary-soft: #6aa36e;
  --em-color-brand-forest: #275b32;
  --em-color-brand-deep: #163820;
  --em-color-highlight-neon: #9be319;
  --em-color-highlight-neon-soft: rgba(113, 166, 50, .16);
  --em-color-accent-cyan: #2c8188;
  --em-color-accent-amber: #a36f26;
  --em-color-accent-violet: #7063a8;
  --em-color-danger: #b4473e;

  /* Text */
  --em-text-primary: #1e2b20;
  --em-text-strong: #071006;
  --em-text-muted: #536354;
  --em-text-soft: #6d7c6d;
  --em-text-dim: #8b9789;
  --em-text-on-accent: #ffffff;

  /* Surfaces */
  --em-surface-page: transparent;
  --em-surface-page-2: transparent;
  --em-surface-panel-solid: transparent;
  --em-surface-panel: transparent;
  --em-surface-panel-strong: transparent;
  --em-surface-panel-soft: transparent;
  --em-surface-card: transparent;
  --em-surface-card-hover: transparent;
  --em-surface-input: rgba(255, 255, 255, .82);
  --em-surface-header: #050806;
  --em-texture-card: none;
  --em-texture-light-wallpaper: url("/assets/light-theme/emergence-light-lab-default-20260625.webp");
  --em-light-page-background:
    var(--em-texture-light-wallpaper) center / cover fixed no-repeat;

  /* Borders and shadows */
  --em-border-subtle: rgba(14, 42, 18, .12);
  --em-border-soft: rgba(40, 92, 48, .16);
  --em-border-accent: rgba(63, 127, 72, .24);
  --em-border-accent-strong: rgba(63, 127, 72, .44);
  --em-shadow-panel: 0 24px 80px rgba(57, 78, 54, .18);
  --em-shadow-deep: 0 34px 110px rgba(51, 73, 48, .24);
  --em-glow-accent: 0 0 28px rgba(63, 127, 72, .20);
  --em-glow-neon: 0 0 24px rgba(130, 207, 33, .24);

  /* Component allocations */
  --em-button-primary-bg: linear-gradient(180deg, #5f9e68, #2f6f3a);
  --em-button-primary-text: #ffffff;
  --em-button-secondary-bg: rgba(255, 255, 255, .58);
  --em-button-secondary-text: var(--em-text-primary);
  --em-input-bg: var(--em-surface-input);
  --em-input-border: rgba(25, 60, 30, .18);
  --em-focus-ring: 0 0 0 3px rgba(63, 127, 72, .20);

  /* Legacy compatibility aliases */
  --bg: var(--em-surface-page);
  --bg2: var(--em-surface-page-2);
  --void: var(--em-surface-page);
  --black: var(--em-surface-page);
  --ink: var(--em-text-primary);
  --text: var(--em-text-primary);
  --muted: var(--em-text-muted);
  --soft: var(--em-text-soft);
  --dim: var(--em-text-dim);
  --quiet: var(--em-text-soft);
  --green: var(--em-color-brand-primary);
  --green2: var(--em-color-brand-primary-soft);
  --green-2: var(--em-color-brand-primary-soft);
  --green-soft: var(--em-color-highlight-neon-soft);
  --acid: var(--em-color-highlight-neon);
  --acid2: var(--em-color-brand-primary-soft);
  --cyan: var(--em-color-accent-cyan);
  --amber: var(--em-color-accent-amber);
  --violet: var(--em-color-accent-violet);
  --red: var(--em-color-danger);
  --line: var(--em-border-accent);
  --line2: var(--em-border-accent-strong);
  --line-soft: var(--em-border-subtle);
  --line-strong: var(--em-border-accent-strong);
  --panel: var(--em-surface-card);
  --panel2: var(--em-surface-panel-soft);
  --panel-bg: var(--em-surface-panel-solid);
  --panel-soft: var(--em-surface-card);
  --panel-strong: var(--em-surface-panel-strong);
  --card-texture: var(--em-texture-card);
  --shadow: var(--em-shadow-deep);
  --max: var(--em-max-content);

  /* Shared header aliases */
  --shared-header-bg: var(--em-surface-header);
  --shared-card-texture: var(--em-texture-card);
  --shared-panel: var(--em-surface-panel-strong);
  --shared-link-bg: var(--em-surface-card);
  --shared-text: var(--em-text-primary);
  --shared-muted: var(--em-text-muted);
  --shared-green: var(--em-color-brand-primary);
  --shared-line: var(--em-border-accent);
  --shared-max: var(--em-max-content);
}

html[data-emergence-theme="light"] :where(.shared-dropdown__title, .shared-dropdown__note) {
  color: inherit;
}

html[data-emergence-theme="light"] :where(.shared-dropdown__note) {
  color: var(--em-text-muted) !important;
}

html[data-emergence-theme="light"] :where(.shared-dropdown, .shared-dropdown__item) {
  color: var(--em-text-primary);
  background: var(--em-surface-card) !important;
  border-color: var(--em-border-accent) !important;
  box-shadow: none !important;
}

html[data-emergence-theme="light"] .shared-site-header {
  color: #edf4e9;
  background-color: #050806 !important;
  background-image:
    radial-gradient(circle at 18% 0%, rgba(176, 255, 0, .14), transparent 34%),
    radial-gradient(circle at 78% 8%, rgba(72, 255, 206, .10), transparent 38%),
    linear-gradient(180deg, rgba(8, 13, 10, .98) 0%, rgba(4, 7, 5, .98) 60%, rgb(2, 4, 3) 100%) !important;
  border-color: rgba(176, 255, 0, .18) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .46);
}

html[data-emergence-theme="light"] .shared-mobile-drawer__panel {
  color: var(--shared-text);
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(30, 70, 36, .12) !important;
  box-shadow: 0 18px 50px rgba(70, 90, 66, .16);
}

html[data-emergence-theme="light"] :where(.shared-nav-link, .shared-nav-trigger, .shared-login, .shared-theme-toggle, .shared-menu-toggle) {
  background: rgba(4, 9, 6, .72) !important;
  border-color: rgba(176, 255, 0, .18) !important;
  color: #edf4e9 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

html[data-emergence-theme="light"] :where(.shared-nav-link:hover, .shared-nav-link.active, .shared-nav-trigger:hover, .shared-nav-trigger.active, .shared-nav-group.open .shared-nav-trigger, .shared-login:hover, .shared-login.active, .shared-theme-toggle:hover, .shared-menu-toggle:hover) {
  color: var(--em-color-highlight-neon) !important;
  background: rgba(6, 15, 8, .86) !important;
  border-color: rgba(176, 255, 0, .34) !important;
}

:where(.shared-dropdown, .shared-dropdown__item) {
  border-color: var(--em-border-accent);
}

:where(.shared-dropdown, .shared-dropdown__item) {
  background: var(--em-surface-card);
}

:where(.shared-nav-link, .shared-nav-trigger, .shared-login, .shared-cta) {
  font-family: inherit;
}

:where(.shared-cta) {
  background: var(--em-button-primary-bg);
  color: var(--em-button-primary-text);
  border-color: transparent;
}

html[data-emergence-theme="light"] :where(.btn.secondary, .btn-secondary, .secondary, a.btn:not(.primary), button:not([type="submit"]):not(.shared-menu-toggle):not(.shared-nav-trigger):not(.shared-theme-toggle)) {
  background: var(--em-button-secondary-bg) !important;
  color: var(--em-button-secondary-text) !important;
  border-color: var(--em-border-accent) !important;
}

:where(.shared-nav-link:hover, .shared-nav-trigger:hover) {
  border-color: var(--em-border-accent-strong);
}

html[data-emergence-theme="light"] :where(.shared-dropdown, .shared-dropdown__item) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:where(.shared-dropdown__title) {
  color: var(--em-color-brand-primary);
}

html[data-emergence-theme="light"] :where(.shared-dropdown, .shared-dropdown__item) {
  background: var(--em-surface-card) !important;
  background-color: var(--em-surface-card) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 16px 48px rgba(44, 72, 42, .10) !important;
}

html[data-emergence-theme="light"] :where(.shared-site-header, .shared-mobile-drawer__panel)::before, html[data-emergence-theme="light"] :where(.shared-site-header, .shared-mobile-drawer__panel)::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 700px) {
.shared-nav-group:not(:hover):not(.open):not(:focus-within) .shared-dropdown {
    display: none !important;
  }
.shared-nav-group:hover .shared-dropdown, .shared-nav-group.open .shared-dropdown, .shared-nav-group:focus-within .shared-dropdown {
    display: grid !important;
  }
:where(.shared-dropdown) {
    left: auto !important;
    right: 0 !important;
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
  }
}

html[data-emergence-theme="light"] :where(.shared-dropdown, .shared-mobile-drawer__panel) {
  color: #102010 !important;
  background: rgba(248, 252, 245, .98) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,248,235,.96)) !important;
  border-color: var(--em-readability-card-border-strong) !important;
  box-shadow: 0 22px 70px rgba(20, 35, 20, .22) !important;
}

html[data-emergence-theme="light"] :where(.shared-dropdown__item) {
  color: #102010 !important;
  background: rgba(242, 250, 238, .92) !important;
  border-color: rgba(45, 96, 53, .18) !important;
}

html[data-emergence-theme="light"] :where(.shared-dropdown__title, .shared-dropdown__note) {
  color: #102010 !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] :where(.shared-cta) {
  color: #061006 !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] :where(.btn.secondary, .btn-secondary, .secondary, a.btn:not(.primary), button:not([type="submit"]):not(.shared-menu-toggle):not(.shared-nav-trigger):not(.shared-theme-toggle)) {
  color: #102010 !important;
  background: rgba(248, 252, 245, .82) !important;
  border-color: var(--em-readability-card-border) !important;
}

@media (max-width: 700px) {
html[data-emergence-theme="light"] :where(.shared-dropdown) {
    left: auto !important;
    right: 0 !important;
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
  }
.shared-nav-group:not(:hover):not(.open):not(:focus-within) .shared-dropdown {
    display: none !important;
  }
}

and include small label chips plus classless trust rows. */ html[data-emergence-theme="light"] :where(.shared-cta) {
  color: #061006 !important;
  background-color: var(--em-color-highlight-neon) !important;
  background-image: linear-gradient(180deg, #c8ff43, #6ebd1f) !important;
  text-shadow: none !important;
}

/* 2026-07-01: final override for phone-width shared header menus. This file loads after shared-header.css {
  .shared-site-header {
    overflow: visible !important;
  }

  .shared-nav-group {
    position: static !important;
  }

  .shared-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - 128px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    z-index: 1002 !important;
  }

  .shared-dropdown__item {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .shared-dropdown__title,
  .shared-dropdown__note {
    overflow-wrap: anywhere !important;
  }
}

html[data-emergence-theme="dark"] :where(.shared-dropdown__note) {
  color: var(--em-text-muted) !important;
  text-shadow: var(--em-readability-dark-small-shadow) !important;
}

html[data-emergence-theme="dark"] :where(.shared-dropdown__title) {
  color: var(--em-text-strong) !important;
  text-shadow: var(--em-readability-dark-small-shadow) !important;
}

html[data-emergence-theme="dark"] :where(.shared-dropdown, .shared-mobile-drawer__panel) {
  color: #f4f8ef !important;
  background:
    linear-gradient(180deg, rgba(5, 10, 7, .985), rgba(1, 4, 3, .995)),
    var(--em-texture-card) center / cover no-repeat !important;
  border-color: var(--em-readability-dark-border-strong) !important;
}

html[data-emergence-theme="dark"] :where(.shared-dropdown__item, .shared-mobile-drawer a) {
  color: #f4f8ef !important;
  background:
    linear-gradient(180deg, rgba(10, 18, 12, .96), rgba(3, 7, 4, .985)),
    var(--em-texture-card) center / cover no-repeat !important;
  border-color: rgba(216, 255, 180, .16) !important;
}

html[data-emergence-theme="dark"] :where(.shared-dropdown__title, .shared-dropdown__note, .shared-mobile-drawer a) {
  color: #f4f8ef !important;
  text-shadow: var(--em-readability-dark-small-shadow) !important;
}

.shared-site-header, html[data-emergence-theme="light"] .shared-site-header, html[data-emergence-theme="dark"] .shared-site-header {
  color: #f4f8ef !important;
  background-color: #050806 !important;
  background-image: var(--em-header-bg-canonical) !important;
  border-bottom: 1px solid rgba(176,255,0,.24) !important;
}

.shared-site-header__inner, .shared-mobile-drawer {
  max-width: var(--em-page-max) !important;
}

:where(.shared-nav-link, .shared-nav-trigger, .shared-login, .shared-theme-toggle, .shared-menu-toggle), html[data-emergence-theme="light"] :where(.shared-nav-link, .shared-nav-trigger, .shared-login, .shared-theme-toggle, .shared-menu-toggle), html[data-emergence-theme="dark"] :where(.shared-nav-link, .shared-nav-trigger, .shared-login, .shared-theme-toggle, .shared-menu-toggle) {
  color: #f4f8ef !important;
  background: rgba(3,8,5,.86) !important;
  border-color: rgba(176,255,0,.24) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
}

:where(.shared-nav-link, .shared-nav-trigger, .shared-login, .shared-theme-toggle, .shared-menu-toggle):hover, .shared-nav-link.active, .shared-nav-trigger.active, .shared-nav-group.open .shared-nav-trigger {
  color: var(--em-green) !important;
  background: rgba(7,18,8,.96) !important;
  border-color: rgba(176,255,0,.48) !important;
}

.shared-cta, .shared-signup, .shared-account, .shared-site-header .shared-cta {
  color: #071207 !important;
  background: linear-gradient(180deg, #c9ff42, #5c9d2e) !important;
  border-color: rgba(205,255,75,.74) !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] .shared-dropdown, html[data-emergence-theme="light"] .shared-mobile-drawer__panel {
  background: #f8fcf4 !important;
  color: #071207 !important;
  border-color: rgba(54,112,56,.28) !important;
  box-shadow: 0 22px 45px rgba(5,14,7,.24) !important;
}

html[data-emergence-theme="light"] .shared-dropdown__item, html[data-emergence-theme="light"] .shared-mobile-drawer a {
  background: #ffffff !important;
  color: #071207 !important;
  border-color: rgba(54,112,56,.18) !important;
}

html[data-emergence-theme="light"] .shared-dropdown__item:hover, html[data-emergence-theme="light"] .shared-dropdown__item.active, html[data-emergence-theme="light"] .shared-mobile-drawer a:hover, html[data-emergence-theme="light"] .shared-mobile-drawer a.active {
  background: #eef7e9 !important;
  color: #071207 !important;
  border-color: rgba(54,112,56,.34) !important;
}

html[data-emergence-theme="light"] .shared-dropdown__title, html[data-emergence-theme="light"] .shared-mobile-drawer a {
  color: #071207 !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] .shared-dropdown__note {
  color: #486049 !important;
  text-shadow: none !important;
}

/* 2026-07-03: Header breakpoint hardening. There should be no tablet-width state where the two dropdown triggers stack. Full desktop nav appears only when it fits; narrower widths use compact nav. */ .shared-nav {
  flex-wrap: nowrap !important;
}

@media (max-width: 1099px) {
.shared-site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 9px 16px !important;
  }
.shared-brand img {
    height: 34px !important;
    max-width: min(28vw, 116px) !important;
  }
.shared-actions {
    display: none !important;
  }
.shared-nav {
    min-width: 0 !important;
    justify-self: end !important;
    justify-content: end !important;
    gap: 6px !important;
  }
.shared-nav-trigger {
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
  }
.shared-nav-label-full {
    display: none !important;
  }
.shared-nav-label-short {
    display: inline !important;
  }
.shared-menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    justify-self: end !important;
  }
.shared-dropdown {
    left: auto !important;
    right: 0 !important;
    min-width: min(320px, calc(100vw - 28px)) !important;
    max-height: min(72vh, calc(100svh - 92px)) !important;
  }
}

@media (max-width: 420px) {
.shared-site-header__inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 5px !important;
  }
.shared-brand img {
    height: 30px !important;
    max-width: 88px !important;
  }
.shared-nav {
    gap: 4px !important;
  }
.shared-nav-trigger {
    min-height: 34px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }
.shared-menu-toggle {
    width: 36px !important;
    min-height: 36px !important;
  }
}