/**
 * VOD template, single stylesheet.
 *
 * Replaces Bootstrap, utilities.css and custom.css. Nothing here is a
 * framework: every rule is used by one of the files this template actually
 * renders, which is index.php, the three menu layouts, the article layout for
 * the popup, and the two VOD modules.
 *
 * Spacing comes from one scale. The modules are pinned to it at the bottom so
 * gutters and gaps match across the page rather than each piece choosing its
 * own.
 */

/* ===================================================== tokens =========== */

:root {
    /* Brand colours are injected by index.php from the template params:
       --brand-color, --light-brand-color, --dark-brand-color,
       --brand-color-d/e/f, --header-bg, --menu-text-color. */

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 3rem;

    --gutter: var(--space-3);      /* page edge padding */
    --gap: var(--space-4);         /* between grid and flex children */
    --radius: 14px;
    --radius-pill: 999px;


    --fg: #f2f2f3;
    --fg-muted: #9a9aa2;
    --surface: #16161a;

    --body-font-size: 1.1rem;
    --h1: clamp(1.8rem, 1rem + 3vw, 2.5rem);

    --header-height: 72px;
    --content-top: 40px;           /* clearance under the header */
    --side-w: 400px;               /* overridden per breakpoint further down */

    --ease: cubic-bezier(.2, .8, .2, 1);
    --speed: .3s;
}

/* ===================================================== base ============= */

*,
*::before,
*::after { box-sizing: border-box; }

body {
    margin: 0;
    font-size: var(--body-font-size);
    line-height: 1.45;
    color: var(--fg);
}

h1, h2, h3, h4 {
    margin-block: 0 var(--space-3);
    font-weight: 800;
    line-height: 1.2;
}

h1 { font-size: var(--h1); }
h2 { font-size: calc(var(--h1) * .7); }
h3 { font-size: calc(var(--h1) * .6); }
h4 { font-size: 1rem; }

p { margin-block: 0 var(--space-3); }

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a:hover { color: var(--light-brand-color); }

img {
    max-width: 100%;
    height: auto;
}

iframe { border: 0; }

small { font-size: .8em; }

*:focus { outline: none; }

*:focus-visible { outline: 2px dotted var(--light-brand-color); }

/* ===================================================== layout =========== */

/* The sidebar and panel split. Two tracks and one media query, where the
   Bootstrap version needed a row, two column classes and a gutter variable. */
#content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    width: 100%;
    padding-inline: var(--gutter);
}

/* The sidebar is sized by how many tiles should fit across it, rather than by
   a share of the viewport. Both the column and the tile grid are set at each
   step so the two cannot disagree and leave the tiles floating. */
@media (min-width: 768px) {
    #content {
        grid-template-columns: minmax(0, var(--side-w)) minmax(0, 1fr);
        align-items: start;
    }

    /* The tiles stay put while the panel scrolls past them. */
    .content__side {
        position: sticky;
        top: calc(var(--header-height) + var(--gap));
    }

    .content__side .vod-tiles { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    :root { --side-w: 170px; }
}

@media (min-width: 1024px) and (max-width: 1399.98px) {
    :root { --side-w: 290px; }

    .content__side .vod-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
    :root { --side-w: 400px; }

    .content__side .vod-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.content__side,
.content__main {
    min-width: 0;
    margin-block-start: var(--content-top);
}

/* ===================================================== header =========== */

/* Opaque, so content scrolling underneath does not show through the strip
   while it is stuck. */
.vod-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: var(--body-background, #1d1b0c);
    padding: var(--space-2) var(--gutter);
    transition: transform var(--speed) var(--ease);
}

/* The same two tracks as #content, so the brand block lines up with the
   sidebar and everything else starts where the video panel starts. That is
   what makes the row read as three columns without being three. */
.vod-header__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    align-items: center;
}

@media (min-width: 768px) {
    .vod-header__inner {
        grid-template-columns: minmax(200px, var(--side-w)) minmax(0, 1fr);
    }
}

.vod-header__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    min-width: 0;
}

.vod-header__tools > *:last-child { margin-inline-start: auto; }

.vod-header.is-tucked {
    transform: translateY(calc(-100% - var(--space-2)));
}

.vod-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--header-height);
    padding-inline: var(--space-3);
    background: var(--header-bg, #1d1b0c);
    border-radius: var(--radius-pill);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
}

.vod-header__logo {
    display: flex;
    align-items: center;
    line-height: 0;
}

.vod-header__logo img {
    height: calc(var(--header-height) - var(--space-4));
    width: auto;
}

/* hamburger */

.vod-burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.vod-burger__box {
    position: relative;
    width: 24px;
    height: 16px;
}

.vod-burger__line {
    position: absolute;
    inset-inline: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--menu-text-color, var(--fg));
    transition: transform var(--speed) var(--ease), opacity .2s linear, background-color .2s linear;
}

.vod-burger__line:nth-child(1) { top: 0; }
.vod-burger__line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.vod-burger__line:nth-child(3) { bottom: 0; }

.vod-burger:hover .vod-burger__line { background: var(--brand-color); }

/* Driven by aria-expanded, so the control's state and its look cannot drift. */
.vod-burger[aria-expanded="true"] .vod-burger__line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.vod-burger[aria-expanded="true"] .vod-burger__line:nth-child(2) { opacity: 0; }

