/*
Theme Name: DomeCheck
Theme URI: https://domecheck.com
Author: DomeCheck
Description: Independent reviews of pool and spa enclosures, built in the "Clearspan" design language. Block theme.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: domecheck
*/

/* Tokens live in theme.json. This file carries what theme.json has no
   vocabulary for: the layout, the Clearspan components and the motion. */

:root {
	--dc-ink: var(--wp--preset--color--ink);
	--dc-mist: var(--wp--preset--color--mist);
	--dc-white: var(--wp--preset--color--white);
	--dc-panel: var(--wp--preset--color--panel);
	--dc-aqua: var(--wp--preset--color--aqua);
	--dc-sun: var(--wp--preset--color--sun);
	--dc-muted: var(--wp--preset--color--muted);
	--dc-line: var(--wp--custom--line);
	--dc-r-card: var(--wp--custom--radius--card);
	--dc-r-ctl: var(--wp--custom--radius--control);
	--dc-gutter: var(--wp--custom--gutter);
	--dc-ease: var(--wp--custom--ease);
	--dc-shadow: var(--wp--preset--shadow--card);
	--dc-shadow-lift: var(--wp--preset--shadow--lift);
	--dc-mono: var(--wp--preset--font-family--mono);
	--dc-grid: linear-gradient(rgba(11, 127, 147, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 127, 147, 0.11) 1px, transparent 1px);
	color-scheme: light;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

/* WordPress puts a block-gap margin between header, main and footer. The
   hero has to sit straight under the nav. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ----------------------------------------------------------------- layout */

.dc-wrap {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--dc-gutter);
}

.dc-section {
	padding-block: var(--wp--preset--spacing--60);
}

.dc-section--tight {
	padding-top: 0;
}

.dc-section--white {
	background: var(--dc-white);
	border-block: 1px solid var(--dc-line);
}

.dc-section h2 {
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
}

.dc-section h3 {
	margin: 0;
}

.dc-section p {
	margin: 0;
}

.dc-intro {
	margin-top: 14px !important;
	max-width: 58ch;
	color: var(--dc-muted);
	font-size: var(--wp--preset--font-size--lead);
}

.dc-label {
	font-family: var(--dc-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dc-muted);
	margin: 0;
}

.dc-muted {
	color: var(--dc-muted);
}

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

/* ---------------------------------------------------------------- buttons */

.dc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: var(--dc-r-ctl);
	border: 1px solid var(--dc-ink);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	color: var(--dc-ink);
	transition: transform 0.18s var(--dc-ease), box-shadow 0.18s var(--dc-ease), background-color 0.18s ease;
}

.dc-btn--primary {
	background: var(--dc-sun);
}

.dc-btn--ghost {
	background: transparent;
}

.dc-btn:hover {
	color: var(--dc-ink);
	transform: translateY(-2px);
	box-shadow: 0 10px 18px -12px rgba(11, 44, 54, 0.55);
}

.dc-btn--ghost:hover {
	background: var(--dc-white);
}

.dc-btn:active {
	transform: translateY(1px);
	box-shadow: none;
}

.dc-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

:where(a, button, input, summary):focus-visible {
	outline: 3px solid var(--dc-aqua);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------ header */

.dc-skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 30;
	background: var(--dc-ink);
	color: var(--dc-white);
	padding: 12px 16px;
	border-radius: var(--dc-r-ctl);
}

.dc-skip-link:focus {
	left: 8px;
}

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
}

.dc-nav {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(160%) blur(10px);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--dc-line);
	transition: box-shadow 0.25s ease;
}

.dc-nav[data-stuck="true"] {
	box-shadow: 0 10px 24px -20px rgba(11, 44, 54, 0.6);
}

.dc-nav__bar {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 68px;
}

.dc-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	text-decoration: none;
	color: var(--dc-ink);
	font-weight: 800;
	letter-spacing: -0.03em;
	font-size: 1.45rem;
	line-height: 1;
}

.dc-logo:hover {
	color: var(--dc-ink);
}

.dc-logo svg {
	width: 30px;
	height: 30px;
	flex: none;
}

