/*
Theme Name: Omroep Zoetermeer-Lansingerland
Author: Caine Rietbroek
Text Domain: omroep-zoetermeer-lansingerland
version: 1.1.1-magenta-mobilefix
Description:  Een WordPress thema voor Omroep Zoetermeer Lansingerland. Bijgevoegd zijn templates voor tags, auteurspagina's, categorieën, dossiers, gids en radio. Ook functionaliteit voor gerelateerde posts, een hamburger menu, live radio, fetch-based navigatie, dark mode, live blogs, infinite scroll, een header die automatisch verdwijnd op mobiel, etc. Steden kunnen als categorie gebruikt worden. Deze moeten aangevinkt worden als stad in de categorie pagina van wordpress. Wijken en steden kunnen beiden foto's krijgen, die ook in de back-end aangegeven kunnen worden. Bijgevoegd is ook een wijkpagina, waar alle wijken per stad weer gegeven worden. Radioschema's kunnen via de radio knop onder instellingen aangegeven worden. Onder inzendingen kunnen de email-adressen aangegeven worden voor formulieren. Kleuren kunnen in de syle.css aangepast worden bij de variablen. Dependenties: een SMTP plugin
*/

/* ALGEMEEN */
/*Defeault colors -- variable for dark/light mode */

:root {
    --bg-color: #ffffff;
    --text-color-comm: #111111;
    --text-color-dates: #5e5e5e;
    --text-color-cats: #ffffff;

    --color-main: #e94286;
    --color-accent: #49aa48;
    --color-accent-light: #7AE879;

    --color-badges: #0637BF;
    --color-badge-hover: #0637BF;

    --text-color-on-picture: #ffffff;
    --off-white: #f4f4f4;

    --level-two-element-bg: #ffffff;

    --od-programma: #e94286;
    --od-live-programma: #e6f4e6;
    --od-gids-button: #e94286;

    --od-color-light: #f75e79;
    --od-color-very-light: #ff94a7;

    --od-black: #2c2c2c;

    --od-main-dark: #2f7f2f;
    --od-main-light-dark: #3d9440;

    --od-has-background: #e6f4e6;

    --od-play-button: #efefef;
    --od-play-icon: #49aa48;
    --od-play-field: #abf5ab;

    --od-form-bg: #d9ffd9;

    --image-brightness: 1.15;
    --image-contrast: 0.9;
}

/* Dark mode */
[data-theme="dark"] {
    --bg-color: #121212;

    --text-color-comm: #e0e0e0;
    --text-color-dates: #b0b0b0;
    --text-color-cats: #e0e0e0;

    --color-main: #e94286;
    --color-accent: #49aa48;
    --color-accent-light: #7AE879;

    --color-badges: #0637BF;
    --color-badge-hover: #0637BF;

    --text-color-on-picture: #ffffff;

    --off-white: #424242;
    --level-two-element-bg: #3b3b3b;

    --od-programma: #ffffff;
    --od-live-programma: #356b35;
    --od-gids-button: #ffffff;

    --od-color-light: #8bc98a;

    --od-black: #acacac;

    --od-main-dark: #2f7f2f;
    --od-main-light-dark: #3d9440;

    --od-has-background: #356b35;

    --od-play-button: #565656;
    --od-play-icon: #e94286;
    --od-play-field: #424242;

    --od-form-bg: #254f25;

    --image-brightness: 0.8;
    --image-contrast: 1.1;
}

@media (max-width: 768px) {
    .homepage {
        padding-top: 5px !important;
    }
    .page {
        padding-inline: 0.5rem !important;
    }
}

::selection {
    background: var(--color-accent);
    color: #fff;
}

p,
a,
span,
time {
    font-size: inherit;
    font-family: "Roboto", system-ui;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto", system-ui;
    color: var(--text-color-comm);
}

a {
    color: var(--color-main);
    text-decoration: none;
    transition: color 0.2s ease 0s;
}

a:hover {
    color: var(--color-accent);
}

/* DESKTOP */
@media (min-width: 1024px) {
    body {
        max-width: 1200px;
        margin: 0 auto;
    }
}
/* LAYOUT */
body {
    width: 100%;
    margin: 0 auto;
    background-color: var(--bg-color);
}

/* BADGES */
.badge {
    display: inline-block !important;
    background: var(--color-badges);
    color: var(--text-color-cats);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 8px;
    border-radius: 6px;
    margin-right: 4px;
    transition: all 0.2s ease 0s;
    text-align: center;
}

.badge:hover {
    background: var(--color-badge-hover) !important;
    color: #fff !important;
    border-radius: 20px;
    padding: 7px 9px;
}


/* SIDEBAR */
.sidebar-radio audio {
    width: 100%;
}

/* NAV LINKS */
@media (min-width: 1024px) {
    .nav-links {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .page-numbers {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-color-cats);
        background: var(--color-main);
        padding: 8px 15px;
        border-radius: 6px;
        transition:
            border-radius 0.2s ease 0s,
            padding 0.2s ease 0s,
            background 0.2s ease 0s;
    }

    .current {
        background: var(--color-accent);
    }

    .page-numbers:hover {
        border-radius: 17px;
        color: var(--text-color-cats) !important;
        background: var(--color-accent);
        padding: 8px 30px;
    }

    .page-numbers .dots:hover {
        padding: 8px 15px !important;
    }
}

