/* STYLE-SRC-HARDEN-1 (#36) — semantic helpers extracted from inline
   `style=""` attributes across 12 landing HTMLs.  Replacing inline
   styles lets us drop `'unsafe-inline'` from style-src in CSP, leaving
   the policy fully strict for both script and style on production.

   Classes are scoped under .kv-* prefix to avoid collisions.  Each
   helper covers a specific extracted pattern; do NOT generalise into
   a utility framework (Tailwind-style) — keep additions intentional. */

/* ── Layout helpers ─────────────────────────────────────────────── */

/* Footer copyright spacing (7 instances: contact / help / privacy /
   terms / about / press / security HTML footers). */
.kv-mt-8 { margin-top: 8px; }

/* parents.html — h3 inside safety panel, kills default block top margin. */
.kv-mt-0 { margin-top: 0; }

/* parents.html — paragraph follow-up to safety list. */
.kv-mt-14 { margin-top: 14px; }

/* onboarding/welcome.html — legend inside tile-label, removes default
   <legend> bottom spacing. */
.kv-mb-0 { margin-bottom: 0; }

/* kids-portal.html skeleton override.  Default .kv-skel has
   min-height: 220px (home.css:347), but the featured-row skeletons
   are shorter to match real card art aspect — pin a fixed height. */
.kv-skel-h175 { height: 175px; min-height: 0; }

/* ── Typography helpers ─────────────────────────────────────────── */

/* parents.html — small muted footer text ("© 2026"). */
.kv-text-muted-sm { color: #6C7E90; font-size: 0.875rem; }

/* play-wrapper.html — oversized emoji glyph used as illustration. */
.kv-text-72 { font-size: 72px; }

/* play-wrapper.html — heading-style copy ("Hmm — we could not find
   that game."), bypasses heading semantics by design (visual only). */
.kv-text-24-bold { font-size: 24px; font-weight: 700; }

/* ── Color / link helpers ───────────────────────────────────────── */

/* 500.html — mailto link inside the dark error card; ensures the link
   stays readable against the gradient background. */
.kv-link-light { color: #fff; text-decoration: underline; }

/* i18n.js language switcher chevron glyph (loaded on every page that
   ships i18n.js — watch / kids / parents / onboarding). */
.kv-lang-chevron { opacity: 0.5; }

/* CSP-CLEANUP-1 (#209) — JS innerHTML emission helpers.  Each class
   replaces a parsed inline `style="…"` attribute that landing JS used
   to template into row-empty / row-error / placeholder / loader DOM. */

/* kids-home.js — empty/error/search messages inside row grids. */
.kv-row-msg {
  color: #5B6B82;
  padding: 12px;
  grid-column: 1 / -1;
}
.kv-row-msg-center {
  color: #5B6B82;
  padding: 16px;
  text-align: center;
}

/* landing.js — full-grid skeleton card placeholders + try-again msg. */
.kv-vcard-skel {
  aspect-ratio: 16/9;
  background: #eef4f8;
}
.kv-grid-msg {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--mid);
}

/* partners-widget.js — grid-spanning empty-state + image placeholder
   that the icon img falls back to before the real logo loads. */
.kv-partner-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #8694a3;
}
.kv-partner-img-placeholder { background: #ffd56b; }

/* videos-widget.js + watch.js share a gradient thumbnail fallback. */
.kv-video-thumb-placeholder {
  background: linear-gradient(135deg, #7ec8e3, #0d3b66);
  width: 100%;
  height: 100%;
}

/* ── Composite component helpers ────────────────────────────────── */

/* press.html — pull-quote callout used once in the press kit body. */
.kv-press-quote {
  border-left: 4px solid var(--kv-purple);
  padding: 0 16px;
  margin: 20px 0;
  color: #334155;
  font-style: italic;
}

/* ── A11y helpers ───────────────────────────────────────────────── */

/* kids-portal.html previously defined this in an inline <style> block.
   Strict CSP blocks <style> elements without 'unsafe-inline' too, so
   the rule moves here and the inline block is removed. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}