/*
 * hm_header — Site header styling (PHP fallback alleen)
 *
 * BELANGRIJK: Dit bestand bevat alleen styling voor de PHP-template fallback
 * (wp-content/themes/allroundweb-child/aw-modules/hm_header/hm_header.php),
 * voor het geval de Elementor Theme-Builder header ooit verwijderd wordt.
 *
 * Alle Elementor-specifieke CSS (header dropdown, footer styling, hero pill
 * overlap, site-wide rules) zit in Elementor zelf:
 *   - Site Settings → Custom CSS               (hero pill + sibling padding)
 *   - Theme Builder → Header → Page Settings   (header dropdown overlay)
 *   - Theme Builder → Footer → Page Settings   (footer dropdown, burger, logo)
 *
 * Pas die daar aan, niet hier.
 *
 * Native CSS nesting (descendant only — geen Sass-style class concatenation).
 * Class prefix awcf- per project standard. Tokens uit hm_branding.
 */

/* ---------- Skip link ---------- */
.awcf-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
}
.awcf-skip-link:focus {
    left: 1rem;
    top: 1rem;
    padding: .5rem 1rem;
    background: var(--hm-color-navy, #10133f);
    color: var(--hm-color-paper, #fff);
}

/* ---------- Header bar (PHP fallback) ----------
 * `header.awcf-site-header` ipv `.awcf-site-header` om de legacy rule
 * `header[role="banner"]` uit hm_branding.css te overrulen.
 */
header.awcf-site-header {
    position: relative;
    z-index: 99998;
    background: var(--hm-color-gold-soft, #d7c79a);
    border-bottom: 0;
    font-family: var(--hm-font-heading, 'Nunito'), system-ui, sans-serif;
    transition: box-shadow .25s ease, padding .25s ease;
}
header.awcf-site-header.is-sticky {
    position: sticky;
    top: 0;
    box-shadow: 0 4px 16px rgba(16, 19, 63, .18);
}

.awcf-site-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 64px;
}

.awcf-site-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
    margin-block: -12px;
    z-index: 2;
}
.awcf-site-header__logo {
    display: block;
    height: clamp(56px, 7vw, 84px);
    width: auto;
    max-width: 280px;
}
.awcf-site-header__title {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--hm-color-navy, #10133f);
}

/* ---------- Burger button (mobile, PHP fallback) ---------- */
.awcf-site-header__burger {
    display: none;
    border: 0;
    padding: .5rem;
    cursor: pointer;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.awcf-site-header__burger,
.awcf-site-header__burger:hover,
.awcf-site-header__burger:focus,
.awcf-site-header__burger:active {
    background: transparent;
    outline: none;
}
.awcf-site-header__burger:focus-visible {
    outline: 2px solid var(--hm-color-navy, #10133f);
    outline-offset: 2px;
}
.awcf-site-header__burger-bar {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--hm-color-navy, #10133f);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.awcf-site-header__burger[aria-expanded="true"] .awcf-site-header__burger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.awcf-site-header__burger[aria-expanded="true"] .awcf-site-header__burger-bar:nth-child(2) {
    opacity: 0;
}
.awcf-site-header__burger[aria-expanded="true"] .awcf-site-header__burger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Primary menu (PHP fallback, desktop) ---------- */
.awcf-primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: clamp(.5rem, 1.5vw, 1.25rem);
}
.awcf-primary-menu > li {
    position: relative;
}
.awcf-primary-menu > li > a {
    display: inline-block;
    padding: 1rem .5rem;
    color: var(--hm-color-navy, #10133f);
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .01em;
    transition: color .15s ease;
}
.awcf-primary-menu > li > a:hover,
.awcf-primary-menu > li > a:focus-visible {
    color: var(--hm-color-gold, #9d8100);
    outline: none;
}
.awcf-primary-menu > li.current-menu-item > a,
.awcf-primary-menu > li.current_page_item > a,
.awcf-primary-menu > li.current-menu-ancestor > a {
    color: var(--hm-color-gold, #9d8100);
}

.awcf-primary-menu > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .35rem;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
    transition: transform .2s ease;
}
.awcf-primary-menu > li.menu-item-has-children:hover > a::after,
.awcf-primary-menu > li.menu-item-has-children.is-open > a::after {
    transform: rotate(180deg);
}

/* ---------- Submenu (PHP fallback) ---------- */
.awcf-primary-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--hm-color-paper-warm, #faf7ef);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 28px rgba(16, 19, 63, .18);
    border-top: 3px solid var(--hm-color-gold, #9d8100);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 99999;
}
.awcf-primary-menu .sub-menu > li > a {
    display: block;
    padding: .65rem 1.1rem;
    color: var(--hm-color-navy, #10133f);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.awcf-primary-menu .sub-menu > li > a:hover,
.awcf-primary-menu .sub-menu > li > a:focus-visible {
    background: var(--hm-color-gold-soft, #d7c79a);
    color: var(--hm-color-navy, #10133f);
    outline: none;
}

.awcf-primary-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    border-top: 0;
    border-left: 3px solid var(--hm-color-gold, #9d8100);
    border-radius: 0 8px 8px 0;
}

.awcf-primary-menu > li:hover > .sub-menu,
.awcf-primary-menu > li:focus-within > .sub-menu,
.awcf-primary-menu > li.is-open > .sub-menu,
.awcf-primary-menu .sub-menu > li:hover > .sub-menu,
.awcf-primary-menu .sub-menu > li:focus-within > .sub-menu,
.awcf-primary-menu .sub-menu > li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* ---------- Mobile (PHP fallback, ≤ 900px) ---------- */
@media (max-width: 900px) {
    .awcf-site-header__burger {
        display: inline-flex;
    }
    .awcf-site-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--hm-color-paper-warm, #faf7ef);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        box-shadow: 0 12px 24px rgba(16, 19, 63, .12);
    }
    .awcf-site-header__nav.is-open {
        max-height: 80vh;
        overflow-y: auto;
    }
    .awcf-primary-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem 0;
    }
    .awcf-primary-menu > li > a {
        padding: .85rem clamp(1rem, 4vw, 2rem);
        font-size: 1rem;
        border-bottom: 1px solid var(--hm-color-line, #e7e3d4);
    }
    .awcf-primary-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
    }
    .awcf-primary-menu .sub-menu > li > a {
        padding-left: clamp(2rem, 8vw, 3rem);
        font-size: .95rem;
    }
    .awcf-primary-menu > li.is-open > .sub-menu,
    .awcf-primary-menu .sub-menu > li.is-open > .sub-menu {
        max-height: 800px;
    }
    .awcf-site-header__brand {
        margin-block: -8px;
    }
    .awcf-site-header__logo {
        height: clamp(48px, 12vw, 64px);
    }
}

/* ---------- WP-adminbar offset (PHP fallback) ---------- */
.admin-bar header.awcf-site-header.is-sticky {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar header.awcf-site-header.is-sticky {
        top: 46px;
    }
}