/*
 * Eagle Overland — Matembezi chrome
 *
 * Keeps Matembezi's deep emerald header and midnight footer while leaving
 * Eagle's original ivory, gold and forest page palette untouched.
 */

html body header.eo-navbar,
html body footer.footer.luxe,
html body .eo-mobile-drawer,
html body .eo-mobile-header {
  --eo-midnight: #051f20;
  --eo-deep-emerald: #0b2b26;
  --eo-forest-green: #163832;
  --eo-jade: #235347;
  --eo-sage: #8eb69b;
  --eo-mint: #daf1de;
}

/* Matembezi-style deep emerald navigation. */
html body header.eo-navbar,
html body header.eo-navbar.is-scrolled,
html body.page-home header.eo-navbar,
html body.page-home header.eo-navbar.is-scrolled {
  background: rgba(11, 43, 38, .98) !important;
  border-bottom-color: rgba(142, 182, 155, .24) !important;
  color: var(--eo-mint) !important;
  box-shadow: 0 10px 30px rgba(5, 31, 32, .18) !important;
}

html body header.eo-navbar :is(.brand, .brand-title, .eo-nav > a, .eo-nav-group > summary) {
  color: var(--eo-mint) !important;
}

html body header.eo-navbar :is(
  .eo-nav > a[aria-current="page"],
  .eo-nav-group.is-current > summary,
  .eo-nav-group[open] > summary
) {
  color: #ffffff !important;
}

html body header.eo-navbar .brand-sub {
  color: var(--eo-sage) !important;
}

html body header.eo-navbar .crest {
  background: var(--eo-forest-green);
  box-shadow: 0 0 0 1px rgba(142, 182, 155, .32);
}

html body.page-home header.eo-navbar .crest,
html body.page-home header.eo-navbar.is-scrolled .crest {
  border: 0 !important;
  background: var(--eo-forest-green) !important;
  box-shadow: 0 0 0 1px rgba(142, 182, 155, .32) !important;
}

html body header.eo-navbar .eo-nav > a::after,
html body header.eo-navbar .eo-nav-group > summary::before {
  background: var(--eo-sage);
}

html body header.eo-navbar .header-quote {
  background: var(--eo-mint) !important;
  border-color: var(--eo-mint) !important;
  color: var(--eo-deep-emerald) !important;
}

html body header.eo-navbar .header-quote:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--eo-midnight) !important;
}

html body header.eo-navbar :is(.nav-toggle, .eo-search-toggle) {
  border-color: rgba(142, 182, 155, .35) !important;
  background: var(--eo-forest-green) !important;
  color: var(--eo-mint) !important;
}

html body header.eo-navbar :is(.nav-toggle, .eo-search-toggle) i {
  color: var(--eo-mint) !important;
}

html body header.eo-navbar :is(.nav-toggle, .eo-search-toggle):hover {
  border-color: var(--eo-sage) !important;
  background: var(--eo-jade) !important;
}

/* Light mint dropdowns connect the emerald navigation to the page palette. */
html body header.eo-navbar :is(.eo-mega-panel, .eo-simple-panel) {
  background: var(--eo-mint);
  border-color: var(--eo-sage);
  color: var(--eo-deep-emerald);
}

html body header.eo-navbar :is(.eo-mega-heading, .eo-menu-intro) {
  border-bottom-color: var(--eo-sage);
}

html body header.eo-navbar .eo-mega-card small {
  color: var(--eo-jade);
}

html body header.eo-navbar .eo-nav .eo-mega-card:is(:hover, :focus-visible, [aria-current="page"]),
html body header.eo-navbar .eo-simple-panel .eo-menu-links a:is(:hover, :focus-visible, [aria-current="page"]) {
  background: var(--eo-sage);
  color: var(--eo-deep-emerald);
}

html body header.eo-navbar .eo-nav .eo-mega-card:is(:hover, :focus-visible, [aria-current="page"]) small {
  color: var(--eo-deep-emerald);
}

html body .eo-search-dialog {
  background: #ffffff;
  border-color: var(--eo-sage);
  color: var(--eo-deep-emerald);
}

