/* ==========================================================================
   Jennifer – theme styles
   Tokens (colours, fonts, sizes, spacing) live in theme.json; this file holds
   the editorial details theme.json can't express. Loaded on front end + editor.
   ========================================================================== */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern"; }
::selection { background: var(--wp--preset--color--apricot); color: var(--wp--preset--color--ink); }

[id] { scroll-margin-top: 6.5rem; }

:where(a) { text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color .2s ease, text-decoration-color .2s ease; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 3px;
	border-radius: 4px;
}

h1 em, h2 em, h3 em, .wp-block-heading em { font-style: italic; color: var(--wp--preset--color--terracotta); }
h1, h2, h3 { text-wrap: balance; font-optical-sizing: auto; }
p, li { text-wrap: pretty; }

/* Sections stack edge-to-edge; spacing comes from their own padding. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull + .alignfull,
.wp-block-post-content > .alignfull:first-child { margin-block-start: 0; }

/* ---------- Header ---------- */
.jg-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	/* Solid, no backdrop-filter: a filter would trap the fixed mobile-menu overlay inside the header. */
	background: var(--wp--preset--color--cream);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--sand) 70%, transparent);
}
@media (max-width: 600px) { .jg-header { top: 0; } }

.jg-header .wp-block-site-logo img { height: auto; }
@media (max-width: 480px) { .jg-header .wp-block-site-logo img { width: 112px !important; } }

.jg-header .wp-block-navigation-item__content { text-decoration: none; padding-block: .35rem; position: relative; }
.jg-header .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--wp--preset--color--rose); transform: scaleX(0); transform-origin: left;
	transition: transform .3s ease;
}
.jg-header .wp-block-navigation-item__content:hover::after,
.jg-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.jg-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--ink); }

.jg-header-cta .wp-block-button__link { padding: .7rem 1.25rem; font-size: var(--wp--preset--font-size--x-small); }
@media (max-width: 599px) { .jg-header .wp-block-buttons > .wp-block-button.jg-header-cta { display: none; } }

/* Collapse the menu into the overlay up to tablet width (core collapses at 600px only). */
@media (max-width: 859px) {
	.jg-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.jg-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { padding: .5rem; margin: -.5rem; }
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--cream) !important;
	padding: clamp(1.25rem, 5vw, 3rem);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4rem; gap: 1.25rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
}

/* ---------- Typography helpers ---------- */
.is-style-label {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 600 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--ink-soft);
}
.is-style-label:not(.has-text-color) { color: var(--wp--preset--color--ink-soft); }
.is-style-label + * { margin-block-start: 1rem; }

.is-style-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; }

.jg-num {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	color: var(--wp--preset--color--terracotta);
}

.jg-meta { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-soft); }

/* ---------- Images ---------- */
.wp-block-image.is-style-arch img,
.wp-block-image.is-style-arch .components-resizable-box__container { border-radius: 999px 999px 1.25rem 1.25rem; }
.wp-block-image.is-style-soft img { border-radius: 1.25rem; }
.wp-block-image img { object-fit: cover; }

/* ---------- Watercolour wash (brand motif) ---------- */
.is-style-wash { position: relative; isolation: isolate; }
.is-style-wash::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	inset: -14% -18% -10% -18%;
	background: url("../images/wash.svg") center / contain no-repeat;
	opacity: .95;
}
.jg-wash-left::before { inset: -10% 20% -10% -35%; }

/* ---------- Cards ---------- */
.is-style-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 1.5rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}
.is-style-card.has-background { border-color: transparent; }

/* Programme cards */
.jg-programme { display: flex; flex-direction: column; height: 100%; }
.jg-programme > .jg-programme__foot { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent); }
.jg-price {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	letter-spacing: -.02em;
}
.jg-price small { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0; color: var(--wp--preset--color--ink-soft); }
.wp-block-columns.is-layout-flex > .wp-block-column > .jg-programme { height: 100%; }

/* Linked arrow */
.jg-arrow a, a.jg-arrow { font-weight: 600; text-decoration: none; }
.jg-arrow a::after, a.jg-arrow::after { content: " →"; display: inline-block; transition: transform .2s ease; }
.jg-arrow a:hover::after, a.jg-arrow:hover::after { transform: translateX(4px); }

