/*
Theme Name: REX Child
Theme URI: https://replacementexpertsaz.com
Description: Child theme of Twenty Twenty-Five for Replacement Experts LLC. Brand tokens derived from the REX logo; structure follows the REX SEO Plan.
Author: Smiling Bear
Template: twentytwentyfive
Version: 0.8.0
Requires at least: 6.7
Requires PHP: 8.0
Text Domain: rex-child
*/

:root {
	--rex-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--rex-shadow: 0 2px 12px rgba(7, 35, 50, 0.10);
	--rex-shadow-lift: 0 18px 40px rgba(7, 35, 50, 0.20);
	--rex-radius: 14px;
}

/* ---------- Browser surfaces ---------- */

::selection {
	background: var(--wp--preset--color--rex-amber);
	color: var(--wp--preset--color--rex-navy);
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--rex-amber);
	outline-offset: 2px;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1.5px;
}

/* Link colors on dark and red bands — the global red link fails contrast there */
.has-rex-navy-background-color a {
	color: var(--wp--preset--color--rex-amber);
}

.has-rex-navy-background-color a:hover {
	color: var(--wp--preset--color--base);
}

.has-rex-red-background-color a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--base);
}

/* ---------- Sticky header + brand lockup ---------- */

/* WP wraps the header part in header.wp-block-template-part, which is exactly the
   header's own height — sticky must sit on the wrapper, not the inner group. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
}

.rex-header {
	box-shadow: 0 2px 14px rgba(7, 35, 50, 0.08);
}

.rex-brand {
	gap: 0.75rem;
}

.rex-brand .wp-block-site-logo img {
	height: 52px;
	width: auto;
}

.rex-brand .wp-block-site-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
}

.rex-brand .wp-block-site-title a {
	color: var(--wp--preset--color--rex-navy);
	text-decoration: none;
}

.rex-brand .wp-block-site-title a:hover {
	color: var(--wp--preset--color--rex-red);
}

.rex-header-contact {
	gap: 1.25rem;
}

.rex-header-phone {
	margin: 0;
}

.rex-header-phone a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--rex-navy);
	text-decoration: none;
	white-space: nowrap;
}

.rex-header-phone a:hover {
	color: var(--wp--preset--color--rex-red);
}

/* Footer brand lockup */
.rex-footer-mark {
	margin: 0;
}

footer .rex-brand {
	gap: 0.85rem;
	margin-bottom: 0.75rem;
}

/* ---------- Type scale ---------- */

.rex-display {
	font-size: clamp(2.5rem, 6.2vw, 4.9rem);
	line-height: 1.02;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(7, 35, 50, 0.45);
}

.rex-display-2 {
	font-size: clamp(1.9rem, 4vw, 3.2rem);
	line-height: 1.08;
	text-wrap: balance;
}

h2.wp-block-heading {
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* ---------- Hero ---------- */

.rex-hero {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), 0 100%);
	padding-bottom: 7rem;
	overflow: hidden;
	/* Dark base while the photo decodes, so the first frame is never a pale scrim */
	background-color: var(--wp--preset--color--rex-navy);
}

/* Cinematic scrim: readable left column, fire alive on the right */
.rex-hero .wp-block-cover__background {
	background: linear-gradient(100deg, rgba(7, 35, 50, 0.90) 8%, rgba(7, 35, 50, 0.55) 48%, rgba(7, 35, 50, 0.12) 100%) !important;
	opacity: 1 !important;
}

/* Narrow screens: the horizontal scrim would bury the photo, so run it vertically —
   solid navy behind the text, fire glowing through below it */
@media (max-width: 781px) {
	.rex-hero .wp-block-cover__background {
		background: linear-gradient(170deg, rgba(7, 35, 50, 0.92) 0%, rgba(7, 35, 50, 0.60) 55%, rgba(7, 35, 50, 0.18) 100%) !important;
	}
}

