/*
Theme Name: Brice Starter
Theme URI: https://bricev.com
Author: Brice V Web Services
Author URI: https://bricev.com
Description: Custom block theme powering the Pine Ridge Outdoor demo — a portfolio showcase built by Brice V Web Services. Native blocks, patterns and templates only: no page builder, no build step, no paid dependencies. Design tokens live in theme.json; this file holds the component CSS that block supports cannot express.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brice-starter
*/

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

html {
	scroll-behavior: smooth;
	/* Sticky header offset for in-page anchors. */
	scroll-padding-top: 6rem;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Visible, consistent keyboard focus everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--clay);
	outline-offset: 2px;
	border-radius: 2px;
}

.pr-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--forest-deep);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.pr-skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* =========================================================================
   2. Typography helpers
   ========================================================================= */

.pr-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--clay);
	margin-bottom: 0.5rem;
}

.pr-eyebrow--light {
	color: #D8C3B4;
}

/* A short rule used above section headings. */
.pr-rule::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: var(--wp--preset--color--clay);
	margin-bottom: 1.25rem;
}

.pr-rule--center::before {
	margin-left: auto;
	margin-right: auto;
}

.pr-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

/* Keep long-form reading measure comfortable even inside wide sections. */
.pr-measure {
	max-width: 68ch;
}

.pr-measure-center {
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
}

/* Inside an .is-layout-constrained group, WordPress already narrows every
   plain (non-full) child to --content-size (760px) and centers it there —
   that's the shared reading column a heading/paragraph/button row all sit
   in together. .pr-measure's own 68ch cap is narrower than that (~646px),
   so it gets centered independently within the 1280px band instead of
   staying flush with its siblings' shared 760px column, producing a stray
   ~55px indent. Match the column width instead of re-narrowing it, so a
   .pr-measure paragraph lines up with whatever sits above/below it. */
.is-layout-constrained > .pr-measure:not(.pr-measure-center) {
	max-width: var(--wp--style--global--content-size, 68ch);
}

/* A narrower block (e.g. a FAQ list or checklist under a full-width
   section_heading()) needs to stay flush with that heading's left edge, not
   centered. Giving it align:wide + a custom max-width isn't enough on its
   own: WordPress's ".is-layout-constrained > :where(...)" rule forces
   "margin-left/right: auto !important" on any non-full child regardless of
   its own width (alignwide included), which re-centers it the moment its
   max-width is narrower than the 1280px wide band. Override with the same
   !important weight, flush-left instead. */
.pr-narrow {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Same narrowing, but centered under a centered section_heading() — e.g.
   the homepage FAQ. The block sits centered on the page; the FAQ questions
   and answers inside stay left-aligned text for readability. */
.pr-narrow-center {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =========================================================================
   3. Header + navigation
   ========================================================================= */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	transition: box-shadow 0.25s ease;
}

.pr-header.is-stuck {
	box-shadow: 0 1px 0 var(--wp--preset--color--stone-deep), 0 10px 24px -18px rgba(19, 41, 28, 0.45);
}

/* Slim demo ribbon: collapses once the visitor starts scrolling. */
.pr-ribbon {
	overflow: hidden;
	max-height: 4rem;
	transition: max-height 0.3s ease, opacity 0.2s ease;
}

.pr-header.is-stuck .pr-ribbon {
	max-height: 0;
	opacity: 0;
}

.pr-ribbon p {
	margin: 0;
}

/* Nav links: quiet underline that grows on hover/focus, solid for current page. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
	padding-block: 0.35rem;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--clay);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

/* Current page / current section state (set by the theme's render_block filter). */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation .is-current-section > .wp-block-navigation-item__content {
	font-weight: 600;
}

.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::after,
.wp-block-navigation .is-current-section > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Submenu */
.wp-block-navigation .wp-block-navigation-submenu__toggle {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stone-deep);
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--soft);
	padding: 0.4rem;
	min-width: 21rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 0.85rem;
	border-radius: 3px;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--forest);
}