/* NAX LINKS MOBILE */
@media (max-width: 1024px) {
    .nav-links {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 0.2rem;
        margin-top: 0.5rem;
    }

    .page-numbers {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-color-cats);
        background: var(--color-main);
        padding: 4px 9px;
        border-radius: 6px;
    }

    .current {
        background: var(--color-accent);
    }

    .page-numbers:hover {
        color: var(--text-color-cats) !important;
    }
}

/* DELFT WEATHER */
.delft-weather-widget {
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px;
    margin-top: 10px;
}

.delft-weather-icon {
    margin-top: 4px;
}

.delft-weather-icon img {
    min-width: 30px !important;
    min-height: 30px !important;
}

.delft-weather-temp {
    font-size: 14px;
    font-weight: 500;
    margin-top: -8px;
    margin-bottom: 0;
    color: var(--text-color-comm);
}

/* DELFT TRAFFIC */

/* WEATHER & TRAFFIC MOBILE */
@media (max-width: 768px) {
    .delft-traffic-weather {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    .delft-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-color-comm);
    }
    .delft-traffic-widget {
        display: grid;
        grid-template-rows: auto auto auto;
        gap: 5px;
        justify-content: center;
        text-align: center;
        margin-top: 1px;
    }
    .delft-weather-widget {
        display: grid;
        grid-template-rows: auto auto;
        gap: 5px;
        justify-content: center;
        text-align: center;
        margin-top: 0;
    }
    .delft-weather-icon {
        margin-top: 0;
    }
    .delft-weather-temp {
        font-size: 1rem;
        font-weight: 600;
        margin-top: -4px;
        margin-bottom: 0;
        color: var(--text-color-comm);
    }
}

/* Video's pagina */
.yt-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.yt-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.yt-card img {
    width: 160px;
    aspect-ratio: 1.618/1;
    overflow: hidden;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 6px;
}

/* Applied by js/image-fallback.js when an <img> fails to load and its src
   is swapped to the site logo — object-fit: contain keeps the logo from
   being cropped/stretched into whatever aspect ratio the broken image had. */
.od-image-fallback {
    object-fit: contain !important;
    background-color: var(--off-white);
}

.yt-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color-comm);
    align-self: start;
    margin-top: 0.5rem;
}

.yt-page-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-color-on-picture);
    margin-bottom: 1rem;
    margin-top: 1rem;
    background-image: url("images/video-camera.jpg");
    height: 20vh;
    background-size: cover;
    background-position: center 35%;
    display: flex;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.yt-page-title:hover {
    height: 25vh;
    border-radius: 24px;
}

/* radio player */

.od-player {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    min-width: 260px;
    padding: 0 14px;
    background: var(--level-two-element-bg);
    border: 1px solid var(--off-white);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    font-family: system-ui, sans-serif;
    max-width: 100%;
    transition: all 0.2s ease 0s;
}

.od-player:hover {
    border-radius: 27px;
}

/* Play button */
.od-play-btn {
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--color-main);
    background: var(--bg-color);
    color: var(--color-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.15s;
    padding: 0 0 0 0.5rem;
    transition: all 0.2s ease 0s;
}
.od-play-btn-front {
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--color-main);
    background: var(--off-white);
    color: var(--od-play-icon);
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.15s;
    padding: 0 0 0 0.5rem;
    transition: all 0.2s ease 0s;
}

.od-play-btn:hover,
.od-play-btn-front:hover {
    border: 2px solid var(--color-main);
    color: var(--color-main);
}

.od-play-btn-front:hover {
    background: var(--od-color-light);
}

.od-play-btn:active,
.od-play-btn-front:active {
    background: rgba(208, 2, 27, 0.16);
}

.od-icon {
    width: 15px;
    height: 15px;
}

@keyframes od-spin {
    to {
        transform: rotate(360deg);
    }
}

.od-spin {
    animation: od-spin 1s linear infinite;
}

/* Live badge */
.od-live {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #d0021b;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.od-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d0021b;
    display: block;
    transition: opacity 0.3s;
}

/* Equalizer */
.od-eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
    flex-shrink: 0;
}

.od-bar {
    width: 3px;
    height: var(--base);
    border-radius: 2px;
    background: var(--color-main);
    opacity: 0.25;
    transform-origin: bottom;
}

@keyframes od-eq-anim {
    0%,
    100% {
        transform: scaleY(0.3);
    }
    50% {
        transform: scaleY(1);
    }
}

.od-eq.playing .od-bar {
    opacity: 0.85;
    animation: od-eq-anim 0.75s ease-in-out infinite;
}
.od-eq.playing .od-bar:nth-child(1) {
    animation-delay: 0s;
}
.od-eq.playing .od-bar:nth-child(2) {
    animation-delay: 0.15s;
}
.od-eq.playing .od-bar:nth-child(3) {
    animation-delay: 0.05s;
}
.od-eq.playing .od-bar:nth-child(4) {
    animation-delay: 0.25s;
}
.od-eq.playing .od-bar:nth-child(5) {
    animation-delay: 0.1s;
}
.od-eq.playing .od-bar:nth-child(6) {
    animation-delay: 0.2s;
}
.od-eq.playing .od-bar:nth-child(7) {
    animation-delay: 0.3s;
}