@media (prefers-reduced-motion: no-preference) {

	/* Slow heat drift on the fire itself */
	.rex-hero .wp-block-cover__image-background {
		animation: rex-kenburns 26s var(--rex-ease) both;
	}

	@keyframes rex-kenburns {
		from { transform: scale(1.09) translateX(1.5%); }
		to { transform: scale(1) translateX(0); }
	}

	/* Staggered hero entrance */
	.rex-hero-inner > * {
		opacity: 0;
		transform: translateY(26px);
		animation: rex-rise 0.9s var(--rex-ease) forwards;
	}

	.rex-hero-inner > :nth-child(1) { animation-delay: 0.05s; }
	.rex-hero-inner > :nth-child(2) { animation-delay: 0.22s; }
	.rex-hero-inner > :nth-child(3) { animation-delay: 0.38s; }
	.rex-hero-inner > :nth-child(4) { animation-delay: 0.52s; }

	@keyframes rex-rise {
		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* ---------- Scroll reveals (JS adds .rex-js on <html>, IO adds .is-visible) ---------- */

@media (prefers-reduced-motion: no-preference) {

	.rex-js .rex-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.8s var(--rex-ease), transform 0.8s var(--rex-ease);
	}

	.rex-js .rex-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	/* Cards inside a stagger parent cascade in */
	.rex-js .rex-stagger > * {
		opacity: 0;
		transform: translateY(34px);
		transition: opacity 0.7s var(--rex-ease), transform 0.7s var(--rex-ease);
	}

	.rex-js .rex-stagger.is-visible > * {
		opacity: 1;
		transform: none;
	}

	.rex-js .rex-stagger.is-visible > :nth-child(2) { transition-delay: 0.12s; }
	.rex-js .rex-stagger.is-visible > :nth-child(3) { transition-delay: 0.24s; }

	/* Dark bands fade in place — no rise, so the hero entrance stays the only vertical move on load */
	.rex-js .rex-reveal-fade {
		opacity: 0;
		transition: opacity 1s var(--rex-ease);
	}

	.rex-js .rex-reveal-fade.is-visible {
		opacity: 1;
	}

	/* Images settle with a slight scale */
	.rex-js .rex-reveal-img {
		opacity: 0;
		transform: scale(0.96);
		transition: opacity 0.9s var(--rex-ease), transform 0.9s var(--rex-ease);
	}

	.rex-js .rex-reveal-img.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Question doors / linked cards ---------- */

.rex-doors {
	clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
	margin-top: -4.5rem !important;
	padding-top: 6rem !important;
	position: relative;
	z-index: 2;
}

.rex-door {
	position: relative;
	background: var(--wp--preset--color--base);
	border-radius: var(--rex-radius);
	padding: 2rem 1.75rem 1.75rem;
	box-shadow: var(--rex-shadow);
	transition: transform 0.3s var(--rex-ease), box-shadow 0.3s var(--rex-ease);
}

.rex-door:hover,
.rex-door:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--rex-shadow-lift);
}

.rex-door:focus-within {
	outline: 3px solid var(--wp--preset--color--rex-amber);
	outline-offset: 2px;
}

.rex-door h3 {
	line-height: 1.2;
}

/* Whole card is the tap target; link underline slides in on hover */
.rex-door .rex-door-link {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 3px;
	transition: background-size 0.35s var(--rex-ease);
}

.rex-door:hover .rex-door-link,
.rex-door:focus-within .rex-door-link {
	background-size: 100% 2px;
}

.rex-door .rex-door-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--rex-radius);
}

/* ---------- Inner-page hero band ---------- */

.rex-hero-band {
	position: relative;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
	background-image: radial-gradient(90rem 40rem at 110% 120%, rgba(201, 49, 34, 0.35), transparent 60%);
	padding-bottom: 5.5rem !important;
}

.rex-hero-band > * {
	position: relative;
	z-index: 1;
}

