/**
 * 2026 visual theme overrides for "Schalt Kreis Symposium".
 *
 * This file is loaded by `schalt-kreis.de/index.html` *after*
 * `2025/css/styles.css` to selectively override the 2025 baseline theme.
 *
 * Design goal:
 * - "Network segment / troubleshooting" vibe (subtle grid + data-cable feel)
 * - Keep the existing layout classes (Bootstrap + styles.css)
 * - Stay static: no JS required for the visual layer
 */

/* =========
   Theme colors
   =========
   The original site uses CSS variables defined in `2025/css/styles.css`.
   We override the subset that is most visible for the hero, buttons and backgrounds.
*/
:root {
    /**
     * Main symposium palette.
     * Use deep blues as the "network core", bright cyan as the "signal", and a slightly warmer
     * background so cards and sections remain readable.
     */
    --symposium-dark: #06192b;     /* almost-black network core */
    --symposium-medium: #0a3d66;   /* packet lane */
    --symposium-light: #0e6ea8;    /* active link */
    --symposium-accent: #19d3ff;   /* signal glow */
    /* Darken the general background: the original override looked too "washed out". */
    --symposium-bg: #b8dcff;       /* calmer "diagnostic canvas" */

    /**
     * The 2025 "circuit" UI (buttons, badges) is implemented using the Auwerkfest variables.
     * Re-mapping them keeps the same clip-path/button artwork but changes the look to match 2026.
     */
    --auwerkfest-primary: #19d3ff;   /* cyan */
    --auwerkfest-secondary: #38ffb4; /* green "healthy link" */
    --auwerkfest-light: #e7fff6;
    --auwerkfest-bg: #dbfbff;

    /* Text + neutrals: keep high contrast and gentle grays. */
    --text-dark: #0f2333;
    --text-light: #ffffff;
    --gray-light: #f0f8ff;
}

/* ==========================
   Option 2: Terminal typography
   ==========================
   Override the 2025 UI font to a monospace/terminal feel.
*/
body {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    letter-spacing: 0.01em;
}

/* Make headings feel "typed" instead of "designed". */
.section-heading,
.timeline-content h3,
.timeline-date .day,
.event-title {
    letter-spacing: 0.02em;
}

/* Option 1 (partial): decouple hero from the original image look. */
.hero-section {
    background-image: none !important;
    background-color: var(--symposium-dark);
}

/* ==========================
   Hero: subtle network texture
   ==========================
   The base theme already overlays a dark readability layer via `::before`.
   We add an additional `::after` grid + scanning drift to suggest packets moving.
*/
.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;

    /* Layer 0: scanlines (horizontal interference). */
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.20) 0px,
            rgba(0, 0, 0, 0.20) 1px,
            rgba(0, 0, 0, 0) 3px,
            rgba(0, 0, 0, 0) 6px
        ),
        /* Layer 1: diagonal "cable" stripes. */
        repeating-linear-gradient(
            45deg,
            rgba(25, 211, 255, 0.10) 0px,
            rgba(25, 211, 255, 0.10) 6px,
            rgba(0, 0, 0, 0) 6px,
            rgba(0, 0, 0, 0) 18px
        ),
        /* Layer 2: rectangular grid (packet map). */
        repeating-linear-gradient(
            to right,
            rgba(25, 211, 255, 0.22) 0px,
            rgba(25, 211, 255, 0.22) 1px,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 0, 0, 0) 32px
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(56, 255, 180, 0.18) 0px,
            rgba(56, 255, 180, 0.18) 1px,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 0, 0, 0) 32px
        );

    /*
     * Slightly higher contrast for a more "glitchy / laser lab" vibe.
     * Keep opacity < 1 so the hero text remains readable.
     */
    opacity: 0.92;
    mix-blend-mode: screen;
    pointer-events: none;

    /* Place the texture under the container but above the background image. */
    z-index: 1;

    /* Subtle drift to feel "alive" while remaining static-ish. */
    /* We have 4 background layers now (scanlines + 3 network layers). */
    background-size: auto, auto, auto, auto;
    animation: sksGridDrift 9s linear infinite;
}

