/* ==========================================================================
   meridian — marketing.css
   --------------------------------------------------------------------------
   Loaded by shared/page-shell/lx/public.php, right after /css/style.css (and
   any page-specific extra stylesheet), on index.php and everything one hop
   from its nav/footer.

   /css/style.css and /css/indexstyle.css already implement every marketing
   page's actual body content (hero, pricing cards, FAQ, disclaimer bar,
   footer columns, etc.) entirely through custom properties — they declare no
   raw colour outside their own :root/[data-theme="dark"] blocks. That means
   the whole ~4000-line pair can be re-themed onto Meridian's warm palette by
   overriding just those custom properties here, once, rather than rewriting
   hundreds of individual selectors — the same bridge technique used for
   themes/meridian/css/auth.css. Load order (style.css, then this file) is
   what makes the override win; the selectors underneath are untouched.

   The only markup swapped for real (not just re-tinted) is the site chrome —
   header/nav/footer/theme-toggle/font-size/lang — which now comes from
   public-topbar.php + public-footer.php + lite-controls.php instead of
   includes/header.php + includes/footer.php. Old chrome-only selectors left
   over in style.css (#site-header, #navDropdown, .aml-lang-select, etc.)
   simply match nothing on a migrated page and are inert.
   ========================================================================== */

:root {
  --bg-base:       var(--lx-bg);
  --bg-elevated:   var(--lx-bg-sunk);
  --bg-card:       var(--lx-bg-solid);
  --bg-surface:    var(--lx-bg-sunk);
  --bg-nav:        var(--lx-bg-solid);
  --bg-input:      var(--lx-fill);
  /* #site-footer (below) hardcodes white/rgba(255,255,255,…) text and never
     reacts to [data-theme] — it was always a fixed dark navy band regardless
     of page mode. Keep that: a literal dark value here, not --lx-bg-solid
     (which flips light under [data-theme="light"] and would leave white
     footer text unreadable). Matches Meridian's own dark-mode surface tone. */
  --bg-footer:     #12151C;

  --accent:        var(--lx-accent);
  --accent-2:      var(--lx-accent);
  --accent-light:  var(--lx-accent);
  --accent-dark:   var(--lx-accent);
  --accent-xdark:  var(--lx-accent);

  --glow-a:        var(--lx-accent-soft);
  --glow-b:        var(--lx-accent-soft);
  --glow-c:        var(--lx-accent-soft);

  --text-1:        var(--lx-t1);
  --text-2:        var(--lx-t2);
  --text-3:        var(--lx-t3);
  --text-4:        var(--lx-t4);
  --text-inv:      var(--lx-t-inv);
  /* style.css/indexstyle.css's inline-link/stat-number colour. --lx-link is a
     cold blue that clashes with Meridian's warm cream/gold palette — a plum
     violet reads as intentional next to --lx-accent instead. Scoped to this
     one token only; --accent (Meridian's own gold) is untouched. */
  --text-violet:   #6B3F8C;
  --text-accent:   var(--text-violet);

  --glass-fill:    var(--lx-glass);
  --glass-fill-2:  var(--lx-glass-strong);
  --glass-fill-3:  var(--lx-glass-subtle);
  --glass-border:  var(--lx-glass-border);
  --glass-border-2:var(--lx-glass-border-strong);
  --glass-blur:    var(--lx-glass-blur-sm);
  --glass-blur-sm: var(--lx-glass-blur-sm);
  --glass-blur-lg: var(--lx-glass-blur);
  --glass-shadow:  var(--lx-glass-shadow);
  --glass-shadow-2:var(--lx-glass-shadow-floating);
  --glass-shadow-3:var(--lx-glass-shadow-overlay);

  --success:  var(--lx-success);
  --warning:  var(--lx-warning);
  --danger:   var(--lx-danger);
  --info:     var(--lx-info);

  --f-display: var(--lx-f-display);
  --f-body:    var(--lx-f-ui);
  --f-mono:    var(--lx-f-mono);

  --r-sm:   var(--lx-r-sm);
  --r-md:   var(--lx-r-md);
  --r-lg:   var(--lx-r-lg);
  --r-xl:   var(--lx-r-xl);
  --r-2xl:  var(--lx-r-2xl);
  --r-full: var(--lx-r-full);

  --ease:        var(--lx-ease);
  --ease-out:    var(--lx-ease-out);
  --ease-spring: var(--lx-ease);
  --t-fast:      var(--lx-t-fast);
  --t-base:      var(--lx-t-base);
  --t-slow:      var(--lx-t-slow);
  --t-xslow:     var(--lx-t-slow);
}