.rex-hero-band h1 {
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: 1.06;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.rex-breadcrumb {
	letter-spacing: 0.04em;
}

/* ---------- Statement band ---------- */

.rex-statement {
	clip-path: polygon(0 0, 100% 2.5rem, 100% 100%, 0 100%);
	padding-top: 6rem !important;
	background-image: radial-gradient(90rem 40rem at 110% 120%, rgba(201, 49, 34, 0.35), transparent 60%);
	position: relative;
	overflow: hidden;
}

.rex-statement > * {
	position: relative;
	z-index: 1;
}

/* Smoke rising across the full band. The plumes drift through a fixed
   turbulence field (filter on the outer group), so their edges curl and
   morph as they rise — that displacement is what makes them read as smoke
   rather than blurred circles. */
.rex-band-smoke {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	/* The constrained group caps child width at the content size and centers it;
	   this layer must cover the full band */
	max-width: none !important;
	margin: 0 !important;
}

.rex-band-smoke svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.rex-plume {
	opacity: 0.3;
}

@media (prefers-reduced-motion: no-preference) {

	.rex-plume {
		opacity: 0;
		animation: rex-plume-rise var(--dur, 20s) linear var(--del, 0s) infinite;
	}

	.rex-plume-1 { --dur: 19s; --del: 0s;   --sx: 60px;  --po: 0.50; --ry: -620px; }
	.rex-plume-2 { --dur: 24s; --del: -9s;  --sx: -50px; --po: 0.42; --ry: -660px; }
	.rex-plume-3 { --dur: 17s; --del: -4s;  --sx: 70px;  --po: 0.52; --ry: -600px; }
	.rex-plume-4 { --dur: 22s; --del: -14s; --sx: -60px; --po: 0.46; --ry: -640px; }
	.rex-plume-5 { --dur: 20s; --del: -7s;  --sx: 50px;  --po: 0.50; --ry: -620px; }

	/* Low haze that keeps the bottom of the band smoking edge to edge */
	.rex-plume-6 { --dur: 30s; --del: -12s; --sx: 40px;  --po: 0.30; --ry: -230px; }
	.rex-plume-7 { --dur: 26s; --del: -3s;  --sx: -40px; --po: 0.30; --ry: -210px; }

	@keyframes rex-plume-rise {
		0% {
			transform: translate(0, 70px) scale(0.85);
			opacity: 0;
		}

		10% {
			opacity: var(--po, 0.45);
		}

		60% {
			transform: translate(var(--sx, 40px), calc(var(--ry, -620px) * 0.55)) scale(1.1);
			opacity: calc(var(--po, 0.45) * 0.85);
		}

		100% {
			transform: translate(calc(var(--sx, 40px) * -0.5), var(--ry, -620px)) scale(1.3);
			opacity: 0;
		}
	}
}

/* ---------- Trust band ---------- */

.rex-trust {
	gap: 1rem 2.75rem;
}

.rex-trust p {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	position: relative;
}

.rex-trust p + p::before {
	content: "";
	position: absolute;
	left: -1.65rem;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: var(--wp--preset--color--rex-amber);
}

/* ---------- Location panels (navy, distinct from the white question doors) ---------- */

.rex-panel {
	position: relative;
	background: var(--wp--preset--color--rex-navy);
	background-image: radial-gradient(40rem 22rem at -10% 120%, rgba(201, 49, 34, 0.30), transparent 65%);
	border-radius: var(--rex-radius);
	padding: 2.25rem 2rem 2rem;
	color: var(--wp--preset--color--cream);
	box-shadow: var(--rex-shadow);
	transition: transform 0.3s var(--rex-ease), box-shadow 0.3s var(--rex-ease);
}

.rex-panel:hover,
.rex-panel:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--rex-shadow-lift);
}

.rex-panel:focus-within {
	outline: 3px solid var(--wp--preset--color--rex-amber);
	outline-offset: 2px;
}

.rex-panel h3 {
	color: var(--wp--preset--color--base);
}

.rex-panel .rex-door-link {
	color: var(--wp--preset--color--rex-amber);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 3px;
	transition: background-size 0.35s var(--rex-ease);
}

.rex-panel:hover .rex-door-link,
.rex-panel:focus-within .rex-door-link {
	background-size: 100% 2px;
}

.rex-panel .rex-door-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--rex-radius);
}

.rex-place h3 {
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

/* ---------- FAQ details ---------- */

.rex-faq .wp-block-details {
	border-bottom: 1px solid rgba(7, 35, 50, 0.15);
	padding: 1rem 0;
}

.rex-faq .wp-block-details summary {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--rex-navy);
	cursor: pointer;
	transition: color 0.2s ease-out;
}

.rex-faq .wp-block-details summary:hover {
	color: var(--wp--preset--color--rex-red);
}

.rex-faq .wp-block-details summary::marker {
	color: var(--wp--preset--color--rex-red);
}

.rex-faq .wp-block-details[open] summary {
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--rex-red);
}

