/* =============================================================================
   Wanderrudergesellschaft "Die Wikinger" e.V. — design system

   The palette is taken from the club's existing site, not invented:
     #0000A9  the club blue (was body text/link colour)
     #FF7700  the club orange accent
     #DDDDDD  the legacy page grey, kept as a deep paper tone
     #F6F6F6  the legacy panel grey
     Trebuchet MS, the club's typeface, kept for headings

   Contrast was measured rather than assumed:
     club blue on white ........ 13.35:1  ✓ body text and links
     ink on club orange ........  7.10:1  ✓ primary button
     club orange on white ......  2.66:1  ✗ never text on light
     white on club orange ......  2.66:1  ✗ never a white label on orange
     orange on deep navy .......  6.26:1  ✓ accent on dark sections
   So orange is a *surface* and an accent, never a foreground colour on light.

   Everything here is prefixed wik- so Bootstrap keeps driving the member and
   authoring screens untouched.
   ============================================================================= */

:root {
    /* --- brand ------------------------------------------------------------ */
    --wik-blue: #0000a9;
    --wik-blue-mid: #2222a9;
    --wik-blue-soft: #4444a9;
    --wik-navy: #0b1a4a;
    --wik-navy-deep: #071232;
    --wik-orange: #ff7700;
    --wik-orange-ink: #b85600; /* the one orange that passes as text on white */

    /* --- neutrals --------------------------------------------------------- */
    --wik-ink: #111111;
    --wik-muted: #4a4a4a;
    --wik-paper: #f6f6f6;
    --wik-paper-deep: #dddddd;
    --wik-line: #d3d6e4;
    --wik-white: #ffffff;

    /* --- type ------------------------------------------------------------- */
    --wik-display: "Trebuchet MS", "Lucida Grande", "Segoe UI", sans-serif;
    --wik-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* --- rhythm ----------------------------------------------------------- */
    --wik-measure: 68ch;
    --wik-shell: 76rem;
    --wik-gap: clamp(1rem, 2.5vw, 2rem);
    --wik-section: clamp(3rem, 7vw, 6rem);
    --wik-radius: 4px; /* restrained: a club, not a consumer app */
    --wik-shadow: 0 1px 2px rgb(11 26 74 / 8%), 0 8px 24px rgb(11 26 74 / 8%);
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    /* Column flex plus a growing <main> keeps the footer on the bottom edge of short pages
       (404, Impressum, an empty list) instead of leaving it floating mid-screen.
       dvh first so a mobile address bar does not add a scrollable sliver. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--wik-body);
    color: var(--wik-ink);
    background: var(--wik-white);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
    font-family: var(--wik-display);
    color: var(--wik-navy);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* Fluid scale: readable on a phone, confident on a desktop. */
.wik-h1 { font-size: clamp(2.25rem, 6vw, 4.25rem); }
.wik-h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.wik-h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

a { color: var(--wik-blue); }

/* Focus must always be obvious — it is the keyboard user's cursor. The exclusion is for
   FocusOnNavigate, which parks focus on the routed <h1> via tabindex="-1"; that element is not
   keyboard-reachable, so a ring there is noise rather than guidance. */
:focus-visible:not([tabindex="-1"]) {
    outline: 3px solid var(--wik-orange);
    outline-offset: 2px;
}

/* Chrome counts programmatic focus as focus-visible, so excluding the rule above only revealed
   the browser's own default ring. Suppress it outright: these elements exist solely so the router
   can move screen-reader focus to the new page heading, and are never reached by Tab. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Hidden with clip-path rather than a big negative offset: the old technique pushed the
   scrollable area out and showed up as horizontal overflow. */
.wik-skip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background: var(--wik-white);
    color: var(--wik-blue);
    padding: 0.75rem 1rem;
    clip-path: inset(50%);
}

.wik-skip:focus {
    clip-path: none;
}

/* Takes the slack, so the footer is pushed to the bottom when content is short. */
main {
    flex: 1 0 auto;
}

