/* ==========================================================================
   I Already Won Fitness: tablet and phone header (Prompt 07)
   Root: .iawf-mhdr (printed by inc/site-mobile-header.php at wp_body_open).
   Shown on Avada Small and Medium; the rule that hides it above the Avada
   Medium Screen breakpoint is printed inline from Global Options
   (visibility_medium) right after this file.

   Tablet: 640px up to the breakpoint. Phone: below 640px (design phone
   breakpoint, same as the Prompt 05 drawer).

   Tokens: IAWF-DSM-20261019. Components: IAWF-RCM-20261019 (iawf-btn
   classes; iawf-btn--header is 46px at 1024px and below). The drawer is
   styled by assets/css/iawf-header.css (Prompt 05); nothing is copied here.
   Translucent values are AWB colors mixed with transparency, never new colors.
   ========================================================================== */

.iawf-mhdr {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	color: var(--awb-color8);
	font-family: var(--awb-typography4-font-family);
}

/* Logged in: sit under the WordPress admin bar. iawf-mobile-header.js keeps
   --iawf-mhdr-top equal to the admin bar's visible bottom edge (it scrolls
   away below 601px). */
.admin-bar .iawf-mhdr {
	top: var(--iawf-mhdr-top, 32px);
}

@media (max-width: 782px) {
	.admin-bar .iawf-mhdr {
		top: var(--iawf-mhdr-top, 46px);
	}
}

@media (max-width: 600px) {
	.admin-bar .iawf-drawer,
	.admin-bar .iawf-scrim {
		top: var(--iawf-mhdr-top, 46px);
	}
}

/* Bar: transparent over the hero, solid black once scrolled (.is-solid from
   iawf-header.js, same trigger as desktop). */
.iawf-mhdr__bar {
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .35s, border-color .35s;
}

.iawf-mhdr.is-solid .iawf-mhdr__bar {
	background-color: var(--awb-color1);
	border-bottom-color: color-mix(in srgb, var(--awb-color4) 70%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
}

/* Tablet layout: toggle | logo | buttons. Both side columns keep their full
   content so the logo never covers the toggle; the 40px design gap tightens
   toward the desktop's 16px only where the three groups would not fit
   (about 640px to 688px, landscape phones). 284px = half of toggle (108) +
   logo (195) + buttons (265). */
.iawf-mhdr__inner {
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	align-items: center;
	gap: clamp(16px, calc(50% - 284px), 40px);
	height: 84px;
	padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}

/* Menu toggle: 48px translucent circle with two lines, then "Menu". */
.iawf-mhdr .iawf-mhdr__toggle {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--awb-color8);
	cursor: pointer;
	font-family: var(--awb-typography3-font-family);
	font-size: var(--awb-typography3-font-size);
	font-weight: var(--awb-typography3-font-weight);
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.iawf-mhdr__burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--awb-color8) 14%, transparent);
	transition: background-color .25s;
}

.iawf-mhdr__burger > span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--awb-color8);
}

.iawf-mhdr__burger > span + span {
	width: 12px;
	margin: 5px 6px 0 0; /* short line keeps the long line's left edge */
}

/* Hover lightens the circle on tablet only (the phone design has no hover). */
@media (hover: hover) and (pointer: fine) and (min-width: 640px) {
	.iawf-mhdr .iawf-mhdr__toggle:hover .iawf-mhdr__burger {
		background-color: color-mix(in srgb, var(--awb-color8) 26%, transparent);
	}
}

.iawf-mhdr .iawf-mhdr__toggle:focus {
	outline: none;
}

.iawf-mhdr .iawf-mhdr__toggle:focus-visible .iawf-mhdr__burger {
	background-color: color-mix(in srgb, var(--awb-color8) 26%, transparent);
	outline: 2px solid var(--awb-color8);
	outline-offset: 3px;
}

