/*
Theme Name: Card Clash
Theme URI: https://card-clash.io/
Author: bdecent GmbH
Author URI: https://bdecent.de/
Description: Block theme for card-clash.io — the information site for Card Clash, a top-trumps card game for learning about data. Ports the design system of the original static site. Makes no external requests.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: cardclash
Tags: block-theme, one-column, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   Card Clash — component layer.
   Tokens, layout and core-block styling live in theme.json. This file carries
   only the bespoke components the patterns are built from.
   No @import, no external fonts, no remote assets. Keep it that way.
   ========================================================================== */

:root {
    --cc-ink: var(--wp--preset--color--ink);
    --cc-ink-soft: var(--wp--preset--color--ink-soft);
    --cc-muted: var(--wp--preset--color--muted);
    --cc-line: var(--wp--preset--color--line);
    --cc-surface: var(--wp--preset--color--surface);
    --cc-surface-2: var(--wp--preset--color--surface-2);
    --cc-brand: var(--wp--preset--color--brand);
    --cc-brand-dark: var(--wp--preset--color--brand-dark);
    --cc-brand-tint: var(--wp--preset--color--brand-tint);
    --cc-amber: var(--wp--preset--color--amber);
    --cc-violet: var(--wp--preset--color--violet);
    --cc-green: var(--wp--preset--color--green);
    --cc-rose: var(--wp--preset--color--rose);

    --cc-radius: 14px;
    --cc-radius-lg: 22px;
    --cc-shadow-sm: 0 1px 2px rgba(11, 18, 32, .06), 0 4px 12px rgba(11, 18, 32, .05);
    --cc-shadow: 0 2px 4px rgba(11, 18, 32, .05), 0 12px 32px rgba(11, 18, 32, .09);
    --cc-shadow-lg: 0 4px 8px rgba(11, 18, 32, .06), 0 28px 60px rgba(11, 18, 32, .16);

    /* The playing card is a paper object; it stays light in both schemes,
       just softened in the dark one so it does not glare. */
    --cc-card-face: #ffffff;
    --cc-card-ink: #1e293b;
    --cc-card-muted: #64748b;

    /* Deliberately-dark surfaces: footer, code, step badges, the skip link.
       These must NOT follow the ink text role, which inverts. */
    --cc-inverse-bg: #0b1220;
    --cc-inverse-fg: #ffffff;

    --cc-header-bg: rgba(255, 255, 255, .86);
    --cc-callout-bg: #fffbeb;
    --cc-callout-fg: #713f12;
    --cc-callout-strong: #78350f;
    --cc-tag-self-fg: #15803d;
    --cc-tag-self-bg: #f0fdf4;
    --cc-tag-self-line: #bbf7d0;
    --cc-tag-proj-fg: #7c3aed;
    --cc-tag-proj-bg: #f5f3ff;
    --cc-tag-proj-line: #ddd6fe;
    --cc-ok-bg: #f0fdf4;
    --cc-ok-fg: #14532d;
    --cc-err-bg: #fff1f2;
    --cc-err-fg: #881337;
}

/* --- Dark scheme ---------------------------------------------------------
   Follows the operating system; there is no toggle, because the site has no
   cookies or local storage to remember a choice in and we are not adding any.

   The WordPress presets are overridden as well as the cc- tokens, so
   theme.json's own output — body, links, headings, buttons and the
   .has-*-color utility classes an editor can apply — follows too. Redefining
   only the cc- layer would leave those stranded in light mode.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        /* WordPress presets: the semantic roles flip, the accents lighten. */
        --wp--preset--color--ink: #eef3fb;
        --wp--preset--color--ink-soft: #c3cede;
        --wp--preset--color--muted: #92a3bd;
        --wp--preset--color--line: #27333f;
        --wp--preset--color--surface: #0f1723;
        --wp--preset--color--surface-2: #151f2c;
        --wp--preset--color--surface-3: #1c2736;
        --wp--preset--color--brand: #2f6fe4;   /* keeps white labels at 4.5:1 */
        --wp--preset--color--brand-dark: #a8c5ff;
        --wp--preset--color--brand-tint: #16233a;
        --wp--preset--color--amber: #e0a458;
        --wp--preset--color--violet: #a78bfa;
        --wp--preset--color--green: #4ade80;
        --wp--preset--color--rose: #fb7185;

        --cc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
        --cc-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
        --cc-shadow-lg: 0 4px 8px rgba(0, 0, 0, .45), 0 28px 60px rgba(0, 0, 0, .55);

        --cc-card-face: #eef2f7;
        --cc-card-ink: #16202e;
        --cc-card-muted: #5b6b80;

        /* Lifted off the page background so the band still reads as a band. */
        --cc-inverse-bg: #060a11;
        --cc-inverse-fg: #eef3fb;

        --cc-header-bg: rgba(15, 23, 35, .86);
        --cc-callout-bg: #2a2013;
        --cc-callout-fg: #f1d9ab;
        --cc-callout-strong: #f8e7c4;
        --cc-tag-self-fg: #6ee7a4;
        --cc-tag-self-bg: #10281c;
        --cc-tag-self-line: #1d4433;
        --cc-tag-proj-fg: #c4b5fd;
        --cc-tag-proj-bg: #1f1a33;
        --cc-tag-proj-line: #372f5c;
        --cc-ok-bg: #10281c;
        --cc-ok-fg: #86efac;
        --cc-err-bg: #2b141b;
        --cc-err-fg: #fda4af;
    }
}



