/*
 * Beyond Lines — homepage "bridge" layer.
 * Loaded ONLY on the homepage, AFTER beyond-lines.css. Harmonises the homepage
 * with the light-editorial inner pages so the site feels like ONE store.
 * Strategy (Option A): DARK "cover + bookends" (header, hero, ticker, newsletter
 * CTA card, footer) around a LIGHT cream browsing middle. Recolour only — the
 * original design file and the page structure are untouched.
 */

/* ---- 1) Flip homepage palette tokens to light editorial ------------- */
body.bl-home {
	--bl-bg:          #f4efe4;
	--bl-bg-2:        #ffffff;
	--bl-bg-3:        #e3d9c7;
	--bl-fg:          #1b1712;
	--bl-fg-2:        #4c4437;
	--bl-muted:       #8c8375;
	--bl-line:        rgba(27, 23, 18, 0.12);
	--bl-line-strong: rgba(27, 23, 18, 0.22);
	--bl-accent:      #d9591f;   /* one unified orange across the whole site */
	--bl-accent-fg:   #ffffff;
	--bl-surface:     #efe9dd;
	background: #f4efe4;
	color: #1b1712;
}

/* ---- 2) Re-lock the DARK "cover + bookends" ------------------------- */
body.bl-home .bl-header-wrapper,
body.bl-home .bl-hero-slider,
body.bl-home .bl-motion-ticker,
body.bl-home .bl-newsletter-offer,
body.bl-home .bl-footer {
	--bl-bg:          #0c0c0d;
	--bl-bg-2:        #151516;
	--bl-bg-3:        #1f1e1c;
	--bl-fg:          #f5f1e8;
	--bl-fg-2:        #ded7ca;
	--bl-muted:       #948f84;
	--bl-line:        rgba(245, 241, 232, 0.10);
	--bl-line-strong: rgba(245, 241, 232, 0.20);
	--bl-surface:     #f3efe6;
	color: #f5f1e8;
}

/* ---- 3) Consistent vertical rhythm across the middle sections ------- */
body.bl-home .bl-section,
body.bl-home .bl-campaigns,
body.bl-home .bl-trust-strip,
body.bl-home .bl-spotlight {
	padding-top: clamp(58px, 7vw, 92px);
	padding-bottom: clamp(58px, 7vw, 92px);
}

/* ---- 4) Product grid cards: clean, dark ink on cream --------------- */
body.bl-home .bl-product-card { background: transparent; }
body.bl-home .bl-product-card__media { background: var(--bl-surface); }
body.bl-home .bl-product-card__info h3 { color: var(--bl-fg); }
body.bl-home .bl-product-card__info span { color: var(--bl-accent); }
body.bl-home .bl-product-card p { color: var(--bl-muted); }

/* ---- 5) Image-tile cards (categories + campaigns) keep LIGHT text --- *
 * Their text sits over photos, so it must stay light regardless of the
 * light page base. This also fixes the invisible campaign heading below. */
