/* Gaycation.eu — Vivid Fuchsia: oklch(56% 0.28 315) — between gay pink and pride purple */

:root {
    /* Primary: vivid fuchsia — community signal between gay pink and pride purple */
    --primary:       oklch(56% 0.28 315);
    --primary-dark:  oklch(38% 0.26 315);
    --primary-light: oklch(72% 0.20 315);
    --primary-hover: oklch(48% 0.28 315);
    --primary-subtle:oklch(97% 0.05 315);

    /* Surfaces — barely-there fuchsia tint, light and airy */
    --bg:            oklch(98.5% 0.004 340);
    --surface:       oklch(99.5% 0.002 340);
    --section-tint:  oklch(96% 0.010 340);

    /* Text — warm near-black, fuchsia-leaning */
    --text-main:     oklch(18% 0.01 340);
    --text-muted:    oklch(50% 0.008 340);

    /* Borders — soft fuchsia tint */
    --border:        oklch(90% 0.012 340);

    /* Shadows — fuchsia-tinted depth */
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.07), 0 1px 2px oklch(0% 0 0 / 0.04);
    --shadow-md: 0 4px 8px oklch(56% 0.28 315 / 0.12), 0 2px 4px oklch(0% 0 0 / 0.05);
    --shadow-lg: 0 10px 20px oklch(56% 0.28 315 / 0.15), 0 4px 8px oklch(0% 0 0 / 0.07);

    /* Rainbow gradient — hero search border */
    --rainbow-grad: linear-gradient(90deg, #ff2400, #e81d1d, #e8b21d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);

    /* Legacy mappings */
    --bg-body:    var(--bg);
    --bg-card:    var(--surface);
    --accent:     var(--primary);
    --accent-hover: var(--primary-hover);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;
    --container-width: 1200px;
    --border-radius: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@import url('fonts/fonts.css');

/* Type scale — 1.25 ratio (minor third) */
:root {
    --text-xs:   0.75rem;   /* 12px — labels, badges */
    --text-sm:   0.875rem;  /* 14px — secondary, captions */
    --text-base: 1rem;      /* 16px — body */
    --text-lg:   1.25rem;   /* 20px — large body, intro */
    --text-xl:   1.5625rem; /* 25px — subheadings */
    --text-2xl:  1.953rem;  /* 31px — section headings */
    --text-3xl:  2.441rem;  /* 39px — page headings */
    --text-4xl:  3.052rem;  /* 49px — hero display */
}

body {
    font-family: 'Karla', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-main);
    background-color: var(--bg);
    margin: 0;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Bitter', Georgia, serif;
    color: var(--text-main);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 { font-size: var(--text-3xl); font-weight: 800; }
h2 { font-size: var(--text-2xl); font-weight: 700; }
h3 { font-size: var(--text-xl);  font-weight: 700; }
h4 { font-size: var(--text-lg);  font-weight: 700; }
h5, h6 { font-size: var(--text-base); font-weight: 700; }

/* =========================================
   Header & Navigation
   ========================================= */
/* =========================================
   Header & Navigation
   ========================================= */
.header {
    background: oklch(99.5% 0.003 55 / 0.92);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    /* Ueber Leaflet, unter der Lightbox.
       Die Kopfzeile hat einen z-index, also einen eigenen Stapelkontext, und
       darin ist das aufgeklappte Menue mit seinen 2000 gefangen: nach aussen
       zaehlt nur die Zahl hier. Leaflet setzt seine Bedienelemente auf 1000 und
       #map-wrap bildet keinen eigenen Kontext, diese 1000 stehen also direkt
       gegen unsere. Bei 100 gewann die Karte. Auf dem Telefon oeffnete sich das
       Menue deshalb hinter der Karte, und man musste bis unter sie scrollen, um
       es zu sehen, was aussah, als tue der Knopf gar nichts.
       1100 statt einer runden grossen Zahl, damit .lightbox (2000) weiterhin
       ueber der Kopfzeile liegt, wie es eine Vollbildgalerie soll, und
       .skip-link (9999) ueber allem. */
    z-index: 1100;
    box-shadow: 0 2px 10px oklch(56% 0.28 315 / 0.08);
    border-bottom: none;
}

/* One left edge for the whole page: --container-width wide with --spacing-md
   inside, the same as .container and .breadcrumbs. .scene-inner,
   .page-hero-inner and .footer-inner follow it too; change one and change all.
   This was 5% until 2026-09-11, and a share of the window put the logo 62 px
   right of the text below it at 1586 px, further the wider the screen. */
.nav-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    /* Must not shrink. It is a flex item of .nav-container, and when it shrinks
       its children keep their own width and simply spill out of it: on
       2026-09-19 the tagline hung 88 px over the navigation that way, while the
       container itself reported no overflow at all. Measure this with
       tagline.getBoundingClientRect().right against nav.getBoundingClientRect().left,
       never with nav-container.scrollWidth, which does not see it. */
    flex-shrink: 0;
}

.logo-image {
    height: 60px;
    width: auto;
    transition: transform 0.3s ease;
}

.logo-tagline {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.2;
    border-left: 1px solid var(--border);
    padding-left: 4px;
    /* 100px is what is left, not a preference. The container is 1200px wide with
       16px of padding either side, the eleven nav items need 890px at the gap the
       media query below sets, and the logo is 171px: 1168 - 890 - 171 - 4 = 103.
       The text therefore sets in three lines. Two lines would need about 180px,
       which only exists if the navigation gives it up (a gap of 8px or less) or
       the wording gets shorter. Measured against Karla, system-ui and Arial on
       2026-09-19: navigation clears the container edge by 11 to 16px. */
    max-width: 100px;
    display: none;
    /* Hidden by default, shown if space permits or if implemented in PHP */
}

@media (min-width: 768px) {
    .logo-tagline {
        display: block;
    }
}

@media (max-width: 768px) {
    .logo-image {
        max-height: 50px;
    }
}

.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu-btn:hover {
    color: var(--accent);
}

/* =========================================
   Accessibility
   ========================================= */
.skip-link {
    position: fixed;
    top: 0;
    left: 50%;
    /* Nicht nur -100%: der Kasten selbst waere damit exakt ausserhalb des
       Bildes, sein box-shadow faellt aber 4px nach unten und streut 12px, und
       genau der Schatten stand samt einer Subpixel-Kante als magentafarbener
       Streifen ueber jeder Seite. Die 16px sind Versatz plus Streuung. */
    transform: translateY(calc(-100% - 16px)) translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 0.75rem 1.5rem;
    z-index: 9999;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.skip-link:focus {
    transform: translateY(0) translateX(-50%);
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: -4px;
}

/* Die Abschnitte von venue.php und event.php hatten ueberhaupt keine Regel,
   und `* { margin: 0 }` weiter oben nimmt den Ueberschriften auch den
   Vorgabeabstand des Browsers. "Videos" stiess deshalb ohne jede Luecke an den
   letzten Satz des Fliesstextes davor. Auf breiter Spalte faellt das kaum auf,
   auf einem Telefon sehr, und 60 % der Besuche sind mobil. */
.venue-section {
    margin-top: var(--spacing-xl);
}

.venue-section:first-child {
    margin-top: 0;
}

.venue-section > h2 {
    margin-bottom: var(--spacing-sm);
}

.nav-links {
    display: flex;
    gap: var(--spacing-lg);
    list-style: none;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-links a:hover {
    background: var(--primary-subtle);
    color: var(--primary-dark);
}

.nav-links a.nav-active {
    color: var(--primary-dark);
    background: var(--primary-subtle);
    font-weight: 600;
}

/* =========================================
   Hero: find your scene (homepage, since 2026-11-04)
   Category filter, map or list, and what is on. The group colours come from
   categoryNavGroups() as --gc (colour) and --gt (tint) on each button, so no
   group hex value lives in this file.
   ========================================= */
.scene-hero {
    background: var(--bg);
    padding: clamp(1.75rem, 4vw, 3.5rem) 0 clamp(2rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--border);
}
.scene-inner {
    /* The page edge, see .nav-container. */
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.scene-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
}
.scene-titles { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.scene-eyebrow {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-dark);
}
.scene-title {
    margin: 0;
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.scene-search {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 0 1 460px;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 4px 4px 18px;
    color: var(--text-muted);
}
.scene-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-subtle); }
.scene-search svg { flex-shrink: 0; }
.scene-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--text-main);
}
.scene-search button {
    height: 44px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary-dark);
    color: #fff;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}
.scene-search button:hover { background: var(--primary-hover); }

/* Chips (desktop) and groups (mobile) share the dot. */
.scene-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--gc, var(--primary));
}
.scene-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scene-chip,
.scene-group,
.scene-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-main);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.scene-chip:hover,
.scene-group:hover { border-color: var(--text-muted); }
.scene-chip[aria-pressed="true"],
.scene-group[aria-pressed="true"] {
    background: var(--text-main);
    border-color: var(--text-main);
    color: #fff;
}
.scene-chip[aria-pressed="true"] .scene-dot,
.scene-group[aria-pressed="true"] .scene-dot { background: #fff; }
.scene-chip:focus-visible,
.scene-group:focus-visible,
.scene-sub:focus-visible,
.scene-views button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Mobile two-step filter, hidden on wide screens. */
.scene-groups { display: none; }
.scene-subs { display: none; }

.scene-body {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2rem;
    align-items: start;
}
.scene-main { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.scene-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.scene-views {
    display: flex;
    padding: 4px;
    background: var(--section-tint);
    border-radius: 999px;
}
.scene-views button {
    min-height: 40px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}
.scene-views button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
}
.scene-all {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;   /* inline-flex drops the space between the label span and the arrow */
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary-dark);
    text-decoration: none;
}
.scene-all:hover { text-decoration: underline; }

.scene-panel { height: 400px; }
.scene-map,
.scene-list {
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}
.scene-map {
    background: oklch(94% 0.005 250);
    border: 1px solid var(--border);
    /* Keeps Leaflet's own z-indexes (up to 1000) inside the map, so the burger
       menu of the header opens over it. Same fix as the city guide map. */
    isolation: isolate;
}
.scene-map[hidden],
.scene-list[hidden] { display: none; }
.scene-popup-meta { color: var(--text-muted); font-size: 0.85em; }

