/* ============================================================================
   Work & Wonders — Landing page layout & colour system
   ----------------------------------------------------------------------------
   Scope   : body.ww-landing — Elementor-built landing pages only.
             The front page, blog and WooCommerce pages are excluded
             (see ww_landing_body_class() in ../functions.php).
   Loaded  : after Elementor's generated per-page CSS, so plain specificity
             is enough to win. No !important is used anywhere in this file.
   Revert  : delete this file and the two ww_landing_* functions in
             ../functions.php. Nothing in the page content is modified.
   ============================================================================ */


/* ---------------------------------------------------------------- 1. Tokens */

body.ww-landing {
	/* Brand — one red, unified from the four that were in use
	   (#bf1e2e theme · #DE2F2F Elementor primary · #CA1C39 accent · #4d1212 CTA) */
	--ww-red:            #bf1e2e;
	--ww-red-dark:       #a01827;
	--ww-red-tint:       #fdf2f3;

	/* Neutrals — navy is the footer colour, reused so the page reads as one system */
	--ww-navy:           #17262f;
	--ww-ink:            #17262f;
	--ww-body:           #4a5560;
	--ww-on-dark:        #ffffff;
	--ww-on-dark-muted:  #c3ccd3;
	--ww-band:           #f4f5f7;
	--ww-border:         #e3e6ea;

	/* Layout */
	--ww-content:        1200px;
	--ww-gutter:         20px;
	--ww-rhythm:         56px;
}

@media only screen and (min-width: 768px) {
	body.ww-landing { --ww-gutter: 32px; --ww-rhythm: 76px; }
}

@media only screen and (min-width: 1200px) {
	body.ww-landing { --ww-gutter: 50px; --ww-rhythm: 96px; }
}


/* ------------------------------------------------- 2. Section layout system */

/* Every top-level section keeps a full-bleed shell so backgrounds still run
   edge to edge, while its content is boxed to --ww-content and centred.
   The max() keeps a real gutter once the viewport drops below the content
   width, which is what was missing — sections were shipping a 10px gutter. */
.ww-landing .elementor > .e-con {
	/* The shell itself must span the viewport — several sections carried their
	   own max-width, which would otherwise make the gutter eat into the
	   content instead of centring it. */
	max-width: none;
	padding-inline: max(var(--ww-gutter), (100% - var(--ww-content)) / 2);
}

/* Sections that are meant to bleed: the hero slider, and anything opted out
   by hand with .ww-bleed. */
.ww-landing .elementor > .e-con:has(> .elementor-widget-industrium_content_slider),
.ww-landing .elementor > .e-con.ww-bleed {
	padding: 0;
}

/* Consistent vertical rhythm. Section padding was 0 / 20 / 70 / 96px depending
   on the page; this makes every content section breathe the same way. */
.ww-landing .elementor > .e-con:not(:has(> .elementor-widget-industrium_content_slider)):not(.ww-bleed) {
	padding-block: var(--ww-rhythm);
}

/* Section-level wrappers carried their own max-width (1200 / 1400px) which
   fought the shell above. Let them fill the boxed content area instead. */
.ww-landing .elementor > .e-con > .e-con {
	max-width: 100%;
}

/* Alternating band, matching the front page, so consecutive sections read as
   separate blocks instead of one continuous wall of white. */
.ww-landing .elementor > .e-con:not(:has(> .elementor-widget-industrium_content_slider)):not(.ww-bleed):nth-child(even) {
	background-color: var(--ww-band);
}

/* Multi-column rows aligned to the top. They were stretching, so a short text
   column next to a tall image left a block of dead space under the text. */
.ww-landing .elementor > .e-con > .e-con > .e-con,
.ww-landing .elementor .e-con.e-flexbox-base[class*="e-con"] > .e-div-block-base {
	align-self: flex-start;
}


/* ------------------------------------------------------------------ 3. Hero */

/* The slide carries the photograph. Give it a scrim so the headline and lead
   are legible — .page-hero--dark was used in the content but never defined,
   so the text was sitting straight on bright imagery. */
.ww-landing .content-item.slider-item {
	position: relative;
	/* The theme leaves the slide photo at `background-size: auto` anchored to
	   0% 0%, so each hero showed whatever happened to fall in the top-left
	   1440x480 of the source file — ceilings on interior shots, arbitrary crops
	   elsewhere. Cover + centre frames every photo consistently. */
	background-size: cover;
	background-position: center 55%;
	background-repeat: no-repeat;
}

/* The theme's customizer CSS paints this pseudo-element with a 50% brand-red
   wash (.industrium-content-slider-widget .owl-carousel.owl-theme
   .slider-item::before), which muddied every hero photograph and fought the
   red in the header. The selector below deliberately mirrors that chain so it
   outranks it; shortening it will bring the red wash back. */
