/*
 * Art and Soul: globale chrome
 * Navigatiebalk + dropdown (Figma 69:745, 69:1266), mobiel menu (TT-modal,
 * herkleurd) en footer (Figma 69:746). Twenty Twenty-structuur en -JS blijven;
 * zijn maten en kleuren worden hier overschreven.
 */

:root {
	--as-nav-h: calc(var(--as-nav-logo-h) + 2 * var(--as-nav-padding-y)); /* 126px */
}

/* =====================================================================
   Logo
   ===================================================================== */

.as-logo {
	display: inline-block;
	color: var(--as-fg);
	line-height: 0;
	text-decoration: none;
}

.as-logo:hover,
.as-logo:focus {
	color: var(--as-fg);
}

.as-logo__svg {
	display: block;
	width: var(--as-nav-logo-w);
	height: var(--as-nav-logo-h);
	fill: currentColor;
}

/* =====================================================================
   Navigatiebalk
   ===================================================================== */

#site-header.as-nav {
	--as-nav-gap: var(--as-nav-item-gap);
	--as-nav-search-gap: var(--as-nav-icon-gap);
	background: var(--as-highlight);
	color: var(--as-fg);
	position: relative;
	z-index: 100;
}

.as-nav .header-inner.as-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--as-container);
	margin: 0 auto;
	padding: var(--as-nav-padding-y) var(--as-gutter);
}

.as-nav .header-titles-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.as-nav .header-titles {
	display: flex;
	align-items: center;
	margin: 0;
}

/* Hamburger (TT toont deze onder 1000px) */
.as-nav .toggle.as-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--as-fg);
}

.as-nav .as-nav__toggle .toggle-inner {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 26px;
	padding: 0;
}

.as-nav .as-nav__toggle .hamburger {
	display: block;
	width: 100%;
	height: 3px;
	margin: 0;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--as-transition), opacity var(--as-transition);
}

/* Open menu: hamburger wordt kruis (TT zet aria-expanded) */
.as-nav .as-nav__toggle[aria-expanded="true"] .hamburger:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.as-nav .as-nav__toggle[aria-expanded="true"] .hamburger:nth-child(2) {
	opacity: 0;
}

.as-nav .as-nav__toggle[aria-expanded="true"] .hamburger:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

.as-nav .header-navigation-wrapper {
	margin: 0;
}

.as-nav .primary-menu-wrapper {
	width: auto;
}

/* Menu-items */
.as-nav ul.primary-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--as-nav-gap);
	margin: 0;
	padding: 0;
	font-size: var(--as-text-nav-size);
	font-weight: var(--as-weight-bold);
	line-height: var(--as-text-nav-line);
	letter-spacing: 0;
}

.as-nav .primary-menu > li {
	display: flex;
	align-items: center;
	gap: var(--as-space-2);
	margin: 0;
	line-height: var(--as-text-nav-line);
	text-decoration: none; /* TT onderstreept de <li> zelf (.current_page_ancestor) → dubbele lijn */
}

.as-nav .primary-menu > li > a,
.as-nav .primary-menu > li.menu-item-has-children > a {
	padding: 0;
	color: var(--as-fg);
	font-weight: var(--as-weight-bold);
	text-decoration: none;
	white-space: nowrap;
}

.as-nav .primary-menu > li > a:hover,
.as-nav .primary-menu > li > a:focus,
.as-nav .primary-menu > li:hover > a,
.as-nav .primary-menu > li.focus > a,
.as-nav .primary-menu > li.current-menu-item > a,
.as-nav .primary-menu > li.current-menu-ancestor > a {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

/* Indicator bij submenu: merkdriehoek, -27.06° */
.as-nav .primary-menu > li > .icon {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	transform: none;
	color: var(--as-fg);
	pointer-events: none;
}

.as-nav .primary-menu > li > .icon::before {
	content: "";
	position: static;
	display: block;
	width: 11.78px;
	height: 10.17px;
	background: currentColor;
	-webkit-mask: url("../img/icon-arrow.svg") center / contain no-repeat;
	mask: url("../img/icon-arrow.svg") center / contain no-repeat;
	transform: rotate(-27.06deg);
	transition: transform var(--as-transition);
}

.as-nav .primary-menu > li > .icon::after {
	display: none;
}

.as-nav .primary-menu > li:hover > .icon::before,
.as-nav .primary-menu > li.focus > .icon::before {
	transform: rotate(-27.06deg) translateY(1px);
}

/* Dropdown (Figma 69:1266): paneel 260 breed, padding 16, items 18 bold op 12
   afstand; bovenkant 31 onder het item (Figma 103), rechterrand 24 voorbij het
   menu-item, pijl 33 vanaf rechts. `right` alleen in de open-state zetten: TT
   parkeert gesloten panelen op right: 9999rem; anders liggen alle (onzichtbare)
   panelen over elkaar en vangt het buurpaneel de muis. */
.as-nav .primary-menu ul {
	--as-dropdown-offset: 31px;
	display: flex;
	flex-direction: column;
	gap: var(--as-space-3);
	top: calc(100% + var(--as-dropdown-offset));
	width: max-content;
	min-width: 260px;
	max-width: 360px;
	padding: var(--as-space-4);
	background: var(--as-accent);
	color: var(--as-fg);
	border-radius: var(--as-radius);
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-bold-line);
}

