/* =================================================================
   Header & Navigation — tvårads-layout (desktop), hamburgermeny (mobil)

   Desktop (≥768px):
     Rad 1: [Logo] ·············· [🔍 Sök] [☀ Tema] [🌐 Språk]
     Rad 2: [Webbplatser | Blogg & rapporter | Testa & verktyg | Om oss | Tjänster]

   Mobil (<768px):
     [Logo] ····················· [☰ Meny]
     Hamburgermeny med sök, navigation, språk och tema
   ================================================================= */


/* ── Site header ─────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--pico-card-background-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding-block: 0;
    /* Nav-hover: halv intensitet av --pico-primary-focus för bättre WCAG-kontrast */
    --wp-nav-hover-bg: rgba(62, 125, 142, 0.125);
    /* Verktygsknapp-färg: default till Picos muted, överskrivs i dark mode
       för att klara WCAG AA 4.5:1 (--pico-muted-color ger bara ~4.4:1) */
    --wp-header-tool-color: var(--pico-muted-color);
}

[data-theme="dark"] .site-header {
    --wp-nav-hover-bg: rgba(106, 173, 179, 0.19);
    /* #969fae mot mörk bakgrund ≈ 6.25:1 — klarar AA med marginal */
    --wp-header-tool-color: #969fae;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header {
        --wp-nav-hover-bg: rgba(106, 173, 179, 0.19);
        --wp-header-tool-color: #969fae;
    }
}

.site-header .container {
    padding-block: 0;
}


/* ── Decorative top gradient ─────────────────────────────────────── */
.site-header .accent-gradient-top {
    height: 3px;
}


/* ── Rad 1: Logo + verktyg ───────────────────────────────────────── */
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    padding-block: 0.5rem;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .site-header .header-bar {
        padding-block: 0.225rem;
    }
}


/* ── Logo ────────────────────────────────────────────────────────── */
.header-logo {
    flex-shrink: 0;
}

.header-logo .logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.header-logo .logo-link img {
    height: 2rem;
    width: auto;
    padding: 0.125em;
}

.header-logo .logo-link strong {
    font-size: 1.125rem;
}


/* ── Desktop verktyg (sök + tema + språk) — dolda på mobil ───────── */
.header-tools {
    display: none;
}

@media (min-width: 768px) {
    .header-tools {
        display: flex;
        align-items: center;
        gap: 0;
    }
}


/* ── Individual tool sections ────────────────────────────────────── */
.header-tool {
    display: flex;
    align-items: center;
}

.header-tool button,
.header-tool details {
    margin-bottom: 0;
}

/* Konsekvent separator mellan alla verktyg på desktop */
@media (min-width: 768px) {
    .header-tool + .header-tool {
        border-left: 1px solid var(--pico-muted-border-color);
        margin-left: 0.5rem;
        padding-left: 0.5rem;
    }
}


/* =================================================================
   WCAG: Synlig fokusindikator för alla header-interaktioner
   Överskriver Pico:s defaults som ibland saknar synlig outline.
   ================================================================= */
.search-toggle:focus-visible,
.theme-toggle:focus-visible,
.header-tool-lang .dropdown summary:focus-visible,
.nav-menu summary:focus-visible,
.theme-toggle-mobile:focus-visible,
.search-toggle-mobile:focus-visible,
.search-dialog-close:focus-visible,
.logo-link:focus-visible {
    outline: 2px solid var(--wp-green-dark, var(--pico-primary));
    outline-offset: 2px;
}


/* ── Desktop search toggle ───────────────────────────────────────── */
.search-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    color: var(--wp-header-tool-color);
    font-size: 0.8125rem;
    cursor: pointer;
    border-radius: var(--pico-border-radius);
    transition: color 150ms ease;
    text-decoration: none;
    margin: 0;
    line-height: 1.3;
}

.search-toggle:hover,
.search-toggle:focus-visible {
    color: var(--pico-contrast);
    text-decoration: none;
}


/* ── Desktop theme toggle ────────────────────────────────────────── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    color: var(--wp-header-tool-color);
    font-size: 0.8125rem;
    cursor: pointer;
    border-radius: var(--pico-border-radius);
    transition: color 150ms ease;
    --pico-background-color: transparent;
    --pico-border-color: transparent;
    --pico-color: var(--wp-header-tool-color);
    --pico-box-shadow: 0 0 0 transparent;
    margin: 0;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--pico-contrast);
    --pico-color: var(--pico-contrast);
    background-color: transparent;
}


/* ── Theme icon visibility ───────────────────────────────────────── */
:root:not([data-theme="dark"]) .theme-icon--light,
[data-theme="light"] .theme-icon--light {
    display: inline-block;
}

