/* Header colour «Akzentband» — an overlay loaded AFTER site.css, the theme
 * overlay and the header's form (header-eins.css / header-zentriert.css),
 * strictly scoped under the body class .header-band. The whole header filled
 * with the accent, under every form (ADR-0108): it was «Kopfband» for two rows
 * and «Kopfband einzeilig» for one, the same colour rules twice.
 *
 * Only COLOUR: the form decides the arrangement. Everything on the band is white
 * at full strength: every palette colour is checked for WCAG AA against white
 * text (SettingsRepository::ACCENTS), and that check says nothing about white at
 * reduced opacity (82 % measured 3.91:1 under the default accent) or about
 * `--ink` on the accent. Every element the header part renders into the bar
 * needs a rule here — one that inherits the light-page colour from site.css
 * stands dark on the band. The buttons turn the white/accent pair round.
 *
 * ⚠️ Every selector starts with `body.header-band`. A theme scopes its rules as
 * `body.theme-<slug>` so that a FORM overlay of equal weight does not undo its
 * shape (theme/neumar); the colour, though, is this overlay's whole job
 * (ADR-0091: colour stays the design kit's). With the type selector it ties
 * with the theme and wins by order — without it «Klar» kept its white header
 * under white text, and its ink on the band (SettingsRepositoryTest). */

body.header-band .site-header {
    background: var(--accent);
    border-bottom: 0;
    color: #fff;
}
body.header-band .site-header .brand,
body.header-band .site-header .brand-title,
body.header-band .site-header .brand-tagline { color: #fff; }

/* Hauptnavigation im Band: weisse Links. Only where the bar shows the menu at
 * all — below 1200px it is the burger's, and the open menu stands on white. */
@media (min-width: 1200px) {
    body.header-band .main-desktop .menu-item > a,
    body.header-band .main-desktop .sub-toggle { color: #fff; }
    body.header-band .main-desktop .menu-item > a:hover,
    body.header-band .main-desktop .menu-item > a[aria-current] {
        color: #fff;
        text-decoration: underline;
        text-underline-offset: 6px;
    }
    /* The two-row form keeps its line over the menu, half-transparent white on
     * the band; the other forms have no such line (their overlay removes it). */
    body.header-band:not(.header-eins):not(.header-zentriert) .main-desktop { border-top: 1px solid rgba(255, 255, 255, .25); }
}

/* Dropdown submenus open on a light background (site.css) → the text colour there
 * stays default; only the trigger in the band is white. */

/* The header buttons. Filled would be accent on accent and lose its surface, the
 * outlined one accent text on accent — both turn the pair round: the first white
 * with accent text, the second a white outline with white text. */
body.header-band .header-btn--primary { background: #fff; border-color: #fff; color: var(--accent); }
body.header-band .header-btn--primary:hover { background: transparent; border-color: #fff; color: #fff; }
body.header-band .header-btn--secondary { background: transparent; border-color: #fff; color: #fff; }
body.header-band .header-btn--secondary:hover { background: #fff; border-color: #fff; color: var(--accent); }

/* Burger + Sprachwechsler auf Akzentgrund */
/* The ground is the band's: a theme's light burger plate would carry the white
 * lines at under 1.2:1. */
body.header-band .burger { border-color: rgba(255, 255, 255, .45); background: transparent; }
body.header-band .burger-box,
body.header-band .burger-box::before,
body.header-band .burger-box::after { background: #fff; }
body.header-band .burger[aria-expanded="true"] .burger-box { background: transparent; }
body.header-band .lang-current {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}
body.header-band .lang-current .caret { color: #fff; }

/* Der Kontaktblock in der Zeile («In der Kopfzeile»): die Nummer und die E-Mail
 * stehen auf dem Band — weiss, wie alles darauf. One class more than
 * header-kopf.css's muted e-mail and accent hover: that file loads AFTER this
 * one, and on the band both colours would vanish. */
body.header-band .site-header .header-tel,
body.header-band .site-header .header-mail,
body.header-band .site-header .header-mail:hover { color: #fff; }

/* Der Fokusring ist sonst `--accent-fg` und damit auf dem Band unsichtbar. Nur
 * für die Elemente IM Band: Untermenüs, Sprachliste und Offcanvas stehen auf
 * weissem Grund und behalten ihren Ring. */
body.header-band .brand:focus-visible,
body.header-band .main-desktop .menu-item > a:focus-visible,
body.header-band .main-desktop .sub-toggle:focus-visible,
body.header-band .header-btn:focus-visible,
body.header-band .header-tel:focus-visible,
body.header-band .header-mail:focus-visible,
body.header-band .lang-current:focus-visible,
body.header-band .burger:focus-visible { outline-color: #fff; }