/*
 * Quinn Realty — rules theme.json cannot express.
 * Loaded on the front end and inside the editor (add_editor_style),
 * so every block style previews correctly while editing.
 *
 * Sections:
 *   1. Base behaviour (transitions, focus, motion)
 *   2. Block styles  (.is-style-*) — one per Figma component
 *   3. Responsive tweaks
 */

/* ========================================================================
   1. Base
   ======================================================================== */

a,
.wp-block-button__link,
.wp-block-navigation-item__content {
	transition: color var(--wp--custom--transition), background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

/* Keep the scrollbar's space reserved while the menu overlay locks
   scrolling, so the header doesn't shift sideways as it opens. */
html {
	scrollbar-gutter: stable;
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ========================================================================
   2. Block styles
   ======================================================================== */

/* ---- Heading > Script ----------------------------------------------
   Meow Script display text used in the hero ("Opening doors", "Let's talk").
   White with a black glow so it reads over photos. Size is left to the
   editor's font-size picker (Script L / Script XL presets). */
.wp-block-heading.is-style-script,
.wp-block-heading.is-style-script-underline {
	font-family: var(--wp--preset--font-family--script);
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--base);
	text-shadow: var(--wp--preset--shadow--text-glow);
}

/* ---- Heading > Script + underline ----------------------------------
   Adds the hand-drawn red stroke beneath the text. */
.wp-block-heading.is-style-script a,
.wp-block-heading.is-style-script-underline a {
	color: inherit;
	text-decoration: none;
}
.wp-block-heading.is-style-script a:hover,
.wp-block-heading.is-style-script-underline a:hover {
	color: var(--wp--preset--color--base-2);
}

/* ---- Heading > Underline (any font) / Script + underline ------------
   The stroke hugs the baseline (it may cross descenders, as in Figma)
   and can be nudged sideways so it sits under one word rather than the
   whole line. Add `qr-underline-shift-left` / `-right` in Advanced >
   Additional CSS classes; the amounts match the home hero. */
.wp-block-heading.is-style-underline,
.wp-block-heading.is-style-script-underline {
	--qr-underline-w: 1.9em;
	--qr-underline-y: 0.02em;   /* gap between the em box bottom and the stroke */
	--qr-underline-x: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.wp-block-heading.is-style-script-underline {
	--qr-underline-w: 1.55em;
	--qr-underline-y: -0.2em;   /* script glyphs sit higher in the em box */
}
.wp-block-heading.is-style-underline.has-text-align-left,
.wp-block-heading.is-style-script-underline.has-text-align-left {
	align-items: flex-start;
}
.wp-block-heading.is-style-underline.has-text-align-right,
.wp-block-heading.is-style-script-underline.has-text-align-right {
	align-items: flex-end;
}
.wp-block-heading.is-style-underline::after,
.wp-block-heading.is-style-script-underline::after {
	content: "";
	display: block;
	width: var(--qr-underline-w);
	height: 0.08em;
	margin-top: var(--qr-underline-y);
	translate: var(--qr-underline-x) 0;
	background: url("../img/underline.svg") center / contain no-repeat;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
	pointer-events: none;
}
.wp-block-heading.qr-underline-shift-left {
	--qr-underline-x: -1.1em;
}
.wp-block-heading.qr-underline-shift-right {
	--qr-underline-x: 1.05em;
}

/* ---- Cover > Home hero -------------------------------------------------
   All hero copy gets the black glow from the design. On the front page
   the header floats over the top of the hero (see Header below), so the
   hero's top padding grows by the header height to keep the copy where
   Figma places it. */
.qr-hero .wp-block-cover__inner-container :is(h1, h2, h3, p) {
	text-shadow: var(--wp--preset--shadow--text-glow);
}
body.qr-has-hero {
	--qr-hero-offset: var(--qr-header-h, 77px);
}

/* ---- Group > Bordered card -----------------------------------------
   Testimonial cards: 1px black border, 8px radius. */
.wp-block-group.is-style-bordered-card {
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
}

/* ---- Group > Photo frame -------------------------------------------
   Large rounded frame around an image (Resources section). */
.wp-block-group.is-style-photo-frame {
	border: var(--wp--custom--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: 14px;
	background: var(--wp--preset--color--base);
}
.wp-block-group.is-style-photo-frame .wp-block-image,
.wp-block-group.is-style-photo-frame .wp-block-image img {
	border-radius: calc(var(--wp--custom--radius--lg) - 4px);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wp-block-group.is-style-photo-frame .wp-block-image {
	margin: 0;
}

/* ---- Group > Band ----------------------------------------------------
   Full-width strip with a soft drop shadow (sub-hero tagline). */
.wp-block-group.is-style-band {
	box-shadow: var(--wp--preset--shadow--band);
	position: relative;
	z-index: 1;
}

/* ---- Cover > Town card ---------------------------------------------
   Photo tile with a 15px rounded 1px border, inner image at 10px radius,
   and a translucent white label strip along the bottom. The Cover's
   inner content (a heading) becomes the label. Aspect ≈ 296×203. */
.wp-block-cover.is-style-town-card {
	--qr-tile-pad: 9px;
	border: var(--wp--custom--border);
	border-radius: var(--wp--custom--radius--md);
	padding: 0;
	min-height: 0;
	aspect-ratio: 296 / 203;
	align-items: flex-end;
	justify-content: stretch;
	background: var(--wp--preset--color--base);
	overflow: hidden;
}
.wp-block-cover.is-style-town-card .wp-block-cover__image-background,
.wp-block-cover.is-style-town-card .wp-block-cover__video-background {
	/* A replaced element ignores inset for sizing, so give it explicit
	   dimensions or it renders at its natural size and overflows. */
	inset: var(--qr-tile-pad);
	width: calc(100% - 2 * var(--qr-tile-pad));
	height: calc(100% - 2 * var(--qr-tile-pad));
	border-radius: calc(var(--wp--custom--radius--md) - 5px);
}
.wp-block-cover.is-style-town-card .wp-block-cover__background.has-background-dim {
	inset: var(--qr-tile-pad);
	border-radius: calc(var(--wp--custom--radius--md) - 5px);
	opacity: 0;
}
.wp-block-cover.is-style-town-card .wp-block-cover__inner-container {
	/* Label strip: 35px tall on a 203px tile, sitting ~23px above the
	   photo's bottom edge (Figma), expressed as a % of tile width. */
	flex: 1 1 auto; /* span the full photo width; the cover is a flex row */
	width: auto;
	margin: 0 var(--qr-tile-pad) calc(var(--qr-tile-pad) + 7.8%);
	padding: 0.1em 0.5em;
	background: rgba(255, 255, 255, 0.55);
	text-align: center;
	backdrop-filter: blur(1px);
}
.wp-block-cover.is-style-town-card .wp-block-cover__inner-container > * {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	white-space: nowrap;
	text-shadow: none;
}
.wp-block-cover.is-style-town-card a {
	color: inherit;
	text-decoration: none;
}
/* Stretch the label's link over the whole tile so the photo is clickable
   too. The label strip (inner container) is the link's positioned ancestor,
   so the overlay is oversized and left to the tile's overflow: hidden to clip. */
.wp-block-cover.is-style-town-card a::after {
	content: "";
	position: absolute;
	inset: -100vh -100vw;
	z-index: 2;
}
.wp-block-cover.is-style-town-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---- Cover > Fade to white -----------------------------------------
   Replaces the Cover's dim overlay with a white gradient so content on
   one side sits on white while the photo bleeds in from the other. */
.wp-block-cover.is-style-fade-right .wp-block-cover__background.has-background-dim,
.wp-block-cover.is-style-fade-left .wp-block-cover__background.has-background-dim {
	opacity: 1;
	background-color: transparent;
}
.wp-block-cover.is-style-fade-right .wp-block-cover__background.has-background-dim {
	background-image: var(--wp--preset--gradient--fade-right);
}
.wp-block-cover.is-style-fade-left .wp-block-cover__background.has-background-dim {
	background-image: var(--wp--preset--gradient--fade-left);
}
.wp-block-cover.is-style-fade-right,
.wp-block-cover.is-style-fade-left {
	color: var(--wp--preset--color--contrast);
}
.wp-block-cover.is-style-fade-right .wp-block-cover__inner-container,
.wp-block-cover.is-style-fade-left .wp-block-cover__inner-container {
	color: inherit;
}
.wp-block-cover.is-style-fade-right .wp-block-cover__inner-container :where(h1, h2, h3, h4, h5, h6),
.wp-block-cover.is-style-fade-left .wp-block-cover__inner-container :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--primary);
}

/* ---- Columns > Space between -----------------------------------------
   Add `qr-space-between` to a Columns block to push the outer columns to
   the container edges (intro section: portrait left, copy right). */
@media (min-width: 782px) {
	.wp-block-columns.qr-space-between {
		justify-content: space-between;
	}
}

/* ---- Cover > mirrored background ------------------------------------
   Add `qr-flip-bg` (Advanced > Additional CSS classes) to flip the
   photo horizontally, as the Figma intro section does with the
   landscape so the road sits behind the copy. */
.wp-block-cover.qr-flip-bg .wp-block-cover__image-background,
.wp-block-cover.qr-flip-bg .wp-block-cover__video-background {
	transform: scaleX(-1);
}
/* Same idea for a plain Image block (resources photo). */
.wp-block-image.qr-flip img {
	transform: scaleX(-1);
}

/* ---- Cover > photo on the right ---------------------------------------
   Add `qr-photo-right` to a Cover to confine its background photo to the
   right 59% of the band (Figma calculator section: 1137px of 1920px),
   cropped to its vertical centre. The fade-left overlay hides the seam. */
.wp-block-cover.qr-photo-right {
	--qr-photo-start: 40.8%; /* calculator: photo is the right 59.2% */
}
.wp-block-cover.qr-photo-right .wp-block-cover__image-background,
.wp-block-cover.qr-photo-right .wp-block-cover__video-background {
	left: var(--qr-photo-start);
	width: calc(100% - var(--qr-photo-start));
	object-position: 50% 51%;
}
/* Interior-page intro bands (Buyer's Guide etc.): photo is the right 52%,
   white until 52% of the band, clear by 77% (Figma 1610px gradient). */
.wp-block-cover.qr-photo-right.qr-split-52 {
	--qr-photo-start: 48.1%;
}
.wp-block-cover.qr-split-52.is-style-fade-left .wp-block-cover__background.has-background-dim {
	background-image: linear-gradient(90deg, #ffffff 52%, rgba(255, 255, 255, 0) 77%);
}

/* Wider variant (Property Management "Let Us Help"): photo from 32%,
   white until 59%, clear by 84% (Figma 1748px gradient). */
.wp-block-cover.qr-photo-right.qr-split-59 {
	--qr-photo-start: 32.2%;
}
.wp-block-cover.qr-split-59.is-style-fade-left .wp-block-cover__background.has-background-dim {
	background-image: linear-gradient(90deg, #ffffff 59%, rgba(255, 255, 255, 0) 84%);
}

/* Contact "Let's Get Started": photo right 52%, white to 63%, clear by 89%. */
.wp-block-cover.qr-photo-right.qr-split-63 {
	--qr-photo-start: 48%;
}
.wp-block-cover.qr-split-63.is-style-fade-left .wp-block-cover__background.has-background-dim {
	background-image: linear-gradient(90deg, #ffffff 63%, rgba(255, 255, 255, 0) 89%);
}

/* Town "About" bands. 55: photo right 50%, white to 55%, clear by 80%.
   68: photo right 61%, white to 68%, clear by 93%. */
.wp-block-cover.qr-photo-right.qr-split-55 {
	--qr-photo-start: 50%;
}
.wp-block-cover.qr-split-55.is-style-fade-left .wp-block-cover__background.has-background-dim {
	background-image: linear-gradient(90deg, #ffffff 55%, rgba(255, 255, 255, 0) 80%);
}
.wp-block-cover.qr-photo-right.qr-split-68 {
	--qr-photo-start: 38.5%;
}
.wp-block-cover.qr-split-68.is-style-fade-left .wp-block-cover__background.has-background-dim {
	background-image: linear-gradient(90deg, #ffffff 68%, rgba(255, 255, 255, 0) 93%);
}

/* ---- Group > Placeholder card ------------------------------------------
   Bordered rounded card with a red label, standing in for feeds
   (blog, videos, listings). Aspect 437×489. */
.wp-block-group.is-style-placeholder-card {
	border: var(--wp--custom--border);
	border-radius: var(--wp--custom--radius--lg);
	aspect-ratio: 437 / 489;
	padding: 2.5rem 1.75rem;
}
.wp-block-group.is-style-placeholder-card p {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

/* ---- Group > Post card ----------------------------------------------------
   A published post rendered inside the Figma feed frame: the same 1px
   rounded card as the placeholder, holding the featured image, the date,
   a red title and the excerpt. Cards stretch to the tallest in the row
   because the Query Loop lays them out on a grid. */
.wp-block-group.is-style-post-card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	height: 100%;
	border: var(--wp--custom--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: 1.75rem;
	background: var(--wp--preset--color--base);
}
/* Core's constrained layout centres children with !important auto margins;
   inside the flex card they must stay full width and left aligned. */
.wp-block-group.is-style-post-card > * {
	margin: 0 !important;
	max-width: none;
	text-align: left;
}
.wp-block-group.is-style-post-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: calc(var(--wp--custom--radius--lg) - 14px);
	aspect-ratio: 16 / 10;
}
.wp-block-group.is-style-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wp-block-group.is-style-post-card .wp-block-post-date {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-group.is-style-post-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.2;
}
.wp-block-group.is-style-post-card .wp-block-post-title,
.wp-block-group.is-style-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.wp-block-group.is-style-post-card .wp-block-post-title a:hover,
.wp-block-group.is-style-post-card .wp-block-post-title a:focus {
	text-decoration: underline;
}
.wp-block-group.is-style-post-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
}
.wp-block-group.is-style-post-card .wp-block-post-excerpt__more-text {
	margin: 0.75rem 0 0;
}
.wp-block-group.is-style-post-card .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}
/* The feed grid: the mockup puts three 31.4% cards across the wide column,
   so the gutter is the 2.9% left over, not a fixed preset. */
.wp-block-query.qr-post-feed .wp-block-post-template.is-layout-grid {
	column-gap: 2.9%;
	row-gap: var(--wp--preset--spacing--40);
}
/* Core lays the grid out at a fixed three across; step it down so cards
   stay readable on tablets and phones (the mockup only shows desktop). */
@media (max-width: 1024px) {
	.wp-block-query.qr-post-feed .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--40);
	}
}
@media (max-width: 700px) {
	.wp-block-query.qr-post-feed .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Pagination under the full blog archive. */
.wp-block-query.qr-post-feed .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--medium);
}
.wp-block-query.qr-post-feed .wp-block-query-pagination a {
	text-decoration: none;
}
.wp-block-query.qr-post-feed .wp-block-query-pagination a:hover {
	color: var(--wp--preset--color--primary);
}
.wp-block-query.qr-post-feed .wp-block-query-pagination-numbers .current {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* ---- Map placeholder (Contact) ------------------------------------------- */
.wp-block-group.is-style-placeholder-band.qr-map-placeholder {
	min-height: 35vw;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wp-block-group.is-style-placeholder-band.qr-map-placeholder p {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
}

/* ---- Office map (Contact) -------------------------------------------------
   Same footprint as the placeholder band it replaces. */
.wp-block-group.qr-office-map {
	line-height: 0;
}
.wp-block-group.qr-office-map iframe {
	display: block;
	width: 100%;
	height: 35vw;
	min-height: 320px;
	max-height: 520px;
	border: 0;
}

/* ---- Contact form card ----------------------------------------------------
   Static markup matching the mockup; wire to a form plugin when ready. */
.qr-contact-form {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 1.5rem;
}
.qr-contact-form input,
.qr-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	border: var(--wp--custom--border);
	border-radius: var(--wp--custom--radius--sm);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	background: var(--wp--preset--color--base);
}
.qr-contact-form textarea {
	grid-column: 1 / -1;
	min-height: 10.5rem;
	resize: vertical;
}
.qr-contact-form button {
	grid-column: 1 / -1;
	justify-self: start;
}
@media (max-width: 600px) {
	.qr-contact-form {
		grid-template-columns: 1fr;
	}
}

/* Body-size bullet lists in page copy: breathing room between items (Figma 25px). */
ul.wp-block-list.has-large-font-size > li + li {
	margin-top: 0.9em;
}

/* ---- List > Numbered circles, "advantages" variant --------------------
   Larger 64px numerals with a bold red title on the first line
   (Property Management page). Author items as <strong>Title</strong><br>text. */
.wp-block-list.is-style-numbered-circles.qr-advantages {
	/* a real 2×2 grid (1 2 / 3 4) instead of flowing columns, so rows line up */
	columns: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(2rem, 7vw, 8.5rem);
	row-gap: clamp(1.5rem, 3vw, 3.5rem);
}
.wp-block-list.is-style-numbered-circles.qr-advantages li {
	display: block;
	position: relative;
	padding-left: 3.65em; /* circle (2.5em) + gap */
	margin: 0;
}
.wp-block-list.is-style-numbered-circles.qr-advantages li::before {
	--qr-circle: 2.3em; /* 64px at the 28px numeral size */
	position: absolute;
	left: 0;
	top: -0.15em;
	margin: 0;
}
.wp-block-list.is-style-numbered-circles.qr-advantages li strong {
	display: block;
	margin: 0.35em 0 0.8em;
	color: var(--wp--preset--color--primary);
}
@media (max-width: 781px) {
	.wp-block-list.is-style-numbered-circles.qr-advantages {
		grid-template-columns: 1fr;
	}
}

/* ---- Group > Dark callout ------------------------------------------------
   Dark grey rounded box with white copy (Property Management). */
.wp-block-group.is-style-dark-callout {
	background: #373737;
	color: var(--wp--preset--color--base);
	border-radius: 14px;
	padding: 1.4rem 1.9rem;
}
.wp-block-group.is-style-dark-callout p {
	margin: 0;
	line-height: 1.25;
}

/* Grey tile standing in for a photo not yet supplied (inside a photo frame). */
.wp-block-group.qr-placeholder-tile {
	background: #d9d9d9;
	border-radius: calc(var(--wp--custom--radius--lg) - 4px);
	width: 100%;
	aspect-ratio: 10 / 11;
}

/* ---- Group > Placeholder band --------------------------------------------
   Grey strip with centred label for widgets still to be embedded (Rentals). */
.wp-block-group.is-style-placeholder-band {
	background: #d9d9d9;
	text-align: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.wp-block-group.is-style-placeholder-band p {
	margin: 0;
	font-size: clamp(1.25rem, 1.82vw, 2.1875rem);
}

/* ---- Cover > photo on the left (mirror of the above) ------------------
   Rentals calculator band: photo is the left 50%, white from 48% rightward. */
.wp-block-cover.qr-photo-left {
	--qr-photo-end: 50.4%;
}
.wp-block-cover.qr-photo-left .wp-block-cover__image-background,
.wp-block-cover.qr-photo-left .wp-block-cover__video-background {
	left: 0;
	width: var(--qr-photo-end);
	object-position: 50% 50%;
}
.wp-block-cover.qr-photo-left.is-style-fade-right .wp-block-cover__background.has-background-dim {
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 23%, #ffffff 48.5%);
}
@media (max-width: 781px) {
	.wp-block-cover.qr-photo-left .wp-block-cover__image-background,
	.wp-block-cover.qr-photo-left .wp-block-cover__video-background {
		width: 100%;
	}
	.wp-block-cover.qr-photo-left.is-style-fade-right .wp-block-cover__background.has-background-dim {
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.72) 100%);
	}
}

/* ---- List > Numbered circles ---------------------------------------
   Red 39px circles with white bold numerals. One list flows into two
   columns at desktop, so numbering continues naturally (1–5 | 6–10). */
.wp-block-list.is-style-numbered-circles {
	/* Figma at 1920px: 25.6px text, 39px circle, 28px bold numeral, 35px
	   between items, ~30px between circle and text. Everything is in em so
	   the whole thing scales with the list's font size. */
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	counter-reset: qr-item;
	columns: 2;
	column-gap: 1rem;
}
.wp-block-list.is-style-numbered-circles li {
	counter-increment: qr-item;
	display: flex;
	align-items: flex-start;
	gap: 1.15em;
	margin-bottom: 1.37em;
	break-inside: avoid;
	page-break-inside: avoid;
}
.wp-block-list.is-style-numbered-circles li::before {
	/* Sizes below are in the numeral's own em (1.09× the list size):
	   circle 39px ≈ 1.39em, top offset 5px ≈ 0.18em. */
	content: counter(qr-item);
	--qr-circle: 1.39em;
	flex: 0 0 var(--qr-circle);
	width: var(--qr-circle);
	height: var(--qr-circle);
	/* With line-height 1.25 the text's cap top sits ~5px below the line
	   box; nudge the circle down the same amount so their tops align. */
	margin-top: 0.18em;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	font-size: 1.09em;
	line-height: var(--qr-circle);
	text-align: center;
}

/* ---- Separator > Vertical ------------------------------------------
   Thin full-height rule for use as a middle column between two blocks. */
.wp-block-separator.is-style-vertical {
	width: 1px !important;
	height: 100%;
	min-height: 100%;
	margin: 0 auto;
	border: none;
	background: currentColor;
	opacity: 0.6;
}
.wp-block-column:has(> .wp-block-separator.is-style-vertical) {
	display: flex;
	align-self: stretch;
}

/* ---- Header + Navigation: red hover tab ------------------------------
   Header: logo top-left, links top-right, nudged down so they sit level
   with the logo's upper third (as in the design). Hovering any top-level
   link grows the Figma red tab behind it: a solid block hanging from the
   bar's very top edge with rounded bottom corners (see "Hover tab"). */
/* Fixed header. The template-part wrapper (<header class="wp-block-
   template-part">) is taken out of the flow so the compact/full
   transition never moves page content. Interior pages get a spacer the
   height of the bar (--qr-header-h, set by assets/js/header.js; 77px =
   0.5rem padding + 61px logo + 0.5rem padding is the no-JS fallback). The
   front page needs no spacer: the hero runs underneath the bar.
   Scoped to the front end so the Site Editor keeps a normal in-flow bar. */
body:not(.block-editor-iframe__body) .wp-block-template-part:has(> .qr-header) {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}
body:not(.block-editor-iframe__body):not(.qr-has-hero) .wp-site-blocks {
	padding-top: var(--qr-header-h, 77px);
}
/* The bar keeps one geometry at every scroll position: the small logo and
   tight padding it used to shrink to. Only the backdrop changes on scroll,
   so nothing shifts under the reader. The matching padding and logo width
   live on the blocks in parts/header.html. */
.qr-header {
	--qr-bar-pad: 0.5rem;       /* matches the header block's inline padding */
	--qr-logo-h: 61px;          /* rendered height of the 90px site-logo block */
	--qr-nav-offset: 0;
	--qr-scrolled-tab-h: 77px;  /* pad + logo + pad; also the hover tab's height */
	/* Legibility over a hero photo: a white veil that is already slightly
	   see-through at the top of the bar and gone by its bottom edge, so the
	   links read clearly while the photo still shows through. */
	--qr-header-fade: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.76) 52%, rgba(255, 255, 255, 0) 100%);
	position: relative;
	background-color: var(--wp--preset--color--base);
	background-image: var(--qr-header-fade);
	transition: background-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}