@keyframes sksGridDrift {
    0% {
        background-position:
            0px 0px,
            0px 0px,
            0px 0px;
    }
    100% {
        background-position:
            0px 26px,
            80px 40px,
            64px 0px,
            0px 48px;
    }
}

/* Slightly strengthen the readability overlay for the hero title. */
.hero-section::before {
    background-color: rgba(6, 25, 43, 0.74);
}

/* ==========================
   Primary CTA: hero + tickets (`.sks-cta-button`)
   ==========================
   The global `.circuit-button` uses a diagonal clip-path and decorative “nodes” from the
   legacy Auwerkfest styling. For 2026 we use a *light* panel so it clearly separates from
   the dark hero; the same control is reused on the tickets section (on light page bg).
   Apply `sks-cta-button` without `circuit-button` where no clip-path override is needed.
 */
.hero-section .circuit-button.sks-cta-button,
a.sks-cta-button {
    clip-path: none;
    border-radius: 0.5rem;
    min-width: 14rem;
    padding: 0.85rem 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    /* Light “signal” surface: reads like the frosted cards on the page, pops on navy hero. */
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(230, 248, 255, 0.94) 100%
    );
    border: 2px solid rgba(25, 211, 255, 0.65);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 6px 24px rgba(0, 0, 0, 0.35),
        0 0 32px rgba(25, 211, 255, 0.35);

    color: var(--symposium-dark);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

/* Hide legacy circuit decorations (dots + trace lines) on the hero button only. */
.hero-section .circuit-button.sks-cta-button::before,
.hero-section .circuit-button.sks-cta-button::after {
    display: none;
    content: none;
}

.hero-section .circuit-button.sks-cta-button:hover,
a.sks-cta-button:hover {
    color: var(--symposium-dark);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(215, 244, 255, 0.98) 100%
    );
    border-color: rgba(56, 255, 180, 0.75);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 8px 28px rgba(0, 0, 0, 0.38),
        0 0 40px rgba(56, 255, 180, 0.35);
}

.hero-section .circuit-button.sks-cta-button:focus-visible,
a.sks-cta-button:focus-visible {
    color: var(--symposium-dark);
    outline: 3px solid var(--symposium-medium);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-section .circuit-button.sks-cta-button,
    a.sks-cta-button {
        transition: none;
    }
}

/* ===========================================
   Tickets section (`#tickets`): tier cards + solidarity note
   ===========================================
   Replaces legacy `.ticket-info` / `.ticket-badge` from `styles.css` on the 2026 index.
*/
.sks-ticket-card.sks-venue-card {
    display: flex;
    flex-direction: column;
}

.sks-ticket-card__price {
    margin: 0 0 0.5rem;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--symposium-medium);
    line-height: 1.1;
}

.sks-ticket-card__action {
    margin-top: auto;
    padding-top: 0.35rem;
    text-align: center;
}

/* Full-width CTA inside narrow columns on small screens */
.sks-ticket-card__action .sks-cta-button {
    width: 100%;
    max-width: 18rem;
    min-width: 0;
    box-sizing: border-box;
}

.sks-tickets-solidarity {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-dark);
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.sks-tickets-solidarity a {
    color: var(--symposium-medium);
    font-weight: 700;
    text-underline-offset: 0.15em;
}

/* ==========================
   Glitch typography (Hero)
   ==========================
   Keep it readable by using small jitter + colored text-shadow
   during short interference windows.
*/
.hero-section #main-content,
.hero-section .subtitle,
.hero-section .display-6 {
    position: relative;
    animation: sksHeroGlitch 6.5s infinite;
}