.as-nav .primary-menu li.menu-item-has-children:hover > ul,
.as-nav .primary-menu li.menu-item-has-children:focus > ul,
.as-nav .primary-menu li.menu-item-has-children.focus > ul {
	right: calc(-1 * var(--as-space-5));
}

/* Hover-brug tussen item en paneel: overbrugt de volledige afstand */
.as-nav .primary-menu ul::before {
	height: var(--as-dropdown-offset);
}

/* Pijltje bovenop het paneel (Figma: driehoek 37×27, 15px zichtbaar, 33 vanaf rechts) */
.as-nav .primary-menu ul::after {
	right: 33px;
	bottom: auto;
	top: -15px;
	width: 37.24px;
	height: 27px;
	border: 0;
	background: var(--as-accent);
	-webkit-mask: url("../img/dropdown-pointer.svg") center / contain no-repeat;
	mask: url("../img/dropdown-pointer.svg") center / contain no-repeat;
}

.as-nav .primary-menu ul li {
	margin: 0;
	line-height: var(--as-text-body-bold-line);
}

.as-nav .primary-menu ul a,
.as-nav .primary-menu ul li.menu-item-has-children > a {
	padding: 0;
	color: var(--as-fg);
	font-weight: var(--as-weight-bold);
	text-decoration: none;
	white-space: normal;
}

.as-nav .primary-menu ul a:hover,
.as-nav .primary-menu ul a:focus,
.as-nav .primary-menu ul li.current-menu-item > a {
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.as-nav .primary-menu ul li.menu-item-has-children .icon {
	display: none;
}

/* Tussen 1000 en 1440 krimpen de menu-afstanden lineair mee:
   item-gap 71 → 16, zoek-gap 48 → 16 (TT toont het menu vanaf 1000px). */
@media (max-width: 1439px) {
	#site-header.as-nav {
		--as-nav-gap: clamp(16px, calc(16px + (100vw - 1000px) * 0.125), var(--as-nav-item-gap));
		--as-nav-search-gap: clamp(16px, calc(16px + (100vw - 1000px) * 0.0727), var(--as-nav-icon-gap));
	}
}

/* =====================================================================
   Mobiel menu (Twenty Twenty-modal, herkleurd)
   Eigen keuze: zelfde lime als de balk, submenu's in roze paneel.
   ===================================================================== */

/* De balk blijft zichtbaar boven de modal; de hamburger sluit (kruis). */
.menu-modal {
	background: var(--as-highlight);
	color: var(--as-fg);
	padding-top: var(--as-nav-h);
}

.admin-bar .menu-modal {
	padding-top: var(--as-nav-h);
}

.menu-modal .menu-wrapper.section-inner {
	width: 100%;
	max-width: none;
	padding: 0;
}

.menu-modal .menu-top {
	padding: 0;
}

/* TT's eigen sluitknop is overbodig: de hamburger in de balk sluit. */
.menu-modal button.close-nav-toggle {
	display: none;
}

.menu-modal .modal-menu {
	margin: 0;
	padding: 0 var(--as-gutter) var(--as-space-7);
}

.menu-modal .modal-menu li {
	border: 0;
	margin: 0;
}

