/*
 * Sylvesterjogging: shared stylesheet
 * Loaded on the front end AND inside the block editor iframe (see functions.php), so both look identical.
 * Colours, fonts and spacing come from theme.json (--wp--preset--*). Only things theme.json cannot express live here.
 * Rule of thumb: never target `body` or `.wp-site-blocks` here, they do not exist the same way in the editor.
 */

/* ------------------------------------------------------------------ Page rhythm
 * WordPress puts a default gap (blockGap) between header, content and footer, and between stacked
 * full-width sections. Those show up as white strips, so we remove them: sections carry their own padding. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
.wp-block-post-content > .alignfull,
.editor-styles-wrapper .is-root-container > .alignfull { margin-block-start: 0; margin-block-end: 0; }
/* Plain text pages (no full-width sections): give the first/last normal block some breathing room. */
.sj-page-content > :not(.alignfull):first-child { margin-top: var(--wp--preset--spacing--60); }
.sj-page-content > :not(.alignfull):last-child { margin-bottom: var(--wp--preset--spacing--60); }

/* ------------------------------------------------------------------ Base */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--wp--custom--header-height) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:where(.editor-styles-wrapper, body) {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
::selection { background: var(--wp--preset--color--primary); color: #fff; }

img { height: auto; }
a:focus-visible, button:focus-visible, .wp-element-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--ice);
	outline-offset: 3px;
}

/* Heading polish */
:where(h1, h2, h3, h4) { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------------------------------------------------------------- Buttons */
.wp-block-button__link, .wp-element-button {
	transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	box-shadow: var(--wp--preset--shadow--glow);
	line-height: 1.1;
}
.wp-block-button__link:hover { transform: translateY(-2px); }

/* Outline (core style) */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	padding: calc(0.8rem - 2px) calc(1.9rem - 2px);
	box-shadow: none;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}
/* Wit */
.wp-block-button.is-style-light > .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink);
	box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .5);
}
.wp-block-button.is-style-light > .wp-block-button__link:hover { background: var(--wp--preset--color--ice-soft); color: var(--wp--preset--color--ink); }
/* Outline in white, for dark backgrounds: add class "is-on-dark" */
.is-on-dark .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .7); }
.is-on-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--ink); border-color: #fff; }
/* Link met pijl */
.wp-block-button.is-style-arrow > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	box-shadow: none;
	padding: 0.2rem 0;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.wp-block-button.is-style-arrow > .wp-block-button__link::after { content: "\2192"; transition: transform .2s ease; }
.wp-block-button.is-style-arrow > .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--primary-dark); transform: none; }
.wp-block-button.is-style-arrow > .wp-block-button__link:hover::after { transform: translateX(5px); }

/* ------------------------------------------------------------- Paragraphs */
p.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	display: flex;
	align-items: center;
	gap: .75rem;
	line-height: 1.2;
}
p.is-style-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 2rem;
	height: 3px;
	border-radius: 3px;
	background: currentColor;
}
p.is-style-eyebrow.has-text-align-center { justify-content: center; }
p.is-style-eyebrow.has-text-align-right { justify-content: flex-end; }

p.is-style-chip, .sj-chip {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	padding: .55rem 1rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: #fff;
}
p.is-style-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; font-weight: 500; }