.dc-logo .dc-logo__tick {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.dc-logo:hover .dc-logo__tick {
	animation: dc-draw 0.5s var(--dc-ease) both;
}

.dc-nav__links {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-left: auto;
}

.dc-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--dc-ink);
	text-decoration: none;
	font-size: 0.98rem;
}

.dc-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 2px;
	background: var(--dc-aqua);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--dc-ease);
}

.dc-nav__link:hover::after,
.dc-nav__link[aria-current="page"]::after {
	transform: scaleX(1);
}

.dc-nav__burger {
	display: none;
	margin-left: auto;
	width: 48px;
	height: 48px;
	border: 1px solid var(--dc-ink);
	border-radius: var(--dc-r-ctl);
	background: var(--dc-white);
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: 0;
}

.dc-nav__burger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--dc-ink);
	transition: transform 0.25s var(--dc-ease), opacity 0.2s ease;
}

.dc-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dc-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dc-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The drawer opens by animating a grid row from 0fr to 1fr, so its height
   never has to be measured in script. */
.dc-nav__drawer {
	display: none;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s var(--dc-ease);
	border-top: 1px solid transparent;
}

.dc-nav__drawer > div {
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0.35s;
}

.dc-nav__drawer[data-open="true"] {
	grid-template-rows: 1fr;
	border-top-color: var(--dc-line);
}

.dc-nav__drawer[data-open="true"] > div {
	visibility: visible;
}

.dc-nav__drawer a:not(.dc-btn) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 52px;
	color: var(--dc-ink);
	text-decoration: none;
	font-weight: 700;
	border-bottom: 1px solid var(--dc-line);
}

.dc-nav__drawer .dc-btn {
	margin-block: 16px;
	width: 100%;
}

/* The one breakpoint: below 860px the link row becomes the drawer. */
@media (max-width: 859px) {
	.dc-nav__links { display: none; }
	.dc-nav__burger { display: flex; }
	.dc-nav__drawer { display: grid; }
}

/* -------------------------------------------------------------------- hero */

.dc-hero {
	padding-block: clamp(28px, 5vw, 64px);
}

.dc-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.dc-hero h1 {
	margin: 0;
	text-wrap: balance;
}

.dc-hero h1 em {
	font-style: normal;
	color: var(--dc-aqua);
}

.dc-lead {
	margin: 22px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--dc-muted);
	max-width: 34ch;
}

.dc-hero .dc-btn-row {
	margin-top: 26px;
}

/* The render sits on a blueprint panel and overhangs it a little, which is
   what gives the hero its depth. */
.dc-hero__art {
	position: relative;
	margin: 0;
	perspective: 1200px;
}

.dc-hero__panel {
	position: absolute;
	inset: 12% 0 6% 6%;
	background-color: var(--dc-panel);
	background-image: var(--dc-grid);
	background-size: 24px 24px;
	border: 1px solid var(--dc-line);
	border-radius: var(--dc-r-card);
	box-shadow: var(--dc-shadow);
}

.dc-hero__float {
	position: relative;
	transform: rotateX(var(--dc-tilt-x, 0deg)) rotateY(var(--dc-tilt-y, 0deg));
	transition: transform 0.4s var(--dc-ease);
	will-change: transform;
}

.dc-hero__float img {
	display: block;
	width: 100%;
	filter: drop-shadow(0 26px 22px rgba(11, 44, 54, 0.22));
}

.dc-hero__art figcaption {
	position: relative;
	margin-top: 6px;
	padding-left: 8%;
}

/* ------------------------------------------------------------------- cards */

.dc-card {
	background: var(--dc-white);
	border: 1px solid var(--dc-line);
	border-radius: var(--dc-r-card);
	box-shadow: var(--dc-shadow);
	padding: clamp(18px, 2.6vw, 30px);
}

.dc-card--hover {
	transition: transform 0.3s var(--dc-ease), box-shadow 0.3s var(--dc-ease);
}

.dc-card--hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--dc-shadow-lift);
}

/* ------------------------------------------------------------------- facts */

.dc-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(18px, 3vw, 40px);
}