[data-theme="dark"] {
  --bg-base:       var(--lx-bg);
  --bg-elevated:   var(--lx-bg-sunk);
  --bg-card:       var(--lx-bg-solid);
  --bg-surface:    var(--lx-bg-sunk);
  --bg-nav:        var(--lx-bg-solid);
  --bg-input:      var(--lx-fill);

  --accent:        var(--lx-accent);
  --accent-2:      var(--lx-accent);
  --accent-light:  var(--lx-accent);
  --accent-dark:   var(--lx-accent);
  --accent-xdark:  var(--lx-accent);

  --glow-a:        var(--lx-accent-soft);
  --glow-b:        var(--lx-accent-soft);
  --glow-c:        var(--lx-accent-soft);

  --text-1:        var(--lx-t1);
  --text-2:        var(--lx-t2);
  --text-3:        var(--lx-t3);
  --text-4:        var(--lx-t4);
  --text-violet:   #C3A0E8;
  --text-accent:   var(--text-violet);

  --glass-fill:    var(--lx-glass);
  --glass-fill-2:  var(--lx-glass-strong);
  --glass-fill-3:  var(--lx-glass-subtle);
  --glass-border:  var(--lx-glass-border);
  --glass-border-2:var(--lx-glass-border-strong);
  --glass-shadow:  var(--lx-glass-shadow);
  --glass-shadow-2:var(--lx-glass-shadow-floating);
  --glass-shadow-3:var(--lx-glass-shadow-overlay);

  --success:  var(--lx-success);
  --info:     var(--lx-info);
}

/* ── Site chrome (public-topbar.php / public-footer.php) ─────────────────── */

.lx-topbar--public {
  position: static;
  background: var(--lx-glass);
  -webkit-backdrop-filter: var(--lx-glass-blur);
  backdrop-filter: var(--lx-glass-blur);
  border-bottom: 1px solid var(--lx-glass-border);
}

/* Matches healtharea's sidebar brand mark (.lx-sidebar__mark in shell.css)
   exactly — same serif face, size, weight and gradient text-clip — so the
   "AML" mark reads as one identity across the public site and the app. */
.lx-public-wordmark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--lx-accent), color-mix(in srgb, var(--lx-accent) 55%, white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}
.lx-public-wordmark:hover { opacity: .85; }

.lx-public-nav {
  display: flex;
  align-items: center;
  gap: var(--lx-s-2, 8px);
  flex-wrap: wrap;
}
.lx-public-nav a {
  font-family: var(--lx-f-ui);
  font-size: var(--lx-fs-sm);
  color: var(--lx-t2);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--lx-r-sm);
  transition: background var(--lx-t-fast) var(--lx-ease), color var(--lx-t-fast) var(--lx-ease);
  white-space: nowrap;
}
.lx-public-nav a:hover  { background: var(--lx-fill-hover); color: var(--lx-t1); }
.lx-public-nav a.active { color: var(--lx-accent); font-weight: 600; }

.lx-public-nav__cta {
  font-weight: 600 !important;
  color: var(--lx-t-inv) !important;
  background: var(--lx-accent);
}
.lx-public-nav__cta:hover { background: var(--lx-accent) !important; opacity: .88; }

/* Dropdown-group trigger (Services/Public Tools/Resources/Workareas) — same
   visual weight as a plain .lx-public-nav link (not a circular .lx-icon-btn,
   which is sized for a glyph/2 chars and crops a multi-word label). Each
   sits inside a .lx-topbar-widget + data-menu-toggle + .lx-menu, the same
   reusable dropdown pattern components.css already defines for Messages/
   Notifications/Text-size/Language — lx-shell.js's delegated click handler
   opens/closes it generically, no JS changes needed here. */