.scene-list {
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
}
.scene-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--section-tint);
    color: var(--text-main);
    text-decoration: none;
}
.scene-row:last-child { border-bottom: 0; }
.scene-row:hover { background: var(--bg); }
.scene-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.scene-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}
.scene-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.scene-row-name {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
.scene-row-meta { font-size: 0.875rem; color: var(--text-muted); }
.scene-row-arrow { color: var(--text-muted); }
.scene-list-empty { padding: 1.25rem 1rem; color: var(--text-muted); }

.scene-events { display: flex; flex-direction: column; }
.scene-events-title {
    margin: 0 0 0.25rem;
    font-size: 1.375rem;
    font-weight: 700;
}
.scene-events .hero-events { margin-bottom: 0.25rem; }

@media (max-width: 767px) {
    .scene-inner { gap: 0.75rem; }
    .scene-head { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .scene-search { flex-basis: auto; padding-left: 16px; }

    .scene-chips { display: none; }
    .scene-groups {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
    .scene-group {
        min-height: 48px;
        padding: 0 0.875rem;
        border-radius: 12px;
        font-weight: 600;
        text-align: left;
        gap: 0.625rem;
    }
    .scene-group .scene-dot { width: 10px; height: 10px; }
    .scene-subs:not([hidden]) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .scene-sub {
        padding: 0 0.875rem;
        background: var(--gt);
        border-color: var(--gt);
    }
    .scene-sub[aria-pressed="true"] {
        background: var(--gc);
        border-color: var(--gc);
        color: #fff;
    }

    .scene-body { grid-template-columns: 1fr; gap: 1.5rem; }
    .scene-panel { height: 340px; }
    .scene-row { gap: 0.75rem; padding: 0.625rem 0.75rem; }
    .scene-thumb { width: 48px; height: 48px; }
}

/* /categories.php: the same four groups as a plain list, no pictures. */
.cat-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1.5rem;
    margin: 1rem 0 2.5rem;
}
.cat-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--gc);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.25rem 0.5rem;
    scroll-margin-top: 6rem;
}
.cat-group:target { box-shadow: 0 0 0 3px var(--gt); }
.cat-group-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
}
.cat-group-title .scene-dot { width: 10px; height: 10px; }
.cat-group-list { list-style: none; margin: 0; padding: 0; }
.cat-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
    border-top: 1px solid var(--section-tint);
    color: var(--text-main);
    text-decoration: none;
}
.cat-group-list li:first-child .cat-link { border-top: 0; }
.cat-link:hover .cat-link-name { color: var(--primary-dark); text-decoration: underline; }
.cat-link-name { flex: 1 1 auto; font-weight: 600; }
.cat-link-count { font-size: 0.875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cat-link-arrow { color: var(--text-muted); }

/* The event rows of the hero (also used before 2026-11-04). */
.hero-events {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.hero-event {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s, transform 0.15s;
}
.hero-event:hover { background: var(--section-tint); transform: translateX(2px); }
.hero-events li:last-child .hero-event { border-bottom: none; }

.hero-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}
.hero-event-day {
    font-family: var(--font-heading, 'Bitter', serif);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--primary);
}
.hero-event-month {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-top: 0.2rem;
    font-weight: 600;
}

.hero-event-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.15rem;
    color: var(--text-main);
    line-height: 1.3;
}
.hero-event-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.hero-empty {
    padding: 1.25rem 1.5rem;
    background: var(--section-tint);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}
.hero-empty a { color: var(--primary); font-weight: 600; }

/* =========================================
   Compact page hero (categories, events, countries, news)
   ========================================= */
.page-hero {
    background: oklch(97% 0.018 340);
    border-bottom: 1px solid var(--border);
    padding: 2.25rem 0 2.5rem;
}
.page-hero-inner {
    /* The page edge, see .nav-container. The band colour stays full width on
       .page-hero, only the content is held to the edge. */
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
.page-hero-text { min-width: 0; }
.page-hero-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.6rem;
}
.page-hero-title {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    line-height: 1.1;
    color: var(--text-main);
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}
.page-hero-accent { color: var(--primary); }
.page-hero-lede {
    font-family: 'Bitter', Georgia, serif;
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 48ch;
    margin: 0 0 1rem;
}
.page-hero-stats {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.page-hero-stats strong { color: var(--text-main); font-weight: 700; }
.page-hero-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 8px 28px oklch(0% 0 0 / 0.12);
    display: block;
}
@media (max-width: 760px) {
    .page-hero { padding: 1.75rem 0 2rem; }
    .page-hero-inner { grid-template-columns: 1fr; gap: 1.25rem; }
    .page-hero-photo { aspect-ratio: 16 / 7; order: -1; }
}

/* =========================================
   Hero Section (used on about/contact)
   ========================================= */
.hero {
    position: relative;
    padding: 3rem 5%;
    text-align: center;
    /* Background removed here, handled by slides */
    background-color: var(--bg);
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-main);
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 0;
}

.hero-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    /* Keep the original light overlay */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hero::before {
    display: none;
}

.hero h1 {
    font-size: 3rem;
    margin: 0 0 1rem 0;
    letter-spacing: -1px;
    font-weight: 800;
    color: var(--text-main);
    text-shadow: 0 2px 10px oklch(100% 0 0 / 0.8);
}

.hero p {
    font-size: 1.4rem;
    margin: 0 0 2.5rem 0;
    color: var(--text-main);
    font-weight: 600;
    text-shadow: 0 1px 4px oklch(100% 0 0 / 0.8);
}

/* =========================================
   Homepage Sections (Full Width)
   ========================================= */
.homepage-section {
    padding: 3.5rem 0;
}

.section-latest-venues {
    background: var(--section-tint);
    padding: 4rem 0 3.25rem;
    border-top: 1px solid var(--border);
}

.section-latest-events {
    background: var(--bg);
    padding: 3.5rem 0 3rem;
    border-top: 1px solid var(--border);
}

.section-latest-news {
    padding-top: 0;
    padding-bottom: 3.5rem;
}

.section-countries {
    background: var(--section-tint);
    padding: 3rem 0 5rem;
    border-top: 1px solid var(--border);
}

/* Remove old card style from countries section */
.countries-section {
    /* Resetting old styles */
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin-bottom: 0;
    text-align: left;
}



/* SEARCH BOX WITH RAINBOW BORDER */
.search-container-wrapper {
    position: relative;
    max-width: 550px;
    width: 100%;
    padding: 2px;
    background: var(--rainbow-grad);
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.search-bar {
    background: white;
    padding: 0.3rem;
    border-radius: 48px;
    display: flex;
    width: 100%;
}

.search-bar input {
    border: none;
    padding: 0.6rem 1.2rem;
    flex-grow: 1;
    border-radius: 50px;
    outline: none;
    font-size: 1rem;
    color: var(--text-main);
}

.search-bar button {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.search-bar button:hover {
    background: var(--primary-hover);
}

/* Legacy .search-box mapping if needed, but we will update markup */
.search-box {
    background: transparent;
    box-shadow: none;
}

/* =========================================
   Layout & Grid
   ========================================= */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

.section-title {
    font-size: 1.625rem;
    color: var(--text-main);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    max-width: 48ch;
}

/* Supporting sections — step down */
.section-latest-venues .section-title { font-size: 1.75rem; }
.section-latest-events .section-title { font-size: 1.5rem; }
.section-countries .section-title     { font-size: 1.5rem; }

/* =========================================
   Countries (Compact Cards)
   ========================================= */
/* =========================================
   Countries (Pill Grid)
   ========================================= */
.countries-section {
    background: var(--section-tint);
    padding: 2rem;
    border-radius: 25px;
    margin-bottom: 3rem;
    text-align: left;
}

.countries-section .section-title {
    justify-content: flex-start;
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

/* Mapping existing .country-card to new .country-item style */
/* Mapping existing .country-card to new .country-item style */
.home-country-card {
    background: var(--surface);
    color: var(--text-main);
    text-decoration: none;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
    border: 1px solid var(--border);
    box-shadow: none;
}

.home-country-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Original Country Card for Countries Page */
.country-card {
    background: var(--bg-card);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
}

.country-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

.country-flag {
    font-size: 1.4rem;
    margin: 0;
    line-height: 1;
}

.country-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-main);
    margin: 0;
}

/* --- Countries page card: layout ------------------------------------------
   These used to be inline style attributes on every card in countries.php.
   The colour variant below has to override them, so they need a specificity
   a style attribute cannot win against. Scoped under .country-card because
   .country-stats / .stat-label / .stat-number are also used by the single
   country page further down this file. */

.country-card .country-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.15rem;
}

