/*
Theme Name: Lights Up
Theme URI: https://www.lightsup-usa.com/
Author: Lights Up
Description: Native block theme for Lights Up — Christmas light installation. Built on core Gutenberg blocks, theme.json design tokens, and self-hosted variable fonts. No page builder required.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lightsup
Tags: block-theme, full-site-editing, business, one-column, custom-colors, custom-menu, block-patterns
*/

/* -------------------------------------------------------------------------
   theme.json carries the design tokens. This file holds only what tokens
   cannot express: motion, a few layout utilities, and print rules.
   ------------------------------------------------------------------------- */

/* Smooth in-page anchors (the site links to #form / #about from hero CTAs) */
html {
	scroll-behavior: smooth;
	/* keep sticky header from covering anchor targets */
	scroll-padding-top: 6rem;
}

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

/* Buttons and links get a consistent, token-driven transition */
.wp-element-button,
.wp-block-button__link,
a {
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------------------- */

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	display: block;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--card);
	text-decoration: none;
}

:where(a:focus-visible),
:where(button:focus-visible),
:where(summary:focus-visible),
:where(input:focus-visible),
:where(select:focus-visible),
:where(textarea:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Core Details block — used for the FAQ accordions (replaces the builder's
   accordion widget). Adds a rotating marker; everything else is theme.json.
   ------------------------------------------------------------------------- */

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.7em;
	height: 0.7em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.15em);
	transition: transform 200ms ease;
}

.wp-block-details[open] summary::after {
	transform: rotate(-135deg) translateY(-0.15em);
}

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

   Sticky, translucent, and sitting ON TOP of a hero cover rather than above
   it. Pages whose first block is not a cover keep the header in normal flow,
   so their content never slides underneath.
   ------------------------------------------------------------------------- */

:root {
	--lu-header-h: 88px;
}

@media (max-width: 781px) {
	:root { --lu-header-h: 68px; }
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* WordPress puts a block gap between header / main / footer. That gap is the
   white band under the header — remove it for the top-level layout only. */
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Pull the hero up under the translucent header. Scoped with :has() so it only
   applies when the page actually opens with a full-bleed cover. */
.wp-site-blocks > main:has(> .entry-content > .wp-block-cover:first-child) {
	margin-block-start: calc(-1 * var(--lu-header-h));
}

.lu-header-sticky {
	/* Owned here rather than inline on the block, because the header has two
	   states and a stylesheet rule cannot cleanly override an inline style. */
	background-color: rgba(0, 0, 0, 0.27);
	min-height: var(--lu-header-h);
	display: flex;
	align-items: center;
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	transition: background-color 220ms ease, box-shadow 220ms ease;
}

.lu-header-sticky > .wp-block-group { width: 100%; }

/* A touch more contrast once the page scrolls away from the hero. */
.lu-header-sticky.is-scrolled {
	background-color: rgba(0, 0, 0, 0.72);
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

.lu-header-sticky .wp-block-site-logo img {
	height: calc(var(--lu-header-h) - 32px);
	width: auto;
	max-width: none;
}

@media (max-width: 781px) {
	.lu-header-sticky .wp-block-site-logo img { height: calc(var(--lu-header-h) - 20px); }
}

/* -------------------------------------------------------------------------
   Carousel — a .lu-carousel wrapper around a core Columns block. Without JS
   it degrades to the normal responsive column grid.
   ------------------------------------------------------------------------- */

.lu-carousel.is-active .wp-block-columns {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: var(--wp--preset--spacing--40);
	scrollbar-width: none;
	padding-bottom: 0.5rem;
}

.lu-carousel.is-active .wp-block-columns::-webkit-scrollbar { display: none; }

.lu-carousel.is-active .wp-block-column {
	flex: 0 0 auto;
	scroll-snap-align: center;
	width: min(360px, 82vw);
}

.lu-carousel__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--30);
}

.lu-carousel__dot {
	appearance: none;
	border: 0;
	padding: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--border);
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease;
}

.lu-carousel__dot.is-active {
	background: var(--wp--preset--color--primary);
	transform: scale(1.35);
}