@keyframes sksHeroGlitch {
    0%, 88%, 100% {
        text-shadow: none;
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    89% {
        text-shadow:
            -1px 0 rgba(25, 211, 255, 0.55),
            2px 0 rgba(56, 255, 180, 0.42);
        transform: translate3d(-1px, 0, 0) skewX(-8deg);
        opacity: 0.98;
    }
    90% {
        text-shadow:
            1px 0 rgba(56, 255, 180, 0.45),
            -2px 0 rgba(25, 211, 255, 0.55);
        transform: translate3d(1px, 0, 0) skewX(8deg);
        opacity: 0.96;
    }
    91% {
        text-shadow:
            0px 1px rgba(25, 211, 255, 0.35),
            0px -1px rgba(56, 255, 180, 0.35);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* =========================================================
   Static-ish text glitch for any element with `data-glitch`
   =========================================================
   We render colored "ghost copies" of the text via pseudo-elements
   and slice them using `clip-path`. This produces a real
   text-level glitch effect without requiring extra HTML spans.
*/
[data-glitch] {
    position: relative;
    z-index: 2; /* keep pseudo-elements behind only when layered */
    /* Ensure pseudo elements inherit font rendering. */
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

[data-glitch]::before,
[data-glitch]::after {
    content: attr(data-glitch);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;

    /* We rely on clip-path to show only slices of the text. */
    clip-path: inset(0 0 0 0);

    /* Keep the ghosts behind the original text. */
    z-index: -1;

    /* Prevent pointer interaction issues on overlays. */
    pointer-events: none;

    /* Smoothness in case of low DPI. */
    transform: translateZ(0);
}

[data-glitch]::before {
    color: rgba(25, 211, 255, 0.85);
    transform: translate(2px, 0);
    text-shadow:
        -1px 0 rgba(25, 211, 255, 0.45),
        0 0 16px rgba(25, 211, 255, 0.12);

    animation: sksTextGhostSliceA 7s steps(7) infinite;
}

[data-glitch]::after {
    color: rgba(56, 255, 180, 0.72);
    transform: translate(-2px, 0);
    text-shadow:
        1px 0 rgba(56, 255, 180, 0.35),
        0 0 14px rgba(56, 255, 180, 0.10);

    animation: sksTextGhostSliceB 8s steps(8) infinite;
}

@keyframes sksTextGhostSliceA {
    0% {
        clip-path: inset(10% 0 70% 0);
        opacity: 0.55;
    }
    15% {
        clip-path: inset(45% 0 35% 0);
        opacity: 0.70;
    }
    30% {
        clip-path: inset(70% 0 15% 0);
        opacity: 0.50;
    }
    45% {
        clip-path: inset(25% 0 55% 0);
        opacity: 0.65;
    }
    60% {
        clip-path: inset(55% 0 25% 0);
        opacity: 0.60;
    }
    75% {
        clip-path: inset(5% 0 80% 0);
        opacity: 0.45;
    }
    100% {
        clip-path: inset(10% 0 70% 0);
        opacity: 0.55;
    }
}

@keyframes sksTextGhostSliceB {
    0% {
        clip-path: inset(65% 0 15% 0);
        opacity: 0.50;
    }
    12% {
        clip-path: inset(30% 0 55% 0);
        opacity: 0.65;
    }
    24% {
        clip-path: inset(15% 0 70% 0);
        opacity: 0.55;
    }
    36% {
        clip-path: inset(50% 0 30% 0);
        opacity: 0.68;
    }
    48% {
        clip-path: inset(75% 0 10% 0);
        opacity: 0.52;
    }
    60% {
        clip-path: inset(40% 0 45% 0);
        opacity: 0.60;
    }
    72% {
        clip-path: inset(8% 0 76% 0);
        opacity: 0.48;
    }
    100% {
        clip-path: inset(65% 0 15% 0);
        opacity: 0.50;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section::after {
        animation: none;
    }
    .hero-section #main-content,
    .hero-section .subtitle,
    .hero-section .display-6 {
        animation: none;
    }

    [data-glitch]::before,
    [data-glitch]::after {
        animation: none;
        clip-path: inset(0 0 0 0);
        opacity: 0.30;
    }
}

/* =====================
   General section tuning
   =====================
*/
.section-heading {
    letter-spacing: 0.01em;
}

/* =============================
   Program section (`#schedule`): timeline as light cards
   =============================
   Matches `.sks-venue-card` on the About section: frosted white panel, cyan border,
   dashed rule under the day title. The vertical spine stays visible but softer than
   the old neon-on-dark look (2026 index only — `sks-2026.css` is not loaded on 2025 pages).
*/
/* Same max width as before (overrides legacy 800px from `styles.css`). */
#schedule .timeline {
    max-width: 920px;
    margin: 3rem auto;
}

/* Vertical guide: subtle gradient, no glow (keeps rhythm with section background). */
#schedule .timeline::before {
    left: 120px;
    width: 3px;
    background: linear-gradient(
        180deg,
        rgba(25, 211, 255, 0.0),
        rgba(25, 211, 255, 0.35),
        rgba(56, 255, 180, 0.30),
        rgba(25, 211, 255, 0.0)
    );
    box-shadow: none;
}

#schedule .timeline-item {
    margin-bottom: 2.6rem;
}

/* Card shell: same language as `.sks-venue-card` */
#schedule .timeline-content {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(25, 211, 255, 0.28);
    border-radius: 0.75rem;
    box-shadow:
        0 10px 28px rgba(6, 25, 43, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    color: var(--text-dark);
    padding: 1.15rem 1.25rem 1.35rem;
}

/* Connector tab from the spine into the card */
#schedule .timeline-content::before {
    background-color: var(--symposium-medium);
    opacity: 1;
}

/*
 * Day title: dashed separator below (like `.sks-venue-card__title`), sentence case for long titles.
 */
#schedule .timeline-content h3 {
    margin-top: 0;
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(25, 211, 255, 0.35);
    color: var(--symposium-dark);
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: none;
}

