/*
 * Site header — one slim row: logo, then the menu spread evenly up to Log In/Log Out at the right edge.
 * Items that don't fit move into a "More" dropdown (js/site-header.js); Log In/Log Out stays visible as a button.
 * Menus whose children have their own children (Publications) open as a full-width column panel.
 * Same navy, Raleway and PT Sans as the footer (css/site-footer.css).
 * Desktop only (981px+); below that the theme's toggle menu in responsive.css is unchanged.
 * Selectors start with .header .header-inner so they win over the theme option CSS printed in wp_head.
 */

.header {
	--hd-navy: #35376a;
	--hd-navy-deep: #26284f;
	--hd-ink: #2b2d3a;
	--hd-muted: #6b6f80;
	--hd-rule: #e4e6ee;
	--hd-tint: #f4f5f9;
	--hd-shadow: 0 18px 40px -12px rgba(38, 40, 79, 0.22);
	--hd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media screen and (min-width: 981px) {

	.header .header-inner {
		display: flex;
		align-items: stretch;
		gap: 20px;
		z-index: 50;
	}

	.header .header-inner > .clear {
		display: none;
	}

	.header .header-inner .logo {
		float: none;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		margin: 0;
		padding: 14px 0;
	}

	.header .header-inner .logo img {
		display: block;
		height: 58px;
	}

	.header .header-inner .logo .tagline:empty {
		display: none;
	}

	.header .header-inner .header-nav {
		float: none;
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
	}

	/* wp_nav_menu's container div */
	.header .header-inner .header-nav > div {
		height: 100%;
	}

	.header .header-inner .header-nav ul.menu {
		float: none;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: stretch;
		height: 100%;
		margin: 0;
		padding: 0;
		font-family: 'Raleway', sans-serif;
		font-size: 14.5px;
		white-space: nowrap;
	}

	/* Top level */

	.header .header-inner .header-nav ul.menu > li {
		display: flex;
		align-items: center;
		position: relative;
		margin: 0;
		text-align: left;
	}

	.header .header-inner .header-nav ul.menu > li > a,
	.header .header-inner .header-nav .site-nav__more-toggle {
		position: relative;
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 12px;
		border: 0;
		background: none;
		color: var(--hd-ink);
		font: inherit;
		font-weight: 500;
		letter-spacing: 0.005em;
		cursor: pointer;
		transition: color 0.2s var(--hd-ease);
	}

	/* Underline drawn from the left on hover; kept on the current section */
	.header .header-inner .header-nav ul.menu > li > a::after,
	.header .header-inner .header-nav .site-nav__more-toggle::after {
		content: "";
		position: absolute;
		left: 12px;
		right: 12px;
		bottom: calc(50% - 17px);
		height: 2px;
		background: var(--hd-navy);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.28s var(--hd-ease);
	}

	.header .header-inner .header-nav ul.menu > li.menu-item-has-children > a::after,
	.header .header-inner .header-nav .site-nav__more-toggle::after {
		right: 26px;
	}

	.header .header-inner .header-nav ul.menu > li:hover > a,
	.header .header-inner .header-nav ul.menu > li:focus-within > a,
	.header .header-inner .header-nav ul.menu > li.is-open > .site-nav__more-toggle,
	.header .header-inner .header-nav ul.menu > li:hover > .site-nav__more-toggle,
	.header .header-inner .header-nav ul.menu > li.current-menu-item > a,
	.header .header-inner .header-nav ul.menu > li.current-menu-ancestor > a,
	.header .header-inner .header-nav ul.menu > li.current-menu-ancestor > .site-nav__more-toggle {
		color: var(--hd-navy);
		border: 0;
	}

	.header .header-inner .header-nav ul.menu > li:hover > a::after,
	.header .header-inner .header-nav ul.menu > li:focus-within > a::after,
	.header .header-inner .header-nav ul.menu > li:hover > .site-nav__more-toggle::after,
	.header .header-inner .header-nav ul.menu > li.is-open > .site-nav__more-toggle::after,
	.header .header-inner .header-nav ul.menu > li.current-menu-item > a::after,
	.header .header-inner .header-nav ul.menu > li.current-menu-ancestor > a::after,
	.header .header-inner .header-nav ul.menu > li.current-menu-ancestor > .site-nav__more-toggle::after {
		transform: scaleX(1);
	}

	/* Chevron on items with a dropdown */
	.header .header-inner .header-nav ul.menu > li.menu-item-has-children > a,
	.header .header-inner .header-nav .site-nav__more-toggle {
		padding-right: 26px;
	}

	.header .header-inner .header-nav ul.menu > li.menu-item-has-children > a::before,
	.header .header-inner .header-nav .site-nav__more-toggle::before {
		content: "";
		position: absolute;
		right: 12px;
		top: 50%;
		width: 5px;
		height: 5px;
		margin-top: -4px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		opacity: 0.55;
		transform: rotate(45deg);
		transition: transform 0.25s var(--hd-ease), opacity 0.2s;
	}

	.header .header-inner .header-nav ul.menu > li.menu-item-has-children:hover > a::before,
	.header .header-inner .header-nav ul.menu > li.menu-item-has-children:focus-within > a::before,
	.header .header-inner .header-nav ul.menu > li.is-open > .site-nav__more-toggle::before,
	.header .header-inner .header-nav ul.menu > li:hover > .site-nav__more-toggle::before {
		opacity: 1;
		transform: translateY(2px) rotate(225deg);
	}

	/* Log In / Log Out as a square outlined button, like the footer's social icons */
	.header .header-inner .header-nav ul.menu > li.login-dialog {
		padding-left: 12px;
	}

	.header .header-inner .header-nav ul.menu > li.login-dialog > a {
		height: 36px;
		padding: 0 16px;
		border: 1.5px solid var(--hd-navy);
		color: var(--hd-navy);
		font-family: 'PT Sans', sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		transition: background-color 0.2s var(--hd-ease), color 0.2s var(--hd-ease);
	}

	.header .header-inner .header-nav ul.menu > li.login-dialog > a::after {
		display: none;
	}

	.header .header-inner .header-nav ul.menu > li.login-dialog > a:hover,
	.header .header-inner .header-nav ul.menu > li.login-dialog > a:focus-visible {
		border: 1.5px solid var(--hd-navy);
		background: var(--hd-navy);
		color: #fff;
	}

	/* Dropdowns */

	.header .header-inner .header-nav ul.menu > li > ul.sub-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 60;
		float: none;
		width: auto;
		min-width: 250px;
		margin: 0;
		padding: 8px 0;
		border-top: 2px solid var(--hd-navy);
		background: #fff;
		box-shadow: var(--hd-shadow);
		font-size: 14px;
		white-space: normal;
		text-align: left;
		visibility: hidden;
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 0.18s var(--hd-ease), transform 0.22s var(--hd-ease), visibility 0s linear 0.22s;
	}

	/* Last items open towards the left so the panel stays inside the page */
	.header .header-inner .header-nav ul.menu > li:nth-last-child(-n+3) > ul.sub-menu {
		left: auto;
		right: 0;
	}

	.header .header-inner .header-nav ul.menu > li:hover > ul.sub-menu,
	.header .header-inner .header-nav ul.menu > li:focus-within > ul.sub-menu,
	.header .header-inner .header-nav ul.menu > li.is-open > ul.sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.header .header-inner .header-nav ul.menu ul.sub-menu li {
		display: block;
		position: static;
		top: auto;
		float: none;
		margin: 0;
		text-align: left;
	}

	.header .header-inner .header-nav ul.menu ul.sub-menu li a {
		position: relative;
		top: auto;
		display: block;
		padding: 9px 22px;
		border: 0;
		color: var(--hd-ink);
		font-weight: 400;
		line-height: 1.4;
		transition: background-color 0.15s, color 0.15s, padding-left 0.2s var(--hd-ease);
	}

	.header .header-inner .header-nav ul.menu ul.sub-menu li a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 8px;
		bottom: 8px;
		width: 2px;
		background: var(--hd-navy);
		transform: scaleY(0);
		transition: transform 0.2s var(--hd-ease);
	}

	.header .header-inner .header-nav ul.menu ul.sub-menu li a:hover,
	.header .header-inner .header-nav ul.menu ul.sub-menu li a:focus-visible,
	.header .header-inner .header-nav ul.menu ul.sub-menu li.current-menu-item > a {
		border: 0;
		background: var(--hd-tint);
		color: var(--hd-navy);
		padding-left: 26px;
	}

	.header .header-inner .header-nav ul.menu ul.sub-menu li a:hover::before,
	.header .header-inner .header-nav ul.menu ul.sub-menu li a:focus-visible::before,
	.header .header-inner .header-nav ul.menu ul.sub-menu li.current-menu-item > a::before {
		transform: scaleY(1);
	}

	/* Third level: always shown, indented under its parent (theme showed flyouts) */
	.header .header-inner .header-nav ul.menu ul.sub-menu ul.sub-menu {
		display: block;
		position: static;
		float: none;
		width: auto;
		margin: 0 0 6px;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.header .header-inner .header-nav ul.menu ul.sub-menu ul.sub-menu li a {
		padding-left: 36px;
		color: var(--hd-muted);
	}

	.header .header-inner .header-nav ul.menu ul.sub-menu ul.sub-menu li a:hover,
	.header .header-inner .header-nav ul.menu ul.sub-menu ul.sub-menu li a:focus-visible {
		padding-left: 40px;
		color: var(--hd-navy);
	}

	.header .header-inner .header-nav ul.menu ul.sub-menu li.menu-item-has-children > a {
		font-weight: 600;
	}

	/* Column panel: a top-level item whose children have children spans the header width */
	.header .header-inner .header-nav ul.menu > li:has(> ul > li > ul) {
		position: static;
	}

	.header .header-inner .header-nav ul.menu > li:has(> ul > li > ul) > ul.sub-menu {
		left: 0;
		right: 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
		gap: 0 8px;
		padding: 28px 28px 22px;
		background-color: #fff;
		background-image:
			linear-gradient(rgba(53, 55, 106, 0.035) 1px, transparent 1px),
			linear-gradient(90deg, rgba(53, 55, 106, 0.035) 1px, transparent 1px);
		background-size: 32px 32px;
		background-position: -1px -1px;
	}

	/* Each child is a column: its link becomes a small tracked label over a rule */
	.header .header-inner .header-nav ul.menu > li:has(> ul > li > ul) > ul.sub-menu > li > a {
		margin: 0 0 8px;
		padding: 4px 0 10px;
		border-bottom: 1px solid var(--hd-rule);
		background: none;
		color: var(--hd-navy);
		font-family: 'PT Sans', sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.header .header-inner .header-nav ul.menu > li:has(> ul > li > ul) > ul.sub-menu > li > a::before {
		display: none;
	}

	.header .header-inner .header-nav ul.menu > li:has(> ul > li > ul) > ul.sub-menu > li > a:hover,
	.header .header-inner .header-nav ul.menu > li:has(> ul > li > ul) > ul.sub-menu > li > a:focus-visible {
		padding-left: 0;
		border-bottom: 1px solid var(--hd-rule);
		background: none;
		color: var(--hd-navy-deep);
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.header .header-inner .header-nav ul.menu > li:has(> ul > li > ul) > ul.sub-menu > li > ul.sub-menu li a {
		margin: 0 0 0 -12px;
		padding: 6px 12px;
		color: var(--hd-ink);
	}

	.header .header-inner .header-nav ul.menu > li:has(> ul > li > ul) > ul.sub-menu > li > ul.sub-menu li a:hover,
	.header .header-inner .header-nav ul.menu > li:has(> ul > li > ul) > ul.sub-menu > li > ul.sub-menu li a:focus-visible {
		padding-left: 16px;
	}

	/* "More" dropdown (built by js/site-header.js) */
	.header .header-inner .header-nav .site-nav__more > ul.sub-menu {
		min-width: 290px;
		max-height: calc(100vh - 160px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.header .header-inner .header-nav .site-nav__more > ul.sub-menu > li + li {
		border-top: 1px solid var(--hd-rule);
	}

	.header .header-inner .header-nav .site-nav__more > ul.sub-menu > li > ul.sub-menu {
		margin-top: -4px;
	}
}

@media screen and (min-width: 981px) and (max-width: 1169px) {
	.header .header-inner {
		gap: 20px;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.header .header-inner .logo {
		padding: 12px 0;
	}

	.header .header-inner .logo img {
		height: 50px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.header .header-inner .header-nav *,
	.header .header-inner .header-nav *::before,
	.header .header-inner .header-nav *::after {
		transition-duration: 0.01ms !important;
	}
}