/* ==========================================================================
   Site header & primary navigation (header.php).
   Sticky header, logo, top-level menu, dropdown sub-menus and the
   mobile hamburger toggle button. Off-canvas mobile menu rules live
   in assets/css/responsive/tablet.css since they only apply <=1240px;
   the tighter laptop sizes (1241–1400px) are in
   assets/css/responsive/laptop-nav.css.
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(250, 247, 242, 0.92);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--color-border);
	overflow: visible;           /* IMPORTANT: must stay visible or dropdowns get clipped */
	transition: box-shadow var(--transition), background var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); background: rgba(250, 247, 242, 0.98); }

/* ---- Header uses its OWN wider container, not the site's content --container.
   The content container (~1280-1400px typically) is too narrow for a 9-item
   nav with dropdowns; this was the actual cause of items getting cut off,
   not just a spacing problem. ---- */
.header-inner {
	max-width: min(1800px, 96vw);
	margin: 0 auto;
	padding: 0 24px;
	height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	overflow: visible;
}
/* The school name may shrink (and cut with "…") if a small phone needs the
   room — the ☰ button and the language button must never be pushed off the
   screen. This was happening on 360px-wide Android phones. */
.site-branding { display: flex; align-items: center; gap: 12px; flex-shrink: 1; min-width: 0; }
.site-branding .site-logo-link { display: flex; align-items: center; gap: 12px; min-width: 0; }
.site-title-group { min-width: 0; }
.site-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-toggle, .header-inner > .lang-switch { flex-shrink: 0; }
.site-branding img.custom-logo { max-height: 54px; width: auto; border-radius: 8px; }
.brand-mark {
	width: 46px; height: 46px; border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: #f4d9a8;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-heading); font-size: 1.4rem; flex-shrink: 0;
	box-shadow: var(--shadow-sm);
}
.site-title-group { display: flex; flex-direction: column; line-height: 1.15; }
.site-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.28rem; color: var(--color-primary-dark); margin: 0; }
.site-tagline { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary-dark); margin: 0; }

/* ---- Nav wrapper: no scrolling, no clipping — just fits within the wider header-inner ---- */
.primary-navigation {
	flex-grow: 1;
	display: flex;
	justify-content: flex-end;
	min-width: 0;
	overflow: visible;           /* was "hidden" — that's what broke dropdowns */
}

/* ---- Menu: single line, fluid sizing so it fits without scrolling down
   to 1400px-wide desktop/laptop screens (see responsive/tablet.css for
   the breakpoint). Two things do the work of fitting a 10-item menu with
   dropdowns into that space: three of the longest category labels are
   shortened for the top-level bar only (see the short-label map in
   inc/nav-walker.php — full names still show everywhere else on the
   site), and the sizing below shrinks fluidly as the viewport narrows.
   Below the breakpoint the theme's own hamburger/off-canvas menu takes
   over, so we don't need to handle narrower widths here. ---- */
.primary-menu {
	display: flex;
	align-items: center;
	gap: clamp(0px, 0.25vw, 3px);
	position: relative;
	flex-wrap: nowrap;
	max-width: 100%;
}

.primary-menu > li {
	position: relative;
	flex-shrink: 0;
}

.primary-menu .nav-link {
	display: flex; align-items: center; gap: 6px;
	padding: clamp(6px, 0.5vw, 12px) clamp(6px, 0.8vw, 15px);  /* shrinks fluidly instead of a fixed size */
	font-weight: 500;
	font-size: clamp(0.74rem, 0.22vw + 0.58rem, 0.95rem);      /* shrinks fluidly on narrower desktops */
	color: var(--color-text);
	border-radius: 999px;
	white-space: nowrap;         /* stop link text wrapping onto 2 lines */
	transition: background var(--transition), color var(--transition);
}
.primary-menu > li > .nav-link:hover,
.primary-menu > li.current-menu-item > .nav-link,
.primary-menu > li.current-menu-parent > .nav-link,
.primary-menu > li.current-menu-ancestor > .nav-link {
	background: var(--color-primary);
	color: #fff;
}

/* ---- Contact call-to-action button (last top-level item) ----
   Tagged .menu-item-cta by inc/nav-walker.php. Uses the brand saffron
   (same as the site's primary buttons); on hover it turns brand green
   with the logo's gold text, lifts, glows, a light sheen sweeps across
   and the arrow nudges forward. */
.primary-menu > li.menu-item-cta { margin-left: clamp(6px, 0.6vw, 12px); }
.primary-menu > li.menu-item-cta > .nav-link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(8px, 0.55vw, 11px) clamp(16px, 1.2vw, 24px);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
	box-shadow: 0 4px 14px rgba(217, 138, 61, 0.35);
	transition: transform var(--transition), box-shadow var(--transition), color var(--transition);
}
/* Brand-green layer (with a light sheen on top of it) that fades in
   behind the text on hover while the sheen sweeps across. */
