/*
Theme Name: Novelty Iron Works
Theme URI: https://noveltyiron.com
Author: Novelty Iron Works
Description: Custom block theme for Novelty Iron Works, Dubuque. Faithful to the original Constrion-based design, rebuilt as a responsive full-site-editing theme with self-hosted Lato and Raleway.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: novelty-iron-works
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style, wide-blocks
*/

/*
 * Keep this file small. Anything theme.json can express (colors, fonts,
 * sizes, spacing, element and block defaults) belongs there. This file holds
 * only the CSS for custom block styles registered in functions.php, which
 * theme.json cannot express (pseudo-elements, masks, nested selectors).
 *
 * Loaded on the front end and in the editor (add_editor_style).
 */

/* -------------------------------------------------------------------------
 * core/button — "Outline light"
 * For dark backgrounds (photo/cover bands, footer). 2px white border, white
 * text; hover fills white with contrast text.
 * NOTE: white on the yellow CTA band is 1.54:1 and fails WCAG AA. Use
 * "Outline dark" on yellow backgrounds.
 * ---------------------------------------------------------------------- */
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover,
.wp-block-button.is-style-outline-light .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
 * core/button — "Outline dark"
 * AA-safe outline for light and yellow backgrounds (contrast on yellow is
 * 8.9:1). Hover fills contrast with yellow text.
 * ---------------------------------------------------------------------- */
.wp-block-button.is-style-outline-dark .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

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

/* -------------------------------------------------------------------------
 * core/heading — "Title underline"
 * Short 60×3px yellow bar under the heading (live page titles).
 * ---------------------------------------------------------------------- */
.is-style-title-underline::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	margin-top: 10px;
	background-color: var(--wp--preset--color--primary);
}

.is-style-title-underline.has-text-align-center::after {
	margin-inline: auto;
}

.is-style-title-underline.has-text-align-right::after {
	margin-inline-start: auto;
}

/* -------------------------------------------------------------------------
 * core/group — "CTA band"
 * Yellow band, 30px vertical padding. Text inside uses a moderate
 * line-height so the lead heading never inherits the 36–45px values that
 * caused the mobile wrapping bug on the live site.
 * ---------------------------------------------------------------------- */