.ww-landing .industrium-content-slider-widget .owl-carousel.owl-theme .slider-item::before,
.ww-landing .content-item.slider-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: transparent;
	background-image: linear-gradient(
		100deg,
		rgba(15, 26, 33, 0.88) 0%,
		rgba(15, 26, 33, 0.72) 42%,
		rgba(15, 26, 33, 0.34) 78%,
		rgba(15, 26, 33, 0.20) 100%
	);
}

.ww-landing .content-item.slider-item > * {
	position: relative;
	z-index: 1;
}

/* Box the hero to the same measure as the rest of the page (was 1140px). */
.ww-landing .content-item .elementor-container {
	max-width: var(--ww-content);
	width: 100%;
	padding-inline: var(--ww-gutter);
}

/* Centre the hero copy in the slide instead of pinning it to the top. */
.ww-landing .content-item .elementor-row {
	display: flex;
	align-items: center;
	min-height: inherit;
}

.ww-landing .slide-content-column {
	padding-block: clamp(32px, 6vw, 72px);
}

.ww-landing .content-slider-item-text {
	max-width: 62ch;
}

/* Scoped through .elementor .e-con so this outranks the body-copy .lead rule
   in section 4 — without it the hero lead inherits the dark body colour and
   goes near-invisible against the scrim. */
.ww-landing .elementor .e-con .content-slider-item-text .lead,
.ww-landing .content-slider-item-text .lead {
	margin: 0;
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.92);
}


/* ------------------------------------------ 4. Orphaned content-HTML classes */

/* The hero copy is wrapped in .page-hero / .container / .section markup that
   has no stylesheet anywhere in the theme, plus empty spacer sections and
     paragraphs. Left alone they added ~310px of dead height inside a
   480px hero. Unwrap the real content and drop the empties. */
.ww-landing .content-slider-item-text .page-hero,
.ww-landing .content-slider-item-text .container,
.ww-landing .content-slider-item-text main,
.ww-landing .content-slider-item-text .split {
	display: contents;
}

.ww-landing .content-slider-item-text .section,
.ww-landing .content-slider-item-text p:not(.lead) {
	display: none;
}

/* Same classes, should they ever be used in body copy rather than the hero. */
.ww-landing .elementor .e-con .container {
	width: 100%;
	max-width: var(--ww-content);
	margin-inline: auto;
}

.ww-landing .elementor .e-con .section {
	padding-block: var(--ww-rhythm);
}

.ww-landing .elementor .e-con .lead {
	font-size: clamp(17px, 1.2vw, 20px);
	line-height: 1.65;
	color: var(--ww-body);
}

.ww-landing .balance {
	text-wrap: balance;
}

.ww-landing .elementor .e-con .split {
	display: grid;
	gap: clamp(24px, 3vw, 48px);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}


/* ------------------------------------------------------------- 5. Typography */

.ww-landing .elementor .e-con :is(h1, h2, h3, h4) {
	color: var(--ww-ink);
	text-wrap: balance;
}

.ww-landing .elementor .e-con :is(p, li) {
	color: var(--ww-body);
}

/* Keep body copy to a readable measure now that sections are wider. */
.ww-landing .elementor > .e-con > .e-con > .e-paragraph,
.ww-landing .elementor > .e-con > .e-con > p {
	max-width: 72ch;
}

/* Dark sections opt back out of the light text colours above. */
.ww-landing .elementor .e-06e5f37-f70ad9b :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-08016d4-af283cb :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-095af7d-e5e7248 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-1541c8a-5bb1997 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-308449a-460efc4 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-32a3383-06605b1 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-49a35f6-9645d13 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-4ca0178-35138e3 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-60a7c2f-40d8d52 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-6435526-b275dea :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-6810e37-adb73fb :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-6939fc2-b4a56f0 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-7201545-7094f97 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-7d4e227-9732893 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-8cb98e4-cc94db1 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-9bcc0b6-538ec6a :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-9d1d935-3ec0ca0 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-b987925-a6adfe7 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-c084da7-8d77c36 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-df1f447-35e1752 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-eb3470b-aefe875 :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-fddb0be-4b1aafd :is(h1, h2, h3, h4, p, li),
.ww-landing .elementor .e-fe43ea6-77e2cb3 :is(h1, h2, h3, h4, p, li),
.ww-landing .content-item.slider-item :is(h1, h2, h3, h4, p, li) {
	color: inherit;
}


/* ----------------------------------------------------- 6. Colour unification */

