/*
Theme Name: Cedars Ridge
Theme URI: https://cedarsridge.com
Author: Cedars Ridge Landscaping
Description: A bespoke block theme for Cedars Ridge Landscaping of Langhorne, Bucks County, Pennsylvania. Built for depth, heritage character, and local search performance.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cedarsridge
Tags: block-theme, full-site-editing, business, one-column, custom-colors, custom-logo, editor-style
*/

/* ==========================================================================
   1. FOUNDATION
   ========================================================================== */

:root {
	--cr-brand-green: #5E903F;   /* sampled from the supplied logo */
	/* Interactive brass only. #A67C34 gives pine text 4.23:1 — below AA — and it
	   was carrying the primary CTA and the mobile Call button. Decorative brass
	   (hairlines, ornaments) stays #A67C34, where contrast rules do not apply. */
	--cr-brass-cta: #B78A3C;
	--cr-brand-ink: #1C1C1C;
	--cr-rule: 1px solid rgba(27, 29, 24, 0.14);
	--cr-rule-light: 1px solid rgba(246, 242, 231, 0.22);
	--cr-brass-rule: 1px solid rgba(166, 124, 52, 0.45);
	--cr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	position: relative;
	text-rendering: optimizeLegibility;
	font-variant-numeric: oldstyle-nums;
}

/* Paper grain — the single most important texture cue. Sits above the
   background, below all content, and never intercepts pointer events. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: var(--cr-grain);
	pointer-events: none;
	z-index: 1;
}
.wp-site-blocks { position: relative; z-index: 2; }

::selection { background: var(--wp--preset--color--brass); color: var(--wp--preset--color--parchment); }

:focus-visible {
	outline: 2px solid var(--wp--preset--color--brasslight);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px rgba(16, 38, 26, .55);
}
.cr-callbar a:focus-visible { outline-offset: -4px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--pine);
	color: var(--wp--preset--color--parchment);
	padding: 1rem 1.5rem;
	z-index: 999999;
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .8125rem;
}

/* ==========================================================================
   2. TYPOGRAPHIC DETAIL
   ========================================================================== */

/* Eyebrow — small-caps label above headings. The "engraved plaque" cue. */
.cr-eyebrow {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: #7A5A22 !important;   /* 5.67:1 on parchment; brass #A67C34 was 3.38:1 */
	margin-bottom: .75rem !important;
	line-height: 1.4 !important;
	display: flex;
	align-items: center;
	gap: .85rem;
}
.cr-eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgba(166,124,52,.5), rgba(166,124,52,0));
}
.cr-eyebrow.is-centered { justify-content: center; }
.cr-eyebrow.is-centered::after { display: none; }
.cr-eyebrow.is-centered::before {
	content: "❦";
	font-size: 1rem;
	letter-spacing: 0;
	opacity: .75;
}

.cr-crumbs { margin: 0 0 .9rem !important; }
.cr-breadcrumbs {
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--stone);
}
.cr-breadcrumbs a { color: var(--wp--preset--color--stone); text-decoration: none; }
.cr-breadcrumbs a:hover { color: var(--wp--preset--color--forest); text-decoration: underline; }
.cr-breadcrumbs .cr-crumb-sep { opacity: .5; margin-inline: .15rem; }
.cr-breadcrumbs [aria-current="page"] { color: var(--wp--preset--color--pine); }
@media (max-width: 600px) { .cr-breadcrumbs { font-size: .75rem; } }

.cr-display-line {
	color: var(--wp--preset--color--pine);
	margin: 0 0 .9rem !important;
	text-wrap: balance;
}

/* Lead paragraph */
.cr-lead {
	font-size: clamp(1.1875rem, 1.6vw, 1.4375rem) !important;
	line-height: 1.62 !important;
	color: var(--wp--preset--color--stone);
}

/* Drop cap for editorial passages */
.cr-dropcap::first-letter {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.6em;
	line-height: .82;
	float: left;
	margin: .08em .12em 0 0;
	color: var(--wp--preset--color--forest);
}

