/* Pixel-art reskin for the public marketing site only (index.html, about.html,
   blog/*.html). Loaded AFTER shared.css on those pages so it can override its
   tokens/primitives. The in-app product (app.html) and transactional pages
   (premium.html, kwentuhan.html, payo.html, privacy.html) deliberately do NOT
   load this — the app stays flat/high-contrast/maximally legible for its
   senior, often low-vision users. This file is a visual skin only: it never
   touches body-paragraph typography, so actual guide/safety content (blog
   articles) stays as readable as before — only chrome (headings, buttons,
   cards, icon frames, nav) gets the retro 8-bit treatment. */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
  /* Sharp corners + a hard offset "game console" shadow instead of the
     shared design system's soft/zero-shadow tokens — this is the single
     biggest lever for the pixel-art read, and because shared.css already
     routes every card/button through these same custom properties, most of
     the site falls in line without extra per-component rules. */
  --radius-lg: 4px;
  --radius-md: 4px;
  --radius-sm: 2px;
  --shadow-card: 4px 4px 0 0 var(--ink);
  --pixel-border: 3px solid var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root { --shadow-card: 4px 4px 0 0 #000000; }
}

body { image-rendering: pixelated; }

/* Pixel-dot backdrop texture — pure CSS, no image assets, works offline */
body {
  background-image: radial-gradient(var(--card-border) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: -9px -9px;
}

/* Display type: VT323 (a readable monospace terminal face) for headings,
   buttons and nav — sized up since its x-height reads smaller than the
   default sans. Press Start 2P (true blocky pixel letterforms, much wider)
   is reserved for short brand/badge text only, so it never wraps awkwardly
   across a sentence. */
h1, h2, .hero h1, .card-title, .section h2, .faq-item summary,
.btn-pill, .cta a.button, .nav-title, .step-body h3, .feature-card h3,
.callout-card h3, .post-card h2, .tagline, .note-title {
  font-family: 'VT323', ui-monospace, monospace !important;
  letter-spacing: 0.3px;
}
h1 { font-size: 46px !important; line-height: 1.15 !important; }
.hero h1 { font-size: 40px !important; }
.section h2, h2 { font-size: 30px !important; }
.card-title { font-size: 22px !important; }
.btn-pill, .cta a.button { font-size: 20px !important; letter-spacing: 0.5px; }

.nav-brand span, .section-eyebrow, .eyebrow-pill, .post-date,
.community-thread-era-badge, .thread-era-badge, .era-chip {
  font-family: 'Press Start 2P', monospace !important;
  letter-spacing: 0 !important;
}
.section-eyebrow { font-size: 10px !important; }
.eyebrow-pill { font-size: 9px !important; }
.nav-brand span { font-size: 13px !important; }
.post-date { font-size: 9px !important; }

/* Sharp, bordered, hard-shadowed surfaces. Shared.css already points most
   cards/badges at var(--radius-*)/var(--shadow-card), so this mainly adds
   the thick pixel border shared.css doesn't apply by default, plus a few
   explicit overrides for elements that used literal px values instead of
   the shared tokens (the hero phone mockup, the About page's pinned note). */
.card, .feature-card, .callout-card, .step-card, .post-card, .stat-strip,
.faq-item, .btn-pill, .cta a.button, .tile, .era-tile, .era-chip,
.phone-frame, .float-card {
  border: var(--pixel-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
}
.nav-back, .load-more-btn {
  border: 2px solid var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}

/* Square, bordered icon badges instead of soft rounded tint chips — reads
   as a retro "item slot" rather than a modern icon chip. */
.fc-icon, .feature-icon, .post-icon-badge, .step-num {
  border-radius: var(--radius-sm) !important;
  border: 2px solid var(--ink) !important;
}

/* Tactile "press" interaction: the hard shadow collapses and the element
   shifts into it on press, like an arcade button being pushed in. */
.btn-pill, .cta a.button, .feature-card, .post-card, .era-chip {
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}
.btn-pill:active, .cta a.button:active, .era-chip:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 0 var(--ink) !important;
}
@media (hover: hover) {
  .feature-card:hover, .post-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 0 var(--ink) !important;
  }
}

/* Hero phone mockup — square off from its original smooth-device look into
   a chunkier handheld-console silhouette, consistent with the rest of the
   retro chrome. */
.phone-frame { border-radius: 10px !important; }
.phone-notch { border-radius: 0 0 6px 6px !important; }
.phone-screen { border-radius: 6px !important; }
.phone-call-btn, .phone-mini-card { border-radius: var(--radius-sm) !important; border: 2px solid var(--ink); }

/* About page's pinned "note to parents" card — square it off too, drop the
   soft circular pin shadow in favor of a flat pixel dot. */
.parents-note { border: var(--pixel-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-card) !important; transform: none !important; }
.pin { border-radius: var(--radius-sm) !important; background: var(--gold-deep) !important; box-shadow: none !important; }
.pin::after { content: none !important; }

/* A tiny reusable pixel-art heart, drawn with stacked box-shadows on a 1px
   box (classic pure-CSS pixel-art technique, no image asset needed) — used
   as a decorative sprinkle rather than redrawing the whole line-icon set. */
.pixel-heart {
  display: inline-block; width: 2px; height: 2px; margin: 0 6px;
  box-shadow:
    2px 0 var(--burgundy), 6px 0 var(--burgundy),
    0 2px var(--burgundy), 2px 2px var(--burgundy), 4px 2px var(--burgundy), 6px 2px var(--burgundy), 8px 2px var(--burgundy),
    0 4px var(--burgundy), 2px 4px var(--burgundy), 4px 4px var(--burgundy), 6px 4px var(--burgundy), 8px 4px var(--burgundy),
    2px 6px var(--burgundy), 4px 6px var(--burgundy), 6px 6px var(--burgundy),
    4px 8px var(--burgundy);
  transform: translateY(-2px);
}