/* ---------------------------------------------------------------------------
   Top bar
   ---------------------------------------------------------------------------
   The utility menu above the site header, rendered by includes/topBar.php from
   whatever menu is assigned to the Top Bar location. Loaded on every page by
   includes/enqueueFrontend.php.

   Below 960px the bar is hidden. Max Mega Menu turns the header menu into its
   hamburger at 959px, and the header menu carries copies of these links that
   are set to "Hide on desktop" in their Mega Menu settings.
--------------------------------------------------------------------------- */

.cl-topbar {
	--cl-topbar-red: #D2222A;
	background: var(--cl-topbar-red);
	color: #fff;
	font-family: "Roboto Condensed", sans-serif;
	padding: 0 30px;          /* = .site-header */
	position: relative;
	z-index: 10000;
}

/* Mirrors .site-header exactly: the header carries `padding: 0 30px` and holds
   a `.wrap` capped at 1400px, so the top bar has to do both. Getting only the
   wrap right lines the bars up at 1440px and nowhere else, because below
   1460px the 30px padding is what actually sets the content edge. */
.cl-topbar > .wrap {
	max-width: 1400px;
}

/* The first and last items sit flush with the container edge, so their text
   lines up with the logo and the search icon rather than being inset by the
   link padding. */
.cl-topbar ul.cl-topbar-menu > li:first-child > a { padding-left: 0; }
.cl-topbar ul.cl-topbar-menu > li:last-child > a { padding-right: 0; }

.cl-topbar ul.cl-topbar-menu {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-topbar ul.cl-topbar-menu > li {
	list-style: none;
	margin: 0;
	position: relative;
}

/* The right-hand items carry the cl-topbar-right class in the menu. The first
   of them takes the remaining space so the group sits at the far end of the
   bar. (:first-of-type would not do: it matches element type, not class.) */
.cl-topbar ul.cl-topbar-menu > li:not(.cl-topbar-right) + li.cl-topbar-right { margin-left: auto; }

.cl-topbar ul.cl-topbar-menu a {
	align-items: center;
	color: rgba(255, 255, 255, 0.92);
	display: flex;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 12px 15px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.15s ease, background-color 0.15s ease;
	white-space: nowrap;
}

.cl-topbar ul.cl-topbar-menu > li > a { border-bottom: 3px solid transparent; }

/* Hover brightens the text rather than shading the background, and underlines
   in white because red would vanish on the red bar. The text rests at 92%
   white so it has somewhere to brighten to. It cannot rest much dimmer: at 90%
   it falls below the 4.5:1 WCAG AA contrast minimum on this red. */
.cl-topbar ul.cl-topbar-menu > li:hover > a,
.cl-topbar ul.cl-topbar-menu > li:focus-within > a {
	border-bottom-color: #fff;
	color: #fff;
}

/* Caret on items that have a submenu. */
.cl-topbar ul.cl-topbar-menu > li.menu-item-has-children > a::after {
	content: "";
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	display: inline-block;
	margin-left: 8px;
	opacity: 0.8;
}

/* --- dropdowns ------------------------------------------------------------ */

.cl-topbar ul.cl-topbar-menu ul.sub-menu {
	background: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
	left: 0;
	list-style: none;
	margin: 0;
	min-width: 260px;
	opacity: 0;
	padding: 6px 0;
	pointer-events: none;
	position: absolute;
	top: 100%;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 10001;
}

.cl-topbar ul.cl-topbar-menu > li:hover > ul.sub-menu,
.cl-topbar ul.cl-topbar-menu > li:focus-within > ul.sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.cl-topbar ul.cl-topbar-menu ul.sub-menu li { list-style: none; margin: 0; }

.cl-topbar ul.cl-topbar-menu ul.sub-menu a {
	border-bottom: 0;
	color: #231f20;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 10px 18px;
	text-transform: none;
	white-space: normal;
}

.cl-topbar ul.cl-topbar-menu ul.sub-menu a:hover,
.cl-topbar ul.cl-topbar-menu ul.sub-menu a:focus {
	background: #f2f2f2;
	color: var(--cl-topbar-red);
}

.cl-topbar ul.cl-topbar-menu a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* The dropdown panel is white, so the white focus ring used on the bar would
   be invisible inside it. */
.cl-topbar ul.cl-topbar-menu ul.sub-menu a:focus-visible {
	outline-color: var(--cl-topbar-red);
}

/* Right-hand group has no dropdowns; keep it visually lighter. */
.cl-topbar ul.cl-topbar-menu > li.cl-topbar-right > a { font-weight: 500; letter-spacing: 0.06em; }

/* --- icons ---------------------------------------------------------------- */
/* Font Awesome 5.15.4 is already on every page (Font Awesome plugin, webfont
   mode), so these need no new asset and no script. \f3c5 is map-marker-alt and
   \f19c is university, the columned building used in the client's reference.
   Keyed to the two menu item IDs: if either item is deleted and recreated in
   the menu editor the ID changes and the icon silently disappears. */

.cl-topbar ul.cl-topbar-menu > li.menu-item-26680 > a::before,
.cl-topbar ul.cl-topbar-menu > li.menu-item-26690 > a::before {
	flex: 0 0 auto;
	font-family: "Font Awesome 5 Free";
	font-size: 15px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1;
	margin-right: 8px;
	/* Reserve the box so the label does not shift sideways when the webfont
	   lands (font-display is block on the FA faces). */
	min-width: 15px;
	text-align: center;
	text-transform: none;
}

.cl-topbar ul.cl-topbar-menu > li.menu-item-26680 > a::before { content: "\f3c5"; }
.cl-topbar ul.cl-topbar-menu > li.menu-item-26690 > a::before { content: "\f19c"; }

@media (max-width: 959px) {
	.cl-topbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cl-topbar ul.cl-topbar-menu a,
	.cl-topbar ul.cl-topbar-menu ul.sub-menu { transition: none; }
}