/**
 * Danscentrum Rosmalen — supplementary styles.
 *
 * Everything expressible as a design token lives in theme.json. This file is
 * limited to what CSS alone can do: the curved hero edge, the scroll-snapping
 * lesson row, the hand-drawn accent marks and a few block-style variations.
 */

/* ---------------------------------------------------------------- tokens - */

:root {
	--dc-radius-card: 16px;
	--dc-radius-tile: 14px;
	--dc-ring: 0 0 0 3px rgba(158, 4, 37, .28);
}

/* --------------------------------------------------------------- header - */

.dc-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.dc-header__brand img,
.dc-footer__brand img {
	width: auto;
	height: 46px;
}

.dc-header__wordmark,
.dc-footer__wordmark {
	/* Two-line lockup: wide enough for "DANSCENTRUM", narrow enough to push
	   "ROSMALEN" onto the next line. Breaking inside the word is never wanted,
	   so the inherited break-word behaviour is reset here. */
	max-width: 14ch;
	line-height: 1.15;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.dc-header .wp-block-navigation {
	gap: clamp(1rem, 2.4vw, 2.25rem);
}

.dc-header .wp-block-navigation-item__content {
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
}

.dc-header .wp-block-navigation-item__content:hover,
.dc-header .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* The global block gap puts a 24px margin above every top-level element,
   including <main> and the footer part. Against the sticky header that reads
   as a stray band above the hero. Every template sets its own top spacing, so
   the inherited gap is dropped here. */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}

/* ----------------------------------------------------------------- hero - */

.dc-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* The arc separating the hero from the page below.
   Drawn as a stretched SVG rather than with border-radius: the design's edge
   is a valley (highest at both sides, lowest mid-span) and border-radius can
   only round inward, so it can produce the arch but never its inverse.
   preserveAspectRatio="none" lets the 1440x40 viewBox stretch to any width,
   keeping the drop proportional. */
.dc-hero__curve {
	position: absolute;
	inset-inline: 0;
	bottom: -1px;               /* overlap by a hair to avoid a seam line */
	width: 100%;
	height: clamp(18px, 2.9vw, 46px);
	display: block;
	pointer-events: none;
	z-index: 2;
}

.dc-hero__curve-fill {
	fill: var(--wp--preset--color--surface);
}

.dc-hero__curve-line {
	fill: none;
	stroke: rgba(180, 128, 78, .55);
	stroke-width: 2;
}

/* Align the hero copy with the header's content edge, not the viewport edge. */
.dc-hero__text {
	padding-inline-start: max(var(--wp--preset--spacing--30), calc((100vw - var(--wp--style--global--content-size, 1180px)) / 2));
}

/* The media column fills the full height of the hero, as in the design. */
.dc-hero__media {
	align-self: stretch;
}

.dc-hero__media figure {
	height: 100%;
	margin: 0;
}

.dc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

@media (max-width: 781px) {
	.dc-hero__media { min-height: 260px; }
}

.dc-hero__text p {
	max-width: 34ch;
}

/* Handwritten display line. */
.dc-script {
	font-family: var(--wp--preset--font-family--caveat);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: 0;
}

/* Short red rule used under headings. */
.is-style-accent-underline::after,
.dc-rule::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 3px;
	margin-top: .85rem;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
}

.dc-rule--center::after {
	margin-inline: auto;
}

/* ------------------------------------------------------------ lesson row - */

.dc-lessons {
	position: relative;
}

/* The row is a core Columns block so it stays editable in wp-admin. Below the
   desktop breakpoint it turns into a scroll-snapping track rather than
   squashing six columns into the viewport. */
.dc-lessons__track {
	gap: clamp(.75rem, 1.6vw, 1.25rem);
	flex-wrap: nowrap;
	align-items: flex-start;
}

@media (max-width: 899px) {
	.dc-lessons__track {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		padding-block-end: .5rem;
		/* bleed to the viewport edge so the next tile peeks */
		margin-inline: calc(var(--wp--preset--spacing--30) * -1);
		padding-inline: var(--wp--preset--spacing--30);
		/* keeps the first snap position at scrollLeft 0 despite the padding */
		scroll-padding-inline: var(--wp--preset--spacing--30);
	}

	.dc-lessons__track::-webkit-scrollbar { display: none; }

	/* Four classes deep so this beats core's .is-not-stacked-on-mobile rule
	   regardless of stylesheet order. */
	.dc-lessons .dc-lessons__track.wp-block-columns > .wp-block-column {
		flex: 0 0 auto;
		width: min(46%, 190px);
		scroll-snap-align: start;
	}
}