.country-card .country-flag {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.country-card .country-name {
    font-size: 1.1rem;
    line-height: 1.2;
    min-width: 0;
}

/* "Rainbow Index: 40.58 %" is 22 characters against a ~150px column, so it
   sits just at the edge of fitting. The label and the value are each held
   together with non-breaking spaces in countries.php, so when it does wrap it
   breaks after the colon rather than orphaning the per-cent sign. */
.country-card .country-rainbow-index {
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.3;
    opacity: 0.85;
}

.country-card .country-stats {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.2rem;
    /* margin-top:auto pins the stats to the bottom, so a two-line country name
       (Czech Republic, United Kingdom) does not push its card's numbers out of
       line with the rest of the row. */
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
}

.country-card .country-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.country-card .stat-label {
    color: var(--text-muted);
    font-size: inherit;
}

.country-card .stat-number {
    font-weight: 700;
    font-size: inherit;
    color: var(--primary);
}

/* --- Countries page card: ILGA Rainbow Map colour -------------------------
   --rb-bg is that country's exact colour from the Rainbow Map, --rb-fg is
   whichever of white / near-black has the better contrast against it. Both
   come from the page as a style attribute, so every rule here has to read
   through currentColor rather than naming a colour: on a yellow card the text
   is black and on a dark green one it is white, and the divider, the muted
   labels and the accent numbers all have to follow.
   See rainbowIndexColor() / rainbowIndexTextColor() in functions.php. */

.country-card--rainbow {
    background: var(--rb-bg);
    color: var(--rb-fg);
    border-color: rgba(255, 255, 255, 0.35);
}

.country-card--rainbow .country-name,
.country-card--rainbow .stat-number,
.country-card--rainbow .stat-label {
    color: currentColor;
}

.country-card--rainbow .stat-label {
    opacity: 0.82;
}

.country-card--rainbow .country-stats {
    border-top-color: currentColor;
    /* A full-strength rule would cut the card in half; this reads as a seam. */
    border-top-color: color-mix(in srgb, currentColor 30%, transparent);
}

.country-card--rainbow:hover {
    border-color: rgba(255, 255, 255, 0.8);
}

/* --- Countries page: the colour legend above the grid --------------------- */

.rainbow-legend {
    margin: 0 0 1.5rem;
}

.rainbow-legend-note {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rainbow-legend-bar {
    height: 14px;
    border-radius: 7px;
    border: 1px solid var(--border);
}

.rainbow-legend-ticks {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* space-between puts the middle label's box centre on the bar's centre, which
   is exactly where ILGA's scale breaks from yellow to green. */
.rainbow-legend-ticks span:first-child  { text-align: left; }
.rainbow-legend-ticks span:nth-child(2) { text-align: center; }
.rainbow-legend-ticks span:last-child   { text-align: right; }

@media (max-width: 560px) {
    /* The two descriptions do not fit either side of "50 %" on a phone;
       dropping the midpoint keeps the ends, which are what explain the bar. */
    .rainbow-legend-ticks span:nth-child(2) { display: none; }
    .rainbow-legend-ticks { font-size: 0.72rem; }
}

/* --- Countries page: the sort toggle above the grid ----------------------- */

.countries-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}

.countries-toolbar-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sort-toggle {
    display: inline-flex;
    /* Three pills, the longest of them "Number of Venues" — they wrap onto a
       second row on a phone rather than running off the side. */
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    background: var(--section-tint);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.sort-toggle-option {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.sort-toggle-option:hover {
    color: var(--text-main);
}

.sort-toggle-option.is-active {
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.rainbow-index-credit {
    margin: 1.5rem 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.rainbow-index-credit a {
    color: inherit;
    text-decoration: underline;
}

/* Stats Mini */
.country-stats-mini {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.view-all-countries {
    margin-top: 2rem;
}

/* =========================================
   Venue cards (includes/venue-grid.php), handoff "cards" design G, 2026-11-05.
   A row: a 104 px square, the photograph or a tile in the tint of the category's
   group, then name, place and, beside a photo only, the category tag. The tint
   and ink come in as --vc-tint / --vc-ink from categoryNavGroups().
   ========================================= */
.venue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1023px) {
    .venue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .venue-grid { grid-template-columns: minmax(0, 1fr); }
}

.venue-grid-wrap {
    margin: 1.5rem 0 var(--spacing-md);
}

.vcard {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #fff;
    border: 1px solid #EDE3EB;
    border-radius: 14px;
    color: var(--text-main);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vcard:hover {
    border-color: #D8C6D4;
    box-shadow: var(--shadow-sm);
}

.vcard:hover .vcard-name {
    color: #8A10B5;
}

.vcard:focus-visible {
    outline: 3px solid #8A10B5;
    outline-offset: 2px;
}

.vcard-media {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
    background: var(--section-tint);
}

/* The tile that stands in for a missing photo: the category in the group's ink,
   bottom left. Long names ("Holiday Rentals", "Cruising Areas") break. */
.vcard-tile {
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding: 10px 12px;
    background: var(--vc-tint, #F1E9EF);
    color: var(--vc-ink, #3D3540);
    font-family: 'Bitter', Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    /* Words wider than the tile carry soft hyphens from categoryTileLabel();
       overflow-wrap is only the backstop for a name nobody has measured. */
    -webkit-hyphens: manual;
    hyphens: manual;
    overflow-wrap: break-word;
    min-width: 0;
}

.vcard-tile > span {
    min-width: 0;
    max-width: 100%;
}

.vcard-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vcard-name {
    margin: 0;
    font-family: 'Bitter', Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
    overflow-wrap: anywhere;
    transition: color 0.15s ease;
}

.vcard-place {
    font-size: 14px;
    color: #5E5560;
}

.vcard-tag {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--vc-tint, #F1E9EF);
    color: var(--vc-ink, #3D3540);
}

@media (max-width: 639px) {
    .vcard-media { width: 88px; height: 88px; }
    .vcard-tile { padding: 8px 10px; font-size: 15px; }
}

/* Venue attributes under the title on venue.php (gay-owned, men only, ...). Same
   colours as the category badge, rounder, so the two read as related and distinct. */
.venue-attributes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    padding: 0;
}

.venue-attribute {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-dark);
    background: var(--primary-subtle);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* The membership card chip links to the guide, so it has to look clickable without
   turning into a button: an outline instead of the fill, the link in the same colour. */
.venue-attribute-card {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--primary-dark);
}

.venue-attribute-card a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The guide's h2 anchors land under the sticky header otherwise. */
.editorial-article-content h2[id] {
    scroll-margin-top: 6rem;
}

/* =========================================
   Buttons & Links
   ========================================= */
.btn-view-all {
    display: block;
    width: fit-content;
    margin: var(--spacing-lg) auto 0;
    color: var(--accent);
    background: transparent;
    padding: 0.5rem 1.5rem;
    border: 2px solid var(--accent);
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-view-all:hover {
    background: var(--accent);
    color: white;
}

/* =========================================
   Footer
   ========================================= */
.footer {
    background: oklch(20% 0.04 315);
    color: oklch(82% 0.015 340);
    padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
    margin-top: var(--spacing-xl);
    font-size: 0.95rem;
    line-height: 1.6;
}

.footer-inner {
    /* The page edge, see .nav-container. */
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: 2.5rem;
    border-bottom: 1px solid oklch(30% 0.03 315);
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

.footer-brand {
    max-width: 36ch;
}

.footer-logo {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: oklch(98% 0.01 340);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0.75rem;
}

.footer-logo span {
    color: var(--primary);
}

.footer-tagline {
    margin: 0;
    color: oklch(78% 0.015 340);
}

.footer-title {
    font-family: 'Bitter', Georgia, serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(95% 0.015 340);
    margin: 0 0 1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.footer-links a {
    color: oklch(82% 0.015 340);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: oklch(26% 0.03 315);
    color: oklch(92% 0.02 340);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.footer-social a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}

.footer-bottom {
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: oklch(72% 0.015 340);
}

.footer-bottom p {
    margin: 0;
}


/* =========================================
   Venue Map (GDPR)
   ========================================= */
.venue-map {
    height: 400px;
    width: 100%;
    background: var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    margin-top: var(--spacing-sm);
    z-index: 1;
    /* Ensure map stays below header/nav */
}

.map-privacy-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: oklch(96% 0.006 55 / 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    text-align: center;
}

.privacy-content {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    width: 400px;
}

.privacy-content p {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.privacy-content small {
    display: block;
    margin-bottom: 1.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .header {
        position: fixed;
        /* Force fixed on mobile */
        width: 100%;
        background: oklch(99.5% 0.003 55 / 0.97);
    }

    .nav-container {
        padding: 0 1rem;
        /* Increase padding for better edge spacing */
    }

    .mobile-menu-btn {
        display: block;
        color: var(--text-main);
        /* Dark icon for light header */
        margin-left: auto;
        /* Push to right */
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--surface);
        /* White background */
        flex-direction: column;
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
        border-top: 1px solid var(--border);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        z-index: 2000;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        display: block;
        padding: 1rem;
        border-radius: 8px;
        background: var(--section-tint);
        color: var(--text-main);
        font-weight: 600;
    }

    .nav-links a:active,
    .nav-links a:hover {
        background: var(--primary);
        color: white;
    }

    /* In production, add a hamburger menu */

    .hero {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .hero h1 {
        font-size: 1.8rem;
    }
}

/* Affiliate Banners */
/* Affiliate Banners */
.affiliate-sidebar-right {
    position: absolute;
    top: 260px;
    /* Aligned with content start */
    right: 1rem;
    z-index: 900;
    padding: 10px;
    display: none;
}

/* Homepage specific behavior */
.affiliate-sidebar-right.is-home {
    position: absolute;
    top: 120px;
    transform: none;
    right: 1rem;
    /* Must match fixed default */
}

.affiliate-sidebar-right.is-home.stuck {
    position: fixed;
    top: 120px;
}

/* Wide screen optimization: Anchor to content instead of screen edge */
@media (min-width: 1550px) {
    .affiliate-sidebar-right {
        right: auto;
        left: 50%;
        margin-left: 620px;
        /* 1200px container / 2 + 20px gap */
    }

    .affiliate-sidebar-right.is-home {
        right: auto;
        left: 50%;
        margin-left: 620px;
    }
}

.affiliate-banner-bottom {
    max-width: 1000px;
    margin: 3rem auto 1rem;
    text-align: center;
    padding: 0 1rem;
}

.affiliate-banner-bottom img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

@media (min-width: 1400px) {
    .affiliate-sidebar-right {
        display: block;
        /* Show only on large screens */
    }
}

/* =========================================
   Search Page Styles
   ========================================= */

.search-page .container h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    color: var(--text-main);
    text-align: center;
}

.search-filters {
    background: var(--bg-card);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
    border: 1px solid var(--border);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-item label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-light);
}

.filter-item input,
.filter-item select {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    color: var(--text-main);
    background-color: var(--surface);
    transition: all 0.2s;
}

.filter-item select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.filter-item input:focus,
.filter-item select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(55% 0.19 58 / 0.15);
}

.filter-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    border-top: 1px solid var(--section-tint);
    padding-top: var(--spacing-md);
}

.filter-actions .btn {
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.filter-actions .btn-primary {
    background: var(--accent);
    color: white;
}

.filter-actions .btn-primary:hover {
    background: var(--accent-hover);
}

.filter-actions .btn-secondary {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}

.filter-actions .btn-secondary:hover {
    border-color: var(--text-muted);
    color: var(--text-main);
    background: var(--section-tint);
}

.results-count {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    font-weight: 500;
}

.no-results {
    text-align: center;
    padding: var(--spacing-xl);
    background: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    color: var(--text-muted);
}

/* =========================================
   Empty State (shared component)
   ========================================= */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: 16px;
    text-align: center;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 1.75rem;
}

.empty-state-title {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-main);
}

.empty-state-message {
    max-width: 42ch;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    padding: 0.625rem 1.25rem;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 999px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.empty-state-action:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

/* =========================================
   Skeleton loading (for async content)
   ========================================= */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 0%, var(--section-tint) 50%, var(--bg-card) 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-card {
    height: 220px;
    border-radius: 12px;
}

.skeleton-line {
    height: 0.9rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.skeleton-line.is-short { width: 40%; }
.skeleton-line.is-medium { width: 70%; }

/* =========================================
   Featured venue grid (Hot Right Now — 1 lead + 3 small)
   ========================================= */
.venue-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
    margin-bottom: var(--spacing-md);
}

/* All four cards share one size. The old layout blew the first one up to a
   tall panel, which upscaled a web-sized image and made it look soft. */
@media (min-width: 720px) {
    .venue-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .venue-feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.venue-feature-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.venue-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.venue-feature-image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--section-tint);
}

.venue-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.venue-feature-card:hover .venue-feature-image img {
    transform: scale(1.03);
}

/* The tile that stands in for a missing photograph, on a venue card and on an
   article card that has no image. A third of the published venues have no
   photograph, so this is not an edge case: it is what a listing is made of.

   What stood here was a pin emoji in an unstyled div, which put a small red
   marker in the top left corner of an empty rectangle. That reads as a picture
   that failed to load, not as one that does not exist.

   The colour comes from the venue's primary category through categoryColors(),
   so the tile agrees with the badge under it and with the pin on the map. Held
   deliberately low: between real photographs a saturated tile would pull the eye
   to the cards that have the least to show. */
.placeholder-tile {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    /* Plain tint first. A browser without color-mix drops the two lines below
       and keeps the ground the cards already had. */
    background: var(--section-tint);
    background-image:
        linear-gradient(135deg,
            color-mix(in oklab, var(--tile-color, var(--primary)) 20%, white) 0%,
            color-mix(in oklab, var(--tile-color, var(--primary)) 7%, white) 100%);
    overflow: hidden;
}

/* Faint diagonal texture, so an unphotographed card still has a surface rather
   than a flat field of colour. Two percent, which is at the edge of visible and
   is meant to be. */
.placeholder-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg,
        oklch(0% 0 0 / 0.02) 0 2px, transparent 2px 9px);
    pointer-events: none;
}

.placeholder-tile__mark {
    position: relative;
    font-family: 'Bitter', Georgia, serif;
    font-weight: 800;
    font-size: 2.75rem;
    line-height: 1;
    letter-spacing: 0.04em;
    /* Mixed towards the text colour rather than used raw: #e91e8c at full
       strength on its own pale tint is a monogram that shouts. */
    color: color-mix(in oklab, var(--tile-color, var(--primary)) 70%, var(--text-main));
    user-select: none;
}

/* The homepage cards are wider than the ones in a grid of results, and the same
   letters look undersized in them. */
.venue-feature-image .placeholder-tile__mark {
    font-size: 3.25rem;
}

.venue-feature-chip {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: oklch(100% 0 0 / 0.92);
    color: var(--primary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    text-transform: capitalize;
}

.venue-feature-body {
    padding: 1rem 1.125rem 1.25rem;
}

.venue-feature-body h3 {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.125rem;
    margin: 0 0 0.25rem;
    color: var(--text-main);
}

.venue-feature-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* =========================================
   Event list (What's On — editorial calendar)
   ========================================= */
.event-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event-list-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    background: var(--bg-card);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, transform 0.15s ease;
}

.event-list-link:hover {
    background: var(--primary-subtle);
    transform: translateX(2px);
}

.event-list-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 0.5rem 0.625rem;
    background: var(--primary-subtle);
    color: var(--primary-dark);
    border-radius: 10px;
    font-family: 'Bitter', Georgia, serif;
    line-height: 1;
}

.event-list-day {
    font-size: 1.5rem;
    font-weight: 800;
}

.event-list-month {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.2rem;
}

.event-list-body {
    min-width: 0;
}

.event-list-title {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.125rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-list-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.event-list-image {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.event-list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-list-arrow {
    color: var(--text-muted);
    font-size: 1.25rem;
    transition: transform 0.15s ease, color 0.15s ease;
}

.event-list-link:hover .event-list-arrow {
    color: var(--primary);
    transform: translateX(3px);
}

@media (max-width: 560px) {
    .event-list-image {
        display: none;
    }
    .event-list-link {
        grid-template-columns: auto 1fr auto;
    }
}

/* =========================================
   Breadcrumbs
   ========================================= */
.breadcrumbs {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0.875rem var(--spacing-md) 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.breadcrumbs li + li::before {
    content: "/";
    color: var(--border);
}

.breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumbs a:hover {
    color: var(--primary);
}

.breadcrumbs [aria-current="page"] {
    color: var(--text-main);
    font-weight: 600;
}

/* =========================================
   Rainbow active-nav underline
   ========================================= */
.nav-links a.nav-active {
    color: var(--text-main);
    background: transparent;
    font-weight: 600;
    position: relative;
}

.nav-links a.nav-active::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.15rem;
    height: 3px;
    border-radius: 3px;
    background: var(--rainbow-grad);
}

/* =========================================
   404 Page
   ========================================= */
.error-page {
    min-height: 70vh;
    display: grid;
    place-items: center;
    padding: clamp(3rem, 8vw, 6rem) 1.5rem;
    background: var(--bg);
}

.error-wrap {
    max-width: 600px;
    text-align: center;
}

.error-eyebrow {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(3.5rem, 12vw, 6rem);
    font-weight: 800;
    line-height: 1;
    margin: 0 auto 1rem;
    color: var(--primary);
    letter-spacing: -0.04em;
    display: inline-block;
    position: relative;
}

.error-eyebrow::after {
    content: "";
    display: block;
    height: 6px;
    border-radius: 3px;
    margin-top: 0.5rem;
    background: var(--rainbow-grad);
}

.error-title {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0 0 0.75rem;
    color: var(--text-main);
}

.error-lede {
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0 0 1.75rem;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 2rem;
}

.error-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    border: 1px solid var(--border);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.error-cta:hover {
    background: var(--primary-subtle);
    border-color: var(--primary-light);
    transform: translateY(-1px);
}

.error-cta--primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.error-cta--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

.error-search {
    display: flex;
    gap: 0.5rem;
    max-width: 480px;
    margin: 0 auto;
    padding: 4px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.error-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.625rem 1rem;
    font-size: 1rem;
    color: var(--text-main);
    outline: none;
}

.error-search button {
    border: none;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.error-search button:hover {
    background: var(--primary-hover);
}

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

/* Honeypot (FormGuard) — off-screen rather than display:none, which a bot reads.
   Empty for a human, filled by anything that submits every field it finds. */
.fg-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* =========================================
   Focus-visible system (site-wide)
   ========================================= */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Review Form Improvements */
.review-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

@media (max-width: 768px) {
    .review-form-grid {
        grid-template-columns: 1fr;
    }
}

.file-drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    text-align: center;
    background: var(--section-tint);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
    border-color: var(--accent);
    background: var(--primary-subtle);
}

.file-drop-zone p {
    margin: 0;
    font-weight: 600;
    color: var(--primary);
}

.file-drop-zone small {
    color: var(--text-muted);
}

.drop-icon {
    font-size: 2rem;
    line-height: 1;
}

.file-preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.file-preview-item {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 6px;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.file-preview-item img,
.file-preview-item video,
.file-preview-item .video-placeholder {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--section-tint);
}

.file-preview-item .video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.file-preview-item .file-name {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--primary);
}

.file-preview-item .file-size {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.file-preview-item .remove-btn {
    width: 100%;
    padding: 4px;
    background: #ef4444;
    /* Red 500 */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
    margin-top: auto;
}

.file-preview-item .remove-btn:hover {
    background: #dc2626;
    /* Red 600 */
}

/* Contact Info Grid
   The boxes under the description of a venue: address, contact, social, and on an
   event page one fact per paragraph. They are cards now rather than tinted panels,
   and the tint moved inside them, to the social chips. */
.contact-info-grid {
    /* auto-fit, not auto-fill. At 1200px the row holds four 250px tracks; with
       auto-fill the three boxes fill three of them and the fourth stands empty, so
       the whole set sits stranded in the left three quarters of the page. auto-fit
       collapses the empty track and the boxes share the row. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

/* `p` is still here for the event page, which uses the same grid with one fact per
   paragraph. The venue page groups several facts per box and uses .contact-box. */
.contact-info-grid p,
.contact-info-grid .contact-box {
    margin: 0;
    padding: var(--spacing-md);
    background: var(--surface);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    line-height: 1.5;
}

/* Block layout, deliberately not flex. A flex container blockifies every child
   element, so "Gijón, <a>Spain</a>" in the outdoor box put the country on a line
   of its own: the anchor is a child and becomes an item, while the text beside it
   becomes a second, anonymous one. The boxes hold running text as well as lines,
   so the spacing is set on the lines instead. */
.contact-box .contact-line + .contact-line {
    margin-top: var(--spacing-sm);
}

/* A heading for the box, set like the buttons on the page rather than as spaced
   small capitals. 0.9375rem and 600 are what .btn carries, so "Address" above the
   card reads in the same voice as "Write a Review" under it. It stays a level above
   the facts by weight alone, which is enough at 15px against 16px of running text. */
.contact-box__label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: var(--spacing-xs);
}

.contact-box strong {
    display: block;
    margin-bottom: var(--spacing-xs);
}

/* A night in several houses (event.php, since 2026-10-01): the whole first row of the
   grid, then one box per venue with its address and its own directions. */
.contact-info-grid .event-where { grid-column: 1 / -1; }
.event-where-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-md);
}
.event-where-item {
    padding: var(--spacing-md);
    background: var(--surface);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    line-height: 1.5;
}
.event-where-line { display: block; color: var(--text-muted); }
.event-where-directions { display: inline-block; margin-top: var(--spacing-sm); }

.contact-box .contact-line {
    display: block;
    /* A long mail address is one unbreakable word to the layout engine, and the grid
       column is a third of the width. Without this it prints straight over the box
       border, which aquaclubtorremolinos@outlook.es does at 1400px. */
    overflow-wrap: anywhere;
}
/* Icon column and text column, so the lines of the three boxes align down the page
   instead of each starting where its own glyph ends. The modifier is not decoration:
   without an icon as the first child the text itself lands in the 18px column and
   sets one character per line, which is what the outdoor boxes did while the rule
   was unconditional.
   The three lines of "How to get there" are deliberately without one. They are a
   coordinate, a route and a map, one fact in three forms, so a pin against each
   would number them rather than tell them apart. */
.contact-box .contact-line--icon {
    display: grid;
    grid-template-columns: 1.125rem 1fr;
    gap: var(--spacing-sm);
    align-items: start;
}

.contact-box .contact-icon {
    color: var(--text-muted);
    /* Optical, not geometric: the glyph is centred in its own box and the text sits
       on a baseline, so a shared top edge reads as the icon riding high. */
    margin-top: 0.18em;
}

/* Underlined, because colour alone must not be what marks a link, but the rule sits
   away from the text and in a lighter tint until the pointer arrives. Every link in
   the grid, not only the ones in a .contact-line: the country link in the outdoor
   box sits in running text, and left out it was the one browser-blue link among
   five in the site accent. The social chips and the ticket button carry their own
   look and are held out. */
.contact-info-grid a:not(.venue-social__link):not(.btn) {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: var(--primary-light);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease;
}

.contact-info-grid a:not(.venue-social__link):not(.btn):hover,
.contact-info-grid a:not(.venue-social__link):not(.btn):focus-visible {
    text-decoration-color: currentColor;
}

.contact-box .contact-line--other {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.venue-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.venue-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    /* Tinted, because the box around them is white now. The other way round the
       chips were white on a tinted panel; either way they have to be the one that
       differs, or they are a row of outlines. */
    background: var(--section-tint);
    color: var(--text-muted);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.venue-social__link:hover,
.venue-social__link:focus-visible {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-subtle);
    transform: translateY(-1px);
}

/* Reviews Section Typography */
.reviews-section h2 {
    font-size: 1.5rem;
    /* Smaller than main section headers */
    color: var(--primary-light);
}

/* Form Styling Improvements */
.review-form .form-group {
    margin-bottom: var(--spacing-md);
}

.review-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--primary);
}

.review-form input[type="text"],
.review-form input[type="email"],
.review-form textarea {
    width: 100%;
    /* Ensure full width */
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.review-form input:focus,
.review-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(55% 0.19 58 / 0.15);
}

.review-form textarea {
    resize: vertical;
    min-height: 120px;
}

/* Venue Visual Fixes */

/* 1. Limit Venue Image Size */
.venue-gallery .gallery-item img {
    max-height: 400px;
    /* Limit height on desktop */
    width: 100%;
    object-fit: cover;
    /* Maintain aspect ratio */
    border-radius: var(--border-radius);
}

@media (max-width: 768px) {
    .venue-gallery .gallery-item img {
        max-height: 250px;
        /* Smaller max-height on mobile */
    }
}

/* 2. Increase Spacing between Contact and Reviews */
.reviews-section {
    margin-top: 6rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

/* 3. Review Card Styling */
.review {
    background: white;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px dashed var(--section-tint);
}

.review-author {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.05rem;
}

.review-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.review-media-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.25rem 0;
    transition: all 0.2s;
}

.review-media-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* 4. Layout tweaks */
.contact-info-grid {
    margin-bottom: 0;
}

/* Venue Gallery */
.venue-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.gallery-thumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--border-radius);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.gallery-thumb:hover {
    border-color: var(--accent);
    transform: scale(1.02);
}

/* A picture whose people the operator declared AI-generated. The note sits on the
   thumbnail and not only in the lightbox, because it is the condition the file was
   published under and must be read without a click. */
.gallery-ai {
    position: relative;
}

.ai-people-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    pointer-events: none;
}

.lightbox-ai {
    margin-top: 0.4rem;
    color: #f2f2f2;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.lightbox-ai[hidden] {
    display: none;
}

.ai-people-note {
    display: block;
    font-weight: 600;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.95);
    /* Slate 900 with opacity */
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.open {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* The caption a venue operator wrote for this picture. Hidden rather than left empty
   when there is none, so a picture without one does not open with a blank strip. */
.lightbox-caption {
    max-width: min(90vw, 70ch);
    margin-top: 0.85rem;
    color: #f2f2f2;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.lightbox-caption:empty {
    display: none;
}

.lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--border-radius);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 5px;
    line-height: 1;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 1rem 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 4px;
    user-select: none;
    z-index: 2010;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

@media (max-width: 900px) {
    .lightbox-nav {
        background: rgba(0, 0, 0, 0.5);
        padding: 0.5rem 0.25rem;
    }

    .lightbox-close {
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Fix Mobile Header Overlap */
@media (max-width: 768px) {
    body {
        padding-top: 85px;
    }
}

/* =========================================
   Video Grid & Facades
   ========================================= */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.video-item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: oklch(8% 0.01 60);
    aspect-ratio: 16/9;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.video-item iframe,
.video-item video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Facade / Thumbnail Overlay */
.video-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: oklch(14% 0.02 60);
    /* Fallback */
}

.video-facade::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.3s;
}

.video-facade:hover::before {
    background: rgba(0, 0, 0, 0.0);
}

.play-button {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    transition: transform 0.2s, background 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.play-button::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 18px solid var(--primary);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 6px;
}

.video-item:hover .play-button {
    transform: scale(1.1);
    background: white;
}

/* A video takes its own shape where the file says what it is, and carries a credit line
   under the player. The figure exists so the credit survives the click that swaps the
   facade for the player: that click replaces everything inside .video-item. */
.video-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.video-credit {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* ==================== Buttons ====================
   `.btn` was never defined in this stylesheet, only `.filter-actions .btn`. So the
   two buttons inside the search filter bar looked like buttons and every other one
   on the public site did not: "View Details" on all 794 search cards, "Get Tickets"
   on an event, the news pagination, the upload and review submits, and "Write a
   Review" under the venue map, which is what made it noticeable. They rendered as
   plain underlined links.

   The scoped rule still wins inside the filter bar by specificity, so that bar is
   unchanged. Shape follows .venue-action, which is the pill this site already uses. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-main);
    font: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn:hover,
.btn:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

.btn-sm {
    min-height: 36px;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
}

/* Write-review CTA */
.write-review-cta {
    padding-top: 0;
    margin-bottom: 0.5rem;
}

/* ==================== Venue Action Bar ==================== */
.venue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 0 0 1.75rem;
    padding: 0;
}