/* ---------- Lists ---------- */
.is-style-checks { list-style: none; padding-left: 0 !important; }
.is-style-checks li { position: relative; padding-left: 1.9em; }
.is-style-checks li + li { margin-top: .55em; }
.is-style-checks li::before {
	content: ""; position: absolute; left: 0; top: .42em; width: 1.05em; height: 1.05em; border-radius: 50%;
	background: var(--wp--preset--color--apricot-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%23A44B2A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.is-style-rule { list-style: none; padding-left: 0 !important; }
.is-style-rule li { padding: .7em 0; border-bottom: 1px solid var(--wp--preset--color--sand); }
.is-style-rule li:first-child { border-top: 1px solid var(--wp--preset--color--sand); }

/* ---------- Columns with dividers ---------- */
@media (min-width: 782px) {
	.wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--sand);
		padding-left: var(--wp--style--block-gap, 2rem);
	}
}
/* Four divided columns are too narrow on tablets: show them as a 2×2 grid. */
@media (min-width: 782px) and (max-width: 1099px) {
	.wp-block-columns.is-style-divided:has(> .wp-block-column:nth-child(4)) {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
	}
	.wp-block-columns.is-style-divided:has(> .wp-block-column:nth-child(4)) > .wp-block-column:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}
}

/* Grid of numbered items with hairlines (help areas) */
.jg-grid-lines { border-top: 1px solid var(--wp--preset--color--sand); }
.jg-grid-lines > * { border-bottom: 1px solid var(--wp--preset--color--sand); padding-block: 1.75rem; }
@media (min-width: 782px) {
	.jg-grid-lines > * { padding-inline-end: 1.5rem; }
}

/* ---------- Quotes / reviews ---------- */
.wp-block-quote.is-style-review {
	position: relative;
	margin: 0;
	padding: 2.75rem 0 0 !important;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}
.wp-block-quote.is-style-review::before {
	content: "“"; position: absolute; top: -.6rem; left: -.05em;
	font-family: var(--wp--preset--font-family--serif); font-style: normal; font-size: 5rem; line-height: 1;
	color: var(--wp--preset--color--rose); opacity: .55;
}
.wp-block-quote cite, .wp-block-pullquote cite {
	display: block; margin-top: 1.25rem;
	font-family: var(--wp--preset--font-family--sans); font-style: normal;
	font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}
.wp-block-quote cite::before { content: "— "; }

/* ---------- Buttons ---------- */
.wp-block-button .wp-block-button__link { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.wp-block-button .wp-block-button__link:active { transform: translateY(1px); }
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 35%, transparent);
	padding: calc(.95rem - 1px) calc(1.75rem - 1px);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); border-color: var(--wp--preset--color--ink);
}

/* ---------- Details (FAQ) ---------- */
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--sand); }
.wp-block-details + .wp-block-details { margin-block-start: 0; }
.jg-faq > .wp-block-details:first-of-type { border-top: 1px solid var(--wp--preset--color--sand); }
.wp-block-details summary {
	list-style: none; cursor: pointer; position: relative; padding-right: 2.5rem;
	font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--large); line-height: 1.35;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: ""; position: absolute; right: .25rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -.75rem;
	border-radius: 50%; border: 1px solid var(--wp--preset--color--sand);
	background:
		linear-gradient(var(--wp--preset--color--terracotta), var(--wp--preset--color--terracotta)) center / 9px 1.5px no-repeat,
		linear-gradient(var(--wp--preset--color--terracotta), var(--wp--preset--color--terracotta)) center / 1.5px 9px no-repeat;
	transition: transform .25s ease, background-size .25s ease;
}
.wp-block-details[open] summary::after { background-size: 9px 1.5px, 1.5px 0; transform: rotate(180deg); }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--ink-soft); max-width: 40rem; }
.wp-block-details[open] > summary { margin-bottom: .75rem; }

/* ---------- Tables (rates) ---------- */
.wp-block-table.is-style-rates table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.wp-block-table.is-style-rates :where(th, td) { border: 0; border-bottom: 1px solid var(--wp--preset--color--sand); padding: 1.05rem .5rem 1.05rem 0; text-align: left; vertical-align: top; }
.wp-block-table.is-style-rates thead { border: 0; }
.wp-block-table.is-style-rates thead th {
	font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft);
	border-bottom: 1px solid var(--wp--preset--color--ink);
}
.wp-block-table.is-style-rates tbody td:first-child { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--ink); }
.wp-block-table.is-style-rates :where(th, td):last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.wp-block-table.is-style-rates tbody td { color: var(--wp--preset--color--ink-soft); }
.wp-block-table.is-style-rates tbody td:last-child { color: var(--wp--preset--color--ink); font-weight: 600; }
.wp-block-table.is-style-rates figcaption { text-align: left; margin-top: 1rem; }
@media (max-width: 520px) {
	.wp-block-table.is-style-rates :where(th, td):nth-child(2) { display: none; }
}