/* Status text */
.od-status {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Volume */
.od-vol {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.od-vol-icon {
    width: 13px;
    height: 13px;
    color: #999;
    flex-shrink: 0;
}

.od-vol input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 3px;
    border-radius: 2px;
    background: #e0e0e0;
    outline: none;
    cursor: pointer;
}
.od-vol input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--color-main);
    cursor: pointer;
}
.od-vol input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: none;
    border-radius: 50%;
    background: var(--color-main);
    cursor: pointer;
}

/* Error */
.od-error {
    display: none;
    margin: 6px 0 0 14px;
    font-size: 12px;
    font-family: system-ui, sans-serif;
    color: var(--color-accent);
}

/* auto-hide */
.od-bar-wrap {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--off-white);
    display: none;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    transition: all 0.2s ease 0.2s;
}

.od-bar-wrap:hover {
    border-radius: 27px;
}

.od-play-btn.od-trigger.od-trigger-btn {
    width: 300px;
}

.od-player .od-play-btn {
    width: 34px;
}

@media (max-width: 768px) {
    .live-radio-title {
        margin: 0;
    }
    .od-bar-wrap {
        display: none !important;
    }
    .od-menu-play-btn {
        background-color: var(--bg-color);
        color: var(--text-color-comm);
        border-radius: 27px;
        padding: 6px 12px;
        margin-top: 10px;
        align-content: center;
        border-color: var(--color-main);
        width: 100%;
        height: 30px;
        display: flex;
    }
    .od-menu-play-btn span {
        line-height: 15px;
        margin-left: 5px;
    }
    .od-menu-play-btn svg {
        width: 15px;
        height: auto;
        margin-left: 5px;
        color: var(--color-main);
    }
    #od-toast {
        position: fixed;
        top: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        transform: translateY(-120%);
        background: var(--color-main);
        color: var(--text-color-cats);
        font-size: 13px;
        font-family: Roboto;
        text-align: center;
        padding: 10px 20px;
        z-index: 999999;
        border-radius: 20px;
        transition:
            transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
            opacity 0.4s ease;
        opacity: 0;
    }
}

/* RADIO PAGE */

.radio-page {
    margin-top: 2rem;
}

.radio-page-container {
    display: grid;
    grid-template-columns: auto 300px;
    gap: 1rem;
    min-height: 80vh;
}

@media (max-width: 768px) {
    .radio-page-container {
        display: flex;
        flex-direction: column;
        height: auto !important;
    }

    .radio-sidebar {
        height: auto !important;
        min-height: 0 !important;
        align-self: flex-start;
        width: 100%;
        order: -1;
    }

    .radio-tracks {
        width: 100%;
        order: 1;
        height: auto !important;
    }

    .radio-track__player {
        display: block;
        width: 100%;
        margin-top: 10px;
        min-height: 40px;
    }
}

/* ── Track list ── */
.radio-tracks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-page-title {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 26px;
    color: var(--text-color-comm);
}

@media (max-width: 768px) {
    .radio-page-title {
        margin-top: 0;
    }
}

.radio-track {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 18px;
    background: var(--off-white);
    border-left: 4px solid var(--color-main);
    border-radius: 0 6px 6px 0;
}

.radio-track__meta {
    display: flex;
    flex-direction: column;
    flex: 0 0 220px;
    min-width: 0;
}

