/* WordTenance block, pattern and content styles (front end and editor); theme.json presets only. */

/* ---------- Content layout (classic theme: the entry wrapper constrains root-level blocks) ---------- */
.entry > .entry-content > * {
	box-sizing: border-box;
}
.entry > .entry-content > :where(:not(.alignfull):not(.alignwide)) {
	/* Same formula as .wrap--content, so body text lines up with the title and comments. */
	max-width: calc(var(--wp--style--global--content-size, 760px) + 2 * var(--wp--preset--spacing--40));
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}
.entry > .entry-content > .alignwide {
	max-width: calc(var(--wp--style--global--wide-size, 1240px) + 2 * var(--wp--preset--spacing--40));
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}
.entry > .entry-content > .alignfull {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}
.entry > .entry-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}
.entry > .entry-content > .alignfull + .alignfull,
.entry > .entry-content > .wt-section + * {
	margin-block-start: 0;
}

/* Sections: full-bleed groups with a wide inner container. Rhythm (tokens in theme.json "custom"):
 * - section-space (56-128px) above and below; sections on the page background share one space, a
 *   band (background or stage) keeps its own inside. No outer margins.
 * - section-space-m (48-80px): page openers and the footer top.
 * - section-head-gap (32-56px): header (label, heading, lead; stacked at 1rem) to content. */
.wt-section {
	padding-block: var(--wp--custom--section-space);
	padding-inline: var(--wp--preset--spacing--40);
}
.wt-section.wt-hero {
	padding-block-start: var(--wp--custom--section-space-m);
}
.wt-section:not(.is-style-stage, .has-background) + .wt-section:not(.is-style-stage, .has-background, .is-style-glow) {
	padding-block-start: 0;
}
.entry-content > .wt-section:not(.is-style-stage, .has-background, .is-style-glow):last-child {
	padding-block-end: 0;
}
/* A glow section keeps its space above (taken from the section before) and below: glow room on both sides. */
.wt-section:not(.is-style-stage, .has-background):has(+ .is-style-glow:not(.has-background)) {
	padding-block-end: 0;
}
.wt-section > .alignwide,
.wt-section > .wt-inner {
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
}
.wt-section > * + * {
	margin-block-start: var(--wp--custom--section-head-gap);
}
.wt-section > .wp-block-group > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}
/* Text placed straight in a section (no header group) stacks like a header. */
.wt-section > :is(p, h1, h2, h3, h4, h5, h6) + :is(p, h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--wp--preset--spacing--40);
}
.wt-section > :is(p, h1, h2, h3, h4, h5, h6) + .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* ---------- Typography details ---------- */
:where(h1, h2, h3, h4, h5, h6) strong,
:where(h1, h2, h3, h4, h5, h6) b {
	font-weight: 750;
}
h1.has-huge-font-size {
	line-height: 0.98;
	letter-spacing: -0.045em;
}
h2.has-x-large-font-size,
h2.has-xx-large-font-size {
	line-height: 1.04;
	letter-spacing: -0.04em;
}
.is-style-lead {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.55;
}
/* Inline flow (not flex) so a long label wraps at word boundaries instead of breaking inside a word. */
.is-style-label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}
.is-style-label::after {
	content: "";
	display: inline-block;
	width: 3.5rem;
	height: 1px;
	margin-left: 0.875rem;
	vertical-align: middle;
	background: currentColor;
	opacity: 0.5;
}
.is-style-label strong {
	margin-right: 0.5rem;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	white-space: nowrap;
}

/* Marker-style highlight: the core "Highlight" format (<mark>) renders as a saffron underline band. */
mark.has-inline-color {
	background: linear-gradient(transparent 62%, color-mix(in srgb, var(--wp--preset--color--accent) 62%, transparent) 62% 92%, transparent 92%) !important;
	padding: 0 0.06em;
}