html body header.eo-navbar :is(.eo-mega-panel, .eo-simple-panel) :is(a, strong, h2, h3) {
  color: var(--eo-deep-emerald);
}

html body .eo-mobile-drawer,
html body .eo-mobile-header {
  background: var(--eo-deep-emerald);
  color: var(--eo-mint);
  border-color: rgba(142, 182, 155, .2);
}

html body .eo-mobile-drawer :is(a, summary, button, strong) {
  color: var(--eo-mint);
}

html body .eo-mobile-drawer :is(i, small, span) {
  color: var(--eo-sage);
}

/* Mobile disclosures use the same light surface and readable green ink. */
html body .eo-mobile-drawer .eo-drawer-group > div {
  background: var(--eo-mint);
  border-left-color: var(--eo-sage);
  border-radius: 8px 16px 8px 8px;
}

html body .eo-mobile-drawer .eo-drawer-group > div :is(a, strong, span, i) {
  color: var(--eo-deep-emerald);
}

html body .eo-mobile-drawer .eo-drawer-group > div small {
  color: var(--eo-jade);
}

html body .eo-mobile-drawer .eo-drawer-group > div a:is(:hover, :focus-visible, [aria-current="page"]) {
  background: var(--eo-sage);
  color: var(--eo-deep-emerald);
}

html body .eo-mobile-drawer .eo-drawer-group > summary > span[aria-hidden="true"] {
  background: var(--eo-mint);
  color: var(--eo-deep-emerald);
}

html body .eo-mobile-drawer .eo-drawer-group[open] > summary > span[aria-hidden="true"] {
  background: var(--eo-sage);
}

html body .eo-mobile-drawer .eo-drawer-group > div a:is(:hover, :focus-visible, [aria-current="page"]) small {
  color: var(--eo-deep-emerald);
}

/* Mark the current page and section with green surfaces in the mobile menu. */
html body #eoMobileMenu .eo-drawer-links > a:is(.active, .is-active, [aria-current="page"], [aria-current="location"]),
html body #eoMobileMenu .eo-drawer-links .eo-drawer-group.is-current > summary {
  background: var(--eo-forest-green);
  border-color: rgba(142, 182, 155, .38);
  color: var(--eo-mint);
  box-shadow: inset 3px 0 var(--eo-sage);
}

html body #eoMobileMenu .eo-drawer-links > a:is(.active, .is-active, [aria-current="page"], [aria-current="location"]) {
  background: var(--eo-mint);
  color: var(--eo-deep-emerald);
  padding-inline: 16px;
  border-radius: 8px;
}

html body #eoMobileMenu .eo-drawer-links > a:is(.active, .is-active, [aria-current="page"], [aria-current="location"]) > span {
  color: var(--eo-jade);
}

html body #eoMobileMenu .eo-drawer-links .eo-drawer-group > div a:is(.active, .is-active, [aria-current="page"], [aria-current="location"]) {
  background: var(--eo-sage);
  color: var(--eo-deep-emerald);
  box-shadow: inset 3px 0 var(--eo-jade);
}

html body #eoMobileMenu .eo-drawer-links .eo-drawer-group > div a:is(.active, .is-active, [aria-current="page"], [aria-current="location"]) small {
  color: var(--eo-deep-emerald);
}

