/*
 * header.css — Squad Website Theme brand header.
 *
 * Glass sticky masthead: monogram lockup + tier pill, centred pill nav with
 * active state, the Divi 5 chip, Try Free / Buy Pro CTAs, and an accessible
 * mobile drawer (≤940px). Consumes the --squad-* tokens from tokens.css.
 * Mirrors the prototype header in _reference. The shared .squad-btn and
 * .squad-d5-chip primitives live in components.css.
 *
 * @author Al Amin Ahamed
 * @since  4.0.0
 */

/*
 * Divi offsets #page-container to clear its own fixed masthead, via several
 * dynamic selectors (.et_fixed_nav.et_show_nav, plus secondary-nav and
 * centered-header variants carrying up to four classes). We replace that
 * masthead with the brand sticky header, so the offset is a dead gap. Because
 * Divi's variants out-specify a single class, reset with a scoped !important
 * rather than chase each selector. Scoped to the child via body.squad-v4.
 */
body.squad-v4 #page-container {
	padding-top: 0 !important;
}

/* ---- Skip link (keyboard / screen-reader) -------------------------- */
.squad-skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 200;
	padding: 10px 18px;
	border-radius: 10px;
	background: var(--squad-ink);
	color: var(--squad-white);
	font-weight: var(--squad-fw-bold);
	font-size: 0.95rem;
	box-shadow: var(--squad-shadow-md);
	/* Hidden off-canvas until focused. */
	transform: translateY(calc(-100% - 16px));
	transition: transform 0.2s var(--squad-ease);
}

.squad-skip-link:focus {
	transform: none;
}

/* The skip target is a non-interactive div; never paint a focus ring on it. */
#et-main-area:focus {
	outline: none;
}

/* Layout container (shared with prototype .wrap). */
.squad-header .wrap {
	width: 100%;
	max-width: var(--squad-maxw);
	margin-inline: auto;
	padding-inline: var(--squad-gutter);
}

/* ---- Optional announcement bar ------------------------------------- */
.squad-announce {
	background: var(--squad-ink);
	color: var(--squad-white);
	text-align: center;
	font-size: var(--squad-fs-sm);
	font-weight: var(--squad-fw-medium);
	padding: 8px var(--squad-gutter);
}

/* ---- Sticky glass bar ---------------------------------------------- */
.squad-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid var(--squad-line);
	transition: box-shadow 0.3s var(--squad-ease), background 0.3s var(--squad-ease);
}

.squad-header.is-scrolled {
	box-shadow: var(--squad-shadow-sm);
	background: rgba(255, 255, 255, 0.9);
}

/*
 * When logged in, the WP admin bar is fixed over the top of the viewport
 * (32px ≥783px, 46px ≤782px). Offset the sticky header so it parks just below
 * the bar instead of sliding underneath it.
 */
body.admin-bar .squad-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .squad-header {
		top: 46px;
	}
}

.squad-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 72px;
}

/* ---- Brand lockup + tier pill -------------------------------------- */
.squad-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.squad-logo {
	display: inline-flex;
	align-items: center;
}

.squad-logo img {
	display: block;
	width: auto;
	height: 38px;
}

.squad-tier-pill {
	font-size: 0.72rem;
	font-weight: var(--squad-fw-extrabold);
	letter-spacing: 0.1em;
	padding: 2px 7px;
	border-radius: 6px;
	color: var(--squad-white);
	background: var(--squad-grad-stem);
	transform: translateY(-1px);
}

/* Pricing page surfaces the PRO tier — distinct royal fill + lavender ring. */
.squad-tier-pill.is-pro {
	background: var(--squad-royal);
	box-shadow: inset 0 0 0 1px rgba(201, 184, 255, 0.55);
}

/* ---- Primary pill nav ---------------------------------------------- */
.squad-header__nav {
	display: contents;
}

.squad-nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.squad-nav-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: var(--squad-fw-semibold);
	font-size: 0.92rem;
	color: var(--squad-ink-soft);
	padding: 9px 14px;
	border-radius: var(--squad-radius-pill);
	transition: color 0.2s var(--squad-ease), background 0.2s var(--squad-ease);
}

.squad-nav-links a:hover {
	color: var(--squad-ink);
	background: var(--squad-bg-tint);
}

.squad-nav-links a.active,
.squad-nav-links .current-menu-item > a,
.squad-nav-links .current_page_item > a,
.squad-nav-links .current-menu-ancestor > a {
	color: var(--squad-violet);
	background: rgba(94, 46, 255, 0.08);
}

/* ---- CTAs ----------------------------------------------------------- */
.squad-nav-cta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.squad-nav-account {
	font-weight: var(--squad-fw-semibold);
	font-size: 0.92rem;
	color: var(--squad-ink-soft);
	padding: 9px 12px;
}

.squad-nav-account:hover {
	color: var(--squad-ink);
}

/* ---- Mobile drawer toggle ------------------------------------------ */
.squad-nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: 1px solid var(--squad-line-strong);
	background: var(--squad-white);
	border-radius: 12px;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.squad-nav-toggle span {
	width: 18px;
	height: 2px;
	background: var(--squad-ink);
	border-radius: 2px;
	transition: 0.3s var(--squad-ease);
}

.squad-nav-toggle.is-open span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.squad-nav-toggle.is-open span:nth-child(2) {
	opacity: 0;
}

.squad-nav-toggle.is-open span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ---- Responsive: collapse to drawer at ≤940px ---------------------- */
@media (max-width: 940px) {
	.squad-nav-toggle {
		display: flex;
		margin-left: auto;
	}

	.squad-header__nav {
		display: block;
	}

	.squad-nav-links {
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		margin: 0;
		padding: 14px var(--squad-gutter) 22px;
		background: var(--squad-white);
		border-bottom: 1px solid var(--squad-line);
		box-shadow: var(--squad-shadow-md);
		transform: translateY(-12px);
		opacity: 0;
		pointer-events: none;
		transition: 0.3s var(--squad-ease);
	}

	.squad-nav-links.is-open {
		transform: none;
		opacity: 1;
		pointer-events: auto;
	}

	.squad-nav-links a {
		padding: 12px 14px;
		font-size: 1rem;
	}
}