html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

:focus-visible { outline: 3px solid var(--cc-amber); outline-offset: 2px; border-radius: 4px; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--cc-inverse-bg);
    color: var(--cc-inverse-fg);
    padding: .7rem 1.1rem;
    z-index: 100;
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: var(--cc-inverse-fg); }

/* --- Section tones (block style variations on core/group) ---------------- */

.is-style-cc-muted { background: var(--cc-surface-2); }

.is-style-cc-ink {
    background:
        radial-gradient(1000px 420px at 12% -10%, rgba(37, 99, 235, .3), transparent 60%),
        radial-gradient(760px 380px at 92% 110%, rgba(124, 58, 237, .26), transparent 62%),
        var(--cc-ink);
    color: #cbd5e1;
}
.is-style-cc-ink :is(h1, h2, h3, h4) { color: #fff; }
.is-style-cc-ink a:not(.wp-element-button) { color: #bfdbfe; }
.is-style-cc-ink a:not(.wp-element-button):hover { color: #fff; }
.is-style-cc-ink .cc-eyebrow { color: #93c5fd; }
.is-style-cc-ink .cc-lead,
.is-style-cc-ink .cc-note,
.is-style-cc-ink .cc-feature p { color: #a7b6cc; }

/* --- Text roles (block style variations on core/paragraph) --------------- */

.cc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cc-brand-dark);
}

.cc-lead { font-size: clamp(1.06rem, 1rem + .4vw, 1.3rem); color: var(--cc-muted); }
.cc-note { font-size: .88rem; color: var(--cc-muted); }

.cc-chip {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-line);
    border-radius: 999px;
    padding: .2em .7em;
    color: var(--cc-muted);
}

.cc-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-weight: 650;
    text-decoration: none;
}
.cc-arrow-link::after { content: "\2192"; transition: transform .15s ease; }
.cc-arrow-link:hover::after { transform: translateX(3px); }

/* --- Buttons (block style variations on core/button) --------------------- */

.wp-block-button .wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    border-radius: 999px;
    border: 2px solid transparent;
    line-height: 1.2;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease,
        border-color .14s ease, color .14s ease;
}
.wp-block-button .wp-element-button:active { transform: translateY(1px); }

.wp-block-button:not(.is-style-cc-ghost):not(.is-style-cc-light) .wp-element-button {
    border-color: var(--cc-brand);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .32);
}

.wp-block-button.is-style-cc-ghost .wp-element-button {
    background: transparent;
    border-color: var(--cc-line);
    color: var(--cc-ink);
    box-shadow: none;
}
.wp-block-button.is-style-cc-ghost .wp-element-button:hover {
    border-color: var(--cc-ink);
    background: var(--cc-surface-2);
    color: var(--cc-ink);
}
.is-style-cc-ink .wp-block-button.is-style-cc-ghost .wp-element-button {
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}
.is-style-cc-ink .wp-block-button.is-style-cc-ghost .wp-element-button:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .1);
}

.wp-block-button.is-style-cc-light .wp-element-button {
    background: #fff;
    border-color: #fff;
    color: var(--cc-inverse-bg);
    box-shadow: none;
}
.wp-block-button.is-style-cc-light .wp-element-button:hover { background: #e8eefb; border-color: #e8eefb; }

/* --- Panels and features ------------------------------------------------- */

.cc-panel {
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-lg);
    padding: 26px;
    box-shadow: var(--cc-shadow-sm);
    height: 100%;
}
.is-style-cc-ink .cc-panel {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}

