/*
 * Small additions on top of custom.css (this theme's own design-system
 * utility classes, loaded after Bootstrap 4 — see inc/enqueue.php). Nothing
 * here re-implements a utility; it only covers the couple of things the
 * vanilla-JS behaviours need that the utility classes can't express.
 */

/* Learning Pathways: inactive stage panels/thumbnails are toggled with the
   native `hidden` attribute by app.js, so no extra CSS is required for that
   interaction — this rule only keeps the stage panel from collapsing to 0
   height between the attribute being removed and its content painting. */
[data-gdg-pathway-stage] {
	display: block;
}

/* Header nav renders wp_nav_menu() with its <ul> wrapper stripped (so the
   <li> items become flex children directly) — Tailwind's preflight only
   resets list-style on <ul>/<ol> themselves, so orphaned <li> still get the
   browser's default bullet marker without this. */
[data-gdg-header] nav li,
#mobile-nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Nav dropdowns: whenever a menu item has children (Appearance > Menus,
   drag one item to be a sub-item of another), WordPress's default walker
   automatically adds a `menu-item-has-children` class on the parent <li>
   and wraps the children in a nested <ul class="sub-menu"> — with zero
   layout/positioning rules of its own. Undeclared, that nested <ul> just
   renders inline inside the flex row and blows out the fixed-height header
   bar. custom.css's compiled utility classes have no knowledge of this
   WordPress-generated markup, so it's styled by hand here instead. */

[data-gdg-header] .menu-item-has-children > a,
#mobile-nav .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}
[data-gdg-header] .menu-item-has-children > a::after,
#mobile-nav .menu-item-has-children > a::after {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 200ms ease-out;
}
#mobile-nav .menu-item-has-children > a[aria-expanded="true"]::after {
	transform: rotate(225deg);
}

/* Desktop: opens on hover, and on keyboard focus of any link inside it
   (:focus-within), directly below the parent item. */
[data-gdg-header] nav[aria-label="Primary"] .menu-item-has-children {
	position: relative;
}
[data-gdg-header] nav[aria-label="Primary"] .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	margin: 0.75rem 0 0;
	padding: 0.5rem 0;
	min-width: 200px;
	background: #12203b;
	box-shadow: 0 16px 32px rgba(18, 32, 59, 0.24);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms;
}
[data-gdg-header] nav[aria-label="Primary"] .menu-item-has-children:hover > .sub-menu,
[data-gdg-header] nav[aria-label="Primary"] .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
[data-gdg-header] nav[aria-label="Primary"] .sub-menu a {
	display: block;
	padding: 0.625rem 1.25rem;
	white-space: nowrap;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: #fff;
}
[data-gdg-header] nav[aria-label="Primary"] .sub-menu a:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #e1553a;
}

/* Pages other than the front page render the header solid (light bar, dark
   text) from the very first paint — see header.php's $gdg_header_solid and
   app.js's data-gdg-header-force-solid. header.php always renders nav link
   spans white (matching what dropdown children need — see above), so on
   those pages the top-level links need this rule to actually turn dark, and
   it needs to happen here rather than wait for app.js to avoid a flash of
   invisible white-on-white text. The child combinator (nav > li > a > span)
   only ever matches a direct, top-level link — a dropdown child is nested
   one level deeper via its parent's <ul class="sub-menu">, so it can't
   match this selector and is unaffected, same as the scroll-driven version
   of this same rule in app.js. */
[data-gdg-header][data-gdg-header-force-solid="1"] nav[aria-label="Primary"] > li > a > [data-gdg-header-link] {
	color: #12203b;
}

/* Mobile: collapsed by default (no hover on touch), toggled open/closed by
   the parent link itself — see initMobileSubmenus() in app.js. */
#mobile-nav .sub-menu {
	margin: 0;
	padding-left: 1rem;
}
#mobile-nav .sub-menu a {
	display: block;
	padding: 0.875rem 0;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}