/* Headings on dark grounds */
.has-pine-background-color :is(h1,h2,h3,h4,h6),
.has-forest-background-color :is(h1,h2,h3,h4,h6),
.cr-dark :is(h1,h2,h3,h4,h6) { color: var(--wp--preset--color--parchment); }
.cr-dark { color: rgba(246,242,231,.82); }
.cr-dark .cr-eyebrow { color: var(--wp--preset--color--brasslight) !important; }
.cr-dark .cr-eyebrow::after { background: linear-gradient(90deg, rgba(201,169,97,.5), rgba(201,169,97,0)); }
.cr-dark a { color: var(--wp--preset--color--brasslight); }

/* ==========================================================================
   3. ORNAMENT
   ========================================================================== */

/* Rule with a centered diamond — a classic letterpress device */
.cr-ornament {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--wp--preset--color--brass);
	margin-block: var(--wp--preset--spacing--30);
}
.cr-ornament::before,
.cr-ornament::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .38;
}
.cr-ornament span { font-size: .7rem; letter-spacing: .4em; opacity: .85; }

/* Hairline top border used to separate stacked sections */
.cr-hairline { border-top: var(--cr-rule); }
.cr-dark .cr-hairline { border-top: var(--cr-rule-light); }

/* ==========================================================================
   4. HEADER + NAVIGATION
   ========================================================================== */

.cr-header {
	position: relative;
	z-index: 50;
	border-bottom: var(--cr-rule);
	background: var(--wp--preset--color--parchment);
}

/* The block editor puts a 24px block-gap between every top-level sibling. That
   left a band of empty parchment between the header and the hero on every page,
   and a matching one above the logo on mobile once the utility bar is hidden —
   display:none removes the bar but not the margin its sibling inherited. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.cr-header > .wp-block-group + .wp-block-group { margin-block-start: 0; }

/* Utility strip above the masthead — carries the phone number sitewide.
   Communication is the brand promise, so the number never leaves the screen. */
.cr-utility {
	background: var(--wp--preset--color--pine);
	color: rgba(246,242,231,.88);
	font-size: .8125rem;
	letter-spacing: .04em;
}
.cr-utility a { color: var(--wp--preset--color--brasslight); text-decoration: underline; text-underline-offset: .18em; }
.cr-utility a:hover { color: var(--wp--preset--color--parchment); text-decoration: underline; }
.cr-utility strong { color: var(--wp--preset--color--parchment); font-weight: 600; }

.cr-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.cr-header .wp-block-navigation-item__content {
	text-decoration: none;
	padding-block: .35rem;
	position: relative;
	color: var(--wp--preset--color--ink);
}
/* Underline that grows from the center — subtle, not showy */
.cr-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--wp--preset--color--brass);
	transform: translateX(-50%);
	transition: width .28s var(--cr-ease);
}
.cr-header .wp-block-navigation-item__content:hover::after,
.cr-header .current-menu-item > .wp-block-navigation-item__content::after { width: 100%; }

.wp-block-navigation__submenu-container {
	border: var(--cr-rule) !important;
	box-shadow: var(--wp--preset--shadow--lifted);
	background: var(--wp--preset--color--white) !important;
	padding-block: .5rem !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-transform: none;
	letter-spacing: .01em;
	font-weight: 400;
	font-size: .9375rem;
}

.custom-logo { max-height: 60px; width: auto; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.wp-block-button__link {
	transition: background-color .25s var(--cr-ease), color .25s var(--cr-ease),
	            transform .25s var(--cr-ease), box-shadow .25s var(--cr-ease);
	box-shadow: 0 1px 2px rgba(16,38,26,.12);
}
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(16,38,26,.45); }
.wp-block-button__link:active { transform: translateY(0); }

/* Outline variant */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid currentColor;
	box-shadow: none;
	background: transparent;
}
.cr-dark .wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--parchment); }
.cr-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--pine);
}

/* Brass call button */
.cr-btn-brass .wp-block-button__link {
	background: var(--cr-brass-cta);   /* 5.11:1 with pine text */
	color: var(--wp--preset--color--pine);
}
.cr-btn-brass .wp-block-button__link:hover { background: var(--wp--preset--color--brasslight); color: var(--wp--preset--color--pine); }

/* ==========================================================================
   6. HERO
   ========================================================================== */