.cc-feature__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    line-height: 1;
    border-radius: 13px;
    background: var(--cc-brand-tint);
}
.is-style-cc-ink .cc-feature__icon { background: rgba(255, 255, 255, .1); }
.cc-feature p { color: var(--cc-muted); font-size: .97rem; }

.cc-step__num {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cc-inverse-bg);
    color: var(--cc-inverse-fg);
    font-weight: 800;
    font-size: .95rem;
}
.is-style-cc-ink .cc-step__num { background: #fff; color: var(--cc-inverse-bg); }

/* --- Offer cards --------------------------------------------------------- */

.cc-offer {
    display: flex;
    flex-direction: column;
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-lg);
    padding: 26px;
    box-shadow: var(--cc-shadow-sm);
    height: 100%;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cc-offer:hover { transform: translateY(-3px); box-shadow: var(--cc-shadow); border-color: #c7d5ee; }
.cc-offer.is-featured { border-color: var(--cc-brand); box-shadow: 0 0 0 3px var(--cc-brand-tint), var(--cc-shadow); }

.cc-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cc-muted);
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-line);
    border-radius: 999px;
    padding: .25em .7em;
}
.cc-tag--self { color: var(--cc-tag-self-fg); background: var(--cc-tag-self-bg); border-color: var(--cc-tag-self-line); }
.cc-tag--project { color: var(--cc-tag-proj-fg); background: var(--cc-tag-proj-bg); border-color: var(--cc-tag-proj-line); }

.cc-offer__who { font-size: .93rem; color: var(--cc-muted); font-weight: 600; }
.cc-offer__price { font-size: 1.05rem; font-weight: 800; color: var(--cc-ink); }
.cc-offer__price small { font-weight: 600; color: var(--cc-muted); font-size: .78rem; }

.cc-ticks { list-style: none; padding: 0; }
.cc-ticks li {
    position: relative;
    padding-left: 1.6em;
    font-size: .96rem;
    color: var(--cc-ink-soft);
}
.cc-ticks li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--cc-green);
    font-weight: 800;
}
.is-style-cc-ink .cc-ticks li { color: #cbd5e1; }

/* --- Audience cards ------------------------------------------------------ */

.cc-audience {
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    padding: 22px;
    background: var(--cc-surface);
    border-top: 4px solid var(--cc-tone, var(--cc-brand));
    height: 100%;
}
.cc-audience__age {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cc-tone, var(--cc-brand));
}
.cc-audience p { font-size: .95rem; color: var(--cc-muted); }