:root:not([data-theme="dark"]) .theme-icon--dark,
[data-theme="light"] .theme-icon--dark {
    display: none;
}

[data-theme="dark"] .theme-icon--light {
    display: none;
}

[data-theme="dark"] .theme-icon--dark {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-icon--light {
        display: none;
    }
    :root:not([data-theme]) .theme-icon--dark {
        display: inline-block;
    }
}


/* ── Desktop language dropdown ───────────────────────────────────── */
.header-tool-lang .dropdown {
    margin-bottom: 0;
}

/* Hög specificitet (.site-header prefix) behövs för att slå
   PicoCSS:s interna dropdown-selektorer som sätter color via --pico-color */
.site-header .header-tool-lang .dropdown summary {
    font-size: 0.8125rem;
    border: none;
    border-radius: var(--pico-border-radius);
    background: none;
    color: var(--wp-header-tool-color);
    --pico-color: var(--wp-header-tool-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.3;
    padding: 0.25rem 0.5rem;
    --pico-form-element-spacing-vertical: 0.3rem;
    --pico-form-element-spacing-horizontal: 0.65rem;
    --pico-background-color: transparent;
    --pico-border-color: transparent;
    --pico-box-shadow: 0 0 0 transparent;
    margin: 0;
    height: auto;
    transition: color 150ms ease;
}

.site-header .header-tool-lang .dropdown summary:hover,
.site-header .header-tool-lang .dropdown summary:focus-visible {
    color: var(--pico-contrast);
    --pico-color: var(--pico-contrast);
}

.header-tool-lang .dropdown ul {
    min-width: 10rem;
    right: 0;
    left: auto;
}


/* =================================================================
   Rad 2: Horisontell navigation (desktop)
   ================================================================= */
.header-nav {
    display: none;
}

@media (min-width: 768px) {
    .header-nav {
        display: block;
        border-top: 1px solid var(--pico-muted-border-color);
    }

    .header-nav ul {
        display: flex;
        align-items: center;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .header-nav li {
        margin: 0;
    }

    .header-nav a {
        display: block;
        padding: 0.25rem 1rem;
        font-size: 0.9375rem;
        text-decoration: none;
        color: var(--pico-color);
        white-space: nowrap;
        border-radius: 0;
        transition: color 150ms ease, background-color 150ms ease;
    }

    .header-nav a:hover,
    .header-nav a:focus-visible {
        color: var(--pico-primary);
        background-color: var(--wp-nav-hover-bg);
    }

    .header-nav a[aria-current="page"] {
        font-weight: bold;
        color: var(--pico-primary);
        box-shadow: inset 0 -3px 0 0 var(--pico-primary);
    }
}


/* =================================================================
   Mobil: hamburgermeny (dold på desktop)
   ================================================================= */
.header-mobile-menu {
    display: flex;
    align-items: center;
}

/* PicoCSS sätter details { margin-bottom: var(--pico-spacing) } (~1rem)
   och nollställer bara för `nav details.dropdown`, men hamburgermenyn
   sitter i en <div>, inte <nav>. Måste nollställas explicit. */
.header-mobile-menu .nav-menu {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .header-mobile-menu {
        display: none;
    }
}


/* ── Hamburger menu styling ──────────────────────────────────────── */
.nav-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    margin-bottom: 0;
}

.site-header .nav-menu ul {
    right: 0;
    left: auto;
    min-width: 21rem;
    max-width: calc(100vw - 2rem);
}

/* Tillåt radbrytning i alla mobilmeny-poster —
   PicoCSS sätter white-space: nowrap på dropdown-items */
.site-header .nav-menu ul li a,
.site-header .nav-menu ul li button {
    white-space: normal;
    overflow-wrap: break-word;
}


/* ── Mobile search in hamburger ──────────────────────────────────── */
.search-toggle-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-toggle-mobile svg {
    flex-shrink: 0;
}


/* ── Mobile menu separators and headings ─────────────────────────── */
.mobile-only-separator {
    border-top: 1px solid var(--pico-muted-border-color);
    margin-block: 0.25rem;
}

.mobile-nav-heading {
    padding: 0.25rem 0.75rem;
    color: var(--pico-muted-color);
}

.mobile-nav-heading small {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6875rem;
}


/* ── Active page marker in mobile menu ───────────────────────────── */
.nav-menu a[aria-current="true"],
.nav-menu a[aria-current="page"] {
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}


/* ── Mobile theme toggle (inside hamburger dropdown) ─────────────── */
.theme-toggle-mobile,
.theme-toggle-mobile:hover,
.theme-toggle-mobile:active,
.theme-toggle-mobile:focus {
    --pico-background-color: transparent;
    --pico-border-color: transparent;
    --pico-color: inherit;
    --pico-box-shadow: 0 0 0 transparent;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background-color: transparent;
    color: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
    box-shadow: none;
    white-space: normal;
}

.theme-toggle-mobile svg {
    flex-shrink: 0;
}

.theme-toggle-mobile:hover {
    background-color: var(--pico-primary-focus);
}


/* =================================================================
   Sökdialog (<dialog>)
   ================================================================= */
/* =================================================================
   Sökdialog (<dialog>) — FIXAD VERSION
   
   Ersätt hela "Sökdialog"-sektionen i header-nav.css med detta.
   
   Problemet: PicoCSS ger [role="search"] automatiskt
   display: inline-flex, pill-border-radius (5rem) och
   grupplogik som krockar med vår egen layout.
   
   Lösningen: Överstyr PicoCSS:s gruppstilar inuti dialogen
   och se till att labeln (visually-hidden) inte påverkar layouten.
   ================================================================= */
.search-dialog {
    border: none;
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    color: var(--pico-color);
    padding: 0;
    max-width: 44rem;
    width: calc(100% - 2rem);
    margin-top: 15vh;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}
 
.search-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
 
.search-dialog-inner {
    position: relative;
    padding: 1.5rem;
    /* Extra högerpadding så stängknappen inte överlappar */
    padding-right: 2.5rem;
}
 
/* ── Överstyr PicoCSS:s [role="search"]-gruppstilar ──────────────── */
.search-dialog-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    /* PicoCSS sätter inline-flex, width: 100%, och margin-bottom
       på [role="search"] — vi behöver full bredd utan extra marginal */
    width: 100%;
    margin-bottom: 0;
    /* Ta bort PicoCSS:s grupp-box-shadow */
    box-shadow: none;
}
 
