/*
 * Pretzo theme — header-footer.css
 * Site-chrome: topbar, hoofdheader, navigatie (incl. mobiel), footer.
 * Breekpunt 782px volgt de WordPress-brede admin-conventie.
 */

/* ---------- Header ---------- */

.site-header {
	position: relative;
	background: var(--wp--preset--color--white, #fff);
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e5ea);
}

.topbar {
	background: var(--wp--preset--color--navy, #111827);
	color: var(--wp--preset--color--white, #fff);
	font-size: var(--wp--preset--font-size--small);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	padding-block: 0.4rem;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding-block: 1.1rem;
}

@media (min-width: 782px) {
	.site-header__inner {
		padding-block: 1.4rem;
	}
}

.site-branding .custom-logo {
	max-height: 64px;
	width: auto;
}

.site-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 800;
}

.site-title a {
	color: var(--wp--preset--color--navy, #111827);
	text-decoration: none;
}

/* Mobiel menu-knop */

.site-header__nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--border, #e2e5ea);
	border-radius: var(--wp--custom--radius--sm, 6px);
	background: transparent;
	cursor: pointer;
	order: 3;
}

.site-header__nav-toggle-icon,
.site-header__nav-toggle-icon::before,
.site-header__nav-toggle-icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--wp--preset--color--navy, #111827);
	border-radius: 2px;
	position: relative;
	transition:
		transform 0.2s ease,
		opacity 0.2s ease;
}

.site-header__nav-toggle-icon::before {
	content: "";
	position: absolute;
	top: -6px;
}

.site-header__nav-toggle-icon::after {
	content: "";
	position: absolute;
	top: 6px;
}

.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-icon {
	background: transparent;
}

.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-icon::before {
	transform: translateY(6px) rotate(45deg);
}

.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-icon::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Navigatie */

.site-navigation__list {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(1rem, 2vw, 2rem);
	margin: 0;
	padding: 0;
}

.site-navigation__list a {
	display: inline-block;
	color: var(--wp--preset--color--navy, #111827);
	text-decoration: none;
	font-weight: 600;
	padding: 0.5em 0;
}

.site-navigation__list a:hover {
	color: var(--wp--preset--color--blue, #007bff);
}

/* Winkelwagen */

.site-header__actions {
	display: flex;
	align-items: center;
	order: 2;
}

.site-header__cart {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--navy, #111827);
}

.site-header__cart:hover {
	color: var(--wp--preset--color--blue, #007bff);
}

.site-header__cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.4em;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--accent, #ffb347);
	color: var(--wp--preset--color--navy, #111827);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* ---------- Responsive: mobiele navigatie ---------- */

@media (max-width: 781px) {
	.site-header__nav-toggle {
		display: inline-flex;
	}

	.site-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--wp--preset--color--white, #fff);
		border-bottom: 1px solid var(--wp--preset--color--border, #e2e5ea);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}

	.site-navigation.is-open {
		max-height: 80vh;
		overflow-y: auto;
	}

	.site-navigation__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem clamp(1rem, 4vw, 2.5rem) 1rem;
	}

	.site-navigation__list a {
		display: block;
		padding: 0.75em 0;
		border-bottom: 1px solid var(--wp--preset--color--border, #e2e5ea);
	}
}

@media (min-width: 782px) {
	.site-header__nav-toggle {
		display: none;
	}

	.site-navigation {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-navigation,
	.site-header__nav-toggle-icon,
	.site-header__nav-toggle-icon::before,
	.site-header__nav-toggle-icon::after {
		transition: none;
	}
}

/* Compacte header op telefoonbreedte: kleiner logo + minder padding,
   zodat logo + cart + hamburger nooit hoeven te wrappen of overflowen. */
@media (max-width: 600px) {
	.site-header__inner {
		padding-block: 0.85rem;
	}

	.site-branding .custom-logo {
		max-height: 44px;
		max-width: 160px;
	}

	.site-title {
		font-size: 1.125rem;
	}
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--wp--preset--color--navy, #111827);
	color: var(--wp--preset--color--white, #fff);
}

.site-footer a {
	color: var(--wp--preset--color--white, #fff);
}

.site-footer a:hover {
	color: var(--wp--preset--color--accent, #ffb347);
}

.site-footer__inner {
	padding-block: var(--wp--preset--spacing--lg, 2.5rem) var(--wp--preset--spacing--md, 1.5rem);
}

.site-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--lg, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.site-footer__col--brand .site-title {
	font-size: var(--wp--preset--font-size--h3);
}

.site-footer .site-title {
	color: var(--wp--preset--color--white, #fff);
}

.site-footer .site-title a {
	color: var(--wp--preset--color--white, #fff);
}

.site-footer__tagline {
	margin-top: 0.5em;
	color: rgba(255, 255, 255, 0.7);
}

/*
 * Labels/copy op de navy-achtergrond gebruiken bewust een witte
 * alpha-tint i.p.v. het --muted-token: --muted (#4B5563) is gekalibreerd
 * voor lichte achtergronden en zou hier onvoldoende contrast geven.
 */
.site-footer__heading {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 1em;
}

.site-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	font-size: 1.0625rem;
}

.site-footer__nav-list a {
	text-decoration: none;
}

.site-footer__nav-list a:hover {
	text-decoration: underline;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: var(--wp--preset--spacing--lg, 2.5rem);
	padding-top: var(--wp--preset--spacing--sm, 1rem);
	font-size: var(--wp--preset--font-size--base);
	color: rgba(255, 255, 255, 0.65);
}

.site-footer__bottom p {
	margin: 0;
}

@media (max-width: 600px) {
	.site-footer__inner {
		padding-block: 1.75rem 1.25rem;
	}

	.site-footer__grid {
		gap: 1.5rem;
	}

	.site-footer__heading {
		margin-bottom: 0.7em;
	}

	.site-footer__bottom {
		margin-top: 1.5rem;
	}
}

/* ---------- Third-party: WhatsApp-floatingknop (Code Snippets) ----------
 * Deze knop wordt sitebreed gerenderd door een bestaande Code Snippets-
 * snippet buiten dit theme om (zie docs/architecture.md); we kunnen die
 * code niet aanpassen vanuit het theme. De snippet zet zijn eigen
 * !important-stijlen in een <style>-blok dat via wp_footer laat print,
 * dus overschrijven we hier bewust met een specifiekere selector +
 * !important — bij gelijke "importance" wint hogere specificiteit,
 * ongeacht volgorde in de broncode.
 */
body .pretzo-whatsapp-floating {
	/* De snippet zet dit zelf op 999999 — hóger dan Complianz' cookie-
	   banner (z-index 99999) en diens "manage consent"-heropen-knop
	   (9998), waardoor WhatsApp nu boven het consentmechanisme kan
	   liggen. Forceer een veilig lagere waarde. */
	z-index: 500 !important;
}

@media (max-width: 600px) {
	body .pretzo-whatsapp-floating {
		right: 14px !important;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
		width: 52px !important;
		height: 52px !important;
		padding: 0 !important;
		gap: 0 !important;
		justify-content: center !important;
		border-radius: 999px !important;
	}

	body .pretzo-whatsapp-floating .pretzo-whatsapp-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	body .pretzo-whatsapp-floating .pretzo-whatsapp-icon {
		font-size: 24px !important;
	}
}