/**
 * Header (Kadence header-builder), desktop.
 *
 * Figma TCC: SECTION COMPONENTS → Navigation → "Navigatie". De header
 * ligt op de lichte hero (TCC Grijs). Van links naar rechts:
 * - het logo (donkere tekst, 233 × 47), los op de hero;
 * - één witte balk (80px hoog, afronding 24) van na het logo tot de
 *   rechterkant van de inhoud, met links het menu (16px bold TCC Blauw,
 *   16px binnenruimte en 8px tussen de items, geen streepjes) en rechts
 *   het zoekknopje (64px breed, afronding 16, dunne rand) en de knop
 *   "Contact" (Kobalt Blauw, afronding 16, 24px binnenruimte, wit bold),
 *   8px binnen de balk.
 * Daarboven een smalle bovenbalk met Schoolgids, Actueel, Werken bij en
 * Inloggen (secundair menu, rechts).
 *
 * Indeling (wat waar staat) en de transparante header komen uit de
 * Customizer: logo links, menu in het midden, zoeken en knop rechts. De
 * witte balk is het midden + rechts samen (hieronder); kleuren en vorm
 * van zoekknop en Contact staan hier, zodat ze in het thema vastliggen.
 */

/* Breed scherm (container op volle breedte, 1471 + scrollbalk): Kadence
   zet in de container van de hoofdrij nog 16px binnenruimte, waardoor
   logo en knoppen 16px binnen de inhoud staan (de bovenbalk heeft een
   bredere container en staat al goed). Figma: logo, hero-tekst en foto
   op dezelfde lijn als de rest van de inhoud. */
@media (min-width: 1488px) {
    #main-header .site-main-header-wrap .site-header-row-container-inner > .site-container {
        padding-inline: 0;
    }

    /* Inloggen blijft recht boven de rechterkant van de Contact-knop */
    #main-header .site-top-header-wrap .site-header-row-container-inner > .site-container {
        padding-right: 16px !important; /* wint van de 24px hieronder (1025+) */
    }
}

@media (min-width: 1025px) {

    /* Hoofdrij: geen achtergrond, 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;
        }
    }

    /* Logo links, daarnaast de witte balk die de rest van de rij vult */
    #main-header .site-main-header-inner-wrap {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    #main-header .site-main-header-inner-wrap > .site-header-main-section-left {
        flex: 0 0 auto;

        /* lege kolom van Kadence naast het logo */
        > .site-header-main-section-left-center {
            display: none;
        }
    }

    #main-header .site-branding img.custom-logo {
        width: 233px !important;
        max-width: none !important;
        height: auto !important;
    }

    /* De witte balk: midden (menu) + rechts (zoeken, Contact) */
    #main-header .site-main-header-inner-wrap > :is(.site-header-main-section-center, .site-header-main-section-right) {
        align-self: stretch;
        height: 80px;
        background: var(--tcc-neutral-0);
    }

    #main-header .site-main-header-inner-wrap > .site-header-main-section-center {
        flex: 1 1 auto;
        justify-content: flex-start;
        border-radius: var(--carmel-radius-lg) 0 0 var(--carmel-radius-lg);
    }

    #main-header .site-main-header-inner-wrap > .site-header-main-section-right {
        flex: 0 0 auto;
        gap: 10px;
        margin-left: -8px; /* de 8px gap van de rij: de balk loopt door */
        padding: 8px;
        border-radius: 0 var(--carmel-radius-lg) var(--carmel-radius-lg) 0;

        > .site-header-main-section-right-center {
            display: none;
        }

        > .site-header-item {
            height: 100%;
            margin: 0;
        }
    }

    /* Menu: links in de balk, items zonder streepjes */
    #main-header .header-navigation .primary-menu-container > ul.menu {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 80px;
        padding: 0 8px;
        background: transparent;
        border-radius: 0;

        /* plugin (site.css) zet li op height: 100% van de rij */
        > li.menu-item {
            height: auto;
            border: 0 !important;
        }

        > li.menu-item > a {
            display: flex;
            align-items: center;
            min-height: 64px;
            padding: 0 16px;
            color: var(--tcc-blauw);
            font-family: var(--carmel-font-body);
            font-size: 16px;
            font-weight: 700;
            line-height: 100%;
        }
    }

    /* Zoekknopje: 64px breed, afronding 16, dunne rand, blauw icoon (de
       plugin, patterns.css, zet de rand op zwart en wint van de Customizer) */
    #main-header .search-toggle-open-container .search-toggle-open.search-toggle-style-bordered.search-toggle-style-bordered {
        width: 64px;
        height: 100%;
        padding: 4px 16px;
        border: 0.5px solid rgba(0, 0, 0, 0.3);
        border-radius: var(--carmel-radius-md);
        background: transparent;
        color: var(--tcc-blauw);
    }

    #main-header .search-toggle-open-container {
        height: 100%;
    }

    /* Contact: Kobalt Blauw, afronding 16, wit bold */
    #main-header .header-button-wrap,
    #main-header .header-button-inner-wrap {
        height: 100%;
    }

    #main-header .header-button-wrap .header-button {
        display: inline-flex;
        align-items: center;
        height: 100%;
        min-height: 0;
        padding: 4px 24px !important;
        border: 0 !important;
        border-radius: var(--carmel-radius-md) !important;
        background: var(--tcc-kobalt-blauw) !important;
        color: var(--tcc-neutral-0) !important;
        font-family: var(--carmel-font-body);
        font-size: 16px;
        font-weight: 700;
        line-height: 100%;
    }

    /* ------------------------------------------------------------
       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 > :is(.herowrapper, .ptrn-herobigimage, .ptrn-profielen-overzicht, .alma-infohub-pagina):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;
        }
    }
}

/* Headerbalk op pagina's zonder hero, tablet en mobiel: zoals de hero's
   schuift het verloopvlak 86px omhoog onder de (mobiele) header en is het
   iets hoger dan die header (81px). */
@media (max-width: 1024px) {
    :is(.entry-content, .content-wrap) > .alma-headerband:first-child {
        margin-top: -86px !important;
    }

    .alma-headerband {
        margin-bottom: 32px !important;

        > .kt-row-column-wrap {
            padding: 0 16px !important;
        }

        > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
            min-height: 96px;
            padding: 0 !important;
        }
    }
}

/* Uitklapmenu van het hoofdmenu (desktop): eenvoudige witte kaart onder
   het menu-item, zoals het Inloggen-menu. Het megamenu uit Figma (lijst
   + foto's, Kadence Elements "Menu item …") volgt later. */
@media (min-width: 1025px) {
    #main-header .header-navigation .primary-menu-container > ul.menu > li.menu-item > ul.sub-menu {
        width: 300px !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);

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

        > li > a {
            width: 100% !important;
            padding: 10px 0 !important;
            background: transparent !important;
            color: var(--alma-donker-blauw) !important;
            font-family: var(--carmel-font-body);
            font-size: 16px;
            line-height: 120%;
            text-decoration: underline transparent;
            text-underline-offset: 4px;
            transition: text-decoration-color 0.2s;

            &:is(:hover, :focus-visible) {
                text-decoration-color: currentColor;
            }
        }
    }

    /* onzichtbare strook die het gat van 8px overbrugt, anders verdwijnt
       de hover op weg naar het uitklapmenu */
    #main-header .header-navigation .primary-menu-container > ul.menu > li.menu-item-has-children {
        position: relative;

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