/* Tone utilities — pick one on an audience or deck card. */
.cc-tone-orange { --cc-tone: #c2410c; }
.cc-tone-sky    { --cc-tone: #0369a1; }
.cc-tone-indigo { --cc-tone: #4f46e5; }
.cc-tone-teal   { --cc-tone: #0e7490; }
.cc-tone-green  { --cc-tone: #16a34a; }
.cc-tone-violet { --cc-tone: #7c3aed; }
.cc-tone-amber  { --cc-tone: #b45309; }
.cc-tone-rose   { --cc-tone: #be185d; }

/* --- Stat strip ---------------------------------------------------------- */

.cc-statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.cc-statstrip > div { text-align: center; }
.cc-statstrip b {
    display: block;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--cc-ink);
    font-variant-numeric: tabular-nums;
}
.cc-statstrip span { font-size: .92rem; color: var(--cc-muted); }
.is-style-cc-ink .cc-statstrip b { color: #fff; }
.is-style-cc-ink .cc-statstrip span { color: #a7b6cc; }

/* --- Deck cards ---------------------------------------------------------- */

.cc-deck {
    display: flex;
    flex-direction: column;
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    overflow: hidden;
    box-shadow: var(--cc-shadow-sm);
    height: 100%;
    transition: transform .16s ease, box-shadow .16s ease;
}
.cc-deck:hover { transform: translateY(-3px); box-shadow: var(--cc-shadow); }
.cc-deck__head {
    padding: 18px 20px;
    color: #fff;
    /* Deepened so white text clears 4.5:1 against every deck tone. */
    background: linear-gradient(125deg,
        color-mix(in srgb, var(--cc-tone, var(--cc-brand)) 72%, black),
        color-mix(in srgb, var(--cc-tone, var(--cc-brand)) 46%, black));
}
.cc-deck__head :is(h3, h4) { color: #fff; margin: 0; font-size: 1.08rem; }
.cc-deck__emoji { font-size: 1.6rem; display: block; line-height: 1; }
.cc-deck__meta { font-size: .82rem; opacity: .92; margin: 0; }
.cc-deck__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 14px; }
.cc-deck__body > p { font-size: .93rem; color: var(--cc-muted); margin: 0; }
.cc-deck__attrs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.cc-deck__attrs .cc-chip { font-size: .74rem; }

/* --- The card (mirrors the real plugin card) ----------------------------- */

.cc-card {
    --cc: var(--cc-brand);
    width: 15.6em;
    aspect-ratio: 59 / 91;
    background: linear-gradient(170deg, var(--cc-card-face) 60%, color-mix(in srgb, var(--cc) 6%, var(--cc-card-face)));
    border: .22em solid var(--cc);
    border-radius: .9em;
    padding: .45em;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    box-shadow: var(--cc-shadow);
    color: var(--cc-card-ink);
    overflow: hidden;
}

.cc-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5em;
    background: linear-gradient(115deg, var(--cc), color-mix(in srgb, var(--cc) 72%, black));
    color: #fff;
    border-radius: .5em;
    padding: .28em .5em;
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.cc-card__group {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-card__hero { text-align: center; padding: .35em 0 .25em; }
.cc-card__logo {
    width: 3em;
    height: 3em;
    margin: 0 auto .15em;
    display: grid;
    place-items: center;
    font-size: 1.9em;
    line-height: 1;
    background: color-mix(in srgb, var(--cc) 14%, var(--cc-card-face));
    border: .09em solid var(--cc);
    border-radius: 50%;
}
.cc-card__name { font-size: 1.05em; font-weight: 800; line-height: 1.1; margin: 0; color: var(--cc-card-ink); }
.cc-card__subtitle { font-size: .7em; color: var(--cc-card-muted); font-weight: 600; margin: .15em 0 0; }

.cc-card__stats { margin: .3em 0 0; display: flex; flex-direction: column; gap: .08em; list-style: none; padding: 0; }
.cc-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .4em;
    padding: .26em .4em;
    font-size: .8em;
    border-radius: .45em;
    margin: 0;
}
.cc-card__stats .cc-stat:nth-child(odd) { background: color-mix(in srgb, var(--cc) 9%, var(--cc-card-face)); }
.cc-stat__label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-stat__label small { font-weight: 400; color: var(--cc-card-muted); }
.cc-stat__value { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }

.cc-card__fact {
    margin-top: auto;
    font-size: .68em;
    line-height: 1.35;
    color: var(--cc-card-muted);
    background: color-mix(in srgb, var(--cc) 8%, var(--cc-card-face));
    border-radius: .5em;
    padding: .4em .55em;
}
.cc-card__fact b { color: var(--cc); display: block; font-size: .95em; }

.cc-card--back {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 8px, transparent 8px 16px),
        linear-gradient(150deg, var(--cc), color-mix(in srgb, var(--cc) 55%, black));
    border-color: color-mix(in srgb, var(--cc) 70%, black);
    display: grid;
    place-items: center;
    color: #fff;
}
.cc-card--back span { font-size: 3.4em; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }

/* Card tones — set on .cc-card to recolour it. */
.cc-card.cc-tone-orange { --cc: #ea580c; }
.cc-card.cc-tone-sky    { --cc: #0284c7; }
.cc-card.cc-tone-indigo { --cc: #4f46e5; }
.cc-card.cc-tone-teal   { --cc: #0d9488; }
.cc-card.cc-tone-green  { --cc: #16a34a; }
.cc-card.cc-tone-violet { --cc: #7c3aed; }
.cc-card.cc-tone-amber  { --cc: #b45309; }
.cc-card.cc-tone-rose   { --cc: #be185d; }

/* Fanned stack — decorative, purely presentational. */
.cc-fan { position: relative; min-height: 400px; display: grid; place-items: center; }
.cc-fan .cc-card { position: absolute; transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.cc-fan .cc-card:nth-child(1) { transform: rotate(-13deg) translate(-116px, 14px) scale(.93); z-index: 1; }
.cc-fan .cc-card:nth-child(2) { transform: rotate(-4deg) translate(-42px, -12px) scale(.97); z-index: 2; }
.cc-fan .cc-card:nth-child(3) { transform: rotate(5deg) translate(46px, 4px); z-index: 3; }
.cc-fan .cc-card:nth-child(4) { transform: rotate(14deg) translate(126px, 26px) scale(.93); z-index: 2; }
.cc-fan:hover .cc-card:nth-child(1) { transform: rotate(-16deg) translate(-140px, 6px) scale(.94); }
.cc-fan:hover .cc-card:nth-child(2) { transform: rotate(-6deg) translate(-52px, -22px) scale(.98); }
.cc-fan:hover .cc-card:nth-child(3) { transform: rotate(6deg) translate(56px, -2px) scale(1.02); }
.cc-fan:hover .cc-card:nth-child(4) { transform: rotate(17deg) translate(150px, 18px) scale(.94); }

@media (max-width: 620px) {
    .cc-fan { min-height: 330px; }
    .cc-fan .cc-card { font-size: 11px; }
    .cc-fan .cc-card:nth-child(1) { transform: rotate(-12deg) translate(-84px, 12px) scale(.93); }
    .cc-fan .cc-card:nth-child(2) { transform: rotate(-4deg) translate(-30px, -8px) scale(.97); }
    .cc-fan .cc-card:nth-child(3) { transform: rotate(5deg) translate(34px, 4px); }
    .cc-fan .cc-card:nth-child(4) { transform: rotate(13deg) translate(92px, 22px) scale(.93); }
}

/* --- Callout (block style variation on core/group) ----------------------- */

.is-style-cc-callout {
    border-left: 4px solid var(--cc-amber);
    background: var(--cc-callout-bg);
    border-radius: 0 var(--cc-radius) var(--cc-radius) 0;
    padding: 18px 22px;
    font-size: .97rem;
    color: var(--cc-callout-fg);
}
.is-style-cc-callout strong { color: var(--cc-callout-strong); }
.is-style-cc-ink .is-style-cc-callout { color: var(--cc-callout-fg); }

/* --- Tables (block style variation on core/table) ------------------------ */

.wp-block-table.is-style-cc-matrix { overflow-x: auto; }
.wp-block-table.is-style-cc-matrix > table {
    border-collapse: collapse;
    width: 100%;
    min-width: 660px;
    font-size: .95rem;
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    overflow: hidden;
}
.wp-block-table.is-style-cc-matrix :is(th, td) {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--cc-line);
    vertical-align: top;
}
.wp-block-table.is-style-cc-matrix thead th {
    background: var(--cc-surface-2);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cc-muted);
    white-space: nowrap;
}
.wp-block-table.is-style-cc-matrix tbody tr:last-child td { border-bottom: none; }
.wp-block-table.is-style-cc-matrix td:first-child { font-weight: 700; color: var(--cc-ink); }

/* --- FAQ (block style variation on core/details) ------------------------- */

.wp-block-details.is-style-cc-faq {
    border: none;
    border-bottom: 1px solid var(--cc-line);
    border-radius: 0;
    padding: 0;
}
.wp-block-details.is-style-cc-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 44px 20px 0;
    font-weight: 700;
    color: var(--cc-ink);
    position: relative;
    font-size: 1.04rem;
}
.wp-block-details.is-style-cc-faq summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-cc-faq summary::after {
    content: "+";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--cc-brand);
    line-height: 1;
}
.wp-block-details.is-style-cc-faq[open] summary::after { content: "\2013"; }
.wp-block-details.is-style-cc-faq > :not(summary) { padding-bottom: 22px; color: var(--cc-muted); max-width: 62ch; }

/* --- Download tiles ------------------------------------------------------ */

.cc-download {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    padding: 20px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--cc-shadow-sm);
    height: 100%;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cc-download:hover { transform: translateY(-3px); box-shadow: var(--cc-shadow); border-color: #c7d5ee; color: inherit; }
.cc-download img { border-radius: 6px; box-shadow: var(--cc-shadow-sm); flex-shrink: 0; }
.cc-download__filetype {
    display: grid;
    place-items: center;
    width: 92px;
    height: 130px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-line);
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .08em;
    color: var(--cc-muted);
}
.cc-download h3, .cc-download h4 { margin: 0 0 .35em; }
.cc-download p { font-size: .9rem; color: var(--cc-muted); margin: 0 0 .5em; }
.cc-download__meta { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cc-muted); }

/* --- Header -------------------------------------------------------------- */

.cc-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cc-header-bg);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--cc-line);
}

/* backdrop-filter makes an element a containing block for position:fixed
   descendants, which traps the navigation's full-screen overlay inside the
   header box. The frosted bar is a desktop nicety; the working menu is not
   optional, so drop the filter wherever the overlay can open. */
@media (max-width: 600px) {
    .cc-header { backdrop-filter: none; background: var(--cc-surface); }
}
.cc-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
    backdrop-filter: none;
}
.cc-brand {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    font-weight: 800;
    font-size: 1.12rem;
    letter-spacing: -.02em;
    color: var(--cc-ink);
    text-decoration: none;
}
.cc-brand:hover { color: var(--cc-ink); }
.cc-brand__mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--cc-brand), var(--cc-violet));
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
    flex-shrink: 0;
}
.cc-brand__mark svg { width: 21px; height: 21px; }

.cc-header .wp-block-navigation a { font-weight: 600; font-size: .95rem; }

/* --- Header bar and mobile overlay --------------------------------------- */

.cc-header__bar { min-height: 62px; }
.cc-brand { flex-shrink: 0; }

/* The hamburger sits beside the CTA, never on its own row. */
.cc-header__right { flex-shrink: 0; }
.cc-header__cta .wp-element-button { white-space: nowrap; }

@media (max-width: 420px) {
    /* Narrow phones: the wordmark can go, the mark still identifies the site. */
    .cc-brand { font-size: 1rem; }
    .cc-header__cta .wp-element-button { font-size: .86rem; padding-left: .9em; padding-right: .9em; }
}

/* Core gives the closed overlay a hidden container; when it opens it becomes a
   full-screen panel. Left-align and stack it — the header's own flex layout
   would otherwise push the links to the right edge and squash them. */
.wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    inset: 0;
    z-index: 100000;
    padding: clamp(20px, 5vw, 40px) 24px clamp(32px, 8vw, 56px);
    background: var(--cc-surface);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    padding-top: 8px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    border-bottom: 1px solid var(--cc-line-soft, var(--cc-line));
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
    border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: .95rem .2rem;   /* a comfortable tap target */
    font-size: 1.06rem;
    font-weight: 650;
    color: var(--cc-ink);
}
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-polylang-navigation-language-switcher .wp-block-navigation-item__content {
    font-size: .84rem;
    font-weight: 700;
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open { color: var(--cc-ink); }

/* --- Footer -------------------------------------------------------------- */

.cc-footer {
    background: var(--cc-inverse-bg);
    color: #93a4bd;
    font-size: .93rem;
}
.cc-footer a { color: #cbd5e1; text-decoration: none; }
.cc-footer a:hover { color: #fff; text-decoration: underline; }
.cc-footer :is(h3, h4) { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.cc-footer .cc-brand { color: #fff; }
.cc-footer ul { list-style: none; padding: 0; }
.cc-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .85rem;
    color: #93a4bd;
}

/* --- CTA band ------------------------------------------------------------ */

.cc-cta { text-align: center; }
.cc-cta h2 { max-width: 20ch; margin-inline: auto; }
.cc-cta > p { max-width: 46ch; margin-inline: auto; font-size: 1.08rem; }
.cc-cta .wp-block-buttons { justify-content: center; }

/* --- Hero ---------------------------------------------------------------- */

.cc-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 78% 8%, rgba(37, 99, 235, .1), transparent 62%),
        radial-gradient(700px 420px at 8% 96%, rgba(245, 158, 11, .12), transparent 60%),
        var(--cc-surface);
}
.cc-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: .88rem; color: var(--cc-muted); }
.cc-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-line);
    border-radius: 999px;
    padding: .35em .85em;
    font-weight: 600;
}

/* --- Play band: the one route to the game -------------------------------- */

.cc-play {
    border-radius: var(--cc-radius-lg);
    background: linear-gradient(180deg, #101a2e, #0b1220);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: var(--cc-shadow-lg);
    color: #cbd5e1;
    overflow: hidden;
}
.cc-play :is(h2, h3) { color: #fff; }
.cc-play__badge {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #93c5fd;
    background: rgba(147, 197, 253, .12);
    border: 1px solid rgba(147, 197, 253, .3);
    border-radius: 999px;
    padding: .3em .9em;
}
.cc-play__shot {
    border-radius: var(--cc-radius);
    border: 1px solid rgba(255, 255, 255, .14);
    overflow: hidden;
    display: block;
}
.cc-play__shot img { display: block; width: 100%; height: auto; }

/* --- Funnel: a real sequence, so it is numbered ------------------------- */

.cc-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; counter-reset: ccstep; list-style: none; padding: 0; margin: 0; }
.cc-funnel > li {
    counter-increment: ccstep;
    position: relative;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    padding: 22px 20px 20px;
    box-shadow: var(--cc-shadow-sm);
    margin: 0;
}
.cc-funnel > li::before {
    content: counter(ccstep);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cc-brand);
    color: #fff;
    font-weight: 800;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    margin-bottom: 14px;
}
.cc-funnel h3, .cc-funnel h4 { margin: 0 0 .4em; font-size: 1.05rem; }
.cc-funnel p { font-size: .93rem; color: var(--cc-muted); margin: 0; }
.is-style-cc-ink .cc-funnel > li { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.is-style-cc-ink .cc-funnel > li::before { background: #fff; color: var(--cc-inverse-bg); }
.is-style-cc-ink .cc-funnel p { color: #a7b6cc; }

/* --- Two-direction split ------------------------------------------------- */

.cc-direction {
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-lg);
    border-top: 4px solid var(--cc-tone, var(--cc-brand));
    padding: 26px;
    height: 100%;
}
.cc-direction__kicker {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cc-tone, var(--cc-brand));
}

/* --- Contact form (cardclash-contact plugin) ----------------------------- */

.cc-form { max-width: 34rem; }
.cc-form__row { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 1.1rem; }
.cc-form label { font-weight: 650; font-size: .95rem; color: var(--cc-ink); }
.cc-form label span { color: var(--cc-rose); }
.cc-form input[type="text"],
.cc-form input[type="email"],
.cc-form textarea {
    font: inherit;
    font-size: 1rem;
    color: var(--cc-ink);
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: 10px;
    padding: .7em .85em;
    width: 100%;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.cc-form input:focus,
.cc-form textarea:focus {
    outline: none;
    border-color: var(--cc-brand);
    box-shadow: 0 0 0 3px var(--cc-brand-tint);
}
.cc-form textarea { resize: vertical; min-height: 8em; }
.cc-form__hint { font-size: .86rem; color: var(--cc-muted); }
.cc-form__row--submit { flex-direction: column; align-items: flex-start; gap: .7rem; }
.cc-form button[type="submit"] {
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid var(--cc-brand);
    background: var(--cc-brand);
    color: #fff;
    border-radius: 999px;
    padding: .72rem 1.7rem;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .32);
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.cc-form button[type="submit"]:hover { background: var(--cc-brand-dark); border-color: var(--cc-brand-dark); }
.cc-form button[type="submit"]:active { transform: translateY(1px); }

/* The honeypot must be unreachable by sight, keyboard and screen reader. */
.cc-form__hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cc-form__notice {
    border-radius: 10px;
    padding: .9rem 1.1rem;
    margin: 0 0 1.2rem;
    font-size: .95rem;
    border-left: 3px solid;
}
.cc-form__notice--ok { background: var(--cc-ok-bg); border-color: var(--cc-green); color: var(--cc-ok-fg); }
.cc-form__notice--error { background: var(--cc-err-bg); border-color: var(--cc-rose); color: var(--cc-err-fg); }

/* --- Language switcher (Polylang) ---------------------------------------- */

/* Polylang puts its class on the <ul> itself, not on a wrapper — targeting a
   descendant ul silently does nothing, which is how the bullets escaped. */
ul.cc-langswitch,
ul.cc-navlang {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.cc-langswitch li,
ul.cc-navlang li { margin: 0; list-style: none; }

ul.cc-langswitch a,
ul.cc-navlang a {
    display: inline-block;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: .4em .6em;
    border-radius: 8px;
}

/* In the menu, Polylang emits <li> straight into the nav's own <ul>, so the
   items inherit nav layout and fold into the mobile overlay for free. They only
   need to read as languages rather than as another page. */
.wp-block-polylang-navigation-language-switcher > a { text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.wp-block-polylang-navigation-language-switcher:not(.current-lang) > a { color: var(--cc-muted); }
.wp-block-polylang-navigation-language-switcher.lang-item-first { margin-left: .6rem; padding-left: .8rem; border-left: 1px solid var(--cc-line); }

@media (max-width: 600px) {
    /* Stacked in the overlay every item already carries a bottom rule, so a
       gap separates the languages from the pages without a second line. */
    .is-menu-open .wp-block-polylang-navigation-language-switcher.lang-item-first {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        margin-top: 1.4rem;
    }
}

/* In the dark footer. */
.cc-footer ul.cc-langswitch { margin-top: 1rem; }
.cc-footer ul.cc-langswitch a { color: #93a4bd; }
.cc-footer ul.cc-langswitch a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.cc-footer ul.cc-langswitch .current-lang > a { color: #fff; background: rgba(255, 255, 255, .1); }

/* The mobile overlay stacks; give the language row a little air above it. */
@media (max-width: 600px) {
    .wp-block-navigation__responsive-container.is-menu-open ul.cc-navlang {
        margin-top: .6rem;
        padding-top: .8rem;
        border-top: 1px solid var(--cc-line);
        width: 100%;
    }
}

/* core/code is set to the ink preset in theme.json, which is a text role and
   inverts with the scheme. Pin it to the inverse surface instead. */
.wp-block-code { background: var(--cc-inverse-bg) !important; color: #e2e8f0 !important; }

/* The "Tell us the goal" tile carries an inline dark background from the
   editor; on a dark page it needs an edge or it dissolves into the section. */
@media (prefers-color-scheme: dark) {
    .cc-offer.has-background { border-color: rgba(255, 255, 255, .14); }
}


/* --- Dark scheme, component layer ----------------------------------------
   These must come after the rules they override: they carry the same
   specificity as the base components, so source order decides. The token
   overrides live with :root at the top; anything selector-based lives here.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
/* The hero and the dark section both sat on light grounds; soften their
       glows so they read as depth rather than as smudges. */
    .cc-hero {
        background:
            radial-gradient(900px 500px at 78% 8%, rgba(91, 141, 239, .12), transparent 62%),
            radial-gradient(700px 420px at 8% 96%, rgba(224, 164, 88, .09), transparent 60%),
            var(--cc-surface);
    }
    .is-style-cc-ink {
        background:
            radial-gradient(1000px 420px at 12% -10%, rgba(37, 99, 235, .22), transparent 60%),
            radial-gradient(760px 380px at 92% 110%, rgba(124, 58, 237, .2), transparent 62%),
            #070c14;
    }

    /* Deck heads are already deepened towards black for contrast; on a dark
       page they need lifting instead, or they vanish into the background. */
    .cc-deck__head {
        background: linear-gradient(125deg,
            color-mix(in srgb, var(--cc-tone, var(--cc-brand)) 82%, black),
            color-mix(in srgb, var(--cc-tone, var(--cc-brand)) 58%, black));
    }

    /* Primary buttons carry a blue glow that reads as a halo on dark. */
    .wp-block-button:not(.is-style-cc-ghost):not(.is-style-cc-light) .wp-element-button {
        box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
    }
    .cc-form button[type="submit"] { box-shadow: 0 6px 18px rgba(37, 99, 235, .28); }

    /* Screenshots of a light UI are the one thing that should not glare. */
    .cc-play__shot img { filter: brightness(.92) contrast(1.02); }

    /* Tone colours double as small-caps text on cards. The light-mode values
       are chosen for contrast against white and are far too dark here. */
    .cc-tone-orange { --cc-tone: #fb923c; }
    .cc-tone-sky    { --cc-tone: #60a5fa; }
    .cc-tone-indigo { --cc-tone: #a5b4fc; }
    .cc-tone-teal   { --cc-tone: #5eead4; }
    .cc-tone-green  { --cc-tone: #4ade80; }
    .cc-tone-violet { --cc-tone: #c4b5fd; }
    .cc-tone-amber  { --cc-tone: #fbbf24; }
    .cc-tone-rose   { --cc-tone: #fda4af; }

    /* …but the deck head paints white text ON the tone, so it needs the
       saturated version back, deepened rather than lightened. */
    .cc-deck.cc-tone-orange { --cc-tone: #ea580c; }
    .cc-deck.cc-tone-sky    { --cc-tone: #0284c7; }
    .cc-deck.cc-tone-indigo { --cc-tone: #4f46e5; }
    .cc-deck.cc-tone-teal   { --cc-tone: #0d9488; }
    .cc-deck.cc-tone-green  { --cc-tone: #16a34a; }
    .cc-deck.cc-tone-violet { --cc-tone: #7c3aed; }
    .cc-deck.cc-tone-amber  { --cc-tone: #b45309; }
    .cc-deck.cc-tone-rose   { --cc-tone: #be185d; }
}