.menu-modal .modal-menu > li > a,
.menu-modal .modal-menu > li > .ancestor-wrapper > a {
	font-size: var(--as-text-label-size);
	line-height: var(--as-text-label-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: 0;
}

.menu-modal .modal-menu a {
	padding: var(--as-space-3) 0;
	color: var(--as-fg);
	text-decoration: none;
}

.menu-modal .modal-menu a:hover,
.menu-modal .modal-menu a:focus,
.menu-modal .modal-menu li.current-menu-item > .ancestor-wrapper > a,
.menu-modal .modal-menu li.current_page_ancestor > .ancestor-wrapper > a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.menu-modal button.sub-menu-toggle {
	margin: 0;
	padding: 0 0 0 var(--as-space-5);
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--as-fg);
}

.menu-modal button.sub-menu-toggle svg {
	width: 14px;
	height: 9px;
}

.menu-modal .modal-menu ul {
	margin: var(--as-space-1) 0 var(--as-space-4);
	padding: var(--as-space-4);
	background: var(--as-accent);
	border-radius: var(--as-radius);
}

.menu-modal .modal-menu ul li {
	border: 0;
}

.menu-modal .modal-menu ul li a {
	padding: var(--as-space-2) 0;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-bold-line);
	font-weight: var(--as-weight-bold);
}

.menu-modal .menu-bottom {
	display: none;
}

/* =====================================================================
   Footer: logo + widgetkolommen (Figma 69:746)
   ===================================================================== */

.footer-nav-widgets-wrapper.as-footer,
.footer-top-visible .footer-nav-widgets-wrapper.as-footer,
.reduced-spacing.footer-top-visible .footer-nav-widgets-wrapper.as-footer {
	margin-top: 0;
	border: 0;
	background: var(--as-fg);
	color: var(--as-on-dark-accent);
}

.as-footer .footer-inner.as-footer__inner {
	display: block;
	width: 100%;
	max-width: var(--as-container);
	margin: 0 auto;
	padding: 34px var(--as-gutter) var(--as-space-9);
}

.as-footer .as-footer__logo {
	display: block;
	width: var(--as-footer-logo-w);
	margin-bottom: 73px;
	color: var(--as-on-dark-accent);
}

.as-footer .as-footer__logo .as-logo__svg {
	width: var(--as-footer-logo-w);
	height: var(--as-footer-logo-h);
}

.as-footer .footer-widgets-outer-wrapper {
	width: 100%;
	padding: 0;
	border: 0;
}

.as-footer .footer-widgets-wrapper {
	display: block;
	width: 100%;
	margin: 0;
}

.as-footer .footer-widgets-wrapper > .widget,
.as-footer .footer-widgets-wrapper > .widget > .widget-content {
	width: 100%;
	margin: 0;
}

/* Vier kolommen uit het blok-widget */
.as-footer .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--as-space-7) var(--as-gutter);
	margin: 0;
	padding: 0;
}

.as-footer .wp-block-column {
	flex: none;
	width: auto;
	margin: 0;
}

/* Tekst */
.as-footer h2,
.as-footer .widgettitle,
.as-footer .widget-title {
	margin: 0 0 25px;
	color: var(--as-on-dark-accent);
	font-size: var(--as-text-footer-heading-size);
	line-height: var(--as-text-footer-heading-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-footer-heading-tracking);
	text-transform: uppercase;
}

.as-footer p,
.as-footer li {
	margin: 0 0 var(--as-space-4);
	color: var(--as-on-dark-accent);
	font-size: var(--as-text-small-size);
	line-height: var(--as-text-small-line);
	letter-spacing: var(--as-text-small-tracking);
}

.as-footer p:last-child {
	margin-bottom: 0;
}

.as-footer a {
	color: var(--as-on-dark-accent);
	font-weight: var(--as-weight-bold);
	text-decoration: none;
}

.as-footer a:hover,
.as-footer a:focus {
	color: var(--as-on-dark);
}

.as-footer strong,
.as-footer b {
	font-weight: var(--as-weight-bold);
	line-height: inherit;
}

/* Footerknop: roze rechthoek 50px, paarse uppercase tekst */
.as-footer .wp-block-buttons {
	margin: var(--as-space-4) 0 var(--as-space-5);
	gap: var(--as-space-3);
}

.as-footer .wp-block-button {
	margin: 0;
}

