/*
 * Styling for the native [pu_nav_menu] shortcode replacement.
 * Colors/weights pulled from the original tp-navigation-menu widget's
 * saved settings (main_menu_normal_color, main_menu_hover_color, etc.)
 * and the header section background it sat in, so this matches the
 * site's existing visual language rather than inventing a new one.
 * See wp-content/PATCHES/2026-08-11-native-nav-menu.md
 */

/* Shared base: kill default list styling, lay out horizontally */
.pu-main-nav-list,
.pu-utility-bar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.pu-main-nav-list .menu-item,
.pu-utility-bar-list .menu-item {
	position: relative;
}

.pu-main-nav-list .menu-link,
.pu-utility-bar-list .menu-link {
	display: block;
	text-decoration: none;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	white-space: nowrap;
}

/*
 * Dropdown submenus: hidden by default, revealed on hover/focus, no JS needed.
 *
 * !important on `left` is deliberate, not general overuse: Astra's own theme
 * CSS has a same-specificity `.main-header-menu .sub-menu{left:-999em}` rule
 * (pushes dropdowns off-screen, meant to be revealed by Astra's own JS toggle
 * classes, which we're not using here). With equal specificity, whichever
 * rule lands later in WP Fastest Cache's combined CSS bundle wins the tie —
 * unpredictable and not something to depend on. !important here guarantees
 * this one specific property wins regardless of bundle ordering.
 */
.pu-main-nav-list .sub-menu,
.pu-utility-bar-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	position: absolute !important;
	top: 100%;
	left: 0 !important;
	min-width: 220px;
	background: #ffffff;
	box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.18);
	border-radius: 3px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;
}

/*
 * Main nav dropdowns restyled as wide mega-menu panels (added 2026-08-11)
 * — see wp-content/PATCHES/2026-08-11-mega-menu.md. Scoped to
 * .pu-main-nav-list only: the utility bar's one dropdown ("Important
 * Links") has just 4 children, so a wide multi-column panel would look
 * empty/oversized there — left as the existing simple list.
 *
 * Checked first for a reusable mega-menu system: Astra (free, active
 * theme) only has passive CSS for an `.astra-full-megamenu-wrapper`
 * class — the actual builder is an Astra Pro feature, not installed.
 * ElementsKit Lite (active) ships a real megamenu module, but its saved
 * config (`elementskit_options.megamenu_settings`) points at post IDs
 * that don't correspond to this site's real menu items (several missing
 * entirely, others resolve to unrelated WooCommerce demo products) —
 * stale/orphaned data, not something to build on. Built fresh instead:
 * pure CSS, no markup/data changes — `wp_nav_menu()`'s existing flat
 * `<ul class="sub-menu">` output is reflowed into balanced columns via
 * CSS multi-column layout, so there's no risk of mis-grouping real menu
 * content into invented categories.
 */
.pu-main-nav-list .sub-menu {
	min-width: 320px;
	width: max-content;
	max-width: min(700px, 92vw);
	columns: 200px 3;
	column-gap: 4px;
	padding: 14px 20px;
}

.pu-main-nav-list .sub-menu .menu-item {
	break-inside: avoid;
}

/* The last 2 top-level items sit near the right edge of the header — a
 * left-aligned 700px panel there would overflow off-screen. Right-align
 * their panels instead. Purely structural (position-based), not a
 * content assumption. */
.pu-main-nav-list > .menu-item:nth-last-child(-n+2) > .sub-menu {
	left: auto !important;
	right: 0 !important;
}

.pu-main-nav-list .menu-item-has-children:hover > .sub-menu,
.pu-main-nav-list .menu-item-has-children:focus-within > .sub-menu,
.pu-utility-bar-list .menu-item-has-children:hover > .sub-menu,
.pu-utility-bar-list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/*
 * Native mega-menu panels (added 2026-08-13, see
 * wp-content/PATCHES/2026-08-13-native-megamenu.md) — SUPERSEDES the
 * earlier "columns with bold section headers" CSS approximation that
 * used to live here (see git history / the 2026-08-13-mega-menu-
 * columns-and-more.md patch doc for that version). That approach
 * reflowed the flat wp_nav_menu() <ul class="sub-menu"> tree via CSS.
 * It's been replaced with a native renderer that reads the site's real
 * mega-menu content straight from ThePlus's own `plus-mega-menu` CPT —
 * see pu-native-nav-menu.php's PU_MegaMenu_Walker. All 7 of the current
 * main-menu's top-level items have a matching CPT post, so the flat
 * <ul class="sub-menu"> path (and the old CSS above) no longer renders
 * for any of them in practice — kept only as the walker's defensive
 * fallback for a hypothetical future top-level item with no CPT match,
 * which is why the base .sub-menu rules further up this file are still
 * here unmodified.
 */