/* Placeholder slots: prices come from WooCommerce, facts need verification. */
.wt-slot {
	display: inline-block;
	margin: 0;
	padding: 0.35rem 0.8rem;
	border: 1.5px dashed currentColor;
	border-radius: 4px;
	font-size: 0.8125rem;
	line-height: 1.4;
	opacity: 0.9;
}
.wt-slot-box {
	padding: var(--wp--preset--spacing--40);
	border: 1.5px dashed var(--wp--preset--color--outline);
	border-radius: 8px;
	color: var(--wp--preset--color--muted);
}

/* ---------- Lists ---------- */
.wp-block-list.is-style-index {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--ink);
	counter-reset: wt-index;
}
.wp-block-list.is-style-index li {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	counter-increment: wt-index;
}
.wp-block-list.is-style-index li::before {
	content: "0" counter(wt-index);
	flex: 0 0 2rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}
.wp-block-list.is-style-index li a {
	flex: 1;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	text-decoration: none;
}
.wp-block-list.is-style-index li a::after {
	content: "→";
	color: var(--wp--preset--color--primary);
}
.wp-block-list.is-style-index li a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
}
/* Request an estimate: each step's title above its text. */
.wt-estimate__steps .is-style-index li {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: 0.2rem 0.75rem;
}
.wt-estimate__steps .is-style-index li::before {
	grid-row: span 2;
}
.wp-block-list.is-style-checks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.6rem;
}
.wp-block-list.is-style-checks li::before {
	content: "— ";
	color: var(--wp--preset--color--primary);
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid currentColor;
	padding: calc(0.95rem - 1px) calc(1.5rem - 1px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* ---------- Group styles ---------- */
.is-style-card {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
}
.is-style-card.wt-raised {
	border-top: 4px solid var(--wp--preset--color--primary);
	box-shadow: 0 30px 60px -30px rgba(16, 19, 31, 0.45);
}

/* Stage: midnight section with a refined drifting gradient. */
.is-style-stage {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--wp--preset--color--stage);
	color: var(--wp--preset--color--stage-contrast);
}
.is-style-stage::before,
.is-style-stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}
.is-style-stage::before {
	width: min(560px, 70vw);
	aspect-ratio: 1;
	right: -8%;
	top: -35%;
	filter: blur(30px);
	/* Decorative glow under text: dim enough for WCAG contrast (tests/e2e/25-gradient-contrast.spec.mjs). */
	background:
		radial-gradient(circle at 35% 35%, rgba(143, 184, 255, 0.4), rgba(143, 184, 255, 0.12) 42%, transparent 62%),
		radial-gradient(circle at 70% 70%, rgba(191, 64, 11, 0.85), transparent 58%);
	animation: wt-drift 18s ease-in-out infinite alternate;
}
.is-style-stage::after {
	width: min(640px, 80vw);
	aspect-ratio: 1;
	left: -14%;
	bottom: -55%;
	filter: blur(60px);
	background: radial-gradient(circle, rgba(242, 179, 61, 0.2), transparent 62%);
}
.js .is-style-stage:not(.is-in)::before {
	animation-play-state: paused;
}
@keyframes wt-drift {
	to {
		transform: translate(-120px, 90px) scale(1.12);
	}
}
.is-style-stage :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--stage-contrast);
}
.is-style-stage :where(p, li) {
	color: var(--wp--preset--color--stage-contrast);
}
.is-style-stage a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--stage-contrast);
	text-decoration-color: var(--wp--preset--color--accent);
}
.is-style-stage .is-style-label,
.is-style-stage .has-muted-color {
	color: var(--wp--preset--color--stage-muted);
}
.is-style-stage .is-style-label strong {
	color: var(--wp--preset--color--accent);
}
.is-style-stage .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--stage-contrast);
}
.is-style-stage .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--stage-contrast);
	color: var(--wp--preset--color--stage);
}
.is-style-stage .is-style-card {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	border-color: transparent;
}
.is-style-stage .is-style-card :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--ink);
}
.is-style-stage .is-style-card :where(p, li) {
	color: var(--wp--preset--color--ink-soft);
}
.is-style-stage .wt-slot {
	color: inherit;
}