.lu-carousel__arrow {
	appearance: none;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lu-carousel__arrow:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
   Lottie
   ------------------------------------------------------------------------- */

/* The animation is square. Reserving the box up front does two jobs: it stops
   the page shifting when the SVG mounts, and it gives IntersectionObserver a
   non-zero area to detect — a zero-height target never fires, so the player
   would never load. */
.lu-lottie {
	line-height: 0;
	aspect-ratio: 1 / 1;
}

.lu-lottie svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------------------
   Utility: overlay text legibility on image-background covers
   ------------------------------------------------------------------------- */

.lu-text-shadow,
.lu-text-shadow :where(h1, h2, h3, h4, p) {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* -------------------------------------------------------------------------
   Gravity Forms — inherit theme tokens instead of plugin defaults
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Print
   ------------------------------------------------------------------------- */

@media print {
	.wp-block-navigation,
	.wp-block-template-part[class*="footer"],
	.lu-header-sticky { display: none !important; }
	body { color: #000; background: #fff; }
}

/* -------------------------------------------------------------------------
   Tabs — a .lu-tabs wrapper of core Details blocks. Accordion on mobile,
   tablist on desktop (see assets/js/enhance.js). Unstyled and fully usable
   if JS never runs.
   ------------------------------------------------------------------------- */

.lu-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.lu-tabs__tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	padding: 0.75rem 1.25rem;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	transition: color 180ms ease, border-color 180ms ease;
}

.lu-tabs__tab:hover { color: var(--wp--preset--color--primary); }

.lu-tabs__tab.is-active {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

/* In tab mode the <summary> is redundant — the tab button replaces it. */
.lu-tabs.is-tabbed .wp-block-details > summary { display: none; }
.lu-tabs.is-tabbed .wp-block-details {
	border-bottom: 0;
	padding-top: 0;
}

/* -------------------------------------------------------------------------
   Countdown block
   ------------------------------------------------------------------------- */

.lu-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.75rem, 2vw, 1.75rem);
	justify-content: center;
	align-items: flex-start;
}

.lu-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 4.5em;
}

.lu-countdown__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--secondary);
	font-variant-numeric: tabular-nums;
}

.lu-countdown__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin-top: 0.4em;
}

.lu-countdown__done {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
   "We Can Light Up Your World" — green panel, decorative light string, and
   the yellow icon tiles that act as tabs.
   ------------------------------------------------------------------------- */

.lu-lightup {
	position: relative;
	overflow: hidden;
}

/* Decorative hand-drawn light string, top-left. Purely ornamental. */
.lu-lightup::before {
	content: "";
	position: absolute;
	top: -4rem;
	left: -6rem;
	width: min(26rem, 32%);
	aspect-ratio: 1 / 1;
	background: url("assets/christmas-light-icons/christmas-light-string.svg") no-repeat top left;
	background-size: contain;
	opacity: 0.9;
	pointer-events: none;
}

.lu-lightup__intro { position: relative; z-index: 1; }

/* Push the title clear of the light string artwork. */
@media (min-width: 782px) {
	.lu-lightup__intro { padding-top: 0; }
	.lu-lightup__panel { border-left: 1px solid rgba(255, 255, 255, 0.45); padding-left: var(--wp--preset--spacing--50); }
}

.lu-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.28em;
	margin-bottom: 0.75rem;
}

/* --- the tiles ---------------------------------------------------------- */

