/*
 * Babu88 theme overrides — loaded AFTER base.css (an untouched, byte-for-byte
 * copy of themes/default/assets/css/style.css) in header.php. This file must
 * never redefine structural/mechanical rules that already work in base.css
 * (flex layouts, overflow/positioning, the mobile nav toggle, slider track
 * mechanics, page-builder block layout, etc.) — only:
 *
 *   1. Re-point base.css's --accent at the Babu88 gold, and leave its other
 *      four theme variables (--ink/--muted/--bg/--border) COMPLETELY ALONE —
 *      the reference design has a light/white main content area (category
 *      tabs, game grid, blog/page content), so base.css's own light-theme
 *      defaults are already correct there. Only the header, the tagline
 *      ticker, and the footer are dark bands — those get a LOCAL redefinition
 *      of --ink/--muted/--border scoped to just that section (see "Dark
 *      section scoping" below), rather than flipping the whole site dark and
 *      trying to patch every light area back — that's what the very first
 *      version of this theme did, and it was wrong per the reference designs.
 *   2. Add the sections base.css has no equivalent for at all: the hero
 *      ticker, category quick-nav/tabs, directory-driven game grid, and the
 *      ambassador/sponsorship/payment/responsible-gaming/social footer
 *      blocks — all under their own `babu88-` prefixed classes so they can
 *      never collide with a base.css selector.
 */

:root {
    --accent: #ffc736; /* base.css default is a blue (#2563eb); this is the only one of its 5 tokens repointed globally */

    /* dark-band tokens — header/ticker/footer background + their local light-text overrides (see "Dark section scoping") */
    --babu88-bg-alt: #0d1117;
    --babu88-dark-ink: #f5f6fa;
    --babu88-dark-muted: #aab2c5;
    --babu88-dark-border: rgba(255, 255, 255, .12);

    /* light-area surface token — game/update card placeholder bg, chip bg (these sit in the light main body) */
    --babu88-card: #f3f4f6;

    --babu88-blue: #0f6fff;
    --babu88-teal: #0ea5a0;
    --babu88-red: #ef4444;
    --babu88-green: #22c55e;
    --babu88-accent-ink: #241a00; /* dark text for on-gold (var(--accent)) buttons/chips */
}

.block-button-primary, .cmspress-slider-btn { color: var(--babu88-accent-ink); } /* base.css pairs these with color:#fff, unreadable against our gold --accent */

/*
 * Dark section scoping — the footer gets its own background plus a LOCAL
 * redefinition of --ink/--muted/--border (CSS custom properties cascade to
 * descendants), so every base.css rule already written in terms of those
 * three vars — site-footer-nav, etc. — automatically renders light-on-dark
 * inside it without needing a per-rule color override. The header is NOT
 * scoped dark — it stays on base.css's own light defaults (no background
 * override at all), same as the main content area below it.
 */
.site-footer.babu88-footer {
    background: var(--babu88-bg-alt);
    --ink: var(--babu88-dark-ink);
    --muted: var(--babu88-dark-muted);
    --border: var(--babu88-dark-border);
    padding: 36px 0 20px;
}

