/* ============================================================
   BSKL Premium - design layer on top of Tailwind
   Single source of truth: this file is also inlined by the
   static rebuild (rebuild-premium.js), so the WP theme and the
   static site share identical styles.
   ============================================================ */

/* ---------- Theme palette (CSS variables) ----------
   Tailwind config maps every color to rgb(var(--bskl-*) / <alpha-value>)
   so the whole site re-themes from these variables. */
:root {
	--bskl-primary: 10 37 64;
	--bskl-on-primary: 255 255 255;
	--bskl-primary-container: 10 37 64;
	--bskl-on-primary-container: 201 216 234;
	--bskl-primary-fixed: 225 238 255;
	--bskl-on-primary-fixed: 0 28 55;
	--bskl-primary-fixed-dim: 176 200 235;
	--bskl-on-primary-fixed-variant: 49 72 101;
	--bskl-secondary: 212 175 55;
	--bskl-on-secondary: 10 37 64;
	--bskl-secondary-container: 212 175 55;
	--bskl-on-secondary-container: 10 37 64;
	--bskl-secondary-fixed: 212 175 55;
	--bskl-secondary-fixed-dim: 233 195 73;
	--bskl-on-secondary-fixed: 10 37 64;
	--bskl-on-secondary-fixed-variant: 87 69 0;
	--bskl-surface: 250 249 251;
	--bskl-surface-container: 245 243 246;
	--bskl-surface-container-low: 245 243 246;
	--bskl-surface-container-high: 233 232 234;
	--bskl-surface-container-highest: 227 226 229;
	--bskl-surface-container-lowest: 255 255 255;
	--bskl-surface-variant: 227 226 229;
	--bskl-surface-dim: 219 217 220;
	--bskl-surface-bright: 250 249 251;
	--bskl-background: 250 249 251;
	--bskl-on-background: 10 37 64;
	--bskl-on-surface: 10 37 64;
	--bskl-on-surface-variant: 67 71 77;
	--bskl-outline: 116 119 126;
	--bskl-outline-variant: 227 226 229;
	--bskl-inverse-surface: 10 37 64;
	--bskl-inverse-on-surface: 255 255 255;
	--bskl-inverse-primary: 176 200 235;
	--bskl-surface-tint: 10 37 64;
	--bskl-error: 186 26 26;
	--bskl-error-container: 255 218 214;
	--bskl-on-error: 255 255 255;
	--bskl-on-error-container: 147 0 10;
	--bskl-tertiary: 26 11 0;
	--bskl-tertiary-container: 56 29 0;
	--bskl-tertiary-fixed: 255 220 190;
	--bskl-tertiary-fixed-dim: 238 189 144;
	--bskl-on-tertiary-fixed: 45 22 0;
	--bskl-on-tertiary-container: 174 131 90;
	--bskl-on-tertiary-fixed-variant: 97 63 28;

	--bskl-primary-deep: 10 37 64;
	--bskl-card: 255 255 255;
	--bskl-card-border: 227 226 229;
	color-scheme: light;
}

