/*
 * Theme Name:        GamesAndApp
 * Theme URI:         https://gamesandapp.com
 * Author:            GamesAndApp Team
 * Author URI:        https://gamesandapp.com
 * Description:       A high-performance, AdSense-optimised WordPress theme for game download sites. Built mobile-first with Tailwind CSS, 100/100 Core Web Vitals target, full ARIA accessibility, lazy-loaded AdSense, and ACF-powered dynamic game data.
 * Version:           1.0.0
 * Requires at least: 6.0
 * Tested up to:      6.5
 * Requires PHP:      8.0
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       gamesandapp
 * Tags:              custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 */

/* ============================================================
   BASE RESETS & TOKENS
   All design tokens mirror the Tailwind config in functions.php
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --color-primary:        #16a34a;
    --color-primary-light:  #22c55e;
    --color-primary-dark:   #15803d;
    --color-primary-xlight: #dcfce7;
    --color-primary-bg:     #f0fdf4;
    --color-ink:            #0f172a;
    --color-subtle:         #64748b;
    --color-muted:          #f1f5f9;
    --color-surface:        #ffffff;
    --shadow-card:          0 2px 16px 0 rgba(0,0,0,0.07);
    --shadow-card-hov:      0 6px 28px 0 rgba(22,163,74,0.18);
    --shadow-btn:           0 4px 14px 0 rgba(22,163,74,0.40);
    --font-heading:         'Outfit', sans-serif;
    --font-body:            'Inter', sans-serif;
}

html  { font-family: var(--font-body); background: #f8fafc; color: var(--color-ink); scroll-behavior: smooth; }
body  { margin: 0; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); }
img   { max-width: 100%; height: auto; display: block; }
a     { text-decoration: none; color: inherit; }

/* ── WordPress Core Alignment Helpers ── */
.alignleft  { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left:  1.5rem; margin-bottom: 1rem; }
.aligncenter{ display: block; margin-left: auto; margin-right: auto; margin-bottom: 1rem; }
.alignwide  { width: 100%; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }

/* ── Screen-reader only utility (a11y) ── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Page routing: each template shows its own wrapper ── */
/* (Not needed when using separate .php template files
   but kept for JS fallback on redirection page) */

/* ── Sticky Header ── */
#site-header {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.95);
    border-bottom: 1px solid #e2e8f0;
}

/* ── Desktop dropdown ── */
.nav-dropdown        { display: none; }
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown { display: block; }

/* ── Mobile menu transition ── */
#mobile-menu         { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
#mobile-menu.open    { max-height: 500px; }

/* ── Search results panel ── */
#search-results      { max-height: 320px; overflow-y: auto; }

/* ══════════════════════════════════════════════
   AD SLOTS – CLS PREVENTION (CRITICAL FOR ADSENSE)
   Every ad container reserves its space before the
   AdSense script loads, preventing layout shift.
   ══════════════════════════════════════════════ */
.ad-slot {
    background: var(--color-muted);
    display:    flex;
    align-items:     center;
    justify-content: center;
    border-radius:  8px;
    border:  1px dashed #cbd5e1;
    color:   #94a3b8;
    font-size:   11px;
    font-family: var(--font-body);
    overflow: hidden; /* prevent reflow */
}
.ad-leaderboard  { min-height: 90px;  width: 100%; }
.ad-rectangle    { min-height: 250px; min-width: 300px; width: 100%; }
.ad-sidebar      { min-height: 600px; width: 100%; }
.ad-redirect-top { min-height: 90px;  width: 100%; }
.ad-redirect-side{ min-height: 250px; min-width: 160px; width: 100%; }

@media (max-width: 767px) {
    .ad-leaderboard  { min-height: 50px; }
    .ad-sidebar      { min-height: 250px; }
    .ad-redirect-side{ min-width: 300px;  }
}

/* ── Star Rating ── */
.star-btn           { cursor: pointer; transition: transform .12s; font-size: 22px; background: none; border: none; padding: 0; line-height: 1; }
.star-btn:hover     { transform: scale(1.25); }
.star-btn.active    { color: #f59e0b; }
.star-btn.inactive  { color: #cbd5e1; }
.star-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 3px; }

/* ── TOC Scroll-spy ── */
.toc-link           { transition: color .2s, padding-left .2s; display: block; padding: 3px 8px; border-radius: 4px; color: var(--color-subtle); }
.toc-link:hover     { color: var(--color-primary); }
.toc-link.spy-active{ color: var(--color-primary); font-weight: 600; background: var(--color-primary-xlight); }

/* ── Download button pulse ── */
@keyframes glow-pulse {
    0%,100% { box-shadow: 0 0 0 0   rgba(22,163,74,.45); }
    50%     { box-shadow: 0 0 0 14px rgba(22,163,74,0);   }
}
.btn-download { animation: glow-pulse 2.2s infinite; }

/* ── Countdown SVG Ring ── */
#countdown-ring circle.track { fill: none; stroke: var(--color-primary-xlight); stroke-width: 8; }
#countdown-ring circle.prog  {
    fill: none; stroke: var(--color-primary); stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283; /* 2π × 45 ≈ 283 */
    stroke-dashoffset: 0;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    transition: stroke-dashoffset 1s linear;
}

/* ── Direct-DL reveal ── */
#direct-dl         { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
#direct-dl.visible { opacity: 1; pointer-events: auto; }

/* ── Fade-up animation ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .45s ease forwards; }

/* ── Game card hover ── */
.game-card          { transition: transform .22s ease, box-shadow .22s ease; }
.game-card:hover    { transform: translateY(-5px); box-shadow: var(--shadow-card-hov); }

/* ── Sysreq Tabs ── */
.sysreq-tab         { cursor: pointer; transition: background .2s, color .2s; }
.sysreq-tab.active  { background: var(--color-primary); color: #fff; }

/* ── WordPress post content typography ── */
.ga-content h2,
.ga-content h3 { font-family: var(--font-heading); font-weight: 700; margin: 1.75rem 0 .75rem; color: var(--color-ink); }
.ga-content h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
.ga-content h3 { font-size: clamp(1rem, 2.5vw, 1.25rem); }
.ga-content p  { line-height: 1.75; color: var(--color-subtle); margin-bottom: 1rem; }
.ga-content ul,
.ga-content ol { padding-left: 1.4rem; color: var(--color-subtle); line-height: 1.75; margin-bottom: 1rem; }
.ga-content li { margin-bottom: .4rem; }
.ga-content a  { color: var(--color-primary); text-decoration: underline; }
.ga-content img{ border-radius: 12px; margin: 1.5rem auto; }
.ga-content blockquote {
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-bg);
    padding: 1rem 1.25rem; border-radius: 0 12px 12px 0;
    margin: 1.5rem 0; color: var(--color-ink); font-style: italic;
}
.ga-content code { background: var(--color-muted); padding: 2px 6px; border-radius: 4px; font-size: .875em; }
.ga-content pre  { background: var(--color-ink); color: #e2e8f0; padding: 1.25rem; border-radius: 12px; overflow-x: auto; margin-bottom: 1.25rem; }
.ga-content table{ width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.ga-content th   { background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-weight: 600; padding: .6rem 1rem; text-align: left; }
.ga-content td   { padding: .6rem 1rem; border-bottom: 1px solid #e2e8f0; color: var(--color-subtle); font-size: .9rem; }
.ga-content tr:nth-child(even) td { background: var(--color-muted); }