.wp-block-group.is-style-cta-band {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-cta-band :where(h1, h2, h3, h4, h5, h6, p) {
	line-height: 1.35;
	margin-block: 0;
}

/* -------------------------------------------------------------------------
 * core/quote — citation size (site-wide)
 * theme.json sets the cite to Raleway 700 16px, but core's wp-block-styles
 * (`.wp-block-quote cite { font-size: .8125em }`) beats theme.json's
 * zero-specificity rule and shrank every quote citation to 13px. Restate the
 * theme.json size with matching specificity.
 * ---------------------------------------------------------------------- */
.wp-block-quote cite {
	font-size: 16px;
}

/* -------------------------------------------------------------------------
 * core/cover — layers flush with the cover
 * A cover with the default (flow) layout puts the layout classes on its
 * outer element, so the root blockGap rule (`* + * { margin-block-start:
 * 20px }`) pushed the absolutely positioned dim overlay down 20px (an
 * undimmed strip across the top of the Events photo) and the inner
 * container off-center. These layers never take block margins.
 * ---------------------------------------------------------------------- */
.wp-block-cover > .wp-block-cover__background,
.wp-block-cover > .wp-block-cover__image-background,
.wp-block-cover > .wp-block-cover__video-background,
.wp-block-cover > .wp-block-cover__inner-container {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
 * core/list — "Contact icons"
 * Icon-prefixed list. Icons are inline SVG masks filled with the brand
 * yellow, so no icon font (Font Awesome) is needed.
 * Default order matches the contact page: person, pin, globe, envelope,
 * phone. Override per item with a class on the list item:
 * niw-icon-person | niw-icon-pin | niw-icon-globe | niw-icon-envelope | niw-icon-phone
 * ---------------------------------------------------------------------- */
.wp-block-list.is-style-contact-icons {
	--niw-icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='5'/%3E%3Cpath d='M2 22c0-5.5 4.5-9 10-9s10 3.5 10 9z'/%3E%3C/svg%3E");
	--niw-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C7.6 1 4 4.6 4 9c0 6 8 14 8 14s8-8 8-14c0-4.4-3.6-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
	--niw-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2c2.8 3 4 6.4 4 10s-1.2 7-4 10c-2.8-3-4-6.4-4-10s1.2-7 4-10z'/%3E%3C/svg%3E");
	--niw-icon-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v2.2l-10 6.3L2 7.2z'/%3E%3Cpath d='M2 9.6l10 6.3 10-6.3V19H2z'/%3E%3C/svg%3E");
	--niw-icon-phone: 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");
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-contact-icons > li {
	--niw-icon: var(--niw-icon-person);
	position: relative;
	padding-inline-start: 1.9em;
}

.wp-block-list.is-style-contact-icons > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.5em; /* fallback for browsers without the lh unit */
	top: calc(1lh / 2 - 0.5em); /* vertically centre on the first line */
	width: 1em;
	height: 1em;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--niw-icon) center / contain no-repeat;
	mask: var(--niw-icon) center / contain no-repeat;
}

.wp-block-list.is-style-contact-icons > li:nth-child(5n + 2) { --niw-icon: var(--niw-icon-pin); }
.wp-block-list.is-style-contact-icons > li:nth-child(5n + 3) { --niw-icon: var(--niw-icon-globe); }
.wp-block-list.is-style-contact-icons > li:nth-child(5n + 4) { --niw-icon: var(--niw-icon-envelope); }
.wp-block-list.is-style-contact-icons > li:nth-child(5n + 5) { --niw-icon: var(--niw-icon-phone); }

.wp-block-list.is-style-contact-icons > li.niw-icon-person { --niw-icon: var(--niw-icon-person); }
.wp-block-list.is-style-contact-icons > li.niw-icon-pin { --niw-icon: var(--niw-icon-pin); }
.wp-block-list.is-style-contact-icons > li.niw-icon-globe { --niw-icon: var(--niw-icon-globe); }
.wp-block-list.is-style-contact-icons > li.niw-icon-envelope { --niw-icon: var(--niw-icon-envelope); }
.wp-block-list.is-style-contact-icons > li.niw-icon-phone { --niw-icon: var(--niw-icon-phone); }

/* =========================================================================
 * Site chrome (Phase 2): sticky header, primary navigation, footer.
 * Breakpoints follow core: 600px (navigation overlay) and 782px (columns).
 * 1024px switches the header from stacked (tablet) to one row (desktop).
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * Sticky header
 * The whole <header> part sticks, offset upward by the welcome bar's height,
 * so the welcome bar scrolls away and the logo/nav row stays pinned under
 * the admin bar (when shown). header.js adds .is-scrolled for the shadow.
 * ---------------------------------------------------------------------- */
.niw-site-header {
	--niw-welcome-bar-h: 36px;
	--niw-admin-offset: var(--wp-admin--admin-bar--height, 0px);
	position: sticky;
	top: calc(var(--niw-admin-offset) - var(--niw-welcome-bar-h));
	z-index: 50;
}

/* The admin bar is not fixed at 600px and below. */
@media (max-width: 600px) {
	.niw-site-header {
		--niw-admin-offset: 0px;
	}
}

/* The 2px base-colored rule keeps the active-item bar visibly separate from the yellow
 * welcome bar directly above it (the live site has a grey strip there). */
.niw-site-header .niw-header {
	border-top: 2px solid var(--wp--preset--color--base);
	transition: box-shadow 0.2s ease;
}

.niw-site-header.is-scrolled .niw-header {
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.niw-welcome-bar {
	min-height: var(--niw-welcome-bar-h, 36px);
	box-sizing: border-box;
}

.niw-welcome-bar a:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Header row and logo
 * ---------------------------------------------------------------------- */
.niw-header__row {
	gap: var(--wp--preset--spacing--30);
	padding-block: 10px;
}

.niw-header__logo {
	flex-shrink: 0;
	line-height: 0;
}

.niw-header__logo img {
	height: auto;
}

@media (max-width: 781px) {
	.niw-header__logo img {
		width: 90px !important; /* beats the block's width setting */
	}
}

@media (min-width: 782px) and (max-width: 1023px) {
	.niw-header__logo img {
		width: 120px !important;
	}
}

/* Tablet: logo centred above a centred menu row, like the live site. */
@media (min-width: 600px) and (max-width: 1023px) {
	.niw-header__row.niw-header__row {
		flex-direction: column;
		align-items: center;
		padding-block: 15px 0;
		gap: 5px;
	}
}

/* Desktop: one row; nav items stretch to the full header height so the
 * active bar sits flush with the top edge. */
@media (min-width: 1024px) {
	.niw-header__row.niw-header__row {
		align-items: stretch;
		min-height: 155px;
		padding-block: 0;
	}

	.niw-header__logo {
		align-self: center;
	}

	/* Every wrapper between the row and the <li> stretches (flex), so the
	 * links fill the 155px row. Heights must stay auto for stretch to work. */
	.niw-primary-nav.niw-primary-nav {
		align-self: stretch;
		align-items: stretch;
	}

	.niw-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
	.niw-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
	.niw-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog {
		display: flex;
		flex: 1 1 auto;
		align-items: stretch;
	}

	.niw-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
		flex: 1 1 auto;
		align-items: stretch;
	}

	.niw-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
		align-items: stretch;
	}

	.niw-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		align-self: stretch;
	}
}

