/*
 * Toppnavigationen.
 *
 * Innehåller nu även strukturen — display, mått, brytpunkter — som tidigare kom
 * från Bulma. Profilen anger höjd 64px; Bulma satte 3.25rem, alltså 52px.
 *
 * !important är borta. Det behövdes bara för att vinna över Bulmas egna regler på
 * .navbar-item, och med Bulma avvecklad finns inget att vinna över.
 */

/* ── Struktur ───────────────────────────────────────────────────────────── */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    /*
     * Profilen anger höjd 64px. Paddingen låg tidigare som p-5 i markupen,
     * alltså 24px runt om, vilket med logotypens 34px gav 82px.
     *
     * Ingen lodrät padding: höjden kommer från min-height och innehållet
     * centreras. Tidigare fanns dessutom webbläsarens standardmarginal på body,
     * 8px, eftersom resetten fallit bort — den låg som en indragning runt hela
     * raden och försvann uppåt när raden fastnade vid top: 0, medan de vågräta
     * 8px blev kvar. Det var den halva paddingen som såg oavsiktlig ut.
     *
     * Den vågräta indragningen är inte längre en egen indragning utan samma
     * kolumn som resten av sidan: 1200px innehållsbredd med 24px sidmarginal.
     * Logotypen linjerar därmed med sidans innehåll i stället för att sitta på
     * ett eget avstånd från fönsterkanten.
     */
    min-height: 64px;
    padding-block: 0;
    padding-inline: max(24px, calc((100% - 1200px) / 2));
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-subtle);
    /* Profilen anger en 1px kantlinje som nedre avgränsare, utöver skuggan. */
    border-bottom: 1px solid var(--border);
    transition: box-shadow 150ms ease-out;
}

/*
 * Överst på sidan har raden ingen skugga; den tonas in när sidan skrollas
 * (150 ms ease-out, som profilen anger för sticky header). Bakgrunden och
 * kantlinjen är desamma i båda lägena — profilens transparenta rad överst är
 * medvetet frångången, raden skall vara solid. Klassen sätts av skriptet
 * direkt efter raden i layout.ejs; utan JavaScript har raden alltid skugga.
 */
.navbar.is-at-top {
    box-shadow: none;
}

.navbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/*
 * Under 1024px är menyn en drawer som hamburgaren öppnar. Från 1024px ligger
 * länkarna i rad och hamburgaren är dold.
 */
.navbar-menu {
    display: none;
}

.navbar-burger {
    appearance: none;
    display: block;
    position: relative;
    width: 52px;
    height: 52px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
}

.navbar-burger span {
    display: block;
    position: absolute;
    left: calc(50% - 8px);
    width: 16px;
    height: 1px;
    background-color: currentColor;
    transform-origin: center;
    transition: transform 86ms ease-out, opacity 86ms ease-out;
}

.navbar-burger span:nth-child(1) { top: calc(50% - 6px); }
.navbar-burger span:nth-child(2) { top: calc(50% - 1px); }
.navbar-burger span:nth-child(3) { top: calc(50% + 4px); }

.navbar-burger.is-active span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.navbar-burger.is-active span:nth-child(2) { opacity: 0; }
.navbar-burger.is-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .navbar-burger span { transition: none; }
}

@media screen and (min-width: 1024px) {
    .navbar {
        display: flex;
        align-items: stretch;
    }

    .navbar-menu {
        display: flex;
        align-items: stretch;
    }

    .navbar-start {
        display: flex;
        align-items: stretch;
    }

    .navbar-burger {
        display: none;
    }
}

/* ── Länkarna ───────────────────────────────────────────────────────────── */

.navbar-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    background-color: transparent;
    color: var(--text-primary);
    /* Plats för understrykningen på hover och aktiv sida, så att raden inte
       hoppar när den tillkommer. */
    border-bottom: 2px solid transparent;
}

/*
 * Profilen: hover byter till temafärgens textvariant. Tidigare behölls
 * textfärgen och en text-decoration lades till i stället, vilket varken är
 * profilens utseende eller lika tydligt.
 */
.navbar-item:hover,
.navbar-item:focus-visible {
    background-color: transparent;
    box-shadow: none;
    color: var(--theme-text);
    text-decoration: none;
    border-bottom-color: var(--theme-text);
}

/*
 * Profilen: aktuell sida markeras med temafärgens textvariant och en 2px
 * understrykning i samma färg. Markeringen var tidigare fetstil, vilket dels
 * inte är profilens utseende, dels flyttade de övriga posterna i sidled när
 * texten blev bredare.
 */
.navbar-item.is-active {
    color: var(--theme-text);
}

/* Understrykningen för aktuell sida. Ett eget element i stället för
   border-bottom, så att sidövergången kan låta den glida över till nästa
   menypost (view-transition-name i style.css). Ligger över den reserverade
   2px-kanten, så att raden inte flyttar sig. */
.nav-indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background-color: var(--theme-text);
    pointer-events: none;
}

/* Logotypen i navbar-brand skall inte ha länkpaddingens understrykning. */
.navbar-brand .navbar-item:hover,
.navbar-brand .navbar-item:focus-visible {
    border-bottom-color: transparent;
}

/* ── Drawer under 1024px ────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .navbar {
        padding-inline: 16px;
    }

    /* Logotypens länkpadding lade den 12px innanför sidmarginalen, så att den
       inte linjerade med sidans innehåll. */
    .navbar-brand .navbar-item {
        padding-inline-start: 0;
    }
}

/* Logotyp, hamburgare och flagga ryms inte på raden under 360px — raden sköt
   ut sidan och gav vågrät rullning. Logotypen krymper, resten är träffytor. */
@media (max-width: 359px) {
    .navbar-brand .logo {
        width: 150px;
        height: auto;
    }
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--bg-surface);
        flex-direction: column;
        z-index: 9999;
        box-shadow: var(--shadow-subtle);
        border-top: 1px solid var(--border);
    }

    .navbar-menu.is-active {
        display: flex;
    }

    .navbar-menu .container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
}