/* ══════════════════════════════════════════════════════════════════════════
   skin_arcade — InnoSoft Days "arcade" look.
   Retro-game / pixel personality layered over the theme's base public.css:
   pixel font headings, hard offset shadows, chunky borders, press effects.
   Loaded after public.css (via layout.head), so these rules win.
   ══════════════════════════════════════════════════════════════════════════ */

body.cms-public {
    background-color: #FAFCE6;
    /* faint pixel-dot grid */
    background-image: radial-gradient(circle at 1px 1px, rgba(30, 99, 189, 0.10) 1px, transparent 0);
    background-size: 22px 22px;
}

/* The pixel display font is charming on the big showpieces but hard to read
   at heading sizes, so it is reserved for the hero, the brand and the CTA;
   every content heading uses the readable body font, still bold and on-brand. */
body.cms-public .hero-title,
body.cms-public .site-brand,
body.cms-public .cta-banner h2 {
    font-family: 'Pixelify Sans', system-ui, cursive;
    letter-spacing: .5px;
}
body.cms-public h1,
body.cms-public h2,
body.cms-public h3,
body.cms-public h4,
body.cms-public .section-title,
body.cms-public .card__title {
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.cms-public .site-header {
    background: #FAFCE6;
    border-bottom: 3px solid #0B1320;
    backdrop-filter: none;
}
.cms-public .site-brand {
    font-size: 1.55rem;
    color: #1E63BD;
    text-shadow: 2px 2px 0 #EAA903;
}
.cms-public .site-nav a {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .9rem;
    letter-spacing: .04em;
}
.cms-public .site-nav a:hover { color: #EAA903; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.cms-public .block-hero {
    background:
        repeating-linear-gradient(45deg, rgba(30, 99, 189, .06) 0 14px, transparent 14px 28px),
        #F7FCE2;
    border-bottom: 3px solid #0B1320;
    padding-block: 5.5rem;
}
.cms-public .hero-eyebrow {
    color: #0B1320;
    background: #EAA903;
    display: inline-block;
    padding: .28rem .85rem;
    border: 2px solid #0B1320;
    box-shadow: 3px 3px 0 #0B1320;
    border-radius: 0;
    letter-spacing: .1em;
}
.cms-public .hero-title {
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    color: #0B1320;
    text-shadow: 4px 4px 0 #1E63BD, 8px 8px 0 rgba(234, 169, 3, .55);
    line-height: 1.05;
}
.cms-public .hero-subtitle { color: #3A4654; font-weight: 500; }

/* ── Buttons: chunky arcade button + press ──────────────────────────────── */
.cms-public .btn-primary {
    background: #1E63BD;
    color: #fff;
    border: 2px solid #0B1320;
    border-radius: 6px;
    box-shadow: 4px 4px 0 #0B1320;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}
.cms-public .btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #0B1320; }
.cms-public .btn-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #0B1320; }

/* ── Cards: bordered, hard offset shadow, hover lift ────────────────────── */
.cms-public .card {
    background: #fff;
    border: 2px solid #0B1320;
    border-radius: 10px;
    box-shadow: 6px 6px 0 rgba(30, 99, 189, .85);
    transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.cms-public .card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 9px 9px 0 #EAA903;
}

/* ── Badge: pixel chip ──────────────────────────────────────────────────── */
.cms-public .badge {
    background: #EAA903;
    color: #0B1320;
    border: 2px solid #0B1320;
    border-radius: 4px;
    box-shadow: 2px 2px 0 #0B1320;
}

/* ── Section title: accent underline ────────────────────────────────────── */
.cms-public .section-title {
    display: inline-block;
    border-bottom: 4px solid #EAA903;
    padding-bottom: .2rem;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.cms-public .site-footer {
    background: #0B1320;
    border-top: 3px solid #EAA903;
}
.cms-public .site-footer__name { color: #EAA903; }
.cms-public .site-footer__tagline { color: #C9D2DD; }
.cms-public .site-social a { color: #FAFCE6; }
.cms-public .site-social a:hover { color: #EAA903; }
.cms-public .site-footer__legal { color: #8B95A3; }

/* ── Home / landing (arcade) ────────────────────────────────────────────── */
.cms-public .hero--home .hero-title { font-size: clamp(3rem, 8vw, 5.5rem); }
.cms-public .btn-ghost {
    border: 2px solid #0B1320;
    box-shadow: 4px 4px 0 #0B1320;
    border-radius: 6px;
    text-transform: uppercase;
    font-weight: 700;
    color: #0B1320;
}
.cms-public .btn-ghost:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #0B1320; color: #1E63BD; }
.cms-public .feature {
    border: 2px solid #0B1320;
    box-shadow: 5px 5px 0 rgba(30, 99, 189, .85);
}
.cms-public .feature h3 { font-family: 'Pixelify Sans', system-ui, cursive; }
.cms-public .cta-banner {
    background: #1E63BD;
    border-block: 3px solid #0B1320;
}
.cms-public .cta-banner h2 {
    font-family: 'Pixelify Sans', system-ui, cursive;
    text-shadow: 3px 3px 0 #0B1320;
}
.cms-public .cta-banner .btn-primary {
    background: #EAA903;
    color: #0B1320;
    border: 2px solid #0B1320;
    box-shadow: 4px 4px 0 #0B1320;
}

/* ── Countdown + logo wall (arcade) ─────────────────────────────────────── */
.cms-public .countdown__unit { border: 2px solid #0B1320; box-shadow: 3px 3px 0 #0B1320; background: #fff; }
.cms-public .countdown__num { color: #1E63BD; }
.cms-public .logo-wall__item {
    border: 2px solid #0B1320;
    box-shadow: 4px 4px 0 rgba(30, 99, 189, .85);
    background: #fff;
    color: #0B1320;
    font-family: 'Pixelify Sans', system-ui, cursive;
    font-size: .95rem;
}
.cms-public .gallery-grid__item {
    border: 2px solid #0B1320;
    box-shadow: 4px 4px 0 rgba(30, 99, 189, .85);
}