/* ---------------------------------------------------------------- Headings */
h2.is-style-accent-bar::after, h3.is-style-accent-bar::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 6px;
	margin-top: .9rem;
	border-radius: 6px;
	background: var(--wp--preset--color--primary);
}
.has-text-align-center.is-style-accent-bar::after { margin-inline: auto; }
.is-style-outline:is(h1, h2, h3) {
	color: transparent;
	-webkit-text-stroke: 2px currentColor;
	-webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------- Group styles */
.wp-block-group.is-style-card, .wp-block-column.is-style-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--m);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: var(--wp--preset--spacing--40);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wp-block-group.is-style-card:hover, .wp-block-column.is-style-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lift);
	border-color: transparent;
}
.wp-block-group.is-style-tint { background: var(--wp--preset--color--primary-soft); border-radius: var(--wp--custom--radius--m); padding: var(--wp--preset--spacing--40); }
.wp-block-group.is-style-frost { background: var(--wp--preset--color--ice-soft); border-radius: var(--wp--custom--radius--m); padding: var(--wp--preset--spacing--40); }
.wp-block-group.is-style-dark-card {
	background: var(--wp--preset--color--ink);
	color: #fff;
	border-radius: var(--wp--custom--radius--m);
	padding: var(--wp--preset--spacing--40);
}
.wp-block-group.is-style-dark-card :where(h1, h2, h3, h4, a:not(.wp-element-button)) { color: #fff; }

/* Slanted bottom edge: add to full-width sections */
.wp-block-group.is-style-slant, .wp-block-cover.is-style-hero {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(1.5rem, 4vw, 4rem)), 0 100%);
	padding-bottom: calc(var(--wp--preset--spacing--60) + 2rem);
}
/* Editor/front margins around slanted sections should not leave a white gap */
.wp-block-cover.is-style-hero { margin-bottom: calc(-1 * clamp(1.5rem, 4vw, 4rem)); position: relative; z-index: 1; }
.wp-block-cover.is-style-hero + * { padding-top: clamp(1.5rem, 4vw, 4rem); }

/* ------------------------------------------------------------------ Cover */
.wp-block-cover { overflow: hidden; }
.wp-block-cover :where(h1, h2, h3, p, .wp-block-heading) { text-shadow: none; }
.wp-block-cover .wp-block-cover__inner-container { width: 100%; }
.sj-cover-fade .wp-block-cover__background { background: linear-gradient(180deg, rgba(20, 22, 27, .35) 0%, rgba(20, 22, 27, .9) 100%) !important; opacity: 1 !important; }

/* ------------------------------------------------------------------ Images */
.wp-block-image.is-style-bw-hover img { filter: grayscale(1) contrast(1.05); transition: filter .4s ease, transform .6s ease; }
.wp-block-image.is-style-bw-hover:hover img { filter: grayscale(0); transform: scale(1.03); }
.wp-block-image.is-style-bw-hover { overflow: hidden; border-radius: var(--wp--custom--radius--m); }
.wp-block-image.is-style-tilt img { transform: rotate(-2deg); box-shadow: var(--wp--preset--shadow--lift); }
.wp-block-image img { border-radius: inherit; }
.wp-block-gallery .wp-block-image img { border-radius: var(--wp--custom--radius--s); }
.wp-block-gallery.is-style-bw-hover img { filter: grayscale(1); transition: filter .4s ease; }
.wp-block-gallery.is-style-bw-hover img:hover { filter: none; }

/* ------------------------------------------------------------------- Lists */
ul.is-style-checklist, ul.is-style-arrows { list-style: none; padding-left: 0; }
ul.is-style-checklist li, ul.is-style-arrows li { position: relative; padding-left: 2rem; margin-bottom: .55rem; }
ul.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
ul.is-style-arrows li::before { content: "\2192"; position: absolute; left: 0; color: var(--wp--preset--color--primary); font-weight: 700; }

/* --------------------------------------------------------------- Separator */
.wp-block-separator { border-width: 0 0 1px; opacity: 1; }
.wp-block-separator.is-style-bold { border-bottom: 6px solid var(--wp--preset--color--primary); max-width: 4.5rem; border-radius: 6px; opacity: 1; }

/* ------------------------------------------------------------------ Quote */
.wp-block-quote { border-style: none none none solid; }
.wp-block-quote cite { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); font-style: normal; font-weight: 600; }

/* ----------------------------------------------------------------- Details */
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.375rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
	font-size: 1.5rem;
	line-height: 1;
	transition: transform .25s ease, background .25s ease, color .25s ease;
}
.wp-block-details[open] summary::after { content: "\2212"; background: var(--wp--preset--color--primary); color: #fff; }
.wp-block-details > :not(summary) { margin-top: 1rem; }
.wp-block-details + .wp-block-details { margin-top: .75rem; }

/* ------------------------------------------------------------------- Table */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 1px solid var(--wp--preset--color--border); padding: .8rem 1rem; text-align: left; }
.wp-block-table thead { border: 0; }
.wp-block-table thead th {
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: .06em;
	border: 0;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--wp--preset--color--snow); }