.qr-header.is-scrolled {
	box-shadow: var(--wp--preset--shadow--band);
}
.qr-header .wp-block-site-logo img {
	width: 100%;
	height: auto;
}
.qr-header > .alignwide {
	align-items: center;
}
/* Front page: header is transparent over the hero photo (Figma), pulls
   the hero up underneath itself, then turns white once the page scrolls.
   --qr-header-h is measured by assets/js/header.js. */
/* The site-blocks block gap would otherwise leave a strip above the hero. */
body.qr-has-hero .wp-site-blocks > main {
	margin-block-start: 0;
}
body.qr-has-hero .qr-header {
	background-color: transparent; /* the fade gradient is the whole backdrop */
}
body.qr-has-hero .qr-header.is-scrolled {
	background-color: var(--wp--preset--color--base);
}
.qr-header > .alignwide {
	position: relative; /* the red tab is positioned against this row */
}
.qr-header .qr-nav {
	position: static;
	padding-top: var(--qr-nav-offset);
}
/* Core makes the nav's inner dialog wrapper position: relative (for the
   overlay's close button). While the overlay is closed, neutralise it so
   the tab positions against the header row instead. */
.qr-header .wp-block-navigation__responsive-container:not(.is-menu-open),
.qr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog {
	position: static;
}
/* Hover tab. Every top-level link grows the Figma red tab on hover: a
   solid block hanging from the bar's very top edge, 77px tall, rounded
   bottom corners, wiping downward. It is a pseudo-element so the link
   text never moves.
   --qr-tab-rise = distance from the bar's top edge to the link's line
   box: header padding + nav offset + the row's own leading at rest;
   half the free space around the line when the compact bar centres it. */