.dc-lesson {
	text-align: center;
}

.dc-lesson figure {
	margin: 0;
}

.dc-lesson img {
	aspect-ratio: 1 / 1;
	width: 100%;
	/* height:auto is required, otherwise the width/height attributes win as
	   presentational hints and aspect-ratio is ignored. */
	height: auto;
	object-fit: cover;
	border-radius: var(--dc-radius-tile);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform .35s ease, box-shadow .35s ease;
}

.dc-lesson a:hover img,
.dc-lesson a:focus-visible img {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--card);
}

.dc-lesson__label {
	margin-top: .85rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
}

.dc-lesson__label a {
	color: inherit;
	text-decoration: none;
}

.dc-lesson__label a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Scroll arrows. Injected by assets/js/lessons.js and only while the track
   actually overflows, so they never appear as dead controls. */
.dc-lessons__nav {
	position: absolute;
	top: calc(50% - 2.5rem);
	translate: 0 -50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(20, 16, 15, .18);
}

.dc-lessons__nav[hidden] { display: none; }
.dc-lessons__nav--prev { inset-inline-start: -.5rem; }
.dc-lessons__nav--next { inset-inline-end: -.5rem; }
.dc-lessons__nav:hover { background: var(--wp--preset--color--primary-dark); }
.dc-lessons__nav:focus-visible { outline: none; box-shadow: var(--dc-ring); }
.dc-lessons__nav svg { width: 1rem; height: 1rem; fill: currentColor; }

/* ---------------------------------------------------------------- cards - */

.is-style-card {
	border-radius: var(--dc-radius-card);
	box-shadow: var(--wp--preset--shadow--card);
}

.dc-round { border-radius: var(--dc-radius-card); overflow: hidden; }
.dc-round img { border-radius: var(--dc-radius-card); }

/* USP list with hand-drawn heart bullets. */
.dc-usps ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .85rem;
}

.dc-usps li {
	display: grid;
	grid-template-columns: 1.4rem 1fr;
	align-items: start;
	gap: .75rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.dc-usps li::before {
	content: "";
	inline-size: 1.05rem;
	block-size: 1.05rem;
	margin-top: .18rem;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--dc-heart) center / contain no-repeat;
	mask: var(--dc-heart) center / contain no-repeat;
}

:root {
	--dc-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M12 20.5S3.5 14.8 3.5 9.2A4.7 4.7 0 0 1 12 6.6a4.7 4.7 0 0 1 8.5 2.6c0 5.6-8.5 11.3-8.5 11.3Z'/%3E%3C/svg%3E");
}

.dc-heart,
.dc-heart-after::after,
.dc-heart-above::before {
	display: inline-block;
	inline-size: .82em;
	block-size: .82em;
	vertical-align: -.02em;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--dc-heart) center / contain no-repeat;
	mask: var(--dc-heart) center / contain no-repeat;
}

/* Hearts are drawn from a class rather than an inline <span>, so that editing
   the surrounding text in wp-admin cannot delete them: RichText discards inline
   tags it does not recognise as a registered format. */
.dc-heart-after::after {
	content: "";
	margin-inline-start: .35em;
}

.dc-heart-above::before {
	content: "";
	display: block;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	margin-block-end: var(--wp--preset--spacing--20);
}

/* --------------------------------------------------------------- agenda - */

.dc-note {
	font-family: var(--wp--preset--font-family--caveat);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
}

.dc-calendar { color: var(--wp--preset--color--accent); }
.dc-calendar svg { width: clamp(72px, 9vw, 104px); height: auto; }

/* -------------------------------------------------------------- buttons - */

.is-style-outline-dark > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid rgba(20, 16, 15, .35);
}

.is-style-outline-dark > .wp-block-button__link:hover,
.is-style-outline-dark > .wp-block-button__link:focus {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------- footer - */

.dc-footer a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.dc-footer a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }

.dc-footer .wp-block-social-links .wp-social-link {
	background: transparent;
	border: 1px solid rgba(20, 16, 15, .25);
	border-radius: 50%;
	padding: .45rem;
}