/* Mobile overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--forest-deep) !important;
	padding: 1.25rem;
}

/* The theme never resets box-sizing globally, so a width:100% element with
   its own padding (several below) adds that padding on top of 100% and
   overflows the panel horizontally. Reset the whole overlay to border-box
   rather than chasing each element individually. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open * {
	box-sizing: border-box;
}

/* The nav block is set to justifyContent:"right" so it hugs the right edge
   on desktop — but core reuses that same setting at TWO levels inside the
   mobile overlay: on ".wp-block-navigation__responsive-container-content"
   (the div wrapping the whole <ul>, shrink-wrapping and right-floating the
   entire list instead of filling the panel) and again on the <ul> itself
   (shrink-wrapping and right-floating each <li> inside it). Both need
   resetting back to a conventional left-aligned, full-width list regardless
   of the desktop justification. (Repeated classes only to out-specificity
   core's own same-specificity rules regardless of stylesheet load order.) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content {
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list.wp-block-page-list {
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	padding-block: 0.5rem;
	width: 100%;
	justify-content: flex-start;
	text-align: left;
}

/* The hover/current-page underline is a desktop pointer affordance — it
   doesn't belong on a touch overlay, and being absolutely positioned
   without every mobile row establishing its own containing block, it could
   size itself against a distant ancestor instead of the row. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: none;
	box-shadow: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
}

/* True tap-to-expand mobile dropdown.
   Core's own overlay CSS forces every submenu permanently open (and hides
   the toggle chevron entirely) once the mobile overlay is open — see
   wp-includes/blocks/navigation/style.css around ".is-menu-open ... .has-child
   .wp-block-navigation__submenu-container { opacity:1; visibility:visible;
   height:auto; ... }". Worse, WordPress's own interactivity store defines
   the toggle's aria-expanded state as true for every submenu the instant
   the overlay opens, regardless of that item's own toggle — so this can't
   be driven off aria-expanded at all. initMobileSubmenus() in pine-ridge.js
   instead toggles its own "is-pr-expanded" class per item, which is what
   these rules key off. */
/* A flex row here (label + chevron sharing a line, wrapping the submenu list
   to its own line below) turned out fragile: flex-grow on the label was
   sized against the row *before* the wrapped items were accounted for,
   pushing the chevron dozens of pixels past the right edge of the screen
   even though its own computed style was perfectly correct. Plain block
   flow + an absolutely-positioned chevron sidesteps that calculation
   entirely — the label is simply a full-width block with padding reserved
   on the right, and the chevron sits in that reserved space. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.wp-block-navigation-submenu {
	position: relative;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.wp-block-navigation-submenu > .wp-block-navigation-item__content {
	padding-right: 2.25rem;
	/* Fixed so the icon's centering math below (half of this) stays correct
	   regardless of font metrics. */
	line-height: 1.2;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	/* top:50% would center against the *whole* <li>, including the expanded
	   submenu list below the label — pulling the chevron down to the middle
	   of the entire expanded block instead of staying next to "Services".
	   A fixed distance from the top (half the label row's own height: 0.5rem
	   padding-top + half of 1.1875rem*1.2 line-height) keeps it pinned to
	   the label regardless of how tall the expanded content gets. */
	top: 1.2rem;
	right: 0;
	transform: translateY(-50%);
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.wp-block-navigation-submenu > .wp-block-navigation__submenu-icon svg {
	/* Core rotates this whenever aria-expanded="true" — which, per the note
	   above, is permanently true in the overlay — so reset it here and
	   apply the rotation ourselves only when actually expanded. */
	transform: rotate(0deg);
	transition: transform 0.15s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.wp-block-navigation-submenu.is-pr-expanded > .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.wp-block-navigation-submenu > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	display: block;
	width: 100%;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.wp-block-navigation-submenu.is-pr-expanded > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	height: auto;
	overflow: visible;
	padding: 0.5rem 0 0.75rem 1rem;
}

/* Header CTA stays visible at every width (it is not inside the overlay).
   Smaller than the global button size so it doesn't dominate the nav row
   next to the (now larger) nav link text. */
.pr-header__cta .wp-block-button__link {
	white-space: nowrap;
	padding: 0.6em 1.15em;
}

@media (max-width: 600px) {
	.pr-header__cta .wp-block-button__link {
		font-size: var(--wp--preset--font-size--x-small);
		padding: 0.55em 0.9em;
	}
}

