/*
 * The existing site.css remains the source of truth for the default dark theme.
 * The light mode is deliberately isolated behind data-theme="light" so it
 * cannot change the current appearance for visitors who do not opt in.
 */

.theme-toggle {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.theme-toggle:hover,
.theme-toggle:focus,
.theme-toggle[aria-pressed="true"] {
    border-color: rgba(255, 222, 0, 0.32);
    background: rgba(255, 222, 0, 0.08);
    color: #ffde00;
}

.theme-toggle:focus-visible {
    outline: 2px solid #ffde00;
    outline-offset: 2px;
}

.theme-toggle i {
    font-size: 1rem;
    pointer-events: none;
}

/*
 * A colour-preserving inversion produces a complete light counterpart for the
 * large legacy stylesheet, including page-specific surfaces and states. Media
 * is inverted a second time so posters, photos, videos and adverts retain
 * their original colours.
 */
html[data-theme="light"] {
    background: #efeeef;
    color-scheme: light;
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="light"] :is(
    img,
    video,
    iframe,
    canvas,
    object,
    embed
) {
    filter: invert(1) hue-rotate(180deg);
}

/*
 * Keep the global navigation, search drawer and footers as the familiar dark
 * brand chrome. Two identical filters cancel each other, while the page
 * content remains light.
 */
html[data-theme="light"] :is(
    .navbar,
    .mobile-search-panel,
    .filmitena-footer,
    .auth-footer
) {
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="light"] :is(
    .navbar,
    .mobile-search-panel,
    .filmitena-footer,
    .auth-footer
) :is(
    img,
    video,
    iframe,
    canvas,
    object,
    embed
) {
    filter: none;
}

@media (max-width: 991.98px) {
    .theme-toggle {
        flex: 0 0 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle {
        transition: none;
    }
}

@media print {
    html[data-theme="light"] {
        filter: none;
    }

    html[data-theme="light"] :is(
        img,
        video,
        iframe,
        canvas,
        object,
        embed
    ) {
        filter: none;
    }

    html[data-theme="light"] :is(
        .navbar,
        .mobile-search-panel,
        .filmitena-footer,
        .auth-footer
    ) {
        filter: none;
    }
}