/*
 * Wealthbrooks global CSS.
 * Colours and type come from the Elementor Global Kit (--e-global-*). Fallbacks
 * here only matter if the kit fails to load. Keep this file small: layout and
 * visual design belong in Elementor, this file is for site-wide accessibility rules.
 */

/* Visible focus for keyboard users, everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--e-global-color-wbnavy7, #0B4272);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On dark (navy) containers, switch the ring to gold so it stays visible. */
.wb-on-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--e-global-color-secondary, #E0A91F);
}

/* Inline links on dark sections: the kit's navy link colour vanishes on navy. */
.wb-on-dark .elementor-widget-text-editor a {
	color: var(--e-global-color-wbwhite, #FFFFFF);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.wb-on-dark .elementor-widget-text-editor a:hover {
	color: var(--e-global-color-secondary, #E0A91F);
}

/* Tap targets: 44px minimum. */
.elementor-button,
.elementor-nav-menu a,
.elementor-field-group .elementor-field,
.elementor-field-group .elementor-select-wrapper select,
.e-n-menu-title,
.elementor-menu-toggle {
	min-height: 44px;
}

/* Logo link (mark + name): sizes to its content, never stretches, 44px tap height. */
.e-con.wb-logo {
	width: auto;
	flex: 0 0 auto;
	min-height: 44px;
	text-decoration: none;
}
.e-con.wb-logo .elementor-heading-title {
	white-space: nowrap;
}

.elementor-widget-image a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Checkboxes/radios: bigger box; the 44px label row is the tap target. */
.elementor-field-option input[type="checkbox"],
.elementor-field-option input[type="radio"] {
	width: 24px;
	height: 24px;
	margin-right: 8px;
	accent-color: var(--e-global-color-secondary, #E0A91F);
}

.elementor-form .elementor-field-subgroup .elementor-field-option {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-right: 18px;
}
.elementor-form .elementor-field-subgroup .elementor-field-option label,
.elementor-form .elementor-field-type-acceptance label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
}

/*
 * Sticky header in plain CSS. Elementor's JS sticky clones the header as a spacer,
 * which duplicates the off-canvas menu (two dialogs, same id) and costs main-thread time.
 */
.elementor-location-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* Header buttons never break onto two lines. */
.elementor-location-header .elementor-button {
	white-space: nowrap;
}

/*
 * Seven division links + logo + button need ~1150px. Between Elementor's tablet
 * breakpoint (1024) and 1280px (room for a scrollbar), use the Menu button + off-canvas instead of wrapping.
 */
@media (min-width: 1025px) and (max-width: 1279px) {
	.wb-desk-nav {
		display: none !important;
	}
	.wb-menu-btn.elementor-hidden-desktop {
		display: block !important;
	}
}

/*
 * Desktop dropdowns on hover even on touch-capable laptops. Elementor's menu script
 * (SmartMenus) switches to tap-to-open whenever the device reports touch points,
 * which many Windows laptops do, so mouse users would see nothing on hover.
 */
@media (hover: hover) and (pointer: fine) {
	.wb-desk-nav .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
	.wb-desk-nav .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu {
		display: block !important;
	}
}

/* ---------- Home page components (colours from the Global Kit) ---------- */

/* Hero brand panel: a quiet lighter navy card. */
.wb-glass {
	background-color: rgba(255, 255, 255, 0.04);
}
.wb-brand-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wb-brand-list li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(199, 205, 214, 0.18);
}
.wb-brand-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.wb-brand-name {
	font-family: var(--e-global-typography-secondary-font-family), sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: var(--e-global-color-wbwhite, #FFFFFF);
}
.wb-brand-line {
	font-size: 15px;
	color: var(--e-global-color-wbsilver, #C7CDD6);
}

/* Hero text link on navy: white, underlined. */
.wb-on-dark .elementor-widget-text-editor a {
	font-weight: 500;
}

/* Brand tiles: whole card is one link. */
.e-con.wb-tile {
	text-decoration: none;
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.e-con.wb-tile:hover,
.e-con.wb-tile:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(10, 31, 63, 0.10);
}

/* How-it-works step numbers: gold disc, navy figure. */
.wb-step-num .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--e-global-color-secondary, #E0A91F);
}
.elementor-widget.wb-step-num {
	text-align: left !important;
}

/* Visible placeholder for photos still to come (like the JGJ headshot box). */
.wb-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 220px;
	max-width: 100%;
	aspect-ratio: 4 / 5;
	border: 2px dashed var(--e-global-color-wbsilver, #C7CDD6);
	border-radius: 16px;
	background-color: var(--e-global-color-wbwhite, #FFFFFF);
}

.wb-quote {
	margin: 0;
	padding: 0 0 0 20px;
	border-left: 4px solid var(--e-global-color-secondary, #E0A91F);
}
.wb-quote p {
	margin: 0;
}

/* Jump links land below the sticky header, not under it. */
[id] {
	scroll-margin-top: 96px;
}

/* Home already ends with a full waitlist form: don't repeat the footer sign-up there. */
.home .elementor-location-footer .wb-footer-signup {
	display: none;
}

/* Phone-only action bar, fixed to the bottom of the screen. */
@media (max-width: 767px) {
	.e-con.wb-mobile-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
		box-shadow: 0 -8px 24px rgba(10, 31, 63, 0.18);
	}
	body {
		padding-bottom: 72px; /* so the bar never covers the last of the footer */
	}
}

/* ---------- Shared page components (home + division pages) ---------- */

/* How it works: connecting line between step numbers. */
@media (min-width: 1025px) {
	.wb-steps { position: relative; }
	.wb-steps::before {
		content: "";
		position: absolute;
		top: 22px;
		left: 44px;
		right: 33%;
		border-top: 2px dashed var(--e-global-color-wbsilver, #C7CDD6);
		z-index: 0;
	}
	.wb-step { position: relative; z-index: 1; }
}

/* FAQ (Elementor nested accordion). */
.wb-faq .e-n-accordion-item-title {
	min-height: 56px;
	font-family: var(--e-global-typography-secondary-font-family), sans-serif;
	font-weight: 500;
	font-size: 19px;
	color: var(--e-global-color-primary, #0A1F3F);
	border-bottom: 1px solid var(--e-global-color-wbborder, #DDE2E8);
}

/* Reveal on scroll (CSS only).
 * Content is always visible. Browsers that support scroll-driven animations fade it
 * up as it enters the screen; others simply show it. No JavaScript, nothing hidden. */
@supports (animation-timeline: view()) {
	.wb-reveal {
		animation: wb-reveal linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 40%;
	}
}
@keyframes wb-reveal {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}
.wb-visual-placeholder {
	margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
	.wb-reveal {
		animation: none !important;
	}
}

/* Status chips, card arrows and share buttons (home, ventures, thank-you). */
.wb-chip .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 700;
	background: var(--e-global-color-wbwhite, #FFFFFF);
}
.wb-chip .elementor-heading-title::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--e-global-color-accent, #1E6B3A);
	animation: wb-pulse 2s ease-in-out infinite;
}
.wb-chip-gold .elementor-heading-title::before { background: var(--e-global-color-secondary, #E0A91F); }
@keyframes wb-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}
.wb-card-cta {
	font-weight: 700;
	border-bottom: 2px solid var(--e-global-color-secondary, #E0A91F);
}

.wb-share .elementor-share-btn {
	min-width: 44px;
	min-height: 44px;
}

.wb-chip-dev .elementor-heading-title::before { background: var(--e-global-color-wbsilver, #C7CDD6); animation: none; }
@media (prefers-reduced-motion: reduce) {
	.wb-chip .elementor-heading-title::before { animation: none !important; }
}

/* Never let a wide child push the page sideways on phones. */
html,
body {
	overflow-x: clip;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* Visible placeholder tokens, e.g. [PRICE], so nothing unfinished ships unnoticed. */
.wb-placeholder {
	background: #FFF4CC;
	color: #1A1F2B;
	padding: 0 0.25em;
	border-radius: 3px;
	font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Coming Soon page (inc/coming-soon.php, scripts/build_coming_soon.py) ---------- */
.wb-cs-lockup { display: flex; align-items: center; gap: 12px; margin: 0; }
.elementor .wb-cs-lockup img { height: 40px; width: auto; }
.wb-cs-lockup span { font: 700 22px/1 'Bricolage Grotesque', sans-serif; color: #fff; letter-spacing: -.005em; }
.wb-cs-brands { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.wb-cs-brands span { padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; }
.wb-cs-contact a, .wb-cs-legal a { color: #E0A91F; text-decoration: underline; text-underline-offset: 3px; }
.wb-cs-legal { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 16px; }