.lu-lightup .lu-tabs__list {
	border-bottom: 0;
	gap: 0.75rem;
	justify-content: flex-start;
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.lu-lightup .lu-tabs__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 7.5rem;
	height: 7.5rem;
	padding: 0.75rem 0.5rem;
	border: 0;
	border-radius: 14px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.lu-lightup .lu-tabs__tab:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.lu-lightup .lu-tabs__tab.is-active {
	background: var(--wp--preset--color--white);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.lu-tabs__icon {
	width: 2.5rem;
	height: 2.5rem;
	display: block;
}

.lu-lightup .lu-tabs__tab .lu-tabs__label { display: block; }

/* Accordion fallback (mobile / no JS): keep the icon beside the label. */
.lu-lightup .wp-block-details > summary {
	color: #fff;
	gap: 0.75rem;
	justify-content: flex-start;
}

.lu-lightup .wp-block-details > summary .lu-tabs__icon {
	width: 2rem;
	height: 2rem;
	background: var(--wp--preset--color--accent-2);
	border-radius: 8px;
	padding: 4px;
}

.lu-lightup .wp-block-details { border-bottom-color: rgba(255, 255, 255, 0.35); }
.lu-lightup .wp-block-details > summary::after { margin-left: auto; }

/* -------------------------------------------------------------------------
   Card icons — used on the three-step process and the Why Use carousel.
   ------------------------------------------------------------------------- */

.lu-card__icon {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--cream);
	border: 1px solid rgba(0,0,0,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	transition: background-color 260ms ease, transform 260ms ease;
}

.lu-card__icon .lu-icon {
	width: 2rem;
	height: 2rem;
	transition: transform 260ms ease, filter 260ms ease;
}

/* Hover animation: the disc fills with brand green and the glyph lifts. */
.wp-block-column:hover .lu-card__icon,
.lu-carousel .wp-block-column:hover .lu-card__icon {
	background: var(--wp--preset--color--primary);
	transform: translateY(-3px) rotate(-6deg);
}

.wp-block-column:hover .lu-card__icon .lu-icon {
	transform: scale(1.12) rotate(6deg);
	filter: invert(1) brightness(2);
}

@media (prefers-reduced-motion: reduce) {
	.lu-card__icon,
	.lu-card__icon .lu-icon,
	.lu-lightup .lu-tabs__tab { transition: none; }

	.wp-block-column:hover .lu-card__icon,
	.wp-block-column:hover .lu-card__icon .lu-icon,
	.lu-lightup .lu-tabs__tab:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   "Serving Las Vegas…" — checklist, founder credit, contact row, and the
   photo/stat collage with the looping ornament clip.
   ------------------------------------------------------------------------- */

.lu-serving {
	position: relative;
	background-color: var(--wp--preset--color--cream);
}

/* Faint blueprint linework, as in the original. */
.lu-serving::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("https://www.lightsup-usa.com/wp-content/uploads/2024/02/body-bg.png") no-repeat center / cover;
	opacity: 0.35;
	pointer-events: none;
}

.lu-serving > * { position: relative; z-index: 1; }

/* --- checklist --------------------------------------------------------- */

.lu-checklist {
	list-style: none;
	padding-left: 0;
	margin-top: var(--wp--preset--spacing--30);
}

.lu-checklist li {
	position: relative;
	padding-left: 1.6rem;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.lu-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 3px rgba(166, 22, 22, 0.18);
}

/* --- founder ----------------------------------------------------------- */

.lu-founder__photo img { display: block; }

.lu-founder__name {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	line-height: 1.2;
}

.lu-founder__sign {
	width: 160px;
	height: auto;
	margin-bottom: 0.15rem;
	opacity: 0.85;
}

.lu-founder__title {
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--medium);
}

.lu-founder__role {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* --- contact row ------------------------------------------------------- */

.lu-contactrow { row-gap: var(--wp--preset--spacing--30); }

.lu-contact {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: inherit;
}

.lu-contact__ico {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.lu-contact:hover .lu-contact__ico {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.lu-contact:hover .lu-contact__ico .lu-icon { filter: invert(1) brightness(2); }

.lu-contact__text { display: flex; flex-direction: column; line-height: 1.25; }

.lu-contact__label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--primary);
}

.lu-contact__value {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* --- collage ----------------------------------------------------------- */

.lu-collage__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	align-items: start;
}

.lu-collage__grid > * { border-radius: 18px; overflow: hidden; margin: 0; }

.lu-collage__shot img,
.lu-collage__video video,
.lu-collage__video img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lu-collage__shot--a { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 3 / 2; }
.lu-stat--red        { grid-column: 1; grid-row: 1; }
.lu-collage__video   { grid-column: 1; grid-row: 2 / span 2; aspect-ratio: 9 / 10; }
.lu-stat--blue       { grid-column: 1; grid-row: 4; }
.lu-collage__shot--b { grid-column: 2; grid-row: 3 / span 2; aspect-ratio: 3 / 2; }

.lu-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
	padding: clamp(1rem, 2.4vw, 1.75rem);
	color: #fff;
	min-height: 8rem;
}

.lu-stat--red  { background: var(--wp--preset--color--secondary); }
.lu-stat--blue { background: var(--wp--preset--color--accent-3); }

.lu-stat__num {
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.lu-stat__label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.3;
}

@media (max-width: 781px) {
	.lu-collage__grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
	.lu-collage__video { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------------------------
   FAQ — photo + "Ready To Get Started?" card on the left, colour-pill
   accordion on the right. Closed rows are red, the open row is green.
   ------------------------------------------------------------------------- */

.lu-faq__aside {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	max-width: 22rem;
	margin-inline: auto;
}

.lu-faq__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.lu-faq__cta {
	position: absolute;
	left: 0.9rem;
	right: 0.9rem;
	bottom: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	border-radius: 12px;
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.lu-faq__cta-text { display: flex; flex-direction: column; gap: 0.4rem; }

.lu-faq__cta-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.15;
}

.lu-faq__cta-note {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.3;
}

.lu-faq__cta-btn {
	flex: 0 0 auto;
	background: var(--wp--preset--color--secondary);
	color: #fff;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.6em 1.3em;
	border-radius: 100px;
	transition: background-color 180ms ease, transform 180ms ease;
}

.lu-faq__cta-btn:hover {
	background: var(--wp--preset--color--ink);
	transform: translateY(-2px);
	color: #fff;
}

/* --- accordion pills ---------------------------------------------------- */

.lu-faq__list .wp-block-details {
	border: 0;
	padding: 0;
	margin: 0 0 0.85rem;
	border-radius: 10px;
	overflow: hidden;
	background: transparent;
}

.lu-faq__list .wp-block-details > summary {
	background: var(--wp--preset--color--secondary);
	color: #fff;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.95rem 1.15rem;
	border-radius: 10px;
	transition: background-color 200ms ease;
}

.lu-faq__list .wp-block-details[open] > summary {
	background: var(--wp--preset--color--primary);
	border-radius: 10px 10px 0 0;
}

.lu-faq__list .wp-block-details > summary:hover { filter: brightness(1.12); }

/* Circular marker: chevron when closed, minus when open. */
.lu-faq__list .wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 9px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 9px no-repeat,
		rgba(255, 255, 255, 0.22);
	transform: none;
	transition: transform 220ms ease, background-size 220ms ease;
}

.lu-faq__list .wp-block-details[open] > summary::after {
	transform: rotate(180deg);
	background:
		linear-gradient(currentColor, currentColor) center / 9px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 0 2px no-repeat,
		rgba(255, 255, 255, 0.22);
}

.lu-faq__list .wp-block-details > :not(summary) {
	background: var(--wp--preset--color--cream);
	margin: 0;
	padding: 1rem 1.15rem;
}

.lu-faq__list .wp-block-details > :not(summary):last-child {
	border-radius: 0 0 10px 10px;
	padding-bottom: 1.25rem;
}

.lu-faq__list .wp-block-details > p { color: var(--wp--preset--color--ink); }

@media (max-width: 781px) {
	.lu-faq__aside { max-width: 100%; }
	.lu-faq__photo { aspect-ratio: 4 / 3; }
	.lu-faq__cta { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   PREMIUM PASS
   Refinements aimed at a luxury feel: quieter type, more air, gradient
   scrims instead of flat dimming, and restrained motion.
   ========================================================================= */

/* --- 1. Typography: large serif reads better with tighter tracking ------- */

h1, h2,
.wp-block-post-title {
	letter-spacing: -0.018em;
	line-height: 1.08;
}

h3 { letter-spacing: -0.012em; }

p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* Eyebrows: small, wide, quiet. */
.lu-eyebrow {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	opacity: 0.75;
}

/* --- 2. Links: underline grows rather than sits there -------------------- */

.entry-content p a:not(.wp-element-button),
.entry-content li a:not(.wp-element-button) {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 320ms cubic-bezier(0.22, 1, 0.36, 1);
	padding-bottom: 1px;
}

.entry-content p a:not(.wp-element-button):hover,
.entry-content li a:not(.wp-element-button):hover { background-size: 100% 1px; }

/* --- 3. Buttons: fill and settle, no bounce ----------------------------- */

.wp-block-button__link:hover { transform: none; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); }

/* --- 4. Covers: a gradient scrim reads richer than a flat black wash ----- */

.wp-block-cover > .wp-block-cover__background.has-background-dim {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.62) 100%);
	opacity: 1;
}

/* --- 5. Softer corners and shadows -------------------------------------- */

.wp-block-image img,
.lu-collage__grid > *,
.lu-faq__aside { border-radius: 20px; }

.lu-collage__shot,
.lu-collage__video { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14); }