.qr-header {
	--qr-nav-line: calc(1.5 * var(--wp--preset--font-size--medium)); /* nav line-height */
	--qr-tab-rise: calc(var(--qr-bar-pad) + (var(--qr-logo-h) - var(--qr-nav-line)) / 2);
	--qr-tab-bleed: 1rem; /* how far the tab extends past the label on each side */
}
.qr-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	z-index: 0; /* own stacking context: the tab sits behind the label only */
	transition: color var(--wp--custom--transition);
}
.qr-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(-1 * var(--qr-tab-rise));
	left: calc(-1 * var(--qr-tab-bleed));
	right: calc(-1 * var(--qr-tab-bleed));
	height: var(--qr-scrolled-tab-h);
	background: var(--wp--preset--color--primary);
	border-radius: 0 0 13px 13px;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}
.qr-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.qr-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.qr-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--base);
}
.qr-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::before,
.qr-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::before,
.qr-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::before {
	clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
	.qr-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
		transition: none;
	}
}
/* "Contact Us" keeps its uppercase Figma label but is otherwise a normal link. */
.wp-block-navigation-item.is-style-nav-tab .wp-block-navigation-item__content {
	text-transform: uppercase;
}
.qr-header .wp-block-site-logo {
	flex-shrink: 0; /* never let an overflowing nav squash the logo */
}

