/* ============================================================
   BAYOUPEP USA — DESIGN SYSTEM
   Brand-kept palette (var(--bp-primary)) with a NEW animated void background
   and NEW gradient button system.
   Tokens are overridable via ACF (#bayoupe-tokens inline <style>).
   ============================================================ */

:root {
	/* Official brand blue — all overridable from the admin "Brand & Background" panel.
	   The *-rgb channels let every glow/border/divider follow the picker live. */
	--bp-primary: #1B51EB;
	--bp-primary-rgb: 27, 81, 235;
	--bp-primary-dark: #1641C4;
	--bp-primary-hover: #3A6AF0;
	--bp-primary-hover-rgb: 58, 106, 240;
	--bp-accent: #1B51EB;
	--bp-accent-rgb: 27, 81, 235;
	--bp-bg: #050510;
	--bp-bg-2: #0a0a14;
	--bp-header-bg: #0D1117;
	--bp-card-bg: #161B22;

	--bp-ink: #F4F4F8;
	--bp-muted: #c2c2d6;
	--bp-line: rgba(var(--bp-primary-rgb), 0.30);
	--bp-glass: rgba(13, 17, 23, 0.55);
	--bp-glass-2: rgba(22, 27, 34, 0.70);

	--bp-radius: 16px;
	--bp-radius-sm: 10px;
	/* Norwester → Oswald substitute for the logo/company name; Montserrat everywhere else. */
	--bp-font: 'Montserrat', system-ui, sans-serif;
	/* League Spartan drives every heading and ALL-CAPS label site-wide. */
	--bp-caps: 'League Spartan', 'Oswald', sans-serif;
	--bp-display: var(--bp-caps);
	--bp-mono: 'Montserrat', system-ui, sans-serif;

	--bp-glow: 0 0 0 1px rgba(var(--bp-primary-rgb),0.35), 0 10px 40px -12px rgba(var(--bp-primary-rgb),0.55);
	--bp-shadow: 0 18px 50px -20px rgba(0,0,0,0.7);
}

/* ---------- NEW BACKGROUND DESIGN ----------
   Deep-space void: layered radial nebula over near-black.
   The animated canvas (void-bg.js) sits on top of this base. */
html { background: var(--bp-bg); }
body {
	background-color: var(--bp-bg);
	background-image:
		radial-gradient(1100px 700px at 12% -8%, rgba(var(--bp-primary-rgb),0.18), transparent 60%),
		radial-gradient(900px 600px at 100% 10%, rgba(var(--bp-accent-rgb),0.12), transparent 55%),
		radial-gradient(1200px 900px at 50% 120%, rgba(17, 71, 184,0.16), transparent 60%);
	background-attachment: fixed;
	color: var(--bp-ink);
	font-family: var(--bp-font);
	-webkit-font-smoothing: antialiased;
}

/* When a background video is active, let it show through:
   the body's own opaque background would otherwise cover the z-index:-1 video.
   The base color stays on <html>, so there is no flash. */
body.bp-has-bgvideo {
	background-color: transparent;
	background-image: none;
}

/* Site-wide background video (ACF-driven, behind everything) */
.bp-bgvideo {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.bp-bgvideo__el {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}
.bp-bgvideo__veil { position: absolute; inset: 0; }

/* Canvas layer painted by void-bg.js */
#bp-voidbg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
/* Keep real content above the canvas */
#page, .site, #content, .ast-container, .hentry, .bp-section { position: relative; z-index: 1; }

/* ---------- NEW BUTTON SYSTEM ---------- */
.bp-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--bp-caps);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: #fff !important;
	padding: 13px 26px;
	border: 0;
	border-radius: var(--bp-radius-sm);
	cursor: pointer;
	text-decoration: none;
	background: linear-gradient(135deg, var(--bp-primary) 0%, var(--bp-primary-hover) 100%);
	box-shadow: 0 8px 24px -8px rgba(var(--bp-primary-rgb),0.65), inset 0 1px 0 rgba(255,255,255,0.18);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
	overflow: hidden;
	line-height: 1;
}
.bp-btn::after,
.woocommerce a.button::after,
.woocommerce button.button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 45%);
	opacity: 0;
	transition: opacity .2s ease;
}
.bp-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 36px -8px rgba(var(--bp-primary-hover-rgb),0.85), inset 0 1px 0 rgba(255,255,255,0.25);
	background: linear-gradient(135deg, var(--bp-primary-hover) 0%, var(--bp-primary) 100%);
	color: #fff !important;
}
.bp-btn:hover::after,
.woocommerce a.button:hover::after { opacity: 1; }
.bp-btn:active,
.woocommerce a.button:active { transform: translateY(0); }

