@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@source '../views/themes/**/*.blade.php';
@source '../views/tools/**/*.blade.php';
@source '../views/games/**/*.blade.php';
@source '../views/errors/**/*.blade.php';
@source '../views/components/site/**/*.blade.php';
@source '../js/tools/**/*.js';
@source '../js/games/**/*.js';
@source '../js/livescore.js';
@source '../js/icon-editor.js';
@source '../js/quiz.js';
@source '../js/cinema.js';
@source '../js/shop.js';
@source '../js/files/**/*.js';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/tailwind.blade.php';

/*
 * Per-site identity: the layout defines --brand, --accent, --surface, --ink
 * and --font from the site's settings, so one compiled stylesheet serves
 * every site with its own colours and typography.
 */
@theme inline {
    --color-brand: var(--brand);
    --color-accent: var(--accent);
    --color-surface: var(--surface);
    --color-ink: var(--ink);
    --font-site: var(--font);
}

/*
 * Theme design tokens. Every theme sets its own shape, depth and heading
 * typography; colours still come from each site's branding.
 */
:root {
    --radius-card: 1rem;
    --radius-btn: 0.75rem;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);
    --font-heading: var(--font);
}

[data-theme='editorial'] {
    --radius-card: 0.125rem;
    --radius-btn: 0.125rem;
    --shadow-card: none;
    --font-heading: 'Iowan Old Style', 'Palatino Linotype', Georgia, ui-serif, serif;
}

[data-theme='toolbox'] {
    --radius-card: 0.625rem;
    --radius-btn: 0.5rem;
    --shadow-card: 0 1px 0 rgb(0 0 0 / 0.04);
}

[data-theme='studio'] {
    --radius-card: 1.25rem;
    --radius-btn: 999px;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.05);
}

[data-theme='nature'] {
    --radius-card: 1.75rem;
    --radius-btn: 999px;
    --shadow-card: 0 10px 30px -18px rgb(30 60 20 / 0.35);
    --font-heading: 'Iowan Old Style', 'Palatino Linotype', Georgia, ui-serif, serif;
}

[data-theme='estate'] {
    --radius-card: 0.5rem;
    --radius-btn: 0.375rem;
    --shadow-card: 0 1px 3px rgb(15 23 42 / 0.08), 0 12px 32px -20px rgb(15 23 42 / 0.25);
}

[data-theme='energy'] {
    --radius-card: 1.25rem;
    --radius-btn: 0.875rem;
}

[data-theme='quiz'] {
    --radius-card: 1.25rem;
    --radius-btn: 0.875rem;
    --shadow-card: 4px 4px 0 var(--ink);
}

[data-theme='quiz'] .card,
[data-theme='quiz'] .card-link {
    border: 2px solid var(--ink);
}

[data-theme='docs'] {
    --radius-card: 0.5rem;
    --radius-btn: 0.375rem;
    --shadow-card: none;
}

@layer base {
    h1, h2, h3, .section-title {
        font-family: var(--font-heading);
    }
    html {
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: 5.5rem;
    }

    body {
        font-family: var(--font);
        color: var(--ink);
        background: var(--surface);
        text-rendering: optimizeLegibility;
    }

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

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
}

@utility btn {
    @apply inline-flex items-center justify-center gap-2 rounded-[var(--radius-btn)] px-4 py-2.5 text-sm font-semibold transition select-none disabled:cursor-not-allowed disabled:opacity-50;
}

@utility card {
    @apply rounded-[var(--radius-card)] border border-black/[0.06] bg-white shadow-[var(--shadow-card)];
}

@utility tint {
    background: color-mix(in oklab, var(--brand) 8%, white);
}

@layer components {
    .container-site {
        @apply mx-auto w-full max-w-6xl px-4 sm:px-6;
    }

    .card-link {
        @apply card transition duration-200 hover:-translate-y-0.5 hover:border-brand/30 hover:shadow-[0_2px_4px_rgb(0_0_0/0.04),0_16px_32px_-16px_rgb(0_0_0/0.25)];
    }

    .btn-brand {
        @apply btn bg-brand text-white shadow-sm hover:brightness-110 active:brightness-95;
    }

    .btn-ghost {
        @apply btn border border-black/10 bg-white text-ink hover:border-brand/40 hover:text-brand;
    }

    .icon-tile {
        @apply grid size-11 shrink-0 place-items-center rounded-xl bg-brand/10 text-brand;
    }

    .eyebrow {
        @apply text-xs font-bold tracking-[0.12em] text-brand uppercase;
    }

    .section-title {
        @apply text-2xl font-extrabold tracking-tight md:text-3xl;
    }

    .chip {
        @apply inline-flex items-center gap-1.5 rounded-full border border-black/10 bg-white px-3.5 py-1.5 text-sm font-medium transition hover:border-brand hover:text-brand;
    }

    .field {
        @apply block w-full rounded-[var(--radius-btn)] border border-slate-300 bg-white px-3 py-2.5 text-base text-ink shadow-xs focus:border-brand focus:ring-2 focus:ring-brand/30 focus:outline-none;
    }

    .label {
        @apply mb-1 block text-sm font-medium text-slate-700;
    }

    .prose-site {
        @apply prose prose-slate max-w-none md:prose-lg prose-headings:scroll-mt-24 prose-headings:font-extrabold prose-headings:tracking-tight prose-a:font-semibold prose-a:text-brand prose-a:decoration-brand/30 prose-a:underline-offset-4 hover:prose-a:decoration-brand prose-strong:text-ink prose-img:rounded-2xl prose-table:text-sm prose-th:bg-slate-50 prose-th:px-3 prose-td:px-3;
    }

    .table-wrap {
        @apply -mx-1 overflow-x-auto px-1;
    }

    /* Ads: always labelled, visually separated from content and controls,
       with reserved height to limit layout shift (CLS). */
    .ad-unit {
        @apply my-10 block border-y border-black/[0.06] py-4 text-center;
        min-height: 120px;
    }

    .ad-unit--sidebar {
        @apply my-0 rounded-2xl border bg-white px-3;
        min-height: 280px;
    }

    .ad-unit--after_content {
        min-height: 280px;
    }

    .ad-label {
        @apply mb-2 block text-[11px] tracking-wider text-slate-400 uppercase;
    }

    .ad-placeholder {
        @apply grid min-h-[100px] place-items-center rounded-xl border-2 border-dashed border-slate-300 bg-slate-50 p-4 text-xs text-slate-500;
    }

    .tool-result {
        @apply rounded-xl bg-brand/10 p-4 text-lg font-semibold text-ink;
    }

    /* Live scores ------------------------------------------------------ */
    .score-row {
        @apply grid grid-cols-[3.25rem_minmax(0,1fr)_auto] items-center gap-3 px-3 py-2.5 text-sm transition hover:bg-black/[0.03] sm:px-4;
    }

    .score-status {
        @apply text-center text-xs font-semibold text-slate-500 tabular-nums;
    }

    .score-row.is-live .score-status,
    .score-row.is-live .score-value {
        @apply text-rose-600;
    }

    .score-value {
        @apply min-w-[1.5rem] text-end font-bold tabular-nums;
    }

    .live-dot {
        @apply relative inline-flex size-2 rounded-full bg-rose-500;
    }

    .live-dot::after {
        content: '';
        @apply absolute inset-0 animate-ping rounded-full bg-rose-500/70;
    }

    .score-flash {
        animation: score-flash 2.5s ease-out;
    }

    @keyframes score-flash {
        0% { background: color-mix(in oklab, var(--accent) 55%, transparent); }
        100% { background: transparent; }
    }

    /* Games ------------------------------------------------------------ */
    .game-board {
        @apply card mx-auto w-full p-4 select-none sm:p-6;
    }

    .game-stat {
        @apply rounded-xl bg-black/[0.04] px-3 py-1.5 text-sm font-semibold tabular-nums;
    }

    /* Sudoku */
    /* Boards keep their geometry in right-to-left languages. */
    .sudoku-board, .simon-board, .mm-row {
        direction: ltr;
    }

    .sudoku-board {
        @apply grid aspect-square grid-cols-9 overflow-hidden rounded-xl border-2 border-ink bg-white;
    }

    .sudoku-cell {
        @apply grid place-items-center border-r border-b border-black/10 text-lg font-semibold text-brand tabular-nums transition-colors outline-none sm:text-2xl;
    }

    .sudoku-cell.br { @apply border-r-2 border-r-ink; }
    .sudoku-cell.bb { @apply border-b-2 border-b-ink; }
    .sudoku-cell.given { @apply font-bold text-ink; }
    .sudoku-cell.related { @apply bg-brand/[0.06]; }
    .sudoku-cell.same { @apply bg-brand/20; }
    .sudoku-cell.selected { @apply bg-accent/45; }
    .sudoku-cell.conflict { @apply bg-rose-100 text-rose-600; }

    /* Memory */
    .memory-board {
        @apply grid gap-2 sm:gap-3;
    }

    .memory-card {
        @apply grid aspect-square place-items-center rounded-xl bg-gradient-to-br from-brand to-[color-mix(in_oklab,var(--brand)_70%,black)] text-3xl shadow-md transition duration-300 sm:text-4xl;
    }

    .memory-card.flipped { @apply bg-none bg-white ring-2 ring-brand/40 [transform:rotateY(180deg)]; }
    .memory-card.flipped .memory-face { @apply [transform:rotateY(180deg)]; }
    .memory-card.matched { @apply bg-accent/30 opacity-70 ring-0; }

    /* Mental math */
    .mental-board {
        @apply rounded-2xl bg-black/[0.03] p-6 text-center transition-colors;
    }

    .mental-board.flash-ok { @apply bg-emerald-100; }
    .mental-board.flash-ko { @apply bg-rose-100; }

    /* Simon */
    .simon-board {
        @apply grid aspect-square grid-cols-2 gap-3 rounded-full bg-ink p-4;
    }

    .simon-pad {
        @apply opacity-55 transition duration-150 first:rounded-tl-full [&:nth-child(2)]:rounded-tr-full [&:nth-child(3)]:rounded-bl-full last:rounded-br-full;
    }

    .simon-pad.lit { @apply scale-[1.03] opacity-100 brightness-125; }

    /* Mastermind */
    .mm-row { @apply flex items-center gap-3 rounded-xl px-2 py-1.5 odd:bg-black/[0.03]; }
    .mm-num { @apply w-5 text-right text-xs font-bold text-slate-400 tabular-nums; }
    .mm-peg { @apply inline-block size-7 rounded-full border-2 border-black/10 bg-black/[0.06] shadow-inner; }
    .mm-hints { @apply ms-auto grid grid-cols-2 gap-1; }
    .mm-hints span { @apply size-2.5 rounded-full bg-black/10; }
    .mm-hints span.black { @apply bg-ink; }
    .mm-hints span.white { @apply border border-slate-400 bg-white; }
    .mm-color { @apply size-10 rounded-full shadow-md ring-2 ring-white transition hover:scale-110; }
    .mm-hint-demo { @apply inline-block size-2.5 rounded-full; }

    /* Quiz ------------------------------------------------------------- */
    .quiz-choice {
        @apply flex w-full items-center gap-3 rounded-[var(--radius-btn)] border-2 border-black/10 bg-white px-3 py-2.5 text-start font-medium transition enabled:hover:border-brand enabled:hover:bg-brand/[0.04] disabled:cursor-default;
    }

    .quiz-letter {
        @apply grid size-7 shrink-0 place-items-center rounded-full bg-black/[0.06] text-xs font-bold;
    }

    .quiz-choice[data-state='correct'] { @apply border-emerald-500 bg-emerald-50; }
    .quiz-choice[data-state='correct'] .quiz-letter { @apply bg-emerald-500 text-white; }
    .quiz-choice[data-state='wrong'] { @apply border-rose-500 bg-rose-50; }
    .quiz-choice[data-state='wrong'] .quiz-letter { @apply bg-rose-500 text-white; }
    .quiz-question[data-state='correct'] [data-feedback] { @apply text-emerald-700; }
    .quiz-question[data-state='wrong'] [data-feedback] { @apply text-rose-700; }
}

/* Sports (live scores) --------------------------------------------------- */
@utility text-live {
    color: #e11d48;
}

@utility bg-live {
    background-color: #e11d48;
}

@layer components {
    .sp-card {
        @apply rounded-xl bg-white shadow-sm ring-1 ring-slate-200/80;
    }

    .sp-row > a {
        @apply transition-colors hover:bg-slate-50;
    }

    .sp-row.is-live > a {
        background: color-mix(in oklab, #e11d48 5%, white);
    }

    .sp-row.is-stale {
        @apply opacity-80;
    }

    .sp-pulse {
        @apply inline-block size-1.5 animate-pulse rounded-full bg-live;
    }

    .sp-tab {
        @apply inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-slate-600 transition hover:text-ink;
    }

    .sp-tab[aria-pressed='true'] {
        @apply bg-brand text-white;
    }

    .sp-count {
        @apply rounded-full bg-black/[0.06] px-1.5 text-xs tabular-nums;
    }

    .sp-tab[aria-pressed='true'] .sp-count {
        @apply bg-white/20;
    }

    .sp-match-tab {
        @apply block border-b-2 border-transparent px-3 py-3 whitespace-nowrap text-slate-500 transition hover:text-ink;
    }

    .sp-match-tab[aria-selected='true'] {
        @apply border-accent text-ink;
    }

    /* Football pitch drawn with gradients (no image request). */
    .sp-pitch {
        @apply relative aspect-[3/4] overflow-hidden rounded-xl;
        background:
            linear-gradient(to bottom, transparent calc(50% - 1px), rgb(255 255 255 / 0.5) calc(50% - 1px), rgb(255 255 255 / 0.5) calc(50% + 1px), transparent calc(50% + 1px)),
            radial-gradient(circle at 50% 50%, transparent 14%, rgb(255 255 255 / 0.5) 14.3%, transparent 14.8%),
            repeating-linear-gradient(to bottom, #15803d 0 10%, #16a34a 10% 20%);
        box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.5);
    }

    .sp-flash {
        animation: score-flash 2.5s ease-out;
    }
}

/* Files theme (Compressa) ------------------------------------------------ */
[data-theme='files'] {
    --radius-card: 1rem;
    --radius-btn: 0.75rem;
}

.fz-drop.is-over {
    @apply scale-[1.01] border-brand bg-brand/10;
}

/* Optional dark mode: the theme flips its surfaces, text and fields. */
html.dark[data-theme='files'] {
    --surface: #0b1020;
    --ink: #e7e9f2;
    color-scheme: dark;
}

html.dark[data-theme='files'] :is(.bg-white, .fz-panel, .card, .fz-tile) {
    background-color: #131b30;
}

html.dark[data-theme='files'] :is(.bg-white\/85, .bg-white\/80, .bg-white\/70) {
    background-color: rgb(19 27 48 / 0.85);
}

html.dark[data-theme='files'] :is(.text-slate-500, .text-slate-600, .text-slate-700) {
    color: #a3abc2;
}

html.dark[data-theme='files'] :is(.border-black\/\[0\.06\], .ring-black\/\[0\.06\], .border-black\/10) {
    border-color: rgb(255 255 255 / 0.08);
    --tw-ring-color: rgb(255 255 255 / 0.08);
}

html.dark[data-theme='files'] :is(.field, .btn-ghost) {
    background-color: #0f1628;
    border-color: rgb(255 255 255 / 0.12);
    color: var(--ink);
}

html.dark[data-theme='files'] .bg-black\/\[0\.03\] {
    background-color: rgb(255 255 255 / 0.05);
}

html.dark[data-theme='files'] .prose-site {
    --tw-prose-body: #c9cee0;
    --tw-prose-headings: #f1f3fa;
    --tw-prose-bold: #f1f3fa;
    --tw-prose-bullets: #6b7593;
    --tw-prose-counters: #8d96b3;
    --tw-prose-th-borders: #2a3450;
    --tw-prose-td-borders: #222b44;
    --tw-prose-code: #f1f3fa;
}

html.dark[data-theme='files'] :is(.bg-emerald-50, .bg-amber-50, .bg-rose-50) {
    background-color: rgb(255 255 255 / 0.06);
}

html.dark[data-theme='files'] :is(.text-emerald-800, .text-rose-800) {
    color: #e7e9f2;
}

html.dark[data-theme='files'] .fz-drop {
    background-color: rgb(19 27 48 / 0.85);
}

html.dark[data-theme='files'] .bg-amber-100 {
    background-color: #3a2e0a;
}

html.dark[data-theme='files'] .text-amber-900 {
    color: #fde68a;
}

@media (width >= 64rem) {
    html.dark[data-theme='files'] #site-menu {
        background-color: transparent;
    }
}