/* Responsive breakpoints. Core only switches to the hamburger overlay
   below 600px, which is far too late for six links plus the tab.
   - ≤ 1400px: tighter link gap so everything still fits on one row.
   - < 1100px: use the overlay (same markup/behaviour core uses < 600px). */
@media (max-width: 1400px) {
	.qr-header .qr-nav .wp-block-navigation__container {
		gap: 1.5rem;
	}
}
@media (min-width: 600px) and (max-width: 1099px) {
	.qr-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.qr-header .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}
/* ---- Overlay menu: icon morph + entrance ------------------------------
   Core renders two buttons: "open" (hamburger, in the bar) and "close"
   (inside the overlay). Both are drawn here as CSS bars. The close button
   is pinned to the exact spot the hamburger occupies, and on opening its
   bars animate from the hamburger arrangement into an X, so the icon
   appears to morph in place. The overlay fades, and the links rise in
   with a short stagger. Reduced-motion users get the instant version
   via the global rule at the top of this file. */
.qr-header .wp-block-navigation__responsive-container-open,
.qr-header .wp-block-navigation__responsive-container-close {
	position: relative;
	width: 2rem;
	height: 2rem;
	color: var(--wp--preset--color--contrast);
	transition: color var(--wp--custom--transition);
}
.qr-header .wp-block-navigation__responsive-container-open:hover,
.qr-header .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--primary);
}
.qr-header .wp-block-navigation__responsive-container-open svg,
.qr-header .wp-block-navigation__responsive-container-close svg {
	display: none;
}
.qr-header .wp-block-navigation__responsive-container-open::before,
.qr-header .wp-block-navigation__responsive-container-open::after,
.qr-header .wp-block-navigation__responsive-container-close::before,
.qr-header .wp-block-navigation__responsive-container-close::after {
	content: "";
	position: absolute;
	left: 0.25rem;
	right: 0.25rem;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: currentColor;
}
/* Hamburger: top bar (::before) + middle bar drawn as its shadow, bottom bar (::after). */
.qr-header .wp-block-navigation__responsive-container-open::before {
	transform: translateY(-0.45rem);
	box-shadow: 0 0.45rem 0 0 currentColor;
}
.qr-header .wp-block-navigation__responsive-container-open::after {
	transform: translateY(0.45rem);
}
/* Close: same bars, ending as an X. Animated from the hamburger pose. */
.qr-header .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
	position: fixed;
	z-index: 2;
	right: var(--wp--style--root--padding-right, 1.5rem);
	top: calc(var(--qr-scrolled-tab-h) / 2 - 1rem);
}
.qr-header .wp-block-navigation__responsive-container-close::before {
	transform: rotate(45deg);
	animation: qr-bar-top 0.35s ease both;
}
.qr-header .wp-block-navigation__responsive-container-close::after {
	transform: rotate(-45deg);
	animation: qr-bar-bottom 0.35s ease both;
}
@keyframes qr-bar-top {
	from { transform: translateY(-0.45rem) rotate(0deg); box-shadow: 0 0.45rem 0 0 currentColor; }
	60%  { transform: translateY(0) rotate(0deg); box-shadow: 0 0 0 0 transparent; }
	to   { transform: rotate(45deg); box-shadow: 0 0 0 0 transparent; }
}
@keyframes qr-bar-bottom {
	from { transform: translateY(0.45rem) rotate(0deg); }
	60%  { transform: translateY(0) rotate(0deg); }
	to   { transform: rotate(-45deg); }
}
/* Overlay: fade in and out (exit fade needs allow-discrete; older browsers
   simply snap), links rise in one after another. */