.primary-menu > li.menu-item-cta > .nav-link::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%),
		linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	background-size: 250% 100%, 100% 100%;
	background-position: 130% 0, 0 0;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity var(--transition), background-position 650ms ease;
}
/* Arrow that nudges forward on hover. */
.primary-menu > li.menu-item-cta > .nav-link::after {
	content: '\2192';
	font-size: 1.05em;
	line-height: 1;
	transition: transform var(--transition);
}
.primary-menu > li.menu-item-cta > .nav-link:hover,
.primary-menu > li.menu-item-cta > .nav-link:focus-visible,
.primary-menu > li.menu-item-cta.current-menu-item > .nav-link {
	color: #f4d9a8;
	background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
	box-shadow: 0 8px 22px rgba(47, 93, 80, 0.35);
}
.primary-menu > li.menu-item-cta > .nav-link:hover,
.primary-menu > li.menu-item-cta > .nav-link:focus-visible { transform: translateY(-2px); }
.primary-menu > li.menu-item-cta > .nav-link:hover::before,
.primary-menu > li.menu-item-cta > .nav-link:focus-visible::before,
.primary-menu > li.menu-item-cta.current-menu-item > .nav-link::before { opacity: 1; background-position: -30% 0, 0 0; }
.primary-menu > li.menu-item-cta > .nav-link:hover::after,
.primary-menu > li.menu-item-cta > .nav-link:focus-visible::after { transform: translateX(4px); }
.primary-menu > li.menu-item-cta > .nav-link:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(47, 93, 80, 0.3); }
.primary-menu > li.menu-item-cta > .nav-link:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.primary-menu > li.menu-item-cta > .nav-link,
	.primary-menu > li.menu-item-cta > .nav-link::after { transition: none; }
	.primary-menu > li.menu-item-cta > .nav-link:hover { transform: none; }
}

/* Dropdowns open on click on every screen size (see mobile-menu.js) —
   the pointer cursor signals that up front instead of only on mobile. */
.has-dropdown > .nav-link { cursor: pointer; }
.dropdown-caret {
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
	flex-shrink: 0;
	transition: transform var(--transition);
}
.has-dropdown:focus-within > .nav-link .dropdown-caret,
.has-dropdown.is-open > .nav-link .dropdown-caret { transform: rotate(225deg); margin-top: 3px; }

/* ---- Dropdown sub-menu ---- */
.sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 380px;
	max-width: 420px;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--color-border);
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;        /* prevents an invisible sub-menu from blocking clicks underneath */
	transform: translateY(8px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	z-index: 999;                /* raised so it always sits above hero/page content below the header */
}
.has-dropdown:focus-within > .sub-menu,
.has-dropdown.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
.sub-menu .nav-link {
	display: block;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
	color: var(--color-text);
	white-space: normal;         /* sub-menu links keep wrapping normally, only top-level nowraps */
	line-height: 1.4;
}
.sub-menu li + li { margin-top: 2px; }
.sub-menu .nav-link:hover,
.sub-menu li.current-menu-item > .nav-link { background: var(--color-bg-alt); color: var(--color-primary-dark); }
.sub-menu::before {
	content: '';
	position: absolute;
	top: -6px; left: 28px;
	width: 12px; height: 12px;
	background: var(--color-surface);
	border-left: 1px solid var(--color-border);
	border-top: 1px solid var(--color-border);
	transform: rotate(45deg);
}
/* Mouse bridge: an invisible strip filling the 10px gap between the menu
   name and the list under it, so moving the mouse down into the list never
   passes "outside" the menu item and closes it (assets/js/mobile-menu.js).
   It belongs to the sub-menu, so it only exists while the list is open. */
@media (min-width: 1241px) {
	.has-dropdown > .sub-menu::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: -14px;
		height: 14px;
	}
}

/* Nav is right-aligned, so dropdowns near the right edge open leftward
   instead of overflowing past the viewport. Covers the last 5 items
   (Aerial Yoga onward, including the "Extra Options" dropdown). */
.primary-menu > li.has-dropdown:nth-last-child(-n+5) > .sub-menu { left: auto; right: 0; }
.primary-menu > li.has-dropdown:nth-last-child(-n+5) > .sub-menu::before { left: auto; right: 28px; }

/* The language button sits between the menu and the ☰ button — see
   assets/css/components/translate.css and inc/translate.php. */
.header-inner > .lang-switch { margin-left: 4px; }

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	flex-shrink: 0;
	margin-left: 12px;
	transition: background var(--transition), border-color var(--transition);
}
.menu-toggle:hover { background: var(--color-bg-alt); border-color: var(--color-primary); }
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--color-primary-dark); margin: 0 auto; transition: transform var(--transition), opacity var(--transition); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }