/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Site header — css/header.css (inc/site-header.php)
 *
 * Figma header: 96px row, logo at the content edge, menu 80px to its right
 * (DM Sans Medium 15px, 28px apart), dark "Become a Member" button on the
 * right. On pages that start with a Page Hero (body class header-over-hero,
 * functions.php) the header sits over the
 * hero's background, as in every Figma frame; elsewhere it's a white bar.
 * Below 1024px the menu folds into a "Menu" button (js/header.js).
 * =====================================================================================================================
 */

#page { position: relative; }

/* Astra's own phone menu is replaced by ours */
#ast-mobile-popup-wrapper,
.ast-mobile-popup-drawer { display: none !important; }   /* !important: Astra shows it with inline styles */

.site-header-doceo {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);   /* sits under the WP toolbar when logged in */
	right: 0;
	left: 0;
	z-index: 100;
	background-color: var(--clr-white);
	font-family: var(--ff-ui);
	letter-spacing: 0;
	transition:
		background-color var(--dur-hover) var(--ease-soft),
		box-shadow var(--dur-hover) var(--ease-soft);
}

/* Fixed takes the header out of the flow: make room for it, and for anchors */
body:not(.header-over-hero) #page { padding-top: var(--header-height); }
html { scroll-padding-top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px)); }

.header-over-hero .site-header-doceo { background-color: transparent; }

/* Scrolled: frosted paper glass across the whole row */
.site-header-doceo[data-scrolled] {
	background-color: var(--clr-header-solid);
	box-shadow: var(--shadow-header);
}

@supports ( ( -webkit-backdrop-filter: blur(1px) ) or ( backdrop-filter: blur(1px) ) ) {
	.site-header-doceo[data-scrolled] {
		background-color: var(--clr-header-glass);
		-webkit-backdrop-filter: blur(16px) saturate(1.4);
		backdrop-filter: blur(16px) saturate(1.4);
	}
}

/* Below 600px WordPress lets the toolbar scroll away, so don't leave a gap for it */
@media (max-width: 600px) {
	.admin-bar .site-header-doceo { top: 0; }
	html { scroll-padding-top: var(--header-height); }
}

/* The hero makes room for the header that now sits over it */
.header-over-hero .entry-content > .page-hero:first-child .page-hero__frame,
.header-over-hero .single-layout > .page-hero:first-child .page-hero__frame {
	padding-top: calc(var(--header-height) + clamp(2.5rem, 1.5rem + 4vw, 5.5rem));
}

.site-header-doceo__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	max-width: calc(var(--container-width) + (var(--container-gutter) * 2));
	min-height: var(--header-height);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.site-header-doceo__logo {
	display: block;
	flex: none;
	line-height: 0;
}

.site-header-doceo__logo img {
	display: block;
	width: 6.625rem;                        /* 106px (from Figma) */
	height: auto;
}

.site-header-doceo__logo:focus-visible {
	outline: 3px solid #2563EB;
	outline-offset: 6px;
}

.site-header-doceo__panel {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--space-md);
}

.site-header-doceo__nav { margin-left: clamp(1.5rem, 4vw, 5rem); }   /* 80px (from Figma) */

.site-header-doceo .site-header-doceo__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.75rem;                         /* 28px (Figma --space-28) */
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header-doceo__menu li {
	position: relative;
	margin: 0;
}

.site-header-doceo__menu a {
	display: block;
	padding: 0.75rem 0;
	color: var(--clr-ink);
	font-size: var(--fs-nav);
	font-weight: var(--fw-medium);
	line-height: var(--lh-ui);
	text-decoration: none;
}

.site-header-doceo__menu a:hover,
.site-header-doceo__menu .current-menu-item > a,
.site-header-doceo__menu .current-menu-ancestor > a {
	text-decoration: underline;
	text-decoration-color: var(--clr-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
}

.site-header-doceo__menu a:focus-visible {
	outline: 3px solid #2563EB;
	outline-offset: 2px;
}

/* Small chevron on items with a dropdown */
.site-header-doceo__menu > .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.site-header-doceo__menu > .menu-item-has-children > a::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	margin-top: -0.2em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

/* Dropdowns: open on hover and when anything inside has keyboard focus */
.site-header-doceo__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	z-index: 10;
	min-width: 13rem;
	margin: 0;
	padding: var(--space-xs) 0;
	border-radius: var(--radius-btn);
	background: var(--clr-white);
	box-shadow: var(--shadow-card);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.25rem);
	transition: opacity var(--dur-hover) var(--ease-soft), transform var(--dur-hover) var(--ease-soft), visibility 0s linear var(--dur-hover);
}