@media (max-width: 1099px) {
	.qr-header .wp-block-navigation__responsive-container {
		transition: opacity 0.25s ease, display 0.25s allow-discrete;
	}
	.qr-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		opacity: 0;
	}
	.qr-header .wp-block-navigation__responsive-container.is-menu-open {
		opacity: 1;
	}
	@starting-style {
		.qr-header .wp-block-navigation__responsive-container.is-menu-open {
			opacity: 0;
		}
	}
}
.qr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	animation: qr-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.qr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.08s; }
.qr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.12s; }
.qr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.16s; }
.qr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.2s; }
.qr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.24s; }
.qr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.28s; }
.qr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(7) { animation-delay: 0.32s; }
.qr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+8) { animation-delay: 0.36s; }
@keyframes qr-rise {
	from { opacity: 0; transform: translateY(0.75rem); }
	to   { opacity: 1; transform: none; }
}

/* ---- Dropdown submenus ------------------------------------------------
   Parent links open a white panel on hover / keyboard focus. Chevron
   icons are hidden to match the Figma nav; the panel itself is the cue. */
.qr-header .wp-block-navigation__submenu-icon {
	display: none;
}
.qr-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	min-width: 14rem;
	margin-top: var(--qr-tab-gap);
	padding: 0.5rem 0;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
	transition: opacity var(--wp--custom--transition), visibility var(--wp--custom--transition), transform var(--wp--custom--transition);
	transform: translateY(var(--qr-panel-rise));
	z-index: 999;
}
.qr-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.qr-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	transform: none;
}
/* Core right-aligns panels under a right-justified nav; hang them from the
   parent link's left edge instead so they read as belonging to it. */