.wik-shell {
    max-width: var(--wik-shell);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.wik-measure { max-width: var(--wik-measure); }

.wik-lede {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    color: var(--wik-muted);
}

/* Eyebrow label above a heading. Uppercase is fine here: it is 2–4 words. */
.wik-eyebrow {
    font-family: var(--wik-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wik-orange-ink);
    margin: 0 0 0.5rem;
}

/* -----------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.wik-section { padding-block: var(--wik-section); }
.wik-section--paper { background: var(--wik-paper); }

.wik-section--navy {
    background: var(--wik-navy);
    color: #e8ecf7;
}

.wik-section--navy h2,
.wik-section--navy h3 { color: var(--wik-white); }
.wik-section--navy .wik-eyebrow { color: var(--wik-orange); }
.wik-section--navy .wik-lede { color: #c3cbe4; }

.wik-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--wik-gap);
    margin-bottom: calc(var(--wik-gap) * 1.5);
}

/* -----------------------------------------------------------------------------
   Buttons — dark ink on orange for the primary action (7.10:1)
   -------------------------------------------------------------------------- */

.wik-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--wik-display);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.85rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--wik-radius);
    cursor: pointer;
    transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.wik-btn:hover { transform: translateY(-1px); }

.wik-btn--primary {
    background: var(--wik-orange);
    color: var(--wik-ink);
    border-color: var(--wik-orange);
}

.wik-btn--primary:hover { background: #ff8b26; }

.wik-btn--secondary {
    background: transparent;
    color: var(--wik-blue);
    border-color: var(--wik-blue);
}

.wik-btn--secondary:hover { background: rgb(0 0 169 / 6%); }

/* On navy, the outline button needs a light border to stay visible. */
.wik-section--navy .wik-btn--secondary,
.wik-hero .wik-btn--secondary {
    color: var(--wik-white);
    border-color: rgb(255 255 255 / 70%);
}

.wik-section--navy .wik-btn--secondary:hover,
.wik-hero .wik-btn--secondary:hover { background: rgb(255 255 255 / 12%); }

.wik-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* A text link that reads as an action. */
.wik-more {
    font-family: var(--wik-display);
    font-weight: 700;
    text-decoration: none;
    color: var(--wik-blue);
    border-bottom: 2px solid var(--wik-orange);
    padding-bottom: 2px;
}

.wik-more:hover { color: var(--wik-orange-ink); }
.wik-section--navy .wik-more { color: var(--wik-white); }

/* -----------------------------------------------------------------------------
   Photography slots
   Real photographs are the point; until they exist, a slot states what belongs
   there rather than pretending with stock imagery.
   -------------------------------------------------------------------------- */

.wik-photo {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--wik-navy);
    border-radius: var(--wik-radius);
}

.wik-photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The revier map: an OSM embed wearing the same frame as a photograph. */
.wik-map {
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    aspect-ratio: auto;
}

.wik-map > iframe {
    display: block;
    width: 100%;
    height: clamp(20rem, 42vh, 28rem);
    border: 0;
}

.wik-map__caption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: var(--wik-navy);
    color: #aab6da;
    font-size: 0.8125rem;
}

.wik-photo--placeholder {
    /* Layered bands standing in for sky, harbour haze and water. */
    background:
        linear-gradient(180deg, #16255e 0%, #1d3070 46%, #0f2050 47%, #0b1a4a 100%);
    display: grid;
    /* End-aligned so the note sits in the water band, clear of the horizon rule. */
    place-items: end center;
    text-align: center;
    color: #aab6da;
    padding: 1.5rem;
    min-height: 12rem;
}

.wik-photo--placeholder::after {
    /* A horizon line, so the slot reads as a photograph frame. */
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 46%;
    border-top: 1px solid rgb(255 119 0 / 45%);
}

.wik-photo__note {
    position: relative;
    font-family: var(--wik-display);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    max-width: 22ch;
}

.wik-photo--4x3 { aspect-ratio: 4 / 3; }
.wik-photo--16x9 { aspect-ratio: 16 / 9; }
.wik-photo--square { aspect-ratio: 1 / 1; }

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.wik-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: min(80vh, 44rem);
    color: var(--wik-white);
    background:
        linear-gradient(180deg, #16255e 0%, #1d3070 44%, #0f2050 45%, #071232 100%);
    isolation: isolate;
}

.wik-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.wik-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The rowers sit right of centre in the artwork. A wide viewport shows nearly all of it, so
       centre is fine; a narrow one crops to a tall slice, and centring there frames the
       Elbphilharmonie and loses the crew — which is the whole point of the picture. */
    object-position: center;
}

@media (max-width: 48rem) {
    .wik-hero__media img {
        object-position: 72% 55%;
    }
}

/* Scrim: keeps the headline legible over any photograph that lands here. */
.wik-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Two layers. The horizontal one darkens only the side the text sits on, so the crew on
       the right stays legible as a picture; the vertical one grounds the bottom edge. Darkening
       the whole frame enough for a 13px label would have flattened the artwork. */
    background:
        linear-gradient(
            90deg,
            rgb(7 18 50 / 62%) 0%,
            rgb(7 18 50 / 45%) 38%,
            rgb(7 18 50 / 8%) 68%,
            rgb(7 18 50 / 0%) 100%
        ),
        linear-gradient(
            180deg,
            rgb(7 18 50 / 20%) 0%,
            rgb(7 18 50 / 38%) 40%,
            rgb(7 18 50 / 72%) 70%,
            rgb(7 18 50 / 90%) 100%
        );
}