.radio-track__name {
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color-comm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.radio-track__date {
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    color: var(--text-color-dates);
    margin-top: 3px;
}

.radio-track__player {
    flex: 1;
    min-width: 0;
    height: 36px;
    accent-color: var(--color-accent);
}

/* ── Empty state ── */
.radio-empty {
    font-family: "Inter", sans-serif;
    color: var(--text-color-dates);
    font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .radio-track {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .radio-track__meta {
        flex: none;
        width: 100%;
    }

    .radio-track__player {
        width: 100%;
    }
}

/* ======================================================
   OMROEP DELFT - RADIO SIDEBAR
   ====================================================== */
.od-radio-container {
    background: var(--bg-color);
    border: 1px solid var(--off-white);
    border-radius: 6px;
    font-family: sans-serif;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.od-radio-header {
    background: var(--od-main-dark);
    color: var(--text-color-on-picture);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-sidebar-title {
    font-size: 25px;
    margin-bottom: 20px;
    margin-top: 20px;
    color: var(--text-color-comm);
}

.od-header-title {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    color: var(--text-color-on-picture) !important;
}

.od-live-indicator {
    width: 10px;
    height: 10px;
    background: #ff3b30;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 59, 48, 0.5);
    animation: od-blink 1.5s infinite;
}

.od-program-row {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    background: var(--bg-color);
}

.od-is-live {
    background: var(--od-live-programma);
    border-left: 5px solid var(--od-main-dark);
}

.od-meta-box {
    flex: 0 0 80px;
}

.od-time {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color-dates);
    margin-bottom: 2px;
}

.od-status-label {
    font-size: 0.85rem;
    font-weight: 900;
    color: #999;
    letter-spacing: 0.5px;
}

.od-is-live .od-status-label {
    color: #ff3b30;
}

.od-prog-name {
    font-size: 1.25rem;
    margin: 0 0 2px 0 !important;
    font-weight: 700;
    color: var(--text-color-comm);
    line-height: 1;
}

.od-prog-host {
    font-size: 1rem;
    margin: 0 !important;
    color: var(--text-color-comm);
}

.od-view-more {
    display: block;
    padding: 12px;
    text-align: center;
    background: var(--off-white);
    color: var(--od-gids-button);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    border-top: 1px solid #f0f0f0;
}

/* ======================================================
   OMROEP DELFT - GIDS PAGE (/gids)
   ====================================================== */

.od-gids-container {
    padding: 40px 0 60px 0;
    font-family: sans-serif;
    background: var(--bg-color);
    min-height: 80vh;
}

.od-container {
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .od-gids-container,
    .radio-page {
        padding: 0 15px !important;
    }
}

/* Day Sections */
.od-day-section {
    margin-bottom: 50px;
}

.od-day-title {
    font-size: 1.8rem;
    color: var(--text-color-comm);
    margin-bottom: 15px;
    border-bottom: 3px solid var(--color-main);
    display: inline-block;
    padding-right: 20px;
}

.od-today-label {
    font-size: 1rem;
    color: var(--color-accent);
    margin-left: 10px;
    font-weight: 700;
}

/* Grid Layout */
.od-gids-grid {
    background: var(--bg-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid var(--off-white);
}

/* Highlight today's grid */
.is-today .od-gids-grid {
    border: 2px solid var(--color-main);
}

/* Table Header */
.od-gids-table-header {
    display: flex;
    background: var(--off-white);
    padding: 15px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-color-comm);
}

/* Row Styling */
.od-gids-row {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #eee;
    align-items: center;
    transition: background 0.2s ease;
    flex-wrap: wrap;
}

.od-gids-row:last-child {
    border-bottom: none;
}

.od-gids-row.is-live {
    background: var(--od-live-programma);
    border-left: 6px solid var(--od-main-dark);
}

/* Columns */
.od-col-about {
    flex: 0 0 100%;
    width: 100%;
    padding: 5px 0 0 0;
    font-size: 1rem;
    color: var(--text-color-comm);
    border-top: 1px solid #eee;
}
.od-col-time {
    font-size: 1rem;
    color: var(--text-color-comm);
}

.od-col-prog {
    flex: 1;
}

.od-prog-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--od-programma);
}

.od-col-host {
    flex: 1;
    color: var(--text-color-comm);
}

.od-col-status {
    text-align: left;
}

.od-col-about {
    margin-top: 0.5rem;
}

/* Badges */
.od-live-badge {
    background: #ff3b30;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: od-pulse 1.5s infinite ease-in-out;
}

.od-mobile-label {
    display: none;
}

/* Empty State */
.od-no-data {
    text-align: center;
    padding: 50px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* Animations */
@keyframes od-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Responsive View */
@media (max-width: 768px) {
    .od-gids-table-header {
        display: none;
    }

    .od-gids-row {
        display: flex;
        flex-direction: column; /* Stack everything vertically */
        padding: 12px 15px;
        gap: 5px;
    }

    /* Move Program to the very top */
    .od-col-prog {
        order: 1;
        width: 100%;
        margin-bottom: 5px;
    }

    .od-prog-title {
        font-size: 1.2rem; /* Make the title slightly larger since it's the header now */
        color: var(--od-main-dark);
        display: block;
    }

    /* Time becomes the second item */
    .od-col-time {
        order: 2;
        width: 100%;
        font-size: 0.95rem;
        color: var(--text-color-dates);
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
        margin-bottom: 2px;
    }

    /* Herhaling becomes the third item */
    .od-col-type {
        order: 3;
        width: 100%;
    }

    /* Host becomes the fourth item */
    .od-col-host {
        order: 4;
        width: 100%;
    }

    /* Status badge at the bottom */
    .od-col-status {
        order: 5;
        width: 100%;
        margin-top: 5px;
    }

    /* Labels for the secondary info */
    .od-mobile-label {
        display: inline-block;
        width: 90px;
        font-weight: 700;
        color: #999;
        text-transform: uppercase;
        font-size: 0.65rem;
    }

    /* Hide the label for the Program since it's now the "Header" */
    .od-col-prog .od-mobile-label {
        display: none;
    }

    /* Add a label for Herhaling for clarity */
    .od-col-type::before {
        content: "HERHALING: ";
        font-weight: 700;
        color: #999;
        text-transform: uppercase;
        font-size: 0.85rem;
        margin-right: 25px; /* Matches the width of other labels */
    }
}

/* Gids Column Widths */
@media (min-width: 769px) {
    .od-col-time {
        flex: 0 0 130px;
    }
    .od-col-type {
        flex: 0 0 120px;
        font-size: 0.85rem;
        color: var(--text-color-comm);
        margin-bottom: 5px;
    } /* Styling for Herhaling */
    .od-col-prog {
        flex: 1.5;
    }
    .od-col-host {
        flex: 1;
    }
    .od-col-status {
        flex: 0 0 100px;
    }
}

.od-herhaling-text {
    background: #fff4f4;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #ffebeb;
}

@media (max-width: 768px) {
    .od-col-type {
        width: 100%;
        margin-bottom: 5px;
    }
}

.od-herhaling-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.od-herhaling-day {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 2px;
}

.od-herhaling-time {
    font-size: 0.95rem;
    color: var(--text-color-dates);
}

@media (max-width: 768px) {
    .od-col-type {
        border-top: 1px solid #eee;
        padding-top: 8px;
        margin-top: 5px;
    }

    .od-herhaling-wrapper {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
    }

    .od-herhaling-day::after {
        content: ":";
    }
}

/* =========================
   DOSSIERS PAGE
========================= */

.dossiers-page {
    box-sizing: border-box;
    overflow-x: hidden !important;
    min-height: 80vh;
    margin-top: 3.5rem;
}

.dossiers-page .container {
    width: min(1200px, calc(100% - 32px));
}

/* =========================
   HEADINGS
========================= */

.page-header {
    margin-bottom: 32px;
}

.page-header h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
}

.dossiers-featured {
    margin-bottom: 48px;
}

.dossiers-featured__title,
.dossiers-all__title {
    margin: 0 0 20px;
    font-size: 1.75rem;
    line-height: 1.2;
}

.dossier-card__title-uit {
    margin: 0 0 20px;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--text-color-on-picture);
}

