/* Speels thema: warme kleuren, afgeronde vormen, voor jeugdbewegingen en clubs
   (MIJLPALEN.md, mijlpaal 8 / "Jeugdig"). Vult site.css aan; wijzigt geen kleuren/lettertypes
   (dat blijft de per-tenant instelling), enkel vorm en structuur: sterk afgerond, compact,
   met een vrolijk kleuraccent op de badges. Bewust géén handgetekende stickers/krabbels -
   dat oogt als een moodboard, niet als een site die een vereniging elke dag gebruikt. */

body[data-theme="speels"] {
    /* Mockup alignment (kolom Jeugdig): extra heavy headings, pill buttons. */
    --heading-weight: 800;
    --btn-radius: 999px;
    --font-size-hero: clamp(2.75rem, 5vw + 1rem, 5.75rem);
    --radius-md: 20px;
    --radius-lg: 28px;
    --space-lg: 2rem;
    /* D4 component hooks: warm accent-tinted panels and cards, full accent badges. */
    --panel-bg: var(--color-secondary-soft);
    --panel-shadow: var(--shadow-sm);
    --card-bg: var(--color-secondary-soft);
    --card-shadow: var(--shadow-sm);
    --badge-bg: var(--color-secondary);
    --badge-text: var(--color-on-secondary);
    --badge-weight: 600;
    --panel-badge-bg: var(--color-secondary);
    --panel-badge-text: var(--color-on-secondary);
}

body[data-theme="speels"] .site-header {
    background-color: var(--color-background);
    color: var(--color-text);
    padding: var(--space-2xs) 0;
}

body[data-theme="speels"] .site-header__brand {
    color: var(--color-text);
    font-size: 1.6rem;
    font-weight: 800;
}

/* Speels, like Klassiek, never puts a photo behind the header: its hero is a pair of rounded
   cards below it. "Transparant over foto" therefore left white links on the light page (and
   the action button on top of the hero caption) - the header simply stays solid here (D6). */
body[data-theme="speels"] .site-header.site-header--transparent {
    position: relative;
    background-color: var(--color-background);
    background-image: none;
    color: var(--color-text);
    text-shadow: none;
}

body[data-theme="speels"] .site-header.site-header--transparent.site-header--sticky {
    position: sticky;
}

body[data-theme="speels"] .site-header--transparent .site-header__brand {
    color: var(--color-text);
}

/* Hero (mockup alignment - toneelgroepen.png, kolom Jeugdig: "Jong Tomeel", "Kleine
   Rebellen", "Theaterbende", "Stage Up", "Plankgas"): the text sits on the white page - no
   colored card - with a huge, extra-heavy title in the text color and one part marked with a
   colored highlighter stroke; the photo sits on a soft pastel panel next to it. */
body[data-theme="speels"] .block-header-hero {
    margin: 0 0 var(--space-2xl);
    gap: var(--space-xl);
    align-items: center;
}

body[data-theme="speels"] .block-header-hero__content {
    flex: 1 1 45%;
    padding: var(--space-lg) 0;
}

body[data-theme="speels"] .block-header-hero h1 {
    color: var(--color-text);
    line-height: 1;
    letter-spacing: -0.02em;
}

/* The highlighter stroke behind the accent, like the yellow/pink marker in the mockups. */
body[data-theme="speels"] .hero-accent {
    color: inherit;
    padding: 0 0.12em;
    background-image: linear-gradient(transparent 58%, var(--color-secondary) 58%, var(--color-secondary) 92%, transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body[data-theme="speels"] .block-header-hero .lead {
    color: var(--color-text);
}

body[data-theme="speels"] .block-header-hero__media {
    flex: 1 1 50%;
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background-color: var(--color-secondary-soft);
}

body[data-theme="speels"] .block-header-hero__media img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
}

/* Without a photo the text gets the soft panel itself, so the hero keeps its presence. */
body[data-theme="speels"] .block-header-hero--no-media .block-header-hero__content {
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
    background-color: var(--color-secondary-soft);
}

/* Speels: the caption becomes a tilted "sticker" on the photo, as in the Jeugdig mockups. */
body[data-theme="speels"] .block-header-hero__caption {
    position: absolute;
    top: calc(var(--space-md) * -0.5);
    right: calc(var(--space-md) * -0.5);
    max-width: 16ch;
    margin: 0;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-md);
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
    font-style: normal;
    font-weight: 700;
    text-align: center;
    transform: rotate(4deg);
    box-shadow: var(--shadow-md);
}

body[data-theme="speels"] .block-header-hero__ornament {
    display: block;
    font-size: 2rem;
    color: var(--color-secondary);
    margin-bottom: var(--space-xs);
}

body[data-theme="speels"] .btn-primary {
    box-shadow: var(--shadow-sm);
}

/* D7: a warm, tinted footer with rounded top corners. */
body[data-theme="speels"] {
    --footer-bg: var(--color-secondary-soft);
    --footer-border: 0;
}

body[data-theme="speels"] .site-footer {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* A long club name ("De Karel van Mander-Ghesellen") would be cut off next to the hamburger. */
@media (max-width: 720px) {
    body[data-theme="speels"] .site-header__brand {
        font-size: 1.15rem;
    }
}