/* -------------------------------------------------------------------------
 * Primary navigation (inline, 600px and up)
 * Hover keeps the text dark and adds a yellow underline (yellow text on
 * #EEEEEE is 1.33:1). Active = maroon text + 4px yellow bar on top.
 * ---------------------------------------------------------------------- */
.niw-primary-nav .wp-block-navigation__container {
	gap: 0;
}

.niw-primary-nav .wp-block-navigation__container > .wp-block-navigation-item {
	position: relative;
}

.niw-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding: 14px 12px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

@media (min-width: 1024px) {
	.niw-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 0 30px;
	}

	.niw-primary-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		padding-inline-end: 0;
	}

	/* 6px link padding + 4px core margin + 9px icon + 24px = 43px before the
	 * toggle grew to 24px; 24px + 19px keeps the spacing. (Doubled class: the
	 * all-widths rule below comes later in the file.) */
	.niw-primary-nav.niw-primary-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
		margin-inline-end: 19px;
	}
}

.niw-primary-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	padding-inline-end: 0;
}

.niw-primary-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
	margin-inline-end: 0;
}

.niw-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.niw-primary-nav .wp-block-navigation-item__content:focus-visible,
.niw-primary-nav .wp-block-navigation-submenu__toggle:focus-visible,
.niw-primary-nav .wp-block-navigation__responsive-container-open:focus-visible,
.niw-primary-nav .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

/* Submenu chevron toggles: core draws them as a 9×9px button (0.6em),
 * which is hard to hit on touch tablets. Make the button a 24×24px box
 * (WCAG 2.5.8) with the chevron still 9px and centered, take the space back
 * from the link's end padding and the toggle's margins so the menu doesn't
 * get wider, and extend the hit area vertically with a pseudo-element
 * (24×48px). Overlay toggles are hidden by core, so inline nav only. */
.niw-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-inline-start: 0;
}

.niw-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle svg {
	width: 9px;
	height: 9px;
	margin-top: 0;
}

.niw-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle::after {
	content: "";
	position: absolute;
	inset-block: -12px;
	inset-inline: 0;
}

/* Active: the current page, or the parent of the current page. */
.niw-primary-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.niw-primary-nav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content,
.niw-primary-nav .wp-block-navigation__container > .has-child:has(.current-menu-item) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.niw-primary-nav .wp-block-navigation__container > .current-menu-item::before,
.niw-primary-nav .wp-block-navigation__container > .current-menu-ancestor::before,
.niw-primary-nav .wp-block-navigation__container > .has-child:has(.current-menu-item)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background-color: var(--wp--preset--color--primary);
}

/* Desktop submenus: light panel with a shadow (not the overlay colors). */
.niw-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	min-width: 220px;
	padding: 0;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	color: #333;
}

.niw-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 12px 15px;
	color: #333;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

.niw-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--header);
	color: var(--wp--preset--color--accent);
}

.niw-primary-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Mobile overlay (below 600px)
 * Hamburger in a yellow square; dark overlay with 44px+ tap targets and
 * indented submenu items.
 * ---------------------------------------------------------------------- */
.niw-primary-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--white);
}

/* The desktop menu is justified right; the overlay list reads left-aligned. */
.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}

