/* ============================================================================
   SCMEP ONLINE — HEADER / NAVIGATION REDESIGN
   Site-wide (enqueued on every page — see scmep_child_enqueue_header_assets()).
   Additive on top of the base .scmep-header / .scmep-nav rules already in
   style.css (bar layout, logo sizing, link underline hover, mobile slide-in
   panel, current-page state) — this file only adds what's new: scroll-shrink,
   the 1440px header container, mega menu / dropdown panels, the account
   dropdown, and the mobile accordion treatment for those two panels.
   ============================================================================ */

.scmep-header__bar {
	max-width: 1440px;
	min-height: 80px;
	transition: min-height 300ms ease;
}

.scmep-header {
	transition: box-shadow 300ms ease;
}

.scmep-header.is-scrolled .scmep-header__bar {
	min-height: 70px;
}

/* Sized by height, not width, so it scales predictably as the bar shrinks —
   the mark's own proportions (viewBox 300x64) set the width from there. */
.scmep-header__logo svg {
	width: auto;
	height: 58px;
	transition: height 300ms ease, opacity var(--sc-dur) var(--sc-ease), transform var(--sc-dur) var(--sc-ease);
}
.scmep-header.is-scrolled .scmep-header__logo svg {
	height: 50px;
}
.scmep-header__logo:hover svg { opacity: 0.85; transform: scale(1.03); }
.scmep-header__logo:active svg { opacity: 0.7; }

/* ---------------------------------------------------------------------------
   RIGHT-SIDE ICON BUTTONS — circular, not the base stylesheet's rounded-square
   --------------------------------------------------------------------------- */
.scmep-iconbtn {
	width: 40px;
	height: 40px;
	border-radius: 999px;
}
.scmep-iconbtn:hover { background-color: #F1F5F9; }

/* ---------------------------------------------------------------------------
   SIGN IN — bigger, bolder CTA than the compact --sm button used elsewhere
   --------------------------------------------------------------------------- */
.scmep-header__signin {
	min-height: 48px;
	padding-inline: 1.75rem;
	border-radius: 12px;
}
.scmep-header__signin:hover { background-color: #2563EB; }

/* ---------------------------------------------------------------------------
   NAV SPACING — a touch airier than the base 8px list gap
   --------------------------------------------------------------------------- */
.scmep-nav__list { gap: 0.25rem; }
.scmep-nav__link,
.scmep-nav__toggle { padding-inline: 0.9rem; }

/* ---------------------------------------------------------------------------
   NAV TOGGLE BUTTONS (Topics / Resources) — same visual language as a link,
   but a real <button> so it's keyboard- and screen-reader-operable.
   --------------------------------------------------------------------------- */
.scmep-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: 0;
	/* .scmep-nav__link (same element, base stylesheet) already sets the
	   correct font-size/weight/color — only reset what <button> needs to stop
	   using the browser's UI font instead of the page's. A `font: inherit`
	   shorthand here would also wipe the size/weight and made this button
	   render at the body's larger default size, which is what was squeezing
	   "Learning Paths" into wrapping. */
	font-family: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}

.scmep-nav__chevron {
	width: 15px;
	height: 15px;
	transition: transform var(--sc-dur) var(--sc-ease);
}
.scmep-nav__item--dropdown.is-open .scmep-nav__chevron { transform: rotate(180deg); }
.scmep-nav__item--dropdown.is-open > .scmep-nav__toggle { color: var(--sc-secondary); }

.scmep-nav__item--dropdown { position: relative; }

/* ---------------------------------------------------------------------------
   MEGA MENU (Topics) + simple DROPDOWN (Resources, account) — shared panel
   chrome, different internal layout.
   --------------------------------------------------------------------------- */
.scmep-mega,
.scmep-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	background: rgb(255 255 255 / 92%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--sc-border);
	border-radius: 16px;
	box-shadow: var(--sc-shadow-lg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--sc-dur) var(--sc-ease), transform var(--sc-dur) var(--sc-ease), visibility var(--sc-dur);
	z-index: 110;
}

.scmep-nav__item--dropdown.is-open > .scmep-mega,
.scmep-nav__item--dropdown.is-open > .scmep-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.scmep-mega {
	left: 0;
	transform: translateY(-6px);
	width: min(720px, 90vw);
	padding: var(--sc-3);
}
.scmep-nav__item--dropdown.is-open > .scmep-mega { transform: translateY(0); }

.scmep-mega__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
}