/* ---------- App-download banner (above the header on every page, see header.php) ---------- */
.babu88-app-banner {
    display: flex; align-items: center; gap: 12px;
    background: var(--babu88-bg-alt); color: var(--babu88-dark-ink);
    padding: 9px clamp(12px, 4vw, 24px);
}
.babu88-app-banner-close {
    flex-shrink: 0; width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer;
    color: var(--babu88-dark-muted); font-size: 20px; line-height: 1;
}
.babu88-app-banner-close:hover { color: var(--babu88-dark-ink); }
.babu88-app-banner-info { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.babu88-app-banner-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--babu88-accent-ink);
    font-weight: 800; font-size: 15px; object-fit: cover;
}
.babu88-app-banner-text { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.babu88-app-banner-btn {
    flex-shrink: 0; padding: 7px 16px; border-radius: 6px; background: var(--accent); color: var(--babu88-accent-ink);
    font-weight: 800; font-size: 13px; text-decoration: none; text-transform: uppercase; letter-spacing: .3px;
}
.babu88-app-banner-btn:hover { background: #ffd35e; }

/* ---------- Header additions (logo/nav come from base.css unchanged) ---------- */
/* base.css only constrains the logo by height (max-height:40px; width:auto) — an unusually wide source image (or one with an opaque canvas instead of a transparent background) could otherwise stretch wide enough to visually cover most of the dark header bar on a narrow viewport. This caps it defensively; it never affects a normally-proportioned logo. */
.site-logo { max-width: 160px; }
.babu88-header-actions { display: flex; align-items: center; gap: 10px; margin-left: 16px; flex-shrink: 0; }
.babu88-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 18px; border-radius: 8px; font-weight: 700; font-size: 14px;
    text-decoration: none; white-space: nowrap; border: 1px solid transparent;
}
.babu88-btn-primary { background: var(--babu88-blue); color: #fff; }
.babu88-btn-primary:hover { background: #0958d6; }
.babu88-btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.babu88-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.babu88-btn-secondary { background: var(--accent); color: var(--babu88-accent-ink); }
.babu88-btn-secondary:hover { background: #ffd35e; }
@media (max-width: 720px) {
    .babu88-header-actions { display: none; } /* both CTAs live in .babu88-mobile-actionbar below this width instead */
}

/* ---------- Hero slider spacing (base.css already handles the carousel mechanics/JS hooks) ---------- */
@media (min-width: 721px) {
    .cmspress-slider { max-width: 1100px; margin: 20px auto; border-radius: 14px; }
}
.cmspress-slider-caption { background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); }

/* ---------- Ticker (Settings -> Tagline, dark banner between the slider and the light category/game area) ---------- */
.babu88-ticker {
    display: flex; align-items: center; gap: 10px; overflow: hidden;
    background: var(--babu88-bg-alt); border-bottom: 1px solid var(--babu88-dark-border);
    padding: 10px clamp(16px, 4vw, 40px);
}
.babu88-ticker-icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--accent); }
.babu88-ticker-icon svg { width: 100%; height: 100%; }
.babu88-ticker-track { display: inline-flex; white-space: nowrap; animation: babu88-marquee 16s linear infinite; }
.babu88-ticker-track span { display: inline-block; padding-right: 60px; color: var(--accent); font-weight: 600; font-size: 14px; }
@keyframes babu88-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .babu88-ticker-track { animation: none; } }

/*
 * Category quick-nav — light area (matches the reference), capped to the
 * same max-width/centering/side-padding as .babu88-shell below it (game
 * grid, footer) so their left edges line up on wide desktop viewports,
 * instead of the chips sitting flush against the browser edge while the
 * content below sits in a centered column.
 */