/* PicoCSS ger [role="search"] > :first-child pill-radius till vänster
   och :last-child pill-radius till höger. Vi vill ha vanlig radius. */
.search-dialog-form > :first-child {
    border-top-left-radius: var(--pico-border-radius);
    border-bottom-left-radius: var(--pico-border-radius);
}
 
.search-dialog-form > :last-child {
    border-top-right-radius: var(--pico-border-radius);
    border-bottom-right-radius: var(--pico-border-radius);
}
 
/* KRITISKT: PicoCSS sätter [role="search"] > * { position: relative }
   vilket överskriver .visually-hidden { position: absolute }.
   Utan detta syns labeln som ett synligt flex-barn. */
.search-dialog-form .visually-hidden {
    position: absolute;
    flex: 0 0 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}
 
.search-dialog-form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    /* Återställ PicoCSS:s borttagna border-radius på mellanbarn */
    border-radius: var(--pico-border-radius);
}
 
.search-dialog-form button[type="submit"] {
    margin-bottom: 0;
    white-space: nowrap;
    width: auto;
    flex-shrink: 0;
    /* Återställ PicoCSS:s borttagna border-radius på mellanbarn */
    border-radius: var(--pico-border-radius);
}
 
.search-dialog-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    border: none;
    background: none;
    color: var(--pico-muted-color);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--pico-border-radius);
    line-height: 1;
    /* Nollställ alla PicoCSS button-variabler */
    --pico-background-color: transparent;
    --pico-border-color: transparent;
    --pico-color: var(--pico-muted-color);
    --pico-box-shadow: 0 0 0 transparent;
    width: auto;
    margin: 0;
}
 
.search-dialog-close:hover,
.search-dialog-close:focus-visible {
    color: var(--pico-contrast);
    --pico-color: var(--pico-contrast);
    background-color: transparent;
}


/* =================================================================
   Reduced motion
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .search-toggle,
    .header-tool-lang .dropdown summary,
    .header-nav a {
        transition: none;
    }
}


/* =================================================================
   Print — hide entire header navigation
   ================================================================= */
@media print {
    .site-header {
        position: static;
        border-bottom: 1px solid #ccc;
    }

    .header-mobile-menu,
    .header-tools,
    .header-nav {
        display: none;
    }

    .accent-gradient-top {
        display: none;
    }

    .search-dialog {
        display: none;
    }
}