.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 0;
	padding-inline: 10px;
}

/* The <ul> copies the nav's .items-justified-right class, so reset the
 * variable and alignment on the list and its items too. */
.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	align-items: flex-start;
	gap: 0;
	width: 100%;
}

.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.wp-block-navigation-item {
	align-items: flex-start;
}

.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--medium);
}

.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item::before {
	content: none;
}

.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	padding: 0 0 6px 1.25rem;
	min-width: 0;
	border-inline-start: 2px solid var(--wp--preset--color--footer-bottom);
	margin-inline-start: 2px;
}

.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
}

.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

.niw-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline-color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.niw-footer__heading {
	margin-top: 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.niw-footer p {
	margin-block: 0 var(--wp--preset--spacing--20);
}

/* Core forces `color: inherit` on nav links; the block's textColor (white)
 * supplies the base color, these add hover/underline behavior. */
.niw-footer-nav .wp-block-navigation-item__content {
	text-decoration: none;
}

.niw-footer-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.niw-footer a:focus-visible,
.niw-copyright-bar a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.niw-copyright-bar p {
	margin: 0;
}

/* =========================================================================
 * Patterns (Phase 4): hero, CTA band, testimonial band, room cards,
 * Contact Form 7. Breakpoints: 600px (phones) and 782px (core columns).
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * niw/carousel — "Hero (taller on phones)"
 * The block's aspect ratio (1796/852 on the home hero) is an inline custom
 * property; this overrides the viewport's ratio on phones so the photo isn't
 * a thin strip. One carousel, no duplicate markup.
 * ---------------------------------------------------------------------- */
@media (max-width: 600px) {
	.wp-block-niw-carousel.is-style-hero.has-aspect-ratio .niw-carousel__viewport {
		aspect-ratio: 4 / 3;
	}
}

/* -------------------------------------------------------------------------
 * core/group — "CTA band" layout
 * Row on desktop (lead left, button right); stacked and centered below
 * 782px. Lead text stays at line-height 1.3 (set on the block) so it never
 * balloons like the live site's 45px line-height on phones.
 * ---------------------------------------------------------------------- */
.wp-block-group.is-style-cta-band .wp-block-buttons {
	flex-shrink: 0;
}

@media (max-width: 781px) {
	.wp-block-group.is-style-cta-band > .wp-block-group.is-layout-flex {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
 * core/cover — "Testimonial band"
 * Photo with a fixed background (desktop), dark overlay, white quote with
 * the resident's name above it in yellow, and white corner brackets drawn
 * with pseudo-elements. The cover's min-height is a minimum, so the band
 * grows with the quote and text never spills off the photo.
 * ---------------------------------------------------------------------- */
.wp-block-cover.is-style-testimonial-band {
	--niw-bracket-w: 50px;
	--niw-bracket-h: 30px;
	--niw-bracket-t: 3px;
	overflow: hidden;
}

.wp-block-cover.is-style-testimonial-band .wp-block-cover__inner-container {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1030px;
	margin-inline: auto;
	padding: 30px 70px;
}

.wp-block-cover.is-style-testimonial-band .wp-block-cover__inner-container::before,
.wp-block-cover.is-style-testimonial-band .wp-block-cover__inner-container::after {
	content: "";
	position: absolute;
	width: var(--niw-bracket-w);
	height: var(--niw-bracket-h);
	border: 0 solid var(--wp--preset--color--white);
	pointer-events: none;
}

.wp-block-cover.is-style-testimonial-band .wp-block-cover__inner-container::before {
	top: 0;
	left: 0;
	border-top-width: var(--niw-bracket-t);
	border-left-width: var(--niw-bracket-t);
}

.wp-block-cover.is-style-testimonial-band .wp-block-cover__inner-container::after {
	right: 0;
	bottom: 0;
	border-right-width: var(--niw-bracket-t);
	border-bottom-width: var(--niw-bracket-t);
}

.wp-block-cover.is-style-testimonial-band .wp-block-quote {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	color: var(--wp--preset--color--white);
	text-align: center;
	overflow-wrap: break-word;
	quotes: "\201C" "\201D";
}

.wp-block-cover.is-style-testimonial-band .wp-block-quote p {
	margin: 0;
	color: var(--wp--preset--color--white);
}

.wp-block-cover.is-style-testimonial-band .wp-block-quote p:first-of-type::before {
	content: open-quote;
}

.wp-block-cover.is-style-testimonial-band .wp-block-quote p:last-of-type::after {
	content: close-quote;
}

/* Name above the quote, as on the live site (source order stays quote → name).
 * Its 16px size comes from the site-wide core/quote cite rule above. */
.wp-block-cover.is-style-testimonial-band .wp-block-quote cite {
	order: -1;
	display: block;
	color: var(--wp--preset--color--primary);
}

/* Phones and touch devices: no fixed backgrounds (iOS ignores or janks them). */
@media (max-width: 781px), (hover: none) {
	.wp-block-cover.is-style-testimonial-band.has-parallax,
	.wp-block-cover.is-style-testimonial-band .wp-block-cover__image-background.has-parallax {
		background-attachment: scroll;
	}
}

@media (max-width: 600px) {
	.wp-block-cover.is-style-testimonial-band {
		--niw-bracket-w: 30px;
		--niw-bracket-h: 20px;
	}

	.wp-block-cover.is-style-testimonial-band .wp-block-cover__inner-container {
		padding: 28px 22px;
	}
}

/* -------------------------------------------------------------------------
 * core/group — "Card"
 * White card. Its link stretches over the whole card, so the photo and
 * title are clickable too while there is still only one link (keep one
 * link per card).
 * ---------------------------------------------------------------------- */
.wp-block-group.is-style-card {
	position: relative;
	height: 100%;
	transition: box-shadow 0.2s ease;
}

.wp-block-group.is-style-card .wp-block-image {
	margin: 0;
}

.wp-block-group.is-style-card .wp-block-image img {
	display: block;
	width: 100%;
}

.wp-block-group.is-style-card a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-group.is-style-card:hover,
.wp-block-group.is-style-card:focus-within {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.wp-block-group.is-style-card a:focus-visible {
	outline: none;
}

.wp-block-group.is-style-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Contact Form 7
 * Inputs: white, 1px border, 10px padding, Lato, full width. Focus: accent
 * outline plus a yellow halo. Submit: the theme button (yellow, contrast
 * text 8.9:1, hover maroon/white). Validation tips and the response box use
 * the maroon accent (12:1 on white) for errors.
 * ---------------------------------------------------------------------- */
.wpcf7 form p {
	margin-block: 0 var(--wp--preset--spacing--30);
	line-height: 1.6;
}

.wpcf7 label {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/* "(required)" stays in the label text (so it is announced) but lighter.
 * Contrast color, not body-text gray, for the strongest legibility. */
.wpcf7 .form-required {
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.wpcf7 :is(input:not([type="submit"], [type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select, textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 10px;
	border: 1px solid var(--wp--preset--color--border-input);
	border-radius: 0;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--lato);
	font-size: max(16px, 1rem); /* 16px+ stops iOS zooming on focus */
	line-height: 1.5;
}

.wpcf7 textarea {
	min-height: 180px;
	resize: vertical;
}

.wpcf7 :is(input:not([type="submit"], [type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select, textarea):focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 0;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 5px var(--wp--preset--color--primary);
}

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	width: auto;
	padding: 10px 30px;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 0;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 900;
	line-height: 1.4;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 .wpcf7-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	box-shadow: none;
}

.wpcf7 input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.wpcf7 .wpcf7-spinner {
	vertical-align: middle;
}

@media (max-width: 600px) {
	.wpcf7 input[type="submit"],
	.wpcf7 .wpcf7-submit {
		width: 100%;
		min-height: 44px;
	}

	.wpcf7 .wpcf7-spinner {
		display: block;
		margin: 10px auto 0;
	}
}

/* Field errors */
/* Matches the specificity of the base input rule above, so it wins on order. */
.wpcf7 .wpcf7-form-control.wpcf7-not-valid:not([type="submit"]) {
	border-color: var(--wp--preset--color--accent);
	box-shadow: inset 4px 0 0 var(--wp--preset--color--accent);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.4;
}

/* Form response box (CF7 sets the state class on the form) */
.wpcf7 form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 12px 16px;
	border: 2px solid var(--wp--preset--color--contrast);
	border-inline-start-width: 6px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--primary);
	border-inline-start-color: var(--wp--preset--color--contrast);
}

.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}