/* Haags.nl — header en footer in de groen/gele shop-huisstijl, SITE-BREED.
 *
 * HAAGS-ONLY: dit bestand heeft géén tegenhanger op sjaakbralide (die site
 * heeft een eigen header/footer). Het hoort dus niet bij de 1-op-1 gekopieerde
 * shopbestanden (ShopTheme.css / CartButton.css) — daar niets van overzetten.
 *
 * De header en de footer komen uit het Etch-template (post 91) en worden
 * gestyled met Etch-styles die AutomaticCSS-variabelen gebruiken
 * (--primary / --bg-primary-dark = marineblauw #213875). Dit bestand is een
 * override-laag: de ACSS-instellingen en de Etch-styles blijven ongemoeid, zodat
 * de blauwe huisstijl in één handeling terug te zetten is (bestand weghalen).
 * Keerzijde: in de Etch-builder zie je nog de blauwe versie.
 *
 * Kleuren zijn dezelfde waarden als de --sb-* in ShopTheme.css. */

:root {
	--hg-green-dark: #1E7A54;
	--hg-green-deep: #196845;
	--hg-yellow: #F7E87D;
	--hg-white: #FFFFFF;
}

/* ============================================================
 * Header
 * ============================================================ */

/* De oude groene balk-navigatie is vervangen door de code-owned scaling
 * hamburger-nav (src/Site/Patterns/HamburgerNav, site-breed via wp_footer).
 * Daarom verbergen we de hele Etch-header hier. De losse cart-knop en het
 * hamburgermenu zweven er los overheen. De styling-regels hieronder blijven
 * staan voor als de balk ooit terugkomt (bestand of deze regel weghalen).
 * De footer (verderop) blijft wél gestyled en zichtbaar. */
.header-wrapper {
	display: none !important;
}

/* Ook de BUITENSTE template-part-wrapper om die (verborgen) Etch-header heen
 * dichtklappen: die houdt zijn eigen padding en bleef zo op de archief-
 * templates (shop-categoriepagina's — reguliere pagina's renderen dit part
 * niet) als lege, transparante strook van ~27px tussen de shop-banner en de
 * producten staan, waar de groene reveal-footer als streep doorheen schemerde. */
body > header.wp-block-template-part {
	display: none !important;
}

/* LAYOUT-FIX (geen kleur) — de balk liep rechts van het scherm af.
 * .header-wrapper is `position: fixed` maar heeft géén left/right, dus hij
 * gaat op zijn STATISCHE positie staan: 80px vanaf links, want de ouder
 * (.wp-block-template-part) heeft 80px padding. Tegelijk is hij 100vw breed,
 * dus hij steekt er rechts precies die 80px overheen. Op brede schermen valt
 * dat nauwelijks op, op een laptop wél. Insets expliciet op 0 zetten lost het
 * op; de groene balk (.header__container) houdt zijn eigen 80px marge, dus de
 * bedoelde inspringing aan beide kanten blijft.
 *
 * Dit is een bug in het Etch-template, niet in de restyle (met en zonder dit
 * bestand staat de balk even scheef). Netter is het om left/right in de
 * Etch-style van .header-wrapper te zetten; dan klopt het ook in de builder. */
.header-wrapper {
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
}

/* De witte balk zelf. */
.header__container {
	background-color: var(--hg-green-dark) !important;
}

/* SPECIFICITEIT — het Etch-template drukt zijn eigen menukleuren af in een
 * INLINE <style> in de pagina, met !important:
 *   .header-wrapper .nav__list > li:not(:last-of-type) > a { color: #213875 !important }
 *   .menu-wrapper   .nav__list > li:last-of-type   > a { background: #213875 }
 * Een inline <style> staat ná dit bestand in de cascade, dus bij gelijke
 * specificiteit wint hij. Daarom hangt er hieronder overal `.menu-wrapper`
 * extra voor: dat tilt de selector één klasse hoger (0,4,2 vs 0,3,2). Blijft
 * het menu blauw na een template-wijziging, kijk dan hier eerst. */

/* Menulinks: wit, geel bij hover. */
.header-wrapper .menu-wrapper .nav__list > li.menu-link > a {
	color: var(--hg-white) !important;
}
.header-wrapper .menu-wrapper .nav__list > li.menu-link > a:hover,
.header-wrapper .menu-wrapper .nav__list > li.menu-link > a:focus-visible {
	color: var(--hg-yellow) !important;
}

/* Actieve pagina: alléén gele tekst, GEEN vlak. Het template zet hier een
 * bijna-witte pil neer (oklch(0.95 0 0)) met krappe padding; naast de gele
 * Contact-knop leverde dat twee pillen naast elkaar op. */
.header-wrapper .menu-wrapper .nav__list > li.menu-link > a.active-link {
	background-color: transparent !important;
	color: var(--hg-yellow) !important;
}

/* "Shop categorieën"-uitklapper + het pijltje. */
.header-wrapper .menu-wrapper .menu-dropdown__trigger,
.header-wrapper .menu-wrapper .menu-dropdown__trigger-label,
.header-wrapper .menu-wrapper .menu-dropdown__trigger-icon,
.header-wrapper .menu-wrapper .menu-dropdown__trigger-icon-wrapper svg {
	color: var(--hg-white) !important;
}
.header-wrapper .menu-wrapper .menu-dropdown__trigger:hover,
.header-wrapper .menu-wrapper .menu-dropdown__trigger:hover .menu-dropdown__trigger-label {
	color: var(--hg-yellow) !important;
}

/* Hover- en open-staat: het template legt hier hetzelfde bijna-witte vlak neer.
 * Ook dat weghalen — de kleurwissel naar geel is markering genoeg, en zo blijft
 * "Contact" de enige knopvorm in de balk. */
