/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.4
Description: CasinoWings child theme. Design tokens live in theme.json; this file holds component CSS (cards, FAQ, steps, TOC) that can't be expressed declaratively. Brand colors reference theme.json presets via var(--wp--preset--color--*).
Text Domain: twentytwentyfive-child
*/

/* ═══════════════════════════════════════════════════════════════════════════
   Casino data card components (cd-*) — agnostic, reusable casino-card styling.
   Colors reference theme.json presets via var(--wp--preset--color--cd-*), so
   they are editable in the Site Editor → Styles (Global Styles). The card
   structural styling lives in cd-casino-card / cd-comp-card classes instead of
   inline block styles, so patterns stay clean. Legacy kh-* names are aliased.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card wrappers — structural styling moved out of per-block inline styles */
.cd-casino-card {
    border: 1px solid var(--wp--preset--color--cd-card-border);
    border-radius: 8px;
    overflow: hidden;
    padding: 0 0 0.75rem;
    background: var(--wp--preset--color--base);
    text-align: center;
}
.cd-card-body { padding: 0.5rem 0.75rem 0; }
.cd-comp-card {
    background: var(--wp--preset--color--cd-comp-bg);
    border-radius: 6px;
    overflow: hidden;
    padding: 0 0 0.75rem;
    color: #fff;
    text-align: center;
}

/* Field components */
.cd-card-badge, .kh-card-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    background-color: #fa3d5e;
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 0 0 3px 3px;
    line-height: 1.5;
    margin: 0;
}
.cd-card-badge:empty, .kh-card-badge:empty { display: none; }
.kh-stars { display: block; color: var(--wp--preset--color--cd-star); font-size: 0.8rem; margin: 0.2rem 0; white-space: nowrap; }
.cd-bonus-box, .kh-bonus-box { background-color: var(--wp--preset--color--cd-soft-bg); border-radius: 4px; padding: 0.4rem 0.6rem; }
.cd-bonus-amount, .kh-bonus-amount { display: block; font-size: 0.95rem; font-weight: 700; color: var(--wp--preset--color--cw-dark); margin: 0.1rem 0 0; }
.cd-wagering, .kh-wagering { display: block; font-size: 0.7rem; color: #666; margin: 0.05rem 0 0; }
.cd-comp-stars, .kh-comp-stars        { display: block; color: var(--wp--preset--color--cd-star); font-size: 0.78rem; margin: 0.2rem 0; }
.cd-comp-bonus-amount, .kh-comp-bonus-amount { display: block; font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0.1rem 0; }
.cd-comp-spins, .kh-comp-spins        { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.85); margin: 0; }
.cd-slot-num, .kh-slot-num    { display: block; font-size: 2.2rem; font-weight: 800; color: rgba(255,255,255,0.22); margin: 0; line-height: 1; }
.cd-slot-title, .kh-slot-title  { font-size: 0.88rem; font-weight: 700; margin: 0.3rem 0 0.15rem; }
.cd-slot-casino, .kh-slot-casino { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.7); margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Site header (template part) — links must stay white over the green bar,
   overriding the global cw-green link color from theme.json.
   ═══════════════════════════════════════════════════════════════════════════ */