/* Pointer glow: a soft highlight follows the pointer (set by theme.js; static without it). */
.is-style-glow {
	position: relative;
	overflow: hidden;
}
.is-style-glow::before {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	left: var(--wt-x, 50%);
	top: var(--wt-y, 50%);
	translate: -50% -50%;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(closest-side, rgba(191, 64, 11, 0.28), rgba(242, 179, 61, 0.12), transparent);
	transition: left 0.25s, top 0.25s;
}
.is-style-glow > * {
	position: relative;
	z-index: 1;
}

/* Bento: asymmetric tile grid (from direction B), square-ish and calm to match direction C. */
.is-style-bento {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: minmax(200px, auto);
	gap: 16px;
}
.is-style-bento > * {
	margin: 0 !important;
}
.is-style-bento-tile,
.is-style-bento-tile-wide,
.is-style-bento-tile-feature {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 1.75rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.is-style-bento-tile > *,
.is-style-bento-tile-wide > *,
.is-style-bento-tile-feature > * {
	margin: 0 !important;
}
.is-style-bento-tile {
	grid-column: span 2;
}
.is-style-bento-tile-wide {
	grid-column: span 3;
}
.is-style-bento-tile-feature {
	grid-column: span 4;
	grid-row: span 2;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(242, 179, 61, 0.45), transparent 60%),
		radial-gradient(100% 100% at 0% 100%, rgba(191, 64, 11, 0.16), transparent 65%),
		var(--wp--preset--color--surface);
}
.is-style-bento-tile:hover,
.is-style-bento-tile-wide:hover,
.is-style-bento-tile-feature:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 24px 40px -28px rgba(23, 23, 28, 0.45);
}
@media (max-width: 960px) {
	.is-style-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.is-style-bento-tile,
	.is-style-bento-tile-wide,
	.is-style-bento-tile-feature {
		grid-column: span 1;
		grid-row: auto;
	}
	.is-style-bento-tile-wide,
	.is-style-bento-tile-feature {
		grid-column: span 2;
	}
}
@media (max-width: 600px) {
	.is-style-bento {
		grid-template-columns: minmax(0, 1fr);
	}
	.is-style-bento-tile,
	.is-style-bento-tile-wide,
	.is-style-bento-tile-feature {
		grid-column: auto;
	}
}

/* ---------- Hero ---------- */
.wt-hero__cols {
	align-items: flex-end;
	gap: clamp(2rem, 5vw, 4rem);
}
.wt-hero .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ---------- Pattern building blocks ---------- */
.wt-center {
	text-align: center;
}
.wt-center .wp-block-buttons {
	justify-content: center;
}
.wt-center .is-style-lead {
	max-width: 34em;
	margin-inline: auto;
}
.wt-statement {
	margin: 0;
	max-width: 20em;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	line-height: 1.18;
	letter-spacing: -0.03em;
}
.wt-statement strong {
	font-weight: 700;
	color: #ffd28a;
}
.wt-hero__media {
	min-height: 22rem;
	align-items: flex-start;
	justify-content: flex-start;
}

/* Numbered editorial rows (services) */
.wt-rows {
	border-top: 1px solid var(--wp--preset--color--ink);
	counter-reset: wt-row;
}
.wt-row {
	display: grid !important;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: 0.25rem 0.75rem;
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	counter-increment: wt-row;
}
.wt-row::before {
	content: "0" counter(wt-row);
	grid-row: 1 / span 2;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.875rem;
	font-weight: 300;
	line-height: 1;
}
.wt-row > * {
	grid-column: 2;
	margin: 0 !important;
}

