/*
Lamy — Site (Project B) base utilities.

Enqueued ONLY on pages using page-site.php, via lamy_site_enqueue_assets()
in functions.php. All selectors are scoped to .site-* classes or
body.site-active to guarantee zero interference with the LP page.

Tokens reused (from style.css :root) — no new tokens introduced:
  --bg-primary, --bg-section, --bg-card, --bg-card-raised,
  --gold-primary, --gold-warm, --gold-highlight,
  --purple-deep, --purple-electric, --purple-glow, --purple-atmosphere,
  --text-heading, --text-body, --text-meta,
  --cta-gradient, --accent-gradient,
  --max-content, --max-wide, --fs-h1, --fs-h2, --fs-h3, --fs-body
*/

/* ============================================================
   Hide GeneratePress parent chrome on site pages (parallels the
   LP page's body.lp-active rules in lp.css). Only fires when the
   body has .site-active — the LP page never has this class, so
   the LP page is unaffected.
   ============================================================ */
body.site-active .site-header,
body.site-active .navigation-branding,
body.site-active .menu-toggle,
body.site-active .main-navigation,
body.site-active .top-bar,
body.site-active .inside-header,
body.site-active .site-footer,
body.site-active footer.site-info,
body.site-active .site-info,
body.site-active .footer-widgets {
	display: none !important;
}

body.site-active {
	background-color: var(--bg-primary);
}

body.site-active #page,
body.site-active .site-content,
body.site-active .content-area {
	background-color: transparent !important;
}

/* Full-bleed canvas on site pages: the generate_sidebar_layout filter
   (functions.php) sets no-sidebar; these rules hide any residual widget area
   and force GeneratePress's container chain to full width, so our .site-section
   backgrounds reach edge-to-edge (inner .site-container caps the content width),
   exactly like the LP. Scoped to body.site-active — the LP is never affected. */
body.site-active .sidebar,
body.site-active .widget-area,
body.site-active #right-sidebar,
body.site-active #left-sidebar {
	display: none !important;
}
body.site-active #page,
body.site-active #content,
body.site-active .site-content,
body.site-active .content-area,
body.site-active #primary {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	/* GP's #content.site-content is display:flex (content|sidebar). With the
	   sidebar gone our <main> + part-site-footer became two flex COLUMNS.
	   Force block so they stack vertically full-width (footer at the bottom). */
	display: block !important;
}
/* Footer always a full-width bottom block — clear any float/grid above it. */
body.site-active .site-footer-wrap {
	clear: both !important;
	width: 100% !important;
}

/* ============================================================
   Layout primitives
   ============================================================ */
.site-page {
	background: var(--bg-primary);
	color: var(--text-body);
	min-height: 100vh;
}

.site-section {
	position: relative;
	padding-block: clamp(48px, 8vw, 110px);
	padding-inline: clamp(20px, 4vw, 48px);
	overflow: hidden;
}

.site-container {
	max-width: var(--max-content);
	margin-inline: auto;
	position: relative;
}

.site-container--wide {
	max-width: var(--max-wide);
}

/* ============================================================
   CTA buttons (namespaced .site-cta — does NOT touch .btn-cta-primary
   used by the LP, so there is no class collision).
   ============================================================ */
.site-cta {
	display: inline-block;
	background: var(--cta-gradient);
	color: #100C00;
	font-family: 'Heebo', sans-serif;
	font-weight: 700;
	letter-spacing: 0.01em;
	border: 0;
	border-radius: 12px;
	padding: 13px 28px;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 16px rgba(212, 175, 55, 0.24);
}
.site-cta:hover,
.site-cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 32px rgba(212, 175, 55, 0.45);
	color: #100C00;
}
.site-cta--sm { padding: 9px 18px;  font-size: 13px; }
.site-cta--lg { padding: 18px 40px; font-size: 18px; font-weight: 600; }

.site-cta-secondary {
	display: inline-block;
	background: transparent;
	color: var(--gold-primary);
	font-family: 'Heebo', sans-serif;
	font-weight: 500;
	border: 1px solid rgba(212, 175, 55, 0.3);
	border-radius: 6px;
	padding: 12px 27px;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.site-cta-secondary:hover,
.site-cta-secondary:focus-visible {
	background: rgba(212, 175, 55, 0.07);
	border-color: rgba(212, 175, 55, 0.5);
}

/* ============================================================
   Card (namespaced .site-card to avoid colliding with .lp-card)
   ============================================================ */
.site-card {
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 28px;
	position: relative;
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-card:hover {
	border-color: rgba(212, 175, 55, 0.2);
}
.site-card--gradient {
	background:
		linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
		var(--accent-gradient) border-box;
	border: 1px solid transparent;
}

/* ============================================================
   Accessibility — skip link + focus ring (scoped, NOT global)
   ============================================================ */
.site-skip-link {
	position: absolute;
	top: -50px;
	inset-inline-start: 16px;
	background: var(--gold-primary);
	color: #100C00;
	padding: 8px 14px;
	border-radius: 4px;
	font-weight: 700;
	z-index: 10000;
	text-decoration: none;
	transition: top 0.15s ease;
}
.site-skip-link:focus,
.site-skip-link:focus-visible {
	top: 16px;
}

.site-page :where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--gold-highlight);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ============================================================
   Section eyebrow label (namespaced — parallels .lp-section-label)
   ============================================================ */
.site-section-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--gold-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.site-section-label::before {
	content: '';
	width: 28px;
	height: 1px;
	background: linear-gradient(to left, var(--gold-primary), transparent);
}

/* ============================================================
   Dividers (namespaced)
   ============================================================ */
.site-divider-gold {
	height: 1px;
	border: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(212, 175, 55, 0.3) 30%,
		rgba(212, 175, 55, 0.3) 70%,
		transparent 100%
	);
}
.site-divider-gradient {
	height: 1px;
	border: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(212, 175, 55, 0.55) 20%,
		rgba(138, 79, 255, 0.55) 50%,
		rgba(212, 175, 55, 0.55) 80%,
		transparent 100%
	);
}

/* ============================================================
   Reduce motion (scoped to .site-page descendants — does NOT
   override the LP page's own rule because the selector is
   scoped under .site-page).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.site-page *, .site-page *::before, .site-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}