/* --- 6. Scroll reveal: one quiet fade-up, never a bounce ---------------- */

@media (prefers-reduced-motion: no-preference) {
	.lu-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		            transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: opacity, transform;
	}

	.lu-reveal.is-revealed { opacity: 1; transform: none; }
}

/* =========================================================================
   Blog cards — no imagery, title in a pill, intro revealed on hover/focus
   ========================================================================= */

.christmas-light-blog-grid .wp-block-post-template { list-style: none; padding: 0; }

.christmas-light-blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	height: 100%;
	padding: 1.6rem 1.7rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 22px;
	background: var(--wp--preset--color--white);
	transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.christmas-light-blog-card:hover,
.christmas-light-blog-card:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.12);
	transform: translateY(-4px);
}

.christmas-light-blog-card__date {
	font-family: var(--wp--preset--font-family--ui);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	opacity: 0.8;
	margin: 0;
}

.christmas-light-blog-card__title { margin: 0; }

.christmas-light-blog-card__title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	background-image: none;
}

.christmas-light-blog-card:hover .christmas-light-blog-card__title a { color: var(--wp--preset--color--primary); }

/* The intro is collapsed to nothing until the card is hovered or focused.
   grid-template-rows animates cleanly from 0 without a fixed max-height. */
.christmas-light-blog-card__intro {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	margin: 0;
	transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 300ms ease,
	            margin-top 420ms ease;
}