.pu-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 320px;
	width: max-content;
	max-width: min(900px, 92vw);
	background: #ffffff;
	box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.18);
	border-radius: 3px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;
	padding: 16px 22px;
}

.pu-main-nav-list .menu-item-has-children:hover > .pu-mega-panel,
.pu-main-nav-list .menu-item-has-children:focus-within > .pu-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Same right-edge overflow guard as the plain .sub-menu panels. */
.pu-main-nav-list > .menu-item:nth-last-child(-n+2) > .pu-mega-panel {
	left: auto;
	right: 0;
}

.pu-mega-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
}

.pu-mega-col {
	flex: 1 1 180px;
	min-width: 170px;
}

/* Single-column categories (Discover PU, Campus Life, Research, Admission
 * — one real Elementor column holding one long flat link list) reflow
 * into balanced CSS columns instead of one tall list, same technique the
 * earlier CSS-only approximation used. */
.pu-mega-cols--single .pu-mega-col {
	flex-basis: 100% !important;
	max-width: 100% !important;
}

.pu-mega-cols--single .pu-mega-links {
	columns: 190px 3;
	column-gap: 18px;
}

.pu-mega-cols--single .pu-mega-links li {
	break-inside: avoid;
}

.pu-mega-heading {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #4C5594;
}

/* A few real headings (e.g. "Registrar's Secretariat") are configured as
 * clickable links to their own department page — confirmed against
 * production, not every heading. Inherit the header look; underline only
 * on hover so it doesn't read as a plain link by default. */
.pu-mega-heading a {
	color: inherit;
	text-decoration: none;
}

.pu-mega-heading a:hover {
	text-decoration: underline;
}

/* Wraps one nested Elementor section's column(s). Most groups have just
 * one column here (e.g. "Main Campus", or Administration's stacked
 * "Secretariats"/"Finance Officer's Secretariat"/etc.), so this reads as
 * a normal vertically-stacked block; a section with 2+ columns (e.g.
 * "Registrar's Secretariat") lays them out side by side via flex, same
 * as production's real column split. */
.pu-mega-subrow {
	display: flex;
	gap: 18px;
	margin-top: 8px;
}

.pu-mega-subcol {
	flex: 1 1 0;
	min-width: 0;
}

.pu-mega-links {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}

.pu-mega-links li {
	margin: 0;
}

.pu-mega-links a {
	display: block;
	padding: 4px 0;
	font-size: 13px;
	line-height: 1.35;
	color: #333333;
	text-decoration: none;
}

.pu-mega-links a:hover {
	color: #4C5594;
	text-decoration: underline;
}

.pu-main-nav-list .sub-menu .menu-item,
.pu-utility-bar-list .sub-menu .menu-item {
	width: 100%;
}

.pu-main-nav-list .sub-menu .menu-link,
.pu-utility-bar-list .sub-menu .menu-link {
	padding: 8px 16px;
	color: #333333;
	font-size: 14px;
}

.pu-main-nav-list .sub-menu .menu-link:hover,
.pu-utility-bar-list .sub-menu .menu-link:hover {
	background: #f4f4f7;
}

/* A small down-caret on items with a dropdown, matching the original's indicator */
.pu-main-nav-list .menu-item-has-children > .menu-link::after,
.pu-utility-bar-list .menu-item-has-children > .menu-link::after {
	content: "\25BE";
	display: inline-block;
	margin-left: 5px;
	font-size: 0.7em;
	vertical-align: middle;
}

/* Main nav: primary, on the dark indigo header band (#4C5594), white text, gold hover */
.pu-main-nav-list {
	background-color: #4C5594;
}

.pu-main-nav-list > .menu-item > .menu-link {
	color: #FFFFFF;
	font-weight: 600;
	font-size: 14px;
	padding: 14px 12px;
}

.pu-main-nav-list > .menu-item > .menu-link:hover,
.pu-main-nav-list > .menu-item.current-menu-item > .menu-link {
	color: #FABC2A;
}

/* Utility bar: secondary, smaller, right-aligned, on a light background */
.pu-utility-bar-list {
	justify-content: flex-end;
	font-size: 12px;
}

.pu-utility-bar-list > .menu-item > .menu-link {
	color: #4C5594;
	padding: 6px 10px;
}

.pu-utility-bar-list > .menu-item > .menu-link:hover,
.pu-utility-bar-list > .menu-item.current-menu-item > .menu-link {
	color: #656EAF;
}

