/**
 * Earnture Global Header.
 *
 * Every selector is scoped to .earnture-header, so nothing here can reach into
 * Astra or Elementor content. No bare element selectors are used anywhere.
 *
 * Layout model: one set of markup for all widths. The collapse wrapper is
 * `display: contents` on desktop, so nav / Account / Subscribe behave as direct
 * flex items of the bar; below the nav breakpoint the same wrapper becomes the
 * off-canvas drawer. Order is handled with flex `order`, never by duplication.
 */

.earnture-header {
	--ent-h: 72px;
	--ent-h-stuck: 64px;
	--ent-bar-gap: 20px;

	position: sticky;
	top: 0;
	/* Above page content, far below the WordPress admin bar (99999). */
	z-index: 1000;
	background-color: var(--ent-c-bg);
	border-bottom: 1px solid var(--ent-c-border);
	font-family: var(--ent-font-body);
	min-height: var(--ent-h);
	transition: box-shadow var(--ent-t-base) var(--ent-ease),
		border-color var(--ent-t-base) var(--ent-ease);
}

.earnture-header *,
.earnture-header *::before,
.earnture-header *::after {
	box-sizing: border-box;
}

/* Sticky probe: net-zero layout impact, removes the need for scroll listeners. */
.earnture-header__sentinel {
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
}

.earnture-header.is-stuck {
	border-bottom-color: var(--ent-c-border-strong);
	box-shadow: 0 1px 3px var(--ent-c-shadow);
}

.admin-bar .earnture-header {
	top: 32px;
}

.earnture-header__inner {
	display: flex;
	align-items: center;
	gap: var(--ent-bar-gap);
	max-width: var(--ent-container);
	height: var(--ent-h);
	margin: 0 auto;
	padding: 0 var(--ent-gap-lg);
	transition: height var(--ent-t-base) var(--ent-ease);
}

.earnture-header.is-stuck .earnture-header__inner {
	height: var(--ent-h-stuck);
}

/* ------------------------------------------------- accessibility plumbing -- */

.earnture-header__sr,
.earnture-header__sr-btn {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * One deliberate focus ring for every control. The raw dotted UA outline is
 * suppressed only for pointer interaction; keyboard focus is always visible.
 */
.earnture-header :focus:not(:focus-visible) {
	outline: none;
}

.earnture-header :focus-visible {
	outline: 2px solid var(--ent-c-focus);
	outline-offset: 2px;
	border-radius: var(--ent-radius-sm);
}

/* ---------------------------------------------------------------- brand -- */

.earnture-header__brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	order: 1;
	/* Keeps the bar above the drawer backdrop so the close control stays usable. */
	position: relative;
	z-index: 2;
	text-decoration: none;
	line-height: 0;
}

.earnture-header__logo-img {
	display: none;
	width: auto;
	height: 32px;
	transition: height var(--ent-t-base) var(--ent-ease);
}

.earnture-header.is-stuck .earnture-header__logo-img {
	height: 28px;
}

:root:not([data-theme="dark"]) .earnture-header__logo-img--lockup.earnture-header__logo-img--light,
:root[data-theme="dark"] .earnture-header__logo-img--lockup.earnture-header__logo-img--dark {
	display: block;
}

/* ------------------------------------------------------- collapse / nav -- */

/*
 * Desktop: the wrapper leaves the box tree entirely, so nav, Account and
 * Subscribe become direct flex children of the bar.
 */
.earnture-header__collapse,
.earnture-header__collapse-surface {
	display: contents;
}

.earnture-header__nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 1 auto;
	order: 2;
	min-width: 0;
}

.earnture-header__menu {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.earnture-header__menu > li {
	position: relative;
	margin: 0;
	list-style: none;
}

.earnture-header__menu > li > a,
.earnture-header__topics-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	position: relative;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--ent-radius-sm);
	background: none;
	color: var(--ent-c-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--ent-t-fast) var(--ent-ease),
		background-color var(--ent-t-fast) var(--ent-ease);
}

/*
 * Ember Copper indicator. Drawn on a pseudo-element so nothing reflows, and
 * animated with transform only.
 */