/* =========================
   GRID
========================= */

.dossiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

/* =========================
   CARD BASE
========================= */

.dossier-card-ord,
.dossier-card-uit {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;

    padding: 24px;
    height: 10rem;
    border-radius: 30px;

    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: border-radius 0.3s ease;
}

.dossier-card-ord:hover,
.dossier-card-uit:hover {
    border-radius: 40px;
}

/* Bigger variant */
.dossier-card-uit {
    min-height: 35vh;
}

/* =========================
   IMAGE LAYER (ZOOM TARGET)
========================= */

.dossier-card-ord::after,
.dossier-card-uit::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: transform 0.4s ease;
    z-index: 0;
}

/* HOVER ZOOM */
.dossier-card-ord:hover::after,
.dossier-card-uit:hover::after {
    transform: scale(1.1);
}

/* =========================
   OVERLAY
========================= */

.dossier-card-ord::before,
.dossier-card-uit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3));
    z-index: 1;
}

/* =========================
   CONTENT
========================= */

.dossier-card__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.dossier-card__title {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.3;
    color: #fff;
}

.dossier-card__description {
    margin: 0;
    line-height: 1.6;
    font-size: 1.3rem;
    color: #fff;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
    .dossiers-page {
        padding: 0 0.5rem;
    }

    .dossier-card-ord,
    .dossier-card-uit {
        padding: 20px;
        border-radius: 12px;
    }
    .dossiers-page .container {
        width: 100%;
    }
}

/* =========================
   Wijknieuws
========================= */
/* Container */
.wijknieuws-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Stad */
.stad {
    margin-bottom: 50px;
}

/* Stad titel (100%) */
.stad-header {
    font-size: 28px;
    margin-bottom: 20px;
}

.stad-header a {
    text-decoration: none;
    color: inherit;
}

/* Wijken grid */
.wijken {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Wijk card */
.wijk-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: white;
    background: var(--od-black);
}

/* Image */
.wijk-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

/* Overlay content */
.wijk-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

/* Titel */
.wijk-content h3 {
    margin: 0;
    font-size: 18px;
}

/* Laatste artikel */
.wijk-latest {
    margin: 5px 0 0;
    font-size: 14px;
}

/* STAD HEADER ALS HERO */
.stad-header {
    position: relative;
    display: block;
    height: 250px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    text-decoration: none;
    color: white;
}

/* image */
.stad-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* fallback */
.stad-image.fallback {
    background: var(--od-black);
}

/* overlay */
.stad-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

/* titel */
.stad-overlay h2 {
    margin: 0;
    font-size: 32px;
}

/* spacing */
.stad {
    margin-bottom: 50px;
}

/* Responsive */
@media (max-width: 768px) {
    .wijken {
        grid-template-columns: 1fr;
    }
}

.wijknieuws-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--text-color-on-picture);
    text-align: center;
}

.stad-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stad-overlay h2 {
    font-size: 3rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Zoom on hover */
.stad-image,
.wijk-image {
    transition: transform 0.4s ease;
}

.stad-header:hover .stad-image,
.wijk-card:hover .wijk-image {
    transform: scale(1.1);
}

/* ======================================================
   ADVERTENTIES
   ====================================================== */

.od-ad-slot {
    position: relative;
    margin: 1rem 0;
    text-align: center;
}

.od-ad-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-color-dates);
    margin-bottom: 4px;
}