#schedule .timeline-content p {
    color: var(--text-dark);
}

#schedule .special-day-note {
    color: var(--text-dark);
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px dashed rgba(25, 211, 255, 0.28);
    border-radius: 0.5rem;
}

/* Date column: readable on light page bg */
#schedule .timeline-date .day {
    color: var(--symposium-dark);
    text-shadow: none;
}

#schedule .timeline-date .weekday {
    color: var(--gray-dark);
}

#schedule .timeline-events li {
    color: var(--text-dark);
    border-bottom-color: rgba(25, 211, 255, 0.22);
}

#schedule .event-time {
    color: var(--symposium-medium);
    text-shadow: none;
}

#schedule .event-title {
    color: var(--symposium-dark);
}

#schedule .event-desc {
    color: var(--gray-dark);
}

/* Co-creation callout: light panel, same accent border as elsewhere */
#schedule .co-creation-hint {
    background-color: rgba(255, 255, 255, 0.55);
    border-left: 3px solid var(--auwerkfest-secondary);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

#schedule .co-creation-hint p {
    color: var(--text-dark);
}

/* Align width with `.timeline` above (footnote was full container width by default). */
#schedule .program-footnote {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 0.75rem;
    border: 1px solid rgba(25, 211, 255, 0.28);
    box-shadow:
        0 10px 28px rgba(6, 25, 43, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#schedule .program-footnote .footnote-text {
    color: var(--symposium-dark);
}

#schedule .program-footnote p {
    color: var(--gray-dark);
}

/* ===========================================
   Routing lines across symposium sections
   ===========================================
   Adds a "packet route" line at the top of each section.
   This is CSS-only motion to support the glitch-chaos direction.
*/
.symposium-section {
    position: relative;
    isolation: isolate; /* keep overlays from affecting children stacking */
}

.symposium-section > .container {
    position: relative;
    z-index: 1;
}

.symposium-section::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    left: 0;
    right: 0;
    height: 2px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(25, 211, 255, 0.0) 0px,
            rgba(25, 211, 255, 0.40) 10px,
            rgba(56, 255, 180, 0.35) 20px,
            rgba(25, 211, 255, 0.0) 30px
        );

    opacity: 0.85;
    pointer-events: none;

    transform: skewX(-12deg);
    z-index: 0;

    animation: sksRouteShift 4.5s linear infinite;
}

@keyframes sksRouteShift {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 120px 0px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .symposium-section::before {
        animation: none;
    }
}

/* =======================================
   Impressions grid + Bootstrap modal lightbox
   =======================================
   Thumbnails use `.impression-grid`; full image opens in `#impressionLightbox` via
   `js/sks-impression-lightbox.js`. Hover motion was removed (same policy as `.sks-venue-card`).
*/
.impression-grid {
    margin-top: 0.5rem;
}