.wik-hero__body {
    /* width:100% because auto margins on a grid item disable stretch, which left the hero
       content narrower than — and misaligned with — the rest of the page. */
    width: 100%;
    padding-block: clamp(3rem, 8vw, 6rem);
}

/* White, not orange: measured against this photograph, #FF7700 over its lit sky falls to
   1.32:1 — the orange-on-light failure the palette rules forbid, and a photograph is not a
   controllable background. The orange rule beneath the headline carries the accent instead.
   19px/700 also puts this over WCAG's large-text threshold (18.66px bold), which is the honest
   way to clear contrast on a stippled duotone where the brightest dither dot will always beat a
   scrim. Measured worst-dot contrast is 3.9–4.2:1 against the 3:1 large-text requirement, and the
   local mean is above 12:1. */
.wik-hero .wik-eyebrow {
    color: var(--wik-white);
}

/* Only the wide view needs the large-text allowance. On a phone the crop is darker and the label
   measures 6.08:1, comfortably past the 4.5:1 normal-text bar, so it stays a proper small kicker
   instead of wrapping onto two lines. */
@media (min-width: 48rem) {
    .wik-hero .wik-eyebrow {
        font-size: 1.1875rem;
        letter-spacing: 0.1em;
    }
}

.wik-hero h1 {
    color: var(--wik-white);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}

.wik-hero__claim {
    font-family: var(--wik-display);
    font-size: clamp(1.0625rem, 2.2vw, 1.5rem);
    color: #dce3f7;
    max-width: 34ch;
    margin: 0 0 2rem;
}

/* A thin orange rule under the headline — the flag colour, used sparingly. */
.wik-hero h1::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 4px;
    background: var(--wik-orange);
    margin-top: 1.25rem;
}

/* -----------------------------------------------------------------------------
   Cards and grids
   -------------------------------------------------------------------------- */

.wik-grid {
    display: grid;
    gap: var(--wik-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.wik-grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

.wik-card {
    display: flex;
    flex-direction: column;
    background: var(--wik-white);
    border: 1px solid var(--wik-line);
    border-radius: var(--wik-radius);
    overflow: hidden;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

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

.wik-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.wik-card__body h3 { margin: 0; }
.wik-card__body p { margin: 0; color: var(--wik-muted); }

/* The whole card is clickable, but the link stays the accessible target. */
.wik-card__link {
    text-decoration: none;
    color: inherit;
}

/* Descendant-scoped on purpose. An unscoped .wik-card__link::after positions against the nearest
   positioned ancestor, and a link used outside a card has none — so the overlay resolved against
   the initial containing block and covered the entire page, swallowing hovers and clicks
   everywhere above it. Requiring .wik-card (which is position: relative) makes that impossible. */
.wik-card .wik-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.wik-card { position: relative; }

.wik-tag {
    align-self: start;
    font-family: var(--wik-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wik-navy);
    background: var(--wik-paper-deep);
    border-radius: 2px;
    padding: 0.2rem 0.5rem;
}

.wik-tag--accent {
    background: var(--wik-orange);
    color: var(--wik-ink);
}

/* -----------------------------------------------------------------------------
   Events
   -------------------------------------------------------------------------- */

.wik-event {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--wik-line);
    align-items: start;
}

.wik-event__date {
    text-align: center;
    border: 2px solid var(--wik-blue);
    border-radius: var(--wik-radius);
    padding: 0.35rem 0;
    font-family: var(--wik-display);
    line-height: 1.1;
}

.wik-event__day {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wik-blue);
}

.wik-event__month {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wik-muted);
}

.wik-event__link {
    text-decoration: none;
    color: var(--wik-navy);
}

.wik-event__link:hover {
    color: var(--wik-blue);
    text-decoration: underline;
}

.wik-event__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--wik-muted);
}

/* -----------------------------------------------------------------------------
   Trip / Wanderrudern metadata
   -------------------------------------------------------------------------- */

.wik-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0;
    font-size: 0.9375rem;
}

.wik-facts dt {
    font-family: var(--wik-display);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wik-muted);
}

.wik-facts dd {
    margin: 0;
    font-weight: 600;
    color: var(--wik-navy);
}

