/* 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); }
/* The header rides the same fixed container as page content, so the logo and the
   menu line up with the columns below instead of hugging the viewport edges. */
.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-menu-hover, 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; }
/* Hover/active menu color — brand-specific, set as --brand-menu-hover in brand.css. */
.site-header .nav-link:hover, .site-header .nav-link:focus,
.site-header .navbar-nav .show > .nav-link, .site-header .nav-link.active,
.site-header .dropdown-item:hover, .site-header .dropdown-item:focus {
	color: var(--brand-menu-hover, var(--bs-primary)); }
.site-header .dropdown-item:hover, .site-header .dropdown-item:focus { background: transparent; }

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; }

/* ── Flash dialog ──────────────────────────────────────────────────────────
   The one-shot message after a public form post. Rendered as a centered modal
   rather than a banner: pages that open with a hero carry a fixed overlay
   header, and an inline alert at the top of <main> ends up underneath it.
   --flash-accent is set per message type by the layout. */
.flash-modal .modal-content { border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.flash-modal__icon { width: 88px; height: 88px; margin: 0 auto; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--flash-accent, #2563eb);
	/* Plain fallbacks first for engines without color-mix(). */
	border: 4px solid var(--flash-accent, #2563eb);
	border-color: color-mix(in srgb, var(--flash-accent, #2563eb) 32%, transparent);
	background: color-mix(in srgb, var(--flash-accent, #2563eb) 9%, transparent);
	animation: flash-pop .34s cubic-bezier(.2, .9, .35, 1.2) both; }
.flash-modal__title { font-weight: 700; }
.flash-modal__text { color: var(--bs-secondary-color); font-size: 15.5px; line-height: 1.6; }
@keyframes flash-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flash-modal__icon { animation: none; } }