/* Ghost / secondary button */
.bp-btn--ghost {
	background: transparent;
	border: 1px solid var(--bp-line);
	color: var(--bp-ink) !important;
	box-shadow: none;
}
.bp-btn--ghost:hover {
	background: rgba(var(--bp-primary-rgb),0.10);
	border-color: var(--bp-primary);
	box-shadow: none;
}

/* ---------- GLASS PANEL ---------- */
.bp-glass {
	background: var(--bp-glass);
	border: 1px solid var(--bp-line);
	border-radius: var(--bp-radius);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--bp-shadow);
}

/* ---------- TYPOGRAPHY HELPERS ---------- */
/* Every heading uses League Spartan (via the display token). */
h1, h2, h3, h4, h5, h6 { font-family: var(--bp-display); }
.bp-eyebrow {
	font-family: var(--bp-caps);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bp-accent);
}
.bp-display {
	font-family: var(--bp-display);
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--bp-ink);
}
.bp-display .accent { color: var(--bp-primary); }
.bp-display .outline { -webkit-text-stroke: 1.5px var(--bp-primary); color: transparent; }

/* ---------- REVEAL ON SCROLL ---------- */
.bp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.bp-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.bp-reveal { opacity: 1 !important; transform: none !important; }
	#bp-voidbg { display: none; }
}

/* ---------- NEWSLETTER / OPT-IN FORM (sitewide component) ----------
   Used by the home newsletter, popup, VIP and Notifications pages. Kept here
   so the email + SMS opt-in renders correctly anywhere the form appears. */
.bp-nl-form { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.bp-nl-form__input {
	width: 100%; box-sizing: border-box;
	background: var(--bp-bg-2); color: var(--bp-ink);
	border: 1px solid var(--bp-line); border-radius: var(--bp-radius-sm);
	padding: 14px 16px; font-family: var(--bp-font); font-size: 15px;
	transition: border-color .18s, box-shadow .18s;
}
.bp-nl-form__input::placeholder { color: var(--bp-muted); opacity: .8; }
.bp-nl-form__input:focus { outline: none; border-color: var(--bp-primary); box-shadow: 0 0 0 3px rgba(var(--bp-primary-rgb),0.18); }
.bp-nl-form__consent { margin: 2px 0 4px; color: var(--bp-muted); font-size: 12px; line-height: 1.6; }
.bp-nl-form__consent a { color: var(--bp-accent); }
.bp-nl-form__btn { width: 100%; justify-content: center; padding-block: 15px; }
.bp-nl-form__status { font-size: 13px; color: var(--bp-muted); min-height: 18px; }
.bp-nl-form__status.is-ok { color: #4ade80; }
.bp-nl-form__status.is-err { color: #f87171; }
/* Already-subscribed state: inputs are hidden, show a clean confirmation. */
.bp-nl-form.is-subscribed { text-align: center; }
.bp-nl-form.is-subscribed .bp-nl-form__status {
	font-size: 15px; font-weight: 500;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 18px; min-height: 0;
	background: rgba(74, 222, 128, 0.08);
	border: 1px solid rgba(74, 222, 128, 0.30);
	border-radius: var(--bp-radius-sm);
}
.bp-nl-form.is-subscribed .bp-nl-form__status::before {
	content: "\2713"; font-weight: 700; color: #4ade80;
}
.bp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   RESPONSIVE SAFETY NET (site-wide — desktop / tablet / mobile)
   Stops containers being cut off, keeps content off the screen
   edges, and prevents any element forcing a horizontal scroll.
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
/* No media or wide element may spill past the viewport. */
img, video, svg, iframe, canvas, table, pre { max-width: 100%; }
img, video { height: auto; }

/* Every element sizes with its border/padding so nothing overflows its box. */
*, *::before, *::after { box-sizing: border-box; }

/* Tablet & below: guarantee a comfortable side gutter on every
   common container so text never touches the screen edge. */
@media (max-width: 1024px) {
	.bp-wrap,
	.coa-wrap,
	.bp-legal-content-inner,
	.bp-legal-hero-inner,
	.bp-legal-footer-cta-inner {
		width: min(100%, calc(100% - 56px));   /* 28px each side — roomy on tablet */
		padding-left: 0;
		padding-right: 0;
		margin-inline: auto;
	}
}
@media (max-width: 600px) {
	.bp-wrap,
	.coa-wrap,
	.bp-legal-content-inner,
	.bp-legal-hero-inner,
	.bp-legal-footer-cta-inner {
		width: calc(100% - 32px);               /* 16px each side on phones */
	}
}