/* ---------- Hero ---------- */
.jg-hero { overflow: clip; }
.jg-hero h1 { font-size: var(--wp--preset--font-size--display); }
.jg-hero__media .wp-block-image { margin: 0 auto; max-width: 30rem; }
.jg-hero__media .wp-block-image img { aspect-ratio: 4 / 5; width: 100%; }
@media (max-width: 781px) {
	.jg-hero .wp-block-columns { flex-direction: column-reverse; }
	.jg-hero__media .wp-block-image { max-width: 20rem; }
	.jg-hero__media .wp-block-image img { aspect-ratio: 1 / 1.05; object-position: 50% 30%; }
}

.jg-trust { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-soft); gap: .5rem 1.5rem !important; }
.jg-trust p { margin: 0; display: flex; align-items: center; gap: .55rem; }
.jg-trust p::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--wp--preset--color--rose); opacity: .7; flex: none; }

/* Page intro (inner pages) */
/* Keep the wide (left-aligned) box but limit the line length from the left edge. */
.jg-page-intro > h1.alignwide { padding-right: max(0px, calc(100% - 52rem)); }
.jg-page-intro > .is-style-lead.alignwide { padding-right: max(0px, calc(100% - 40rem)); }
.jg-breadcrumb { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--ink-soft); }
.jg-breadcrumb a { color: inherit; }

/* ---------- Footer ---------- */
.jg-footer a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--ink); text-decoration-color: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent); }
.jg-footer a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--terracotta); }
.jg-footer .is-style-rule li { padding: .45em 0; display: flex; justify-content: space-between; gap: 1rem; }
.jg-footer .jg-hours li span:last-child { font-variant-numeric: tabular-nums; }
.jg-footer-legal { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--ink-soft); }
.jg-footer-legal a { color: var(--wp--preset--color--ink-soft) !important; }
.jg-footer-logo img { max-width: 260px; height: auto; margin-left: -12px; }
.jg-footer-social { gap: 1.25rem 1.5rem; }
.jg-footer-social p { margin: 0; }
.jg-footer-instagram { margin: 0; }
.jg-footer-instagram .wp-social-link { transition: color .2s ease; }
.jg-footer-instagram .wp-social-link:hover { color: var(--wp--preset--color--terracotta) !important; }
.jg-kp-sticker { display: block; width: 149px; height: 149px; border: 0; }

/* ---------- Contact form ---------- */
.jg-form { display: grid; gap: 1.1rem; }
.jg-form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .jg-form__row--2 { grid-template-columns: 1fr 1fr; } }
.jg-field { margin: 0; display: grid; gap: .4rem; }
.jg-field label { font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.jg-field label span[aria-hidden] { color: var(--wp--preset--color--terracotta); }
.jg-optional { font-weight: 400; color: var(--wp--preset--color--ink-soft); }
.jg-field :where(input[type=text], input[type=email], input[type=tel], select, textarea) {
	width: 100%; box-sizing: border-box;
	font: inherit; font-size: 1rem; color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid #CDBFB0; border-radius: .75rem;
	padding: .85rem 1rem; min-height: 3rem;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.jg-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232E2A28' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: .75rem; padding-right: 2.5rem; }
.jg-field textarea { min-height: 9rem; resize: vertical; }
.jg-field :where(input, select, textarea):focus { border-color: var(--wp--preset--color--terracotta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--terracotta) 18%, transparent); outline: none; }
.jg-field--check { grid-template-columns: auto 1fr; align-items: start; gap: .75rem; }
.jg-field--check input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--wp--preset--color--terracotta); }
.jg-field--check label { font-weight: 400; }
.jg-field--hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.jg-hint { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--ink-soft); }
.jg-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: .5rem 0 0; }
.jg-form button { cursor: pointer; border: 0; }
.jg-form-notice { border-radius: 1rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.jg-form-notice p { margin: 0; }
.jg-form-notice.is-success { background: var(--wp--preset--color--apricot-soft); }
.jg-form-notice.is-error { background: var(--wp--preset--color--blush); }

/* No entrance animations on the hero on purpose: the H1 and portrait are the LCP candidates. */

/* ---------- Print ---------- */
@media print {
	.jg-header, .jg-footer, .jg-cta, .wp-block-buttons { display: none !important; }
	.is-style-wash::before { display: none; }
}


/* Hero: let the watercolour bleed well beyond the portrait. */
.jg-hero__media .is-style-wash::before { inset: -18% -32% -14% -30%; opacity: 1; }
@media (max-width: 781px) { .jg-hero__media .is-style-wash::before { inset: -12% -22% -8% -22%; } }

/* Watercolour washes bleed beyond their box; never let them widen the page. (clip keeps sticky working) */
.wp-site-blocks { overflow-x: clip; }

/* Mobile menu overlay: padded, left-aligned, editorial. */
.jg-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem clamp(1.25rem, 5vw, 3rem) !important; }
.jg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.jg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
.jg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem; width: 100%; }
.jg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--wp--preset--color--sand); padding-bottom: 1.1rem; }
.jg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
.jg-header .wp-block-navigation__responsive-container-close { top: 1.5rem; right: clamp(1.25rem, 5vw, 3rem); margin: 0; }
.jg-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}
.jg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4.5rem !important; }
.jg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { text-align: left; }
.jg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; }

