/*
 |--------------------------------------------------------------------------
 | Onsernone Portal – saisonale Darstellung
 |--------------------------------------------------------------------------
 | Struktur und Motive sind versioniert. Farben, Intensität und Abstände
 | kommen aus den aktiven Datenbank-Tokens.
 */

:root {
    --portal-seasonal-decoration-opacity: 0;
    --portal-seasonal-decoration-size: 28px;
    --portal-seasonal-accent: var(--portal-color-accent);
    --portal-seasonal-accent-soft: var(--portal-color-accent-soft);
    --portal-seasonal-highlight: var(--portal-color-primary-soft);
    --portal-seasonal-surface: var(--portal-color-surface);
}

html[data-portal-decoration]:not([data-portal-decoration="none"]) body {
    position: relative;
}

html[data-portal-decoration]:not([data-portal-decoration="none"]) body::before {
    position: fixed;
    z-index: 1300;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--portal-seasonal-accent),
        var(--portal-seasonal-highlight),
        var(--portal-seasonal-accent)
    );
    content: "";
    opacity: var(--portal-seasonal-decoration-opacity);
    pointer-events: none;
}

html[data-portal-decoration]:not([data-portal-decoration="none"]) :is(
    .exp-hero,
    .ma-hero,
    .onsernone-hero,
    .place-hero,
    .business-directory-hero,
    [data-portal-hero]
) {
    position: relative;
    isolation: isolate;
}

html[data-portal-decoration]:not([data-portal-decoration="none"]) :is(
    .exp-hero,
    .ma-hero,
    .onsernone-hero,
    .place-hero,
    .business-directory-hero,
    [data-portal-hero]
) > * {
    position: relative;
    z-index: 1;
}

html[data-portal-decoration="christmas"] :is(
    .exp-hero,
    .ma-hero,
    .onsernone-hero,
    .place-hero,
    .business-directory-hero,
    [data-portal-hero]
)::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
        radial-gradient(circle, var(--portal-seasonal-surface) 0 1px, transparent 1.5px),
        radial-gradient(circle, var(--portal-seasonal-highlight) 0 1px, transparent 1.5px);
    background-position: 0 0, calc(var(--portal-seasonal-decoration-size) / 2) calc(var(--portal-seasonal-decoration-size) / 2);
    background-size: var(--portal-seasonal-decoration-size) var(--portal-seasonal-decoration-size);
    content: "";
    opacity: var(--portal-seasonal-decoration-opacity);
    pointer-events: none;
}

html[data-portal-decoration="easter"] :is(
    .exp-hero,
    .ma-hero,
    .onsernone-hero,
    .place-hero,
    .business-directory-hero,
    [data-portal-hero]
)::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 12% 18%, var(--portal-seasonal-accent-soft) 0 10px, transparent 11px),
        radial-gradient(ellipse at 86% 28%, var(--portal-seasonal-highlight) 0 12px, transparent 13px),
        radial-gradient(ellipse at 72% 80%, var(--portal-seasonal-accent-soft) 0 8px, transparent 9px);
    content: "";
    opacity: var(--portal-seasonal-decoration-opacity);
    pointer-events: none;
}

html[data-portal-decoration="winter"] :is(
    .exp-hero,
    .ma-hero,
    .onsernone-hero,
    .place-hero,
    .business-directory-hero,
    [data-portal-hero]
)::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: color-mix(in srgb, var(--portal-seasonal-highlight) 12%, transparent);
    content: "";
    opacity: var(--portal-seasonal-decoration-opacity);
    pointer-events: none;
}

html[data-portal-decoration="spring"] :is(
    .exp-card,
    .onsernone-card,
    .ma-card,
    .mp-listing-card,
    .place-card
) {
    border-color: color-mix(in srgb, var(--portal-seasonal-accent) 30%, var(--portal-color-border));
}

html[data-portal-decoration="autumn"] :is(
    .exp-section-heading,
    .ma-section-heading,
    .onsernone-section-heading
)::after {
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 12px;
    border-radius: var(--portal-radius-small);
    background: var(--portal-seasonal-accent);
    content: "";
    opacity: var(--portal-seasonal-decoration-opacity);
}

@media (prefers-reduced-motion: reduce) {
    html[data-portal-decoration] *,
    html[data-portal-decoration] *::before,
    html[data-portal-decoration] *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/*
 * Ein in portal_theme_settings.hero_image_path gepflegtes Motiv wird nur dann
 * aktiviert, wenn das aktive Theme tatsächlich ein Bild besitzt. Seiten ohne
 * Theme-Motiv behalten unverändert ihr eigenes fachliches Hero-Bild.
 */
html[data-portal-theme-has-hero-image="true"] :is(
    .exp-hero,
    .ma-hero,
    .onsernone-hero,
    .place-hero,
    .business-directory-hero,
    [data-portal-hero]
) {
    background-image:
        linear-gradient(
            90deg,
            var(--portal-hero-overlay-start),
            var(--portal-hero-overlay-middle),
            var(--portal-hero-overlay-end)
        ),
        var(--portal-theme-hero-image) !important;
    background-position: center;
    background-size: cover;
}