/* =============================================================================
   Bar End – theme styles (loaded on the front-end and in the editor)
   Design tokens live in theme.json; this file covers layout and composition
   that theme.json cannot express (overlay header, torn edges, cards, menu).
   ========================================================================== */

:root {
	--bar-end-header-height: 10rem;
	--bar-end-edge-1: url("../images/edge-1.svg");
	--bar-end-edge-2: url("../images/edge-2.svg");
}

html { scroll-behavior: smooth; }
body { overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { height: auto; max-width: 100%; }
::selection { background: var(--wp--preset--color--groen); color: var(--wp--preset--color--wit); }
:where(a:focus-visible, button:focus-visible) { outline: 3px solid var(--wp--preset--color--rood); outline-offset: 3px; }

/* Lead paragraph + accessibility helpers */
.has-lead-font-size { line-height: 1.5; }
.screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }

/* -----------------------------------------------------------------------------
   Header (transparent overlay on top of the hero / title band)
   -------------------------------------------------------------------------- */
.site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 100;
	padding-top: 2.25rem;
	pointer-events: none;
}
.site-header__inner { align-items: flex-start; gap: 1.25rem; }
.site-header__logo,
.site-header__nav { pointer-events: auto; }
.site-header__logo { margin: 0; }
.site-header__logo img { display: block; width: 106px; height: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); }

/* Hamburger button */
.site-header .wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	padding: 0;
	background: var(--wp--preset--color--zwart);
	color: var(--wp--preset--color--wit);
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.site-header .wp-block-navigation__responsive-container-open:hover { background: var(--wp--preset--color--rood); }
.site-header .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }

/* Fullscreen overlay menu (artboard 2) */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--zwart);
	padding: 11rem 1.5rem 4rem;
	overflow: auto;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	top: 2.25rem;
	left: 50%;
	width: 90px;
	height: 95px;
	transform: translateX(-50%);
	background: url("../images/logo-white.svg") center / contain no-repeat;
}
.site-header .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 2.5rem;
	left: calc(50% + 70px);
	right: auto;
	padding: 0.5rem;
	color: var(--wp--preset--color--wit);
	background: transparent;
	border: 0;
	cursor: pointer;
}
.site-header .wp-block-navigation__responsive-container-close svg { width: 34px; height: 34px; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: 42rem;
	margin: 0 auto;
	align-items: flex-start;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; align-items: flex-start; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(2.25rem, 5vw, 3.875rem);
	line-height: 1.05;
	color: var(--wp--preset--color--wit);
	text-decoration: none;
	padding: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: " \2197";
	font-family: system-ui, sans-serif;
	font-size: 0.75em;
	margin-left: 0.15em;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content::after { content: " \2193"; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--taupe); }
.site-header .wp-block-navigation__submenu-icon { display: none; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0.75rem 0 0.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	position: static;
	opacity: 1;
	visibility: visible;
	width: auto;
	min-width: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--averta);
	font-size: 1rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 400;
	padding: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; }

/* Room for the overlay header on pages without a hero */
.page-title-band {
	padding: calc(var(--bar-end-header-height) + 2rem) var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	position: relative;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
}
.page-title-band h1 { color: var(--wp--preset--color--wit); margin: 0; }
.page-title-band__kicker { color: var(--wp--preset--color--taupe); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.5rem; }
.page-title-band__date { color: var(--wp--preset--color--taupe); margin-top: 0.75rem; }
.has-header-offset { padding-top: calc(var(--bar-end-header-height) + 2rem); }

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { --bar-end-hero-min: 88vh; }
.hero .wp-block-cover__inner-container { max-width: 62rem; }
.hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); margin-bottom: 1.25rem; }
.hero .has-lead-font-size { max-width: 40rem; margin-inline: auto; margin-bottom: 2rem; }
.hero .wp-block-buttons { gap: 1rem; }

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.wp-block-button__link { display: inline-flex; align-items: center; gap: 0.6em; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.wp-block-button__link::after { content: "\2192"; font-family: system-ui, sans-serif; font-size: 1.15em; line-height: 1; }
.is-style-no-arrow .wp-block-button__link::after { content: none; }
.is-style-outline .wp-block-button__link,
.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 2px solid currentColor;
}
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--wit); color: var(--wp--preset--color--zwart); border-color: var(--wp--preset--color--wit); }
.is-style-text-link .wp-block-button__link {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--groen);
	font-family: var(--wp--preset--font-family--averta);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}
