/*
 * CPC theme: rules theme.json cannot express.
 * Tokens: --wp--preset--color--{navy,copper,cream,white,ink,navy-deep,copper-deep,copper-light,line,error}.
 * Copper (#9C7860) is below 4.5:1 on every background, so it is used for
 * rules, borders and large display text only; small copper text uses copper-deep.
 * On navy, copper details use copper-light (#D6B49B, 4.73:1).
 */

/* Focus: always visible, follows the text color so it contrasts on light and navy. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width, 3px) solid currentColor;
	outline-offset: var(--wp--custom--focus--offset, 3px);
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

/* Dark (navy) sections: readable headings and links, cream buttons, cream focus rings.
   Real selectors (not :where) so they outrank the global element styles. */
.has-navy-background-color,
.has-navy-deep-background-color {
	color: var(--wp--preset--color--white);
}
.has-navy-background-color :is(h1, h2, h3, h4, h5, h6),
.has-navy-deep-background-color :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white);
}
.has-navy-background-color a:not(.wp-element-button):not(.wp-block-button__link),
.has-navy-deep-background-color a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--wp--preset--color--cream);
}
.has-navy-background-color .wp-block-button__link,
.has-navy-background-color .wp-element-button,
.has-navy-deep-background-color .wp-block-button__link,
.has-navy-deep-background-color .wp-element-button {
	background-color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--navy);
}
.has-navy-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-navy-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--cream);
}
/* Hover on navy fills every button (solid, outline, form) with light copper
   and dark navy text, 6.7:1. Full copper with navy text would be 2.3:1. The outline
   selector has to outrank the general outline hover below, which would
   otherwise turn the button navy on navy. */
:is(.has-navy-background-color, .has-navy-deep-background-color) :is(.wp-block-button__link, .wp-element-button):hover,
:is(.has-navy-background-color, .has-navy-deep-background-color) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--copper-light);
	border-color: var(--wp--preset--color--copper-light);
	color: var(--wp--preset--color--navy-deep);
}
.has-navy-background-color :focus-visible,
.has-navy-deep-background-color :focus-visible {
	outline-color: var(--wp--preset--color--cream);
}