.venue-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.125rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-main);
    font: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.venue-action svg {
    flex-shrink: 0;
}

/* The Directions pill carries a second line naming where it goes, because a
   pin icon and the word Directions read as our own map and the link is
   Google Maps. Colour is inherited at reduced opacity rather than taken from
   --text-muted, so the line follows the hover state and the --primary
   variant instead of sitting grey next to a fuchsia label. */
.venue-action__labels {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.venue-action__service {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    opacity: 0.7;
}

.venue-action:hover,
.venue-action:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-subtle);
}

.venue-action--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.venue-action--primary:hover,
.venue-action--primary:focus-visible {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

.venue-action--copied {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-subtle);
}

/* The Share button and its menu, from includes/share.php.

   On a phone the button calls the operating system's own share sheet, which offers
   the messengers the reader has installed. Chrome and Edge implement the same API
   on Windows and pass it to a desktop panel holding nearby sharing and little else,
   so on a computer the button opens the menu below instead. The switch is made in
   JavaScript on the pointer, not here, because the same test decides which of two
   behaviours runs and a rule in two places is a rule that drifts.

   Every item in the menu is a plain link. Nothing is fetched from any of those
   services until the reader clicks one, which is what makes the whole thing lawful
   without a consent banner. Do not put a script or an iframe in here. */