.header-wrapper .menu-wrapper .nav__list > li.menu-link > a:hover,
.header-wrapper .menu-wrapper .nav__list > li.menu-link > a:focus-visible,
.header-wrapper .menu-wrapper .menu-dropdown__trigger:hover,
.header-wrapper .menu-wrapper .menu-dropdown__trigger.active,
.header-wrapper .menu-wrapper .menu-dropdown.is-open .menu-dropdown__trigger {
	background-color: transparent !important;
}
.header-wrapper .menu-wrapper .menu-dropdown.is-open .menu-dropdown__trigger,
.header-wrapper .menu-wrapper .menu-dropdown.is-open .menu-dropdown__trigger-label,
.header-wrapper .menu-wrapper .menu-dropdown.is-open .menu-dropdown__trigger-icon {
	color: var(--hg-yellow) !important;
}

/* Uitklappaneel: donkergroen i.p.v. wit, met witte links. */
.menu-dropdown__content,
.menu-dropdown__content-wrapper,
.menu-dropdown-back-button {
	background-color: var(--hg-green-deep) !important;
}

/* Alleen het MOBIELE menupaneel krijgt het diepe groen. Op desktop is
 * .menu-wrapper__inner de container om de hele menugroep — die een eigen
 * kleur geven levert een donkerder blok midden in de balk op. */
.menu-wrapper:not(.desktop) .menu-wrapper__inner {
	background-color: var(--hg-green-deep) !important;
}
.menu-wrapper.desktop .menu-wrapper__inner {
	background-color: transparent !important;
}
.header-wrapper .menu-wrapper .menu-dropdown__content a {
	color: var(--hg-white) !important;
}
.header-wrapper .menu-wrapper .menu-dropdown__content a:hover,
.header-wrapper .menu-wrapper .menu-dropdown__content a:focus-visible {
	color: var(--hg-yellow) !important;
	background-color: rgba(255, 255, 255, .1) !important;
}
.header-wrapper .menu-wrapper .menu-dropdown-back-button,
.header-wrapper .menu-wrapper .menu-dropdown-back-button__label {
	color: var(--hg-yellow) !important;
}

/* "Contact" is het LAATSTE li in de lijst (daarna komt nog een div met de
 * mini-winkelwagen, vandaar :last-of-type en niet :last-child) en was een
 * blauwe knop -> geel met groene tekst, zoals de "Bestellen"-knoppen. */
.header-wrapper .menu-wrapper .nav__list > li:last-of-type > a {
	background-color: var(--hg-yellow) !important;
	color: var(--hg-green-dark) !important;
	border-color: var(--hg-yellow) !important;
}
.header-wrapper .menu-wrapper .nav__list > li:last-of-type > a:hover,
.header-wrapper .menu-wrapper .nav__list > li:last-of-type > a:focus-visible {
	background-color: #E6C044 !important;
	color: var(--hg-green-dark) !important;
}

/* Mini-winkelwagen in de balk (icoon + bedrag). */
.header__container .fct-mini-cart-wrap,
.header__container .fct-mini-cart-wrap svg,
.header__container .fct-mini-cart-amount,
.header__container .fct-mini-cart-button {
	color: var(--hg-white) !important;
}
.header__container .fct-mini-cart-wrap:hover,
.header__container .fct-mini-cart-wrap:hover svg,
.header__container .fct-mini-cart-wrap:hover .fct-mini-cart-amount {
	color: var(--hg-yellow) !important;
}

/* Aantal-bolletje bij het karretje (was donkerblauw met witte tekst) —
 * dezelfde geel/groen-combinatie als de badge op de zwevende knop. */
.header__container .fct-mini-cart-badge {
	background-color: var(--hg-yellow) !important;
	color: var(--hg-green-dark) !important;
	font-weight: 700 !important;
}

/* Logo: de 18 vormen hebben een INLINE style met een vaste kleur (13x
 * donkerblauw, 5x rood), dus alleen !important wint. Alles eerst wit maken —
 * zo staat er nooit blauw-op-groen, ook niet heel even vóór hg-logo.js draait.
 * Dat script zet daarna de vijf rode accenten om naar geel. */
.header__logo svg path,
.header__logo svg polygon,
.header__logo svg circle,
.header__logo svg rect,
.header__logo svg ellipse {
	fill: var(--hg-white) !important;
}

/* Hamburger-lijnen op mobiel. */
.nav-burger-line {
	background-color: var(--hg-white) !important;
}

/* ============================================================
 * Footer
 * ============================================================ */

.footer-alpha__main {
	background-color: var(--hg-green-dark) !important;
}
.footer-alpha__bottom {
	background-color: var(--hg-green-deep) !important;
}

/* Kolomkoppen geel, links wit met gele hover. */
.footer-alpha__nav-column-heading {
	color: var(--hg-yellow) !important;
}
.footer-alpha__nav-link,
.footer-alpha__text,
.footer-alpha__copyright-text {
	color: var(--hg-white) !important;
}
.footer-alpha__nav-link:hover,
.footer-alpha__nav-link:focus-visible {
	color: var(--hg-yellow) !important;
}
.footer-alpha__copyright-text {
	color: rgba(255, 255, 255, .8) !important;
}

/* Eventuele knop in de footer meenemen. */
.footer-alpha__cta {
	background-color: var(--hg-yellow) !important;
	color: var(--hg-green-dark) !important;
	border-color: var(--hg-yellow) !important;
}

/* Het footerlogo staat al in de "op donker"-variant (wit + rood). Alleen de
 * rode accenten worden door hg-logo.js geel gemaakt; wit blijft wit. */