/* Kopbalk en hoofdmenu (desktop)
 *
 * Smalle balk (logo · menu · volgende race) met eronder volle-breedte panelen
 * die bij aanwijzen openklappen. Zelfde lettertype en kleuren als de standings
 * en de mobiele nieuwspagina. Zie includes/header-nav.php.
 */

@font-face { font-family: "TPC Titillium"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/titillium-web-400.woff2") format("woff2"); }
@font-face { font-family: "TPC Titillium"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/titillium-web-600.woff2") format("woff2"); }
@font-face { font-family: "TPC Titillium"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/titillium-web-700.woff2") format("woff2"); }
@font-face { font-family: "TPC Titillium"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/titillium-web-900.woff2") format("woff2"); }

.tpc-hd {
    --hd-panel: #10162a;
    --hd-card: #1c2230;
    --hd-line: rgba(255, 255, 255, 0.08);
    --hd-line-strong: rgba(255, 255, 255, 0.16);
    --hd-fg: #f3f5fa;
    --hd-muted: #8d95a8;
    --hd-dim: #5d6579;
    --hd-red: #e10600;
    --hd-font: "TPC Titillium", "Titillium Web", "Segoe UI", system-ui, sans-serif;
    --hd-h: 76px;

    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(7, 10, 18, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hd-line);
    color: var(--hd-fg);
    font-family: var(--hd-font);
    font-size: 15px;
    line-height: 1.4;
}
.admin-bar .tpc-hd { top: 32px; }
.tpc-hd.is-compact { --hd-h: 60px; }
.tpc-hd *, .tpc-hd *::before, .tpc-hd *::after { box-sizing: border-box; }
.tpc-hd [hidden] { display: none !important; }
.tpc-hd a { color: inherit; text-decoration: none; }
.tpc-hd button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.tpc-hd img { max-width: none; }
.tpc-hd a:focus-visible, .tpc-hd button:focus-visible { outline: 2px solid var(--hd-fg); outline-offset: 3px; border-radius: 4px; }

/* Snelheidslijn: rood dat naar rechts uitloopt */
.tpc-hd::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--hd-red) 0 18%, rgba(225, 6, 0, 0.35) 45%, transparent 75%);
}

.tpc-hd-in {
    max-width: 1280px;
    height: var(--hd-h);
    margin: 0 auto;
    padding-inline: 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    transition: height 0.2s ease;
}
.tpc-hd-logo { flex: none; display: block; }
.tpc-hd-logo img { display: block; width: auto; height: 52px; transition: height 0.2s ease; }
.tpc-hd.is-compact .tpc-hd-logo img { height: 40px; }
.tpc-hd-sitename { font-weight: 900; font-size: 20px; text-transform: uppercase; }

/* ── Menu ──────────────────────────────────────────── */
.tpc-hd-nav { flex: 1; min-width: 0; }
.tpc-hd-nav > ul { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tpc-hd-nav > ul > li { position: relative; display: flex; margin: 0; }
.tpc-hd .tpc-hd-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--hd-h);
    padding-inline: 12px;
    font-family: var(--hd-font);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #c9cedb;
    white-space: nowrap;
    transition: color 0.15s, height 0.2s ease;
}
.tpc-hd-link::after {
    content: "";
    position: absolute; left: 12px; right: 12px; bottom: 14px; height: 3px;
    background: var(--hd-red);
    transform: skewX(-24deg) scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}