.christmas-light-blog-card__intro > * { overflow: hidden; min-height: 0; margin: 0; }

.christmas-light-blog-card:hover .christmas-light-blog-card__intro,
.christmas-light-blog-card:focus-within .christmas-light-blog-card__intro {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: 0.6rem;
}

/* Touch and reduced-motion users get the intro outright — hover never fires. */
@media (hover: none), (prefers-reduced-motion: reduce) {
	.christmas-light-blog-card__intro {
		grid-template-rows: 1fr;
		opacity: 1;
		margin-top: 0.6rem;
		transition: none;
	}

	.christmas-light-blog-card { transition: none; }
	.christmas-light-blog-card:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   Spacing corrections
   ------------------------------------------------------------------------- */

/* The eyebrow sat a full block-gap away from its heading; pull it close. */
.lu-eyebrow { margin-block-end: 0 !important; }

.lu-eyebrow + h1,
.lu-eyebrow + h2,
.lu-eyebrow + h3 { margin-block-start: 0.35rem !important; }

/* =========================================================================
   "Christmas Light Installation Made Easy" — three step cards.
   Layered cyan square + disc, red numbered badge, white glyph.
   ========================================================================= */

.christmas-light-steps {
	position: relative;
	/* the curved ::after deliberately overhangs by 5% each side; clip it or it
	   pushes the document wider than the viewport and shows a white gutter */
	overflow: hidden;
}

/* Soft curve out of the panel, as in the original. */
.christmas-light-steps::after {
	content: "";
	position: absolute;
	left: -5%;
	right: -5%;
	bottom: -1px;
	height: clamp(2rem, 5vw, 4.5rem);
	background: var(--wp--preset--color--white);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	pointer-events: none;
}

.christmas-light-steps > * { position: relative; z-index: 1; }

.christmas-light-steps__row { align-items: stretch; }

.christmas-light-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 2.4rem 1.6rem 2rem;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.42);
	transition: background-color 320ms ease, box-shadow 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.christmas-light-step:hover {
	background: var(--wp--preset--color--white);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
	transform: translateY(-4px);
}

