/* ==========================================================================
   Header/Footer Navigation — submenu item no-wrap fix
   Core WP Navigation block gives submenu links white-space:normal by default,
   which wraps long labels (e.g. "Library History Timeline") across multiple
   lines inside the fixed-width dropdown container. Force single-line links
   and let the submenu container size to its longest item instead.
   ========================================================================== */

.wp-block-navigation .wp-block-navigation__submenu-container {
	width: max-content;
	min-width: 100%;
	/* Core WP anchors submenu containers with right:0 by default, which
	   flips the dropdown to grow leftward once it's wider than its parent
	   nav item (exactly what happens once no-wrap is applied above). Force
	   left-edge alignment with the parent item instead. */
	left: 0 !important;
	right: auto !important;
	/* Gap between the nav item and the dropdown box, WITHOUT margin.
	   margin-top creates real dead space that belongs to no element, so
	   moving the mouse through it triggers mouseleave on the parent nav
	   item (core WP's hover-open behavior is JS-driven via mouseenter/
	   mouseleave, not pure CSS :hover) and the menu closes before you
	   reach it. padding-top keeps that space inside this element's own
	   box — still part of the parent nav item's hoverable subtree — so
	   hover stays open while crossing it. The visible border/background
	   is then drawn a few px lower via the ::before below, so it LOOKS
	   like a gap without actually being dead space. */
	padding-top: 8px;
	background-color: transparent !important;
	border: none !important;
	position: relative;
}

/* Visible dropdown box, drawn starting after the padding-top gap above,
   so it appears visually offset from the parent nav item while the real
   hoverable area (the padding) stays gap-free. Sits behind the actual
   menu links (z-index) so text/links remain clickable and on top. */
.wp-block-navigation .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	z-index: 0;
}

.wp-block-navigation .wp-block-navigation__submenu-container > * {
	position: relative;
	z-index: 1;
}

/* This site's nav uses items-justified-right, which triggers a MORE SPECIFIC
   core WP rule (.wp-block-navigation.items-justified-right .wp-block-navigation__container
   .has-child .wp-block-navigation__submenu-container { left:auto; right:0 })
   that silently overrode the rule above by specificity, regardless of file
   load order. Re-declare at matching specificity so the left-alignment
   actually wins. */
.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
	left: 0 !important;
	right: auto !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container a {
	white-space: nowrap;
}

/* ==========================================================================
   Underline on hover — top-level nav items
   Applies to the primary link/content inside each direct nav item (not
   submenu links, and not the toggle button itself), so hovering "About"
   draws a line under "About" only, not the whole nav bar.
   ========================================================================== */

.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 2px;
	/* Gap so the underline (and the link itself) doesn't sit flush against
	   the submenu toggle chevron button immediately to its right. */
	margin-right: 6px;
}

.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* Pushed further down (was -2px) so the line clears the toggle button's
	   bottom edge instead of visually overlapping it. */
	bottom: -6px;
	height: 2px;
	background: var(--wp--preset--color--blue, #00498E);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* ==========================================================================
   Underline on hover — submenu (dropdown) items
   Same treatment as top-level items, scoped to links inside the submenu
   dropdown container so hovering "Library Staff" etc. underlines just
   that row, not the whole dropdown.
   ========================================================================== */

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
	position: relative;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 1em;
	right: 1em;
	bottom: 0.35em;
	height: 2px;
	background: var(--wp--preset--color--blue, #00498E);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}