.earnture-header__menu > li > a::after,
.earnture-header__topics-btn::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 3px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--ent-c-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ent-t-base) var(--ent-ease);
}

.earnture-header__menu > li > a:hover::after,
.earnture-header__topics-btn:hover::after,
.earnture-header__menu > li.current-menu-item > a::after,
.earnture-header__menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.earnture-header__menu > li > a:hover,
.earnture-header__topics-btn:hover {
	background-color: var(--ent-c-hover);
}

.earnture-header__menu > li > a:active,
.earnture-header__topics-btn:active {
	background-color: var(--ent-c-pressed);
}

.earnture-header__menu > li.current-menu-item > a,
.earnture-header__menu > li.current-menu-ancestor > a {
	font-weight: 600;
}

/* --------------------------------------------------------------- topics -- */

.earnture-header__topics {
	position: relative;
}

.earnture-header__topics-btn .earnture-header__icon {
	width: 15px;
	height: 15px;
	transition: transform var(--ent-t-fast) var(--ent-ease);
}

.earnture-header__topics-btn[aria-expanded="true"] .earnture-header__icon {
	transform: rotate(180deg);
}

.earnture-header__topics-panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 5;
	min-width: 244px;
	padding: 10px;
	background-color: var(--ent-c-surface);
	border: 1px solid var(--ent-c-border);
	border-radius: var(--ent-radius-md);
	box-shadow: 0 10px 28px var(--ent-c-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	transition: opacity var(--ent-t-base) var(--ent-ease),
		transform var(--ent-t-base) var(--ent-ease),
		visibility var(--ent-t-base) var(--ent-ease);
}

/* Hover bridge so the pointer can cross the gap without the panel closing. */
.earnture-header__topics-panel::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

.earnture-header__topics-btn[aria-expanded="true"] + .earnture-header__topics-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* No-JS fallback: hover and keyboard focus still reveal the panel. */
:root:not(.earnture-js) .earnture-header__topics:hover .earnture-header__topics-panel,
:root:not(.earnture-js) .earnture-header__topics:focus-within .earnture-header__topics-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.earnture-header__eyebrow {
	margin: 4px 0 6px;
	padding: 0 8px;
	color: var(--ent-c-text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.earnture-header__topics-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.earnture-header__topics-list > li {
	margin: 0;
	list-style: none;
}

.earnture-header__topics-list a {
	display: block;
	padding: 8px;
	border-radius: var(--ent-radius-sm);
	color: var(--ent-c-text);
	font-size: 14.5px;
	text-decoration: none;
	transition: background-color var(--ent-t-fast) var(--ent-ease);
}

/*
 * Ember Copper measures 2.74:1 on Editorial Ivory, so it is never used as text.
 * Hover reads through the surface tint; the accent stays structural.
 */
.earnture-header__topics-list a:hover {
	background-color: var(--ent-c-hover);
}

.earnture-header__topics-all {
	display: block;
	margin-top: 6px;
	padding: 12px 8px 4px;
	border-top: 1px solid var(--ent-c-border);
	color: var(--ent-c-text);
	font-size: 14px;
	font-weight: 600;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--ent-t-fast) var(--ent-ease);
}

.earnture-header__topics-all:hover {
	text-decoration-color: var(--ent-c-accent);
}

/* --------------------------------------------------------------- search -- */

.earnture-header__search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	order: 3;
	min-width: 0;
	max-width: 292px;
	margin-left: auto;
}

.earnture-header__search .earnture-header__icon {
	position: absolute;
	left: 11px;
	width: 17px;
	height: 17px;
	color: var(--ent-c-text-muted);
	pointer-events: none;
}

.earnture-header__search input[type="search"] {
	width: 100%;
	height: 38px;
	padding: 0 12px 0 34px;
	border: 1px solid var(--ent-c-field-border);
	border-radius: var(--ent-radius-md);
	background-color: var(--ent-c-field);
	color: var(--ent-c-text);
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.2;
	transition: border-color var(--ent-t-fast) var(--ent-ease),
		background-color var(--ent-t-fast) var(--ent-ease);
	-webkit-appearance: none;
	appearance: none;
}