/* Elementor stores these colours per element in the page content. The rules
   below re-point them at the tokens in section 1 without touching that
   content, so the four competing reds collapse to one brand red and the
   muddy maroon CTA band becomes the footer navy (white on navy is 15.6:1
   contrast, against 5.8:1 before). Selectors are Elementor's own style IDs,
   read straight from the database. Regenerate after adding new sections. */

/* #4d1212 → var(--ww-navy)  ·  CTA band background (23) */
.ww-landing .elementor .e-06e5f37-f70ad9b,
.ww-landing .elementor .e-08016d4-af283cb,
.ww-landing .elementor .e-095af7d-e5e7248,
.ww-landing .elementor .e-1541c8a-5bb1997,
.ww-landing .elementor .e-308449a-460efc4,
.ww-landing .elementor .e-32a3383-06605b1,
.ww-landing .elementor .e-49a35f6-9645d13,
.ww-landing .elementor .e-4ca0178-35138e3,
.ww-landing .elementor .e-60a7c2f-40d8d52,
.ww-landing .elementor .e-6435526-b275dea,
.ww-landing .elementor .e-6810e37-adb73fb,
.ww-landing .elementor .e-6939fc2-b4a56f0,
.ww-landing .elementor .e-7201545-7094f97,
.ww-landing .elementor .e-7d4e227-9732893,
.ww-landing .elementor .e-8cb98e4-cc94db1,
.ww-landing .elementor .e-9bcc0b6-538ec6a,
.ww-landing .elementor .e-9d1d935-3ec0ca0,
.ww-landing .elementor .e-b987925-a6adfe7,
.ww-landing .elementor .e-c084da7-8d77c36,
.ww-landing .elementor .e-df1f447-35e1752,
.ww-landing .elementor .e-eb3470b-aefe875,
.ww-landing .elementor .e-fddb0be-4b1aafd,
.ww-landing .elementor .e-fe43ea6-77e2cb3 {
	background-color: var(--ww-navy);
}

/* #fcfcfc → var(--ww-on-dark)  ·  CTA heading (23) */
.ww-landing .elementor .e-051e0ce-13ff15b,
.ww-landing .elementor .e-0f787d4-4c8d7fc,
.ww-landing .elementor .e-1079283-8b4db3a,
.ww-landing .elementor .e-2bb6b7e-48482d4,
.ww-landing .elementor .e-347b643-e78a34b,
.ww-landing .elementor .e-3c7233f-03ee6c6,
.ww-landing .elementor .e-3ea3445-9b66e30,
.ww-landing .elementor .e-4109e20-fe9448b,
.ww-landing .elementor .e-46862a5-6ccafab,
.ww-landing .elementor .e-482c3a1-024cd3f,
.ww-landing .elementor .e-50a16ef-1f1a3a4,
.ww-landing .elementor .e-5733aa4-51f772d,
.ww-landing .elementor .e-7253b75-ca17dfa,
.ww-landing .elementor .e-80a2bab-217890c,
.ww-landing .elementor .e-86f83c1-bc40e55,
.ww-landing .elementor .e-a60bdac-df0ebc1,
.ww-landing .elementor .e-b24c4d2-01f3391,
.ww-landing .elementor .e-c4acdf8-89df47f,
.ww-landing .elementor .e-c548b73-fefbef0,
.ww-landing .elementor .e-d4338ff-da4c369,
.ww-landing .elementor .e-d4f9496-7029bb4,
.ww-landing .elementor .e-dc6e2a7-0465142,
.ww-landing .elementor .e-de06b2e-84d75b0 {
	color: var(--ww-on-dark);
}

/* #a7a091 → var(--ww-on-dark-muted)  ·  CTA body copy (23) */
.ww-landing .elementor .e-0318e4a-76f98d9,
.ww-landing .elementor .e-17f980c-da5b239,
.ww-landing .elementor .e-1b12bcf-40cd7c1,
.ww-landing .elementor .e-211c7b5-7398daf,
.ww-landing .elementor .e-24fd79a-c9941b2,
.ww-landing .elementor .e-344e86c-399001c,
.ww-landing .elementor .e-4546526-60c799a,
.ww-landing .elementor .e-5175791-76bb7c6,
.ww-landing .elementor .e-55dd292-b2f443e,
.ww-landing .elementor .e-5671be5-62cc97e,
.ww-landing .elementor .e-6af0fc8-bf7ddd5,
.ww-landing .elementor .e-72989be-035c70d,
.ww-landing .elementor .e-79eda72-f91f514,
.ww-landing .elementor .e-7ab43b1-3d57708,
.ww-landing .elementor .e-9806a6d-58b6899,
.ww-landing .elementor .e-a38c871-b1d65fd,
.ww-landing .elementor .e-ad5a445-888b57d,
.ww-landing .elementor .e-b269e56-0916cdf,
.ww-landing .elementor .e-ccabe90-77ff5cc,
.ww-landing .elementor .e-cd216c2-0a54f18,
.ww-landing .elementor .e-d0696a9-de6e2b2,
.ww-landing .elementor .e-de1068d-3ac0cec,
.ww-landing .elementor .e-edb3b32-1751be5 {
	color: var(--ww-on-dark-muted);
}