.is-style-text-link .wp-block-button__link::before { content: "\2192"; font-family: system-ui, sans-serif; font-size: 1.15em; }
.is-style-text-link .wp-block-button__link::after { content: none; }
.is-style-text-link .wp-block-button__link:hover { color: var(--wp--preset--color--rood); background: transparent; }
.is-style-arrow-circle .wp-block-button__link {
	width: 46px;
	height: 46px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	background: transparent;
	border: 2px solid currentColor;
	font-family: system-ui, sans-serif;
	font-size: 1.25rem;
}
.is-style-arrow-circle .wp-block-button__link::after { content: none; }
.is-style-arrow-circle .wp-block-button__link:hover { background: var(--wp--preset--color--wit); color: var(--wp--preset--color--zwart); border-color: var(--wp--preset--color--wit); }

/* -----------------------------------------------------------------------------
   Section titles, torn edges, cards, tiles
   -------------------------------------------------------------------------- */
.is-style-section-title { letter-spacing: 0.1em; margin-bottom: var(--wp--preset--spacing--50); }

.is-style-torn-top { position: relative; z-index: 2; }
.is-style-torn-top::before,
.is-style-torn-top-alt::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(1px - var(--wp--custom--torn-edge-height));
	height: var(--wp--custom--torn-edge-height);
	background-color: inherit;
	-webkit-mask: var(--bar-end-edge-1) center bottom / 100% 100% no-repeat;
	mask: var(--bar-end-edge-1) center bottom / 100% 100% no-repeat;
	pointer-events: none;
}
.is-style-torn-top-alt { position: relative; z-index: 2; }
.is-style-torn-top-alt::before { -webkit-mask-image: var(--bar-end-edge-2); mask-image: var(--bar-end-edge-2); }

.is-style-card {
	box-shadow: var(--wp--custom--card-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.is-style-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); }

.tiles {
	position: relative;
	z-index: 3;
	margin-top: calc(-1 * clamp(4rem, 12vw, 9rem));
	gap: 0 !important;
}
.is-style-tile {
	display: flex;
	flex-direction: column;
	min-height: 19rem;
	padding: 2.5rem 2.25rem 2.25rem;
}
.is-style-tile > * { margin: 0; }
.is-style-tile .tile__head { margin-bottom: 1rem; }
.is-style-tile .tile__title { gap: 0.75rem; }
.is-style-tile .tile__icon img { display: block; }
.is-style-tile .tile__text { max-width: 20rem; }
.is-style-tile .tile__link { margin-top: auto; padding-top: 1.5rem; }
.is-style-tile .tile__link a { color: inherit; font-weight: 700; }
.is-style-tile .tile__link a:hover { color: var(--wp--preset--color--taupe); }

/* -----------------------------------------------------------------------------
   News cards
   -------------------------------------------------------------------------- */
.post-grid { gap: 2rem; }
.post-card { display: flex; flex-direction: column; height: 100%; padding: 0; }
.post-card > * { margin: 0; }
.post-card__image { margin: 0; }
.post-card__image img { display: block; width: 100%; }
.post-card__body { padding: 2rem 2.25rem 2.25rem; display: flex; flex-direction: column; flex: 1; }
.post-card__title { margin-bottom: 1rem; }
.post-card__title a { text-decoration: none; color: inherit; }
.post-card__title a:hover { color: var(--wp--preset--color--rood); }
.post-card__excerpt { display: flex; flex-direction: column; flex: 1; }
.post-card__excerpt .wp-block-post-excerpt__excerpt { margin-bottom: 1.25rem; }
.post-card__excerpt .wp-block-post-excerpt__more-text { margin-top: auto; }
.post-card__excerpt .wp-block-post-excerpt__more-link { color: var(--wp--preset--color--rood); font-weight: 700; text-decoration: none; }
.post-card__excerpt .wp-block-post-excerpt__more-link::before { content: "\2192  "; font-family: system-ui, sans-serif; }
.post-card__excerpt .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   Sponsors section decorations
   -------------------------------------------------------------------------- */