.impression-grid a {
    display: block;
    position: relative;
    border-radius: 0.7rem;
    overflow: hidden;

    border: 1px solid rgba(25, 211, 255, 0.22);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 10px 30px rgba(6, 25, 43, 0.08);
    cursor: zoom-in;
}

.impression-grid img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transform: translateZ(0);
    display: block;
}

/* Dark modal shell aligned with `.footer` / hero palette */
.sks-impression-lightbox__dialog {
    max-width: min(1100px, 96vw);
}

.sks-impression-lightbox__content {
    overflow: hidden;
    background: linear-gradient(180deg, rgba(6, 25, 43, 0.98), #031220);
    border: 1px solid rgba(25, 211, 255, 0.35);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.sks-impression-lightbox__header {
    border-bottom: 1px dashed rgba(25, 211, 255, 0.28);
}

.sks-impression-lightbox__header .modal-title {
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.02em;
}

.sks-impression-lightbox__body {
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
}

.sks-impression-lightbox__img {
    max-height: min(85vh, 900px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 0.35rem;
}

@media (max-width: 991.98px) {
    .sks-impression-lightbox__dialog.modal-xl {
        max-width: 100%;
        margin: 0.5rem;
    }
}

/* ===========================================
   About section: venue feature cards (2026)
   ===========================================
   The `#about` block uses a light page background; cards get a frosted panel
   look with cyan "signal" borders to stay consistent with `.impression-grid`.
*/
.sks-about-venue {
    /* Slight separation from the intro paragraph column above */
    padding-top: 0.25rem;
}

.sks-about-venue__lead {
    font-size: clamp(1.15rem, 2.5vw, 1.45rem);
    font-weight: 700;
    color: var(--symposium-dark);
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}

.sks-venue-card {
    position: relative;
    border-radius: 0.75rem;
    padding: 1.15rem 1.25rem 1.35rem;

    /* Light panel on the blue-tinted section background */
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(25, 211, 255, 0.28);
    box-shadow:
        0 10px 28px rgba(6, 25, 43, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.sks-venue-card__title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--symposium-medium);
    margin-top: 0;
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(25, 211, 255, 0.35);
}

.sks-venue-card__list {
    margin: 0;
    padding-left: 1.1rem;
    text-align: left;
    color: var(--text-dark);
    font-size: 0.92rem;
    line-height: 1.55;
}

.sks-venue-card__list li {
    margin-bottom: 0.45rem;
}

.sks-venue-card__list li:last-child {
    margin-bottom: 0;
}

.sks-venue-card__list strong {
    color: var(--symposium-dark);
    font-weight: 700;
}

/**
 * Short paragraph inside a venue card (used on `#location` transport tiles).
 * Keeps typography aligned with `.sks-venue-card__list` without list bullets.
 */
.sks-venue-card__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-dark);
}

/**
 * Mailing address block: reset default italic from `<address>`.
 */
.sks-venue-card__address {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    line-height: 1.55;
    font-style: normal;
    color: var(--text-dark);
}

/**
 * Horizontal keyword chips below the address (flex list, no bullets).
 */
.sks-venue-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0;
}

.sks-badge-pill {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-light);
    background: linear-gradient(180deg, var(--symposium-medium), var(--symposium-dark));
    border: 1px solid rgba(25, 211, 255, 0.28);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

/* ===========================================
   Location section (`#location`, 2026 index)
   ===========================================
   Tighter vertical rhythm than default `.section`, reuses `.sks-venue-card` for a
   single visual system with the "Über uns" venue grid. Map height is reduced vs.
   the legacy 300px embed to keep the fold compact.
*/
.sks-location-section.section {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
}

.sks-location__subheading {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    font-weight: 700;
    color: var(--symposium-dark);
    margin: 1.35rem 0 0.65rem;
    letter-spacing: 0.02em;
}

.sks-location-map-wrap {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(25, 211, 255, 0.22);
    background: rgba(6, 25, 43, 0.06);
}

.sks-location-map-embed {
    display: block;
    width: 100%;
    height: 220px;
    border: 0;
    vertical-align: middle;
}

.sks-location-map-foot {
    margin-top: 0.45rem;
    font-size: 0.78rem;
}

