/* live-dark.css — the dark look of the match pages. Applied when the device
   is set to dark, or when the visitor chose dark with the header button
   (theme_mode_head() in system/lib.php). The brand colour and the share
   button stay. */

html {
    color-scheme: dark;
}

body, html {
    background-color: #121417;
    color: #e6e6e6;
}

.theme-toggle .icon-moon {
    display: none;
}

.theme-toggle .icon-sun {
    display: block;
}

.channel-title {
    color: #e6e6e6;
    border-bottom-color: var(--brand-on-dark);
}

.channel-sub {
    color: #9aa3ad;
}

.btn {
    color: var(--brand-text-on-dark);
    border-color: var(--brand-on-dark);
}

.btn:hover,
.btn:focus {
    background-color: var(--brand-on-dark);
    color: #121417;
}

.match-about h2,
.also-live h2 {
    color: #e6e6e6;
}

.match-about-card {
    background-color: #1c2128;
    border-color: #2c333d;
}

.match-about-card p {
    color: #cfd5dc;
}

.also-live-link {
    background-color: #1c2128;
    border-color: #2c333d;
    color: var(--brand-on-dark);
}

.also-live-link:hover,
.also-live-link:focus {
    border-color: var(--brand-on-dark);
}

.also-live-link:focus-visible,
.btn:focus-visible,
.share-btn:focus-visible {
    outline-color: var(--brand-on-dark);
}

/* Phone turned sideways: the video alone on black, as in live.css */
@media (orientation: landscape) and (max-height: 500px) {
    body, html {
        background-color: #000;
    }
}