.babu88-cat-nav {
    display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 1100px; margin: 0 auto; padding: 16px 20px 14px; background: var(--bg);
    border-bottom: 3px solid var(--accent);
    scrollbar-width: thin;
}
.babu88-cat-chip {
    display: inline-flex; flex-direction: row; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 9px 18px; border-radius: 999px; text-decoration: none; cursor: pointer;
    white-space: nowrap; font-size: 14px; font-weight: 700;
    color: #1c1e21; background: #fff; border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.babu88-cat-chip:hover { border-color: var(--accent); }
.babu88-cat-chip-icon {
    display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0;
}
.babu88-cat-chip-icon svg { width: 100%; height: 100%; }
.babu88-cat-chip-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.babu88-cat-chip-label { font-size: 14px; font-weight: 700; }

/*
 * Category tabs — same hidden-radio + label technique as base.css's own
 * .block-tabs (see the comment above it there): a radio per category, a
 * .babu88-cat-chip <label> that checks it, and a .babu88-game-panel shown
 * only while its matching radio (by sibling position) is checked. Radios,
 * the <nav> (a different tag, so it's never counted among the panels' own
 * :nth-of-type sequence), and the panels are all direct children of
 * .babu88-cat-tabs (see templates/home.php) for this to work. Capped at 11
 * — the fixed category list in inc/games.php — kept in lockstep here.
 */
.babu88-cat-radio { position: absolute; opacity: 0; pointer-events: none; }
.babu88-game-panel { display: none; }
.babu88-cat-radio:nth-of-type(1):checked ~ .babu88-game-panel:nth-of-type(1) { display: block; }
.babu88-cat-radio:nth-of-type(2):checked ~ .babu88-game-panel:nth-of-type(2) { display: block; }
.babu88-cat-radio:nth-of-type(3):checked ~ .babu88-game-panel:nth-of-type(3) { display: block; }
.babu88-cat-radio:nth-of-type(4):checked ~ .babu88-game-panel:nth-of-type(4) { display: block; }
.babu88-cat-radio:nth-of-type(5):checked ~ .babu88-game-panel:nth-of-type(5) { display: block; }
.babu88-cat-radio:nth-of-type(6):checked ~ .babu88-game-panel:nth-of-type(6) { display: block; }
.babu88-cat-radio:nth-of-type(7):checked ~ .babu88-game-panel:nth-of-type(7) { display: block; }
.babu88-cat-radio:nth-of-type(8):checked ~ .babu88-game-panel:nth-of-type(8) { display: block; }
.babu88-cat-radio:nth-of-type(9):checked ~ .babu88-game-panel:nth-of-type(9) { display: block; }
.babu88-cat-radio:nth-of-type(10):checked ~ .babu88-game-panel:nth-of-type(10) { display: block; }
.babu88-cat-radio:nth-of-type(11):checked ~ .babu88-game-panel:nth-of-type(11) { display: block; }
.babu88-cat-radio:nth-of-type(1):checked ~ .babu88-cat-nav .babu88-cat-chip:nth-of-type(1),
.babu88-cat-radio:nth-of-type(2):checked ~ .babu88-cat-nav .babu88-cat-chip:nth-of-type(2),
.babu88-cat-radio:nth-of-type(3):checked ~ .babu88-cat-nav .babu88-cat-chip:nth-of-type(3),
.babu88-cat-radio:nth-of-type(4):checked ~ .babu88-cat-nav .babu88-cat-chip:nth-of-type(4),
.babu88-cat-radio:nth-of-type(5):checked ~ .babu88-cat-nav .babu88-cat-chip:nth-of-type(5),
.babu88-cat-radio:nth-of-type(6):checked ~ .babu88-cat-nav .babu88-cat-chip:nth-of-type(6),
.babu88-cat-radio:nth-of-type(7):checked ~ .babu88-cat-nav .babu88-cat-chip:nth-of-type(7),
.babu88-cat-radio:nth-of-type(8):checked ~ .babu88-cat-nav .babu88-cat-chip:nth-of-type(8),
.babu88-cat-radio:nth-of-type(9):checked ~ .babu88-cat-nav .babu88-cat-chip:nth-of-type(9),
.babu88-cat-radio:nth-of-type(10):checked ~ .babu88-cat-nav .babu88-cat-chip:nth-of-type(10),
.babu88-cat-radio:nth-of-type(11):checked ~ .babu88-cat-nav .babu88-cat-chip:nth-of-type(11) {
    background: var(--accent); border-color: var(--accent); color: var(--babu88-accent-ink);
}

/* base.css: .site-content.full-width { padding: 0 } — zero padding on every side, including bottom, so whatever homepage section renders last (game grid, or the blog "Latest Updates" list) otherwise touches the footer with no gap at all. Regular (non-full-width) pages already get 40px via base.css's own .site-content, so this only needs restoring for the homepage layout specifically. */
.site-content.full-width { padding-bottom: 40px; }

/* ---------- Game grid (directory-driven — see inc/games.php) ---------- */
.babu88-shell { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.babu88-section-heading {
    font-size: 19px; font-weight: 800; color: var(--ink); margin: 28px 0 14px;
    padding-left: 10px; border-left: 4px solid var(--accent);
}
.babu88-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.babu88-game-card {
    position: relative; display: block; border-radius: 10px; overflow: hidden;
    background: var(--babu88-card); border: 1px solid var(--border);
    aspect-ratio: 3 / 4; transition: transform .15s ease, border-color .15s ease;
}
.babu88-game-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.babu88-game-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.babu88-game-badge {
    position: absolute; top: 8px; left: -28px; z-index: 2; transform: rotate(-40deg);
    padding: 3px 32px; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #fff;
}
.babu88-game-badge-hot { background: var(--babu88-red); }
.babu88-game-badge-new { background: var(--babu88-green); }

.babu88-empty-state {
    margin: 24px 0; padding: 24px; border: 1px dashed var(--border); border-radius: 10px;
    color: var(--muted); font-size: 14px;
}
.babu88-empty-state code { color: var(--babu88-accent-ink); background: var(--babu88-card); padding: 1px 4px; border-radius: 3px; }

/* ---------- Latest updates (blog posts on the homepage) ---------- */
.babu88-updates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.babu88-update-card { background: var(--babu88-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.babu88-update-card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.babu88-update-card h3 { margin: 0; padding: 12px 14px; font-size: 15px; }
.babu88-update-card h3 a { text-decoration: none; color: var(--ink); }
.babu88-update-card h3 a:hover { color: var(--accent); }

.babu88-front-content { border-top: 1px solid var(--border); padding: 24px 0 8px; }

/* ---------- Footer additions (base.css supplies .site-footer / .site-footer-nav; dark scoping is above) ---------- */
.babu88-footer .babu88-shell { text-align: left; } /* base.css's .site-footer is text-align:center; reset it for these left-aligned blocks */
.babu88-footer-block { padding: 20px 0; border-bottom: 1px solid var(--border); }
.babu88-footer-block:first-child { padding-top: 0; }
.babu88-footer-heading { color: var(--accent); font-size: 15px; font-weight: 800; margin: 0 0 16px; text-transform: uppercase; letter-spacing: .5px; }

.babu88-footer-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.babu88-footer-person { display: flex; align-items: center; gap: 10px; }
.babu88-footer-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(255, 255, 255, .06); }
.babu88-footer-person-name { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.babu88-footer-person-season { display: block; font-size: 12px; color: var(--muted); }

.babu88-footer-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.babu88-footer-icons img { height: 30px; width: auto; }

.babu88-footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.babu88-footer-social a {
    display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--border); overflow: hidden;
}
.babu88-footer-social a:hover { border-color: var(--accent); }
.babu88-footer-social a img { width: 100%; height: 100%; object-fit: cover; }
.babu88-footer-social a svg { width: 18px; height: 18px; color: var(--ink); }

.babu88-footer-brand { padding: 20px 0; text-align: center; }
.babu88-footer-brand img { max-height: 40px; width: auto; }
.babu88-footer-brand span { font-size: 20px; font-weight: 800; color: var(--accent); }

.babu88-footer-copy { text-align: center; color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }

/* ---------- Fixed mobile action bar (both CTAs; header hides its own copies below this width, see above) ---------- */
.babu88-mobile-actionbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 1px; background: #e5e7eb; }
.babu88-mobile-actionbar .babu88-btn { flex: 1 1 50%; border-radius: 0; padding: 16px 12px; }
@media (max-width: 720px) {
    .babu88-mobile-actionbar { display: flex; }
    body { padding-bottom: 62px; } /* room for the fixed bar so it never covers the footer */
}

.not-found .babu88-btn { margin-top: 14px; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }