/* CSS-overlay voor tenant [lotto-intermarche] — geladen na de niche-bundle.
   Geen Tailwind-compile: gewone CSS. Geserveerd op /tenant-assets/overlay.css
   Brand matching: https://www.lotto-intermarche.be/ */

/* ── Sculpin font-face ─────────────────────────────────────────────────── */
@font-face {
    font-family: "Sculpin";
    src: url("/templates/lotto-intermarche/fonts/sculpin-light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sculpin";
    src: url("/templates/lotto-intermarche/fonts/sculpin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sculpin";
    src: url("/templates/lotto-intermarche/fonts/sculpin-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sculpin";
    src: url("/templates/lotto-intermarche/fonts/sculpin-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sculpin";
    src: url("/templates/lotto-intermarche/fonts/sculpin-black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ── Dark theme base ───────────────────────────────────────────────────── */
body {
    background-color: #0f0f0f;
    color: #FFFFFF;
    font-family: "Sculpin", sans-serif;
}

/* Override Tailwind text-gray-900 default on body */
body.bg-surface {
    color: #FFFFFF;
}

/* ── Links ─────────────────────────────────────────────────────────────── */
a {
    color: inherit;
}
a:hover {
    color: var(--color-primary, #dc0814);
}

/* ── Cards & surfaces on dark bg ───────────────────────────────────────── */
.card {
    background: #1a1a1a;
    color: #FFFFFF;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary {
    background: var(--color-primary, #dc0814);
    color: #FFFFFF;
}
.btn-primary:hover {
    background: #be010c;
}

/* ── Press Center heading ──────────────────────────────────────────────── */
.press-center-heading {
    border-left: 4px solid var(--color-primary, #dc0814);
    padding-left: 1rem;
}

/* ── Homepage hero ─────────────────────────────────────────────────────── */
.hero-lotto {
    background: linear-gradient(135deg, #3d0000 0%, #0f0f0f 60%);
    position: relative;
    overflow: hidden;
}
.hero-lotto::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(220, 8, 20, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Section styling ───────────────────────────────────────────────────── */
.section-dark {
    background-color: #0f0f0f;
    color: #FFFFFF;
}
.section-contrast {
    background-color: #161616;
    color: #FFFFFF;
}
.section-beige {
    background-color: #F4F2EA;
    color: #0f0f0f;
}

/* ── Override blue accents with brand red ──────────────────────────────── */
.dark .text-blue-600,
.dark .text-blue-400,
.text-blue-600,
.text-blue-400 {
    color: #dc0814 !important;
}
.dark .hover\:text-blue-600:hover,
.dark .hover\:text-blue-400:hover {
    color: #be010c !important;
}
.dark .focus\:border-blue-500:focus,
.dark .focus\:ring-blue-500:focus {
    border-color: #dc0814 !important;
    --tw-ring-color: #dc0814 !important;
}

/* ── Footer minimal ───────────────────────────────────────────────────── */
footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── fr-* cycling design classes on dark background ─────────────────────── */
/* fr-display and fr-muted use --color-secondary which on this dark-body tenant
   is near-black or an off-brand color — override to readable light tones.
   Revert inside white fr-card surfaces so card text stays dark on white. */
.fr-display             { color: #FFFFFF; }
.fr-muted,
.text-muted             { color: rgba(255, 255, 255, 0.60); }
.text-secondary         { color: rgba(255, 255, 255, 0.80); }

/* Inside white fr-card surfaces, revert to dark */
.fr-card .fr-display,
.fr-card-sm .fr-display { color: #1a1a1a; }
.fr-card .fr-muted,
.fr-card-sm .fr-muted,
.fr-card .text-muted,
.fr-card-sm .text-muted { color: rgba(26, 26, 26, 0.58); }
.fr-card .text-secondary,
.fr-card-sm .text-secondary { color: rgba(26, 26, 26, 0.80); }

/* Exception: fr-display inside a text-white ancestor (e.g. price on red header) */
.fr-card [class~="text-white"] .fr-display { color: #FFFFFF; }