.qr-header .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	left: 0;
	right: auto;
}
/* Keep the hover bridge: the gap above the panel must stay hoverable.
   It hangs off the item rather than the panel, because a `bottom: 100%`
   child of the panel is offset by the panel's 3px top border and rides
   its entrance transform - both of which opened a dead strip right below
   the link. Anchored here it cannot move, and it is tall enough to reach
   the panel at the *start* of the rise, so the two always overlap. */
.qr-header .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container > .has-child:hover::after,
.qr-header .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container > .has-child:focus-within::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: max(100%, 14rem);
	height: calc(var(--qr-tab-gap) + var(--qr-panel-rise));
}
.qr-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.55rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}
.qr-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.qr-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--primary);
}
/* --qr-tab-gap: from the link's line box down to the hover tab's bottom
   edge (the bar's bottom edge once scrolled), so the panel meets the tab. */
.qr-header {
	--qr-tab-gap: calc(var(--qr-scrolled-tab-h) - var(--qr-tab-rise) - var(--qr-nav-line));
	--qr-panel-rise: 6px; /* the panel's entrance travel; the bridge covers it */
}
/* In the overlay, submenus are plain nested lists (selectors are kept
   more specific than the desktop panel rules above). */
.qr-header .wp-block-navigation .is-menu-open .wp-block-navigation__container .has-child {
	align-items: flex-start;
}
.qr-header .wp-block-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container {
	min-width: 0;
	margin: 0.25rem 0 0.5rem;
	padding: 0 0 0 1rem;
	border: 0;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-radius: 0;
	box-shadow: none;
	transform: none;
	align-items: flex-start;
	font-size: var(--wp--preset--font-size--large);
}
.qr-header .wp-block-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.35rem 0;
	font-size: inherit;
	white-space: normal;
}
.qr-header .wp-block-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.qr-header .wp-block-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: none;
	color: var(--wp--preset--color--primary);
}