/* Mobile navigation — editorial journey index. */
@media (max-width: 980px) {
  html body header.eo-navbar .nav-toggle {
    background: var(--eo-mint);
    border-color: rgba(142, 182, 155, .82);
    color: var(--eo-deep-emerald);
    box-shadow: 0 7px 18px rgba(5, 31, 32, .18);
  }

  html body header.eo-navbar .eo-search-toggle {
    border-color: rgba(142, 182, 155, .42);
    color: var(--eo-mint);
  }

  html body #eoMobileMenu {
    width: min(420px, calc(100vw - 12px));
    padding: calc(22px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
    border-left: 1px solid rgba(142, 182, 155, .25);
    border-radius: 28px 0 0 28px;
    background:
      radial-gradient(circle at 8% 0%, rgba(142, 182, 155, .13), transparent 28%),
      var(--eo-deep-emerald);
    box-shadow: -22px 0 55px rgba(5, 31, 32, .3);
  }

  html body #eoMobileMenu .eo-mobile-header {
    top: calc(-22px - env(safe-area-inset-top));
    margin: 0 0 10px;
    padding: 10px 0 18px;
    border-bottom-color: rgba(142, 182, 155, .22);
    background: linear-gradient(180deg, var(--eo-deep-emerald) 82%, rgba(11, 43, 38, .94));
  }

  html body #eoMobileMenu .eo-mobile-heading {
    padding-left: 12px;
  }

  html body #eoMobileMenu .eo-mobile-heading > span {
    color: var(--eo-sage);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
  }

  html body #eoMobileMenu .eo-mobile-heading > strong {
    margin-top: 7px;
    color: var(--eo-mint);
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.08;
    letter-spacing: -.025em;
  }

  html body #eoMobileMenu .eo-nav-close {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-color: rgba(218, 241, 222, .72);
    border-radius: 50%;
    color: var(--eo-mint);
  }

  html body #eoMobileMenu .eo-drawer-links {
    counter-reset: eo-mobile-section;
    gap: 3px;
  }

  html body #eoMobileMenu .eo-drawer-links > a {
    min-height: 56px;
    margin-bottom: 3px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--eo-mint);
    font-size: 16px;
    font-weight: 600;
  }

  html body #eoMobileMenu .eo-drawer-links > a::before {
    content: "00";
    width: 26px;
    color: var(--eo-sage);
    font: 600 10px/1 var(--font-sans);
    letter-spacing: .09em;
  }

  html body #eoMobileMenu .eo-drawer-links > a > span {
    margin-left: auto;
  }

  html body #eoMobileMenu .eo-drawer-group {
    counter-increment: eo-mobile-section;
    border-bottom: 0;
  }

  html body #eoMobileMenu .eo-drawer-group > summary {
    min-height: 62px;
    gap: 10px;
    padding: 0 10px;
    border-radius: 12px;
    color: var(--eo-mint);
    font-size: 16px;
    font-weight: 500;
  }

  html body #eoMobileMenu .eo-drawer-group > summary::before {
    content: counter(eo-mobile-section, decimal-leading-zero);
    width: 26px;
    color: var(--eo-sage);
    font: 600 10px/1 var(--font-sans);
    letter-spacing: .09em;
  }

  html body #eoMobileMenu .eo-drawer-group > summary > span[aria-hidden="true"] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    margin-left: auto;
    border: 1px solid rgba(142, 182, 155, .35);
    background: rgba(218, 241, 222, .96);
  }

  html body #eoMobileMenu .eo-drawer-group[open] > summary {
    margin-bottom: 6px;
    background: rgba(22, 56, 50, .72);
  }

  html body #eoMobileMenu .eo-drawer-group.is-current > summary {
    padding-inline: 10px;
    border: 0;
    box-shadow: none;
  }

  html body #eoMobileMenu .eo-drawer-group > div {
    margin: 0 0 14px 36px;
    padding: 8px;
    border: 1px solid rgba(142, 182, 155, .5);
    border-left-width: 1px;
    border-radius: 12px 22px 12px 12px;
    background: linear-gradient(145deg, #e8f6e9, var(--eo-mint));
  }

  html body #eoMobileMenu .eo-drawer-group > div a {
    min-height: 48px;
    padding: 11px 12px;
    border-radius: 8px;
    color: var(--eo-deep-emerald);
    font-size: 13px;
    line-height: 1.45;
  }

  html body #eoMobileMenu .eo-drawer-group > div a + a {
    border-top: 0;
  }

  html body #eoMobileMenu .eo-drawer-links .eo-drawer-group > div a:is(.active, .is-active, [aria-current="page"], [aria-current="location"]) {
    position: relative;
    padding-left: 30px;
    border: 0;
    background: transparent;
    color: var(--eo-deep-emerald);
    box-shadow: none;
    font-weight: 700;
  }

  html body #eoMobileMenu .eo-drawer-links .eo-drawer-group > div a:is(.active, .is-active, [aria-current="page"], [aria-current="location"])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--eo-jade);
    transform: translateY(-50%);
  }

  html body #eoMobileMenu .eo-drawer-links .eo-drawer-group > div a:is(.active, .is-active, [aria-current="page"], [aria-current="location"]) small {
    color: var(--eo-jade);
    font-weight: 500;
  }

  html body #eoMobileMenu .eo-drawer-actions {
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(218, 241, 222, .22);
  }

  html body #eoMobileMenu .eo-drawer-actions a {
    min-height: 54px;
    padding-inline: 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
  }

  html body #eoMobileMenu .eo-drawer-actions .cta-mobile {
    border-color: var(--eo-mint);
    background: var(--eo-mint);
    color: var(--eo-deep-emerald);
  }

  html body #eoMobileMenu .eo-drawer-actions .wa-mobile {
    border-color: rgba(142, 182, 155, .54);
    background: rgba(22, 56, 50, .72);
    color: var(--eo-mint);
  }

  html body #eoMobileMenu .eo-drawer-contact {
    gap: 4px;
    margin-top: 16px;
    padding-top: 14px;
    border-top-color: rgba(218, 241, 222, .18);
  }

  html body #eoMobileMenu .eo-drawer-contact a {
    min-height: 42px;
    color: var(--eo-mint);
  }

  html body #eoMobileMenu .eo-drawer-contact > span {
    margin-top: 5px;
    color: rgba(218, 241, 222, .62);
  }
}

