/*
Theme Name: Backflow Prevention of New York
Theme URI: https://github.com/cogent-analytics/backflow-theme
Author: Cogent Analytics Marketing
Author URI: https://cogentanalytics.com
Description: Block theme starting point for every Cogent Analytics client marketing site. A generalization of the designer's "HZ Global Design System v2.0" — brand tokens live in theme.json, canonical sections ship as /patterns, and interactive components come from the cogent-blocks plugin. No build step, no dependencies, no JavaScript in the theme itself.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: backflow-theme
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, custom-menu, accessibility-ready
*/

/*
 * theme.json carries all design tokens, layout, and block styling.
 * This stylesheet holds ONLY the handful of things theme.json cannot express:
 * accessibility scaffolding, the sticky-header behaviour, background-aware footer
 * links, and the reduced-motion baseline. There is deliberately no JavaScript.
 */

/* --- Accessibility: skip link + screen-reader-only text --------------------- */
.skip-link.screen-reader-text {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--preset--shadow--md);
	clip-path: inset(50%);
	height: 1px;
	left: 0.5rem;
	overflow: hidden;
	padding: 0.75rem 1rem;
	position: absolute;
	top: 0.5rem;
	width: 1px;
	z-index: 999999;
}

.skip-link.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
}

.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;
}

/* --- Visible focus on everything interactive (kit-wide a11y baseline) -------- *
 * Generalizes Horizon's :focus-visible ring. cogent-blocks components carry
 * their own focus tokens; this covers core blocks (links, buttons, nav, inputs). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item a:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

/* --- No white gaps between the page regions --------------------------------- *
 * The root layout applies blockGap between .wp-site-blocks children, leaving a
 * white strip above the footer (and below the header). Marketing sections butt
 * straight against the header and footer, so zero those seams. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* --- Sticky header ---------------------------------------------------------- *
 * The header template part is a group with the class "cogent-header". */
.cogent-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--sm);
}

/* --- Footer: background-aware link colour ----------------------------------- *
 * theme.json links default to primary (navy); unreadable on the dark footer, so
 * recolour to surface here. The credit bar sits at the very bottom. */
.cogent-footer a:where(:not(.wp-block-button__link)) {
	color: var(--wp--preset--color--surface);
	text-decoration-color: rgba(255, 255, 255, 0.45);
}

.cogent-footer a:where(:not(.wp-block-button__link)):hover,
.cogent-footer a:where(:not(.wp-block-button__link)):focus {
	color: var(--wp--preset--color--accent);
	text-decoration-color: currentColor;
}

.cogent-credit-bar {
	font-size: var(--wp--preset--font-size--small);
}

/* --- cogent/accordion: brand-blue affordances ------------------------------ *
 * The accordion block keys its chevron, number badge, open-state tint and focus
 * ring off the `accent` token. On this brand accent is emergency red, reserved
 * for urgent CTAs — so remap the accordion's local accent to primary (blue).
 * Doubled class raises specificity above the block's own .cogent-accordion rule
 * so this wins no matter which stylesheet loads last. Tokens only. */
.cogent-accordion.cogent-accordion {
	--cogent-accent: var(--wp--preset--color--primary);
}

/* --- Check list ------------------------------------------------------------- *
 * Used for hazard-trigger and consultation lists. Custom marker so the checks
 * read as "included / applies", tinted with the brand blue. Marker is
 * decorative (::marker replaced) — the list text carries the meaning. */
.cogent-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cogent-check-list li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.6rem;
	line-height: 1.5;
}

.cogent-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.15rem;
	height: 1.15rem;
	background-color: currentColor;
	/* Inline check glyph via mask so it inherits the text colour (works on light
	   and dark bands alike). */
	-webkit-mask: no-repeat center / 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	mask: no-repeat center / 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	color: var(--wp--preset--color--primary);
	opacity: 0.95;
}

/* On dark bands (solid colour OR a dark cover) the text is white; match the check. */
.has-primary-background-color .cogent-check-list li::before,
.has-secondary-background-color .cogent-check-list li::before,
.wp-block-cover.is-dark .cogent-check-list li::before {
	color: var(--wp--preset--color--surface);
}

.cogent-check-list--center {
	width: fit-content;
	text-align: left;
	margin-inline: auto;
}

/* --- Cards: equal height across a row --------------------------------------- *
 * Column children stretch, but the card group needs to fill that height so a
 * row of cards with uneven copy lines up (repair band, services grid). */
.cogent-card {
	height: 100%;
}

/* --- Stat cards (Why Choose band, over the skyline photo) ------------------- *
 * Solid white cards so the credentials read clearly against the busy image.
 * Big number uses brand-bright (large text clears AA at 3:1); label is ink. */
.bpny-stat {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--lg);
}

.bpny-stat__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	color: var(--wp--preset--color--primary);
}

.bpny-stat__num {
	margin: 0;
	font-weight: 700;
	line-height: 1;
	font-size: clamp(3.25rem, 2.4rem + 3.2vw, 4.5rem);
	color: var(--wp--preset--color--brand-bright);
}

.bpny-stat__label {
	margin: 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--text);
}

/* --- Reduced-motion baseline ------------------------------------------------ *
 * The theme ships no animation, but honour the preference kit-wide so any hover
 * transition that lands later (or comes from core) is neutralized. cogent-blocks
 * repeats this guard per-component. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}