/* Cinema theme (CinéRadar): dark by design --------------------------------- */
[data-theme='cinema'] {
    --radius-card: 1rem;
    --radius-btn: 0.75rem;
    color-scheme: dark;
}

[data-theme='cinema'] body {
    background: var(--surface);
    color: #f1f2f6;
}

.cn-header {
    transition: background-color 0.3s, box-shadow 0.3s;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.7), transparent);
}

.cn-header.is-scrolled {
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.06);
    backdrop-filter: blur(12px);
}

.cn-arrow {
    @apply absolute top-[38%] z-10 hidden size-11 -translate-y-1/2 place-items-center rounded-full bg-black/70 text-white opacity-0 shadow-lg ring-1 ring-white/15 backdrop-blur transition hover:bg-black/90 md:grid;
}

.cn-row:hover .cn-arrow {
    @apply opacity-100;
}

.cn-field {
    @apply rounded-xl border-0 bg-white/10 px-3 py-2 text-sm text-white ring-1 ring-white/10 placeholder:text-white/40 focus:ring-2 focus:ring-accent focus:outline-none;
}

.cn-field option {
    background: #14161f;
}

.cn-tab {
    @apply rounded-full bg-white/10 px-4 py-1.5 text-sm font-semibold text-white/70 transition;
}

