/* ==========================================================================
   Citrus Pop — bright, illustrated, built for locals under 40
   Additive only: reuses every existing token/button/section class. New
   rules below cover only what the base site doesn't have — the warm
   hero, the icon mood grid, illustrated cards, the map banner, the club
   box, the logo mark, and the join-the-club popup.
   ========================================================================== */

body { background: var(--cp-cream, #FBF3E4); }

/* A locally-scoped warm palette — never touches the shared tokens, so
   Classic and Editorial are completely unaffected. */
:root {
	--cp-cream: #FBF3E4;
	--cp-sand: #F3E4C8;
}

/* ---- Logo mark, added to every page via the shared .brand element ---- */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand::before {
	content: "";
	width: 30px; height: 30px; flex: none;
	background: url('/assets/brand/logo-mark.svg') center / contain no-repeat;
}

/* ---- Hero ---- */
.cp-hero { padding: var(--sp-10) 0 var(--sp-8); background: var(--cp-cream); }
.cp-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.cp-hero-copy h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); max-width: 14ch; }
.cp-hero-copy h1 em { font-style: normal; color: var(--act); }
.cp-lead { font-size: var(--fs-md); color: var(--ink-soft); max-width: 42ch; margin: var(--sp-4) 0 var(--sp-6); }

.cp-search { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cp-select {
	appearance: none; background: var(--bg-card); border: 1px solid var(--line-strong);
	border-radius: var(--r-pill); padding: 12px 36px 12px 18px; font: inherit; font-size: var(--fs-sm); color: var(--ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347605E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}

.cp-hero-art { position: relative; }
.cp-blob {
	position: absolute; inset: 6% 10%;
	background: var(--sun-wash);
	border-radius: 46% 54% 60% 40% / 50% 45% 55% 50%;
	z-index: 0;
}
.cp-hero-art img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }

/* ---- Mood icon grid (replaces plain text pills) ---- */
.cp-mood-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.cp-mood-tile {
	display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
	background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: var(--sp-5) var(--sp-2); text-align: center;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.cp-mood-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--act); }
.cp-mood-icon {
	width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--sun-wash); color: var(--act-hover);
}
.cp-mood-icon svg { width: 24px; height: 24px; }
.cp-mood-label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
@media (max-width: 820px) { .cp-mood-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .cp-mood-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Illustrated gem cards ---- */
.cp-gem-card { background: var(--bg-card); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform 160ms ease, box-shadow 160ms ease; }
.cp-gem-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.cp-gem-photo { position: relative; height: 150px; background-size: cover; background-position: center; }
.cp-gem-score { position: absolute; top: 10px; right: 10px; background: #fff; color: var(--ink); font-weight: 800; font-size: var(--fs-xs); border-radius: var(--r-pill); padding: 4px 10px; box-shadow: var(--shadow-card); }
.cp-gem-card .body { padding: var(--sp-4); }
.cp-gem-card h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--ink); margin-bottom: 2px; }
.cp-gem-card .meta { font-size: var(--fs-xs); color: var(--ink-faint); }

/* ---- Map banner ---- */
.cp-map-banner {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
	background: var(--petrol-950); color: #fff; border-radius: var(--r-lg); padding: var(--sp-6);
	background-image: radial-gradient(circle at 88% 30%, rgba(240,167,44,.25), transparent 55%);
}
.cp-map-banner-text h3 { font-family: var(--font-display); color: #fff; font-size: var(--fs-lg); font-weight: 800; margin-bottom: 4px; }
.cp-map-banner-text p { color: var(--ink-on-dark-soft); font-size: var(--fs-sm); max-width: 44ch; }
.cp-map-banner-cta { font-weight: 700; color: var(--sun); white-space: nowrap; }

/* ---- Bites Club box ---- */
.cp-club { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-8); align-items: center; background: var(--cp-sand); border-radius: var(--r-lg); padding: var(--sp-8); }
.cp-club-art { width: 220px; height: auto; }
.cp-eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--act-hover); }
.cp-club-copy h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); margin: 6px 0 10px; color: var(--ink); }
.cp-club-copy p { color: var(--ink-soft); max-width: 50ch; margin-bottom: var(--sp-5); }
@media (max-width: 700px) { .cp-club { grid-template-columns: 1fr; text-align: center; } .cp-club-art { justify-self: center; width: 160px; } }

@media (max-width: 820px) { .cp-hero-grid { grid-template-columns: 1fr; } .cp-hero-art { order: -1; max-width: 380px; margin: 0 auto; } }

/* ---- Scroll-reveal: purposeful, not decorative — content settles in as it
   arrives, matching the "arriving at your table" feel. Respects reduced motion. ---- */
.cp-reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; }
.cp-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cp-reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Join-the-club popup ---- */
.cp-popup-overlay {
	position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
	background: rgba(16,40,44,.5); padding: var(--sp-4);
	opacity: 0; pointer-events: none; transition: opacity 220ms ease;
}
.cp-popup-overlay.is-open { opacity: 1; pointer-events: auto; }
.cp-popup {
	position: relative; background: var(--petrol-950); color: #fff; border-radius: var(--r-xl);
	max-width: 480px; width: 100%; padding: var(--sp-8) var(--sp-6) var(--sp-6);
	overflow: hidden; text-align: center;
	transform: scale(.94) translateY(10px); transition: transform 220ms ease;
}
.cp-popup-overlay.is-open .cp-popup { transform: none; }
.cp-popup-blob { position: absolute; top: -30%; right: -20%; width: 70%; height: 140%; background: var(--sun); opacity: .18; border-radius: 44% 56% 62% 38% / 48% 42% 58% 52%; }
.cp-popup-close { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 16px; line-height: 1; cursor: pointer; }
.cp-popup-close:hover { background: rgba(255,255,255,.2); }
.cp-popup h3 { position: relative; font-family: var(--font-display); color: #fff; font-size: var(--fs-xl); font-weight: 800; margin-bottom: var(--sp-2); }
.cp-popup-benefits { position: relative; display: flex; flex-direction: column; gap: 8px; margin: var(--sp-4) 0 var(--sp-6); text-align: left; max-width: 340px; margin-inline: auto; }
.cp-popup-benefits li { list-style: none; display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--ink-on-dark-soft); }
.cp-popup-benefits svg { width: 18px; height: 18px; color: var(--sun); flex: none; }
.cp-popup-qr { position: relative; display: flex; align-items: center; gap: var(--sp-4); background: rgba(255,255,255,.06); border-radius: var(--r-lg); padding: var(--sp-4); text-align: left; }
.cp-popup-qr img { width: 84px; height: 84px; border-radius: var(--r-sm); background: #fff; padding: 6px; flex: none; }
.cp-popup-qr b { display: block; color: #fff; font-size: var(--fs-sm); margin-bottom: 2px; }
.cp-popup-qr span { font-size: var(--fs-xs); color: var(--ink-on-dark-soft); }