/*
 * 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);
}

: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);
}

.wp-block-heading.is-style-script-underline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.05em;
}
.wp-block-heading.is-style-script-underline.has-text-align-left {
	align-items: flex-start;
}
.wp-block-heading.is-style-script-underline.has-text-align-right {
	align-items: flex-end;
}
.wp-block-heading.is-style-script-underline::after {
	content: "";
	display: block;
	width: 1.55em;
	height: 0.08em;
	background: url("../img/underline.svg") center / contain no-repeat;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
}

/* ---- 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 {
	inset: var(--qr-tile-pad);
	width: auto;
	height: auto;
	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 {
	width: auto;
	margin: 0 var(--qr-tile-pad) var(--qr-tile-pad);
	padding: 0.25em 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;
	text-shadow: none;
}
.wp-block-cover.is-style-town-card a {
	color: inherit;
	text-decoration: none;
}
.wp-block-cover.is-style-town-card:hover .wp-block-cover__image-background {
	transform: scale(1.03);
	transition: transform 0.3s ease;
}

/* ---- 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);
}

/* ---- 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 {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	counter-reset: qr-item;
	columns: 2;
	column-gap: var(--wp--preset--spacing--60);
}
.wp-block-list.is-style-numbered-circles li {
	counter-increment: qr-item;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem;
	break-inside: avoid;
	page-break-inside: avoid;
}
.wp-block-list.is-style-numbered-circles li::before {
	content: counter(qr-item);
	flex: 0 0 39px;
	width: 39px;
	height: 39px;
	margin-top: -0.1em;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 39px;
	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 link > Red tab ----------------------------
   Header: logo top-left, links top-right, nudged down so they sit level
   with the logo's upper third (as in the design). The "Contact Us" item
   gets the Red tab style: a solid block hanging from the very top edge
   with rounded bottom corners. It is absolutely positioned against the
   nav, which reserves room for it on the right. */
.qr-header {
	--qr-header-pad: var(--wp--preset--spacing--40);
	--qr-nav-offset: 1.1rem;
	--qr-tab-width: 10.5rem;
	position: relative;
	z-index: 10;
}
.qr-header .qr-nav {
	position: relative;
	padding-top: var(--qr-nav-offset);
}
.qr-header .qr-nav .wp-block-navigation__container {
	padding-right: calc(var(--qr-tab-width) + var(--wp--preset--spacing--40));
}
.wp-block-navigation-item.is-style-nav-tab {
	position: absolute;
	top: calc(-1 * (var(--qr-header-pad) + var(--qr-nav-offset)));
	right: 0;
	margin: 0;
	width: var(--qr-tab-width);
}
.wp-block-navigation-item.is-style-nav-tab .wp-block-navigation-item__content {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 77px;
	padding: 0 1rem 0.9rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base) !important;
	text-transform: uppercase;
	border-radius: 0 0 13px 13px;
}
.wp-block-navigation-item.is-style-nav-tab .wp-block-navigation-item__content:hover,
.wp-block-navigation-item.is-style-nav-tab .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--primary-dark);
}
/* Inside the mobile overlay, behave like a normal link. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	padding-right: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-style-nav-tab {
	position: static;
	width: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-style-nav-tab .wp-block-navigation-item__content {
	display: inline-block;
	height: auto;
	padding: 0.5rem 1rem;
	border-radius: var(--wp--custom--radius--sm);
}

/* ---- 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;
}

/* ---- 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);
}

/* ---- Footer ----------------------------------------------------------- */
.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%);
	}

	/* 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;
	}
}