.share-wrap {
    position: relative;
    display: inline-flex;
}

.share-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 200px;
    padding: 0.375rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

/* .share-menu sets a display, so the browser default for [hidden] loses to it. */
.share-menu[hidden] {
    display: none;
}

.share-menu__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-main);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.share-menu__item svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.share-menu__item:hover,
.share-menu__item:focus-visible {
    background: var(--primary-subtle);
    color: var(--primary);
}

.share-menu__item:hover svg,
.share-menu__item:focus-visible svg,
.share-menu__item--copied,
.share-menu__item--copied svg {
    color: var(--primary);
}

/* Under 480px the pills are already two to a row, so an absolutely positioned menu
   would hang off the right edge on the second column. It becomes a block instead. */
@media (max-width: 480px) {
    .share-wrap {
        display: block;
        flex: 1 1 calc(50% - 0.25rem);
    }
    .share-wrap .venue-action--share {
        width: 100%;
    }
    .share-menu {
        left: auto;
        right: 0;
        min-width: 220px;
    }
}

@media (max-width: 480px) {
    .venue-actions {
        gap: 0.5rem;
    }
    .venue-action {
        flex: 1 1 calc(50% - 0.25rem);
        padding: 0.75rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* ==================== Homepage Event Date Badge ==================== */
.event-date-badge-home {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.92);
    padding: 4px 10px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    color: var(--primary);
    line-height: 1.2;
}

.event-date-badge-home .day {
    font-size: 1.2rem;
    display: block;
}

.event-date-badge-home .month {
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* ===== Pride pages (pride.php, pride-archive.php) =====
   Both pages carry the same filter bar, so it lives here rather than in two
   <style> blocks that would drift. The map rules stay in pride.php — /map is a
   full-viewport page and this one is an embedded box, they share nothing. */
.pride-toolbar { flex-wrap: wrap; }

.pride-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.pride-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pride-filter-legend {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.pride-filter-field select {
    padding: 0.5rem 0.7rem;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    min-width: 190px;
    max-width: 100%;
}

.pride-filter-clear {
    align-self: center;
    font-size: 0.85rem;
}

.pride-filter-checkboxes {
    /* flex-basis: 100% inside .pride-filter-form's flex-wrap forces this onto its
       own line below the selects, whatever width they end up taking. */
    flex-basis: 100%;
    border: 0;
    padding: 0;
    margin: 0.5rem 0 0;
}

.pride-filter-checkboxes legend {
    padding: 0;
    margin-bottom: 0.35rem;
}

.pride-filter-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.4rem;
    column-gap: 1.1rem;
}

.pride-filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    white-space: nowrap;
}

.pride-archive-link {
    margin: 2.5rem 0 1rem;
    text-align: center;
}

@media (max-width: 600px) {
    .pride-filter-form { width: 100%; }
    .pride-filter-field { width: 100%; }
    .pride-filter-field select { min-width: 0; width: 100%; }
    .pride-filter-checkbox-row { column-gap: 0.8rem; }
}

/* Sits under the map on an event pinned to its town centre rather than to an
   address. The map cannot say that on its own, and a pin that says nothing is
   read as an address. */
.map-note {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ===== Event agenda (includes/event-grid.php), handoff "cards" design F =====
   Every event list, grouped by day: time and kind, then title, place and one
   line of text, a small picture on the right only where one exists. Replaced the
   card grid with the big picture on top on 2026-11-05. */
.agenda {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 2rem;
}

.agenda-day-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 2px solid #1E1A1D;
    font-family: 'Bitter', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-main);
}

.agenda-day-count {
    font-family: 'Karla', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #5E5560;
}

.agenda-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.agenda-list > li {
    margin: 0;
    padding: 0;
}

.agenda-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 136px;
    gap: 24px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #E7DDE5;
    color: var(--text-main);
    text-decoration: none;
}

.agenda-item:hover .agenda-title {
    color: #8A10B5;
}

.agenda-item:focus-visible {
    outline: 3px solid #8A10B5;
    outline-offset: 2px;
    border-radius: 4px;
}