.vod-burger[aria-expanded="true"] .vod-burger__line:nth-child(3) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* ===================================================== menu ============= */

.vod-veil {
    position: fixed;
    inset: 0;
    z-index: 1030;
    background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--speed) ease, visibility var(--speed);
}

body.menu-open { overflow: hidden; }

body.menu-open .vod-veil {
    opacity: 1;
    visibility: visible;
}

.vod-menu {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1035;
    width: min(420px, 86vw);
    padding: calc(var(--header-height) + var(--space-5)) var(--space-4) var(--space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--header-bg, #1d1b0c);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--speed) var(--ease), visibility var(--speed);
}

/* Under RTL the panel belongs on the other edge, and so does its travel. */
[dir="rtl"] .vod-menu { transform: translateX(100%); }

body.menu-open .vod-menu {
    transform: none;
    visibility: visible;
}

.vod-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vod-menu li + li { margin-block-start: var(--space-1); }

.vod-menu a,
.vod-menu .menu-heading {
    display: block;
    padding-block: var(--space-2);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
    transition: color .2s ease, padding-inline-start .2s var(--ease);
}

.vod-menu a:hover,
.vod-menu a:focus-visible {
    color: var(--brand-color);
    padding-inline-start: var(--space-2);
}

.vod-menu .active > a,
.vod-menu .current > a { color: var(--brand-color); }

/* Submenus sit quieter than their parent. There is no hover to hide behind
   in a panel, so every level is simply visible. */
.vod-menu ul ul {
    margin-block: var(--space-1) var(--space-3);
    padding-inline-start: var(--space-3);
    border-inline-start: 3px solid rgba(255, 255, 255, .12);
}

.vod-menu ul ul a {
    font-size: 1rem;
    font-weight: 400;
    padding-block: var(--space-1);
}

.vod-menu .menu-image,
.vod-menu .menu-icon {
    margin-inline-end: var(--space-2);
    vertical-align: middle;
}

/* ===================================================== footer =========== */

#footer {
    position: relative;
    margin-block-start: var(--space-5);
    padding-block: var(--space-5);
}

.footer__inner,
#copyrights .copyrights__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-inline: var(--gutter);
}

.footer__cols {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
}

#copyrights .copyrights__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-3);
    font-size: .85rem;
}

@media (min-width: 768px) {
    #copyrights .copyrights__inner { flex-direction: row; }
}

.copyrights__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Footer menu modules: a few short columns rather than a 12-column grid. */
#footer_menu ul,
.footer__cols ul {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 150px 2;
    column-gap: var(--space-5);
}

.footer__cols a {
    display: inline-block;
    padding-block: var(--space-1);
}

.footer__cols .parent > a {
    font-size: 1.1em;
    text-decoration: underline;
}

/* Statement menu: inline links divided by slashes. */
.statement-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: .85rem;
}

.statement-menu > * + *::before {
    content: "/";
    padding-inline-end: var(--space-2);
    opacity: .5;
}

/* ===================================================== popup ============ */

/* The article layout rendered inside the video modal. */
.vod-article__player { margin-block-end: var(--space-4); }

.vod-article__player iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    display: block;
}

.vod-article__player--portrait iframe {
    aspect-ratio: 9 / 16;
    max-width: 420px;
    margin-inline: auto;
}

.vod-article__cat {
    display: block;
    margin-block-end: var(--space-1);
    font-size: .85rem;
    color: var(--brand-color);
}

.vod-article__title {
    margin-block: 0 var(--space-2);
    font-size: 1.35rem;
}

.vod-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: .8rem;
    color: var(--fg-muted);
}

.vod-article__rav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.vod-article__rav img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.vod-article__views {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.vod-article__text {
    margin-block-start: var(--space-4);
    line-height: 1.7;
}

.vod-article__text > :last-child { margin-block-end: 0; }

/* ===================================================== helpers ========== */

/* Kept from custom.css because this template still uses them. */
.accessibility {
    position: absolute;
    inset-inline-start: -99999px;
    width: 10px;
    height: 10px;
}

.skip-link {
    position: absolute;
    inset-inline-start: -99999px;
    top: 0;
    z-index: 1100;
    padding: var(--space-3) var(--space-4);
    background: var(--brand-color);
    color: #111;
    font-weight: 700;
}

.skip-link:focus { inset-inline-start: 0; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mobile-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 999;
}

@media (min-width: 768px) {
    .mobile-bar { display: none; }
}

/* ===================================================== modules ========== */

/* A portrait card in the masonry grid gets a floor. The fixed-height blocks
   are excluded: there the layout sets the height and a floor would fight it. */
.vod-grid .vod-card--portrait .vod-card__frame { min-height: 320px; }

.menu-title {
    margin-block: 0 var(--space-3);
    font-size: 1.1rem;
    color: var(--fg-muted);
}


/* The two VOD modules carry their own stylesheets and their own tokens. These
   pin them to the page's scale so gaps and corners match everything else
   rather than each module deciding separately. */
.vod-panel,
.vod-sidebar {
    --vod-gap: var(--gap);
    --vod-radius: var(--radius);
    --vod-fg: var(--fg);
    --vod-fg-muted: var(--fg-muted);
    --vod-bg-card: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
    .vod-header,
    .vod-menu,
    .vod-veil,
    .vod-burger__line,
    .vod-menu a { transition: none; }
}