.lx-public-nav__more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--lx-f-ui);
  font-size: var(--lx-fs-sm);
  color: var(--lx-t2);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--lx-r-sm);
  transition: background var(--lx-t-fast) var(--lx-ease), color var(--lx-t-fast) var(--lx-ease);
  white-space: nowrap;
}
.lx-public-nav__more:hover,
.lx-public-nav__more[aria-expanded="true"] { background: var(--lx-fill-hover); color: var(--lx-t1); }
.lx-public-nav__more.active { color: var(--lx-accent); font-weight: 600; }

/* style.css ships its own 680px pair for this hamburger/overlay swap, sized
   for its ORIGINAL nav — which showed only a single "Menu" trigger word at
   desktop widths (everything else lived inside #navDropdown), so 680px was
   plenty of room. Grouping Services/Public Tools/Resources/Workareas into
   click-open dropdowns (rather than the flat 10-link row this replaced)
   brings the inline row back down close to that original footprint, so the
   hamburger cutoff can come back down too — measured live and confirmed
   safe at every common desktop width (1280/1366/1440/1536/1920px); only
   genuinely narrow/tablet windows fall back to the hamburger now. Both
   halves of style.css's pair must still be re-overridden together — its
   `#mobile-nav-overlay{display:none!important}` at min-width:681px would
   otherwise keep blocking the overlay from ever opening in the gap between
   681px and this cutoff, leaving the hamburger inert in that range. */
@media (max-width: 920px) {
  .lx-public-nav { display: none; }
  .nav-toggle { display: flex; }
}
@media (min-width: 921px) {
  #mobile-nav-overlay { display: none !important; }
}
@media (min-width: 681px) and (max-width: 920px) {
  #mobile-nav-overlay.open { display: block !important; }
}

/* Footer (#site-footer, .footer-*) is ported verbatim from includes/footer.php
   in partials/public-footer.php — every one of its text/border colours is a
   hardcoded white rgba(255,255,255,…) literal (including the three overrides
   just below), because the ORIGINAL site's footer band was always dark
   regardless of page mode (verified: css/style.css never redefines
   --bg-footer under [data-theme="dark"], only once at :root). Dark mode
   keeps exactly that look, untouched. Light mode gets its own real light
   footer instead (see the `[data-theme="light"] #site-footer` block below,
   after the FAQ-icon fix) rather than inheriting the dark-only literals. */

/* Pre-existing gap in style.css (present before this migration, not caused by
   it): the FAQ accordion's inline plus/minus <svg> icons carry no width/height
   attribute and no sizing rule anywhere in style.css, so browsers fall back to
   the SVG default intrinsic size (300x150) and the icon renders enormous.
   Trivial, purely-visual fix kept in this bridge file rather than editing the
   large shared style.css. */
.faq-question svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Same mode-invariance issue as --bg-footer above, one level deeper: the
   Registered Office block in public-footer.php colors its text via
   var(--text-muted), which style.css aliases to var(--text-4) — a token this
   bridge otherwise (correctly) maps to Meridian's mode-reactive --lx-t4. In
   light mode that resolves to a low-opacity *dark* color, nearly invisible
   against the footer's dark band. Every sibling footer text (.footer-col a,
   .footer-bottom, etc.) sidesteps this by hardcoding a rgba(255,255,255,…)
   literal instead of a token — --text-muted is the one spot that didn't.
   --text-muted is also used elsewhere on these pages (about.php's team bios,
   contact.php helper text, resources/index.php cards, etc.) against the
   normal, mode-reactive page background, so the fix must be scoped to inside
   the footer only, not redefined at :root. Dark-mode-only now (light mode's
   own value is set in the block below) since the footer band itself is no
   longer dark in light mode. */
[data-theme="dark"] #site-footer { --text-muted: rgba(255,255,255,0.45); }

/* Same class of bug again, one tag deeper: style.css's bare `strong { color:
   var(--text-1); }` element rule wins over the <p style="color:var(--text-
   muted)">'s inherited color for any <strong> inside it (an explicit rule
   always beats inheritance, regardless of specificity) — so the "CIN:" label
   in the Registered Office block renders in --text-1, a dark, light-mode
   body-text color, invisible against the footer's dark band. The disclaimer
   bar's own <strong> already has a footer-scoped override
   (#site-footer .disclaimer-bar strong in style.css); this is the same fix
   for the rest of the footer. Dark-mode-only, same reasoning as above. */