.section-sponsoren { position: relative; }
.section-sponsoren__rider {
	position: absolute;
	right: 8%;
	bottom: -0.5rem;
	z-index: 3;
	margin: 0;
	pointer-events: none;
}
.is-style-invert img { filter: brightness(0) invert(1); }

/* -----------------------------------------------------------------------------
   Content: accordion (details), lists, tables, media
   -------------------------------------------------------------------------- */
.entry-content .wp-block-details.is-style-accordion,
.wp-block-details.is-style-accordion {
	border-top: 1px solid var(--wp--preset--color--taupe);
	padding: 0;
	margin: 0;
}
.wp-block-details.is-style-accordion + .wp-block-details.is-style-accordion { margin-top: 0; }
.wp-block-details.is-style-accordion:last-of-type { border-bottom: 1px solid var(--wp--preset--color--taupe); }
.wp-block-details.is-style-accordion > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	list-style: none;
	cursor: pointer;
	padding: 1.1rem 0;
	font-family: var(--wp--preset--font-family--milker);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--groen);
}
.wp-block-details.is-style-accordion > summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-accordion > summary:hover { color: var(--wp--preset--color--rood); }
.wp-block-details__icon {
	flex: none;
	width: 2rem;
	height: 2rem;
	position: relative;
	border: 2px solid currentColor;
	border-radius: 50%;
}
.wp-block-details__icon::before,
.wp-block-details__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.8rem;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}
.wp-block-details__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.wp-block-details[open] > summary .wp-block-details__icon::after { transform: translate(-50%, -50%) rotate(0); }
.wp-block-details.is-style-accordion > :not(summary) { margin-bottom: 1.25rem; }
.wp-block-details.is-style-accordion > :not(summary):last-child { margin-bottom: 1.75rem; }

.is-style-checklist { list-style: none; padding-left: 0; }
.is-style-checklist li { position: relative; padding-left: 1.75rem; }
.is-style-checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--wp--preset--color--groen); font-weight: 700; }

.wp-block-table table { border-collapse: collapse; }
.wp-block-table th { background: var(--wp--preset--color--groen); color: var(--wp--preset--color--wit); font-family: var(--wp--preset--font-family--milker); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 400; text-align: left; }
.wp-block-table td, .wp-block-table th { border: 1px solid var(--wp--preset--color--taupe); padding: 0.6rem 0.9rem; }
.wp-block-table tr:nth-child(even) td { background: var(--wp--preset--color--zand); }

.entry-content figure.wp-block-image img { box-shadow: var(--wp--custom--card-shadow); }
.bestuur-lid { margin-bottom: 2rem; }
.bestuur-lid .wp-block-media-text__content { padding: 1.5rem 2rem; }

