/* Christmas overrides, loaded after style.css. */

:root {
    /*
     * Palette: a dark wood cabin by lamplight, with cream, gold and crimson.
     * Text and trim are bright enough to read over dark wood panel art.
     */
    --color-page-rgb: 16, 11, 8;
    --color-panel-rgb: 24, 17, 12;
    --color-panel-raised-rgb: 44, 30, 21;
    --color-text-rgb: 204, 192, 174;
    --color-text-soft-rgb: 186, 170, 146;
    --color-heading-rgb: 240, 230, 210;
    --color-highlight-rgb: 222, 182, 108;
    --color-text-bright-rgb: 248, 240, 224;
    --color-accent-rgb: 140, 24, 28;
    --color-accent-strong-rgb: 232, 190, 112;
    --color-focus-rgb: 122, 176, 120;
    --color-trim-rgb: 170, 128, 76;

    /*
     * Header art: a lantern on a bracket that comes off the top-right corner.
     * The art sits in the right 36% of its image, so the image is sized from
     * the lantern's width and anchored to the viewport's corner, not the
     * header's, so the bracket meets the screen edge at any width.
     */
    --christmas-lantern-width: clamp(3.75rem, 18vw, 4.5rem);
    --christmas-lantern-raise: 1.25rem;

    /* The nav base is dark wood already, so it needs only a light shade. */
    --mobile-bottom-nav-overlay-opacity: .3;
    --mobile-bottom-nav-tint-opacity: 0;
    --mobile-bottom-nav-atmosphere-opacity: 0;

    /* Movie medallions: a brass coin, with the poster in near full colour. */
    --movie-medallion-rim: rgba(var(--color-trim-rgb), .95);
    --movie-medallion-edge: rgba(var(--color-highlight-rgb), .45);
    --movie-medallion-poster-filter: saturate(.9) brightness(.92);
}

/*
 * Page titles: gold is lost on the busy background, so the title and its
 * subtitle are cream, with a shadow to lift them off it.
 */
.page-title__heading {
    color: var(--ui-heading);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.page-title__subtitle {
    color: var(--ui-neutral);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, .9),
        0 0 6px rgba(0, 0, 0, .7);
}

/* Crimson is lost on the dark wood plaques, so their headings are gold. */
.category-submission-tracker-heading,
.category-ranking-memo-copy h2 {
    color: rgb(var(--color-highlight-rgb));
}

/*
 * Form fields: shallow smoked-glass recesses cut into the panel, with a fine
 * brass line, in place of the chalk outlines.
 */
.chalk-form__control {
    border: 1px solid rgba(186, 160, 112, .45);
    border-radius: .3rem;
    background-color: rgba(6, 9, 18, .5);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 240, 210, .05);
    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}

.chalk-form__control::before {
    content: none;
}

.chalk-form__field:focus-within .chalk-form__control {
    border-color: rgba(222, 182, 108, .85);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 240, 210, .05),
        0 0 10px rgba(232, 168, 80, .28);
}

.chalk-form__control input,
.chalk-form__control textarea,
.chalk-form__control select {
    color: rgb(var(--color-text-bright-rgb));
}

/* The warmed border shows focus, so the fields need no outline of their own. */
.chalk-form__control input:focus-visible,
.chalk-form__control textarea:focus-visible,
.chalk-form__control select:focus-visible {
    outline: 0;
}

.chalk-form__field > span:first-child {
    color: rgb(176, 146, 98);
}

/* The title divider is a fine brass line that fades at both ends. */
.chalk-form__divider {
    height: 1px;
}

.chalk-form__divider::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(196, 170, 120, .75) 30%,
        rgba(196, 170, 120, .75) 70%,
        transparent
    );
    mask-image: none;
    -webkit-mask-image: none;
}

/* The smaller Home frames' titles match Tonight's cream. */
.home-yesterday-rating h2,
.home-your-stats h2 {
    color: var(--ui-heading);
}

.mobile-shell-header-art {
    top: calc(env(safe-area-inset-top, 0px) - var(--christmas-lantern-raise));
    right: calc((100% - 100vw) / 2);
    bottom: auto;
    display: block;
    width: calc(var(--christmas-lantern-width) / .36);
    height: auto;
    transform: none;
}

.mobile-shell-header-candle {
    width: 100%;
    height: auto;
    object-fit: initial;
}