/*
 * Landing pages.
 *
 * Loaded only on the Landing page template, so the ~6 KB of campaign-specific
 * styling never reaches the 691 blog posts that will never use it.
 *
 * The components mirror what the Elementor pages were built from: a full-bleed
 * hero, a sticky anchor bar, tinted full-width bands, a row of icon steps, and
 * checklists of light cards on a coloured background.
 */

/* -------------------------------------------------------------------------
 * Shell
 * ---------------------------------------------------------------------- */

.is-landing .lp { display: block; }

/* Sections run edge to edge; only their contents are constrained. */
.lp-section {
	padding-block: clamp(3rem, 7vw, 6rem);
	background: var(--rtj-paper);
}

.lp-section > * {
	width: min(100% - 2rem, var(--rtj-measure));
	margin-inline: auto;
}

/* A tint is an overlay colour over the white page, so the text on it is dark
   with the original's shadow rather than the site blue. */
.lp-section--tint { background: #f1f1f1; }
.lp-section--tint :is(h2, h3) { color: #111; }
.lp-section--green {
	background-image: linear-gradient(160deg, #4a6127 0%, #7ba055 100%);
	color: #fff;
}

.lp-section--green :is(h1, h2, h3, h4) { color: #fff; }

.lp-section--dark {
	background: var(--rtj-teal-deep);
	color: #fff;
}

/* main.css colours every heading with the site blue, which disappears on a
   dark band. */
.lp-section--dark :is(h1, h2, h3, h4) {
	color: #fff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.lp-section--dark a { color: #fff; }

.lp-section h2 {
	font-size: clamp(2rem, 5vw, 3.4rem);
	text-align: center;
	margin-top: 0;
	margin-bottom: 1.5rem;
	text-wrap: balance;
}

.lp-section--tint h2 {
	color: #111;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
}

.lp-section p { max-width: 46rem; }
.lp-section > p { margin-inline: auto; }

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

.lp-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(78vh, 620px);
	padding: clamp(3rem, 8vw, 6rem) 1rem;
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
}

/* Darkening layer, so white type stays legible whatever the photo does. The
   converter passes the original's overlay through as --lp-overlay. */
.lp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--lp-overlay, rgba(0, 0, 0, 0.31));
}

.lp-hero > * { position: relative; }

.lp-hero__eyebrow {
	font-family: var(--rtj-font-ui);
	font-size: clamp(0.7rem, 1.4vw, 0.85rem);
	letter-spacing: 0.35em;
	text-transform: uppercase;
	margin-bottom: 1.2rem;
}

.lp-hero__title {
	color: #fff;
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	line-height: 1.05;
	margin: 0 0 1rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.lp-hero__sub {
	font-family: var(--rtj-font-ui);
	font-size: clamp(0.75rem, 1.5vw, 0.95rem);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	line-height: 2.2;
	margin: 0 auto 2rem;
	max-width: 34rem;
}

.lp-hero .button {
	font-size: 1.05rem;
	padding: 0.9em 2.2em;
	border-radius: 4px;
	background: rgba(60, 92, 123, 0.9);
}

.lp-hero .button:hover { background: var(--rtj-blue); }

/* -------------------------------------------------------------------------
 * Anchor bar
 * ---------------------------------------------------------------------- */

.lp-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: #111;
}

.lp-nav__inner {
	width: min(100% - 2rem, var(--rtj-measure));
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.lp-nav__home img { display: block; max-height: 40px; width: auto; }

.lp-nav__menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 4vw, 3rem);
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.lp-nav__menu a {
	display: block;
	padding: 1em 0;
	color: #e6e6e6;
	text-decoration: none;
	font-size: 1rem;
}

.lp-nav__menu a:hover { color: #fff; text-decoration: underline; }

/* -------------------------------------------------------------------------
 * Steps — the three icon boxes
 * ---------------------------------------------------------------------- */

.lp-steps {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin-top: 3rem;
}

.lp-step { text-align: center; }

.lp-step__icon {
	display: block;
	font-size: 2.6rem;
	line-height: 1;
	color: #7a7a7a;
	margin-bottom: 0.8rem;
}

.lp-step__icon::before { content: "\2605"; }   /* ★ */

.lp-step__title {
	font-size: 1.3rem;
	margin: 0 0 0.6rem;
	color: #111;
}

.lp-step p {
	color: #9a9a9a;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 auto;
	max-width: 22rem;
}

/* -------------------------------------------------------------------------
 * Checklists
 * ---------------------------------------------------------------------- */

.lp-checklist__label {
	font-size: 1.05rem;
	margin: 2.5rem 0 0.8rem;
	max-width: none;
}

.lp-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.lp-checklist li {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	background: #f1f1f1;
	color: var(--rtj-ink);
	padding: 1.1rem 1.5rem;
	border-radius: 2px;
	line-height: 1.4;
}

.lp-checklist li::before {
	content: "✓";
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 2px solid #7a7a7a;
	border-radius: 50%;
	color: #7a7a7a;
	font-size: 1.1rem;
}

/* -------------------------------------------------------------------------
 * Odds and ends
 * ---------------------------------------------------------------------- */

.lp-section .book-grid { margin-top: 2.5rem; }

.lp-cta { text-align: center; margin-top: 2.5rem; }

.lp-section figure { margin-inline: auto; }
.lp-section img { display: block; margin-inline: auto; height: auto; }

.site-footer--slim { padding-block: 2rem; background: #111; }
.site-footer--slim .site-footer__legal { margin: 0; }