.cr-hero {
	position: relative;
	overflow: hidden;
	/* background-color, not the background shorthand: the shorthand would reset
	   background-image and drop the photograph below. */
	background-color: var(--wp--preset--color--pine);
	background-image:
		linear-gradient(rgba(8,20,13,.84) 0%, rgba(8,20,13,.66) 100%),
		url(assets/images/photos/hero-1200.webp);
	background-size: cover;
	background-position: center 58%;
	background-repeat: no-repeat;
}
/* Larger frame only past the phone breakpoint — 71KB on a phone, 119KB on a
   desktop, rather than paying desktop weight on cellular. */
@media (min-width: 900px) {
	.cr-hero {
		background-image:
			linear-gradient(rgba(8,20,13,.84) 0%, rgba(8,20,13,.66) 100%),
			url(assets/images/photos/hero-1800.webp);
	}
}
.cr-hero::after {
	/* vignette for depth */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 50% 0%, rgba(16,38,26,0) 35%, rgba(8,20,13,.72) 100%);
	pointer-events: none;
}
.cr-hero > * { position: relative; z-index: 2; }

/* Ridge silhouette at the base of the hero — echoes the logo mark.
   max-width must be cleared: the block editor's constrained layout caps
   every child at contentSize, which would inset the ridge from the edges. */
.cr-ridge {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
	height: clamp(60px, 8vw, 130px);
	display: block;
	z-index: 3;
	pointer-events: none;
}

.cr-hero h1 { text-wrap: balance; }

/* --------------------------------------------------------------------------
   Placeholder photography.

   Every one of these is a stand-in. They are atmospheric or illustrative only:
   nothing is captioned as our own work and there is no gallery, so replacing
   them with real photographs is an upgrade and never a correction.
   -------------------------------------------------------------------------- */
.cr-photo {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}
.cr-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}
/* The story column runs shorter than its neighbour; the frame closes the gap. */
.cr-photo-ground {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: 0;
}

/* ==========================================================================
   7. CARDS + DEPTH
   ========================================================================== */

.cr-card {
	background: var(--wp--preset--color--white);
	border: var(--cr-rule);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform .3s var(--cr-ease), box-shadow .3s var(--cr-ease), border-color .3s var(--cr-ease);
	height: 100%;
}
.cr-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lifted);
	border-color: rgba(166,124,52,.45);
}
.cr-card h3 { margin-top: 0; }

/* Link-wrapped cards */
.cr-card a.cr-card-link { text-decoration: none; }
.cr-card a.cr-card-link:hover { text-decoration: none; }

/* Numbered process steps — engraved numerals */
.cr-step-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.75rem;
	line-height: 1;
	color: var(--wp--preset--color--brass);
	opacity: .55;
	display: block;
	margin-bottom: .5rem;
}

/* The Promise plaque — deliberately looks like an engraved brass plate */
.cr-plaque {
	border: 1px solid rgba(166,124,52,.5);
	background:
		linear-gradient(180deg, rgba(246,242,231,.06), rgba(246,242,231,0)),
		var(--wp--preset--color--pine);
	box-shadow: inset 0 0 0 1px rgba(166,124,52,.18), var(--wp--preset--shadow--deep);
	position: relative;
}
.cr-plaque::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(166,124,52,.28);
	pointer-events: none;
}

/* Arched image — architectural, heritage */
.cr-arch img { border-radius: 50vw 50vw 3px 3px / 26vw 26vw 3px 3px; }

/* Image frame with brass hairline offset */
.cr-framed { position: relative; }
.cr-framed::after {
	content: "";
	position: absolute;
	inset: 14px -14px -14px 14px;
	border: var(--cr-brass-rule);
	z-index: -1;
	pointer-events: none;
}

/* ==========================================================================
   7b. SERVICE AREA MAP
   ========================================================================== */

/* Map label styles. These lived inside the SVG as an inline <style>, but <style>
   is on wpautop's block-level list, so rendering the map through a shortcode in a
   block template made wpautop inject a </p> right after </defs> — closing the SVG
   early and spilling every label into the page as loose text. Out here they are
   also cacheable. */