/* =========================================================================
   4. Sections
   ========================================================================= */

.pr-section {
	padding-block: var(--wp--preset--spacing--90);
}

.pr-section--tight {
	padding-block: var(--wp--preset--spacing--70);
}

/* Hairline divider between two same-coloured sections. */
.pr-section--divided {
	border-top: 1px solid var(--wp--preset--color--stone-deep);
}

/* Two consecutive full-width sections in the same background color (e.g. a
   "Related Concept" CTA immediately followed by the "Start your project"
   CTA on a service page) otherwise show the root block-gap as a thin sliver
   of the page background between them — reads as a rendering glitch rather
   than an intentional seam. Collapse the gap so same-color bands run
   together as one continuous block. */
section.has-stone-background-color + section.has-stone-background-color,
section.has-forest-background-color + section.has-forest-background-color,
section.has-clay-background-color + section.has-clay-background-color,
section.has-surface-background-color + section.has-surface-background-color {
	margin-block-start: 0;
}

/* WordPress gives every direct child of the site wrapper (header, main,
   footer) the same root block-gap as a top margin. That shows up in two
   places: between <main>'s last section and the footer (most pages end on
   a colored CTA band right above the footer's own dark background, so the
   gap reads as a stray cream sliver, not a deliberate seam), and between
   the header and <main> (the header's background matches the page
   background but the page's own first section is often a different color,
   so the same gap shows as the hero band not sitting flush under the nav).
   Both already get all the visual separation they need from the header's
   own border/shadow and each section's own padding. */
.wp-site-blocks > footer,
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* =========================================================================
   5. Cards (services, projects, guides)
   ========================================================================= */

.pr-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stone-deep);
	border-radius: 5px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pr-card:hover,
.pr-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--forest);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Every card image renders at the same ratio regardless of source crop. */
.pr-card figure.wp-block-image,
.pr-card .wp-block-image {
	margin: 0;
}

.pr-card figure.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

.pr-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	gap: 0.65rem;
}

.pr-card__body > * {
	margin-block: 0;
}

/* Push the card's link to the bottom so uneven copy still lines up. */
.pr-card__link {
	margin-top: auto;
	padding-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.pr-card__link::after {
	content: " →";
	transition: transform 0.2s ease;
	display: inline-block;
}

.pr-card:hover .pr-card__link::after {
	transform: translateX(3px);
}

/* Only the image and the title link to the card's destination — the
   excerpt stays plain, selectable text instead of being swallowed into a
   whole-card click target. */
.pr-card__media-link {
	display: block;
}

.pr-card__body h3 a {
	color: inherit;
	text-decoration: none;
}

.pr-card__body h3 a:hover,
.pr-card__body h3 a:focus-visible {
	text-decoration: underline;
}

/* Columns holding cards must stretch, not centre. */
.pr-cards .wp-block-column {
	display: flex;
}

.pr-cards .wp-block-column > * {
	width: 100%;
}

/* Taller 3:2 media for project cards. */
.pr-card--project figure.wp-block-image img {
	aspect-ratio: 3 / 2;
}

/* Center the concept-project card titles/chips/copy under the centered
   "Concept Projects" section heading above them, rather than left-aligning
   card body text under a centered intro. */
.pr-card--project .pr-card__body {
	align-items: center;
	text-align: center;
}

.pr-card--project .pr-chip {
	margin-inline: auto;
}

/* =========================================================================
   6. Media
   ========================================================================= */

.pr-media-wide img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 5px;
}

.pr-media-tall img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 5px;
}

.pr-media-square img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 5px;
}

.pr-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 6px;
}

@media (max-width: 781px) {
	.pr-hero__media img {
		aspect-ratio: 16 / 10;
	}
}

figcaption,
.wp-element-caption {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-soft);
	text-align: left;
}

/* =========================================================================
   7. Breadcrumbs
   ========================================================================= */

.pr-breadcrumbs {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-soft);
}

.pr-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.pr-breadcrumbs li::after {
	content: "/";
	margin-left: 0.4rem;
	color: var(--wp--preset--color--stone-deep);
}

.pr-breadcrumbs li:last-child::after {
	content: "";
}