.site-header-doceo__menu li:hover > .sub-menu,
.site-header-doceo__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.site-header-doceo__menu .sub-menu a {
	padding: 0.55rem 1rem;
	white-space: nowrap;
}

.site-header-doceo__menu .sub-menu a:hover {
	background: var(--clr-bone-light);
	text-decoration: none;
}

/* Account items (Dashboard, Logout, Login, Register) are for the phone menu only */
.site-header-doceo__menu .doc-mm__show { display: none; }

.site-header-doceo .site-header-doceo__btn {
	flex: none;
	min-width: 11.75rem;                    /* 188px (from Figma) */
	min-height: 2.875rem;                   /* 46px (from Figma) */
	margin-left: auto;
	color: var(--clr-white);
}

/* The phone menu button — hidden until the menu folds */
.site-header-doceo__toggle {
	display: none;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
	padding: 0.75rem 0.25rem;
	border: 0;
	background: none;
	color: var(--clr-ink);
	font: var(--fw-medium) var(--fs-nav) / 1 var(--ff-ui);
	cursor: pointer;
}

.site-header-doceo__toggle:focus-visible {
	outline: 3px solid #2563EB;
	outline-offset: 2px;
}

.site-header-doceo__toggle-bars,
.site-header-doceo__toggle-bars::before,
.site-header-doceo__toggle-bars::after {
	display: block;
	width: 1.25rem;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition: transform var(--dur-hover) var(--ease-soft), opacity var(--dur-hover) var(--ease-soft);
}

.site-header-doceo__toggle-bars { position: relative; }

.site-header-doceo__toggle-bars::before,
.site-header-doceo__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.site-header-doceo__toggle-bars::before { top: -6px; }
.site-header-doceo__toggle-bars::after  { top: 6px; }

.site-header-doceo__toggle[aria-expanded="true"] .site-header-doceo__toggle-bars { background: transparent; }
.site-header-doceo__toggle[aria-expanded="true"] .site-header-doceo__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.site-header-doceo__toggle[aria-expanded="true"] .site-header-doceo__toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }


/*
 * Folded menu — phones and small tablets
 * ---------------------------------------------------------------------------------------------------------------------
 * Without JavaScript the panel simply stays open under the logo row.
 */
@media (max-width: 1023px) {
	.site-header-doceo__inner { flex-wrap: wrap; }

	.js .site-header-doceo__toggle { display: inline-flex; }

	.site-header-doceo__panel {
		flex: 1 0 100%;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md);
		padding-bottom: var(--space-lg);
	}

	.js .site-header-doceo__panel { display: none; }
	.js .site-header-doceo[data-open] .site-header-doceo__panel { display: flex; }

	/* The open phone menu is long: let it scroll inside the window */
	.js .site-header-doceo[data-open] {
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		background-color: var(--clr-white);
		box-shadow: 0 12px 24px rgba(30, 30, 28, 0.08);
	}

	.site-header-doceo__nav { margin-left: 0; }

	.site-header-doceo .site-header-doceo__menu {
		flex-direction: column;
		align-items: stretch;
	}

	.site-header-doceo__menu > li { border-bottom: 1px solid var(--clr-border); }

	.site-header-doceo__menu a { padding: 0.9rem 0; font-size: 1.0625rem; }

	.site-header-doceo__menu > .menu-item-has-children > a::after { display: none; }

	.site-header-doceo__menu .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 var(--space-sm) var(--space-md);
		border-radius: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-header-doceo__menu .sub-menu a { padding: 0.5rem 0; white-space: normal; }

	.site-header-doceo__menu .doc-mm__show { display: block; }

	.site-header-doceo .site-header-doceo__btn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header-doceo,
	.site-header-doceo__menu .sub-menu,
	.site-header-doceo__toggle-bars,
	.site-header-doceo__toggle-bars::before,
	.site-header-doceo__toggle-bars::after { transition: none; }
}