.cr-map text { font-family: var(--wp--preset--font-family--body); }
.cr-map .m-town { font-size: 12.5px; fill: var(--wp--preset--color--ink); font-weight: 600; }
.cr-map .m-home { font-size: 13.5px; fill: var(--wp--preset--color--pine); font-weight: 700; letter-spacing: .07em; }
.cr-map .m-base { font-size: 11px; fill: var(--wp--preset--color--stone); font-style: italic; }
.cr-map .m-cty  { font-size: 12px; fill: var(--wp--preset--color--stone); letter-spacing: .22em; text-transform: uppercase; }
.cr-map .m-note { font-size: 11.5px; fill: var(--wp--preset--color--stone); }
.cr-map .m-ring { font-size: 11px; fill: var(--wp--preset--color--brass); font-weight: 700; letter-spacing: .1em; }
.cr-map .m-lede { font-size: 19px; fill: var(--wp--preset--color--pine); font-family: var(--wp--preset--font-family--display); }
.cr-map .m-note2 { font-size: 13px; fill: var(--wp--preset--color--stone); }
@media (max-width: 640px) {
	.cr-map .m-town { font-size: 15px; }
	.cr-map .m-home { font-size: 16px; }
	.cr-map .m-base { font-size: 13px; }
	.cr-map .m-note, .cr-map .m-ring, .cr-map .m-cty { font-size: 13px; }
	.cr-map .m-lede { font-size: 22px; }
	.cr-map .m-note2 { font-size: 15px; }
}

.cr-map-figure {
	margin: var(--wp--preset--spacing--40) 0;
	padding: 0;
	background: var(--wp--preset--color--white);
	border: var(--cr-rule);
	box-shadow: var(--wp--preset--shadow--soft);
}
.cr-map-figure .cr-map {
	display: block;
	width: 100%;
	height: auto;
}
.cr-map-caption {
	border-top: var(--cr-rule);
	padding: .85rem 1.15rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--stone);
	font-style: italic;
}

/* ==========================================================================
   8. SERVICE AREA / TOWN LISTS
   ========================================================================== */

.cr-town-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .25rem 2rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cr-town-grid li { border-bottom: var(--cr-rule); padding: .7rem 0; }
.cr-dark .cr-town-grid li { border-bottom: var(--cr-rule-light); }
.cr-town-grid a {
	text-decoration: none;
	font-size: .9375rem;
	letter-spacing: .02em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
}
.cr-town-grid a::after { content: "→"; opacity: .4; transform: translateX(-2px); transition: all .22s var(--cr-ease); }
.cr-town-grid a:hover::after { opacity: .85; transform: translateX(0); }

/* ==========================================================================
   9. STICKY MOBILE CALL BAR
   Communication is the promise. On phones, the way to talk to us is pinned
   to the bottom of every page.
   ========================================================================== */

.cr-callbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 900;
	display: none;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid rgba(166,124,52,.4);
	box-shadow: 0 -8px 30px -12px rgba(16,38,26,.55);
}
.cr-callbar-single { grid-template-columns: 1fr; }

/* Collapse the two big submenus inside the overlay.

   Expanded, the menu ran to 40 items and Contact sat a long scroll from the top.
   WordPress renders the toggle button and flips its aria-expanded correctly, but
   its own overlay rule sets the submenu to display:flex at (0,3,0), so the
   submenu stayed visible regardless. This targets the toggle's state and its
   sibling container at (0,4,0), which wins. Desktop dropdowns are untouched —
   everything here is scoped to .is-menu-open. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
	display: none !important;
}

/* Tap target only — deliberately no caret.

   Four attempts to draw an expand affordance all damaged the layout: a border
   corner rendered as a filled diamond; U+2304 is absent from Source Sans 3 and
   came out as tofu; forcing flex-direction:row lost to WordPress's column layout
   and wrapped "SERVICE AREA" onto two lines; and taking the toggle out of flow
   made rows overlap. WP gives the button no icon and controls the row layout, so
   the toggle is left alone and simply sized for a thumb. Revisit with a proper
   look at the block's own markup rather than more CSS. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	min-height: 44px;
	min-width: 44px;
}

/* The overlay scrolls past 38 items; without this the final entry sits against
   the bottom edge and under the iPhone home indicator. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0));
}

/* Call and Free Estimate, pinned to the top of the open overlay. The call bar is
   hidden while the menu is open, so without these there is no way to phone from
   inside the menu. Desktop keeps its own header button and hides these. */