/* --- the layered art --------------------------------------------------- */

.christmas-light-step__art {
	position: relative;
	width: 132px;
	height: 108px;
	margin-bottom: 1.1rem;
	flex: 0 0 auto;
}

/* offset square, sitting behind and up-right */
.christmas-light-step__square {
	position: absolute;
	top: 0;
	right: 6px;
	width: 84px;
	height: 62px;
	background: var(--wp--preset--color--accent);
	opacity: 0.62;
	border-radius: 3px;
	transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* solid disc in front, bottom-left */
.christmas-light-step__disc {
	position: absolute;
	left: 12px;
	bottom: 0;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.christmas-light-step__glyph {
	width: 34px;
	height: 34px;
	/* the source SVGs are dark; invert to white on the cyan disc */
	filter: brightness(0) invert(1);
}

/* dark red numbered badge, overlapping the top-left of the disc */
.christmas-light-step__num {
	position: absolute;
	left: 0;
	top: 14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	z-index: 2;
}

.christmas-light-step:hover .christmas-light-step__disc { transform: translateY(-3px) scale(1.04); }
.christmas-light-step:hover .christmas-light-step__square { transform: translate(4px, -3px); }

.christmas-light-step__title { margin: 0.2rem 0 0.3rem; }

.christmas-light-step__title a { text-decoration: none; color: inherit; background-image: none; }

/* --- connectors between the steps --------------------------------------
   The original drew arrows that overhung the cards. These sit in the gap
   between cards instead, and only where there is a next step to point to. */

@media (min-width: 782px) {
	.christmas-light-steps__row { position: relative; }

	.christmas-light-step { position: relative; }

	.christmas-light-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 4.4rem;
		right: calc(-1 * var(--wp--preset--spacing--40) / 2);
		transform: translateX(50%);
		width: 26px;
		height: 8px;
		background:
			linear-gradient(currentColor, currentColor) left center / 18px 1.5px no-repeat;
		color: rgba(0, 0, 0, 0.28);
		pointer-events: none;
	}

	.christmas-light-step:not(:last-child)::before {
		content: "";
		position: absolute;
		top: calc(4.4rem + 0.5px);
		right: calc(-1 * var(--wp--preset--spacing--40) / 2);
		transform: translate(calc(50% + 8px), -50%) rotate(45deg);
		width: 7px;
		height: 7px;
		border-top: 1.5px solid rgba(0, 0, 0, 0.28);
		border-right: 1.5px solid rgba(0, 0, 0, 0.28);
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.christmas-light-step,
	.christmas-light-step__disc,
	.christmas-light-step__square { transition: none; }

	.christmas-light-step:hover,
	.christmas-light-step:hover .christmas-light-step__disc,
	.christmas-light-step:hover .christmas-light-step__square { transform: none; }
}

/* =========================================================================
   PREMIUM BRAND PASS
   Colour as accent, not as ground. Neutral cream/white rhythm with charcoal
   as the single dark anchor; brand hues survive in buttons, art and stats.
   ========================================================================= */

/* --- dark anchor sections ---------------------------------------------- */

.has-charcoal-background-color {
	color: rgba(255, 255, 255, 0.86);
}

.has-charcoal-background-color :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.has-charcoal-background-color :where(p, li) { color: rgba(255, 255, 255, 0.78); }

/* On charcoal, outline buttons read better than a solid white fill. */
.has-charcoal-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

/* "Light Up Your World" now sits on charcoal — keep the divider subtle. */
@media (min-width: 782px) {
	.lu-lightup__panel { border-left-color: rgba(255, 255, 255, 0.16); }
}

.lu-lightup .lu-tabs__list { border-bottom-color: rgba(255, 255, 255, 0.16); }
.lu-lightup::before { opacity: 0.16; }

/* --- the curve out of the steps panel must match what follows ---------- */

.christmas-light-steps::after { background: var(--wp--preset--color--charcoal); }

/* --- restraint: fewer hard edges, quieter borders ---------------------- */

.christmas-light-step { border-color: rgba(0, 0, 0, 0.05); }
.christmas-light-blog-card { border-color: rgba(0, 0, 0, 0.09); }

/* --- headings breathe more now that they are larger -------------------- */

:where(.entry-content) h2 { margin-block-end: 0.5em; }

/* --- stat cards keep their colour, but read as objects not bands ------- */

.lu-stat { border-radius: 20px; }

/* --- reviews band is plain now; give the widget room ------------------- */

.lu-reviews-band { padding-block: var(--wp--preset--spacing--60); }

/* =========================================================================
   Countdown — title on the left, tiles in the middle, tree on the right.
   ========================================================================= */

.christmas-countdown-row {
	align-items: center;
	justify-content: space-between;
	row-gap: var(--wp--preset--spacing--40);
}

.christmas-countdown-row__title {
	margin: 0;
	flex: 1 1 20rem;
	max-width: 26rem;
	line-height: 1.05;
}

.christmas-countdown-row .lu-countdown {
	flex: 0 1 auto;
	margin: 0;
	gap: 0.65rem;
}

.christmas-countdown-row .lu-lottie {
	flex: 0 0 auto;
	width: clamp(120px, 15vw, 190px);
	margin: 0;
}

/* --- the tiles ---------------------------------------------------------- */

.lu-countdown__unit {
	min-width: 0;
	width: clamp(64px, 7.5vw, 88px);
	aspect-ratio: 1 / 1;
	justify-content: center;
	gap: 0.15rem;
	background: var(--wp--preset--color--primary);
	border-radius: 10px;
	padding: 0.5rem 0.35rem;
}

.lu-countdown__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.6rem, 2.6vw, 2.4rem);
	font-weight: 500;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.lu-countdown__label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: none;
	color: rgba(255, 255, 255, 0.88);
	margin-top: 0.15rem;
}