.pr-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.pr-breadcrumbs a:hover {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
}

.pr-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* =========================================================================
   8. FAQ accordions (native <details>, works without JavaScript)
   ========================================================================= */

.pr-faq {
	border-top: 1px solid var(--wp--preset--color--stone-deep);
}

.pr-faq details {
	border-bottom: 1px solid var(--wp--preset--color--stone-deep);
}

.pr-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1.15rem 2.5rem 1.15rem 0;
	position: relative;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}

.pr-faq summary::-webkit-details-marker {
	display: none;
}

.pr-faq summary::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 1.55rem;
	width: 11px;
	height: 11px;
	border-right: 2px solid var(--wp--preset--color--forest);
	border-bottom: 2px solid var(--wp--preset--color--forest);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.pr-faq details[open] summary::after {
	transform: rotate(-135deg);
	top: 1.9rem;
}

.pr-faq summary:hover {
	color: var(--wp--preset--color--forest);
}

.pr-faq .pr-faq__answer {
	padding: 0 2.5rem 1.35rem 0;
	color: var(--wp--preset--color--ink-soft);
	max-width: 68ch;
}

.pr-faq .pr-faq__answer > :first-child {
	margin-top: 0;
}

/* =========================================================================
   9. Project filters
   ========================================================================= */

.pr-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--60);
}

.pr-filters__btn {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 1px solid var(--wp--preset--color--stone-deep);
	border-radius: 999px;
	padding: 0.55rem 1.15rem;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.pr-filters__btn:hover {
	border-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--forest);
}

.pr-filters__btn[aria-pressed="true"] {
	background: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
}

.pr-projects__empty {
	color: var(--wp--preset--color--ink-soft);
}

.pr-projects__empty[hidden] {
	display: none;
}

/* =========================================================================
   10. Lightbox
   ========================================================================= */

.pr-gallery__trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: 5px;
	overflow: hidden;
}

.pr-gallery__trigger img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.pr-gallery__trigger:hover img {
	transform: scale(1.03);
}

.pr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 3vw, 2.5rem);
	background: rgba(12, 22, 16, 0.94);
}

.pr-lightbox[hidden] {
	display: none;
}

.pr-lightbox__figure {
	margin: 0;
	max-width: min(1200px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.pr-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 76vh;
	width: auto;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.04);
}

.pr-lightbox__caption {
	color: #E9E4D9;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	margin: 0;
	max-width: 70ch;
	margin-inline: auto;
}

.pr-lightbox__count {
	color: #B9C2B4;
	font-size: var(--wp--preset--font-size--x-small);
	text-align: center;
	margin: 0;
	letter-spacing: 0.06em;
}

.pr-lightbox__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(12, 22, 16, 0.6);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.pr-lightbox__btn:hover {
	background: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--forest);
}

.pr-lightbox__btn--prev {
	left: clamp(0.5rem, 2vw, 1.75rem);
}

.pr-lightbox__btn--next {
	right: clamp(0.5rem, 2vw, 1.75rem);
}

.pr-lightbox__close {
	position: absolute;
	top: clamp(0.5rem, 2vw, 1.5rem);
	right: clamp(0.5rem, 2vw, 1.5rem);
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(12, 22, 16, 0.6);
	color: #fff;
	font-size: 1.15rem;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.pr-lightbox__close:hover {
	background: var(--wp--preset--color--clay);
	border-color: var(--wp--preset--color--clay);
}

body.pr-scroll-locked {
	overflow: hidden;
}

@media (max-width: 600px) {
	.pr-lightbox__btn {
		width: 2.5rem;
		height: 2.5rem;
		top: auto;
		bottom: 0.5rem;
		transform: none;
	}

	.pr-lightbox__img {
		max-height: 64vh;
	}
}

/* =========================================================================
   11. Estimate form (two-step demonstration)
   ========================================================================= */

.pr-form {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stone-deep);
	border-radius: 6px;
	padding: clamp(1.5rem, 4vw, 2.75rem);
}

.pr-form__steps {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 1.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
}

.pr-form__step-dot {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--stone-deep);
	margin-right: 0.4rem;
}

.pr-form__step.is-active {
	color: var(--wp--preset--color--forest);
}