/* ------------------------------------------------------------ Header (part) */
/* .sj-header is the template-part wrapper (only used for sticky behaviour on the front end).
   Everything visual lives on .sj-header-bar, a real block inside the part, so the Site Editor shows it too. */
.sj-header { position: sticky; top: 0; z-index: 50; transition: box-shadow .25s ease; }
.admin-bar .sj-header { top: var(--wp-admin--admin-bar--height, 0px); }
.sj-header.is-scrolled { box-shadow: 0 8px 24px -14px rgba(20, 22, 27, .3); }
/* No backdrop-filter on the header: it would trap the fixed mobile menu overlay inside it. */
.sj-header-bar { border-bottom: 1px solid var(--wp--preset--color--border); }
.sj-header-bar .wp-block-site-logo img { width: auto; height: 64px; border-radius: 0; display: block; transition: height .25s ease; }
.sj-header.is-scrolled .sj-header-bar .wp-block-site-logo img { height: 54px; }
.sj-header-bar .wp-block-navigation-item__content { position: relative; padding: .4rem 0; text-decoration: none; }
.sj-header-bar .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--primary);
	transition: right .25s ease;
}
.sj-header-bar .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.sj-header-bar .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after { right: 0; }
.sj-header-bar .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); }
.sj-header-bar .wp-block-navigation__responsive-container.is-menu-open { padding: 2rem var(--wp--preset--spacing--40); }
.sj-header-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 2rem; }
/* "Contact" as a pill: add class sj-nav-cta to a menu item */
.sj-header-bar .sj-nav-cta > .wp-block-navigation-item__content { background: var(--wp--preset--color--primary); color: #fff; padding: .6rem 1.35rem; border-radius: var(--wp--custom--radius--pill); box-shadow: var(--wp--preset--shadow--glow); transition: background .2s, transform .2s; }
.sj-header-bar .sj-nav-cta > .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--primary-dark); color: #fff; transform: translateY(-2px); }
.sj-header-bar .sj-nav-cta > .wp-block-navigation-item__content::after { display: none; }
.sj-header-bar .wp-block-navigation__responsive-container.is-menu-open .sj-nav-cta > .wp-block-navigation-item__content { display: inline-block; font-size: 1.5rem; margin-top: .5rem; }

/* ---------------------------------------------------- Announcement bar (part) */
.sj-announcement { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .9375rem; }
.sj-announcement .wp-block-sj-event-info { margin: 0; }
.sj-announcement .wp-block-sj-event-info + .wp-block-sj-event-info::before { content: "\2022"; margin-right: .75rem; color: var(--wp--preset--color--primary); }
.sj-announcement .wp-block-sj-event-info:last-child { color: var(--wp--preset--color--ember); }

/* ------------------------------------------------------------ Footer (part) */
.sj-footer { color: rgba(255, 255, 255, .78); border-top: 1px solid rgba(255, 255, 255, .1); }
.sj-footer :where(h2, h3, h4) { color: #fff; }
.sj-footer a { color: inherit; text-decoration: none; transition: color .2s; }
.sj-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--wp--preset--color--primary); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.sj-footer .wp-block-navigation { font-family: var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 1.0625rem; }
.sj-footer .wp-block-navigation .wp-block-navigation-item__content { padding: .15rem 0; }
.sj-footer .sj-footer-title { font-size: 1.25rem; letter-spacing: .08em; color: var(--wp--preset--color--ice); margin-bottom: 1rem; }
.sj-footer .sj-mail-list { list-style: none; padding: 0; margin: 0; }
.sj-footer .sj-mail-list li { margin: 0 0 .35rem; }
.sj-footer .sj-mail-list a::before { content: "\2709"; margin-right: .6rem; color: var(--wp--preset--color--primary); }
.sj-footer .wp-block-social-links .wp-social-link { background: rgba(255, 255, 255, .1); }
.sj-footer .wp-block-social-links .wp-social-link:hover { background: var(--wp--preset--color--primary); }
.sj-footer .sj-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); font-size: .9375rem; }