/* Outline buttons. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--navy);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* Eyebrow label above headings. */
.cpc-eyebrow {
	color: var(--wp--preset--color--copper-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.has-navy-background-color .cpc-eyebrow { color: var(--wp--preset--color--cream); }

/* Hero: copper rule under the lead. */
.cpc-hero .wp-block-post-title,
.cpc-hero h1 { margin-block: 0; }
/* Page headings and intros run the full width of the page content, with no
   width caps (owner's call, 2026-10-18). */
.cpc-hero .wp-block-post-excerpt__excerpt,
.cpc-hero .cpc-lead { font-size: var(--wp--preset--font-size--large); }
.cpc-rule {
	background: var(--wp--preset--color--copper);
	border: 0;
	height: 4px;
	margin-inline: 0;
	width: 4rem;
}

/* Copper accents: a short copper rule is the repeated motif. Navy and cream
   stay dominant; copper text appears only at large sizes on light sections. */
.cpc-rule--light { background: var(--wp--preset--color--copper-light); }
.cpc-home-hero .cpc-rule { margin-block: 1.5rem 0; width: 5rem; }

/* One selected large heading per page can carry a copper word (3.5:1 on cream). */
.cpc-accent-word { color: var(--wp--preset--color--copper); }

/* Featured project cards: an always-visible short copper rule. */
.cpc-home-work .cpc-card__body::before {
	background: var(--wp--preset--color--copper);
	content: "";
	display: block;
	height: 4px;
	width: 2.5rem;
}

/* Main "Start a project" action (header, heroes, closing bands): a copper bottom
   edge and arrow. The label stays navy or cream; outline buttons stay plain. */
:is(.cpc-action, .cpc-quote-link > .wp-block-button:not(.is-style-outline)) > .wp-block-button__link {
	box-shadow: inset 0 -4px 0 var(--wp--preset--color--copper-light);
}
:is(.has-navy-background-color, .has-navy-deep-background-color) :is(.cpc-action, .cpc-quote-link > .wp-block-button:not(.is-style-outline)) > .wp-block-button__link {
	box-shadow: inset 0 -4px 0 var(--wp--preset--color--copper);
}
/* A copper arrow after the label (hidden from screen readers). */
:is(.cpc-action, .cpc-quote-link > .wp-block-button:not(.is-style-outline)) > .wp-block-button__link::after {
	color: var(--wp--preset--color--copper-light);
	content: "\2192";
	content: "\2192" / "";
	display: inline-block;
	font-weight: 700;
	margin-inline-start: 0.45em;
	transition: transform 0.15s ease;
}
:is(.has-navy-background-color, .has-navy-deep-background-color) :is(.cpc-action, .cpc-quote-link > .wp-block-button:not(.is-style-outline)) > .wp-block-button__link::after {
	color: var(--wp--preset--color--copper);
}
:is(.cpc-action, .cpc-quote-link > .wp-block-button:not(.is-style-outline)) > .wp-block-button__link:is(:hover, :focus-visible)::after {
	transform: translateX(3px);
}
/* On navy the hover fill is light copper, so the arrow turns navy to stay visible. */
:is(.has-navy-background-color, .has-navy-deep-background-color) :is(.cpc-action, .cpc-quote-link > .wp-block-button:not(.is-style-outline)) > .wp-block-button__link:hover::after {
	color: var(--wp--preset--color--navy-deep);
}
@media (prefers-reduced-motion: reduce) {
	:is(.cpc-action, .cpc-quote-link > .wp-block-button:not(.is-style-outline)) > .wp-block-button__link::after { transition: none; }
}

/* No lonely last word. Headings even out their lines (only when they need
   more than one). Paragraphs, including hero intros, fill their lines and
   just avoid a one-word last line where the browser supports it; balancing
   them made short intros look narrow on wide screens. */
:is(h1, h2, h3, h4, .cpc-directory__title, .cpc-card__title) { text-wrap: balance; }
:is(p, li, figcaption) { text-wrap: pretty; }

/* Header, main and footer sit flush; sections own their spacing. */
.wp-site-blocks > * { margin-block-start: 0; }

/* Header. It stays in view while the page scrolls, and slims down once the
   page has scrolled (`is-scrolled` comes from assets/js/header.js). No
   transform or backdrop filter here: either would trap the phone menu
   overlay inside the header. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
@media (max-width: 600px) {
	/* The admin bar scrolls away on phones, so the header sticks to the top edge. */
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
}
/* In-page links and focused fields land below the header, not under it. The
   directory's own anchor offset (CPC Core) would double up with this. */
html { scroll-padding-top: calc(var(--cpc-header-height, 5rem) + var(--wp--preset--spacing--30)); }
.wp-site-blocks .cpc-directory__item { scroll-margin-top: 0; }

.cpc-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: padding 0.2s ease, box-shadow 0.2s ease;
}
.cpc-header .cpc-logo img { display: block; height: auto; max-width: min(220px, 48vw); transition: max-width 0.2s ease; }
/* !important: the header's padding is an inline block style. */
.is-scrolled .cpc-header {
	box-shadow: 0 2px 12px rgb(30 42 49 / 0.12);
	padding-bottom: var(--wp--preset--spacing--20) !important;
	padding-top: var(--wp--preset--spacing--20) !important;
}
.is-scrolled .cpc-header .cpc-logo img { max-width: min(170px, 40vw); }
@media (prefers-reduced-motion: reduce) {
	.cpc-header,
	.cpc-header .cpc-logo img { transition: none; }
}
.cpc-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
}
.cpc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.cpc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0.75rem;
}
.cpc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
}

.cpc-header .wp-block-navigation__responsive-container-open,
.cpc-header .wp-block-navigation__responsive-container-close {
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
}
.cpc-header .wp-block-navigation-item__content { padding-block: 0.5rem; }
.cpc-header .current-menu-item > .wp-block-navigation-item__content,
.cpc-header .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--copper);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.4em;
}

/* Phones keep the logo, a labelled Menu button and Start a project on one
   line, so the sticky header stays short. The logo gives way first. */
