/*
 * Header controls — includes/header.blade.php
 *   1. Language switcher  (`.lang-switch`)
 *   2. Day/night switch   (`.theme-switch`)
 *
 * Both are pills drawn from the active theme, following the requested
 * day/night design: light-grey pill + dark text in day mode, black pill +
 * white text in night mode (<html data-theme-mode>, flipped by the Meno
 * template's custom.js). Colours/positions live in custom properties, so the
 * compact states mostly swap variables (plus a few display/size overrides):
 *   - phones (< 576px): language = flag + "EN"/"SV" code (no pill, no caret),
 *     day/night = mini switch without label
 *   - impersonating (`.header-impersonating` on .header-content-right): both
 *     shrink to the old icons' footprint at every width, because the
 *     "Return to admin" badge + button leave no spare room.
 * Loaded globally from includes/head.blade.php; behaviour (Space key, the
 * switch's accessible name) lives in assets/js/admin/header-controls.js.
 */

/* Keyboard focus ring: dark on the green / light headers (6.5:1+), the header's own
   light tone on the dark header — the template strips outlines from links globally */
.main-header-container {
    --header-controls-ring: #161616;
}

[data-header-styles=dark] .main-header-container {
    --header-controls-ring: var(--header-prime-color);
}

/* ========== 1. Language switcher ========== */

.main-header-container .lang-switch {
    --lang-chip-bg: #e7e7e7;
    --lang-chip-bg-active: #d9d9d9;
    --lang-chip-color: #161616;
    --lang-chip-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
}

[data-theme-mode=dark] .main-header-container .lang-switch {
    --lang-chip-bg: #000;
    --lang-chip-bg-active: #1f1f1f;
    --lang-chip-color: #fff;
    --lang-chip-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Trigger chip: flag + the language's own name + caret */
.main-header-container .lang-switch .lang-switch-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2rem;
    padding-inline: 0.625rem 0.5rem;
    border-radius: 50rem;
    background-color: var(--lang-chip-bg);
    color: var(--lang-chip-color);
    box-shadow: var(--lang-chip-shadow);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.main-header-container .lang-switch .header-link:hover .lang-switch-chip,
.main-header-container .lang-switch .header-link.show .lang-switch-chip {
    background-color: var(--lang-chip-bg-active);
}

.main-header-container .lang-switch .header-link:focus-visible .lang-switch-chip {
    outline: 2px solid var(--header-controls-ring);
    outline-offset: 2px;
}

.main-header-container .lang-switch .lang-switch-caret {
    margin-inline-start: -0.25rem;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.main-header-container .lang-switch .header-link.show .lang-switch-caret {
    transform: rotate(180deg);
}

/* Two-letter code ("EN" / "SV"): phones only, where the name doesn't fit */
.main-header-container .lang-switch .lang-switch-code {
    display: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Flag: keep the real 3:2 ratio — the template's `.country-selector .header-link img`
   rule would otherwise force it into a 1.75rem square */
.main-header-container .lang-switch img.lang-switch-flag {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1rem;
    object-fit: cover;
    border-radius: 0.1875rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Menu: caption, current language (bold + check — NOT the template's `.active`, whose
   tint is the only focus cue), translated name under each language's own name */
.main-header-container .lang-switch .lang-switch-heading {
    padding: 0.625rem 1rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-7);
}

.main-header-container .lang-switch .dropdown-item[aria-current="true"] {
    font-weight: 600;
}

.main-header-container .lang-switch .lang-switch-check {
    color: var(--primary-color);
}

.main-header-container .lang-switch .lang-switch-local {
    font-size: 0.6875rem;
    color: var(--gray-7);
}

/* Body-text colour (≈20:1 light, ≈11:1 dark) — !important beats the template's global
   `a, button { outline: 0 !important }` */
.main-header-container .lang-switch .dropdown-item:focus-visible {
    outline: 2px solid var(--default-text-color) !important;
    outline-offset: -2px;
}

/* ========== 2. Day/night switch ========== */

.main-header-container .theme-switch {
    --theme-track-bg: #e7e7e7;
    --theme-track-color: #161616;
    --theme-track-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
    --theme-track-padding: 0.875rem 2.375rem;
    --theme-knob-start: calc(100% - 1.8125rem);
    --theme-knob-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.28);
    --theme-knob-shadow-hover: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.32);
}

/* Night: black track, label right, knob left */
[data-theme-mode=dark] .main-header-container .theme-switch {
    --theme-track-bg: #000;
    --theme-track-color: #fff;
    --theme-track-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    --theme-track-padding: 2.375rem 0.875rem;
    --theme-knob-start: 0.1875rem;
    --theme-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --theme-knob-shadow-hover: 0 0 0 0.1875rem rgba(255, 255, 255, 0.18);
}

/* Track: names the CURRENT mode */
.main-header-container .theme-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding-inline: var(--theme-track-padding);
    border-radius: 50rem;
    background-color: var(--theme-track-bg);
    color: var(--theme-track-color);
    box-shadow: var(--theme-track-shadow);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease, padding 0.25s ease;
}