.pr-form__step.is-active .pr-form__step-dot {
	background: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
}

.pr-form__step-line {
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--stone-deep);
}

.pr-field {
	margin-bottom: 1.25rem;
}

.pr-field label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--ink);
}

.pr-field__hint {
	font-weight: 400;
	color: var(--wp--preset--color--ink-soft);
}

.pr-field input[type="text"],
.pr-field input[type="email"],
.pr-field input[type="tel"],
.pr-field select,
.pr-field textarea {
	box-sizing: border-box;
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--stone-deep);
	border-radius: 4px;
	padding: 0.7rem 0.85rem;
}

.pr-field textarea {
	min-height: 8rem;
	resize: vertical;
}

.pr-field input:focus,
.pr-field select:focus,
.pr-field textarea:focus {
	border-color: var(--wp--preset--color--forest);
}

.pr-field__error {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: #9B2C1E;
	font-weight: 600;
}

.pr-field__error:empty {
	display: none;
}

.pr-field.has-error input,
.pr-field.has-error select,
.pr-field.has-error textarea {
	border-color: #9B2C1E;
}

.pr-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1.5rem;
}

.pr-btn {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 4px;
	padding: 0.95em 1.9em;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.pr-btn--primary {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
}

.pr-btn--primary:hover {
	background: var(--wp--preset--color--forest-deep);
}

.pr-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--stone-deep);
}

.pr-btn--ghost:hover {
	border-color: var(--wp--preset--color--forest);
	background: var(--wp--preset--color--base);
}

.pr-form__review {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--stone-deep);
	border-radius: 4px;
	padding: 1.1rem 1.25rem;
	margin-bottom: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}

.pr-form__review dl {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: 0.45rem 1rem;
}

.pr-form__review dt {
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
}

.pr-form__review dd {
	margin: 0;
}

.pr-form__note {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-soft);
	border-left: 3px solid var(--wp--preset--color--clay);
	padding-left: 0.85rem;
	margin-top: 1.25rem;
}

.pr-form__done {
	text-align: center;
	padding: 1rem 0 0.5rem;
}

.pr-form__done-mark {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
	display: grid;
	place-items: center;
	margin: 0 auto 1rem;
	font-size: 1.5rem;
}

[data-pr-step][hidden],
[data-pr-done][hidden] {
	display: none;
}

/* Without JavaScript the whole form is shown as a single readable block. */
.pr-form__nojs {
	border-left: 3px solid var(--wp--preset--color--clay);
	padding-left: 0.85rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

/* =========================================================================
   12. Footer
   ========================================================================= */

.pr-footer a {
	color: #DCD6C8;
	text-decoration: none;
}

.pr-footer a:hover,
.pr-footer a:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.pr-footer__heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9FB0A2;
	margin-bottom: 1rem;
}

.pr-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
}

.pr-footer__bottom {
	border-top: 1px solid rgba(246, 243, 236, 0.16);
	font-size: var(--wp--preset--font-size--x-small);
	color: #9FB0A2;
}

.pr-footer__credit {
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

/* =========================================================================
   13. Utilities
   ========================================================================= */

.pr-chip {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--forest);
	background: var(--wp--preset--color--stone);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
}

.pr-chip--light {
	background: rgba(246, 243, 236, 0.14);
	color: #E4DFD3;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* A row of columns whose headings vary in length (so one wraps to a second
   line while its siblings don't) reserves two lines of heading height, so
   every column's body copy still starts at the same baseline regardless of
   how many lines its own heading took. */
.pr-cols--align-headings > .wp-block-column > :first-child {
	min-height: 2.24em;
}

/* Numbered steps */
.pr-step__num {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--forest);
	color: var(--wp--preset--color--forest);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 0.85rem;
}

.pr-step__num--light {
	border-color: rgba(246, 243, 236, 0.5);
	color: var(--wp--preset--color--base);
}

/* Checklist */
.pr-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.pr-checklist li {
	position: relative;
	padding-left: 1.85rem;
}

.pr-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--wp--preset--color--clay);
	border-bottom: 2px solid var(--wp--preset--color--clay);
	transform: rotate(-45deg) translateY(-2px);
}

/* =========================================================================
   14. Motion preferences
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}