/*
 * "Offer Prelander" template stylesheet.
 *
 * Self-contained: every color, radius and shadow reads from the CSS
 * custom properties already defined in this theme's :root (style.css),
 * each with a plain-color fallback so the file still renders correctly
 * even if copied into a theme that hasn't set them. No Tailwind, no
 * external icon font, no webfont import — copy this file plus
 * template-prelander.php and inc/prelander.php into another house theme
 * and it matches that theme's palette automatically.
 *
 * Scoped entirely under .pl-page so it never leaks into the rest of the
 * site, and never touches selectors owned by the theme itself.
 */

.pl-page {
	--pl-primary: var(--primary-color, #0a2036);
	--pl-accent: var(--secondary-color, #f5a623);
	--pl-ink: var(--text-color, #292f36);
	--pl-surface: var(--card-bg, #ffffff);
	--pl-canvas: var(--bg-color, #f6f8fa);
	--pl-radius: var(--border-radius, 8px);
	--pl-font-heading: var(--font-heading, var(--font-family, inherit));
	--pl-ring: color-mix(in srgb, var(--pl-primary) 12%, transparent 88%);

	/* CTA color is deliberately fixed, not theme-derived: a conversion
	   color, not a brand color — every site in the house library gets the
	   same green regardless of its own --primary-color. Every use site
	   below reads var(--pl-cta-color, #007c38) rather than a value copied
	   here, so a future per-site Customizer control can set --pl-cta-color
	   on :root and have it cascade in with zero changes to this file. */
	--pl-cta-light: color-mix(in srgb, var(--pl-cta-color, #007c38) 55%, white 45%);
	--pl-cta-shadow: color-mix(in srgb, var(--pl-cta-color, #007c38) 45%, transparent 55%);
}

.pl-container {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 1.25rem 3rem;
}

/* ---------------------------------------------------------------------
   Header: title + discreet sponsorship label
   ------------------------------------------------------------------- */

.pl-header {
	text-align: center;
	margin-bottom: 1.75rem;
}

.pl-title {
	font-family: var(--pl-font-heading);
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
	line-height: 1.25;
	font-weight: 700;
	color: var(--pl-ink);
	margin: 0 0 0.6rem;
}

/* ---------------------------------------------------------------------
   Body copy
   ------------------------------------------------------------------- */

.pl-content {
	color: var(--pl-ink);
}

.pl-content > p {
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 1.5rem;
}

.pl-content > h2,
.pl-content > h3 {
	font-family: var(--pl-font-heading);
	color: var(--pl-ink);
	margin: 2rem 0 0.75rem;
	line-height: 1.3;
}

/* ---------------------------------------------------------------------
   CTA — the one bold element on the page. Same three times, same URL.
   Radius is fixed (not var(--pl-radius)): across the house themes that
   token runs from 2px to 12px, too inconsistent for a button this size
   to read as a single deliberate shape — the CTA sets its own scale.
   ------------------------------------------------------------------- */

.pl-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	width: 100%;
	margin: 2rem 0;
	padding: 1.65rem 1.75rem;
	border: 0;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--pl-cta-color, #007c38), var(--pl-cta-light));
	box-shadow: 0 20px 40px -16px var(--pl-cta-shadow);
	color: #fff;
	text-decoration: none;
	font-weight: 800;
	font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

.pl-cta-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	transition: transform 0.35s ease;
}

.pl-cta-icon svg {
	width: 1.15rem;
	height: 1.15rem;
}

.pl-cta:hover {
	transform: translateY(-3px) scale(1.01);
	/* Darkens the whole gradient uniformly — filter: brightness() animates
	   smoothly (a straight gradient-to-gradient background swap doesn't
	   reliably interpolate across browsers), and works the same regardless
	   of what --pl-cta-color ends up being. */
	filter: brightness(0.92);
	box-shadow: 0 26px 48px -14px var(--pl-cta-shadow);
}

.pl-cta:hover .pl-cta-icon {
	transform: translateX(2px);
}

.pl-cta:focus-visible {
	outline: 3px solid var(--pl-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.pl-cta,
	.pl-cta-icon {
		transition: none;
	}
	.pl-cta:hover {
		transform: none;
	}
}

/* Fallback for engines without color-mix() (older WebViews): a flat
   CTA-green background instead of the two-tone gradient/shadow tint —
   still fully legible, just without the subtle lightening. */
@supports not (color: color-mix(in srgb, red, red)) {
	.pl-cta {
		background: var(--pl-cta-color, #007c38);
		box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.35);
	}
}

/* ---------------------------------------------------------------------
   Banner (featured image, inserted after the first CTA)
   ------------------------------------------------------------------- */

.pl-banner {
	margin: 0 0 1.75rem;
}

.pl-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pl-radius);
}

/* ---------------------------------------------------------------------
   Features list — .pl-features (authored directly in page content)
   ------------------------------------------------------------------- */

.pl-content ul.pl-features {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
}

.pl-content ul.pl-features > li {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	padding-bottom: 1.35rem;
	border-bottom: 1px solid var(--pl-ring);
}

.pl-content ul.pl-features > li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.pl-feature-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--pl-primary);
	color: #fff;
	font-size: 1.1rem;
}

/* Default glyph when the author leaves the icon span empty — a plain
   centered dot, so a feature never ships with a visibly blank circle. */
.pl-feature-icon:empty::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
}

.pl-feature-icon svg,
.pl-feature-icon img {
	width: 1.3rem;
	height: 1.3rem;
}

.pl-feature-body h3 {
	font-family: var(--pl-font-heading);
	font-size: 1.03rem;
	font-weight: 700;
	color: var(--pl-ink);
	margin: 0 0 0.3rem;
}

.pl-feature-body p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--pl-ink) 78%, transparent 22%);
}

/* ---------------------------------------------------------------------
   Pros list — .pl-pros (authored directly in page content)
   ------------------------------------------------------------------- */

.pl-content ul.pl-pros {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.pl-content ul.pl-pros > li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.9rem;
	align-items: start;
}

/* Force every real child (the .pl-pro-body wrapper, or a bare h3+p if an
   author skips it) into column 2, and the checkmark into column 1
   spanning both rows — robust to either markup shape, since grid
   auto-placement alone breaks the moment a <li> has 3 DOM children
   instead of the 2 an "auto 1fr" grid assumes. */
.pl-content ul.pl-pros > li::before {
	grid-row: 1 / span 2;
}

.pl-content ul.pl-pros > li > * {
	grid-column: 2;
}

.pl-content ul.pl-pros > li::before {
	content: '';
	width: 1.6rem;
	height: 1.6rem;
	margin-top: 0.15rem;
	border-radius: 50%;
	background: var(--pl-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
}

.pl-content ul.pl-pros h3 {
	font-family: var(--pl-font-heading);
	font-size: 1.03rem;
	font-weight: 700;
	color: var(--pl-ink);
	margin: 0 0 0.25rem;
}

.pl-content ul.pl-pros p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--pl-ink) 78%, transparent 22%);
}

