/* Post-build a11y + policy repair layer.
   Loaded after the Tailwind bundle so these override generated utilities and inline styles.
   Why inline style overrides are scoped to #root: the runtime SPA styles the WhatsApp FAB
   with inline rules, which beat any stylesheet selector without !important. */

/* 1. Contrast (WCAG 2.1 AA):
      - emerald-600 with white text is ~3.8:1 and emerald-500 is ~3.0:1; both fail for
        normal-size text. emerald-700 is 5.4:1, so every filled CTA/badge is darkened here,
        which covers the HTML prerender, the React runtime and any component chunk. */
#root button[class*="bg-emerald"],
#root a[class*="bg-emerald"] {
  background-color: #047857 !important; /* emerald-700 */
  color: #ffffff !important;
}
#root button[class*="bg-emerald"]:hover,
#root a[class*="bg-emerald"]:hover {
  background-color: #065f46 !important; /* emerald-800 */
  color: #ffffff !important;
}

/* 2. Contrast — slate-500 on the #F5F5F0 section background is ~4.1:1 at 11px.
      The production HTML carries these labels as inline styles, so inline wins
      and an !important rule is the only override. */
#root span[style*="slate-500"],
#root div[style*="text-slate-500"] {
  color: #475569 !important; /* slate-600, 7.4:1 */
}

/* 3. Rendering cost — the prerendered HTML ships the whole page (deep DOM), so the browser
      lays out and paints every offscreen section before first paint. content-visibility
      skips that work for sections below the first screen. auto lets the browser remember
      each section's real size once measured, so scrolled-to sections do not resize. */
#root section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}
/* keep the last (footer CTA) section eager: it sits under the footer link block and
   placeholder sizing there pushed content around on load */
#root > div > section:last-of-type {
  content-visibility: visible;
}

/* 4. Pre-render: the static SEO copy inside #ssr-fallback is replaced by React within a second.
      Do NOT give it content-visibility: skipping that layout meant React's swap measured a
      different document height and the whole page jumped (CLS 0.127 on desktop). The prerender
      is ~15KB of inline copy; laying it out is cheaper than a layout shift. */

/* 5. Touch targets (WCAG 2.5.8) — footer nav links are 16px tall text; give every footer
      link a 24px minimum hit area without changing its appearance. */
#root footer a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* 6. LCP render delay — the LCP element is a <p> in the first section, but it cannot paint
      until the 140KB React bundle and the font CSS have been fetched and executed.
      The markup is already in the HTML, so give the first section its own rendering lane:
      isolate it from the rest of the document's layout/style work. Paint may start as soon
      as this subtree is ready instead of waiting on the full document. */
#root section:first-of-type {
  contain: layout style paint;
}