.cw-site-header .wp-block-navigation a,
.cw-site-header .wp-block-navigation-item__content {
    color: rgba(255,255,255,0.9) !important;
    text-decoration: none !important;
    transition: color 0.15s;
}
.cw-site-header .wp-block-navigation a:hover { color: #fff !important; }
.cw-site-header .wp-block-navigation__responsive-container-open svg,
.cw-site-header .wp-block-navigation__responsive-container-close svg { fill: #fff !important; }
/* Single-post hero: show at natural aspect (like the original), capped in height so
   a tall hero can't dominate — NOT forced into a 16/9 crop. Scoped to cw-post-hero
   so it doesn't touch the More-posts cards or the casino-card logos. */
.cw-post-hero img {
    width: 100%; height: auto; max-height: 400px; object-fit: cover;
}
.cw-site-header .wp-block-site-logo img {
    max-width: 150px; height: auto;
    /* The logo SVG is already multi-colour with a white wordmark, designed for the
       green header — no invert filter, no white box (both hid it). !important beats
       a leftover white-box rule still in the DB global-styles custom CSS. */
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ── Site footer (template part) ─────────────────────────────────────────── */
.cw-site-footer .wp-block-heading { margin-bottom: 0.75rem !important; }
ul.cw-footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; }
ul.cw-footer-links li { padding: 0.2rem 0; }
ul.cw-footer-links a {
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none !important;
    font-size: 0.85rem;
    transition: color 0.15s;
}
ul.cw-footer-links a:hover { color: var(--wp--preset--color--cw-green) !important; }

/* Footer columns: keep all four on one row (override the flex-wrap that pushed
   "Latest News" onto a second row); collapse responsively. */
.cw-footer-cols {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 781px) { .cw-footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cw-footer-cols { grid-template-columns: 1fr; } }

/* Author bio: avatar group beside the "About the Author" box (was stacked).
   The two blocks are wrapped in .cw-author-signature (flex row). */
.cw-author-signature {
    display: flex !important;
    gap: 1.25rem;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}
.cw-author-signature > .wp-block-group:first-child {
    flex: 0 0 auto;
    text-align: center;
    align-self: center;
}
.cw-author-signature > .cw-author-block {
    flex: 1 1 300px;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
.cw-author-signature .wp-block-image { margin: 0 auto; }
.cw-author-signature .wp-block-image img { border-radius: 50%; width: 56px; height: auto; }
@media (max-width: 600px) { .cw-author-signature { flex-direction: column; align-items: center; } }

/* Defensive: hide any nav that was scraped inline into legacy page content
   (redundant with the template-part header). New migrations don't scrape nav. */
.cw-nav.wp-block-group { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Casino card
   ═══════════════════════════════════════════════════════════════════════════ */
.cd-card {
    background: var(--wp--preset--color--cw-card-bg);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    margin-bottom: 1rem !important;
    overflow: hidden;
    padding: 0 !important;
}
/* Kill TwentyTwentyFive's default block-gap inside the card */
.cd-card.wp-block-group { --wp--style--block-gap: 0 !important; gap: 0 !important; }
.cd-card > .wp-block-columns { gap: 0 !important; --wp--style--block-gap: 0 !important; margin: 0 !important; }
.cd-card > .wp-block-columns .wp-block-column { padding: 0 !important; }
.cd-card > p.cd-tc { margin: 0 !important; }
.cd-card .wp-block-column:first-child { background-color: #d8d8d8; }
.cw-logo-col {
    background-color: #d8d8d8;
    display: flex !important; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 70px; height: 100%; padding: 0.5rem 0.75rem !important;
}
/* Center content vertically in non-logo columns to eliminate empty space at bottom */
.cd-card > .wp-block-columns > .wp-block-column:not(:first-child) {
    display: flex !important; align-items: center !important;
}
.cd-card > .wp-block-columns > .wp-block-column:not(:first-child) > .wp-block-group { width: 100%; }
.cw-logo-col .wp-block-post-featured-image img {
    object-fit: contain !important; width: 100% !important; height: 75px !important;
}
.cw-logo-col .wp-block-post-title {
    display: block !important; font-size: 0.75rem !important; font-weight: 400 !important;
    color: rgba(255,255,255,0.7) !important; text-align: center;
    margin-top: 0.4rem !important; line-height: 1.2;
}
.cd-bonus {
    display: flex; align-items: flex-start; background: var(--wp--preset--color--cw-card-bg);
    border-radius: 6px; padding: 0.5rem 0.75rem;
    font-size: 0.88rem; font-weight: 600; color: #232323; margin: 0;
}
.cd-bonus::before { content: "💰"; margin-right: 0.5rem; font-size: 1rem; flex-shrink: 0; margin-top: 0.05rem; }
.cd-perks { list-style: none !important; padding: 0 !important; margin: 0.6rem 0 0 !important; }
.cd-perks li { font-size: 0.83rem; color: #444; padding: 0.1rem 0; display: flex; align-items: flex-start; }
.cd-perks li::before { content: "✓"; color: var(--wp--preset--color--cw-green); font-weight: 700; margin-right: 0.4rem; flex-shrink: 0; }
.cd-stars { display: block; color: var(--wp--preset--color--cw-green); font-size: 1.1rem; letter-spacing: 0.05em; margin: 0 0 0.3rem; }
.cd-play-btn .wp-block-button__link {
    background-color: var(--wp--preset--color--cw-orange) !important; color: #fff !important;
    border-radius: 25px !important; font-weight: 700; font-size: 0.95rem;
    padding: 0.6rem 1.4rem !important; white-space: nowrap;
    display: flex; align-items: center; gap: 0.3em; width: 100%; justify-content: center;
}
.cd-play-btn .wp-block-button__link::after { content: " →"; }
.cd-tc { font-size: 0.7rem; color: #aaa; padding: 0.3rem 0.75rem 0.5rem; margin: 0 !important; border-top: 1px solid #e8e8e8; }
.cd-badge {
    display: inline-block; background: var(--wp--preset--color--cw-green); color: #fff;
    font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 3px;
    margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.cd-badge:empty { display: none; }

/* Casino card upsell variants */
.cd-bonus--hero { font-size: 1.15rem !important; font-weight: 700 !important; color: var(--wp--preset--color--cw-dark) !important; }
.cd-wagering--hero {
    font-size: 1.1rem !important; font-weight: 700 !important; color: var(--wp--preset--color--cw-green) !important;
    display: block; margin-bottom: 0.25rem;
}
.cd-wagering--hero::before { content: "🎯 "; }
.cd-wagering--sub { font-size: 0.78rem !important; color: #777 !important; margin-top: 0.25rem; display: block; }
.cd-wagering--sub::before { content: "Wagering: "; font-weight: 600; }

/* ── TOC strip ───────────────────────────────────────────────────────────── */
.cw-toc-strip a { color: #0b5e4b !important; text-decoration: none; }
.cw-toc-strip a:hover { text-decoration: underline; }

/* ── Step list (wp:group + wp:columns rows) ──────────────────────────────── */
.cw-step-list.wp-block-group { position: relative; margin-top: 1rem !important; gap: 1.5rem; }
.cw-step-item.wp-block-columns { gap: 1rem !important; }
.cw-step-list.wp-block-group::before {
    content: ''; position: absolute; left: 15px; top: 16px;
    height: calc(100% - 32px); width: 2px; background: #c8e8df; z-index: 0; pointer-events: none;
}
.cw-step-item.wp-block-columns .wp-block-column:first-child {
    flex-grow: 0 !important; flex-shrink: 0 !important; padding: 0 !important; min-width: 0 !important;
}
p.cw-step-no {
    width: 32px !important; height: 32px !important; border-radius: 50% !important;
    background-color: var(--wp--preset--color--cw-green) !important; color: #fff !important; font-weight: 700 !important;
    font-size: 0.85rem !important; line-height: 32px !important; text-align: center !important;
    margin: 0 !important; padding: 0 !important; position: relative !important; z-index: 1 !important;
}

/* ── Content headings ────────────────────────────────────────────────────── */
.wp-block-post-content .wp-block-heading { color: #232323; font-weight: 700; margin: 0 0 0.75rem; }
.cw-step-item .wp-block-heading { font-size: 0.95rem; margin: 0 0 0.35rem; }
.cw-author-block .wp-block-heading { font-size: 0.9rem; margin: 0 0 0.4rem; }

/* ── Outline card borders (via class — WP border JSON breaks validation) ──── */
.cw-outline-green { border-color: var(--wp--preset--color--cw-green); border-style: dotted; border-width: 4px; }
.cw-outline-blue  { border-color: #bab7e1; border-style: dotted; border-width: 4px; }
.cw-outline-gray  { border-color: #808080; border-style: dotted; border-width: 4px; }
.cw-outline-red   { border-color: #ff3b7c; border-style: dotted; border-width: 4px; }

/* ── FAQ (wp:details) ────────────────────────────────────────────────────── */
.cw-faq.wp-block-group { margin-top: 0.75rem !important; gap: 0.5rem; }
details.cw-faq-item { border: 1px solid #cce4dd; border-radius: 6px; overflow: hidden; background: #fff; }
details.cw-faq-item > summary {
    padding: 0.75rem 1rem; font-size: 0.92rem; font-weight: 600; color: #232323;
    cursor: pointer; background: #f0faf6; list-style: none; display: flex; align-items: center; gap: 0.6rem;
}
details.cw-faq-item > summary::-webkit-details-marker { display: none; }
details.cw-faq-item > summary::before { content: '+'; color: var(--wp--preset--color--cw-green); font-size: 1.15rem; font-weight: 700; flex-shrink: 0; }
details.cw-faq-item[open] > summary::before { content: '−'; }
details.cw-faq-item .wp-block-paragraph {
    padding: 0.75rem 1rem !important; border-top: 1px solid #cce4dd;
    font-size: 0.9rem !important; color: #444 !important; line-height: 1.65 !important; margin: 0 !important;
}

.cw-lang-picker a{text-decoration:none}