/*
 * WORTH Training: site header (2026 redesign).
 *
 * Loaded on every page after style.css. It restyles the existing Swell header
 * markup (logo, Superfish menu, ACF promo bar and CTA) to match the 2026 XD design.
 * Below 881px the original mobile header (mmenu) is kept and only re-coloured.
 */

.site-header {
	--wt-header-red: #cc092f;
	--wt-header-ink: #000;
	background: #fff;
	font-family: 'Open Sans', sans-serif;
}

/* ---------------------------------------------------------------- Sticky header (desktop) */

@media screen and (min-width: 881px) {
	/* The header used to be position: fixed with a hard-coded offset on .middle;
	   sticky keeps it in the flow, so the offset is no longer needed. */
	.site-header {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	.site-header .top {
		position: relative;
		padding: 0;
	}

	.middle {
		padding-top: 0;
	}

	.single-tribe_events .middle {
		padding-top: 44px;
	}

	.promo-bar {
		margin-left: 0;
		margin-right: 0;
	}
}

@media screen and (min-width: 783px) {
	.admin-bar .site-header {
		top: 32px;
	}
}

/* ---------------------------------------------------------------- Bar */

.site-header .top {
	box-shadow: none;
	border-bottom: 1px solid rgba(31, 31, 31, .11);
}

/* Logo | menu | actions. The side columns share space equally so the menu sits in the
   page centre, but never shrink below their content. */
.site-header .top .inside {
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	align-items: center;
	column-gap: 24px;
	max-width: 1800px;
	min-height: 112px;
	padding: 0 clamp(20px, 2.6vw, 50px);
	box-sizing: border-box;
}

/* The clearfix pseudo-elements would become empty flex items. */
.site-header .top .inside::before,
.site-header .top .inside::after {
	content: none;
}

#logo {
	float: none;
	display: block;
	justify-self: start;
}

#logo .logo,
#logo img {
	display: block;
}

#logo img {
	width: auto;
	max-height: 78px;
}

/* ---------------------------------------------------------------- Primary menu */

#main-nav {
	float: none;
	margin: 0;
}

#main-nav ul.sf-menu {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.1vw, 42px);
	margin: 0;
	float: none;
}

#main-nav ul.sf-menu > li {
	margin: 0;
	float: none;
}

.site-header #main-nav ul a {
	color: var(--wt-header-ink);
	font-size: clamp(16px, 1.05vw, 20px);
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.2;
	padding: 10px 0;
	transition: color .2s ease;
}

.site-header #main-nav ul li a:hover,
.site-header #main-nav ul li.sfHover > a,
.site-header #main-nav ul li.sf-hover > a,
.site-header #main-nav ul > li.current-menu-item > a,
.site-header #main-nav ul > li.current-menu-ancestor > a,
.site-header #main-nav ul > li.current_page_item > a {
	color: var(--wt-header-red);
}

/* Dropdown (e.g. Courses) */
.site-header #main-nav ul ul {
	top: 100%;
	min-width: 220px !important;
	margin-top: 8px !important;
	padding: 10px 0 !important;
	border: 1px solid rgba(112, 112, 112, .18);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

/* Keeps the hover alive while the pointer crosses the gap above the dropdown. */
.site-header #main-nav ul ul::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}

.site-header #main-nav ul ul li {
	margin: 0 !important;
}

.site-header .top #main-nav ul ul li a {
	display: block;
	padding: 8px 20px;
	color: var(--wt-header-ink);
	font-size: 16px;
	font-weight: 500;
}

.site-header .top #main-nav ul ul li a:hover,
.site-header .top #main-nav ul ul li.current-menu-item > a {
	color: var(--wt-header-red);
	background: #f6f6f6;
}

.site-header #main-nav .sf-sub-indicator {
	display: none;
}

/* ---------------------------------------------------------------- Actions */

.header-actions {
	display: flex;
	justify-self: end;
	align-items: center;
	gap: clamp(16px, 1.3vw, 26px);
}

.site-header a.header-link,
.site-header a.header-link:visited {
	color: var(--wt-header-ink);
	font-size: clamp(16px, 1.05vw, 20px);
	font-weight: 500;
	letter-spacing: -.01em;
	white-space: nowrap;
	transition: color .2s ease;
}

.site-header a.header-link:hover {
	color: var(--wt-header-red);
}

.header-actions .button.menu-cta,
.header-actions .button.menu-cta:visited {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0 26px 0 30px !important;
	min-height: 57px;
	border: 0 !important;
	border-radius: 999px;
	background: var(--wt-header-red) !important;
	color: #fff !important;
	font-size: 17px;
	font-weight: 500 !important;
	letter-spacing: -.01em;
	white-space: nowrap;
	transition: background-color .2s ease;
}

.header-actions .button.menu-cta:hover,
.header-actions .button.menu-cta:focus-visible,
.site-header .button.menu-cta.mobile:hover {
	background: #000 !important;
	color: #fff !important;
	opacity: 1; /* style.css fades a.button to 50% on hover, which turned the black grey */
}

.header-actions .worth-icon--arrow {
	width: 19px;
	height: 19px;
	flex: none;
}

/* Long menu (switched on by theme_trust.js when the bar runs out of room): logo centred, burger left. */
.site-header.long-menu .top .inside {
	display: flex;
	justify-content: center;
	padding-top: 12px;
	padding-bottom: 12px;
}

.site-header.long-menu .header-actions {
	position: absolute;
	right: clamp(20px, 2.6vw, 50px);
	top: 50%;
	transform: translateY(-50%);
}

.site-header.long-menu .header-link {
	display: none;
}

.site-header.long-menu #logo {
	margin: 0;
}

/* ---------------------------------------------------------------- Promo bar (ACF "Theme Options") */

/* .site-header prefix: style.css resets `.site-header .top * { padding: 0; }` */
.site-header .promo-bar a,
.site-header .promo-bar a:visited,
.site-header .promo-bar a:active {
	display: block;
	padding: 11px 20px;
	background: #141414;
	color: #e5e5e5;
	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
	letter-spacing: -.01em;
	text-align: center;
}

.site-header .promo-bar a:hover {
	background: #141414;
	color: #fff;
}

/* Messages stack in one grid cell so the bar keeps the height of the longest one;
   js/promo-bar.js moves .is-active between them. */
.promo-bar__text {
	display: inline-grid;
}

.promo-bar__msg {
	grid-area: 1 / 1;
	transition: opacity .6s ease, visibility .6s ease;
}

.promo-bar__msg:not(.is-active) {
	opacity: 0;
	visibility: hidden;
}

/* ---------------------------------------------------------------- Mobile (original mmenu header) */

@media screen and (max-width: 880px) {
	.header-actions {
		display: none;
	}

	/* Room for the full-width CTA bar (.menu-cta.mobile) above the logo. */
	.site-header .top .inside,
	.site-header.long-menu .top .inside {
		display: flex;
		justify-content: center;
		min-height: 0;
		padding-top: 52px;
		padding-bottom: 12px;
	}

	#logo img {
		max-height: 60px;
	}

	.site-header .button.menu-cta.mobile,
	.site-header .button.menu-cta.mobile:visited {
		padding: 9px 12px !important;
		background: var(--wt-header-red) !important;
		color: #fff !important;
		font-size: 14px;
		font-weight: 600 !important;
		text-align: center;
	}

	#menu-toggle {
		top: auto;
		bottom: 34px;
		color: var(--wt-header-ink);
	}
}