/**
 * Header (Kadence header-builder), desktop.
 *
 * Figma: SECTIONS → Navigation → "Navigatie". Anders dan bij de andere
 * scholen staat er geen witte balk over de hele breedte: de header ligt
 * óp de roze hero. Van links naar rechts:
 * - wit logo, los op de hero;
 * - alleen het menu in een witte, ronde balk (±72px hoog, ±760px breed met
 *   de 4 hoofditems; 24px links/rechts per item), items met een
 *   dun streepje ertussen;
 * - los daarvan een rond zoekknopje (lichte rand, wit icoon) en een witte
 *   "Contact"-knop.
 * Daarboven een smalle bovenbalk met Infohub, Actueel, Werken bij en
 * Inloggen (secundair menu, rechts).
 *
 * Indeling (wat waar staat), de transparante header, het witte logo en
 * de kleuren van de knoppen komen uit de Customizer; hier wat Kadence niet
 * kan instellen (de witte balk om alleen het menu). Maten gemeten in de
 * Figma-weergave (±2px), nog nalopen zodra de Customizer staat.
 */

@media (min-width: 1025px) {

    /* Hoofdrij: geen witte balk, geen lijn eronder (plugin: kadence-fixes.css) */
    #main-header .site-main-header-wrap .site-header-row-container-inner {
        background: transparent;

        > .site-container {
            border-bottom: 0;
            border-radius: 0;
        }
    }

    /* Alleen het menu in een witte, ronde balk */
    #main-header .header-navigation .primary-menu-container > ul.menu {
        display: flex;
        align-items: center;
        height: auto;
        padding: 0 24px;
        background: var(--alma-neutral-0);
        border-radius: var(--alma-radius-xl);

        /* plugin (site.css) zet li op height: 100% van de rij → balk te hoog */
        > li.menu-item {
            height: auto;
        }

        > li.menu-item + li.menu-item {
            border-left: 1px solid var(--carmel-color-border);
        }

        > li.menu-item > a {
            display: flex;
            align-items: center;
            min-height: 72px; /* balk iets hoger dan de knoppen (64px) */
            padding: 0 24px;
            color: var(--alma-donker-blauw);
            font-size: 16px;
            line-height: 120%;
        }
    }

    /* Zoekknop en Contact-knop: kleuren, rand en afronding staan in de
       Customizer (Header → Zoeken / Knop): wit op de hero, Contact wit met
       donkerblauwe tekst, afronding 32px. Alleen de rand van de zoekknop
       hier: de plugin (patterns.css) zet die op zwart en wint van de
       Customizer. */
    #main-header .search-toggle-open-container .search-toggle-open.search-toggle-style-bordered.search-toggle-style-bordered {
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%; /* Figma: rond (Kadence heeft hier geen instelling voor) */
    }

    /* ------------------------------------------------------------
       Bovenbalk (secundair menu "Topmenu"): Infohub, Actueel, Werken
       bij, Inloggen. Staat boven het verloopvlak (40px hoog); de
       hoofdrij met logo en menu zit 16px binnen het vlak. Rechts gelijk
       met de Contact-knop.
       ------------------------------------------------------------ */
    body {
        --alma-topbar-h: 40px;
        --alma-header-gap: 16px;   /* bovenkant vlak → menubalk */
        --alma-mainbar-h: 80px;    /* hoogte hoofdrij */
    }

    #main-header .site-top-header-wrap .site-header-row-container-inner {
        background: transparent;

        > .site-container {
            padding-right: 24px; /* icoon Inloggen recht boven de Contact-knop */
        }
    }

    #main-header .site-top-header-inner-wrap {
        min-height: var(--alma-topbar-h);
    }

    #main-header .site-main-header-wrap {
        margin-top: var(--alma-header-gap);
    }

    #main-header .secondary-navigation .secondary-menu-container > ul.menu {
        gap: 8px;

        > li.menu-item > a {
            display: flex;
            align-items: center;
            white-space: nowrap;
            padding: 8px !important;
            color: var(--alma-donker-blauw);
            font-family: var(--carmel-font-body);
            font-size: 14px;
            font-weight: var(--carmel-font-weight-regular, 400); /* Figma: Poppins Regular 14 */
            line-height: 120%;
            text-decoration: underline transparent;
            text-underline-offset: 4px;
            transition: text-decoration-color 0.2s;
        }

        > li.menu-item:is(:hover, :focus-within, .current-menu-item) > a {
            text-decoration-color: currentColor;
        }
    }

    /* Inloggen: het icoon komt uit het menu (Kadence menu-icoon); het
       dropdown-pijltje laten we weg, zoals in het design. Het uitklapmenu
       hangt 8px onder de balk; een onzichtbare strook (::after) overbrugt
       dat gat, anders verdwijnt de hover als je naar het menu beweegt. */
    #main-header .secondary-navigation .menu-inloggen {
        position: relative;

        > a .dropdown-nav-toggle {
            display: none;
        }

        &::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            height: 12px;
        }
    }

    /* Uitklapmenu Inloggen: witte kaart met kopje, portalen met een
       lijntje ertussen en onderaan "Hulp bij inloggen" */
    #main-header .secondary-navigation .menu-inloggen > .sub-menu {
        left: auto !important;
        right: 0;
        width: 280px !important;
        margin-top: 8px;
        padding: 16px 24px !important;
        background: var(--alma-neutral-0) !important;
        border-radius: var(--carmel-radius-md);
        box-shadow: 0 8px 32px rgba(44, 42, 103, 0.15);

        &::before {
            content: 'Inloggen';
            display: block;
            padding-bottom: 8px;
            font-family: var(--carmel-font-body);
            font-size: 12px;
            color: var(--alma-neutral-500);
        }

        > li {
            width: 100%;
            border: 0 !important;
        }

        > li > a {
            display: flex !important;
            justify-content: space-between;
            align-items: center;
            width: 100% !important;
            padding: 12px 0 !important;
            border-bottom: 1px solid var(--carmel-color-border);
            background: transparent !important;
            color: var(--alma-donker-blauw) !important;
            font-family: var(--carmel-font-body);
            font-size: 14px;
            font-weight: var(--carmel-font-weight-medium);

            &::after {
                content: '';
                border: 4px solid transparent;
                border-top-color: currentColor;
                margin-top: 4px;
            }

            &:hover {
                text-decoration: underline;
                text-underline-offset: 4px;
            }
        }

        > li.menu-inloggen-hulp > a {
            justify-content: center;
            padding-top: 16px !important;
            padding-bottom: 0 !important;
            border-bottom: 0;
            font-size: 12px;

            &::after {
                content: none;
            }
        }
    }

    /* Het verloopvlak van een hero bovenaan de pagina begint direct onder
       de bovenbalk: de hero schuift de hoogte van de hoofdrij (16 + 80px)
       omhoog, onder de header. Vervangt de negatieve marge die het patroon
       per rij instelt (−105px). */
    .entry-content > .herowrapper:first-child {
        margin-top: calc(-1 * (var(--alma-header-gap, 16px) + var(--alma-mainbar-h, 80px))) !important;
    }

    /* Headerbalk op pagina's zonder hero (Figma: Infohub-subpagina, FAQ,
       Locatie-artikel, Zoekresultaten, 404). Eerste rij in de Kadence
       Elements-templates (Post template, Infohub template): een
       verloopvlak precies zo hoog als de menubalk plus 16px boven en
       onder; de header valt eroverheen (zelfde negatieve marge als een
       hero, hierboven). Daaronder de inhoud op de lichte achtergrond. */
    .alma-headerband {
        margin-bottom: var(--alma-headerband-gap, 64px) !important;

        > .kt-row-column-wrap {
            padding: 0 16px !important; /* 16px van de rand, zoals de hero's */
        }

        > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
            min-height: calc(2 * var(--alma-header-gap, 16px) + var(--alma-mainbar-h, 80px));
            padding: 0 !important;
        }
    }
}