.earnture-header__search input[type="search"]::placeholder {
	color: var(--ent-c-text-muted);
	opacity: 1;
}

.earnture-header__search input[type="search"]:hover {
	border-color: var(--ent-c-border-strong);
}

.earnture-header__search input[type="search"]:focus {
	outline: none;
	border-color: var(--ent-c-accent);
	background-color: var(--ent-c-surface);
}

.earnture-header__search input[type="search"]:focus-visible {
	outline: 2px solid var(--ent-c-focus);
	outline-offset: 1px;
}

.earnture-header__sr-btn:focus-visible {
	position: static;
	width: auto;
	height: 30px;
	margin-left: 8px;
	padding: 0 10px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	border-radius: var(--ent-radius-sm);
	background-color: var(--ent-c-invert-bg);
	color: var(--ent-c-invert-text);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}

/* -------------------------------------------------------------- actions -- */

.earnture-header__icon-btn {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--ent-radius-sm);
	background: none;
	/* Muted by default so the control never competes with Subscribe. */
	color: var(--ent-c-text-muted);
	cursor: pointer;
	position: relative;
	z-index: 2;
	transition: background-color var(--ent-t-fast) var(--ent-ease),
		color var(--ent-t-fast) var(--ent-ease);
}

.earnture-header__icon-btn:hover {
	background-color: var(--ent-c-hover);
	color: var(--ent-c-text);
}

.earnture-header__icon-btn:active {
	background-color: var(--ent-c-pressed);
}

.earnture-header__theme-toggle {
	display: inline-flex;
	order: 4;
}

.earnture-header__search-toggle {
	order: 2;
}

.earnture-header__menu-toggle {
	order: 5;
}

.earnture-header__icon-moon,
.earnture-header__icon-sun,
.earnture-header__icon-open,
.earnture-header__icon-shut {
	display: none;
	line-height: 0;
}

:root:not([data-theme="dark"]) .earnture-header__icon-moon,
:root[data-theme="dark"] .earnture-header__icon-sun,
.earnture-header__menu-toggle[aria-expanded="false"] .earnture-header__icon-open,
.earnture-header__menu-toggle[aria-expanded="true"] .earnture-header__icon-shut {
	display: block;
}

.earnture-header__account {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 0 0 auto;
	order: 5;
	height: 38px;
	padding: 0 12px;
	border-radius: var(--ent-radius-sm);
	color: var(--ent-c-text);
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ent-t-fast) var(--ent-ease);
}

.earnture-header__account:hover {
	background-color: var(--ent-c-hover);
	color: var(--ent-c-text);
}

.earnture-header__account:active {
	background-color: var(--ent-c-pressed);
}

.earnture-header__account .earnture-header__icon {
	width: 17px;
	height: 17px;
}

.earnture-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	order: 6;
	height: 38px;
	padding: 0 17px;
	border-radius: var(--ent-radius-md);
	background-color: var(--ent-c-invert-bg);
	color: var(--ent-c-invert-text);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--ent-t-fast) var(--ent-ease),
		opacity var(--ent-t-fast) var(--ent-ease);
}

.earnture-header__cta:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	color: var(--ent-c-invert-text);
}

.earnture-header__cta:active {
	transform: translateY(0);
	opacity: 1;
}

/* ---------------------------------------------------------- search panel -- */

/*
 * Overlaid, never in flow. Opening it cannot move the page, so it contributes
 * nothing to CLS.
 */
.earnture-header__search-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 12px var(--ent-gap-lg) 14px;
	background-color: var(--ent-c-bg);
	border-bottom: 1px solid var(--ent-c-border);
	box-shadow: 0 10px 24px var(--ent-c-shadow);
}

.earnture-header__search-panel[hidden] {
	display: none;
}

.earnture-header__search-panel-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: var(--ent-container);
	margin: 0 auto;
}

.earnture-header__search-panel-form .earnture-header__icon {
	position: absolute;
	left: 12px;
	width: 18px;
	height: 18px;
	color: var(--ent-c-text-muted);
	pointer-events: none;
}