.dc-fact {
	border-left: 3px solid var(--dc-aqua);
	padding-left: 18px;
}

.dc-fact__num {
	font-size: var(--wp--preset--font-size--numeral);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1;
}

.dc-fact p {
	margin-top: 8px;
	max-width: 26ch;
	color: var(--dc-muted);
}

/* ------------------------------------------------------------------ prices */

.dc-prices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.dc-price-line {
	display: grid;
	gap: 2px;
	padding-block: 14px;
}

.dc-price-line + .dc-price-line {
	border-top: 1px solid var(--dc-line);
}

.dc-price {
	font-weight: 800;
	font-size: clamp(1.45rem, 2.8vw, 1.95rem);
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.dc-ranges {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-top: 26px;
}

.dc-range {
	background: var(--dc-white);
	border: 1px solid var(--dc-line);
	border-radius: var(--dc-r-card);
	padding: 14px 16px;
}

.dc-range b {
	display: block;
	margin-top: 4px;
	font-size: 1.15rem;
	letter-spacing: -0.02em;
}

.dc-source {
	margin-top: 14px !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--dc-muted);
}

/* ------------------------------------------------------------------- types */

.dc-types {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2.4vw, 26px);
	margin-top: clamp(24px, 4vw, 40px);
}

.dc-type {
	flex: 5 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

.dc-type--wide {
	flex: 7 1 520px;
}

.dc-type__art {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex: 1;
	min-height: 200px;
	padding: clamp(16px, 2.5vw, 28px) clamp(16px, 2.5vw, 28px) 0;
	background-color: var(--dc-panel);
	background-image: var(--dc-grid);
	background-size: 24px 24px;
	border-bottom: 1px solid var(--dc-line);
}

.dc-type__art img {
	display: block;
	width: auto;
	max-width: min(100%, 420px);
	max-height: 250px;
	margin-bottom: 14px;
	filter: drop-shadow(0 16px 14px rgba(11, 44, 54, 0.18));
	transition: transform 0.5s var(--dc-ease);
}

.dc-type:hover .dc-type__art img {
	transform: translateY(-6px) scale(1.02);
}

.dc-type__body {
	padding: clamp(16px, 2.2vw, 24px);
}

.dc-type__body p {
	margin-top: 6px;
	color: var(--dc-muted);
}

.dc-type__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 12px !important;
}

/* ----------------------------------------------------------------- pillars */

.dc-pillars {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2.4vw, 26px);
	margin-top: clamp(24px, 4vw, 40px);
}

.dc-pillar {
	flex: 1 1 280px;
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 16px;
	align-items: start;
}

.dc-pillar--lead {
	flex: 1 1 420px;
	grid-template-columns: 110px 1fr;
	background-color: var(--dc-panel);
	background-image: var(--dc-grid);
	background-size: 24px 24px;
}

.dc-pillar img {
	display: block;
	width: 100%;
	filter: drop-shadow(0 10px 10px rgba(11, 44, 54, 0.18));
	transition: transform 0.5s var(--dc-ease);
}

.dc-pillar:hover img {
	transform: translateY(-4px) rotate(-3deg);
}

.dc-pillar p {
	margin-top: 6px;
	color: var(--dc-muted);
}

/* ----------------------------------------------------------- scale drawing */

.dc-drawing {
	margin: clamp(24px, 4vw, 40px) 0 0;
	background-color: var(--dc-panel);
	background-image: var(--dc-grid);
	background-size: 24px 24px;
	border: 1px solid var(--dc-line);
	border-radius: var(--dc-r-card);
	box-shadow: var(--dc-shadow);
	padding: clamp(12px, 2.4vw, 30px);
}

.dc-drawing svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 460px;
}