/* Logo: 52px tall on tablet (source 600 x 160, so 195px wide). */
.iawf-mhdr__logo {
	display: flex;
	align-items: center;
	color: var(--awb-color8);
	text-decoration: none;
}

.iawf-mhdr__logo .iawf-mhdr__logo-img {
	display: block;
	width: auto;
	max-width: none;
	height: 52px;
}

.iawf-mhdr__logo-text {
	font-family: var(--awb-typography3-font-family);
	font-size: var(--awb-typography3-font-size);
	font-weight: var(--awb-typography3-font-weight);
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.iawf-mhdr__logo:focus {
	outline: none;
}

.iawf-mhdr__logo:focus-visible {
	outline: 2px solid var(--awb-color8);
	outline-offset: 4px;
}

/* Buttons: Free class (outline) and Join now (red), 34px apart so the hover
   grow (22px) never touches the neighbor. */
.iawf-mhdr__ctas {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 34px;
}

.iawf-mhdr__ctas .fusion-button {
	white-space: nowrap;
}

/* Fallback list: shown only without JavaScript (noscript rule in the markup)
   or when the drawer script did not start (.is-fallback). */
.iawf-mhdr__nojs {
	display: none;
	background-color: var(--awb-color1);
	border-bottom: 1px solid var(--awb-color3);
}

.iawf-mhdr.is-fallback .iawf-mhdr__nojs {
	display: block;
}

.iawf-mhdr.is-fallback .iawf-mhdr__toggle {
	display: none;
}

.iawf-mhdr__nojs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0;
	padding: 12px max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left));
	list-style: none;
}

.iawf-mhdr__nojs-list > li {
	margin: 0;
	padding: 0;
}

.iawf-mhdr .iawf-mhdr__nojs-link {
	color: var(--awb-color8);
	font-family: var(--awb-typography3-font-family);
	font-size: var(--awb-typography3-font-size);
	font-weight: var(--awb-typography3-font-weight);
	line-height: 1.6;
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
}

.iawf-mhdr .iawf-mhdr__nojs-link[aria-current="page"],
.iawf-mhdr .iawf-mhdr__nojs-link:focus-visible {
	color: var(--awb-color5);
}

@media (hover: hover) and (pointer: fine) {
	.iawf-mhdr .iawf-mhdr__nojs-link:hover {
		color: var(--awb-color5);
	}
}

.iawf-mhdr .iawf-mhdr__nojs-link:focus-visible {
	outline: 2px solid var(--awb-color8);
	outline-offset: 3px;
}

/* Phone: logo left, 44px toggle right (no label), no buttons. */
@media (max-width: 639.98px) {
	.iawf-mhdr__inner {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		height: 68px;
		padding: 0 max(16px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
	}

	.iawf-mhdr .iawf-mhdr__toggle {
		order: 2;
	}

	.iawf-mhdr__logo {
		order: 1;
		min-width: 0;
	}

	.iawf-mhdr__burger {
		align-items: flex-end;
		width: 44px;
		height: 44px;
	}

	.iawf-mhdr__burger > span {
		margin-right: 13px;
	}

	.iawf-mhdr__burger > span + span {
		margin: 5px 13px 0 0; /* short line keeps the long line's right edge */
	}

	.iawf-mhdr__label,
	.iawf-mhdr__ctas {
		display: none;
	}

	.iawf-mhdr__logo .iawf-mhdr__logo-img {
		height: 44px;
	}

	.iawf-mhdr__nojs-list {
		padding-right: max(16px, env(safe-area-inset-right));
		padding-left: max(18px, env(safe-area-inset-left));
	}

	/* Shared drawer, phone: the two buttons are half the drawer wide, so the
	   iawf-btn--compact side padding (32px) would wrap "Free class". The
	   design centers the label with no side padding. */
	body .iawf-drawer .iawf-drawer__ctas .fusion-button.iawf-btn {
		padding-right: 0;
		padding-left: 0;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iawf-mhdr__bar,
	.iawf-mhdr__burger {
		transition: none;
	}
}