.cr-nav-action a {
	background: var(--cr-brass-cta);
	color: var(--wp--preset--color--pine) !important;
	border-radius: 2px;
	padding: .7rem 1.1rem !important;
	font-weight: 700;
}
.cr-nav-action.cr-nav-estimate a {
	background: transparent;
	color: var(--wp--preset--color--parchment) !important;
	border: 1px solid rgba(246,242,231,.45);
}
.cr-nav-action a::after { display: none !important; }
@media (min-width: 1101px) { .cr-nav-action { display: none !important; } }
/* The nav overlay is a sibling at a lower stacking level, so the brass bar
   painted straight over the open mobile menu. */
/* WordPress sets .has-modal-open on <html>, not <body>. The earlier rule targeted
   body and silently never matched, so the bar painted over the open menu and cut
   off the last item. */
html.has-modal-open .cr-callbar { display: none !important; }
.cr-callbar a {
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 1.05rem .75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	text-decoration: none;
}
.cr-callbar .cr-callbar-call { background: var(--cr-brass-cta); color: var(--wp--preset--color--pine); }
.cr-callbar .cr-callbar-quote { background: var(--wp--preset--color--pine); color: var(--wp--preset--color--parchment); }
.cr-callbar svg { width: 17px; height: 17px; flex: none; }

@media (max-width: 781px) {
	.cr-callbar { display: grid; padding-bottom: env(safe-area-inset-bottom, 0); }
	body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.cr-footer { background: var(--wp--preset--color--pine); color: rgba(246,242,231,.72); }
.cr-footer a { color: rgba(246,242,231,.82); text-decoration: none; }
.cr-footer p a { text-decoration: underline; text-underline-offset: .18em; }
.cr-footer a:hover { color: var(--wp--preset--color--brasslight); text-decoration: underline; }
.cr-footer h2, .cr-footer h3, .cr-footer h4 { color: var(--wp--preset--color--parchment); }
.cr-footer .cr-colophon { font-size: .8125rem; color: rgba(246,242,231,.5); }

/* ==========================================================================
   11. FORMS
   ========================================================================== */

/* The form outcome is anchored; without a scroll offset it lands underneath the
   sticky-ish header on desktop and the browser chrome on mobile. */
.cr-form, .cr-form-success { scroll-margin-top: 130px; }
.cr-form-success:focus { outline: none; }

.cr-form input[type="text"],
.cr-form input[type="email"],
.cr-form input[type="tel"],
.cr-form select,
.cr-form textarea {
	width: 100%;
	padding: .85rem 1rem;
	border: var(--cr-rule);
	border-radius: 2px;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	transition: border-color .2s var(--cr-ease), box-shadow .2s var(--cr-ease);
}
.cr-form :is(input, select, textarea):focus {
	border-color: var(--wp--preset--color--brass);
	box-shadow: 0 0 0 3px rgba(166,124,52,.16);
	outline: none;
}
.cr-form label {
	display: block;
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	margin-bottom: .4rem;
	color: var(--wp--preset--color--stone);
}
.cr-form .cr-field { margin-bottom: 1.25rem; }
.cr-form :is(input, select, textarea) { box-sizing: border-box; min-width: 0; }
/* auto-fit rather than a hard 1fr 1fr: the parent column stacks at 781px, so a
   fixed two-up row left these fields ~154px wide on a tablet — narrower than on
   a phone — and running under the sidebar. */
.cr-form .cr-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1.25rem; }
.cr-form .cr-required { color: var(--wp--preset--color--brass); }
.cr-form button[type="submit"] {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--parchment);
	border: none;
	border-radius: 2px;
	padding: 1.05rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	cursor: pointer;
	transition: background-color .25s var(--cr-ease), transform .25s var(--cr-ease);
	width: 100%;
}
.cr-form button[type="submit"]:hover { background: var(--wp--preset--color--pine); transform: translateY(-1px); }
.cr-form .cr-formnote { font-size: .8125rem; color: var(--wp--preset--color--stone); margin-top: .9rem; }

/* Honeypot */
.cr-form .cr-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.cr-form-success {
	border: 1px solid rgba(58,107,65,.45);
	background: rgba(138,165,121,.16);
	padding: 1.25rem 1.5rem;
	border-radius: 2px;
}
.cr-form-error {
	border: 1px solid rgba(166,60,52,.45);
	background: rgba(166,60,52,.09);
	padding: 1rem 1.25rem;
	border-radius: 2px;
	margin-bottom: 1.25rem;
	font-size: .9375rem;
}

