/* v87 readability, authority links and contrast correction */
:root {
  --aa-v87-ink: #f8fbff;
  --aa-v87-muted: #d7e2f3;
  --aa-v87-dark: #071126;
  --aa-v87-panel: #10203d;
  --aa-v87-gold: #f4c430;
  --aa-v87-green: #13b86a;
  --aa-v87-light: #fffaf0;
  --aa-v87-light-ink: #14213d;
}

/* FIX (contrast bug): a blanket `body { color: var(--aa-v87-ink) }` was previously here.
   Body/main/article/page-shell sit on a LIGHT background by default (see main-home-v59.css
   :root --background), so forcing near-white (#f8fbff) text made most of the site's copy
   nearly invisible -- worst on mobile where there are fewer wrapping elements to mask it.
   Default text now correctly follows the light-surface ink color; only elements that are
   deliberately dark-backgrounded (.v87-dark-band, and dark hero/theme sections that already
   set their own background + color together elsewhere) use the light ink. */
body { color: var(--aa-v87-light-ink); }
a { text-underline-offset: .18em; }

.v87-readable,
.v87-readable p,
.v87-readable li,
.v87-readable span,
.v87-readable small {
  color: inherit;
}

.v87-light-card,
section[style*="fff"],
article[style*="fff"],
div[style*="fff"],
section[style*="cream"],
article[style*="cream"],
div[style*="cream"] {
  color: var(--aa-v87-light-ink) !important;
}

.v87-light-card *,
section[style*="fff"] *,
article[style*="fff"] *,
div[style*="fff"] *,
section[style*="cream"] *,
article[style*="cream"] *,
div[style*="cream"] * {
  color: inherit;
}

.v87-light-card a,
section[style*="fff"] a,
article[style*="fff"] a,
div[style*="fff"] a,
section[style*="cream"] a,
article[style*="cream"] a,
div[style*="cream"] a {
  color: #9a6a00 !important;
  font-weight: 800;
}

.v87-dark-band {
  color: var(--aa-v87-ink);
}

.v87-dark-band p,
.v87-dark-band li {
  color: var(--aa-v87-muted);
}

.v87-dark-band h1, .v87-dark-band h2, .v87-dark-band h3 {
  color: #fff7d6;
}

/* Sections that are genuinely dark-backgrounded (hero bands, navy themed pages) set
   their own background + color together elsewhere with !important and are unaffected
   by removing the generic main/.article/.page-shell/.v76-home-focus rule above. */

.shell-bottom a[href*="wa.me"],
.shell-actions .shell-whatsapp,
.v87-whatsapp-action {
  background: linear-gradient(135deg, #0aa84f, #25d366) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.42) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 12px 30px rgba(37,211,102,.34), 0 0 22px rgba(37,211,102,.42) !important;
}

.shell-bottom a[href*="wa.me"] svg,
.shell-actions .shell-whatsapp svg {
  stroke: #fff !important;
}

.v87-authority-links {
  margin: clamp(28px, 5vw, 64px) auto;
  padding: clamp(18px, 3vw, 28px);
  width: min(1120px, calc(100% - 32px));
  border: 1px solid rgba(244,196,48,.32);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(9,23,51,.96), rgba(18,39,75,.92));
  color: #f8fbff;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}

.v87-authority-links h2 {
  margin: 0 0 8px;
  color: #ffe68a;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.2;
}

.v87-authority-links p {
  margin: 0 0 16px;
  color: #dbe6f7;
}

.v87-authority-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.v87-authority-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
}

.v87-authority-grid a::after {
  content: "Open";
  flex: 0 0 auto;
  color: #11203f;
  background: #f4c430;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: .78rem;
}

@media (max-width: 720px) {
  .v87-authority-links {
    width: min(100% - 20px, 680px);
    border-radius: 14px;
    margin-bottom: 96px;
  }
  .v87-authority-grid {
    grid-template-columns: 1fr;
  }
  .v87-authority-grid a {
    font-size: .94rem;
  }
  .shell-primary span {
    font-size: clamp(.68rem, 2.8vw, .88rem) !important;
    line-height: 1.04 !important;
  }
}

/* ROOT-CAUSE CONTRAST FIX (v88): the site's Tailwind theme system defines two
   variable sets - a light :root block and a .dark{} block meant to be toggled
   by JS onto <html>. On production that toggle is not applying consistently,
   so components styled with theme-aware utilities (text-muted-foreground,
   bg-card, text-card-foreground, bg-background, text-foreground, etc.)
   resolve to the LIGHT palette's dark-gray text while sitting inside sections
   whose background is hardcoded dark navy elsewhere in the page - producing
   dark text on a dark background. The footer shows the mirror case: a light
   background pairing with text meant for a dark one. Rather than depend on
   a JS class toggle that isn't firing reliably, we make :root permanently use
   the dark palette values, so every theme-variable-based text/background pair
   is internally consistent everywhere, regardless of any .dark/data-theme
   toggle state. */
:root {
  --background: 222 47% 7%;
  --foreground: 210 40% 95%;
  --card: 222 40% 11%;
  --card-foreground: 210 40% 95%;
  --popover: 222 40% 11%;
  --popover-foreground: 210 40% 95%;
  --primary: 43 65% 62%;
  --primary-foreground: 222 47% 8%;
  --secondary: 222 30% 17%;
  --secondary-foreground: 210 40% 95%;
  --muted: 222 25% 15%;
  --muted-foreground: 215 20% 58%;
  --accent: 43 72% 48%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 222 25% 20%;
  --input: 222 25% 20%;
  --ring: 43 65% 62%;
}

/* Safety net: some cards/hero/footer text is animated in via inline styles
   (opacity/translate set directly by JS on mount) rather than a CSS class.
   If that reveal script fails to fire on a given device, the text is stuck
   permanently invisible/offset. Force it visible and in place inside the
   app shell so a stalled animation can never hide real content. */
#root [style*="opacity:0"],
#root [style*="opacity: 0"] {
  opacity: 1 !important;
}

/* DECISIVE BODY-TEXT FIX (v89): the theme-variable fix above did not fully
   resolve real-world rendering, because a lot of paragraph/list text in this
   codebase is styled with hardcoded dark navy colors (not the CSS variables),
   scattered across 20+ files. Rather than keep hunting each one individually,
   force every paragraph-level text node to a guaranteed-readable off-white
   everywhere on the dark-themed site. The ~17 pages that are intentionally
   light/cream-themed (privacy policy, terms, disclaimer, hi/ur/ar/hinglish
   language pages, a few guide pages) are marked with a "lp-light" class on
   <body> and are excluded here, so their correct dark-on-cream text is left
   alone. Headings and links already render correctly (gold/white) and are
   not touched. */
body:not(.lp-light) p,
body:not(.lp-light) li,
body:not(.lp-light) span:not([style*="color"]),
body:not(.lp-light) dd,
body:not(.lp-light) dt,
body:not(.lp-light) blockquote,
body:not(.lp-light) td,
body:not(.lp-light) small:not([style*="color"]) {
  color: #E8E9ED !important;
}

/* Card surfaces: give cards a lighter navy than the page background so they
   read as distinct panels, not just text floating on the same base color. */
body:not(.lp-light) [class*="card" i]:not([class*="business-card"]),
body:not(.lp-light) [class*="Card"]:not([class*="business-card"]) {
  background-color: #1E2A4A !important;
}