/*
 * Utility bar two-line reflow (added 2026-08-11, see
 * wp-content/PATCHES/2026-08-11-utility-section-cleanup.md). The header
 * row (section 7745d02) is 3 Elementor columns at 33% each: an empty
 * spacer (fb7de97), the utility-bar nav links (d57947e), and the search
 * widgets — Ivory Search + Search & Filter (4cd4489). Squeezing 9 nav
 * links into a 33%-wide column is what caused the cramped single line.
 * Pure CSS, no _elementor_data change: hide the empty spacer (it has no
 * content, confirmed) and let the nav + search columns each take the
 * full row width, wrapping onto two stacked full-width lines — nav
 * links on top, search below.
 */
.elementor-element-fb7de97 {
	display: none !important;
}

.elementor-element-7745d02 > .elementor-container {
	flex-wrap: wrap !important;
}

.elementor-element-d57947e,
.elementor-element-4cd4489 {
	width: 100% !important;
	max-width: 100% !important;
	flex-basis: 100% !important;
}

.elementor-element-4cd4489 {
	margin-top: 6px;
}

/*
 * Mobile nav toggle (added 2026-08-19, see
 * wp-content/PATCHES/2026-08-19-mobile-nav-toggle.md). Two buttons, both
 * rendered by pu-native-nav-menu.php, both hidden entirely above the
 * mobile breakpoint further down — zero effect on desktop.
 */

/* Hamburger (.pu-nav-toggle): classic 3-bar icon, drawn in CSS rather than
 * an image/icon-font dependency. */
.pu-nav-toggle {
	display: none;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	position: relative;
}

.pu-nav-toggle span {
	position: absolute;
	left: 4px;
	right: 4px;
	height: 2px;
	background: #4C5594;
	transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.pu-nav-toggle span:nth-child(1) { top: 9px; }
.pu-nav-toggle span:nth-child(2) { top: 15px; }
.pu-nav-toggle span:nth-child(3) { top: 21px; }

/* Open state -> an X, same 3 spans, no extra markup */
.pu-nav-toggle--open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pu-nav-toggle--open span:nth-child(2) { opacity: 0; }
.pu-nav-toggle--open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Per-item expand toggle (.pu-mega-toggle): small chevron button after a
 * dropdown parent's link. Not the same element as the link itself — tap
 * targets stay unambiguous: the link navigates (when it has a real href),
 * this button only ever expands/collapses. */
.pu-mega-toggle {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 44px; /* real tap-target size, not just the visible glyph */
	height: 100%;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
}

.pu-mega-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -65%) rotate(45deg);
	transition: transform 0.2s ease-in-out;
}

.pu-mega-open > .pu-mega-toggle::after {
	transform: translate(-50%, -35%) rotate(225deg);
}

.pu-main-nav-list .pu-mega-toggle {
	color: #FFFFFF;
}

.pu-utility-bar-list .pu-mega-toggle {
	color: #4C5594;
}

/* Small screens: collapsed nav behind the hamburger, tap-to-expand
 * dropdowns instead of the desktop hover/focus-within reveal. */
@media (max-width: 768px) {
	.pu-nav-menu-wrap {
		position: relative;
	}

	.pu-nav-toggle {
		display: block;
	}

	.pu-main-nav-list,
	.pu-utility-bar-list {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.pu-main-nav-list.pu-nav-open,
	.pu-utility-bar-list.pu-nav-open {
		display: flex;
	}

	.pu-main-nav-list .menu-item,
	.pu-utility-bar-list .menu-item {
		width: 100%;
	}

	/* The link itself needs room on its right for the toggle button
	 * layered on top of it (absolute-positioned, see .pu-mega-toggle
	 * above) so the two don't overlap the same tap area. */
	.pu-main-nav-list .menu-item-has-children > .menu-link,
	.pu-utility-bar-list .menu-item-has-children > .menu-link {
		padding-right: 44px;
	}

	.pu-mega-toggle {
		display: block;
	}

	/* Overrides the desktop hover-reveal rules further up this file —
	 * .pu-mega-open is JS-toggled (pu-nav-menu.js), not hover-driven, on
	 * mobile. Same treatment for the plain .sub-menu fallback path. */
	.pu-main-nav-list .pu-mega-panel,
	.pu-utility-bar-list .pu-mega-panel,
	.pu-main-nav-list .sub-menu,
	.pu-utility-bar-list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		display: none;
		width: 100%;
		max-width: 100%;
	}

	.pu-mega-open > .pu-mega-panel,
	.pu-mega-open > .sub-menu {
		display: block;
	}

	/* The mega-panel's own internal columns (see .pu-mega-cols) are a
	 * flex row meant for desktop's wide dropdown — stack them on mobile
	 * instead, same reasoning as the CSS-multicolumn .pu-mega-links
	 * reflow just below. */
	.pu-mega-cols {
		flex-direction: column;
		gap: 12px;
	}

	.pu-mega-cols--single .pu-mega-links,
	.pu-main-nav-list .sub-menu {
		columns: 1;
	}

	.pu-utility-bar-list {
		justify-content: flex-start;
	}
}