.cn-tab[aria-selected='true'] {
    @apply bg-accent text-black;
}

/* Shared components (guides, legal pages) on the dark surface. */
[data-theme='cinema'] :is(.card, .card-link) {
    background: rgb(255 255 255 / 0.04);
    border-color: rgb(255 255 255 / 0.08);
}

[data-theme='cinema'] :is(.text-slate-500, .text-slate-600, .text-slate-700) {
    color: rgb(255 255 255 / 0.6);
}

[data-theme='cinema'] :is(.bg-white, .tint) {
    background: rgb(255 255 255 / 0.05);
}

[data-theme='cinema'] .prose-site {
    --tw-prose-body: rgb(255 255 255 / 0.82);
    --tw-prose-headings: #fff;
    --tw-prose-bold: #fff;
    --tw-prose-links: var(--accent);
    --tw-prose-bullets: rgb(255 255 255 / 0.4);
    --tw-prose-counters: rgb(255 255 255 / 0.5);
    --tw-prose-quotes: rgb(255 255 255 / 0.8);
    --tw-prose-quote-borders: var(--accent);
    --tw-prose-th-borders: rgb(255 255 255 / 0.2);
    --tw-prose-td-borders: rgb(255 255 255 / 0.1);
    --tw-prose-code: #fff;
}

[data-theme='cinema'] .prose-site a {
    color: var(--accent);
}

[data-theme='cinema'] .bg-amber-100 {
    background: #3a2e0a;
}

[data-theme='cinema'] .text-amber-900 {
    color: #fde68a;
}

/* Shared forms (contact page) on the dark cinema surface. */
[data-theme='cinema'] .field {
    background: rgb(255 255 255 / 0.06);
    border-color: rgb(255 255 255 / 0.14);
    color: #fff;
}

[data-theme='cinema'] .label,
[data-theme='cinema'] .text-ink {
    color: rgb(255 255 255 / 0.85);
}

[data-theme='cinema'] :is(.bg-rose-50, .bg-emerald-100) {
    background: rgb(255 255 255 / 0.08);
}

[data-theme='cinema'] .text-rose-800 {
    color: #fda4af;
}