/* Overlay menu: left-aligned, larger links regardless of the desktop
   justification, with the tab reserve removed. */
.qr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 5rem; /* clear the bar so the list starts on its own */
	align-items: flex-start; /* core inherits the desktop "right" justification here */
}
.qr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1.25rem;
	font-size: var(--wp--preset--font-size--x-large);
}

/* Inside the mobile overlay there is no hover tab: links behave normally. */
.qr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	display: none;
}
.qr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.qr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* ---- Group > Icon: phone / email / pin -----------------------------
   Contact strip items: a red icon sits above the group's content. */
.wp-block-group.is-style-icon-phone,
.wp-block-group.is-style-icon-email,
.wp-block-group.is-style-icon-pin {
	text-align: center;
}
.wp-block-group.is-style-icon-phone::before,
.wp-block-group.is-style-icon-email::before,
.wp-block-group.is-style-icon-pin::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0 auto 0.5rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--qr-icon) center / contain no-repeat;
	mask: var(--qr-icon) center / contain no-repeat;
}
.wp-block-group.is-style-icon-phone::before {
	--qr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E");
}
.wp-block-group.is-style-icon-email::before {
	--qr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}
.wp-block-group.is-style-icon-pin::before {
	--qr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}
.wp-block-group.is-style-icon-phone .wp-block-heading,
.wp-block-group.is-style-icon-email .wp-block-heading,
.wp-block-group.is-style-icon-pin .wp-block-heading {
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0.25rem;
}
/* Inline variant (Contact strip): big red icon on the left, red bold label
   and black value stacked to its right, as in the Figma sub-hero. */