html.dark {
	--bskl-primary: 222 236 252;
	--bskl-on-primary: 10 37 64;
	--bskl-primary-container: 19 40 66;
	--bskl-on-primary-container: 201 216 234;
	--bskl-primary-fixed: 201 216 234;
	--bskl-on-primary-fixed: 10 37 64;
	--bskl-primary-fixed-dim: 110 142 180;
	--bskl-on-primary-fixed-variant: 176 200 235;
	--bskl-secondary: 233 195 73;
	--bskl-on-secondary: 10 37 64;
	--bskl-secondary-container: 64 50 0;
	--bskl-on-secondary-container: 233 195 73;
	--bskl-secondary-fixed: 233 195 73;
	--bskl-secondary-fixed-dim: 212 175 55;
	--bskl-on-secondary-fixed: 10 37 64;
	--bskl-on-secondary-fixed-variant: 233 195 73;
	--bskl-surface: 12 18 30;
	--bskl-surface-container: 18 27 42;
	--bskl-surface-container-low: 15 23 36;
	--bskl-surface-container-high: 25 36 54;
	--bskl-surface-container-highest: 30 43 63;
	--bskl-surface-container-lowest: 9 14 24;
	--bskl-surface-variant: 28 39 56;
	--bskl-surface-dim: 12 18 30;
	--bskl-surface-bright: 26 37 54;
	--bskl-background: 9 14 24;
	--bskl-on-background: 224 231 240;
	--bskl-on-surface: 224 231 240;
	--bskl-on-surface-variant: 168 178 192;
	--bskl-outline: 130 140 156;
	--bskl-outline-variant: 36 47 66;
	--bskl-inverse-surface: 224 231 240;
	--bskl-inverse-on-surface: 12 18 30;
	--bskl-inverse-primary: 10 37 64;
	--bskl-surface-tint: 176 200 235;
	--bskl-error: 255 180 171;
	--bskl-error-container: 104 0 8;
	--bskl-on-error: 74 0 5;
	--bskl-on-error-container: 255 218 214;
	--bskl-tertiary: 233 190 180;
	--bskl-tertiary-container: 86 36 24;
	--bskl-tertiary-fixed: 255 220 190;
	--bskl-tertiary-fixed-dim: 238 189 144;
	--bskl-on-tertiary-fixed: 45 22 0;
	--bskl-on-tertiary-container: 255 218 214;
	--bskl-on-tertiary-fixed-variant: 97 63 28;

	--bskl-primary-deep: 10 37 64;
	--bskl-card: 18 27 42;
	--bskl-card-border: 36 47 66;
	color-scheme: dark;
}

/* ---------- Base ---------- */
img, video, canvas, svg { max-width: 100%; }
body { overflow-x: hidden; }
h1, h2, h3, h4, h5, p, a, button, span, li, label {
	overflow-wrap: break-word;
}
.flex > * { min-width: 0; }
button, input, select, textarea { max-width: 100%; }