.agenda-when {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.agenda-time {
    font-family: 'Bitter', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #8A10B5;
}

.agenda-kind {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 99px;
    background: #F3E3FA;
    color: #6B0D8C;
}

.agenda-kind--party {
    background: #FBE3EC;
    color: #7A1640;
}

.agenda-what {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.agenda-title {
    font-family: 'Bitter', Georgia, serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    transition: color 0.15s ease;
}

.agenda-where {
    font-size: 15px;
    color: #3D3540;
}

.agenda-text {
    font-size: 14px;
    color: #5E5560;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-thumb {
    width: 136px;
    height: 92px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--section-tint);
}

@media (max-width: 767px) {
    .agenda { gap: 24px; }

    .agenda-day-title {
        font-size: 19px;
        padding-bottom: 8px;
    }

    /* Time and kind in one line over the title, the text dropped, the picture
       76 px top right where there is one. */
    .agenda-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        align-items: start;
        padding: 14px 0;
    }

    .agenda-item.has-thumb {
        grid-template-columns: minmax(0, 1fr) 76px;
        column-gap: 12px;
    }

    .agenda-when {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        grid-column: 1;
    }

    .agenda-time { font-size: 16px; }

    .agenda-kind {
        font-size: 11px;
        padding: 2px 7px;
    }

    .agenda-what { grid-column: 1; }

    .agenda-title { font-size: 17px; }

    .agenda-where { font-size: 14px; color: #5E5560; }

    .agenda-text { display: none; }

    .agenda-thumb {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 76px;
        height: 76px;
    }
}

/* Recurring schedule text on event detail page */
.recurring-schedule-text {
    font-style: italic;
    font-size: 1.05rem;
}

/* ==================== News - Full Page ==================== */







.news-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.news-card {
    display: flex;
    flex-direction: row;
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-main);
    transition: transform 0.15s, box-shadow 0.15s;
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.news-card-image {
    flex-shrink: 0;
    width: 200px;
    min-height: 140px;
    overflow: hidden;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card-content {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

.news-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.news-source-badge {
    background: var(--primary);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.news-card-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.news-card-title {
    font-size: 1.05rem;
    margin: 0 0 0.5rem 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 0.5rem 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-author {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.pagination-info {
    font-size: 0.9rem;
    color: var(--text-muted);
}


@media (max-width: 600px) {
    .news-card {
        flex-direction: column;
    }
    .news-card-image {
        width: 100%;
        height: 180px;
        min-height: auto;
    }
}

/* ===== Editorial Article Detail Page ===== */
.editorial-article {
    padding: 3rem 0;
    background: var(--bg);
}

.editorial-article-header {
    max-width: 800px;
    margin: 0 auto 2rem;
    text-align: center;
}

.editorial-article-header h1 {
    font-size: 2.2rem;
    color: var(--text-main);
    line-height: 1.3;
    margin: 0.5rem 0 1rem;
}

.editorial-article-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.editorial-article-image {
    max-width: 900px;
    margin: 0 auto 2.5rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.editorial-article-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Photo credit. A licensed image has to name its source, so this line is part
   of the licence rather than decoration. */
.editorial-article-credit {
    margin: 0;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted, #777);
    background: rgba(0, 0, 0, 0.03);
}

.editorial-article-content {
    max-width: 750px;
    margin: 0 auto 3rem;
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-main);
}

.editorial-article-content p {
    margin-bottom: 1.2rem;
}

.editorial-article-content h2 {
    font-size: 1.5rem;
    margin: 2rem 0 0.6rem;
    line-height: 1.3;
}

.editorial-article-content h3 {
    font-size: 1.25rem;
    margin: 1.8rem 0 0.5rem;
    line-height: 1.3;
}

.editorial-article-content h4 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.4rem;
}

/* A picture set into the text by the author, as opposed to the lead image above it. */
.editorial-article-content img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 616px);
    max-height: 616px;
    margin: 0.25rem 0 1.5rem;
    border-radius: 12px;
}

/* A video inside an article: a button until pressed, then the host's iframe
   (see the script in editorial-article.php). */
.editorial-article-content .article-embed {
    margin: 0.25rem 0 1.5rem;
    max-width: 616px;
}

.editorial-article-content .article-embed-play,
.editorial-article-content .article-embed iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}

.editorial-article-content .article-embed-play {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    background: oklch(14% 0.02 60);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.editorial-article-content .article-embed-play:hover .play-button {
    transform: scale(1.1);
    background: white;
}

.editorial-article-content .article-embed-note {
    font-size: 0.85rem;
    opacity: 0.8;
    max-width: 30rem;
    text-align: center;
}

/* A picture with a caption under it. The caption carries a credit or a note such
   as "AI-generated", so the image keeps its usual bottom margin on the figure. */
.editorial-article-content .article-figure {
    margin: 0.25rem 0 1.5rem;
    max-width: 616px;
}

.editorial-article-content .article-figure img {
    margin: 0;
}

.editorial-article-content .article-embed figcaption,
.editorial-article-content .article-video figcaption,
.editorial-article-content .article-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* A video file we host ourselves, set into the text. It loads nothing until play
   (preload="none") and comes from our own server, so it needs no facade. Portrait
   clips are capped by height, or a 9:16 phone video fills two screens. */
.editorial-article-content .article-video {
    margin: 0.25rem 0 1.5rem;
    max-width: 616px;
}

.editorial-article-content .article-video video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(80vh, 640px);
    border-radius: 12px;
    background: oklch(14% 0.02 60);
}

.editorial-article-content a {
    color: var(--primary);
    text-decoration: underline;
}

.editorial-article-content a:hover {
    color: var(--primary-hover);
}

.editorial-article-footer {
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}

.editorial-article-footer a {
    display: inline-block;
    color: var(--primary);
    background: transparent;
    padding: 0.5rem 1.5rem;
    border: 2px solid var(--primary);
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.editorial-article-footer a:hover {
    background: var(--primary);
    color: white;
}

@media (max-width: 768px) {
    .editorial-article {
        padding: 2rem 0;
    }
    .editorial-article-header h1 {
        font-size: 1.6rem;
    }
    .editorial-article-content {
        font-size: 1rem;
    }
    .editorial-article-footer {
        flex-direction: column;
    }
}

/* ==================== Map Teaser (Homepage) ==================== */
.map-teaser-sub {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: -0.5rem 0 1rem;
}

.map-teaser-link {
    display: block;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    transition: opacity 0.2s;
}

.map-teaser-link:hover { opacity: 0.92; }

.map-teaser-link picture,
.map-teaser-link img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.map-teaser-actions {
    text-align: center;
    margin-top: 1rem;
}
/* =========================================
   Country Page
   ========================================= */
/* Full venue index on a country page. Every venue is a real link here —
   the old "show all" toggle hid all but five behind a parameter whose
   canonical pointed back at the short page, so they had no crawlable link. */
.country-venue-index {
    margin-top: 2.5rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--border);
}
.country-index-title {
    font-size: 1.15rem;
    margin: 0 0 1.2rem;
    color: var(--text);
}
.country-city-group { break-inside: avoid; margin-bottom: 1.4rem; }
.country-city-group h4 {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}
.country-city-group h4 .count {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 0.35rem;
}
.country-city-group ul { list-style: none; margin: 0; padding: 0; }
.country-city-group li { padding: 0.22rem 0; font-size: 0.92rem; line-height: 1.35; }
.country-city-group li a { text-decoration: none; color: var(--text); }
.country-city-group li a:hover { color: var(--primary); text-decoration: underline; }
.country-city-group li .cat {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-left: 0.4rem;
    white-space: nowrap;
}
@media (min-width: 700px) {
    .country-venue-index > .country-city-group { columns: 1; }
    .country-venue-index { column-count: 2; column-gap: 2.5rem; }
    .country-index-title { column-span: all; }
}
@media (min-width: 1000px) {
    .country-venue-index { column-count: 3; }
}

/* The city guides, linked above the cards of a country page and from the city
   headings in its venue index. Without these a guide has no way in from the
   page a reader reaches it through. */
.country-city-guides {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
}
.country-city-guides span {
    color: var(--text-muted);
    margin-right: 0.25rem;
}
.country-city-group h4 a { color: var(--primary); text-decoration: none; }
.country-city-group h4 a:hover { text-decoration: underline; }

/* =========================================
   City Page (city.php)
   ========================================= */
.city-intro {
    max-width: 46rem;
    margin: 0.5rem 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-main);
}
.city-intro p { margin: 0; }
.city-intro p + p { margin-top: 0.85rem; }

.city-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.25rem;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.city-stats strong { color: var(--text-main); }
.city-stats a { color: var(--primary); }

/* Sticks under the header since 2026-10-02. --city-header-h comes from
   assets/city-guide.js; the fallbacks are the measured header heights, so the bar
   does not slide under the header when the script does not run.
   z-index 900: under the header (1100) and the fullscreen map (1500), over the
   in-page map, whose Leaflet layers isolation: isolate keeps at home. */
.city-jump {
    --city-jump-top: var(--city-header-h, 5.5rem);
    position: sticky;
    top: var(--city-jump-top);
    z-index: 900;
    display: flex;
    align-items: center;
    margin: 0 calc(-1 * var(--spacing-md)) 2rem;
    padding: 0.5rem var(--spacing-md);
    background: var(--bg-body);
    transition: box-shadow 0.2s ease;
}
.city-jump.is-stuck {
    box-shadow: 0 6px 12px -8px oklch(18% 0.01 340 / 0.25);
    border-bottom: 1px solid var(--border);
}
.city-jump ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
}
.city-jump ul::-webkit-scrollbar { display: none; }
.city-jump li { flex: 0 0 auto; }
.city-jump a[aria-current="location"] {
    border-color: var(--primary);
    background: var(--primary-subtle);
    color: var(--primary);
    font-weight: 600;
}
.city-jump-arrow {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-main);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.city-jump-arrow--prev { margin-right: 0.5rem; }
.city-jump-arrow--next { margin-left: 0.5rem; }
.city-jump-arrow:hover { border-color: var(--primary); color: var(--primary); }
.city-jump-arrow[hidden] { display: none; }
.city-jump-sentinel { height: 0; }
@media (max-width: 768px) {
    .city-jump { --city-jump-top: var(--city-header-h, 4.5rem); }
    .city-jump a { min-height: 2.25rem; }
}

/* A venue section shows two rows of cards; city-guide.js marks the rest. */
.city-over { display: none !important; }
.city-show-all {
    display: block;
    margin: 1.25rem auto 0;
    min-height: 2.5rem;
    padding: 0.4rem 1.25rem;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.city-show-all:hover { background: var(--primary-subtle); }
.city-show-all[hidden] { display: none; }
.city-jump a,
.country-city-guides a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-main);
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.city-jump a:hover,
.country-city-guides a:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.city-jump .count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* The jump links land a heading under the header and the sticky bar rather than
   behind them. */
.city-section,
.city-anchor,
.city-jump ~ .lmap {
    scroll-margin-top: calc(var(--city-header-h, 5.5rem) + var(--city-jump-h, 3.5rem) + 0.75rem);
}