.tpc-hd.is-compact .tpc-hd-link::after { bottom: 10px; }
.tpc-hd .tpc-hd-link:hover,
.tpc-hd-nav li.is-open > .tpc-hd-link,
.tpc-hd-nav li.is-active > .tpc-hd-link { color: #fff; }
.tpc-hd-link:hover::after,
.tpc-hd-nav li.is-open > .tpc-hd-link::after,
.tpc-hd-nav li.is-active > .tpc-hd-link::after { transform: skewX(-24deg) scaleX(1); }
.tpc-hd-chev { width: 10px; height: 10px; opacity: 0.6; transition: transform 0.2s; }
.tpc-hd-nav li.is-open .tpc-hd-chev { transform: rotate(180deg); opacity: 1; }

/* Gewoon uitklapmenu (About us) */
.tpc-hd-drop {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    padding: 8px;
    background: var(--hd-panel);
    border: 1px solid var(--hd-line-strong);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
    animation: tpc-hd-drop 0.18s ease-out;
}
.tpc-hd-drop a { display: block; padding: 10px 12px; border-radius: 9px; font-weight: 600; }
.tpc-hd-drop a small { display: block; font-weight: 400; color: var(--hd-muted); font-size: 12.5px; }
.tpc-hd-drop a:hover { background: rgba(255, 255, 255, 0.06); }

/* ── Rechts: volgende race en alerts ───────────────── */
.tpc-hd-right { flex: none; display: flex; align-items: center; gap: 10px; }
.tpc-hd-chip {
    display: grid;
    padding: 6px 14px 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(225, 6, 0, 0.45);
    background: linear-gradient(135deg, rgba(225, 6, 0, 0.25), rgba(225, 6, 0, 0.05));
    line-height: 1.15;
}
.tpc-hd-chip-k { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffb3b0; white-space: nowrap; }
.tpc-hd-chip-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hd-red); box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.25); }
.tpc-hd-chip.is-live .tpc-hd-chip-k::before { animation: tpc-hd-pulse 1.4s infinite; }
@keyframes tpc-hd-pulse { 50% { opacity: 0.3; } }
.tpc-hd-chip-c { font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpc-hd-chip-c small { margin: 0 3px 0 1px; font-size: 11px; font-weight: 600; color: var(--hd-muted); }
.tpc-hd .tpc-hd-icon {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1px solid var(--hd-line-strong);
    background: rgba(255, 255, 255, 0.03);
}
.tpc-hd-icon:hover { background: rgba(255, 255, 255, 0.08); }
.tpc-hd-icon svg { width: 20px; height: 20px; }
.tpc-hd .tpc-hd-burger { display: none; }

/* ── Panelen ───────────────────────────────────────── */
.tpc-hd-panels { position: absolute; left: 0; right: 0; top: 100%; }
.tpc-hd-panel {
    background: var(--hd-panel);
    border-bottom: 1px solid var(--hd-line-strong);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
    animation: tpc-hd-drop 0.18s ease-out;
}
@keyframes tpc-hd-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tpc-hd-panel-in { max-width: 1280px; margin: 0 auto; padding: 26px 24px 28px; display: grid; gap: 28px; }
.tpc-hd .tpc-hd-panel h3 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px;
    font-family: var(--hd-font);
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--hd-muted);
}
.tpc-hd-panel h3::before { content: ""; width: 16px; height: 3px; background: var(--hd-red); transform: skewX(-24deg); }

