/*
 * Wilder Labs Studio - site header (wls-header.css)
 * Direction: Two Doors. A floating pill on desktop and tablet, a thumb bar and a menu sheet on phones.
 * Colours, type, borders and padding live in the Divi modules (Theme Builder > Global Header), so they stay
 * editable in the Visual Builder. This file only does what Divi modules can't: fixed positioning, blur,
 * hide-on-scroll, the sheet, press states. The fixed rules only switch on when wls-header.js adds
 * .wls-hd-live to <html>, so in the Visual Builder everything sits in normal flow and stays editable.
 */

/* ---------- Top pill ---------- */
.wls-hd-live .wls-hd.et_pb_section {
	position: fixed !important;
	top: 16px;
	left: 0;
	right: 0;
	z-index: 9990;
	padding: 0 !important;
	background: transparent !important;
	pointer-events: none;
	transition: transform .22s cubic-bezier(.2, .7, .2, 1), opacity .22s ease;
}
.wls-hd-live.wls-has-adminbar .wls-hd.et_pb_section { top: 48px; }
@media (max-width: 782px) {
	.wls-hd-live.wls-has-adminbar .wls-hd.et_pb_section { top: 58px; }
}
.wls-hd-live .wls-hd.is-hidden {
	transform: translateY(calc(-100% - 48px));
	opacity: 0;
}
.wls-hd .et_pb_row {
	width: auto !important;
	max-width: calc(100% - 32px) !important;
	margin: 0 auto !important;
	padding: 0 !important;
	display: flex;
	justify-content: center;
}
.wls-hd__pill.et_pb_column {
	pointer-events: auto;
	width: auto !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 10px 30px rgba(7, 3, 26, .35);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wls-hd__pill.et_pb_column,
	.wls-tb__bar.et_pb_column { background-color: #120A2E !important; }
}
.wls-hd .et_pb_module,
.wls-tb .et_pb_module { margin: 0 !important; }
.wls-hd__mark svg,
.wls-sheet__logo svg { display: block; }
.wls-hd__mark a,
.wls-sheet__logo a { display: block; line-height: 0; }

/* Active page: a 2px Volt underline at 42% width, the thin rule of the rules device */
.wls-hd__nav a { position: relative; text-decoration: none; }
.wls-hd__nav a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -7px;
	width: 42%;
	height: 2px;
	background: #C2FF01;
}

/* ---------- Phone thumb bar ---------- */
.wls-hd-live .wls-tb.et_pb_section {
	position: fixed !important;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9989;
	padding: 0 12px calc(12px + env(safe-area-inset-bottom)) !important;
	background: transparent !important;
	pointer-events: none;
	transform: translateY(140%);
	transition: transform .26s cubic-bezier(.2, .7, .2, 1);
}
.wls-hd-live .wls-tb.is-shown { transform: none; }
.wls-tb .et_pb_row {
	width: 100% !important;
	max-width: 460px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}
.wls-tb__bar.et_pb_column {
	pointer-events: auto;
	margin: 0 !important;
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 12px 34px rgba(7, 3, 26, .5);
}
.wls-tb a { -webkit-tap-highlight-color: transparent; }
/* The Start button stays in the bar and carries a soft Volt glow so it reads as the main action */
.wls-tb .wls-tb__start {
	box-shadow: 0 0 0 1px rgba(194, 255, 1, .35), 0 6px 18px rgba(194, 255, 1, .2);
}

/* ---------- Menu sheet ---------- */
.wls-hd-live .wls-sheet.et_pb_section {
	position: fixed !important;
	inset: 0;
	z-index: 9995;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: none;
}
.wls-hd-live .wls-sheet.is-open {
	display: block !important;
	animation: wlsSheetIn .28s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes wlsSheetIn {
	from { transform: translateY(28px); opacity: 0; }
	to { transform: none; opacity: 1; }
}
.wls-sheet:focus { outline: none; }
html.wls-sheet-open,
html.wls-sheet-open body { overflow: hidden; }
.wls-sheet__item a { text-decoration: none; }
.wls-sheet .et_pb_text a {
	color: #EFEBFF;
	text-decoration: underline;
	text-decoration-color: rgba(194, 255, 1, .6);
	text-underline-offset: 4px;
}
.wls-sheet .et_pb_text a:hover { color: #C2FF01; }
.wls-hd-live.wls-has-adminbar .wls-sheet.et_pb_section { top: 32px; }
@media (max-width: 782px) {
	.wls-hd-live.wls-has-adminbar .wls-sheet.et_pb_section { top: 46px; }
}

/* ---------- Press states: things you tap give a little ---------- */
.wls-hd a,
.wls-tb a,
.wls-sheet a { transition: transform .12s ease, color .12s ease, background-color .12s ease; }
.wls-hd a:active,
.wls-tb a:active,
.wls-sheet a:active { transform: translateY(2px) scale(.97); }

/* Keyboard focus that you can actually see on Midnight */
.wls-hd a:focus-visible,
.wls-tb a:focus-visible,
.wls-sheet a:focus-visible {
	outline: 2px solid #C2FF01;
	outline-offset: 3px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.wls-hd-live .wls-hd.et_pb_section,
	.wls-hd-live .wls-tb.et_pb_section,
	.wls-hd a, .wls-tb a, .wls-sheet a { transition: none; }
	.wls-hd-live .wls-sheet.is-open { animation: none; }
	.wls-hd a:active, .wls-tb a:active, .wls-sheet a:active { transform: none; }
}

/* ---------- Typed header line ----------
 * The "Wilder Labs Studio" line above a page title types itself out and leaves a blinking block cursor.
 * Pages: Sim Tools and the download page (.sdm-eyebrow), Personal Tools pages (header.hero .eyebrow),
 * the user guide (first line of its hero), or anything marked data-wls-type.
 * While wls-type-wait is on <html> (set in the head) the line stays hidden; if the script never runs,
 * it shows itself after 2 seconds anyway. */
.wls-type-wait :is(.sdm-hero .sdm-eyebrow, header.hero .eyebrow, .wls-guide-hero .et_pb_text_0 .et_pb_text_inner > p:first-child, [data-wls-type]) {
	visibility: hidden;
	animation: wls-type-show 0s 2s forwards;
}
@keyframes wls-type-show { to { visibility: visible; } }
.wls-typed { visibility: visible !important; animation: none !important; }
.wls-typed .wls-ch { visibility: hidden; }
.wls-typed .wls-ch.on { visibility: visible; }
.wls-caret { display: inline-block; position: relative; width: 0; height: 0; vertical-align: baseline; }
.wls-caret::after {
	content: "";
	position: absolute;
	left: .14em;
	bottom: -.16em;
	width: .56em;
	height: 1.1em;
	background: currentColor;
	opacity: .9;
	animation: wls-blink 1.06s steps(1) infinite;
}
.wls-caret.is-typing::after { animation: none; }
@keyframes wls-blink { 50% { opacity: 0; } }
.wls-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
	.wls-caret::after { animation: none; }
}

/* Personal Tools header on phones: the Cash Forecasting Lab link drops out like Guide and Demo, so the pill stays on one line. The shelf has its tile. */
@media (max-width: 600px) {
  .wls-sec-hd .wls-hd__nav a[href$="/cash-forecasting-lab/"] { display: none !important; }
}