.wp-block-group.qr-icon-inline {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: clamp(0.75rem, 1.6vw, 1.9rem);
	align-items: center;
	text-align: left;
}
.wp-block-group.qr-icon-inline::before {
	grid-row: 1 / 3;
	width: clamp(2.5rem, 3.5vw, 4.2rem);
	height: clamp(2.5rem, 3.5vw, 4.2rem);
	margin: 0;
}
.wp-block-group.qr-icon-inline .wp-block-heading,
.wp-block-group.qr-icon-inline p {
	grid-column: 2;
	justify-self: start;
	margin: 0 !important; /* the constrained layout would otherwise centre these with auto margins */
	line-height: 1.2;
}
.wp-block-group.qr-icon-inline .wp-block-heading {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.wp-block-group.qr-icon-inline p a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.wp-block-group.qr-icon-inline p a:hover {
	color: var(--wp--preset--color--primary);
}
@media (max-width: 781px) {
	.wp-block-group.qr-icon-inline {
		justify-content: start;
	}
}

/* ---- Heading > Town heading ------------------------------------------
   Red, uppercase, tracked — the town labels on the schools directory. */
.wp-block-heading.is-style-town-heading {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* ---- Paragraph > School entry ----------------------------------------
   Bold name (link gets a small red "external" globe), address, italic
   descriptor. Author as: <strong><a>Name</a></strong><br>Address<br><em>Info</em> */
p.is-style-school-entry {
	line-height: 1.45;
}
p.is-style-school-entry a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
p.is-style-school-entry a:hover {
	color: var(--wp--preset--color--primary);
}
p.is-style-school-entry a::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.35em;
	vertical-align: -0.05em;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 9h-3a15.7 15.7 0 0 0-1.4-6A8 8 0 0 1 18.9 11zM12 20c-1.1 0-2.4-2.4-2.9-7h5.8c-.5 4.6-1.8 7-2.9 7zm-2.9-9C9.6 6.4 10.9 4 12 4s2.4 2.4 2.9 7H9.1zM9.5 5a15.7 15.7 0 0 0-1.4 6h-3A8 8 0 0 1 9.5 5zM5.1 13h3a15.7 15.7 0 0 0 1.4 6A8 8 0 0 1 5.1 13zm9.4 6a15.7 15.7 0 0 0 1.4-6h3a8 8 0 0 1-4.4 6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 9h-3a15.7 15.7 0 0 0-1.4-6A8 8 0 0 1 18.9 11zM12 20c-1.1 0-2.4-2.4-2.9-7h5.8c-.5 4.6-1.8 7-2.9 7zm-2.9-9C9.6 6.4 10.9 4 12 4s2.4 2.4 2.9 7H9.1zM9.5 5a15.7 15.7 0 0 0-1.4 6h-3A8 8 0 0 1 9.5 5zM5.1 13h3a15.7 15.7 0 0 0 1.4 6A8 8 0 0 1 5.1 13zm9.4 6a15.7 15.7 0 0 0 1.4-6h3a8 8 0 0 1-4.4 6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
p.is-style-school-entry em {
	color: var(--wp--preset--color--contrast-3);
}

/* ---- List > School bullets -------------------------------------------
   Sub-schools under a district (Salem). Figma leaves a blank line between
   the items, and a wrapped second line hangs under the text rather than
   under the marker, which a real list gives us. */
ul.wp-block-list.is-style-school-bullets {
	margin-left: 0;
	padding-left: 1.5em;
	list-style: disc;
}
/* Beats the general large-list rule above, which uses a smaller gap. */
ul.wp-block-list.is-style-school-bullets > li + li {
	margin-top: 2rem; /* the blank line between items, one line box */
}

/* ---- Footer ----------------------------------------------------------- */
/* The site-blocks block gap would otherwise leave a white strip between
   the last section and the footer. */
.wp-site-blocks > .wp-block-template-part:has(> .qr-footer),
.wp-site-blocks > main {
	margin-block-end: 0;
}
.wp-site-blocks > .wp-block-template-part:has(> .qr-footer) {
	margin-block-start: 0;
}
.qr-footer .wp-block-social-links .wp-social-link a {
	color: var(--wp--preset--color--base);
}

/* ========================================================================
   3. Responsive
   ======================================================================== */

@media (max-width: 781px) {
	.wp-block-list.is-style-numbered-circles {
		columns: 1;
	}
	.wp-block-separator.is-style-vertical {
		display: none;
	}

	/* Once columns stack, a side fade no longer separates text from photo.
	   Ghost the whole image instead so copy stays readable. */
	.wp-block-cover.is-style-fade-right .wp-block-cover__background.has-background-dim,
	.wp-block-cover.is-style-fade-left .wp-block-cover__background.has-background-dim {
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.92) 100%);
	}

	/* Photo-right covers: on small screens the photo becomes a full-width
	   background behind the copy, with a lighter wash so it still reads as
	   a photo while the red heading and black text stay legible. */
	.wp-block-cover.qr-photo-right .wp-block-cover__image-background,
	.wp-block-cover.qr-photo-right .wp-block-cover__video-background {
		left: 0;
		width: 100%;
		object-position: 50% 50%;
	}
	.wp-block-cover.qr-photo-right.is-style-fade-left .wp-block-cover__background.has-background-dim {
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.72) 100%);
	}

	/* Town tile labels: scale with the tile so names never break mid-word. */
	.wp-block-cover.is-style-town-card .wp-block-cover__inner-container > * {
		font-size: clamp(0.8rem, 3.8vw, 1.6rem);
		hyphens: none;
		overflow-wrap: normal;
	}
}