/* ==========================================================================
   12. FAQ / DETAILS
   ========================================================================== */

.cr-faq details {
	border-bottom: var(--cr-rule);
	padding: 1.25rem 0;
}
.cr-faq summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	color: var(--wp--preset--color--pine);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
	line-height: 1.4;
}
.cr-faq summary::-webkit-details-marker { display: none; }
.cr-faq summary::after {
	content: "+";
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--brass);
	flex: none;
	transition: transform .25s var(--cr-ease);
}
.cr-faq details[open] summary::after { transform: rotate(45deg); }
.cr-faq details > *:not(summary) { margin-top: .9rem; color: var(--wp--preset--color--stone); }

/* ==========================================================================
   13. UTILITIES
   ========================================================================== */

.cr-measure { max-width: 38rem; }
.cr-measure-wide { max-width: 52rem; }
.cr-balance { text-wrap: balance; }
.cr-pretty { text-wrap: pretty; }

@media (max-width: 781px) {
	.cr-hide-mobile { display: none !important; }
}
@media (min-width: 782px) {
	.cr-hide-desktop { display: none !important; }
}

/* ==========================================================================
   14. RESPONSIVE HARDENING

   The block editor emits `flex-wrap: nowrap` on the header groups, which on a
   narrow viewport pushes the document wider than the screen and produces a
   horizontally scrolling page. These rules force wrapping back on and cap the
   logo, then belt-and-braces the body against any other stray overflow.
   ========================================================================== */

html, body { max-width: 100%; overflow-x: hidden; }

/* WordPress collapses the nav to a hamburger only below 600px. Seven top-level
   items plus the estimate button need roughly 1100px beside the logo; below
   that the row wrapped onto extra lines (a 281px tall header on an iPad) and
   flexbox squeezed the logo down to 108px. Collapse to the overlay earlier. */
@media (max-width: 1100px) {
	.cr-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.cr-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
		display: none;
	}
	.cr-header .wp-block-navigation__responsive-container.is-menu-open { display: flex; }
	/* The logo must not be shrunk by the flex row once the nav is a single icon. */
	.cr-header .wp-block-site-logo { flex: 0 0 auto; }
	.custom-logo, .wp-block-site-logo img { max-width: 118px; height: auto; }
}

@media (max-width: 900px) {
	.cr-header .wp-block-group { flex-wrap: wrap !important; }
	.custom-logo, .wp-block-site-logo img { max-width: min(112px, 34vw); }
}

@media (max-width: 781px) {
	/* Utility strip is desktop-only; the sticky call bar covers this on phones. */
	.cr-utility { display: none !important; }

	.cr-header .wp-block-group { gap: .75rem; }
	.custom-logo, .wp-block-site-logo img { max-width: min(106px, 32vw); }

	/* Masthead on a phone: logo left, hamburger right, nothing else — and the
	   stacked lockup is tall, so the padding around it can be tight. */
	.cr-header > .wp-block-group { padding-top: .45rem !important; padding-bottom: .45rem !important; }

	/* Columns stack, so kill the fixed flex-basis the editor writes inline. */
	.wp-block-columns .wp-block-column { flex-basis: 100% !important; }

	/* Long service/town names should never force a wide row. */
	.cr-town-grid { grid-template-columns: 1fr; gap: 0; }

	/* Section rhythm tightens up on a phone. */
	.cr-hero { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; }

	/* Buttons go full width so they are thumb-sized. */
	.wp-block-buttons .wp-block-button { width: 100%; }
	.wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; }

	/* Plaque inner border crowds a narrow screen. */
	.cr-plaque::before { inset: 6px; }

	/* Offset frame would overflow the viewport. */
	.cr-framed::after { display: none; }
}

@media (max-width: 480px) {
	.cr-eyebrow { letter-spacing: .16em; }   /* keep 12px — do not shrink small caps further */
	.cr-step-num { font-size: 2.25rem; }
}

/* Nothing inside prose should ever push the page wide. */
img, svg, video, table, pre { max-width: 100%; }
pre { overflow-x: auto; }

/* Print */
@media print {
	.cr-callbar, .cr-utility, .wp-block-navigation { display: none !important; }
	body::before { display: none; }
}