body.bl-home .bl-collection-card,
body.bl-home .bl-collection-card *,
body.bl-home .bl-campaign-card,
body.bl-home .bl-campaign-card * { color: #f5f1e8; }
body.bl-home .bl-collection-card,
body.bl-home .bl-campaign-card { border: none; }

/* ---- 6) Editorial campaigns: LIGHT section, dark heading on cream --- */
body.bl-home .bl-campaigns {
	background:
		radial-gradient(circle at 18% 12%, rgba(217, 89, 31, 0.07), transparent 30%),
		transparent;
	border-top: none;
}
body.bl-home .bl-campaigns__head h2 { color: var(--bl-fg); }
body.bl-home .bl-campaigns__head p { color: var(--bl-fg-2); }

/* ---- 7) Trust strip: borderless, editorial (no extra boxes) -------- */
body.bl-home .bl-trust-strip { background: transparent; border-top: none; }
body.bl-home .bl-trust-item {
	background: transparent;
	border: none;
	border-top: 1px solid var(--bl-bg-3);
	padding: 22px 0 0;
}
body.bl-home .bl-trust-item h2 { color: var(--bl-fg); }
body.bl-home .bl-trust-item p { color: var(--bl-fg-2); }
body.bl-home .bl-trust-item span { color: var(--bl-accent); }

/* ---- 8) Newsletter: a clean DARK CTA card floating on the cream ---- */
body.bl-home .bl-newsletter-offer { border-top: none; }
body.bl-home .bl-newsletter-offer__inner { border-radius: 16px; overflow: hidden; }

/* ---- 8b) Footer legal links row (homepage dark footer) ------------ */
body.bl-home .bl-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
}
body.bl-home .bl-footer-legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}
body.bl-home .bl-footer-legal a {
	color: #b9b1a3 !important;
	font-family: var(--bl-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
body.bl-home .bl-footer-legal a:hover { color: var(--bl-accent) !important; }

/* ---- 9) Ghost buttons on the light base need dark outlines --------- */
body.bl-home .bl-button--ghost {
	color: var(--bl-fg);
	border-color: var(--bl-line-strong);
}

/* ---- 10) Nav link legibility --------------------------------------- *
 * The ported design set nav links in Courier New at heavy letter-spacing,
 * which reads poorly at small sizes. Switch to Work Sans (semi-bold),
 * keep the uppercase/spaced "editorial" feel but much more readable,
 * without making the text noticeably bigger. Prices/badges/tags elsewhere
 * still use the mono font on purpose — this only retargets navigation. */
body.bl-home .bl-header__link,
body.bl-home .bl-drawer__link,
body.bl-home .bl-drawer__utility,
body.bl-home .bl-nav-menu__panel a {
	font-family: var(--bl-body);
	font-weight: 600;
	letter-spacing: 0.03em;
}
body.bl-home .bl-header__link { font-size: 12px; }
body.bl-home .bl-nav-menu__panel a { font-size: 12px; }

/* ---- 11) Hero: let clicks pass through the empty invisible text box - *
 * .bl-hero-slide__content spans the full slide (z-index:3) so it sat on
 * top of the collage images (z-index:2) wherever there was no visible
 * text, silently swallowing clicks meant for the product photos — only
 * the small label chip (which sits in its own higher stacking context)
 * still worked. Make the container pass clicks through except on its
 * real interactive children (the two CTA buttons). */
body.bl-home .bl-hero-slide__content {
	pointer-events: none;
}
body.bl-home .bl-hero-slide__content a,
body.bl-home .bl-hero-slide__content button {
	pointer-events: auto;
}

/* The single-product hero visual was originally a decorative, non-clickable
   div (pointer-events:none, aria-hidden) — now a real link to the product
   (see inc/homepage.php), so it needs to actually receive clicks + look
   interactive. */
body.bl-home a.bl-hero-slide__visual {
	pointer-events: auto;
	cursor: pointer;
	text-decoration: none;
	display: block;
}

/* ---- 13) Mega-menu (Shop dropdown): more contrast, less "washed out" - *
 * The panel's near-black background was almost identical to the page
 * background behind it, so it read as flat/see-through. Give it real
 * separation + a touch of blur, and fill in the mini category boxes so
 * they don't look like empty outlines. */
body.bl-home .bl-nav-menu__panel {
	background: rgba(15, 12, 10, 0.98);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-color: rgba(245, 241, 232, 0.14);
	box-shadow: 0 32px 100px rgba(0, 0, 0, 0.6);
}
body.bl-home .bl-mega-menu__mini div {
	background: rgba(245, 241, 232, 0.05);
	border-color: rgba(245, 241, 232, 0.14);
}
body.bl-home .bl-mega-menu__mini a:hover {
	background: rgba(240, 138, 36, 0.1);
}

/* ---- 16) Featured Categories grid — was hardcoded to 4 columns (the  *
 * original Shopify catalog had 8 categories, wrapping into 2 rows of 4).
 * We have 5 real categories now, which left an orphan 5th tile alone on
 * its own row. Desktop: all 5 side by side. Mobile: 2 per row throughout
 * (the ported CSS dropped to a single column under 640px). */
body.bl-home .bl-collection-grid {
	grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 640px) {
	body.bl-home .bl-collection-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ---- 15) Fix illegible vertical eyebrow text (real bug in the ported *
 * CSS): `.bl-kicker span` targets EVERY span inside .bl-kicker,
 * including the one holding real text (the eyebrow, e.g. "Beyond Lines
 * - Est. 2025"), forcing it into an 8x8px circle meant only for the
 * decorative bullet dot — the text then wraps one letter per line. Reset
 * every span after the first (the real dot) back to normal text. */
body.bl-home .bl-kicker span:not(:first-child) {
	width: auto;
	height: auto;
	min-width: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	display: inline;
}

/* ---- 14) Clear the fixed admin-only "Coming soon" banner ----------- *
 * WooCommerce's #coming-soon-footer-banner is position:fixed; bottom:0
 * and only ever shows to logged-in admins previewing the (still-private)
 * site — real customers never see it. But while it's showing it sits
 * permanently over the last ~90px of the viewport, hiding the real
 * <footer> during preview even though the footer itself renders fine.
 * :has() lets this rule apply only when that banner actually exists. */
body:has(#coming-soon-footer-banner) .bl-footer {
	margin-bottom: 90px;
}

/* ================================================================== *
 * Short, elegant intro (plays once on homepage load, ~1.6s, then gone)
 * ================================================================== */
.bl-intro {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	background: #0c0c0d;
	animation: blIntroOut 0.7s ease 1.15s forwards;
}
.bl-intro__mark {
	font-family: var(--bl-display, Impact), sans-serif;
	font-size: clamp(42px, 9vw, 120px);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #f5f1e8;
	opacity: 0;
	transform: translateY(14px);
	animation: blIntroInMark 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards;
}
.bl-intro__mark span { color: #d9591f; }
.bl-intro__line {
	display: block;
	height: 2px;
	width: 0;
	margin: 18px auto 0;
	background: #d9591f;
	animation: blIntroLine 0.7s ease 0.5s forwards;
}
@keyframes blIntroInMark { to { opacity: 1; transform: none; } }
@keyframes blIntroLine { to { width: min(240px, 42vw); } }
@keyframes blIntroOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
	.bl-intro { animation: blIntroOut 0.3s ease 0.2s forwards; }
	.bl-intro__mark { animation: none; opacity: 1; transform: none; }
}

/* ================================================================== *
 * Occasion Spotlight — admin-controlled featured product for a day/event.
 * A dramatic dark showcase box on the cream page.
 * ================================================================== */
.bl-spotlight { position: relative; }
.bl-spotlight__inner {
	max-width: var(--bl-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(20px, 4vw, 60px);
	align-items: stretch;
	background:
		radial-gradient(circle at 82% 12%, rgba(217, 89, 31, 0.22), transparent 42%),
		linear-gradient(150deg, #1a1512 0%, #0c0c0d 60%);
	border: 1px solid rgba(245, 241, 232, 0.08);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 40px 120px -50px rgba(0, 0, 0, 0.7);
}
.bl-spotlight__media {
	position: relative;
	min-height: 340px;
	background: var(--bl-surface);
}
.bl-spotlight__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bl-spotlight__content {
	padding: clamp(28px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	color: #f5f1e8;
}
.bl-spotlight__badge {
	align-self: flex-start;
	background: #d9591f;
	color: #fff;
	font-family: var(--bl-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 7px 12px;
	border-radius: 2px;
}
.bl-spotlight__eyebrow {
	font-family: var(--bl-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #d9591f;
	margin: 0;
}
.bl-spotlight__heading {
	font-family: var(--bl-display);
	text-transform: uppercase;
	font-size: clamp(34px, 4.4vw, 64px);
	line-height: 0.95;
	color: #f5f1e8;
	margin: 0;
}
.bl-spotlight__body {
	color: #ded7ca;
	font-size: 15px;
	line-height: 1.6;
	max-width: 46ch;
	margin: 0;
}
.bl-spotlight__price {
	font-family: var(--bl-mono);
	font-size: 22px;
	font-weight: 700;
	color: #f2922e;
	margin: 4px 0 6px;
}
.bl-spotlight__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #d9591f;
	color: #fff;
	font-family: var(--bl-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 15px 26px;
	border-radius: 3px;
	text-decoration: none;
	transition: transform 0.2s ease, background 0.2s ease;
}
.bl-spotlight__cta:hover { transform: translateY(-2px); background: #c14e18; color: #fff; }

@media (max-width: 860px) {
	.bl-spotlight__inner { grid-template-columns: 1fr; }
	.bl-spotlight__media { min-height: 300px; }
}

/* ---- Multi Occasion Spotlight (2-3 featured picks) ----------------- *
 * A distinctive, premium "featured picks" band that reads clearly as a
 * special/limited offer set — dark, warm-lit, with gradient-glow cards,
 * an occasion ribbon, and a badge. Different on purpose from the normal
 * light product grid so it stands out. */
.bl-spotlights { position: relative; }
.bl-spotlights__inner {
	max-width: var(--bl-container);
	margin: 0 auto;
	padding-inline: var(--bl-pad);
}
.bl-spotlights__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	font-family: var(--bl-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #d9591f;
}
.bl-spotlights__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.bl-spotlights__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

.bl-spotlight-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: #f5f1e8;
	background:
		radial-gradient(circle at 80% 0%, rgba(217, 89, 31, 0.28), transparent 46%),
		linear-gradient(155deg, #1c1712 0%, #0c0c0d 62%);
	border: 1px solid rgba(245, 241, 232, 0.09);
	box-shadow: 0 30px 80px -44px rgba(0, 0, 0, 0.75);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bl-spotlight-card:hover {
	transform: translateY(-6px);
	border-color: rgba(242, 146, 46, 0.55);
	box-shadow: 0 40px 90px -40px rgba(217, 89, 31, 0.45);
}
.bl-spotlight-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bl-surface);
	overflow: hidden;
}
.bl-spotlight-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bl-spotlight-card:hover .bl-spotlight-card__media img { transform: scale(1.05); }
.bl-spotlight-card__ribbon {
	position: absolute;
	top: 14px; left: 0;
	background: #d9591f;
	color: #fff;
	font-family: var(--bl-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 7px 14px 7px 12px;
	border-radius: 0 4px 4px 0;
	box-shadow: 0 6px 18px -6px rgba(217, 89, 31, 0.8);
}
.bl-spotlight-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 22px 24px;
	flex: 1;
}
.bl-spotlight-card__badge {
	align-self: flex-start;
	font-family: var(--bl-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #f2922e;
	border: 1px solid rgba(242, 146, 46, 0.4);
	border-radius: 999px;
	padding: 4px 10px;
}
.bl-spotlight-card__heading {
	font-family: var(--bl-display);
	text-transform: uppercase;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 0.98;
	color: #f5f1e8;
	margin: 0;
}
.bl-spotlight-card__text {
	color: #ded7ca;
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}
.bl-spotlight-card__foot {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.bl-spotlight-card__price {
	font-family: var(--bl-mono);
	font-size: 18px;
	font-weight: 700;
	color: #f2922e;
}
.bl-spotlight-card__cta {
	font-family: var(--bl-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #f5f1e8;
	white-space: nowrap;
}
.bl-spotlight-card:hover .bl-spotlight-card__cta { color: #f2922e; }

@media (max-width: 860px) {
	.bl-spotlights__grid,
	.bl-spotlights__grid[data-count="3"] { grid-template-columns: 1fr; }
}