.wik-section--navy .wik-facts dd { color: var(--wik-white); }
.wik-section--navy .wik-facts dt { color: #aab6da; }

/* -----------------------------------------------------------------------------
   Motion: honour the OS setting rather than overriding it
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .wik-btn:hover,
    .wik-card:hover { transform: none; }
}
/* ---------- user-authored pages ---------- */


/* Published pages render inside MainLayout; cap the measure so prose stays readable. */
.website-content {
    overflow-wrap: break-word;
    max-width: 46rem;
}

.website-header {
    max-width: 46rem;
}

.website-content h1,
.website-content h2,
.website-content h3,
.website-content h4 {
    margin-top: 1.75rem;
    margin-bottom: .5rem;
}

.website-content p {
    line-height: 1.65;
}

/* Uploaded media must never widen the page on a phone. */
.website-figure {
    margin: 1.5rem 0;
}

.website-figure img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: .375rem;
}

.website-figure figcaption {
    font-size: .875rem;
    opacity: .75;
    margin-top: .35rem;
}

/* Editor: toolbars wrap rather than overflow on narrow screens. */
.content-editor .btn-toolbar {
    flex-wrap: wrap;
}

/* =============================================================================
   Site shell: header, primary navigation, footer
   The menu is built from <details>/<summary>, so it opens with the keyboard and
   is announced by screen readers with no JavaScript at all — which matters
   because the public pages are static-rendered and have no Blazor circuit.
   ============================================================================= */

.wik-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--wik-white);
    border-bottom: 1px solid var(--wik-line);
}

.wik-topbar {
    background: var(--wik-navy);
    color: #c3cbe4;
    font-size: 0.8125rem;
}

.wik-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.25rem;
}

.wik-topbar__place {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wik-topbar .wik-utility__link {
    color: var(--wik-white);
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
}

.wik-topbar .wik-utility__link:hover { color: var(--wik-orange); }

.wik-header__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
}

/* --- wordmark ------------------------------------------------------------- */

.wik-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--wik-navy);
    margin-right: auto;
    /* Never shrink or be shrunk into: the wordmark is the one thing that must always be intact. */
    flex: 0 0 auto;
}

/* The club flag, at its own 3:2 proportions so the ring stays circular. */
.wik-brand__flag {
    flex: none;
    width: 3.4rem;
    aspect-ratio: 3 / 2;
    border-radius: 2px;
    overflow: hidden;
}

.wik-brand__flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wik-brand__name {
    font-family: var(--wik-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
}

.wik-brand__sub {
    display: block;
    font-family: var(--wik-body);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--wik-muted);
}

/* --- primary nav ---------------------------------------------------------- */

.wik-nav { display: flex; align-items: center; gap: 0.25rem; }

.wik-nav__area { position: relative; }

.wik-nav__area > summary {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 0.35rem;
    list-style: none;
    cursor: pointer;
    font-family: var(--wik-display);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wik-navy);
    padding: 0.6rem 0.55rem;
    border-radius: var(--wik-radius);
    border-bottom: 3px solid transparent;
}

.wik-nav__area > summary::-webkit-details-marker { display: none; }
.wik-nav__area > summary:hover { color: var(--wik-blue); }
.wik-nav__area[open] > summary { border-bottom-color: var(--wik-orange); }

/* Chevron drawn in CSS: no icon font, no sprite. */
.wik-nav__area > summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 120ms ease;
}

.wik-nav__area[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }

.wik-nav__panel {
    background: var(--wik-white);
    border: 1px solid var(--wik-line);
    border-radius: var(--wik-radius);
    box-shadow: var(--wik-shadow);
    padding: 1rem;
    display: grid;
    gap: 0.15rem;
    min-width: 15rem;
}

.wik-nav__panel a {
    text-decoration: none;
    color: var(--wik-ink);
    padding: 0.4rem 0.5rem;
    border-radius: 2px;
    font-size: 0.9375rem;
}

.wik-nav__panel a:hover { background: var(--wik-paper); color: var(--wik-blue); }

.wik-nav__panel strong {
    font-family: var(--wik-display);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wik-orange-ink);
    padding: 0.5rem 0.5rem 0.15rem;
}

/* --- utility actions ------------------------------------------------------ */

.wik-utility {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wik-utility__link {
    font-family: var(--wik-display);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--wik-blue);
    padding: 0.5rem 0.6rem;
    white-space: nowrap;
}

.wik-utility__link:hover { color: var(--wik-orange-ink); }

/* The strapline is a nicety; it is the first thing to go when the bar gets tight. */
@media (max-width: 84rem) {
    .wik-brand__sub { display: none; }
}