/* Numbered steps (process) */
.wt-steps {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	counter-reset: wt-step;
}
.wt-step {
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--ink);
	counter-increment: wt-step;
}
.wt-step::before {
	content: "0" counter(wt-step);
	display: block;
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.875rem;
	font-weight: 300;
	line-height: 1;
}
.wt-steps > * {
	margin: 0 !important;
}
.wt-step > * {
	margin-block: 0 0.5rem !important;
}
@media (max-width: 782px) {
	.wt-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Plan cards on the stage: the middle card is raised. */
.wt-plans {
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}
.wt-plans .is-style-card > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
.wt-plans .is-style-card.wt-raised {
	padding-block: calc(var(--wp--preset--spacing--40) + 1rem);
}
.wt-cta__cols {
	align-items: flex-end;
	gap: var(--wp--preset--spacing--50);
}

/* ---------- FAQ (core/details) ---------- */
.wp-block-details {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.wp-block-details > summary {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 650;
	letter-spacing: -0.015em;
}
.wp-block-details > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details > summary::after {
	content: "+";
	color: var(--wp--preset--color--primary);
	font-weight: 400;
}
.wp-block-details[open] > summary::after {
	content: "−";
}
.wp-block-details > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

/* ---------- Query loop cards ---------- */
.wp-block-post-template {
	list-style: none;
	padding: 0;
}
.wp-block-post-template .wp-block-post {
	min-width: 0;
	overflow-wrap: anywhere; /* Code names in excerpts (e.g. woocommerce_structured_data_product). */
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
}

/* ---------- Scroll reveals (JS only, never with reduced motion) ---------- */
.reveal {
	transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .reveal:not(.is-in) {
	opacity: 0;
	transform: translateY(18px);
}

/* Never hide content from print. */
@media print {
	.js .reveal:not(.is-in) {
		opacity: 1;
		transform: none;
	}
}

/* Reduced motion: stop everything that is not essential. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
	.js .reveal:not(.is-in) {
		opacity: 1;
		transform: none;
	}
}

/* ---------- M3 page sections ---------- */
/* Values: equal cards in an auto-fit grid (group grid layout). */
.wt-values > .is-style-card > * + * {
	margin-top: 0.5rem;
}
/* FAQ page: one group per topic. */
.wt-faq-group + .wt-faq-group {
	margin-top: var(--wp--preset--spacing--60);
}
/* Services listing intro (shop page content). */
.wt-shop-intro {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-bottom: var(--wp--preset--spacing--50);
}
/* HTML sitemap. */
.wt-sitemap .wp-block-list,
.wt-sitemap .wp-block-page-list,
.wt-sitemap .wp-block-latest-posts {
	padding-left: 1.1rem;
}
.wt-sitemap li + li {
	margin-top: 0.35rem;
}

/* Business details (core block wordtenance/business-details). */
.wt-business-details dl {
	display: grid;
	gap: 0.85rem;
	margin: var(--wp--preset--spacing--40) 0 0;
}
.wt-business-details dt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.wt-business-details dd {
	margin: 0.15rem 0 0;
}
.wt-business-details address {
	font-style: normal;
}
/* Contact form (core block wordtenance/contact-form). */
.wt-contact-form {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
}
.wt-contact-form--fallback p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}
/* Gravity Forms submit button: the theme's primary button (Ember pill with an arrow). */
.wt-contact-form .gform_wrapper .gform_footer :is(button, input)[type="submit"],
.wt-contact-form .gform_wrapper .gform_page_footer :is(button, input)[type="submit"] {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.75rem 1.75rem;
	border: 0;
	border-radius: 99px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.wt-contact-form .gform_wrapper .gform_footer button[type="submit"]::after {
	content: "→";
	transition: transform 0.2s ease;
}
.wt-contact-form .gform_wrapper .gform_footer :is(button, input)[type="submit"]:hover {
	background: var(--wp--preset--color--primary-strong);
}
.wt-contact-form .gform_wrapper .gform_footer button[type="submit"]:hover::after {
	transform: translateX(3px);
}
.wt-contact-form .gform_wrapper .gform_footer :is(button, input)[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
.wt-contact-form .gform_wrapper .gform_footer :is(button, input)[type="submit"]:disabled {
	cursor: wait;
	opacity: 0.7;
}
/* reCAPTCHA (Gravity Forms) is a fixed 304 × 78 px widget: scale it to fit 320 px screens. */
@media (max-width: 400px) {
	.wt-contact-form .ginput_recaptcha {
		height: 60px;
		transform: scale(0.77);
		transform-origin: 0 0;
	}
}