/* ==========================================================================
   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);
}
/* 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); }