/* ---------- Legacy premium classes ---------- */
.glass-nav {
	backdrop-filter: saturate(160%) blur(24px);
	background-color: rgba(255, 255, 255, 0.78);
	-webkit-backdrop-filter: saturate(160%) blur(24px);
}
.glass-card {
	backdrop-filter: blur(24px);
	background-color: rgba(10, 37, 64, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(24px);
}
html.dark .glass-nav {
	background-color: rgba(9, 14, 24, 0.8);
	border-color: rgba(255, 255, 255, 0.08);
}
html.dark .glass-card {
	background-color: rgba(9, 14, 24, 0.62);
	border-color: rgba(255, 255, 255, 0.12);
}
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
	opacity: 1;
	transform: translateY(0);
}
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.mask-gradient {
	mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.hover-glint { position: relative; overflow: hidden; }
.hover-glint::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
	transition: 0.6s;
}
.hover-glint:hover::after { left: 150%; }
.glowing-gold { text-shadow: 0 0 30px rgba(212, 175, 55, 0.45); }
.weave-bg {
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='%230a2540' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.nav-link { position: relative; }
.nav-link::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 0;
	height: 2px;
	background: #D4AF37;
	transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.text-gradient-gold {
	background: linear-gradient(120deg, #D4AF37, #F5D97A 40%, #D4AF37 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.btn-gold {
	background: linear-gradient(120deg, #D4AF37, #E6C35C);
	color: #0A2540;
}
.btn-gold:hover { background: linear-gradient(120deg, #E6C35C, #D4AF37); }
.btn-navy { background: #0A2540; color: #ffffff; }
html.dark .btn-navy {
	background: rgb(var(--bskl-primary-fixed-dim));
	color: rgb(var(--bskl-on-primary-fixed));
}
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #D4AF37; border-radius: 10px; }
.hero-gradient {
	background: linear-gradient(to right, rgba(10, 37, 64, 0.92), rgba(10, 37, 64, 0.35));
}

/* ---------- Dark-mode semantic overrides ---------- */
html.dark .bg-white {
	background-color: rgb(var(--bskl-card)) !important;
}
html.dark .text-black { color: rgb(var(--bskl-on-background)) !important; }
html.dark .bg-primary,
html.dark .bg-primary-container {
	background-color: rgb(var(--bskl-primary-deep)) !important;
}
html.dark [class*="bg-primary/"] {
	background-color: rgb(var(--bskl-primary-deep) / 0.18) !important;
}
html.dark .border-white { border-color: rgb(var(--bskl-outline-variant)) !important; }

/* ---------- Language switcher ---------- */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: 9999px;
	background: rgba(10, 37, 64, 0.06);
	border: 1px solid rgba(10, 37, 64, 0.15);
}
html.dark .lang-switch {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.12);
}
.lang-switch.on-dark {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.14);
}
.lang-switch.on-dark button { color: rgba(255, 255, 255, 0.65); }
.lang-switch.on-dark button.active,
.lang-switch.on-dark button:hover { background: #D4AF37; color: #0A2540; }
.lang-switch button {
	padding: 4px 9px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: rgba(10, 37, 64, 0.65);
	transition: all 0.2s;
	white-space: nowrap;
}
html.dark .lang-switch button { color: rgba(255, 255, 255, 0.65); }
.lang-switch button.active,
.lang-switch button:hover {
	background: #D4AF37;
	color: #0A2540;
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	border: 1px solid rgb(var(--bskl-outline-variant));
	color: rgb(var(--bskl-on-background));
	background: transparent;
	cursor: pointer;
	transition: all 0.2s;
}
.theme-toggle:hover {
	border-color: rgb(var(--bskl-secondary));
	background: rgb(var(--bskl-surface-container));
}
.theme-toggle .material-symbols-outlined { font-size: 22px; }

/* ---------- Mobile hardening ---------- */
@media (max-width: 767px) {
	/* 64px side gutters crush content on phones -> drop to 24px */
	.px-margin-desktop { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

	/* Full-viewport heroes grow instead of clipping their text */
	section.h-screen,
	.h-screen {
		height: auto !important;
		min-height: 100svh;
		padding-top: 4.5rem;
		padding-bottom: 3rem;
	}

	/* Fixed-pixel hero/card wrappers never clip their content */
	[class*="h-["]:not([class*="max-h-["]):not([class*="min-h-["]):not([class*="h-[1px]"]):not(.h-screen) {
		height: auto !important;
		min-height: 420px;
	}

	/* Scale display type down and let long words wrap */
	.text-8xl, .text-7xl, .text-6xl {
		font-size: clamp(2.25rem, 11vw, 3.6rem) !important;
		line-height: 1.12 !important;
	}
	.text-5xl {
		font-size: clamp(1.9rem, 9vw, 3rem) !important;
		line-height: 1.16 !important;
	}
	.text-4xl {
		font-size: clamp(1.6rem, 7.5vw, 2.25rem) !important;
		line-height: 1.22 !important;
	}
	.text-3xl {
		font-size: clamp(1.4rem, 6.5vw, 1.875rem) !important;
		line-height: 1.25 !important;
	}
	.text-2xl {
		font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;
		line-height: 1.3 !important;
	}

	/* Hero glass cards get friendlier padding on small screens */
	.glass-card { padding: 2rem 1.4rem !important; }

	/* Giant gaps become airy but not absurd */
	.gap-24, .gap-20, .gap-16 { gap: 3rem !important; }
	.py-unit-xl { padding-top: 4rem !important; padding-bottom: 4rem !important; }
	.mb-unit-xl { margin-bottom: 3rem !important; }

	/* CTA rows in heroes stack full-width and never overflow */
	.max-w-5xl .flex.flex-col > *,
	.max-w-3xl .flex.flex-col > * { width: 100%; }
}

@media (max-width: 479px) {
	.lang-switch button { padding: 4px 7px; font-size: 10px; }
	header .btn-gold { padding-left: 14px !important; padding-right: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.reveal, .animate-float, .animate-pulse-soft, .hover-glint::after {
		transition: none !important;
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}