.earnture-header__search-panel-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 12px 0 38px;
	border: 1px solid var(--ent-c-field-border);
	border-radius: var(--ent-radius-md);
	background-color: var(--ent-c-field);
	color: var(--ent-c-text);
	font-family: inherit;
	/* 16px avoids the iOS focus zoom. */
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

.earnture-header__search-panel-form input[type="search"]:focus {
	outline: none;
	border-color: var(--ent-c-accent);
	background-color: var(--ent-c-surface);
}

.earnture-header__search-panel-submit {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--ent-radius-md);
	background-color: var(--ent-c-invert-bg);
	color: var(--ent-c-invert-text);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.earnture-header__search-close {
	display: inline-flex;
}

/* --------------------------------------------------------------- drawer -- */

.earnture-scroll-locked {
	overflow: hidden;
}

/* ---------------------------------------------------------- breakpoints -- */

/*
 * 1080px is where the five nav labels, a usable search field and the right-hand
 * actions stop coexisting without crowding. Chosen from measured content width,
 * not from a framework's default scale.
 */
@media (max-width: 1079px) {

	.earnture-header {
		--ent-h: 68px;
		--ent-h-stuck: 62px;
		--ent-bar-gap: 8px;
	}

	.earnture-header__search {
		display: none;
	}

	.earnture-header__search-toggle,
	.earnture-header__menu-toggle {
		display: inline-flex;
	}

	/* The bar collapses to brand + controls; controls sit hard right. */
	.earnture-header__search-toggle {
		margin-left: auto;
	}

	/* The wrapper re-enters the box tree and becomes the off-canvas drawer. */
	.earnture-header__collapse {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1;
		background-color: var(--ent-c-overlay);
		opacity: 0;
		transition: opacity var(--ent-t-panel) var(--ent-ease);
	}

	.earnture-header__collapse[hidden] {
		display: none;
	}

	/* Transparent but present during the fade — must not swallow taps. */
	.earnture-header__collapse {
		pointer-events: none;
	}

	.earnture-header__collapse.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.earnture-header__collapse-surface {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(84vw, 340px);
		padding: calc(var(--ent-h) + 12px) 16px 20px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--ent-c-bg);
		border-left: 1px solid var(--ent-c-border);
		transform: translateX(100%);
		transition: transform var(--ent-t-panel) var(--ent-ease);
	}

	.earnture-header__collapse.is-open .earnture-header__collapse-surface {
		transform: translateX(0);
	}

	.admin-bar .earnture-header__collapse-surface {
		padding-top: calc(var(--ent-h) + 44px);
	}

	.earnture-header__nav {
		display: block;
		width: 100%;
	}

	.earnture-header__menu {
		display: block;
		width: 100%;
	}

	.earnture-header__menu > li > a {
		display: block;
		padding: 12px 10px;
		font-size: 16px;
		font-weight: 600;
	}

	/* Same Ember Copper language as desktop, expressed as an edge marker. */
	.earnture-header__menu > li > a::after {
		left: 0;
		right: auto;
		top: 10px;
		bottom: 10px;
		width: 3px;
		height: auto;
		transform: scaleY(0);
		transform-origin: center top;
		transition: transform var(--ent-t-base) var(--ent-ease);
	}

	.earnture-header__menu > li > a:hover::after,
	.earnture-header__menu > li.current-menu-item > a::after,
	.earnture-header__menu > li.current-menu-ancestor > a::after {
		transform: scaleY(1);
	}

	.earnture-header__menu .sub-menu {
		margin: 0 0 0 10px;
		padding: 0;
		list-style: none;
	}

	.earnture-header__menu .sub-menu > li {
		margin: 0;
		list-style: none;
	}

	.earnture-header__menu .sub-menu a {
		display: block;
		padding: 9px 10px;
		color: var(--ent-c-text-body);
		font-size: 15px;
		text-decoration: none;
	}

	/* Topics becomes a plain always-open group; no nested disclosure on touch. */
	.earnture-header__topics {
		margin-top: 4px;
	}

	.earnture-header__topics-btn {
		display: none;
	}

	.earnture-header__topics-panel {
		position: static;
		min-width: 0;
		padding: 0;
		border: 0;
		border-top: 1px solid var(--ent-c-border);
		border-radius: 0;
		margin-top: 10px;
		padding-top: 10px;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.earnture-header__topics-list a {
		padding: 9px 10px;
		font-size: 15px;
	}

	/* Account and Subscribe sit at the foot of the drawer, sized to content. */
	.earnture-header__account,
	.earnture-header__cta {
		width: 100%;
		height: 46px;
	}

	.earnture-header__account {
		order: 5;
		justify-content: flex-start;
		margin-top: auto;
		padding: 0 10px;
		font-size: 15px;
		font-weight: 600;
	}

	.earnture-header__cta {
		order: 6;
		margin-top: 10px;
	}

	/*
	 * No JavaScript: the drawer cannot be opened, so it is laid out as a normal
	 * stacked block under the bar instead. The header grows taller, but every
	 * navigation link, Account and Subscribe stay reachable.
	 */
	:root:not(.earnture-js) .earnture-header__inner {
		flex-wrap: wrap;
		height: auto;
		min-height: var(--ent-h);
	}

	:root:not(.earnture-js) .earnture-header__collapse,
	:root:not(.earnture-js) .earnture-header__collapse[hidden] {
		display: block;
		position: static;
		/* Last in the bar, forced onto its own row. */
		order: 9;
		width: 100%;
		opacity: 1;
		pointer-events: auto;
		background: none;
	}

	:root:not(.earnture-js) .earnture-header__collapse-surface {
		position: static;
		width: auto;
		padding: 0 var(--ent-gap-lg) 16px;
		overflow: visible;
		border-left: 0;
		transform: none;
	}

	:root:not(.earnture-js) .earnture-header__menu-toggle {
		display: none;
	}
}