[data-theme="dark"] #site-footer strong { color: rgba(255,255,255,0.65); }

/* ── Light-mode footer ─────────────────────────────────────────────────────
   Every rule in style.css's [19] FOOTER block (#site-footer, .footer-brand,
   .footer-col, .footer-bottom, .footer-legal, .footer-gt-attr,
   .disclaimer-bar) hardcodes a white rgba(255,255,255,…) literal or border,
   because the original design's footer was always dark. Now that light mode
   gets a real light band (--bg-footer below), each of those literals needs a
   dark-ink counterpart or the text goes invisible against it. Reuses
   Meridian's own light-mode ink scale (--lx-t1..t4, already mode-reactive)
   rather than inventing new opacities, so the footer's contrast steps match
   the rest of the page. Every selector here already out-specifies its
   style.css counterpart ([data-theme="light"] + #site-footer beats a bare
   class/type selector), so no !important is needed; dark mode is untouched
   by every rule in this block. */
[data-theme="light"] { --bg-footer: var(--lx-bg-solid); }

[data-theme="light"] #site-footer { color: var(--lx-t2); --text-muted: var(--lx-t3); }
[data-theme="light"] #site-footer strong { color: var(--lx-t1); }
[data-theme="light"] .footer-inner { border-bottom-color: var(--lx-glass-border); }
[data-theme="light"] .footer-brand .wordmark { color: var(--lx-t1); }
/* .logo-text paints its own text via a background-clip:text gradient with
   !important (style.css:271-278), so the .wordmark color rule above can't
   reach it — needs its own !important override to replace the hardcoded
   #3b82f6 blue with Meridian's violet accent. */
[data-theme="light"] .footer-brand .wordmark .logo-text {
  color: var(--text-violet) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-violet) !important;
}
[data-theme="light"] .footer-brand p { color: var(--lx-t2); }
[data-theme="light"] .footer-col h5 { color: var(--lx-t4); }
[data-theme="light"] .footer-col a { color: var(--lx-t2); }
[data-theme="light"] .footer-bottom { color: var(--lx-t4); }
[data-theme="light"] .footer-legal a { color: var(--lx-t4); }
[data-theme="light"] .footer-gt-attr a { color: var(--lx-t4); }
[data-theme="light"] .footer-gt-attr a:hover { color: var(--lx-t2); }
[data-theme="light"] #site-footer .disclaimer-bar {
  background: var(--lx-fill);
  border-color: var(--lx-glass-border);
}
[data-theme="light"] #site-footer .disclaimer-bar p,
[data-theme="light"] #site-footer .disclaimer-bar strong { color: var(--lx-t3); }

/* ── "Access" trigger (replaces the old plain "Log in" nav link) ─────────
   Pinned rightmost in .lx-topbar__actions, after the appearance/text-size/
   language controls — kept as a solid accent pill (not the plain-text
   .lx-public-nav__more treatment the Services/Resources/etc. triggers use)
   since it is still the site's primary CTA, just relocated and turned into
   a role picker instead of a single link. */
.lx-public-nav__access {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--lx-f-ui);
  font-size: var(--lx-fs-sm);
  font-weight: 600;
  color: var(--lx-t-inv) !important;
  background: var(--lx-accent);
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--lx-r-sm);
  white-space: nowrap;
  transition: opacity var(--lx-t-fast) var(--lx-ease);
}
.lx-public-nav__access:hover,
.lx-public-nav__access[aria-expanded="true"] { background: var(--lx-accent); opacity: .88; }

/* ── Mobile nav accordion ──────────────────────────────────────────────────
   #mobile-nav-overlay's Services/Workarea/Resources/Public Tools/Access
   groups are collapsed by default and expand on tap (main.js's generic
   toggleCollapsible(header), same helper the pricing-page cards use) instead
   of always showing every link flat. "General" (Home/Pricing) stays a plain
   label — only two links, nothing worth collapsing. */
.mob-nav-section-label--toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.mob-nav-section-label--toggle span:last-child {
  font-size: 0.7em;
  transition: transform var(--t-fast, .2s) var(--ease, ease);
}
.mob-nav-section-content { padding-bottom: 4px; }
.mob-nav-section-content .mob-nav-link { padding-left: 36px; }