.sks-location-map-card .sks-venue-card__title {
    margin-bottom: 0.55rem;
}

/* ===========================================
   About section: participation callout (2026)
   ===========================================
   Sits below venue cards; visually linked but lighter than `.sks-venue-card`
   so the section does not feel like a fourth duplicate "card".
*/
.sks-about-contribution {
    padding: 1.25rem 1rem 0;
    border-top: 1px dashed rgba(25, 211, 255, 0.35);
}

.sks-about-contribution__title {
    font-size: clamp(1.2rem, 2.6vw, 1.5rem);
    font-weight: 700;
    color: var(--symposium-dark);
    margin-bottom: 0.85rem;
    letter-spacing: 0.02em;
}

/* ===========================================
   Supporters strip (after Wiki on 2026 index)
   ===========================================
   No `bg-light` here: alternates visually with the Wiki section above (which uses
   Bootstrap `bg-light`). Logo sizing is centralized here instead of inline styles.
   Grayscale default + color on `:hover` / `:focus-visible` are in `2025/css/styles.css`
   (`.supporter-link` / `.supporter-logo`).
   Markup uses a four-column `lg` grid (`col-lg-3`) for partner logos.
*/
.sks-supporters-section .supporter-logo {
    max-height: 80px;
    width: auto;
    max-width: 100%;
    height: auto;
}

/* ===========================
   Make the footer feel "wired"
   =========================== */
.footer {
    background: linear-gradient(180deg, var(--symposium-dark), #031220);
}

/*
 * Legal links in `.copyright`: Bootstrap’s default `a` color reads as “link blue”.
 * Match `.navbar-dark .navbar-nav .nav-link` (muted white + semibold) for consistency.
 */
.footer .copyright a {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    text-decoration: none;
}

.footer .copyright a:hover {
    color: var(--text-light);
}

.footer .copyright a:focus-visible {
    outline: 2px solid var(--symposium-light);
    outline-offset: 2px;
}

/*
 * Archive link in the middle footer column: must read as a link (not plain headline text).
 * Slightly brighter than body copy + dashed underline in the cyan “signal” family.
 */
.footer a.sks-footer-archive-link {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: rgba(25, 211, 255, 0.55);
    text-underline-offset: 0.2em;
}

.footer a.sks-footer-archive-link:hover {
    color: var(--text-light);
    text-decoration-color: var(--symposium-accent);
}

.footer a.sks-footer-archive-link:focus-visible {
    outline: 2px solid var(--symposium-light);
    outline-offset: 3px;
}

/* ===========================================
   Fixed navbar (2026 index only: `body.sks-2026`)
   ===========================================
   At the top of the page the bar stays transparent so the hero stays open. After a
   small scroll, `js/sks-2026-nav.js` adds `.navbar-scrolled`; we then match the dark
   footer stack for contrast and readability over light sections.
*/
body.sks-2026 .navbar {
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

body.sks-2026 .navbar.navbar-scrolled {
    background: linear-gradient(180deg, var(--symposium-dark), #031220);
    border-bottom: 2px solid var(--symposium-light);
    box-shadow: 0 4px 18px rgba(6, 25, 43, 0.45);
}

/**
 * Mobile: when the collapse is open on a light section, links must stay readable.
 * Sub-panel uses the same dark family as the scrolled bar (only below `lg` breakpoint).
 */
@media (max-width: 991.98px) {
    body.sks-2026 .navbar-collapse {
        margin-top: 0.5rem;
        padding: 0.65rem 0.85rem;
        border-radius: 0.5rem;
        border: 1px solid rgba(25, 211, 255, 0.22);
        background: rgba(6, 25, 43, 0.94);
    }

    /* When the bar has already switched to scrolled state, avoid double-stacking visuals. */
    body.sks-2026 .navbar.navbar-scrolled .navbar-collapse {
        background: transparent;
        border: none;
        padding: 0;
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sks-2026 .navbar {
        transition: none;
    }
}

/* ===================================
   Anchor offset for fixed navigation
   ===================================
   The navbar uses `fixed-top`, so anchor jumps can hide section headings.
   This matches the inline rule previously present in the 2026 index.
*/
header,
section {
    scroll-margin-top: 92px;
}