.as-footer .wp-block-button__link,
.as-footer .wp-element-button,
.as-footer .button,
.as-footer input[type="submit"] {
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	padding: 15px 20px;
	background: var(--as-accent);
	color: var(--as-fg);
	border: 0;
	border-radius: var(--as-radius-none);
	font-size: var(--as-text-button-size);
	line-height: var(--as-text-button-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-button-tracking);
	text-transform: uppercase;
	text-decoration: none;
}

.as-footer .wp-block-button__link:hover,
.as-footer .wp-block-button__link:focus,
.as-footer .wp-element-button:hover,
.as-footer .button:hover,
.as-footer input[type="submit"]:hover {
	background: var(--as-highlight);
	color: var(--as-fg);
}

/* Afbeeldingen in de footer (bijv. ANBI-keurmerk) */
.as-footer .wp-block-image {
	margin: var(--as-space-5) 0 0;
}

.as-footer .wp-block-image img {
	display: block;
	max-width: 140px;
	border-radius: var(--as-radius-none);
}

/* Geneste widgets in een kolom */
.as-footer .wp-block-column > .widget {
	margin: 0;
}

.as-footer .wp-block-column > .widget + .widget {
	margin-top: 56px;
}

/* =====================================================================
   Footer: onderbalk met footermenu en copyright
   ===================================================================== */

#site-footer.as-footer-bar {
	margin: 0;
	padding: 0;
	background: var(--as-fg);
	color: var(--as-on-dark-accent);
	border: 0;
	font-size: var(--as-text-small-size);
}

.as-footer-bar .section-inner.as-footer-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: var(--as-container);
	min-height: var(--as-footer-bar-h);
	margin: 0 auto;
	padding: var(--as-space-5) var(--as-gutter);
}

.as-footer-bar .footer-credits {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--as-space-3) var(--as-space-5);
	width: 100%;
	margin: 0;
}

.as-footer-bar .footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--as-space-3) var(--as-space-5);
	margin: 0;
	padding: 0;
	font-size: var(--as-text-small-size);
	font-weight: var(--as-weight-regular);
	letter-spacing: var(--as-text-legal-tracking);
	text-transform: uppercase;
}

.as-footer-bar .footer-menu li {
	margin: 0;
	line-height: var(--as-text-small-line);
}

.as-footer-bar .footer-menu a,
.as-footer-bar .footer-copyright,
.as-footer-bar .footer-copyright a {
	color: var(--as-on-dark-accent);
	font-weight: var(--as-weight-regular);
	letter-spacing: var(--as-text-legal-tracking);
	text-transform: uppercase;
	text-decoration: none;
}

.as-footer-bar .footer-copyright {
	margin: 0 0 0 var(--as-space-5);
	font-size: var(--as-text-small-size);
	line-height: var(--as-text-small-line);
}

.as-footer-bar .footer-menu a:hover,
.as-footer-bar .footer-menu a:focus,
.as-footer-bar .footer-copyright a:hover,
.as-footer-bar .footer-copyright a:focus {
	color: var(--as-on-dark);
	text-decoration: underline;
}

/* =====================================================================
   Responsive footer/nav: 1099 = footer twee kolommen, 699 = één kolom en
   klein logo, 599 = compacte navbalk (88px). Het mobiele menu komt van
   Twenty Twenty en verschijnt onder 1000px.
   ===================================================================== */

@media (max-width: 1099px) {
	.as-footer .wp-block-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 699px) {
	.as-footer .footer-inner.as-footer__inner {
		padding-top: var(--as-space-5);
		padding-bottom: var(--as-space-7);
	}

	.as-footer .as-footer__logo {
		margin-bottom: var(--as-space-7);
	}

	.as-footer .as-footer__logo .as-logo__svg {
		width: var(--as-nav-logo-w);
		height: var(--as-nav-logo-h);
	}

	.as-footer .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.as-footer-bar .footer-credits {
		flex-direction: column;
		align-items: center;
	}

	.as-footer-bar .footer-copyright {
		margin-left: 0;
	}
}

@media (max-width: 599px) {
	:root {
		--as-nav-h: calc(64px + 2 * var(--as-space-3)); /* 88px */
	}

	.as-nav .as-logo__svg {
		width: 62px;
		height: 64px;
	}

	.as-nav .header-inner.as-nav__inner {
		padding-top: var(--as-space-3);
		padding-bottom: var(--as-space-3);
	}
}