.dc-dw-ground { stroke: var(--dc-ink); stroke-width: 1.5; }
.dc-dw-pool { fill: none; stroke: var(--dc-ink); stroke-width: 1.5; }
.dc-dw-water { fill: var(--dc-aqua); opacity: 0.2; }
.dc-dw-arc { fill: none; stroke: var(--dc-ink); stroke-width: 1.6; stroke-linecap: round; }
.dc-dw-arc--mid { stroke: var(--dc-muted); }
.dc-dw-arc--hi { stroke: var(--dc-aqua); stroke-width: 2.8; }
.dc-dw-fig { fill: none; stroke: var(--dc-ink); stroke-width: 1.6; stroke-linecap: round; }
.dc-dw-dim { stroke: var(--dc-muted); stroke-width: 1; }
.dc-dw-text { font-family: var(--dc-mono); font-size: 11px; fill: var(--dc-ink); letter-spacing: 0.04em; }

.dc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 16px;
}

.dc-legend span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.dc-legend i {
	display: block;
	width: 26px;
	height: 0;
	border-top: 2px solid var(--dc-ink);
}

.dc-legend i.is-mid { border-color: var(--dc-muted); }
.dc-legend i.is-hi { border-color: var(--dc-aqua); border-top-width: 3px; }

/* ----------------------------------------------------------------- honesty */

.dc-honest {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(22px, 4vw, 56px);
}

.dc-honest__lead {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.12;
	text-wrap: balance;
}

.dc-honest__lead em {
	font-style: normal;
	color: var(--dc-aqua);
}

.dc-honest__notes {
	display: grid;
	gap: 20px;
}

.dc-honest__notes p {
	margin-top: 4px;
	color: var(--dc-muted);
}

/* ------------------------------------------------------------------ footer */

.dc-footer {
	padding-block: clamp(28px, 5vw, 48px);
	font-size: var(--wp--preset--font-size--small);
}

.dc-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 48px;
	justify-content: space-between;
	align-items: flex-start;
}

.dc-footer p {
	margin: 12px 0 0;
	max-width: 46ch;
	color: var(--dc-muted);
}

.dc-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
}

.dc-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--dc-ink);
}

/* ------------------------------------------------ page and article content */

.dc-prose {
	padding: clamp(32px, 6vw, 72px) var(--dc-gutter) var(--wp--preset--spacing--60);
}

.dc-prose h1 {
	text-wrap: balance;
}

.dc-prose :where(h2) {
	margin-top: 1.8em;
}

.dc-prose :where(h3) {
	margin-top: 1.5em;
}

.dc-prose :where(table) {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.dc-prose :where(th, td) {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--dc-line);
}

.dc-prose :where(th) {
	font-family: var(--dc-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dc-muted);
	border-bottom-color: var(--dc-ink);
}

.dc-research-note {
	border-left: 4px solid var(--dc-aqua);
	padding: 4px 0 4px 14px;
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------------ motion */

@keyframes dc-draw {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

@keyframes dc-bob {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -8px; }
}

@media (prefers-reduced-motion: no-preference) {
	/* Cross-page fades in browsers that support cross-document transitions. */
	@view-transition {
		navigation: auto;
	}

	.dc-hero__float img {
		animation: dc-bob 7s ease-in-out infinite;
	}

	/* Reveal on scroll. Only hidden when script is running, so a visitor
	   without JavaScript sees the whole page. */
	.js .dc-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.7s var(--dc-ease), transform 0.7s var(--dc-ease);
		transition-delay: calc(var(--i, 0) * 70ms);
	}

	.js .dc-reveal.is-in {
		opacity: 1;
		transform: none;
	}

	/* The scale drawing draws itself the first time it scrolls into view. */
	.js .dc-drawing .dc-dw-arc {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
	}

	.js .dc-drawing.is-in .dc-dw-arc {
		animation: dc-draw 1.3s var(--dc-ease) forwards;
		animation-delay: calc(var(--i, 0) * 260ms);
	}

	.js .dc-drawing .dc-dw-late {
		opacity: 0;
		transition: opacity 0.6s ease 0.9s;
	}

	.js .dc-drawing.is-in .dc-dw-late {
		opacity: 1;
	}
}

@media print {
	.js .dc-reveal,
	.js .dc-drawing .dc-dw-late {
		opacity: 1 !important;
		transform: none !important;
	}

	.js .dc-drawing .dc-dw-arc {
		stroke-dashoffset: 0 !important;
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}