/* ---------- Button style "Perzik met pijl" (soft peach pill with arrow disc) ---------- */
.wp-block-button.is-style-arrow .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 1.1rem;
	background: var(--wp--preset--color--peach); color: var(--wp--preset--color--ink);
	padding: .5rem .5rem .5rem 1.75rem;
	font-size: var(--wp--preset--font-size--medium); font-weight: 600;
	box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--wp--preset--color--terracotta) 55%, transparent);
}
.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: ""; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2A28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1.15rem no-repeat,
		color-mix(in srgb, var(--wp--preset--color--ink) 9%, transparent);
	transition: transform .25s ease;
}
.wp-block-button.is-style-arrow .wp-block-button__link:hover,
.wp-block-button.is-style-arrow .wp-block-button__link:focus-visible { background: #CDAA8E; color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-arrow .wp-block-button__link:hover::after { transform: translateX(3px); }

/* Matching secondary button next to it */
.jg-cta-pair { gap: .9rem; align-items: center; }
.jg-cta-pair .wp-block-button.is-style-outline .wp-block-button__link {
	font-size: var(--wp--preset--font-size--medium); font-weight: 600;
	padding: 1.05rem 1.9rem;
	border-color: color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
}

/* ---------- Google reviews badge ---------- */
.jg-rating {
	display: inline-flex; align-items: center; gap: .9rem;
	margin-top: 1.75rem; padding: .5rem 1.4rem .5rem .5rem;
	border: 1px solid var(--wp--preset--color--sand); border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 70%, transparent);
	color: var(--wp--preset--color--ink); text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease;
}
.jg-rating:hover { border-color: var(--wp--preset--color--peach); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.jg-rating__logo { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(46,42,40,.08); flex: none; }
.jg-rating__logo svg { width: 1.75rem; height: 1.75rem; }
.jg-rating__score { font-family: var(--wp--preset--font-family--serif); font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; }
.jg-rating__meta { display: grid; gap: .15rem; }
.jg-rating__stars { display: flex; gap: .2rem; }
.jg-rating__stars svg { width: 1.05rem; height: 1.05rem; fill: #D9A441; }
.jg-rating__count { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-soft); line-height: 1.2; }
.wp-block-shortcode:has(> .jg-rating), p:has(> .jg-rating) { margin-block: 0; }
@media (max-width: 420px) {
	.wp-block-button.is-style-arrow .wp-block-button__link, .jg-cta-pair .wp-block-button.is-style-outline .wp-block-button__link { font-size: 1rem; }
}

/* Medium screens (laptops/tablet landscape): keep the full menu visible, just tighter. */
@media (min-width: 860px) and (max-width: 1180px) {
	.jg-header .wp-block-navigation__container { gap: 1.1rem !important; }
	.jg-header .wp-block-site-logo img { width: 140px !important; }
	.jg-header .wp-block-group.is-layout-flex { gap: 1.1rem; }
	.jg-header-cta .wp-block-button__link { padding: .65rem 1rem; }
}

/* ---------- Image style "Cirkel" ---------- */
.wp-block-image.is-style-circle img,
.jg-hero__media .wp-block-image.is-style-circle img {
	aspect-ratio: 1 / 1 !important;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 38%;
}
.wp-block-image.is-style-circle .components-resizable-box__container { border-radius: 50%; }

/* Full-bleed photo band (edge to edge, no rounding); a bit taller on phones so it doesn't become a sliver. */
.wp-block-image.jg-band { margin-block: var(--wp--preset--spacing--60); }
.wp-block-image.jg-band img { width: 100%; border-radius: 0; object-position: 50% 45%; }
@media (max-width: 600px) { .wp-block-image.jg-band img { aspect-ratio: 16 / 9 !important; } }

/* Centred intro text that runs wider than the normal 42rem column. */
.is-layout-constrained > .jg-wide-text { max-width: 58rem; margin-left: auto !important; margin-right: auto !important; }
.is-layout-constrained > h2.alignwide.has-text-align-center { max-width: 62rem; }

/* All page intros use the same large display heading as Over mij / Home. */
.jg-page-intro h1 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.04;
	letter-spacing: -0.025em;
}