@media (prefers-reduced-motion: no-preference) {
	.rex-faq .wp-block-details[open] > :not(summary) {
		animation: rex-faq-open 0.45s var(--rex-ease) both;
	}

	@keyframes rex-faq-open {
		from {
			opacity: 0;
			transform: translateY(-6px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* ---------- CTA band ---------- */

.rex-cta {
	clip-path: polygon(0 2rem, 100% 0, 100% 100%, 0 100%);
	padding-top: 5rem !important;
}

.rex-cta h2 {
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}

/* ---------- Hardwired figure ---------- */

.rex-figure img {
	box-shadow: var(--rex-shadow-lift);
}

/* Ambient smoke pauses while offscreen (rex.js toggles .is-running) */
.rex-js .rex-ambient:not(.is-running) .rex-plume {
	animation-play-state: paused;
}

/* ---------- Responsive tuning ---------- */

@media (max-width: 781px) {

	/* The sticky call bar owns the mobile CTA; a wrapped header button just doubles header height */
	header.wp-block-group .wp-block-buttons,
	.rex-header-phone {
		display: none;
	}

	.rex-brand .wp-block-site-logo img {
		height: 44px;
	}

	.rex-brand .wp-block-site-title {
		font-size: 1.05rem;
	}

	.rex-hero {
		padding-bottom: 5rem;
	}

	.rex-doors {
		margin-top: -3rem !important;
		padding-top: 4.5rem !important;
	}

	.rex-door {
		margin-bottom: 1rem;
	}

	.rex-trust {
		gap: 0.5rem 2rem;
	}

	/* 44px tap targets: hamburger/close (24px icons), footer + inline text links */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		padding: 10px;
		margin: -10px;
	}

	.wp-block-navigation__responsive-container-close {
		margin: 0;
	}

	p.has-small-font-size a:not(.wp-block-button__link) {
		display: inline-block;
		padding: 0.6rem 0;
	}
}

/* Mobile menu sheet: the parent theme's overlay is right-aligned 14px text with
   23px rows and no brand. Left-align, Poppins, 44px rows, submenu indented. The
   overlay sits above the sticky call bar, so the phone lives in the sheet too. */
.wp-block-navigation .wp-block-navigation-item.rex-nav-call {
	display: none;
}

@media (max-width: 781px) {
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 1.25rem 1.5rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 3rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		align-items: stretch !important;
		text-align: left;
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		min-height: 44px;
		padding: 0.6rem 0;
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 600;
		font-size: 1.2rem;
		line-height: 1.3;
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		padding-left: 1rem;
		margin-bottom: 0.25rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-weight: 500;
		font-size: 1.05rem;
		opacity: 0.85;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.rex-nav-call {
		display: block;
		margin-top: 1rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .rex-nav-call .wp-block-navigation-item__content {
		color: var(--wp--preset--color--rex-amber);
		border-bottom: 0;
	}
}

/* Sticky call bar — mobile only. Markup lives in parts/footer.html. */
.rex-sticky-call {
	display: none;
}

@media (max-width: 781px) {
	.rex-sticky-call {
		display: block;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 99;
		background: var(--wp--preset--color--rex-red);
		text-align: center;
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -4px 16px rgba(7, 35, 50, 0.25);
	}

	/* The whole bar is the link: 44px+ tap target */
	.rex-sticky-call a {
		display: block;
		padding: 0.8rem 1rem;
		color: var(--wp--preset--color--base);
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 600;
		text-decoration: none;
	}

	/* Keep page content from hiding behind the bar */
	body {
		padding-bottom: 3.25rem;
	}
}

/* ---------- Quick quote form (Contact Form 7, contact page) ---------- */

.rex-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.25rem;
}

.rex-field {
	margin: 0;
}

.rex-field-wide {
	grid-column: 1 / -1;
}

.rex-field label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--rex-navy);
}

.rex-opt {
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.rex-quote-form .wpcf7-form-control-wrap {
	display: block;
}

.rex-quote-form input[type="text"],
.rex-quote-form input[type="email"],
.rex-quote-form input[type="tel"],
.rex-quote-form input[type="number"],
.rex-quote-form input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 1rem;
	padding: 0.75rem 0.9rem;
	min-height: 48px;
	border: 1.5px solid rgba(7, 35, 50, 0.25);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.rex-quote-form input[type="file"] {
	padding: 0.6rem 0.9rem;
	background: var(--wp--preset--color--cream);
}

.rex-quote-form input:focus-visible {
	border-color: var(--wp--preset--color--rex-navy);
	outline: 3px solid var(--wp--preset--color--rex-amber);
	outline-offset: 1px;
}

.rex-quote-form .wpcf7-not-valid {
	border-color: var(--wp--preset--color--rex-red);
}

.rex-quote-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--rex-red);
}

.rex-form-actions {
	margin: 1.5rem 0 0.5rem;
}

.rex-quote-form .wpcf7-submit {
	background: var(--wp--preset--color--rex-red);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.05rem;
	border: 0;
	border-radius: 10px;
	padding: 0.9rem 1.6rem;
	min-height: 48px;
	cursor: pointer;
}

.rex-quote-form .wpcf7-submit:hover {
	background: var(--wp--preset--color--rex-navy);
}

.rex-quote-form .wpcf7-spinner {
	margin-left: 0.75rem;
}

.rex-form-note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.wpcf7 form.rex-quote-form.wpcf7-form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.1rem;
	border: 1.5px solid rgba(7, 35, 50, 0.25);
	border-radius: 10px;
	background: var(--wp--preset--color--cream);
	font-weight: 600;
}

.wpcf7 form.rex-quote-form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--rex-amber);
}

.wpcf7 form.rex-quote-form.invalid .wpcf7-response-output,
.wpcf7 form.rex-quote-form.failed .wpcf7-response-output,
.wpcf7 form.rex-quote-form.spam .wpcf7-response-output {
	border-color: var(--wp--preset--color--rex-red);
}

@media (max-width: 600px) {
	.rex-form-grid {
		grid-template-columns: 1fr;
	}

	.rex-quote-form .wpcf7-submit {
		width: 100%;
	}
}