.od-ad-slot img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: inline-block;
    transition: all 0.2s ease 0s;
    filter: none !important;
}

.od-ad-slot img:hover {
    border-radius: 24px;
}

.od-ad-slot a.od-ad-link {
    display: inline-block;
    line-height: 0;
    width: 100%;
    transition: opacity 0.2s ease;
}

/* Sidebar slots */
.od-ad-slot--sidebar-top,
.od-ad-slot--sidebar-middle,
.od-ad-slot--sidebar-bottom {
    max-width: 300px;
    margin: 0 auto 1rem;
}

/* Banner slots */
.od-ad-slot--homepage-banner,
.od-ad-slot--content-after,
.od-ad-slot--category-top,
.od-ad-slot--search-top {
    width: 100%;
    margin: 0;
}

.od-ad-slot--homepage-banner img,
.od-ad-slot--content-after img,
.od-ad-slot--category-top img,
.od-ad-slot--search-top img {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
}

.advertentie-author,
.advertentie-dossier,
.advertentie-search {
    margin-top: 4px;
    margin-bottom: 10px;
    padding-right: 1rem;
}

.advertentie-homepage {
    margin-bottom: 1rem;
    width: 100%;
}

@media (max-width: 768px) {
    .advertentie-search,
    .advertentie-dossier,
    .advertentie-author {
        padding: 0;
    }
}

/* ADVERTENTIE LOGIC */
.od-ad-slot--content-after {
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .od-ad-slot--content-after,
    .od-ad-slot--homepage-banner,
    .od-ad-slot--category-top,
    .od-ad-slot--search-top {
        display: none;
    }
    .advertentie-dossier .od-ad-slot--mobile,
    .advertentie-search .od-ad-slot--mobile,
    .advertentie-category .od-ad-slot--mobile {
        margin-top: 0;
        margin-bottom: 1rem !important;
    }
    .od-ad-slot img:hover {
        border-radius: 6px;
    }
    .od-ad-slot--sidebar {
        display: none;
    }
}

@media (min-width: 1024px) {
    .od-ad-slot--mobile {
        display: none !important;
    }
}

/* IMG BORDER RADIUS ANIMATION */
img {
    border-radius: inherit;
    transition:
        border-radius 0.2s ease,
        filter 0.4s ease 0.1s;
}

img:hover {
    border-radius: 12px;
}

.site-title img:hover {
    border-radius: 0 !important;
}

#theme-toggle svg,
#theme-toggle-desktop svg {
    pointer-events: none;
}

.dark-light-container-mobile button {
    margin-top: 10px;
}

/* ======================================================
   PLUGIN BUILT-IN STYLES
   ====================================================== */

.cmplz-message {
    font-family: Roboto, system-ui;
    background: var(--off-white) !important;
    color: var(--text-color-comm) !important;
    padding: 0 15px 0 15px !important;
    border-radius: 6px;
}

.cmplz-title {
    font-family: Roboto, system-ui;
    font-size: 1.5rem !important;
    margin: 0 0 10px;
    color: var(--text-color-comm) !important;
    margin-bottom: 0 !important;
}