/* Watercolour logo: a slightly tighter header so the taller logo doesn't make it bulky. */
.jg-header > .wp-block-group { padding-top: .4rem !important; padding-bottom: .4rem !important; }
.jg-header .wp-block-site-logo { line-height: 0; }

/* Smaller round photo (e.g. "Hoi, ik ben Jennifer"), centred in its column. */
.wp-block-image.jg-photo-sm { max-width: 21rem; margin-inline: auto; }
.wp-block-image.jg-photo-sm img { object-position: 40% 50% !important; }
@media (max-width: 781px) { .wp-block-image.jg-photo-sm { max-width: 15rem; } }

/* White divider line between sections. */
.wp-block-separator.jg-divider-white {
	border: 0 !important;
	border-top: 80px solid var(--wp--preset--color--white) !important;
	opacity: 1;
	margin-block: 0 !important;
}

/* ---------- Feature card (photo + content), e.g. "Waar ik je mee help" ---------- */
.jg-feature-card {
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(46,42,40,.04), 0 40px 80px -40px rgba(164,75,42,.28);
}
.jg-feature-card > .wp-block-columns { margin: 0; gap: 0 !important; align-items: stretch !important; }
.jg-feature-media { position: relative; min-height: 18rem; }
.jg-feature-media .wp-block-image { position: absolute; inset: 0; margin: 0; }
.jg-feature-media .wp-block-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.jg-feature-body { padding: clamp(1.75rem, 4.5vw, 4rem) !important; }
.jg-feature-body h2 { margin-top: .75rem; }
@media (max-width: 781px) {
	.jg-feature-media { min-height: 0; aspect-ratio: 16 / 10; flex-basis: auto !important; }
}

/* Topic tiles */
.jg-help-item {
	gap: 1rem !important;
	padding: 1.15rem 1.2rem;
	border-radius: 1.25rem;
	background: var(--wp--preset--color--cream);
	border: 1px solid transparent;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.jg-help-item:hover {
	background: var(--wp--preset--color--apricot-soft);
	border-color: color-mix(in srgb, var(--wp--preset--color--apricot) 70%, transparent);
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -18px rgba(164,75,42,.35);
}
@media (prefers-reduced-motion: reduce) { .jg-help-item, .jg-help-item:hover { transition: none; transform: none; } }
.jg-help-item h3 { font-family: var(--wp--preset--font-family--serif); line-height: 1.25; margin: 0; }
.jg-help-item p { margin: 0; line-height: 1.55; }
p.jg-badge {
	flex: none; margin: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--wp--preset--color--white); color: var(--wp--preset--color--terracotta);
	font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1rem; line-height: 1;
	box-shadow: 0 1px 2px rgba(46,42,40,.06), 0 6px 14px -8px rgba(164,75,42,.45);
}

/* Simple bullet list (two columns on wider screens) */
.jg-bullets { list-style: none; padding-left: 0 !important; columns: 2 15rem; column-gap: 2.5rem; }
.jg-bullets li { position: relative; padding: .45rem 0 .45rem 1.4rem; break-inside: avoid; }
.jg-bullets li::before {
	content: ""; position: absolute; left: .1rem; top: 1.05em; width: .5rem; height: .5rem; border-radius: 50%;
	background: var(--wp--preset--color--terracotta);
}

/* Helper: subject sits on the right of a landscape photo (e.g. the coffee cup).
   Shift and zoom the circle crop onto it. Add class "jg-focus-right" to the image block. */
.wp-block-image.is-style-circle.jg-focus-right { border-radius: 50%; overflow: hidden; }
.jg-hero__media .wp-block-image.is-style-circle.jg-focus-right img,
.wp-block-image.is-style-circle.jg-focus-right img {
	object-position: 100% 45%;
	transform: scale(1.25) translate(-9%, 8%);
}

/* Helper: show the lower part of a full-width photo band (subject sits low in the photo). */
.wp-block-image.jg-band.jg-focus-low img { object-position: 50% 72%; }