/* Gravity Forms placeholder + basic form styling */
.bar-end-form-placeholder { border: 2px dashed var(--wp--preset--color--taupe); }
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper .gfield_label { font-weight: 700; }
.gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.gform_wrapper select,
.gform_wrapper textarea,
.wp-block-search__input {
	border: 1px solid var(--wp--preset--color--taupe);
	background: var(--wp--preset--color--wit);
	padding: 0.7rem 0.9rem;
	font: inherit;
	width: 100%;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus { outline: 2px solid var(--wp--preset--color--groen); outline-offset: 0; }
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"],
.wp-block-search__button {
	background: var(--wp--preset--color--rood);
	color: var(--wp--preset--color--wit);
	border: 2px solid var(--wp--preset--color--rood);
	font-family: var(--wp--preset--font-family--milker);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.7em 1.5em;
	cursor: pointer;
}
.gform_wrapper .gform_button:hover,
.wp-block-search__button:hover { background: var(--wp--preset--color--zwart); border-color: var(--wp--preset--color--zwart); }
.wp-block-search__button { margin-left: 0.5rem; }

/* -----------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { margin-top: 0; }
.site-footer a { color: var(--wp--preset--color--wit); text-decoration: none; font-weight: 400; }
.site-footer a:hover { color: var(--wp--preset--color--taupe); text-decoration: underline; }
.site-footer__title {
	font-family: var(--wp--preset--font-family--milker);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--taupe);
	margin-bottom: 1rem;
}
.site-footer__columns { gap: 2rem; }
.site-footer__columns p { margin-bottom: 0.35rem; }
.site-footer__logo { margin: 0; }
.site-footer__nav .wp-block-navigation-item__content,
.site-footer__nav { font-family: var(--wp--preset--font-family--averta); font-size: 1rem; text-transform: none; letter-spacing: 0; }
.site-footer__nav .wp-block-navigation__container { gap: 0.35rem; }
.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list li { margin-bottom: 0.35rem; }
.site-footer__affiliations { gap: 1.25rem; }
.site-footer__affiliations figure { margin: 0; }
.site-footer__copyright { color: var(--wp--preset--color--taupe); margin-top: var(--wp--preset--spacing--50); }

/* -----------------------------------------------------------------------------
   Editor-specific adjustments (Site Editor / block editor iframe)
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .site-header { position: relative; background: var(--wp--preset--color--zwart); padding-bottom: 1.5rem; pointer-events: auto; }
.editor-styles-wrapper .site-header__logo img { filter: none; }
.editor-styles-wrapper .page-title-band { padding-top: var(--wp--preset--spacing--60); }
.editor-styles-wrapper .has-header-offset { padding-top: var(--wp--preset--spacing--60); }
.editor-styles-wrapper .tiles { margin-top: var(--wp--preset--spacing--40); }

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	:root { --bar-end-header-height: 8rem; }
	.site-header { padding-top: 1.25rem; }
	.site-header__logo img { width: 80px; }
	.site-header .wp-block-navigation__responsive-container-open { width: 54px; height: 54px; }
	.site-header .wp-block-navigation__responsive-container.is-menu-open { padding-top: 9rem; }
	.site-header .wp-block-navigation__responsive-container-close { left: calc(50% + 56px); top: 1.5rem; }
	.hero { --bar-end-hero-min: 70vh; }
	.tiles { margin-top: calc(-1 * var(--wp--preset--spacing--50)); }
	.is-style-tile { min-height: 0; padding: 2rem 1.5rem; }
	.post-card__body { padding: 1.5rem; }
	.section-sponsoren__rider { width: 110px; right: 4%; }
	.site-footer__columns { gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.is-style-card, .wp-block-button__link { transition: none; }
}

/* Grid fallbacks for the 3-column tile and card grids */
@media (max-width: 1100px) {
	.wp-block-group.tiles, .post-grid.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
	.wp-block-group.tiles, .post-grid.wp-block-post-template { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Overlay: keep the close button next to the logo at the top */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position: static; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: 2.75rem; }

/* Fine-tuning */
.site-footer.is-style-torn-top-alt::before { height: calc(var(--wp--custom--torn-edge-height) * 0.7); top: calc(1px - var(--wp--custom--torn-edge-height) * 0.7); }
.has-lead-font-size + .wp-block-details.is-style-accordion { margin-top: 2rem; }
.wp-block-details.is-style-accordion > summary + * { margin-top: 0; }

/* Torn edges: add a solid strip at the bottom of the mask so no hairline gap appears */
.is-style-torn-top::before {
	-webkit-mask: var(--bar-end-edge-1) center bottom / 100% 100% no-repeat, linear-gradient(#000, #000) center bottom / 100% 3px no-repeat;
	mask: var(--bar-end-edge-1) center bottom / 100% 100% no-repeat, linear-gradient(#000, #000) center bottom / 100% 3px no-repeat;
}
.is-style-torn-top-alt::before {
	-webkit-mask: var(--bar-end-edge-2) center bottom / 100% 100% no-repeat, linear-gradient(#000, #000) center bottom / 100% 3px no-repeat;
	mask: var(--bar-end-edge-2) center bottom / 100% 100% no-repeat, linear-gradient(#000, #000) center bottom / 100% 3px no-repeat;
}