/* Public-site theme on top of Bootstrap. Bootstrap loads first; this file and
   the per-feature sheets (cms.css) carry only what Bootstrap doesn't provide.
   Color-mode aware: the layout sets data-bs-theme from the OS preference, so
   use --bs-* variables here instead of hard-coded colors. */

/* Brand: --brand* variables are emitted inline by BrandCssHelper from the
   workspace_brand_color config; per-client overrides live in /assets/brand/brand.css.
   Fallbacks are Bootstrap's stock blue so an unbranded instance still looks sane. */
:root { --bs-primary: var(--brand, #0d6efd); --bs-primary-rgb: var(--brand-rgb, 13, 110, 253); --bs-link-color: var(--brand, #0d6efd); --bs-link-hover-color: var(--brand-active, #0a58ca); }
.btn-primary { --bs-btn-bg: var(--brand, #0d6efd); --bs-btn-border-color: var(--brand, #0d6efd); --bs-btn-hover-bg: var(--brand-hover, #0b5ed7); --bs-btn-hover-border-color: var(--brand-hover, #0b5ed7); --bs-btn-active-bg: var(--brand-active, #0a58ca); --bs-btn-active-border-color: var(--brand-active, #0a58ca); --bs-btn-disabled-bg: var(--brand, #0d6efd); --bs-btn-disabled-border-color: var(--brand, #0d6efd); }

.site-header { border-bottom: 1px solid var(--bs-border-color); }
/* Keep the nav away from the viewport edges (per the key visual) and stop
   menu labels breaking into two lines. */
.site-header__inner { padding-inline: clamp(20px, 5vw, 96px); }
.site-header .nav-link { white-space: nowrap; }

/* Transparent gradient header laid over a hero banner (pages starting with one). */
body.cms-hero-first main { padding: 0; }
.site-header .navbar { padding-top: .85rem; padding-bottom: .85rem; }
/* Fixed from the very first pixel — switching absolute→fixed mid-scroll caused a visible jump. */
.site-header--overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%);
	transition: transform .3s ease; }
/* A gradient can't animate into a solid color — fade a solid layer in instead. */
.site-header--overlay::before { content: ""; position: absolute; inset: 0; z-index: -2;
	background: rgba(10, 10, 14, .94); opacity: 0; transition: opacity .35s ease; }
.site-header--overlay .nav-link, .site-header--overlay .navbar-brand { color: #fff; }
.site-header--overlay .nav-link.nav-accent { color: var(--brand-accent, #cfe2ff); }
.site-header--overlay.is-scrolled::before { opacity: 1; }
/* Scroll down past the hero → slide away; any upward scroll brings it back. */
.site-header--overlay.is-hidden { transform: translateY(-100%); }
/* Mobile: the menu expands down from the top as a full-width dark panel. */
@media (max-width: 991.98px) {
	.site-header--overlay .navbar-collapse { position: fixed; top: 0; left: 0; right: 0; z-index: -1;
		background: rgba(12, 12, 16, .97); padding: 104px 28px 40px; max-height: 100dvh; overflow-y: auto; }
	.site-header--overlay .navbar-collapse .nav-link { font-size: 1.4rem; font-weight: 600; padding: 16px 0;
		border-bottom: 1px solid rgba(255,255,255,.12); }
	.site-header--overlay .navbar-collapse .nav-item:last-child .nav-link { border-bottom: 0; }
	.site-header--overlay .navbar-collapse .dropdown-menu { position: static; background: transparent;
		border: 0; padding: 0 0 6px 14px; margin: 0; }
	.site-header--overlay .navbar-collapse .dropdown-item { color: #e8eaee; font-size: 1.05rem; padding: 10px 0; }
	.site-header--overlay .navbar-collapse .dropdown-item:hover { background: transparent; color: var(--brand-accent, #cfe2ff); }
}
.navbar-brand { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.navbar-brand img { height: 36px; width: auto; display: block; }
.site-header .nav-link { font-weight: 500; }
.site-header .nav-link.nav-accent { color: var(--bs-primary); font-weight: 600; }

main { min-height: 60vh; padding: 48px 0; }

.site-footer { border-top: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: 14px;
	background: var(--bs-tertiary-bg); }
.site-footer a { color: inherit; }
.site-footer__bar { background: var(--brand-footer-bg, #3d444b); color: #e2e6ea; }

/* Branded circular social icons (footer) */
.soc { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center;
	justify-content: center; color: #fff !important; font-size: 18px; text-decoration: none; }
.soc:hover { filter: brightness(1.1); }
.soc--ig { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.soc--fb { background: #1877f2; }
.soc--yt { background: #ff0000; }
.soc--li { background: #0a66c2; }

/* Floating helpers (bottom-right stack). */
.float-wa, .float-top { position: fixed; right: 22px; z-index: 90; display: flex; flex-direction: column;
	align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.float-wa { bottom: 96px; width: 52px; height: 52px; background: #25d366; }
.float-top { bottom: 26px; width: 52px; height: 52px; background: #3d4249; color: #fff;
	border: 0; opacity: 0; pointer-events: none; transition: opacity .2s, background .15s; }
.float-top:hover { background: #52585f; }
.float-top.is-visible { opacity: 1; pointer-events: auto; }

/* ── Auth / account pages (everything else on them is Bootstrap) ── */
.auth-box { max-width: 420px; margin: 24px auto; }
.auth-box--wide { max-width: 560px; }
.auth-sep { display: flex; align-items: center; gap: 10px; color: var(--bs-secondary-color);
	font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 22px 0 16px; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; border-top: 1px solid var(--bs-border-color); }
.otp-input { text-align: center; letter-spacing: 10px; font-size: 22px; }