.scmep-mega__item {
	display: flex;
	align-items: center;
	gap: var(--sc-1);
	padding: var(--sc-1) var(--sc-2);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-text);
	text-decoration: none;
	font-size: var(--sc-fs-sm);
	font-weight: 500;
	transition: background-color var(--sc-dur) var(--sc-ease), color var(--sc-dur) var(--sc-ease);
}
.scmep-mega__item:hover,
.scmep-mega__item:focus-visible { background: var(--sc-bg); color: var(--sc-secondary); }

.scmep-mega__icon { flex: 0 0 20px; color: var(--sc-secondary); display: inline-flex; }
.scmep-mega__icon svg { width: 18px; height: 18px; }

.scmep-mega__all {
	display: block;
	margin-top: var(--sc-2);
	padding-top: var(--sc-2);
	border-top: 1px solid var(--sc-border);
	color: var(--sc-secondary);
	font-weight: 700;
	font-size: var(--sc-fs-sm);
	text-decoration: none;
}
.scmep-mega__all:hover { text-decoration: underline; }

.scmep-dropdown {
	left: 0;
	min-width: 260px;
	padding: var(--sc-1);
}
.scmep-dropdown--right { left: auto; right: 0; transform: translateY(-6px); }
.scmep-nav__item--dropdown.is-open > .scmep-dropdown--right { transform: translateY(0); }

.scmep-dropdown__item {
	display: block;
	padding: 0.7rem var(--sc-2);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-text);
	text-decoration: none;
	font-size: var(--sc-fs-sm);
	font-weight: 500;
	line-height: 1.4;
}
.scmep-dropdown__item:hover,
.scmep-dropdown__item:focus-visible { background: var(--sc-bg); color: var(--sc-secondary); }

.scmep-dropdown__name {
	display: block;
	padding: 0.6rem var(--sc-2) 0.4rem;
	font-size: var(--sc-fs-xs);
	font-weight: 700;
	color: var(--sc-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--sc-border);
	margin-bottom: 4px;
}

/* ---------------------------------------------------------------------------
   ACCOUNT (logged-in) — avatar trigger button
   --------------------------------------------------------------------------- */
.scmep-header__avatar-btn {
	width: 40px;
	height: 40px;
	padding: 0;
	overflow: hidden;
	border-radius: 999px;
}
.scmep-header__avatar-btn img { width: 100%; height: 100%; display: block; border-radius: 999px; }
.scmep-header__profile { display: flex; align-items: center; }

/* ---------------------------------------------------------------------------
   MOBILE NAV SCRIM — dims the page behind the fullscreen drawer
   --------------------------------------------------------------------------- */
.scmep-nav-scrim {
	position: fixed;
	inset: 0;
	background: rgb(16 42 67 / 45%);
	backdrop-filter: blur(2px);
	z-index: 90;
	opacity: 0;
	transition: opacity var(--sc-dur) var(--sc-ease);
}
.scmep-nav-scrim.is-visible { opacity: 1; }

/* ---------------------------------------------------------------------------
   MOBILE — accordion instead of floating panels, inside the fullscreen
   slide-in drawer that style.css already provides for .scmep-header__nav-wrap.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.scmep-header__bar,
	.scmep-header.is-scrolled .scmep-header__bar { min-height: 70px; }

	.scmep-nav__toggle { width: 100%; justify-content: space-between; }

	.scmep-mega,
	.scmep-dropdown {
		position: static;
		transform: none !important;
		width: 100%;
		max-width: none;
		margin: 0 0 var(--sc-1);
		box-shadow: none;
		border: 0;
		border-radius: 0;
		background: var(--sc-bg);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		max-height: 0;
		overflow: hidden;
		padding: 0 var(--sc-2);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: max-height 300ms ease, padding 300ms ease;
	}
	.scmep-nav__item--dropdown.is-open > .scmep-mega,
	.scmep-nav__item--dropdown.is-open > .scmep-dropdown {
		max-height: 600px;
		padding: var(--sc-2);
	}

	.scmep-mega__grid { grid-template-columns: 1fr; }
	.scmep-dropdown--right { right: auto; }

	/* Account dropdown stays a floating panel even on mobile — it's reached
	   from the header bar itself, not the fullscreen nav drawer. */
	.scmep-header__profile .scmep-dropdown {
		position: absolute;
		max-height: none;
		overflow: visible;
		background: rgb(255 255 255 / 92%);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid var(--sc-border);
		border-radius: 16px;
		box-shadow: var(--sc-shadow-lg);
		padding: var(--sc-1);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	.scmep-header__profile.is-open .scmep-dropdown {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scmep-header__bar,
	.scmep-header,
	.scmep-header__logo svg,
	.scmep-nav__chevron,
	.scmep-mega,
	.scmep-dropdown,
	.scmep-nav-scrim { transition: none; }
}