.dc-footer .wp-block-social-links .wp-social-link:hover {
	border-color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------- editorial - */

.dc-postcard img { border-radius: var(--dc-radius-tile); }

.dc-postcard .wp-block-post-title a { text-decoration: none; color: inherit; }
.dc-postcard .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

/* ------------------------------------------------------ a11y & motion - */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.dc-skip-link:focus {
	position: fixed;
	inset-block-start: .5rem;
	inset-inline-start: .5rem;
	z-index: 100;
	padding: .6rem 1rem;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------- forms - */

/* WPForms renders in "modern" mode, which is driven by CSS custom properties.
   Setting those is far more robust than out-specifying the plugin's stylesheet,
   and it survives plugin updates. */
.dc-form.wpforms-container {
	/* The modern stylesheet reads -alt first, with the plain variable only as a
	   fallback, so -alt is the base colour — not the hover state. */
	--wpforms-button-background-color: var(--wp--preset--color--primary);
	--wpforms-button-background-color-alt: var(--wp--preset--color--primary);
	--wpforms-button-text-color: var(--wp--preset--color--base);
	--wpforms-button-text-color-alt: var(--wp--preset--color--base);
	--wpforms-button-border-color: var(--wp--preset--color--primary);
	--wpforms-button-border-radius: 6px;
	--wpforms-button-size-font-size: 15px;
	--wpforms-button-size-padding-h: 26px;

	--wpforms-field-background-color: var(--wp--preset--color--base);
	--wpforms-field-border-color: rgba(20, 16, 15, .18);
	--wpforms-field-border-radius: 8px;
	--wpforms-field-text-color: var(--wp--preset--color--contrast);
	--wpforms-field-menu-color: var(--wp--preset--color--base);

	--wpforms-label-color: var(--wp--preset--color--contrast);
	--wpforms-label-sublabel-color: var(--wp--preset--color--muted);
	--wpforms-label-error-color: var(--wp--preset--color--accent);
}


/* WPForms, restyled to the site's tokens. Scoped to .dc-form so the plugin's
   own styling elsewhere is left alone. */

.dc-form .wpforms-field {
	padding: 0 0 var(--wp--preset--spacing--30);
}

.dc-form .wpforms-field-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin-block-end: .4rem;
}

.dc-form .wpforms-required-label {
	color: var(--wp--preset--color--accent);
}

.dc-form .wpforms-field-description {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	margin-block-start: .35rem;
}

.dc-form input[type="text"],
.dc-form input[type="email"],
.dc-form input[type="tel"],
.dc-form select,
.dc-form textarea {
	width: 100%;
	max-width: 100%;
	padding: .7rem .9rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(20, 16, 15, .18);
	border-radius: 8px;
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.dc-form textarea {
	min-height: 7rem;
	resize: vertical;
}

.dc-form input:focus,
.dc-form select:focus,
.dc-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--dc-ring);
}

.dc-form .wpforms-field-radio ul,
.dc-form .wpforms-field-checkbox ul,
.dc-form .wpforms-field-gdpr-checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.dc-form .wpforms-field-radio li,
.dc-form .wpforms-field-checkbox li,
.dc-form .wpforms-field-gdpr-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: var(--wp--preset--font-size--small);
}

.dc-form input[type="radio"],
.dc-form input[type="checkbox"] {
	accent-color: var(--wp--preset--color--primary);
	margin-top: .18em;
	flex: 0 0 auto;
}

.dc-form .wpforms-field-gdpr-checkbox label {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.dc-form .wpforms-submit,
.dc-form button[type="submit"] {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 6px;
	padding: .85em 1.6em;
	cursor: pointer;
	transition: background .18s ease;
}

.dc-form.wpforms-container .wpforms-submit:hover,
.dc-form.wpforms-container button[type="submit"]:hover {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
}

.dc-form .wpforms-submit:focus-visible {
	outline: none;
	box-shadow: var(--dc-ring);
}

/* Validation + confirmation, in the site's accent rather than plugin defaults. */
.dc-form .wpforms-error-container,
.dc-form label.wpforms-error,
.dc-form em.wpforms-error {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}

.dc-form input.wpforms-error,
.dc-form select.wpforms-error,
.dc-form textarea.wpforms-error {
	border-color: var(--wp--preset--color--accent);
}

.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast);
}