/* Elev8 shared UI layer. Loaded on every main-site page AFTER /mobile.css.
   - Hamburger menu + sticky Call/Text bar (built by /site-ui.js)
   - Site-wide type/contrast fixes
   - Explicit mobile-stacking hooks: markup opts in with data-m="..." instead
     of more [style*=...] substring matching (see mobile.css for why that is
     fragile on hydrated pages). */

:root {
  --navy: #14304f;
  --navy-deep: #0f2440;
  --cream: #f6f2ea;
  --gold: #c6a15b;        /* buttons, rules, accents on navy */
  --gold-text: #7d5e26;   /* gold TEXT on cream/white: >= 4.96:1 (WCAG AA) */
}

/* Serif display numerals: Cormorant's default old-style "1" reads as "I".
   Set on body so every number inherits it; headings forced in case of
   inline overrides. */
body { font-variant-numeric: lining-nums; }
h1, h2, h3, h4, [data-num] {
  font-variant-numeric: lining-nums !important;
}
[data-num] { font-variant-numeric: lining-nums tabular-nums !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}

/* ---------- Hamburger menu ---------- */
#e8-burger, #e8-menu { display: none; }

@media (max-width: 900px) {
  /* Hide the inline desktop nav once the hamburger exists (the site has no
     in-content <nav> elements). Legacy pages keep their logo and lose only
     the links. */
  html.e8-has-menu nav:not(:has(.nav-links)):not(footer nav) { display: none !important; }
  html.e8-has-menu .nav-links { display: none !important; }

  #e8-burger {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    position: fixed; top: 10px; right: 14px; z-index: 120;
    width: 46px; height: 46px; padding: 0; border-radius: 50%;
    background: var(--navy); border: 1px solid rgba(246,242,234,0.35);
    box-shadow: 0 8px 22px -10px rgba(15,36,64,0.6); cursor: pointer;
  }
  #e8-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--cream); }
  #e8-burger:focus-visible, #e8-menu :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  #e8-menu:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 130;
    background: rgba(15,36,64,0.55); overscroll-behavior: contain;
  }
  .e8-menu-panel {
    background: var(--navy); color: var(--cream);
    max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 12px 20px calc(28px + env(safe-area-inset-bottom));
    font-family: 'Manrope', sans-serif;
    transform: translateY(-12px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
  }
  #e8-menu.is-open .e8-menu-panel { transform: none; opacity: 1; }
  .e8-menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 8px; }
  .e8-menu-brand { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 700; color: var(--cream) !important; text-decoration: none; }
  .e8-menu-brand span { color: var(--gold); }
  .e8-menu-close {
    position: relative; width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid rgba(246,242,234,0.35);
  }
  .e8-menu-close span { position: absolute; left: 12px; top: 22px; width: 20px; height: 2px; background: var(--cream); border-radius: 2px; }
  .e8-menu-close span:first-child { transform: rotate(45deg); }
  .e8-menu-close span:last-child { transform: rotate(-45deg); }

  .e8-menu-list, .e8-menu-sub { list-style: none; margin: 0; padding: 0; }
  .e8-menu-list > li { border-bottom: 1px solid rgba(246,242,234,0.14); }
  .e8-menu-list a, .e8-menu-list summary {
    display: block; padding: 15px 2px; font-size: 18px; font-weight: 600; line-height: 1.3;
    color: var(--cream) !important; text-decoration: none; cursor: pointer;
  }
  .e8-menu-list summary { list-style: none; position: relative; padding-right: 30px; }
  .e8-menu-list summary::-webkit-details-marker { display: none; }
  .e8-menu-list summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font-size: 22px; font-weight: 400; color: var(--gold); }
  .e8-menu-list details[open] > summary::after { content: '\2013'; }
  .e8-menu-sub { padding: 0 0 10px 14px; }
  .e8-menu-sub a { padding: 10px 2px; font-size: 16px; font-weight: 500; color: #d6dee9 !important; }
  .e8-menu-cta {
    display: block; margin-top: 22px; padding: 16px 20px; border-radius: 40px; text-align: center;
    background: var(--gold); color: var(--navy) !important; font-weight: 700; font-size: 16px; text-decoration: none;
  }

  html.e8-menu-open, html.e8-menu-open body { overflow: hidden !important; }
}

/* ---------- Sticky Call / Text bar (phones only) ---------- */
#e8-callbar { display: none; }
@media (max-width: 768px) {
  #e8-callbar {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(20,48,79,0.97); border-top: 1px solid rgba(198,161,91,0.35);
    box-shadow: 0 -10px 28px -14px rgba(15,36,64,0.55);
    font-family: 'Manrope', sans-serif;
  }
  #e8-callbar a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 46px;
    border-radius: 40px; font-size: 16px; font-weight: 700; text-decoration: none;
  }
  #e8-callbar .e8-call { background: var(--gold); color: var(--navy) !important; }
  #e8-callbar .e8-text { background: transparent; color: var(--cream) !important; border: 1px solid rgba(246,242,234,0.5); }
  #e8-callbar a:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
  /* Room so the bar never covers the footer or the final CTA. */
  html.e8-has-callbar body { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- FAQ accordion (<details data-faq>) ---------- */
details[data-faq] > summary { list-style: none; position: relative; }
details[data-faq] > summary::-webkit-details-marker { display: none; }
details[data-faq] > summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 400; color: var(--gold-text); line-height: 1;
}
details[data-faq][open] > summary::after { content: '\2013'; }
details[data-faq] > summary:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 4px; border-radius: 3px; }

/* ---------- Mobile type + stacking ---------- */
@media (max-width: 768px) {
  /* 20px side gutter everywhere (mobile.css uses 16px). */
  header, footer, section, div:has(> nav) { padding-left: 20px !important; padding-right: 20px !important; }
  /* Hero sections are sized for a desktop viewport; on phones let them fit content. */
  section[style*="min-height:"] { min-height: 0 !important; }
  /* Inner rows of a section already sit inside the section's 20px gutter. */
  section div:has(> nav), [data-m~="gutter"] { padding-left: 0 !important; padding-right: 0 !important; }
  [data-m~="gutter"] { padding-top: 24px !important; padding-bottom: 48px !important; }
  [data-m~="grid2"] li { font-size: 14.5px !important; line-height: 1.4 !important; }
  section p, section li, main p, main li { font-size: 17px !important; line-height: 1.6 !important; }
  h1 { font-size: clamp(32px, 9.4vw, 42px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(28px, 8vw, 34px) !important; line-height: 1.15 !important; }
  h3 { font-size: 22px !important; line-height: 1.25 !important; }
  /* Wide-tracked uppercase eyebrows: tighten so none wraps past two lines. */
  [style*="text-transform:"] { letter-spacing: 1.4px !important; }

  [data-m~="stack"] { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; }
  [data-m~="flat"] { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
  [data-m~="card"] { padding: 28px 20px !important; }
  [data-m~="hide"] { display: none !important; }
  [data-m~="show"] { display: block !important; }
  [data-m~="grid2"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px 16px !important; }
  [data-m~="row"] { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  [data-m~="row"] > * { text-align: left !important; }
  /* Body copy set in div/span (not p/li) still gets the 17px phone minimum. */
  [data-m~="body"], [data-m~="body"] span, [data-m~="body"] a { font-size: 17px !important; line-height: 1.6 !important; }
}
/* Mobile-only elements default to hidden on larger screens. */
@media (min-width: 769px) { [data-m~="show"] { display: none !important; } }