.cmplz-cookiebanner {
    background: var(--off-white) !important;
    color: var(--text-color-comm) !important;
    padding: 20px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.cmplz-cookiebanner:hover {
    border-radius: 12px;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
    background: var(--bg-color) !important;
    color: var(--text-color-comm) !important;
    border: 1px solid var(--off-white);
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
    border-radius: 12px;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
    border: none !important;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
    border: none !important;
    background: var(--bg-color) !important;
    color: var(--text-color-comm) !important;
}

/* ===================================================================
APP PAGE
====================================================================*/
.app-page {
    margin-top: 2.5rem;
}

.app-hero {
    padding: 4rem 1rem;
    background: var(--off-white);
    border-radius: 6px;
    transition: 0.2s ease 0s;
}

.app-hero:hover {
    border-radius: 24px;
    padding: 4.3rem 1.3rem;
}

.app-hero-flex {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.app-hero-content {
    flex: 1;
    min-width: 300px;
}
.app-hero-mockup {
    flex: 1;
    text-align: center;
    min-width: 300px;
}
.mockup-img {
    max-width: 320px;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
}

.app-pre-title {
    color: var(--color-accent);
    font-weight: 500;
    font-size: 1.25rem;
    text-decoration: underline 2px solid var(--color-main);
    text-underline-offset: 5px;
}

.app-buttons {
    display: flex;
    gap: 10px;
    margin-top: 2rem;
}

.app-btn img {
    height: 45px;
}

.section-title {
    margin: 2rem 0 1rem 0;
    font-size: 1.5rem;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.app-card {
    background: var(--bg-color);
    border: 1px solid var(--off-white);
    border-radius: 8px;
    overflow: hidden;
    transition: 0.3s;
}
.app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.app-card-media img {
    width: 100%;
    height: 95%;
    object-fit: cover;
}

.app-card-body {
    padding: 1.5rem;
    transition: all 0.2s ease 0s;
}

.app-card-body:hover {
    padding: 1.8rem;
}

.app-card-title {
    margin: 10px 0;
    font-size: 1.25rem;
    color: var(--text-color-comm);
}

.app-omroep-delft {
    color: var(--color-main) !important;
    font-weight: 900;
}

.app-card-body p,
.app-description p {
    color: var(--text-color-comm);
}

@media (max-width: 768px) {
    .app-hero-flex {
        flex-direction: column;
        text-align: center;
    }
    .app-buttons {
        justify-content: center;
    }
}

/* ======================================================
   Media pagina
   ====================================================== */
.media-title {
    font-size: 2rem;
    color: var(--text-color-comm);
    margin-bottom: 1rem;
    margin-top: 1rem;
    background: var(--off-white);
    padding: 0.5rem;
    border-radius: 6px;
    height: 10vh;
    transition: 0.2s ease;
    align-content: center;
    justify-content: center;
    text-align: center;
}

.media-title:hover {
    border-radius: 20px;
    padding: 0.7rem;
}

/* Radio sectie */
.radio-live-title {
    font-size: 26px;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.radio-sectie .radio-sidebar-media-container {
    position: sticky;
    top: 6rem;
    margin-bottom: 0;
}

.radio-sectie .radio-sidebar-title {
    margin-top: 0 !important;
}

.radio-sidebar .od-play-btn-front {
    width: 100% !important;
    height: 70px !important;
}

@media (min-width: 768px) {
    .radio-sidebar .od-play-btn-front {
        width: 100%;
        height: 70px;
    }
}

.radio-sectie .radio-page-title {
    margin-bottom: 0;
}

/* Videos sectie */
.videos-sectie,
.radio-sectie {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 0.5rem;
}

.videos-sectie .sidebar-latest {
    position: sticky;
    top: 7rem;
}

.videos-sectie .laatste-nieuws-container {
    margin-top: 0;
}

.videos-sectie .latest-block-title {
    margin-top: -4px !important;
}

.yt-date {
    font-size: 1rem;
    color: var(--text-color-dates);
    font-weight: 500;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
    .radio-sectie {
        grid-template-rows: auto auto;
        grid-template-columns: none;
    }
    .radio-sidebar {
        grid-row: 2;
    }
    .radio-page-title {
        margin-top: 0.5rem;
    }
}

/* CITIES TOP */
.city-menu-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem;
    margin-bottom: 15px;
    margin-top: 15px;
}

@media (max-width: 767px) {
    .city-menu-container > *:first-child {
        grid-column: 1 / -1;
    }
    .city-menu-container {
        margin: 0;
        grid-template-columns: repeat(2, 1fr) !important;
        margin-right: 2.7rem;
    }
}

.city-menu-item {
    font-size: 1.1rem;
    border-radius: 6px;
    padding: 5px;
    margin-bottom: 5px;
    text-align: center;
    justify-content: center;
    align-content: center;
    text-justify: center;
    font-weight: 700;
    transition: all 0.2s ease 0s;
    border: 0 solid transparent;
}

.city-menu-item:hover {
    border-radius: 20px;
    padding: 6px;
}

.steden-menu-desktop {
    max-width: 1200px;
    margin: 0 auto;
}

.home-item {
    border: 2px solid var(--color-main);
}

@media (min-width: 1024px) {
    .steden-menu-mobile {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .steden-menu-desktop {
        display: none !important;
    }
    .city-menu-item:hover {
        border-radius: 6px;
        padding: 10px;
        border: 0 solid transparent;
    }
}

.city-menu-item.active {
    border: 2px solid var(--color-badges);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-badges) 20%, transparent);
    background: var(--color-badges) !important;
    color: #fff !important;
    font-weight: bold;
}

/* CITY DROPDOWN (dorpen/wijken one level under a city button) */

/* The wrapper is now the grid item, so it takes over the order rules that
   used to live on .city-menu-item (see header.css) so zoetermeer/lansingerland
   keep their pinned position in the grid. */
.city-menu-item-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    order: 99;
    /* Matches the default .city-menu-item background (header.css); the
       dropdown reads this to tint itself the same colour as its button. */
    --city-color: var(--color-main);
}

.city-menu-item-wrapper[data-city=""] {
    order: 0;
}

.city-menu-item-wrapper[data-city="zoetermeer"] {
    order: 1;
    --city-color: #e94286;
}

.city-menu-item-wrapper[data-city="lansingerland"] {
    order: 2;
    --city-color: #49aa48;
}

/* .city-menu-item.active always renders with the blue "active" background
   (see rule further up), overriding whatever colour the button normally is
   — the dropdown needs to track that override too, and :has() keeps it in
   sync automatically as the active button changes (fetch-navigation.js
   toggles .active via JS on every city switch, without a page reload). */
.city-menu-item-wrapper:has(> .city-menu-item.active) {
    /* keep each city's own brand colour */
}

.city-menu-item-wrapper > .city-menu-item {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.city-menu-item-wrapper.has-dropdown > .city-menu-item {
    padding-right: 26px;
}

.city-dropdown-toggle {
    position: absolute;
    top: 0;
    right: 4px;
    bottom: 0;
    width: 22px;
    margin: auto 0;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.city-dropdown-toggle:hover,
.city-dropdown-toggle:focus-visible {
    background-color: rgba(255, 255, 255, 0.25);
}

.city-dropdown-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.city-dropdown-toggle:active {
    background-color: rgba(255, 255, 255, 0.4);
}

.city-dropdown-toggle svg {
    transition: transform 0.15s ease;
}

.city-menu-item-wrapper.open .city-dropdown-toggle svg {
    transform: rotate(180deg);
}

.city-sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    border-top: 3px solid var(--city-color);
}

.city-menu-item-wrapper.open .city-sub-menu {
    display: block;
}

.city-sub-menu li {
    margin: 0;
}

.city-sub-menu a {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--text-color-comm);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 4px;
}

.city-sub-menu a:hover,
.city-sub-menu a:focus-visible {
    background-color: color-mix(in srgb, var(--city-color) 15%, transparent);
}

.city-sub-menu a:focus-visible {
    outline: 2px solid var(--city-color);
    outline-offset: -2px;
}

/* True desktop only — matches DESKTOP_BREAKPOINT in js/city-dropdown.js.
   Tablet (768–1024px) uses the same tap-driven overlay menu as mobile
   (see tablet.css), not this hover flyout. */
@media (min-width: 1025px) {
    .home-mobile-menu {
        display: none;
    }

    .city-sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 100%;
        width: max-content;
        max-width: 240px;
        margin-top: 0.4rem;
        background: var(--off-white);
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        padding: 0.4rem;
        z-index: 200;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        display: block;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }

    /* .open is set on mouseenter and removed (with a delay) on mouseleave by
       js/city-dropdown.js, so the panel doesn't vanish the instant the
       pointer leaves the button. :focus-within covers keyboard users, who
       get an immediate open/close instead since there's no "leave" to delay. */
    .city-menu-item-wrapper.open .city-sub-menu,
    .city-menu-item-wrapper.has-dropdown:focus-within .city-sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Desktop opens purely on hover/focus (see above) — the chevron is a
       decorative hint here, not a control, so it shouldn't look clickable. */
    .city-dropdown-toggle {
        cursor: default;
        pointer-events: none;
    }
}