/* ---------------------------------------------------- Page banner (template part) */
.sj-page-hero { background-color: var(--wp--preset--color--ink); min-height: clamp(260px, 38vh, 420px); }
.sj-page-hero .wp-block-post-title { color: #fff; margin: 0; }

/* ------------------------------------------------------------------- Mail list (content) */
.sj-contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.sj-contact-list li { margin: 0; }
.sj-contact-list li::before { display: none; }
.sj-contact-list a {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .85rem 1.1rem;
	border-radius: var(--wp--custom--radius--s);
	background: var(--wp--preset--color--snow);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
	transition: background .2s, color .2s, transform .2s;
}
.sj-contact-list a::before { content: "\2709"; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--wp--preset--color--primary); color: #fff; flex: 0 0 auto; font-size: 1rem; }
.sj-contact-list a:hover { background: var(--wp--preset--color--primary-soft); transform: translateX(4px); }

/* ------------------------------------------------------------- Stat tiles */
.sj-stat { text-align: center; }
.sj-stat .sj-stat__value { font-family: var(--wp--preset--font-family--heading); font-weight: 800; text-transform: uppercase; line-height: 1; font-size: clamp(2rem, 4vw, 3rem); color: var(--wp--preset--color--primary); margin: 0; }
.sj-stat .sj-stat__label { font-family: var(--wp--preset--font-family--heading); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .9375rem; color: var(--wp--preset--color--muted); margin: 0 0 .35rem; }

/* Big distance numbers */
.sj-distance-number { font-family: var(--wp--preset--font-family--heading); font-weight: 800; line-height: .85; font-size: clamp(4.5rem, 9vw, 7rem); color: var(--wp--preset--color--primary); margin: 0; }
.sj-distance-number sup { font-size: .32em; letter-spacing: .06em; vertical-align: baseline; margin-left: .2em; color: var(--wp--preset--color--ink); }

/* Notice band ("meer info binnenkort") */
.sj-notice { border-left: 6px solid var(--wp--preset--color--primary); }

/* Contact Form 7 */
.wpcf7 form { display: grid; gap: 1.1rem; }
.wpcf7 label { display: block; font-weight: 600; font-size: .9375rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select {
	width: 100%;
	margin-top: .35rem;
	padding: .85rem 1rem;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--s);
	transition: border-color .2s, box-shadow .2s;
}
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: 0; border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 4px rgba(238, 25, 35, .12); }
.wpcf7 textarea { min-height: 9rem; }
.wpcf7 input[type="submit"] {
	justify-self: start;
	cursor: pointer;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .9rem 2.2rem;
	box-shadow: var(--wp--preset--shadow--glow);
	transition: background .2s, transform .2s;
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--primary-dark); transform: translateY(-2px); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--wp--preset--color--primary-dark); font-size: .875rem; margin-top: .3rem; }
.wpcf7 .wpcf7-response-output { margin: 0; padding: .9rem 1.1rem; border-radius: var(--wp--custom--radius--s); border-width: 2px; }

/* ----------------------------------------------------- Scroll reveal (front end only) */
.sj-js .sj-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.sj-js .sj-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sj-js .sj-reveal { opacity: 1; transform: none; transition: none; } }
/* Never hide content inside the editor */
.editor-styles-wrapper .sj-reveal { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 781px) {
	.sj-announcement .wp-block-sj-event-info + .wp-block-sj-event-info::before { display: none; }
	.sj-announcement { font-size: .8125rem; }
	.sj-header-bar .wp-block-site-logo img { height: 52px; }
	.sj-hide-mobile { display: none !important; }
	.wp-block-columns.is-reverse-mobile { flex-direction: column-reverse; }
}