/* header.css  [deploy-kanaal: repo-API] — geïsoleerde header/nav-laag, geëxtraheerd uit style.css (onze versie a3d311d).
 * Geladen NÁ style.css zodat dit wint: repo-API-clobbers op style.css breken de header niet meer.
 * Hoort bij templates/layout.php (markup) + vlindertuin-header.js (menu-toggle). */

/* skip-link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--green-1);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ── header (desktop) ── */
.site-header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    transition:background .4s ease, box-shadow .4s ease, transform .4s ease;
}
.nav-backdrop{position:fixed;inset:0;background:rgba(41,39,35,.5);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;z-index:90;border:0}
body.nav-open .nav-backdrop{opacity:1;visibility:visible}
.site-nav__close{display:none}
.site-nav--secondary{display:none}
.site-header__inner{
    width:90%;max-width:var(--maxw);margin-inline:auto;
    min-height:var(--header-h);
    display:flex;align-items:center;gap:24px;
    transition:min-height .35s ease;
}
.site-logo{display:block;flex:0 0 auto}
.site-logo__img{height:48px;width:auto;transition:opacity .35s ease}
.site-logo__img--white{position:absolute;top:0;left:0}
.site-logo{position:relative}
/* default (boven hero): wit logo zichtbaar */
.site-logo__img--color{opacity:0}
.site-logo__img--white{opacity:1}

/* rechterkolom: bovenbalk (contact + vlaggen) boven de menu-items */
.site-header__main{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:15px}
.site-header__util{display:flex;align-items:center;gap:20px;
    padding-right:22px;          /* lijnt de laatste vlag uit op de 'k' van 'Boek' */
    max-height:40px;overflow:hidden;
    transition:max-height .35s ease, opacity .3s ease, transform .35s ease}
.site-header__contact{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:13px;font-weight:500;
    transition:color .25s ease,opacity .25s ease;opacity:.92}
.site-header__contact:hover{opacity:1}
.site-header__contact svg{flex:0 0 auto}
.site-header__lang{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.site-header__lang a{display:block;opacity:.6;transition:opacity .25s,transform .25s}
.site-header__lang a.is-active,.site-header__lang a:hover{opacity:1;transform:translateY(-1px)}
.site-header__lang img{display:block;width:18px;height:18px;border-radius:50%}

.site-header__nav{display:flex;align-items:center;gap:16px}
.site-nav__ctas--mobile{display:none}
.site-nav__list{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.site-nav__link{
    font-size:14.5px;font-weight:500;color:#fff;
    padding:6px 2px;position:relative;transition:color .25s ease;
}
.site-nav__link::after{
    content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
    background:currentColor;transition:right .3s ease;border-radius:2px;
}
.site-nav__link:hover::after,.site-nav__item--active .site-nav__link::after{right:0}
.site-header__cta{padding:6px 16px 7px;line-height:1;box-shadow:none;white-space:nowrap;font-size:13.5px;margin-inline-start:.5rem}
.site-header__cta:hover{transform:none;box-shadow:none;filter:brightness(.93)}
.site-header__menu-toggle{display:none;margin-left:auto;background:none;border:0;color:#fff;cursor:pointer}

/* gescrolde / sticky toestand */
.site-header.is-stuck{
    background:var(--white);
    box-shadow:0 6px 24px -12px rgba(41,39,35,.35);
}
.site-header.is-stuck .site-logo__img--color{opacity:1}
.site-header.is-stuck .site-logo__img--white{opacity:0}
.site-header.is-stuck .site-logo__img{height:42px}
.site-header.is-stuck .site-nav__link{color:var(--ink)}
.site-header.is-stuck .site-header__contact{color:var(--green-1)}
.site-header.is-stuck .site-header__menu-toggle{color:var(--ink)}

/* ── header-bg per pagina (Navigation home_fixed/page_fixed → data-header-fixed) ── */
body[data-header-fixed="0"] .site-header{background:var(--white);box-shadow:0 6px 24px -12px rgba(41,39,35,.35)}
body[data-header-fixed="0"] .site-logo__img--color{opacity:1}
body[data-header-fixed="0"] .site-logo__img--white{opacity:0}
body[data-header-fixed="0"] .site-nav__link{color:var(--ink)}
body[data-header-fixed="0"] .site-header__contact{color:var(--green-1)}
body[data-header-fixed="0"] .site-header__menu-toggle{color:var(--ink)}

/* ── header (mobiel) ── */
@media (max-width:860px){
    .site-header__menu-toggle{display:block;order:3;margin-left:14px}
    .site-header__main{order:2;margin-left:auto;flex-direction:row;align-items:center;gap:0}
    .site-header__util{gap:14px}
    .site-header__contact{display:none}              /* telefoon/e-mail in mobiel menu, niet in balk */
    .site-header__nav{
        position:fixed;top:0;right:0;bottom:0;width:min(84vw,340px);
        flex-direction:column;align-items:stretch;gap:0;
        background:#fff;padding:96px 28px 28px;
        transform:translateX(100%);transition:transform .35s ease;
        box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);
        overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    }
    body.nav-open .site-header__nav{transform:translateX(0)}
    .site-nav__list{flex-direction:column;gap:6px;width:100%}
    .site-nav__link{color:var(--ink);font-size:17px;display:block;padding:10px 0;width:100%}
    .site-header .site-nav__link::after{display:none}
    .site-header__cta{margin-top:18px;width:100%}
    .site-nav__close{display:flex;position:absolute;top:18px;right:20px;padding:6px;background:none;border:0;color:var(--ink);cursor:pointer;line-height:0}
    .site-nav--secondary{display:block;width:100%;margin-top:20px;padding-top:16px;border-top:1px solid var(--bl-cream-dark,#e7e2d8)}
    .site-nav__heading{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#8a8475;margin-bottom:4px}
    .site-nav--secondary .site-nav__link{font-size:15px;color:#6b665b;padding:8px 0}
    body.nav-open{overflow:hidden}
}

/* ── hero achtergrond (--hb-m/d worden per slide gezet door hero.php) ─────────
 * Staat hier zodat Age's style.css-deploys deze regel niet kunnen clobberen. */
.hero__slide{background-image:var(--hb-m)}
@media(min-width:769px){.hero__slide{background-image:var(--hb-d)}}

/* ── generieke CMS-button (.cms-cta) ──────────────────────────────────────────
 * Baseline die ::before/::after-effecten (sweep, glow) en .button--text-animaties
 * mogelijk maakt. position:relative + overflow:hidden clipt effecten tot de border-
 * radius; isolation:isolate voorkomt z-index-lekkage; inline-flex lijnt icon + tekst.
 * .button--text krijgt z-index:1 zodat het altijd boven een ::before-laag blijft.
 * Het volledige design (kleur, spacing, border, hover) komt via ButtonDesignRenderer
 * → gescopte class `.cms-cta--<hash>` (zie SiteApp + layout.php). */
.btn.cms-cta{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:.5em;background:var(--bg);color:var(--fg)}
.btn.cms-cta .button--text{position:relative;z-index:1}

/* ── zoek-filterbalk (/vakantiewoningen) ──────────────────────────────────────
 * Sortering uiterst rechts; "filters wissen" naast de filters i.p.v. helemaal
 * rechts. Override op style.css (.result-filters__reset had margin-left:auto).
 * Via flex `order`: facetten/prijs (0) → reset (1, direct na de filters) → sort
 * (2, met margin-left:auto → tegen de rechterrand). */
.result-filters__field:has(select[data-f="sort"]){margin-left:auto;order:2}
.result-filters__reset{margin-left:0;order:1}