.lu-countdown__done {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--primary);
	margin: 0;
}

@media (max-width: 781px) {
	.christmas-countdown-row { justify-content: center; text-align: center; }
	.christmas-countdown-row__title { flex-basis: 100%; max-width: none; text-align: center; }
	.christmas-countdown-row .lu-lottie { width: 130px; }
}

/* Nothing should ever widen the document. Full-bleed decoration is clipped at
   its own section rather than by hiding overflow on <body>, which would break
   the sticky header. */
.wp-site-blocks,
.entry-content > .wp-block-group,
.entry-content > .wp-block-cover { max-width: 100%; }

.lu-serving { overflow: hidden; }

/* =========================================================================
   Section seams

   WordPress puts its block gap between every top-level block, which shows as
   a white strip between full-bleed bands. Full-width sections carry their own
   padding, so they should butt together with no gap at all. Scoped to
   .alignfull so ordinary page content (privacy policy, posts) keeps normal
   paragraph rhythm.
   ========================================================================= */

.entry-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Step cards lay themselves out with flex gap; the block-gap margins on their
   children stack on top of that and blew a 36px hole under each title. */
.christmas-light-step > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.christmas-light-step { gap: 0.55rem; }
.christmas-light-step__art { margin-bottom: 1.1rem; }
.christmas-light-step__title { margin: 0.1rem 0 0.15rem; }

/* Same story inside the blog cards and the FAQ column. */
.christmas-light-blog-card > * { margin-block-start: 0; margin-block-end: 0; }

/* -------------------------------------------------------------------------
   Consistent measure

   Section headings and intro copy sit on one comfortable measure rather than
   stretching the full 1360px, which is what made the wide sections feel
   sprawling next to the sparse ones.
   ------------------------------------------------------------------------- */