/* #a02b37 / #a73434 → var(--ww-red)  ·  stray reds (2) */
.ww-landing .elementor .e-8697601-8f3324e,
.ww-landing .elementor .e-dc36347-df854d3 {
	color: var(--ww-red);
}

/* #fdf4f5 / #faedeb → var(--ww-red-tint)  ·  warm tints (33) */
.ww-landing .elementor .e-08efb62-28bd629,
.ww-landing .elementor .e-0a26931-47b7e1a,
.ww-landing .elementor .e-0e76656-f6f9bfe,
.ww-landing .elementor .e-37caa69-3814c7f,
.ww-landing .elementor .e-3a1a7fc-cf0e6de,
.ww-landing .elementor .e-4262f19-d362793,
.ww-landing .elementor .e-436a392-6876bcb,
.ww-landing .elementor .e-4489a4d-5d6a8bc,
.ww-landing .elementor .e-44b0a3c-a624be7,
.ww-landing .elementor .e-459b2fe-e0da0fc,
.ww-landing .elementor .e-4823514-6ed6275,
.ww-landing .elementor .e-5b2a09a-920f985,
.ww-landing .elementor .e-5fdbdc8-de43391,
.ww-landing .elementor .e-6263e32-b41cc8c,
.ww-landing .elementor .e-664f1d0-7af7e15,
.ww-landing .elementor .e-673a170-4ae9b2f,
.ww-landing .elementor .e-6847403-6fe5473,
.ww-landing .elementor .e-7312b11-e6d443e,
.ww-landing .elementor .e-747b708-6d892ed,
.ww-landing .elementor .e-7c6e40d-ff4536a,
.ww-landing .elementor .e-898935c-52328f3,
.ww-landing .elementor .e-9a2abe7-4e1aab1,
.ww-landing .elementor .e-9ce2ec5-69e28be,
.ww-landing .elementor .e-a644b4b-0cb1a08,
.ww-landing .elementor .e-a7b14a3-2e73c99,
.ww-landing .elementor .e-a9f3c36-115ed2f,
.ww-landing .elementor .e-b6b5abc-8ad97a9,
.ww-landing .elementor .e-c0597e0-799f43a,
.ww-landing .elementor .e-cb09231-a2d8d51,
.ww-landing .elementor .e-dcf4c2d-9f1917d,
.ww-landing .elementor .e-f6b633d-14b2fbc,
.ww-landing .elementor .e-f756108-69e99ce,
.ww-landing .elementor .e-f9e1c94-c143b0f {
	background-color: var(--ww-red-tint);
}

/* #f7f5f2 → var(--ww-band)  ·  neutral tint (3) */
.ww-landing .elementor .e-3f73a71-93b1c11,
.ww-landing .elementor .e-91522a0-626f06a,
.ww-landing .elementor .e-bbcdc27-cde39ff {
	background-color: var(--ww-band);
}

/* --------------------------------------------------- 7. Components & polish */

/* Buttons on the navy CTA band: solid brand red reads far better than the
   red-outline-on-maroon it replaces. */
.ww-landing .elementor .e-con .industrium-button {
	border-color: var(--ww-red);
}

.ww-landing .elementor .e-con .industrium-button:hover {
	background-color: var(--ww-red-dark);
	border-color: var(--ww-red-dark);
}

/* Images stretch to their column width but keep their own aspect ratio. */
.ww-landing .elementor .e-con .elementor-widget-image img {
	width: 100%;
	height: auto;
}

/* Tick-list spacing */
.ww-landing .elementor .e-con .elementor-icon-list-item {
	margin-block-end: 10px;
}



/* ------------------------------------------------------------- 8. Responsive */

@media only screen and (max-width: 1024px) {
	/* Stack the hero and give the slide room to breathe. */
	.ww-landing .content-item .elementor-row {
		align-items: flex-start;
	}

	.ww-landing .content-slider-item-text {
		max-width: none;
	}

	/* Two-up rows collapse to one column below tablet. */
	.ww-landing .elementor .e-con .split {
		grid-template-columns: 1fr;
	}
}