/* Standings */
.tpc-hd-standings { grid-template-columns: 1.2fr 1fr 0.8fr; }
.tpc-hd-rows { display: grid; gap: 4px; }
.tpc-hd-row {
    --c: #888;
    display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 7px 10px 7px 8px;
    border-radius: 10px;
    border-left: 3px solid var(--c);
    background: rgba(255, 255, 255, 0.025);
    transition: background 0.15s;
}
.tpc-hd-row:hover { background: rgba(255, 255, 255, 0.06); }
.tpc-hd-p { font-weight: 900; font-size: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.tpc-hd-av {
    width: 36px; height: 36px; overflow: hidden; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--c) 70%, transparent);
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 65%, #fff), color-mix(in srgb, var(--c) 40%, var(--hd-card)));
}
.tpc-hd-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tpc-hd-lg { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: color-mix(in srgb, var(--c) 80%, #000); }
.tpc-hd-lg img { width: 24px; height: 24px; object-fit: contain; }
.tpc-hd-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpc-hd-nm b { font-weight: 700; text-transform: uppercase; }
.tpc-hd-nm small { display: block; font-size: 12px; color: var(--hd-muted); }
.tpc-hd-pt { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
.tpc-hd-pt small { display: block; font-size: 11px; font-weight: 600; color: var(--hd-muted); }

.tpc-hd-cta { display: grid; align-content: start; gap: 12px; }
.tpc-hd-cta p { margin: 0; color: var(--hd-muted); font-size: 14px; }
.tpc-hd-cta p b { color: var(--hd-fg); }
.tpc-hd .tpc-hd-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--hd-red);
    color: #fff;
    font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
}
.tpc-hd .tpc-hd-btn:hover { background: #ff1a12; }
.tpc-hd .tpc-hd-btn.is-ghost { background: transparent; border: 1px solid var(--hd-line-strong); color: var(--hd-fg); }
.tpc-hd .tpc-hd-btn.is-ghost:hover { background: rgba(255, 255, 255, 0.06); }
.tpc-hd-rounds { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; margin-top: 4px; }
.tpc-hd-rounds i { height: 5px; border-radius: 1px; background: var(--hd-line-strong); transform: skewX(-24deg); }
.tpc-hd-rounds i.is-done { background: rgba(243, 245, 250, 0.55); }
.tpc-hd-rounds i.is-last { background: var(--hd-red); }

/* Schedule */
.tpc-hd-schedule { grid-template-columns: 1.35fr 1fr 0.8fr; }
.tpc-hd-next {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr auto; gap: 6px 18px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(225, 6, 0, 0.35);
    background: linear-gradient(140deg, rgba(225, 6, 0, 0.22), var(--hd-card) 55%);
}
.tpc-hd-rn { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffb3b0; }
.tpc-hd-name { font-size: 26px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.tpc-hd-where { font-size: 13px; color: var(--hd-muted); }
.tpc-hd-big {
    grid-row: 1 / span 3; grid-column: 2; align-self: center;
    text-align: right; font-weight: 900; font-style: italic; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums;
}
.tpc-hd-big small { margin: 0 4px 0 1px; font-size: 13px; font-style: normal; font-weight: 600; color: var(--hd-muted); }
.tpc-hd-big span { display: block; margin-top: 4px; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hd-muted); }
.tpc-hd-sessions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 12px; }
.tpc-hd-sess { display: grid; gap: 1px; padding: 8px 10px; border-radius: 9px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--hd-line); }
.tpc-hd-sess.is-race { border-color: rgba(225, 6, 0, 0.5); background: rgba(225, 6, 0, 0.12); }
.tpc-hd-sess.is-past { opacity: 0.45; }
.tpc-hd-sess-l { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hd-muted); }
.tpc-hd-sess-t { font-weight: 700; font-variant-numeric: tabular-nums; }
.tpc-hd-sess-d { font-size: 12px; color: var(--hd-muted); }
.tpc-hd-tz { grid-column: 1 / -1; font-size: 11.5px; color: var(--hd-dim); }
.tpc-hd-up { display: grid; gap: 6px; }
.tpc-hd-up a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.025); }
.tpc-hd-up a:hover { background: rgba(255, 255, 255, 0.06); }
.tpc-hd-up-r { font-weight: 900; font-size: 13px; color: var(--hd-muted); }
.tpc-hd-up-n { font-weight: 700; }
.tpc-hd-up-n small { display: block; font-weight: 400; font-size: 12px; color: var(--hd-muted); }
.tpc-hd-up-d { font-size: 13px; color: var(--hd-muted); font-variant-numeric: tabular-nums; }

/* Notifications */
.tpc-hd-alerts { grid-template-columns: 1fr 1fr 0.8fr; }
.tpc-hd-feature {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start;
    padding: 18px;
    border-radius: 14px;
    background: var(--hd-card);
    border: 1px solid var(--hd-line);
    transition: border-color 0.15s, background 0.15s;
}
.tpc-hd-feature:hover { border-color: rgba(225, 6, 0, 0.5); background: #212839; }
.tpc-hd-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(225, 6, 0, 0.16); color: #ff6a64; }
.tpc-hd-ic svg { width: 24px; height: 24px; }
.tpc-hd-feature b { display: block; margin-bottom: 3px; font-size: 17px; font-weight: 700; }
.tpc-hd-desc { display: block; margin-bottom: 10px; font-size: 14px; color: var(--hd-muted); }
.tpc-hd-go { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #ff6a64; }

/* ── Smallere vensters: hamburger ──────────────────── */
.tpc-hd-drawer { display: none; }
@media (max-width: 1240px) {
    .tpc-hd-nav, .tpc-hd-chip-k { display: none; }
    .tpc-hd-in { justify-content: space-between; gap: 12px; }
    .tpc-hd .tpc-hd-burger { display: grid; }
    .tpc-hd-panels { display: none; }
    .tpc-hd-drawer:not([hidden]) {
        display: grid;
        max-height: calc(100vh - var(--hd-h));
        overflow-y: auto;
        padding: 10px 24px 18px;
        background: var(--hd-panel);
        border-bottom: 1px solid var(--hd-line-strong);
    }
    .tpc-hd-drawer a { padding: 12px 4px; border-bottom: 1px solid var(--hd-line); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
    .tpc-hd-drawer a.is-sub { padding-left: 18px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--hd-muted); }
    .tpc-hd-drawer-h { padding: 18px 4px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hd-red); }
}
@media (max-width: 782px) {
    .admin-bar .tpc-hd { top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .tpc-hd-panel, .tpc-hd-drop { animation: none; }
    .tpc-hd-chip.is-live .tpc-hd-chip-k::before { animation: none; }
}