.city-reviewed {
    margin: -0.5rem 0 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* "At a glance", only where the guide's entry carries 'glance'. */
.city-glance {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--surface);
}
.city-glance h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}
.city-glance dl { margin: 0; display: grid; gap: 0.55rem; }
.city-glance dl > div {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
}
.city-glance dt {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.city-glance dd { margin: 0; line-height: 1.5; }
.city-glance a { color: var(--primary); }
.city-rainbow-chip {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
}
@media (max-width: 600px) {
    .city-glance dl > div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* The events block: cards for what is coming up, lists for the rest. */
.city-events-sub,
.city-year h3,
.city-area h3,
.city-practical h3,
.city-faq h3 {
    margin: 1.5rem 0 0.6rem;
    font-size: 1.1rem;
}
.city-events > .city-events-sub:first-of-type,
.city-events > .city-year:first-of-type h3 { margin-top: 0; }
.city-later,
.city-series,
.city-year ul,
.city-namelist {
    margin: 0;
    padding: 0;
    list-style: none;
}
.city-later li,
.city-series li,
.city-year li,
.city-namelist li {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
}
.city-later li:last-child,
.city-series li:last-child,
.city-year li:last-child,
.city-namelist li:last-child { border-bottom: 0; }
.city-later a,
.city-series a,
.city-year a,
.city-namelist a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.city-later a:hover,
.city-series a:hover,
.city-year a:hover,
.city-namelist a:hover { text-decoration: underline; }
.city-later-date {
    display: inline-block;
    min-width: 6.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.city-series-when,
.city-series-where,
.city-namelist span {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-left: 0.35rem;
}
.city-series-where a { font-weight: 400; }

/* Venue parties: /parties and the Parties section of a city guide, rendered by
   includes/party-list.php. The regular nights are grouped under a day (a guide) or
   a city (/parties); the group label is a paragraph so the heading outline stays
   Parties > Regular nights. */
.party-series-group { margin-bottom: 1.25rem; }
.party-series-label {
    margin: 0.75rem 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.party-summary {
    display: block;
    margin-top: 0.15rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
/* The regular programme (includes/programme-list.php): one line per name and venue,
   with the dates it is next on underneath. */
.programme-venue { margin-bottom: 1.25rem; }
.programme-venue .party-series-label a { color: inherit; }
.programme-dates {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.city-parties-text { margin: 0 0 1rem; line-height: 1.6; max-width: 46rem; }
.city-parties > .city-events-sub:first-of-type { margin-top: 0.5rem; }
.party-pointer {
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--border-radius);
    line-height: 1.6;
}
.party-pointer a { color: var(--primary); font-weight: 600; margin-left: 0.25rem; }
.city-year p { margin: 0 0 0.75rem; line-height: 1.6; max-width: 46rem; }
.city-year li {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
}
.city-year-month {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.city-year-text { display: block; color: var(--text-main); font-size: 0.95rem; }
.city-namelist--after-cards { margin-top: 1.25rem; }
.city-draft-note {
    margin: 1.25rem 0 0;
    padding: 0.6rem 0.9rem;
    border: 1px dashed var(--primary);
    border-radius: 8px;
    font-weight: 600;
}
.city-articles p {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.city-area + .city-area { margin-top: 0.5rem; }
.city-area p,
.city-practical p,
.city-faq p {
    margin: 0 0 0.75rem;
    line-height: 1.65;
    max-width: 46rem;
}
/* A neighbourhood can hold a few dozen names; in columns they read as one block
   instead of a scroll. One column below about 34rem, by the column width alone. */
.city-area .city-namelist {
    margin-bottom: 0.5rem;
    columns: 3 16rem;
    column-gap: 2rem;
}
.city-area .city-namelist li { break-inside: avoid; }

.city-more {
    margin: 1rem 0 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.city-more h2 {
    font-size: 1.15rem;
    margin: 0 0 0.9rem;
}
.city-more ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.city-more a {
    color: var(--text-main);
    font-weight: 600;
    text-decoration: none;
}
.city-more a:hover { color: var(--primary); text-decoration: underline; }
.city-more span {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-left: 0.25rem;
}
.city-more-all { margin: 0.9rem 0 0; }
.city-more-all a { color: var(--primary); }

/* The guide of a venue's or event's city, on venue.php and event.php
   (includes/city-guide-link.php). Two lines, title and teaser, and together no
   taller than the flag: 1.25rem + 1.2rem of line boxes against a 2.5rem flag. The
   teaser therefore stays on one line and ends in an ellipsis where it is longer;
   its title attribute carries the whole sentence. */
.city-guide-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.75rem 0 2rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--border-radius, 12px);
    background: var(--surface);
}
.city-guide-link__flag {
    flex: 0 0 auto;
    width: auto;
    height: 2.5rem;
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--border);
}
.city-guide-link__body { min-width: 0; flex: 1 1 auto; }
.city-guide-link__title {
    display: block;
    font-size: 0.95rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.city-guide-link__title:hover { text-decoration: underline; }
.city-guide-link__teaser {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.2rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   Embedded map (includes/leaflet-map.php, assets/leaflet-map.js)
   ========================================= */
/* isolation keeps Leaflet's own z-indexes, up to 1000 on its controls, inside the
   box, so they can never compete with the header (1100) or the lightbox (2000).
   Fullscreen sits between the two: above the header, below a gallery. */
.lmap {
    position: relative;
    isolation: isolate;
    height: 460px;
    margin: 0 0 2.5rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: #e8eff8;
}
.lmap.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1500;
    height: 100%;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
}
body.has-fullscreen-map { overflow: hidden; }
.lmap-canvas {
    position: absolute;
    inset: 0;
}
.lmap-fullscreen,
.lmap-legend-toggle {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    cursor: pointer;
}
.lmap-fullscreen {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1001;
    padding: 0.4rem 0.8rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.lmap-fullscreen:hover,
.lmap-legend-toggle:hover { background: #f4f4f8; }
.lmap-legend {
    position: absolute;
    left: 10px;
    bottom: 24px;
    z-index: 1001;
    max-width: calc(100% - 20px);
    padding: 0.5rem 0.75rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 0.78rem;
    line-height: 1.6;
    color: #333;
}
.lmap-legend-toggle {
    display: none;
    padding: 0;
    border: 0;
    background: none;
}
.lmap-legend-list {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0 1rem;
    margin: 0 0 0.25rem;
    padding: 0;
    list-style: none;
}
.lmap-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.4rem;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    vertical-align: -1px;
}
.lmap-note {
    margin: 0;
    color: #666;
    font-size: 0.72rem;
}
.lmap-touch-hint {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 1001;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
}
.lmap-touch-hint[hidden] { display: none; }
.lmap-popup { min-width: 180px; max-width: 220px; }
.lmap-popup img {
    display: block;
    width: 100%;
    height: 90px;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    object-fit: cover;
}
.lmap-popup h3 { margin: 0 0 0.2rem; font-size: 0.9rem; line-height: 1.3; }
.lmap-popup-meta { margin-bottom: 0.3rem; font-size: 0.75rem; color: #666; }
.lmap-popup a.lmap-popup-link {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    background: var(--primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}
@media (max-width: 600px) {
    .lmap { height: 320px; }
    .lmap-legend-toggle { display: inline; }
    .lmap-legend.is-collapsed .lmap-legend-body { display: none; }
    .lmap-legend-list { grid-template-columns: auto; }
}

/* The same pills as the country page, centred under the homepage country grid. */
.home-city-guides {
    justify-content: center;
    margin: 1.5rem 0 0;
}

/* =========================================
   City Guides index (city-guides.php)
   ========================================= */
.city-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    gap: 1.25rem;
    margin: 0.5rem 0 2rem;
}
.city-guide-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.4rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    color: var(--text-main);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.city-guide-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.city-guide-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.city-guide-card-head .fi {
    flex: none;
    border-radius: 2px;
}

/* City flags on the guides (city.php, city-guides.php). Rasters of different aspect
   ratios, so the height is fixed and the width follows from the width and height
   attributes. The hairline keeps a flag with white edges, like Berlin's or
   Barcelona's, from dissolving into a white page. */
.city-flag {
    display: block;
    flex: none;
    width: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--border);
}
.city-flag--hero { height: 2.5rem; }
.city-flag--card { height: 1.25rem; }

/* =========================================
   City Guides hero slider (city-guides.php)
   ========================================= */
/* The slider takes the place of .page-hero-photo, so it inherits its aspect ratio,
   radius and shadow; the wrap is the grid child and carries the credit line below. */
.city-slider-wrap { min-width: 0; }
.city-slider {
    position: relative;
    overflow: hidden;
    background: var(--section-tint, oklch(95% 0.01 340));
}
.city-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
}
.city-slide.is-active {
    opacity: 1;
    z-index: 1;
}
.city-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}
/* The drift runs while a slide is shown and keeps running while it fades out, so the
   outgoing photo does not snap back to its starting size halfway through the fade.
   Alternate slides drift the other way, which is what makes a sequence feel like
   one continuous movement rather than the same zoom six times. */
.city-slide.is-active img,
.city-slide.is-leaving img {
    animation: city-slide-drift 9s ease-out forwards;
}
.city-slide:nth-of-type(even).is-active img,
.city-slide:nth-of-type(even).is-leaving img {
    animation-name: city-slide-drift-back;
}
@keyframes city-slide-drift {
    from { transform: scale(1.02) translate(0, 0); }
    to   { transform: scale(1.1) translate(-1.5%, -1%); }
}
@keyframes city-slide-drift-back {
    from { transform: scale(1.1) translate(1.5%, 1%); }
    to   { transform: scale(1.02) translate(0, 0); }
}
.city-slide-name {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    margin: 0;
}
.city-slide-name a,
.city-slider-toggle {
    background: oklch(20% 0.02 315 / 0.62);
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.city-slide-name a {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}
.city-slide-name a:hover { background: var(--primary); }
.city-slider-toggle {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.city-slider-toggle:hover { background: var(--primary); }
.city-slider-toggle:focus-visible,
.city-slide-name a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.city-slider-toggle svg { width: 1rem; height: 1rem; }
.city-slider-toggle .icon-play { display: none; }
.city-slider-toggle[aria-pressed="true"] .icon-pause { display: none; }
.city-slider-toggle[aria-pressed="true"] .icon-play { display: block; }
.city-slider-credit {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted);
    text-align: right;
}
.city-slider-credit a { color: inherit; }
@media (max-width: 760px) {
    /* The single photo moved above the text on a phone; the slider does the same. */
    .city-slider-wrap { order: -1; }
    .city-slider-credit { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .city-slide { transition: none; }
    .city-slide.is-active img,
    .city-slide.is-leaving img {
        animation: none;
        transform: none;
    }
}
.city-guide-card h2 {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.2;
    margin: 0;
}
.city-guide-country {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.city-guide-teaser {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.city-guide-stats {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.city-guide-stats strong { color: var(--text-main); }
@media (prefers-reduced-motion: reduce) {
    .city-guide-card { transition: none; }
    .city-guide-card:hover { transform: none; }
}

.country-section {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}

.country-section-title {
    color: var(--text-main);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.8rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.country-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.country-stat-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.stat-label { color: var(--text-muted); font-size: 0.9rem; }
.stat-number { font-weight: 700; font-size: 1.2rem; color: var(--text-main); }

/* .safety-rating-badge / .safety-stars removed with the hand-set safety
   rating — the Rainbow Index replaced it and needs no rules of its own here. */

.country-title-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.country-flag-icon { font-size: 2.5rem; line-height: 1; }

/* ==================== Country hero (compact, left-aligned) ==================== */
.country-hero {
    padding: 1.5rem 0 0.5rem;
}

.country-hero-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.country-hero-title {
    font-size: clamp(1.875rem, 3vw + 1rem, 2.5rem);
    margin: 0;
    line-height: 1.1;
}

.country-hero .country-title-row {
    justify-content: flex-start;
    margin-bottom: 0;
    gap: 0.875rem;
}

/* ==================== Rights at a glance ==================== */
.country-rights-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 1.75rem 1.75rem 1.25rem;
    margin: 2rem 0 2.5rem;
    box-shadow: var(--shadow-md);
}

/* A note on how venues in this country work, linking the guide (country.php). */
.country-guide-note {
    background: var(--primary-subtle);
    border-left: 4px solid var(--primary-dark);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.5rem;
    margin: 0 0 2rem;
}

.country-guide-note-title {
    font-size: 1.125rem;
    margin: 0 0 0.375rem;
    color: var(--text-main);
}

.country-guide-note p {
    margin: 0;
    line-height: 1.6;
}

.country-guide-note a {
    color: var(--primary-dark);
    font-weight: 600;
}

.rights-header h2 {
    font-size: 1.375rem;
    margin: 0 0 0.375rem;
    color: var(--text-main);
}

.rights-verdict {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.rights-verdict a {
    color: inherit;
}

.rights-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin: 0 0 1.25rem;
    padding: 0.875rem 0 0;
    border-top: 1px solid var(--border);
}

.rights-stats > div {
    display: flex;
    flex-direction: column;
}

.rights-stats dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin: 0;
}

.rights-stats dd {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0.125rem 0 0;
    line-height: 1;
}

.rights-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.5rem 1.5rem;
}

.right-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
}

.right-row:last-child { border-bottom: 0; }

.right-label {
    color: var(--text-main);
    font-size: 0.9375rem;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-chip::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

.status-chip--yes      { background: oklch(95% 0.05 150); color: oklch(38% 0.14 150); }
.status-chip--no       { background: oklch(95% 0.04 25);  color: oklch(44% 0.20 25);  }
.status-chip--partial  { background: oklch(96% 0.05 80);  color: oklch(44% 0.14 70);  }
.status-chip--unknown  { background: var(--section-tint); color: var(--text-muted);   }

.rights-detail {
    margin-top: 1.25rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

/* ==================== Collapsible detail sections ==================== */
.country-detail-sections {
    margin: 2rem 0 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.country-detail,
.rights-detail {
    background: var(--surface);
}

.country-detail {
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
}

.country-detail > summary,
.rights-detail > summary {
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--text-main);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    user-select: none;
}

.country-detail > summary::-webkit-details-marker,
.rights-detail > summary::-webkit-details-marker { display: none; }

.country-detail > summary::after,
.rights-detail > summary::after {
    content: '';
    width: 0.625rem;
    height: 0.625rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.country-detail[open] > summary::after,
.rights-detail[open] > summary::after {
    transform: rotate(-135deg) translateY(-2px);
}

.country-detail > summary:hover,
.rights-detail > summary:hover {
    color: var(--primary);
}

.country-detail[open] > summary {
    border-bottom: 1px solid var(--border);
}

.country-detail .prose,
.rights-detail .prose {
    padding: 1rem 1.25rem 1.25rem;
    line-height: 1.65;
    color: var(--text-main);
    max-width: 72ch;
}

.rights-detail .prose { padding: 0.75rem 0 0; }

@media (max-width: 520px) {
    .country-rights-card { padding: 1.25rem; }
    .rights-grid { grid-template-columns: 1fr; }
}

/* ==================== Article areas: type badge, siblings, paging ==================== */
/* .news-card-editorial was emitted by the old news list but never had a rule —
   external and own items looked identical. Now the type is actually visible. */
.news-card-guide .news-source-badge { background: var(--accent, #e91e8c); }

.article-area-switch {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.article-area-switch a {
    padding: 0.45rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
}
.article-area-switch a:hover { border-color: var(--primary); color: var(--primary); }
.article-area-switch a.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.article-adjacent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}
.article-adjacent-link {
    display: block;
    padding: 1rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
}
.article-adjacent-link:hover { border-color: var(--primary); }
.article-adjacent-link.is-prev { text-align: right; }
.article-adjacent-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.article-adjacent-title { color: var(--text); font-weight: 600; line-height: 1.35; }

.article-related { margin-top: 3rem; }
.article-related-title { font-size: 1.4rem; margin-bottom: 1.2rem; }

.pagination-pages { display: inline-flex; gap: 0.35rem; align-items: center; }
.pagination-pages a,
.pagination-current {
    min-width: 2rem;
    padding: 0.35rem 0.55rem;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    text-decoration: none;
}
.pagination-pages a:hover { border-color: var(--primary); color: var(--primary); }
.pagination-current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* === Partner page ==================================================== */

.partner-intro { max-width: 70ch; color: var(--text-muted); }

.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    align-items: start;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.partner-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
}
/* A wordmark and a square picture have to share one row, so the logo box has a
   fixed height and the image is contained rather than cropped. */
.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    padding: 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--border);
}
.partner-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.partner-body { padding: 1.1rem 1.25rem 1.35rem; }
.partner-name { font-size: 1.15rem; margin: 0 0 0.2rem; }
.partner-name a { text-decoration: none; color: var(--text-main); }
.partner-name a:hover { color: var(--primary); }
.partner-country {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    margin-bottom: 0.5rem;
}
.partner-desc { margin: 0; font-size: 0.95rem; color: var(--text-muted); }

.linkus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    align-items: start;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.linkus-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 1rem 1.1rem 1.15rem;
}
.linkus-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.linkus-head span { font-size: 0.8rem; color: var(--text-muted); }
.linkus-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    padding: 0.5rem 0;
}
.linkus-row + .linkus-row { border-top: 1px solid var(--border); }
/* The previews are the real banners, so they are capped by width instead of
   being given a size that would misrepresent what gets downloaded. */
.linkus-preview { max-width: min(190px, 100%); height: auto; border-radius: 4px; }
.linkus-links { font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }
.linkus-links a { margin-left: 0.4rem; font-weight: 600; }

.linkus-code {
    background: var(--section-tint);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 1rem 1.1rem;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.6;
}
.linkus-code + .partner-intro { margin-top: 1.25rem; }

/* Two ways of linking to us sit under one heading, so they need a level
   between .section-title and the cards. */
.linkus-sub {
    margin: 2.25rem 0 0.4rem;
    font-size: 1.2rem;
    font-weight: 700;
}

/* === Navigation: collapse point ======================================
   Ten items no longer fit next to the logo below 1250px. "Partners" and
   "Contact" ran off the right edge at 1024px. The hamburger already exists
   and is toggled by class, so this range gets the same treatment as mobile
   without moving the site-wide 768px breakpoint, which carries far more
   than the nav. */
/* Between the burger range below and 1400 px the full navigation only just fits
   the container beside the logo: measured on 2026-09-11 with eleven items, it was
   14 px too wide at 1280 and 29 px at 1250. A tighter gap in this range takes 80 px
   off. Extended past 1400 px on 2026-09-19: the "lgbtq-friendly" tagline needs its
   own extra width (see .logo-tagline below) and the wider gap above 1400 px left
   none, so the tagline and "Categories" overlapped there. The narrower gap costs
   nothing above 1400 px either, since .nav-container is capped at
   --container-width and the layout does not change further as the viewport grows.
   Adding a twelfth nav item means measuring again from 1250 px up. */
@media (min-width: 1250px) {
    .nav-links { gap: var(--spacing-md); }
}

@media (min-width: 769px) and (max-width: 1249px) {
    .logo-tagline { display: none; }

    .mobile-menu-btn {
        display: block;
        color: var(--text-main);
        margin-left: auto;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--surface);
        flex-direction: column;
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
        border-top: 1px solid var(--border);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        z-index: 2000;
    }
    .nav-links.active { display: flex; }

    .nav-links a {
        display: block;
        padding: 1rem;
        border-radius: 8px;
        background: var(--section-tint);
        color: var(--text-main);
        font-weight: 600;
    }
    .nav-links a:active,
    .nav-links a:hover { background: var(--primary); color: white; }
}

/* Fehler melden und Venue vorschlagen */
.report-hint {
    max-width: var(--container-width);
    margin: 2rem auto 1.5rem;
    padding: 0 var(--spacing-md);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.hint-form {
    max-width: 600px;
    margin: 2.5rem auto;
}

.hint-form h1 {
    margin-bottom: 0.75rem;
}

.hint-form__intro {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

.hint-form__more {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.hint-field {
    margin-bottom: 1.25rem;
}

.hint-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.hint-field input,
.hint-field select,
.hint-field textarea {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font: inherit;
    color: inherit;
    background: transparent;
}

.hint-field select option {
    color: #111;
}

.hint-field small {
    display: block;
    margin-top: 0.3rem;
    color: var(--text-muted);
}

.hint-alert {
    padding: 0.9rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.25rem;
}

.hint-alert--error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.hint-alert--ok {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* =========================================
   Languages (multilingual-plan.md, since 2026-11-06)
   Switcher at the end of the navigation, the "EN" marker on a link that
   leads to an English page, and the one-line notice on such a page.
   None of it is rendered while no language is live.
   ========================================= */
/* The slim bar above the header: Search, Partners, languages. Since 2026-11-06. */
.topbar {
    background: var(--section-tint);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
}
.topbar-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
}
.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    padding: 0.2rem 0;
}
.topbar-link:hover,
.topbar-link.is-active {
    color: var(--primary-dark);
}
.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: var(--spacing-md);
    border-left: 1px solid var(--border);
}
.lang-switch-item {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    line-height: 1;
    color: var(--text-muted);
    text-decoration: none;
}
a.lang-switch-item:hover {
    color: var(--primary-dark);
    background: var(--primary-subtle);
}
.lang-switch-item.is-current {
    color: var(--primary-dark);
    background: var(--primary-subtle);
}
.lang-switch-item.is-missing {
    color: var(--text-muted);
    opacity: 0.45;
    cursor: help;
}
.lang-en-marker {
    display: inline-block;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.1em 0.35em;
    margin-left: 0.3em;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: 0.6;
    vertical-align: 0.15em;
}
.lang-notice {
    background: var(--primary-subtle);
    color: var(--primary-dark);
    text-align: center;
    font-size: 0.9rem;
    padding: 0.55rem 1rem;
}
.lang-notice a {
    color: inherit;
    font-weight: 600;
    margin-left: 0.4em;
}
/* Under an operator's own text on a venue page (multilingual-plan.md). */
.operator-note {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.lang-section-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0.75rem;
}
.lang-section-note::before {
    content: "EN";
    display: inline-block;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.1em 0.35em;
    margin-right: 0.5em;
    border: 1px solid currentColor;
    border-radius: 3px;
    vertical-align: 0.1em;
}