/* Colour converter: checkerboard behind the preview, so transparency shows. */
.cc-checker {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #d4d4d8 25%, transparent 25%),
        linear-gradient(-45deg, #d4d4d8 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d4d4d8 75%),
        linear-gradient(-45deg, transparent 75%, #d4d4d8 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

/* Page blocks (CMS) ------------------------------------------------------- */
.cms-on-dark {
    color: rgb(255 255 255 / 0.92);
}

.cms-on-dark :is(.cms-heading, .text-ink, h2, h3) {
    color: #fff;
}

.cms-on-dark :is(.cms-muted, .text-slate-500, .text-slate-600) {
    color: rgb(255 255 255 / 0.78);
}

.cms-on-dark :is(.text-brand, .cms-stat) {
    color: #fff;
}

.cms-on-dark .cms-card {
    background: rgb(255 255 255 / 0.08);
    border-color: rgb(255 255 255 / 0.14);
}

.cms-on-dark .cms-prose {
    --tw-prose-body: rgb(255 255 255 / 0.88);
    --tw-prose-headings: #fff;
    --tw-prose-bold: #fff;
    --tw-prose-links: #fff;
    --tw-prose-bullets: rgb(255 255 255 / 0.5);
    --tw-prose-quotes: rgb(255 255 255 / 0.9);
}

.cms-on-light :is(.cms-heading, .text-ink) {
    color: #0f172a;
}

/*
 * Per-block design options (Apparence → Texte / Disposition). Unlayered, so
 * they win over the utility classes of the block templates.
 */
.cms-block[data-width='narrow'] .container-site { max-width: 48rem; }
.cms-block[data-width='medium'] .container-site { max-width: 64rem; }
.cms-block[data-width='wide'] .container-site { max-width: 80rem; }
.cms-block[data-width='full'] .container-site { max-width: none; }

.cms-block[data-align] :is(.text-center, .text-start, .text-end, .text-left, .text-right) { text-align: inherit; }
.cms-block[data-align='start'] { text-align: start; }
.cms-block[data-align='center'] { text-align: center; }
.cms-block[data-align='end'] { text-align: end; }
.cms-block[data-align='start'] :is(.justify-center, .justify-end) { justify-content: flex-start; }
.cms-block[data-align='center'] :is(.flex-wrap, .justify-start) { justify-content: center; }
.cms-block[data-align='end'] :is(.flex-wrap, .justify-center, .justify-start) { justify-content: flex-end; }
.cms-block[data-align='start'] .mx-auto:not(.container-site, img) { margin-inline: 0 auto; }
.cms-block[data-align='end'] .mx-auto:not(.container-site, img) { margin-inline: auto 0; }

.cms-block[data-text='sm'] :is(p, li, blockquote, td, th, dd, dt, .cms-prose) { font-size: 0.9375rem; }
.cms-block[data-text='lg'] :is(p, li, blockquote, td, th, dd, dt, .cms-prose) { font-size: 1.125rem; }
.cms-block[data-text='xl'] :is(p, li, blockquote, td, th, dd, dt, .cms-prose) { font-size: 1.3125rem; }

.cms-block[data-heading] .cms-heading { line-height: 1.12; }
.cms-block[data-heading='sm'] .cms-heading { font-size: 1.5rem; }
.cms-block[data-heading='md'] .cms-heading { font-size: clamp(1.75rem, 3.5vw, 2.25rem); }
.cms-block[data-heading='lg'] .cms-heading { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.cms-block[data-heading='xl'] .cms-heading { font-size: clamp(2.75rem, 7vw, 4.75rem); }

.cms-block :is(h1, h2, h3, .cms-heading) { font-family: var(--font-heading); }
.cms-text-color,
.cms-text-color :is(p, li, dd, dt, td, blockquote, .cms-muted, .text-slate-500, .text-slate-600, .text-ink) { color: var(--cms-text); }
.cms-text-color .cms-prose { --tw-prose-body: var(--cms-text); --tw-prose-bold: var(--cms-text); }
.cms-heading-color :is(h1, h2, h3, h4, .cms-heading) { color: var(--cms-heading); }
.cms-heading-color .cms-prose { --tw-prose-headings: var(--cms-heading); }

/* Embedded players keep a 16:9 frame. */
.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-block: 1.5em;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: #000;
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Light entrance animation: sections are hidden only once reported below the fold (see site.js). */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        transition:
            opacity 0.6s ease,
            transform 0.6s ease;
    }

    /* Never fully transparent: content stays readable for full-page captures and crawlers. */
    [data-reveal].reveal-pending {
        opacity: 0.55;
        transform: translateY(14px);
    }
}

/* Gallery lightbox */
.cms-lightbox {
    @apply fixed inset-0 z-[60] m-0 grid h-full max-h-none w-full max-w-none place-items-center bg-black/90 p-4;
}

.cms-lightbox img {
    @apply max-h-[85vh] max-w-full rounded-lg object-contain shadow-2xl;
}

/* Boutique theme (e-commerce) -------------------------------------------- */
[data-theme='boutique'] {
    --radius-card: 0.25rem;
    --radius-btn: 0;
    --shadow-card: none;
    --font-heading: 'Iowan Old Style', 'Palatino Linotype', Georgia, ui-serif, serif;
}

[data-theme='boutique'] .btn {
    letter-spacing: 0.04em;
}

/* Kitchen theme (recipes) --------------------------------------------------- */
[data-theme='kitchen'] {
    --radius-card: 1.5rem;
    --radius-btn: 999px;
    --shadow-card: 0 1px 2px rgb(60 30 10 / 0.05), 0 14px 30px -20px rgb(60 30 10 / 0.35);
    --font-heading: 'Iowan Old Style', 'Palatino Linotype', Georgia, ui-serif, serif;
}

/* Recipes print cleanly: no header, footer, ads or buttons. */
@media print {
    body > header,
    body > footer,
    .adsbygoogle,
    [data-ad-slot],
    [data-lang-suggest] {
        display: none !important;
    }
}

/* Market theme (dropshipping) --------------------------------------------- */
[data-theme='market'] {
    --radius-card: 1.25rem;
    --radius-btn: 999px;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.05), 0 12px 28px -18px rgb(0 0 0 / 0.25);
}

[data-theme='market'] .shop-card {
    @apply rounded-[var(--radius-card)] bg-white p-2 shadow-[var(--shadow-card)] transition hover:-translate-y-0.5;
}