@media (max-width: 599px) {
	.cpc-header .cpc-logo { flex-shrink: 1; min-width: 0; }
	.cpc-header .cpc-logo img { max-width: min(36vw, 100%); }
	.is-scrolled .cpc-header .cpc-logo img { max-width: min(32vw, 100%); }
	.cpc-header .alignwide,
	.cpc-header__actions { gap: 0.75rem; }
	.cpc-header__actions { flex-shrink: 0; }
	.cpc-header__cta .wp-block-button__link { font-size: var(--wp--preset--font-size--small); padding: 0.55rem 0.7rem; white-space: nowrap; }
	.cpc-header .wp-block-navigation__responsive-container-open { font-weight: 600; }
}
/* Tablets and small laptops also get the Menu button. WordPress switches at
   600px, but the full row of links (six once the Catalog and The Punch List
   join) only fits on one line from about 1140px; below that it wrapped and
   doubled the height of the sticky header. 1200px leaves room for scrollbars. */
@media (min-width: 600px) and (max-width: 1199px) {
	.cpc-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; font-weight: 600; }
	.cpc-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 359px) {
	.cpc-header__cta { display: none; }
}

/* Homepage hero: the photo column disappears until an approved project photo exists. */
.cpc-home-hero .cpc-home-hero__visual:not(:has(img, .cpc-asset-slot)) { display: none; }
.cpc-home-hero .cpc-lead { font-size: var(--wp--preset--font-size--large); }
.cpc-home-hero .cpc-spotlight__figure figcaption,
.cpc-home-hero .cpc-spotlight__figure figcaption a { color: var(--wp--preset--color--cream); }

/* A column holding only an optional photo disappears when there's none. */
.cpc-collapse-empty:not(:has(img, .cpc-asset-slot)) { display: none; }

/* A section of optional blocks (related cards, options, FAQs) disappears when
   none of them has anything to show yet, e.g. before related pages publish. */
.cpc-hide-empty:not(:has(> *)) { display: none; }

/* Text-and-photo rows that put the photo on the left on wide screens. The text
   stays first in reading order and on phones. */
@media (min-width: 782px) {
	.wp-block-columns.cpc-columns-reverse { flex-direction: row-reverse; }
}

/* Contact line under a closing invitation. */
.cpc-facts-inline .cpc-facts-list { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.cpc-facts-inline .cpc-facts-list__row { margin: 0; }

/* Footer. */
/* Copper top edge: ties the close back to the hero rule and separates a navy
   closing band from the navy footer. Decorative (2.3:1 on navy), never text. */
.cpc-footer { box-shadow: inset 0 4px 0 var(--wp--preset--color--copper); }
.cpc-footer .cpc-logo img { display: block; height: auto; max-width: 240px; }
.cpc-footer .wp-block-navigation { gap: 0.5rem; }
.cpc-footer .cpc-facts-list dt { color: var(--wp--preset--color--cream); }
.cpc-footer__line { font-family: var(--wp--preset--font-family--display); font-weight: 700; }
.cpc-footer .cpc-newsletter__title,
.cpc-footer .cpc-form-wrap .cpc-newsletter__title { font-size: var(--wp--preset--font-size--large); margin-bottom: 0.25rem; }
/* The Punch List signup is its own section under the storefront line: a thin
   divider and a heading styled like the other footer column headings. */
.cpc-footer__signup {
	border-top: 1px solid rgb(244 240 231 / 0.3);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
}

/* Newsletter signup: one email field and a button on one line where there is room. */
.cpc-form--newsletter { align-items: end; gap: 0.75rem; grid-template-columns: minmax(0, 1fr) auto; max-width: 32rem; }
.cpc-form--newsletter .cpc-form__fineprint { grid-column: 1 / -1; }
@media (max-width: 420px) {
	.cpc-form--newsletter { grid-template-columns: 1fr; }
}

/* Form messages stay readable on navy. */
.has-navy-background-color .cpc-field__error,
.has-navy-background-color .cpc-error-summary a,
.has-navy-background-color .cpc-error-summary h3 { color: #FFC9C2; }
.has-navy-background-color .cpc-error-summary { border-color: #FFC9C2; }
.has-navy-background-color .cpc-field.has-error input { border-color: #FFC9C2; }
.has-navy-background-color .cpc-confirmation { background: transparent; color: inherit; padding: 0; border-top: 0; }
.has-navy-background-color .cpc-confirmation__title { color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--large); }

/* Section headings inside narrow columns. */
.wp-block-column:not(:only-child) .cpc-section__heading {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Media. */
.wp-block-post-featured-image img { border-radius: var(--wp--custom--radius--card); }

/* WooCommerce blocks pick up the same button and focus treatment. */
.woocommerce .button,
.wc-block-components-button:not(.is-link) {
	border-radius: var(--wp--custom--radius--button);
}

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