@media (max-width: 360px) {
  html body #eoMobileMenu {
    width: calc(100vw - 8px);
    padding-inline: 16px;
    border-radius: 22px 0 0 22px;
  }

  html body #eoMobileMenu .eo-drawer-group > div {
    margin-left: 28px;
  }
}

/* Midnight forest footer with mint typography and sage details. */
html body footer.footer.luxe {
  --eo-footer-bg: var(--eo-midnight);
  --eo-footer-text: var(--eo-mint);
  --eo-footer-muted: rgba(218, 241, 222, .68);
  --eo-footer-soft: #ffffff;
  --eo-footer-line: rgba(142, 182, 155, .2);
  background:
    radial-gradient(circle at 10% 0%, rgba(142, 182, 155, .10), transparent 30%),
    linear-gradient(180deg, var(--eo-midnight), #031819);
  border-top-color: rgba(142, 182, 155, .28);
}

html body footer.footer.luxe .footer-cta {
  background: transparent;
  border-color: rgba(142, 182, 155, .2);
}

html body footer.footer.luxe .cta-btn.primary {
  background: var(--eo-mint);
  border-color: var(--eo-mint);
  color: var(--eo-deep-emerald);
}

html body footer.footer.luxe .cta-btn.primary:hover {
  background: #ffffff;
  border-color: var(--eo-sage);
  color: var(--eo-midnight);
}

html body footer.footer.luxe :is(.brand-sub, .footer-kicker, .footer-heading, .footer-contact-heading) {
  color: var(--eo-sage);
}

html body footer.footer.luxe :is(.footer-verse, .f-links a:hover, .footer-legal a:hover) {
  color: var(--eo-mint);
}

/* Footer links use a soft mint highlight rather than an underline. */
html body footer.footer.luxe :is(.f-links a, .footer-legal a, .footer-email-action, .footer-address a) {
  text-decoration: none;
  transition: color .18s ease;
}

html body footer.footer.luxe :is(.f-links a, .footer-legal a, .footer-email-action, .footer-address a):is(:hover, :focus-visible, .is-active, .is-section-active, [aria-current]) {
  color: var(--eo-sage);
  text-decoration: none;
  text-shadow: none;
}

html body footer.footer.luxe .f-links a::after,
html body footer.footer.luxe .f-links a:is(:hover, :focus-visible, .is-active, .is-section-active)::after {
  display: none;
}

html body footer.footer.luxe :is(a, button):focus-visible {
  outline: 2px solid var(--eo-sage);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  html body header.eo-navbar,
  html body header.eo-navbar.is-scrolled {
    background: var(--eo-deep-emerald) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body header.eo-navbar *,
  html body footer.footer.luxe * {
    transition-duration: .01ms !important;
  }
}