/* The toggle stays in the accessibility tree and is focusable, but is not drawn: the label is
   what the user sees and clicks, and Space on the focused control still opens the drawer. */
.wik-menu-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.wik-burger { display: none; }

.wik-header__cta { flex: 0 0 auto; }

.wik-burger__bars,
.wik-burger__bars::before,
.wik-burger__bars::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
}

.wik-burger__bars::before,
.wik-burger__bars::after {
    content: "";
    transform: translateY(-6px);
}

.wik-burger__bars::after { transform: translateY(4px); }

/* Focus ring has to follow the hidden checkbox onto its visible label. */
.wik-menu-toggle:focus-visible + .wik-burger {
    outline: 3px solid var(--wik-orange);
    outline-offset: 2px;
}

/* --- desktop -------------------------------------------------------------- */

@media (min-width: 68rem) {
    /* No wrapper element in the way, so the nav simply sits in the header bar. */
    .wik-menu__drawer {
        display: flex;
        align-items: center;
        gap: 1rem;
        /* No shrink and no end-justification. Both were the cause of the nav sliding under the
           wordmark: an end-justified box that is too small overflows *backwards*. With flex:none
           and an auto margin the row can only ever overflow forwards, and the two-row header
           means it no longer needs to. */
        flex: 0 0 auto;
        margin-left: auto;
    }

    .wik-nav { flex: 0 0 auto; }

    /* Desktop keeps the utility actions in the top bar and the CTA in the main bar. */
    .wik-utility--drawer { display: none; }

    .wik-nav__panel {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
    }
}

/* --- mobile --------------------------------------------------------------- */

@media (max-width: 67.99rem) {
    .wik-topbar { display: none; }
    .wik-header__cta { display: none; }
    .wik-header__bar { min-height: 3.75rem; flex-wrap: wrap; }

    .wik-burger {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        border: 2px solid var(--wik-blue);
        border-radius: var(--wik-radius);
        color: var(--wik-blue);
        font-family: var(--wik-display);
        font-weight: 700;
        font-size: 0.8125rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 0.5rem 0.75rem;
        cursor: pointer;
    }

    .wik-menu__drawer {
        display: none;
        flex-basis: 100%;
        border-top: 1px solid var(--wik-line);
        padding-block: 1rem;
        max-height: calc(100vh - 3.75rem);
        overflow-y: auto;
    }

    .wik-menu-toggle:checked ~ .wik-menu__drawer { display: block; }

    .wik-nav { flex-direction: column; align-items: stretch; gap: 0; }

    .wik-nav__area > summary {
        padding: 0.85rem 0.5rem;
        border-bottom: 1px solid var(--wik-line);
    }

    .wik-nav__area[open] > summary { border-bottom-color: var(--wik-orange); }

    .wik-nav__panel {
        border: 0;
        box-shadow: none;
        padding: 0.5rem 0 0.5rem 1rem;
        min-width: 0;
    }

    .wik-utility {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--wik-line);
        margin-top: 0.5rem;
    }

    .wik-utility__link { padding: 0.6rem 0.5rem; }
    .wik-utility .wik-btn { justify-content: center; }
}

/* --- footer --------------------------------------------------------------- */

.wik-footer {
    background: var(--wik-navy-deep);
    color: #c3cbe4;
    padding-block: var(--wik-section) 2rem;
    font-size: 0.9375rem;
}

.wik-footer a { color: var(--wik-white); text-decoration: none; }
.wik-footer a:hover { text-decoration: underline; }

.wik-footer h2 {
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wik-orange);
    margin: 0 0 0.75rem;
}

.wik-footer__cols {
    display: grid;
    gap: var(--wik-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.wik-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

.wik-footer__base {
    margin-top: var(--wik-gap);
    padding-top: 1.25rem;
    border-top: 1px solid rgb(255 255 255 / 15%);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    font-size: 0.875rem;
}

.wik-footer__base > :last-child { margin-left: auto; }

/* =============================================================================
   Framework error UI
   Restored after the stylesheet rewrite: without these rules the banner is
   permanently visible instead of appearing only when the circuit actually fails.
   Blazor flips display to block itself.
   ============================================================================= */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--wik-orange);
    color: var(--wik-ink);
    padding: 0.75rem 1.25rem;
    box-shadow: 0 -1px 8px rgb(11 26 74 / 25%);
    font-family: var(--wik-display);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    top: 0.5rem;
    right: 0.9rem;
}

#blazor-error-ui a { color: var(--wik-ink); }