.entry-content > .alignfull > .wp-block-heading,
.entry-content > .alignfull > .wp-block-paragraph,
.entry-content > .alignfull > p {
	max-width: 46rem;
	margin-inline: auto;
}

/* Centred section intros keep their alignment. */
.entry-content > .alignfull > .has-text-align-center { text-align: center; }

/* -------------------------------------------------------------------------
   Corrections after go-live
   ------------------------------------------------------------------------- */

/* Why Use cards are white and now sit on a white band — they disappeared.
   Give them the same hairline the other cards use so they read on any ground. */
.lu-carousel .wp-block-column {
	border: 1px solid rgba(0, 0, 0, 0.09);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lu-carousel .wp-block-column:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
	transform: translateY(-4px);
}

/* The quote form is long by nature. Constrain and frame it so it reads as a
   contained card rather than an endless wall of fields. */
.gform_wrapper {
	max-width: 820px;
	margin-inline: auto;
}

/* Tidy the long checkbox/radio stacks the quote form leans on. */

/* -------------------------------------------------------------------------
   Gravity Forms option lists

   GF's own stylesheet enqueues after the theme's and sets these to a single
   stacked column, which made the quote form ~2500px tall. Matching its
   specificity is not enough — these selectors deliberately go one level
   deeper so the multi-column layout wins without !important.
   ------------------------------------------------------------------------- */


/* =========================================================================
   Gravity Forms (Orbital theme)

   GF 2.10 renders with .gform-theme--orbital, not the legacy .gravity-theme
   class. Its stylesheets load after the theme's, so the few layout rules that
   it actively fights are marked important; the cosmetic ones do not need it.
   ========================================================================= */

.gform_wrapper {
	max-width: 820px;
	margin-inline: auto;
}

/* Option lists default to a single stacked column, which made the quote form
   roughly 2,500px tall. Flow them into responsive columns instead. */
.gform_wrapper .ginput_container_checkbox .gfield_checkbox,
.gform_wrapper .ginput_container_radio .gfield_radio {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
	gap: 0.4rem 1.25rem;
}

.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0;
}

.gform_wrapper .gfield_checkbox .gchoice label,
.gform_wrapper .gfield_radio .gchoice label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	margin: 0;
}

/* Typography to match the rest of the site. */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.gform_wrapper .gsection_title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary);
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
	font-family: var(--wp--preset--font-family--body);
	border-radius: 8px;
}

/* Submit button: match the site's pill. */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_page_footer input[type="button"],
.gform_wrapper .gform_page_footer input[type="submit"] {
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--wp--preset--color--secondary);
	border: 0;
	border-radius: 100px;
	padding: 0.9em 2.4em;
	cursor: pointer;
	transition: background-color 200ms ease;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer .gform_button:hover {
	background: var(--wp--preset--color--primary);
}

.gform_wrapper .gform_footer { justify-content: center; }

/* Orbital is themed through custom properties — setting these is the supported
   route and beats trying to out-specify its own selectors. */
.gform_wrapper.gform-theme--orbital,
.gform_wrapper.gform-theme {
	--gf-color-primary: #A61616;
	--gf-color-primary-rgb: 166, 22, 22;
	--gf-color-primary-contrast: #ffffff;
	--gf-color-primary-darker: #008E4C;
	--gf-color-primary-lighter: #C42323;
	--gf-ctrl-btn-bg-color-primary: #A61616;
	--gf-ctrl-btn-bg-color-hover-primary: #008E4C;
	--gf-ctrl-btn-color-primary: #ffffff;
	--gf-ctrl-btn-border-color-primary: #A61616;
	--gf-ctrl-btn-border-color-hover-primary: #008E4C;
	--gf-ctrl-btn-border-radius: 100px;
	--gf-ctrl-btn-padding-x: 2.4em;
	--gf-ctrl-btn-padding-y: 0.9em;
	--gf-ctrl-btn-font-family: var(--wp--preset--font-family--ui);
	--gf-ctrl-border-radius: 8px;
	--gf-field-gap-y: 1.1rem;
	--gf-form-gap-y: 1.1rem;
}