/* =============================================
   JUST FRIENDS GAMES — Brand theme
   "90s basement arcade / streetwear"
   Loaded after css/style.css; overrides it.
   ============================================= */

:root {
    --color-wood-charcoal:   #1A1614;
    --color-newsprint-beige: #F4EFEB;
    --color-photocopy-black: #2B2825;
    --color-basement-amber:  #FFB300;
    --color-zine-crimson:    #D32F2F;
    --color-crt-cyan:        #00F0FF;
    --color-card:            #231E1B;
    --color-beige-dim:       #C9C0B8;

    --font-display: 'Barlow', 'Rubik Mono One', Impact, sans-serif;
    --font-body:    'Courier Prime', monospace;

    /* Remap the old palette so untouched rules follow the theme */
    --dark-blue:    var(--color-wood-charcoal);
    --mid-blue:     var(--color-wood-charcoal);
    --deep-blue:    var(--color-wood-charcoal);
    --orange:       var(--color-basement-amber);
    --red:          var(--color-zine-crimson);
    --red-bright:   var(--color-zine-crimson);
    --teal-bright:  var(--color-crt-cyan);
    --white:        var(--color-newsprint-beige);
    --white-soft:   var(--color-newsprint-beige);
    --muted:        var(--color-beige-dim);
}

/* ---------- Base ---------- */
/* AOS slide-ins and Bootstrap's g-5 gutters stick out sideways; keep phones from scrolling horizontally */
html { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

body {
    font-family: var(--font-body);
    line-height: 1.6;
    background-color: var(--color-wood-charcoal);
    color: var(--color-newsprint-beige);
}

h1, h2, h3, h4, .section-title, .hero-title, .service-title, .navbar-brand,
.footer-brand, .stat-number, .card-jfg h3 {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

a { color: var(--color-crt-cyan); }
a:hover { color: var(--color-basement-amber); }

.section-text, .section-subtitle, .service-text, .hero-subtitle, .nav-link,
.section-label, .stat-label, .about-card span, .footer-copy {
    font-family: var(--font-body);
    font-weight: 400;
}

.section-text, .section-subtitle, .service-text { line-height: 1.6; color: var(--color-newsprint-beige); }

/* CRT scanline overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
    opacity: 0.5;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.18) 3px,
        rgba(0, 0, 0, 0) 4px
    );
}

/* ---------- Navbar ---------- */
#mainNav.scrolled,
#mainNav.jfg-solid {
    background: var(--color-wood-charcoal);
    border-bottom: 3px solid var(--color-photocopy-black);
    box-shadow: 0 4px 0 var(--color-photocopy-black);
}
.navbar-collapse.show, .navbar-collapse.collapsing { background: var(--color-wood-charcoal); padding-bottom: 0.5rem; }
.navbar-brand { letter-spacing: 0; }
.brand-just    { color: var(--color-newsprint-beige); }
.brand-friends { color: var(--color-basement-amber); }
.brand-games   { color: var(--color-zine-crimson); }
.nav-link { color: var(--color-newsprint-beige) !important; }
.nav-link:hover, .nav-link.active { color: var(--color-crt-cyan) !important; }
.nav-link::after { background: var(--color-crt-cyan); }

/* ---------- Hero ---------- */
.hero-section { background: var(--color-wood-charcoal); padding: 7rem 0 4rem; }
.hero-section::before {
    background:
        radial-gradient(ellipse 60% 40% at 20% 50%, rgba(211, 47, 47, 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 80% 30%, rgba(255, 179, 0, 0.07) 0%, transparent 70%);
}
.hero-title { letter-spacing: -0.02em; }
.hero-title-just    { color: var(--color-newsprint-beige); }
.hero-title-friends { color: var(--color-basement-amber); text-shadow: 6px 6px 0 var(--color-photocopy-black); }
.hero-title-games   { color: var(--color-zine-crimson); text-shadow: 6px 6px 0 var(--color-photocopy-black); }
.hero-badge {
    background: var(--color-photocopy-black);
    border: 2px solid var(--color-basement-amber);
    color: var(--color-basement-amber);
    border-radius: 0;
    font-family: var(--font-body);
    box-shadow: 4px 4px 0 var(--color-zine-crimson);
}
.hero-subtitle { color: var(--color-newsprint-beige); letter-spacing: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---------- Buttons ---------- */
.btn-jfg-primary,
.btn-jfg-secondary {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1rem;
    line-height: 1.2;
    padding: 0.9rem 1.6rem;
    border-radius: 0;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.btn-jfg-primary {
    background: var(--color-crt-cyan);
    color: var(--color-wood-charcoal);
    border: 3px solid var(--color-photocopy-black);
    box-shadow: 4px 4px 0 var(--color-photocopy-black);
}
.btn-jfg-primary:hover, .btn-jfg-primary:focus-visible {
    color: var(--color-wood-charcoal);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-basement-amber);
}
.btn-jfg-secondary {
    background: var(--color-wood-charcoal);
    color: var(--color-newsprint-beige);
    border: 3px solid var(--color-newsprint-beige);
    box-shadow: 4px 4px 0 var(--color-zine-crimson);
}
.btn-jfg-secondary:hover, .btn-jfg-secondary:focus-visible {
    color: var(--color-crt-cyan);
    border-color: var(--color-crt-cyan);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-basement-amber);
}

/* ---------- Cards ---------- */
.card-jfg,
.service-card,
.about-card {
    background: var(--color-card);
    border: 2px solid var(--color-photocopy-black);
    outline: 1px solid rgba(244, 239, 235, 0.12);
    border-radius: 0;
    padding: 28px;
    box-shadow: 6px 6px 0 var(--color-photocopy-black);
}
.about-card { padding: 20px 12px; }
.service-card:hover, .about-card:hover {
    background: var(--color-card);
    border-color: var(--color-photocopy-black);
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--color-basement-amber);
}
.service-card { border-bottom: 2px solid var(--color-photocopy-black); }
.service-icon, .about-card i { color: var(--color-zine-crimson); }
.service-card:hover .service-icon { color: var(--color-crt-cyan); }
.service-title { color: var(--color-basement-amber); letter-spacing: -0.02em; }
.card-jfg h3 { color: var(--color-basement-amber); font-size: 1.6rem; margin-bottom: 0.8rem; }
.card-jfg p:last-child { margin-bottom: 0; }

/* ---------- Sections ---------- */
.section-dark, .section-darker { background-color: var(--color-wood-charcoal); }
.section-label { color: var(--color-zine-crimson); letter-spacing: 3px; }
.section-title { color: var(--color-newsprint-beige); }
.text-orange { color: var(--color-basement-amber) !important; }
.stat-number { color: var(--color-crt-cyan); }
.stat-label { color: var(--color-beige-dim); }

.stripe-accent-bar {
    height: 6px;
    width: 100%;
    background: linear-gradient(to right,
        var(--color-basement-amber) 0 33.333%,
        var(--color-zine-crimson) 33.333% 66.666%,
        var(--color-crt-cyan) 66.666% 100%);
}

.contact-company { color: var(--color-beige-dim); margin-top: 1.5rem; }
.contact-company strong { color: var(--color-newsprint-beige); }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-photocopy-black);
    border-top: 0;
    color: var(--color-newsprint-beige);
}
.footer-company { font-size: 0.9rem; line-height: 1.7; margin-bottom: 0.8rem; }
.footer-company p { margin: 0; }
.footer-copy { color: var(--color-beige-dim); font-size: 0.85rem; }
.footer-copy a, .footer-company a { color: var(--color-crt-cyan); text-decoration: none; }
.footer-copy a:hover, .footer-company a:hover { color: var(--color-basement-amber); text-decoration: underline; }