@media (min-width: 1080px) {

	/* The drawer never exists at desktop widths. */
	.earnture-header__collapse[hidden] {
		display: contents;
	}

	.earnture-header__search-panel {
		display: none !important;
	}
}

/* Compact phones: swap the lockup for the E-Mark. */
@media (max-width: 400px) {

	.earnture-header {
		--ent-h: 64px;
		--ent-h-stuck: 60px;
	}

	:root:not([data-theme="dark"]) .earnture-header__logo-img--lockup.earnture-header__logo-img--light,
	:root[data-theme="dark"] .earnture-header__logo-img--lockup.earnture-header__logo-img--dark {
		display: none;
	}

	:root:not([data-theme="dark"]) .earnture-header__logo-img--mark.earnture-header__logo-img--light,
	:root[data-theme="dark"] .earnture-header__logo-img--mark.earnture-header__logo-img--dark {
		display: block;
	}

	.earnture-header__inner {
		padding: 0 12px;
	}

	.earnture-header__search-panel {
		padding: 10px 12px 12px;
	}

	.earnture-header__search-panel-submit {
		padding: 0 12px;
	}
}

/* The admin bar becomes 46px tall and stops being fixed at this width. */
@media screen and (max-width: 782px) {

	.admin-bar .earnture-header {
		top: 0;
	}

	.admin-bar .earnture-header__collapse-surface {
		padding-top: calc(var(--ent-h) + 12px);
	}
}

/* --------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {

	.earnture-header,
	.earnture-header *,
	.earnture-header *::before,
	.earnture-header *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.earnture-header__cta:hover {
		transform: none;
	}
}

/* ------------------------------------------------ Astra removal fallback -- */

/*
 * Applies only if Astra's header callback could not be detached server-side.
 * Verified unnecessary on Astra 4.13.9; kept as a guard against future changes.
 */
.earnture-astra-fallback #masthead.site-header {
	display: none !important;
}

/* ------------------------------------------- existing-site compatibility -- */

/*
 * Older Additional CSS positions the article reading toolbar against the
 * previous floating header. Re-point those variables at the real height.
 */
.earnture-has-global-header .earnture-single-post-page {
	--earnture-sticky-top: 80px;
	--earnture-toolbar-gap: 16px;
}

@media (max-width: 1079px) {

	.earnture-has-global-header .earnture-single-post-page {
		--earnture-sticky-top: 76px;
	}
}