.main-header-container .theme-switch:focus-visible .theme-switch-track {
    outline: 2px solid var(--header-controls-ring);
    outline-offset: 2px;
}

/* Both labels share one grid cell, so the track keeps the wider label's width in either mode */
.main-header-container .theme-switch-text {
    display: grid;
}

.main-header-container .theme-switch-text > span {
    grid-area: 1 / 1;
}

.main-header-container .theme-switch-text-night,
[data-theme-mode=dark] .main-header-container .theme-switch-text-day {
    visibility: hidden;
}

[data-theme-mode=dark] .main-header-container .theme-switch-text-night {
    visibility: visible;
}

/* Knob: carries the current mode's icon (sun / moon + stars) */
.main-header-container .theme-switch-knob {
    position: absolute;
    inset-block-start: 0.1875rem;
    inset-inline-start: var(--theme-knob-start);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background-color: #fff;
    color: #161616;
    box-shadow: var(--theme-knob-shadow);
    transition: inset-inline-start 0.25s ease, box-shadow 0.2s ease;
}

.main-header-container .theme-switch:hover .theme-switch-knob {
    box-shadow: var(--theme-knob-shadow-hover);
}

.main-header-container .theme-switch-knob svg {
    width: 1rem;
    height: 1rem;
}

/* The crescent + stars glyph is busier than the sun, so it sits a touch smaller */
.main-header-container .theme-switch-knob .theme-switch-icon-night {
    width: 0.9375rem;
    height: 0.9375rem;
}

.main-header-container .theme-switch-icon-night,
[data-theme-mode=dark] .main-header-container .theme-switch-icon-day {
    display: none;
}

[data-theme-mode=dark] .main-header-container .theme-switch-icon-night {
    display: block;
}

/* ========== Compact states ========== */

/* Phones: language = flag + "EN"/"SV" on the bare header; day/night = mini switch (no label).
   The code is dark on the green / light headers (6.5:1 — white would be 2.8:1) and keeps the
   header's own light tone on the dark header */
@media (max-width: 575.98px) {
    [data-theme-mode] .main-header-container .lang-switch {
        --lang-chip-bg: transparent;
        --lang-chip-bg-active: transparent;
        --lang-chip-color: #161616;
        --lang-chip-shadow: none;
    }

    [data-header-styles=dark] .main-header-container .lang-switch {
        --lang-chip-color: var(--header-prime-color);
    }

    .main-header-container .lang-switch .lang-switch-chip {
        gap: 0.25rem;
        height: auto;
        padding: 0;
    }

    .main-header-container .lang-switch .lang-switch-name,
    .main-header-container .lang-switch .lang-switch-caret {
        display: none;
    }

    .main-header-container .lang-switch .lang-switch-code {
        display: inline;
    }

    .main-header-container .lang-switch .header-link img.lang-switch-flag {
        width: 1.375rem;
        height: 0.9375rem;
    }

    [data-theme-mode] .main-header-container .theme-switch {
        --theme-track-padding: 0;
    }

    .main-header-container .theme-switch-track {
        width: 3rem;
    }

    .main-header-container .theme-switch-text {
        display: none;
    }
}

/* Impersonating (any width): flag only and knob only, sized like the old icons */
[data-theme-mode] .main-header-container .header-impersonating .lang-switch {
    --lang-chip-bg: transparent;
    --lang-chip-bg-active: transparent;
    --lang-chip-shadow: none;
}

.main-header-container .header-impersonating .lang-switch .lang-switch-chip {
    gap: 0;
    height: auto;
    padding: 0;
}

.main-header-container .header-impersonating .lang-switch .lang-switch-name,
.main-header-container .header-impersonating .lang-switch .lang-switch-code,
.main-header-container .header-impersonating .lang-switch .lang-switch-caret {
    display: none;
}

.main-header-container .header-impersonating .lang-switch .header-link img.lang-switch-flag {
    width: 1.375rem;
    height: 0.9375rem;
}

[data-theme-mode] .main-header-container .header-impersonating .theme-switch {
    --theme-track-bg: transparent;
    --theme-track-shadow: none;
    --theme-track-padding: 0;
    --theme-knob-start: 0;
}

.main-header-container .header-impersonating .theme-switch-track {
    width: 1.375rem;
    height: 1.375rem;
}

.main-header-container .header-impersonating .theme-switch-text {
    display: none;
}

.main-header-container .header-impersonating .theme-switch-knob {
    inset-block-start: 0;
    width: 1.375rem;
    height: 1.375rem;
}

.main-header-container .header-impersonating .theme-switch-knob svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Windows High Contrast drops backgrounds and shadows, so outline the pill, track and knob */
@media (forced-colors: active) {
    .main-header-container .lang-switch-chip,
    .main-header-container .theme-switch-track,
    .main-header-container .theme-switch-knob {
        border: 1px solid CanvasText;
    }
}