/* ---------------------------------------------------------------------
   Editorial trust box
   ------------------------------------------------------------------- */

.pl-editorial {
	margin-top: 2.5rem;
	padding: 2.25rem 1.5rem;
	border-radius: var(--pl-radius);
	background: var(--pl-canvas);
	text-align: center;
}

.pl-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 0 1rem;
	border-radius: 50%;
	background: var(--pl-primary);
	overflow: hidden;
}

.pl-avatar--logo img {
	max-width: 78%;
	max-height: 78%;
	object-fit: contain;
}

.pl-avatar--initial {
	color: #fff;
	font-family: var(--pl-font-heading);
	font-size: 1.6rem;
	font-weight: 700;
	text-transform: uppercase;
}

.pl-editorial-name {
	font-family: var(--pl-font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--pl-ink);
	margin: 0 0 0.6rem;
}

.pl-editorial-blurb {
	max-width: 46ch;
	margin: 0 auto 0.85rem;
	font-size: 0.92rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--pl-ink) 78%, transparent 22%);
}

.pl-editorial-link {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--pl-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------- */

@media (max-width: 480px) {
	.pl-container {
		padding: 0 1rem 2.25rem;
	}

	.pl-cta {
		padding: 1.4rem 1.15rem;
	}

	.pl-content ul.pl-features > li {
		gap: 0.9rem;
	}

	.pl-feature-icon {
		width: 2.6rem;
		height: 2.6rem;
	}
}