@media (min-width: 768px) and (max-width: 1025px) {
    .home-mobile-menu {
        list-style: none;
        margin: 0.25rem 0 0;
        padding: 0;
    }

    .home-mobile-menu li {
        border-bottom: 1px solid var(--off-white);
        padding: 0.75rem 0;
        font-weight: 600;
    }

    .home-mobile-menu a {
        text-decoration: none;
        color: var(--text-color-comm);
        display: block;
    }
    .site-menu button {
        margin-right: 2.7rem;
    }
    .site-menu .city-menu-container {
        margin-right: 3.4rem;
    }
    .site-menu .menu-extras {
        margin-right: 3.7rem;
    }
}

/* Home's menu is listed statically below the city buttons on mobile and
   tablet (.home-mobile-menu) instead of being a collapsible dropdown like
   the city buttons — so its own toggle/panel never show below desktop. */
@media (max-width: 1024px) {
    .city-menu-item-wrapper[data-city=""] .city-dropdown-toggle,
    .city-menu-item-wrapper[data-city=""] .city-sub-menu {
        display: none !important;
    }

    .city-menu-item-wrapper[data-city=""].has-dropdown > .city-menu-item {
        padding-right: 5px;
    }
}

@media (max-width: 767px) {
    .home-mobile-menu {
        list-style: none;
        margin: 0.25rem 0 0;
        padding: 0;
    }

    .home-mobile-menu li {
        border-bottom: 1px solid var(--off-white);
        padding: 0.75rem 0;
        font-weight: 600;
    }

    .home-mobile-menu a {
        text-decoration: none;
        color: var(--text-color-comm);
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .city-dropdown-toggle,
    .city-dropdown-toggle svg,
    .city-sub-menu {
        transition: none !important;
    }
}


/* Streekomroep brand update: Zoetermeer uses logo magenta */
.city-menu-item-wrapper[data-city="zoetermeer"] > .city-menu-item,
.city-menu-item-wrapper[data-city="zoetermeer"] > .city-menu-item.active {
    background: #e94286 !important;
    border-color: #e94286 !important;
}
.city-menu-item-wrapper[data-city="zoetermeer"] > .city-menu-item.active {
    box-shadow: 0 0 0 5px color-mix(in srgb, #e94286 20%, transparent);
}

/* Mobile photo badges: compact labels instead of covering the image */
@media (max-width: 767px) {
    .post-card-categories,
    .desktop-post-card-categories,
    .hero-card__categories,
    .latest-item-media-image .categories,
    .related-post-image .categories {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        left: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        width: auto !important;
        max-width: calc(100% - 12px) !important;
    }

    .post-card-categories .badge,
    .desktop-post-card-categories .badge,
    .hero-card__categories .badge,
    .latest-item-media-image .badge,
    .related-post-image .badge {
        display: inline-flex !important;
        width: auto !important;
        max-width: 72% !important;
        min-width: 0 !important;
        padding: 3px 6px !important;
        margin: 0 !important;
        border-radius: 4px !important;
        font-size: 0.62rem !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}