/* ---------- Legal page ---------- */
.legal-main { max-width: 820px; margin: 0 auto; padding: 7rem 16px 4rem; }
.legal-main h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); color: var(--color-newsprint-beige); margin-bottom: 0.4rem; }
.legal-main h2 { font-size: 1.35rem; color: var(--color-basement-amber); margin: 0 0 0.8rem; }
.legal-main .card-jfg { margin-bottom: 1.6rem; }
.legal-main ul { padding-left: 1.2rem; margin-bottom: 0; }
.legal-main li { margin-bottom: 0.4rem; }
.legal-updated { color: var(--color-beige-dim); margin-bottom: 2rem; }

/* ---------- Admin-made content ---------- */
.jfg-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1.2rem;
    border: 2px solid var(--color-photocopy-black);
    box-shadow: 6px 6px 0 var(--color-photocopy-black);
}
.card-jfg ul, .service-card ul { text-align: left; padding-left: 1.2rem; }

/* ---------- Accessibility (2026-10-21 mobile pass) ---------- */
/* Small crimson text on charcoal was ~3.2:1; this tint is ~6:1 (WCAG AA). */
.section-label { color: #FF6B61; }
a:focus-visible, button:focus-visible, .navbar-toggler:focus-visible {
    outline: 3px solid var(--color-basement-amber);
    outline-offset: 3px;
    box-shadow: none;
}
/* Footer links were 16 px tall: give them a proper tap area. */
.footer-company a, .footer-copy a {
    display: inline-block;
    padding: 12px 4px;
    margin: -6px 0;
}
.navbar-toggler { min-width: 48px; min-height: 48px; }
.hero-section { min-height: 100svh; }

@media (prefers-reduced-motion: reduce) {
    body::after { display: none; }
    #particleCanvas { display: none; }
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .btn-jfg-primary, .btn-jfg-secondary, .service-card, .about-card { transition: none; }
}

/* ---------- Tablet and below ---------- */
@media (max-width: 767px) {
    /* Scanlines over body text cost readability and repaint time on phones. */
    body::after { display: none; }
    .section-label, .stat-label, .footer-copy, .nav-link { font-size: 0.875rem; }
    .service-text, .section-subtitle { font-size: 1rem; }
    .nav-link { padding: 12px 0 !important; }
    .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    .stat-number { font-size: 2rem; }
}

/* ---------- Phone ---------- */
@media (max-width: 575px) {
    .row.g-5 { --bs-gutter-x: 1.5rem; }
    .container { padding-left: 16px; padding-right: 16px; }
    .card-jfg, .service-card { padding: 20px; box-shadow: 4px 4px 0 var(--color-photocopy-black); }
    .btn-jfg-primary, .btn-jfg-secondary { font-size: 0.95rem; padding: 0.85rem 1.1rem; min-height: 48px; }
    .hero-actions .btn-jfg-primary, .hero-actions .btn-jfg-secondary { width: 100%; text-align: center; }
    .hero-title { font-size: clamp(2.6rem, 14vw, 4rem); }
    .section-title { font-size: clamp(1.8rem, 8.5vw, 2.4rem); overflow-wrap: break-word; }
    .hero-section { padding: 6rem 0 3rem; }
    .about-card { padding: 16px 8px; }
}

/* Landscape phones: the hero shouldn't need a full extra screen. */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section { min-height: auto; padding: 6rem 0 3rem; }
    .scroll-indicator { display: none; }
}