/* "Avenues: Landing page" template (templates/avenues-landing.php) and the Scoop campaign look.
   Scoop colours: mint is the campaign colour; teal and pink are the Fair package colours; sun is
   the Avenues yellow, kept for the buttons. The deep teal and pink carry white body text (AA). */

.av-landing {
	--scoop-mint: #A4EBE7;
	--scoop-mint-50: #E9FAF9;
	--scoop-teal: #4396B0;
	--scoop-teal-deep: #2B6F86;
	--scoop-pink: #D162A3;
	--scoop-pink-deep: #A83E7E;
	--scoop-sun: #FCD841;
	--scoop-ink: #1C1E21;
}

/* ---------- Slim top bar and footer ---------- */
.lp-wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter, 16px); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px); }
.lp-bar { position: sticky; top: 0; z-index: 100; background: var(--grey-900, #1C1E21); padding-block: 10px; }
.lp-bar .site-logo img, .lp-bar img { height: 30px; width: auto; display: block; }
.lp-bar-cta { padding: 0.6em 1.2em; font-size: 0.9375rem; white-space: nowrap; }
@media (max-width: 420px) { .lp-bar .site-logo img, .lp-bar img { height: 24px; } .lp-bar-cta { font-size: 0.8125rem; padding: 0.55em 0.9em; } }
.lp-foot { background: var(--grey-900, #1C1E21); color: var(--grey-300, #B4BBC1); font-size: var(--fs-xs, 0.8125rem); padding-block: var(--space-5, 24px); }
.lp-foot .lp-wrap { flex-wrap: wrap; }
.lp-foot a { color: var(--grey-300, #B4BBC1); }
.lp-foot-links { display: inline-flex; gap: var(--space-4, 16px); flex-wrap: wrap; }
.av-landing .entry-content > :first-child { margin-top: 0; }

/* ---------- Scoop: hero ---------- */
.scoop-hero {
	position: relative; overflow: hidden;
	background: var(--scoop-mint) url("img/scoop-cone.webp") no-repeat center bottom / min(92%, 520px) auto;
	color: var(--scoop-ink);
	padding-bottom: clamp(190px, 52vw, 260px) !important;
}
/* Desktop: text on the left in the page column, the cone bottom-right beside it. */
@media (min-width: 900px) {
	.scoop-hero { background-position: right max(var(--gutter, 16px), calc((100% - 1200px) / 2)) bottom 0; background-size: min(46%, 600px) auto; padding-bottom: var(--section-y-lg, 96px) !important; min-height: 520px; }
	.av-landing .scoop-hero > * { max-width: 600px; margin-left: max(0px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; }
}
.scoop-hero h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1.05; margin: 0.25em 0 0.35em; color: var(--scoop-ink); }
.scoop-hero p { font-size: 1.0625rem; }
.scoop-eyebrow { display: inline-block; margin: 0; padding: 0.35em 0.9em; border-radius: 999px; background: var(--scoop-pink-deep); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.scoop-hero .wp-block-button.is-style-outline > .wp-block-button__link { border-color: var(--scoop-ink); color: var(--scoop-ink); background: rgba(255,255,255,0.55); }

/* ---------- Scoop: sections ---------- */
.scoop-section h2, .scoop-steps h2, .scoop-picture h2 { color: var(--scoop-teal-deep); }
.scoop-tint { background: var(--scoop-mint-50); }
.scoop-cards { gap: var(--space-4, 16px) !important; }
.scoop-card { background: #fff; border: 2px solid var(--scoop-mint) !important; border-radius: 22px !important; box-shadow: 0 10px 28px rgba(43, 111, 134, 0.10) !important; }
.scoop-card h3 { color: var(--scoop-ink); margin-top: 0.5em; }
.scoop-card--mint { background: var(--scoop-mint); border-color: var(--scoop-mint) !important; }
.scoop-num { display: inline-grid; place-items: center; width: 46px; height: 46px; margin: 0 !important; border-radius: 50%; background: var(--scoop-pink-deep); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1; }
.scoop-steps .scoop-num { background: var(--scoop-sun); color: var(--scoop-pink-deep); }
.scoop-card--mint .scoop-num { background: var(--scoop-teal-deep); color: #fff; }

/* Clarity: signature yellow band, dark text. */
.scoop-clarity { background: var(--scoop-sun); color: var(--scoop-ink); }
.scoop-clarity p { color: var(--scoop-ink); font-size: 1.125rem; }
.scoop-clarity .scoop-kicker { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0.06em; color: var(--scoop-pink-deep); margin-bottom: 0.2em; }
.scoop-clarity strong { color: var(--scoop-pink-deep); }

/* Promo code tag. */
.scoop-code { display: inline-block; padding: 0.5em 1em; border: 2px dashed var(--scoop-pink-deep); border-radius: 12px; background: #fff; color: var(--scoop-pink-deep); font-weight: 600; }
.scoop-code strong { letter-spacing: 0.06em; }

/* Closing band: signature yellow; the booking button turns dark so it stands out on yellow. */
.scoop-close { background: var(--scoop-sun); color: var(--scoop-ink); text-align: center; }
.scoop-close h2, .scoop-close p { color: var(--scoop-ink); }
.scoop-close .wp-block-buttons { justify-content: center; }
.scoop-close .scoop-code { color: var(--scoop-pink-deep); }
.scoop-close .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--scoop-ink); color: #fff; box-shadow: none; }
.scoop-close .wp-block-button.is-style-outline > .wp-block-button__link,
.scoop-close .wp-block-button > .wp-block-button__link[href*="#free"] { border: 2px solid var(--scoop-ink); color: var(--scoop-ink); background: transparent; }

/* ---------- [avenues_repro_picture] ---------- */
.av-repro { --r: 168px; position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }
.av-repro-ring { position: absolute; inset: 15%; border: 2px dashed var(--scoop-teal, #4396B0); border-radius: 50%; opacity: 0.5; }
.av-repro-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--scoop-sun, #FCD841); color: var(--scoop-ink, #1C1E21); font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 3.4vw, 1.375rem); line-height: 1.15; text-align: center; box-shadow: 0 0 0 12px rgba(252, 216, 65, 0.25); }
.av-repro-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); padding: 0.45em 0.95em; border-radius: 999px; background: #fff; border: 2px solid var(--scoop-mint, #A4EBE7); color: var(--scoop-ink, #1C1E21); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; box-shadow: 0 8px 20px rgba(43, 111, 134, 0.12); }
.av-repro-tag:nth-of-type(even) { border-color: var(--scoop-pink, #D162A3); }
@media (max-width: 520px) { .av-repro { --r: 128px; width: 100%; max-width: 340px; } .av-repro-tag { font-size: 0.8125rem; padding: 0.35em 0.75em; } }