/*
 * Bennett Lab — base, header, footer.
 * Page-specific styles live in their own files. Do not stack overrides here.
 */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bl-white);
	color: var(--bl-body);
	font-family: var(--bl-sans);
	font-size: var(--bl-text);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--bl-serif);
	font-weight: 600;
	color: var(--bl-ink);
	margin: 0;
	text-wrap: pretty;
}

h1 { font-size: var(--bl-h1); line-height: 1.12; letter-spacing: -0.01em; }
h2 { font-size: var(--bl-h2); line-height: 1.25; }
h3 { font-size: var(--bl-h3); line-height: 1.35; }

p { margin: 0 0 var(--bl-16); }

a {
	color: var(--bl-blue);
	text-decoration: none;
}

a:hover {
	color: var(--bl-red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:focus-visible {
	outline: 2px solid var(--bl-red);
	outline-offset: 3px;
}

img { max-width: 100%; height: auto; }

/* Accessibility -------------------------------------------------------- */

.bl-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--bl-12) var(--bl-16);
	background: var(--bl-blue);
	color: #fff;
}

.bl-skip:focus {
	left: var(--bl-16);
	top: var(--bl-16);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Layout --------------------------------------------------------------- */

/* Gutter grows past --bl-pad on wide screens so content centres at --bl-max. */
.bl-wrap { padding-inline: max(var(--bl-pad), calc((100% - var(--bl-max)) / 2)); }

.bl-prose { max-width: var(--bl-prose); }

/* Header --------------------------------------------------------------- */

.bl-header {
	background: var(--bl-white);
	border-bottom: 1px solid var(--bl-border);
}

.bl-header__inner {
	min-height: var(--bl-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bl-24);
}

.bl-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.bl-brand:hover { text-decoration: none; }

.bl-brand__logo {
	height: 40px;
	width: auto;
	display: block;
}

.bl-brand__rule {
	width: 1px;
	height: 40px;
	background: var(--bl-border);
	flex: 0 0 auto;
}

.bl-brand__text { display: block; }

.bl-brand__name {
	display: block;
	font-family: var(--bl-serif);
	font-weight: 600;
	color: var(--bl-blue);
	font-size: 26px;
	line-height: 1.15;
}

.bl-brand__tag {
	display: block;
	font-size: 12.5px;
	color: #6E6E78;
	letter-spacing: 0.03em;
	margin-top: 2px;
	line-height: 1.3;
}

/* Navigation ----------------------------------------------------------- */

.bl-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 30px;
	font-size: 15px;
	font-weight: 500;
}

.bl-nav a {
	color: var(--bl-blue);
	white-space: nowrap;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	display: block;
}

.bl-nav a:hover {
	text-decoration: none;
	color: var(--bl-red);
}

.bl-nav .current-menu-item > a,
.bl-nav .current_page_item > a,
.bl-nav .current-menu-ancestor > a,
.bl-nav .current-page-ancestor > a,
.bl-nav .current_page_ancestor > a,
.bl-nav .current-menu-parent > a {
	color: var(--bl-red);
	border-bottom-color: var(--bl-red);
}

/* Submenu: Publications sits under Research */
.bl-nav li { position: relative; }

/* Chevron marks an item that has children. */
.bl-nav .menu-item-has-children > a::after {
	content: "\25BC";
	font-size: 9px;
	line-height: 1;
	margin-left: 5px;
	vertical-align: middle;
}

.bl-nav .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 18px);
	left: -16px;
	min-width: 200px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: var(--bl-8) 0;
	background: var(--bl-white);
	border: 1px solid var(--bl-border);
	box-shadow: 0 12px 28px rgba(24, 28, 98, 0.16);
	z-index: 40;
}

/* The mockup leaves an 18px gap above the dropdown. Without a bridge the pointer
   leaves the item while crossing that gap and the menu closes before it can be
   clicked, so an invisible strip keeps the item hovered on the way down. */
.bl-nav .menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 20px;
}

.bl-nav li:hover > .sub-menu,
.bl-nav li:focus-within > .sub-menu { display: flex; }

.bl-nav .sub-menu a {
	padding: var(--bl-12) 18px;
	border-bottom: 0;
	font-size: 15px;
}

.bl-nav .sub-menu a:hover { background: var(--bl-tint); }

/* Mobile burger: three bars, per the mockup. Not a labelled button. */

.bl-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 12px 6px;
	background: none;
	border: 0;
	cursor: pointer;
}

.bl-burger__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--bl-blue);
	transition: background 0.15s ease;
}

.bl-burger[aria-expanded="true"] .bl-burger__bar { background: var(--bl-red); }

@media (max-width: 1024px) {
	.bl-brand__tag { display: none; }
	.bl-nav ul { gap: 22px; font-size: 14px; }
}

@media (max-width: 767px) {
	.bl-header { position: relative; }
	.bl-header__inner { min-height: 68px; }
	.bl-brand__logo { height: 38px; }
	.bl-brand__rule { height: 38px; }
	.bl-brand__name { font-size: 19px; }

	.bl-burger { display: flex; }

	.bl-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bl-white);
		border-bottom: 2px solid var(--bl-blue);
		box-shadow: 0 16px 34px rgba(24, 28, 98, 0.18);
		padding: 4px var(--bl-pad) 20px;
		z-index: 50;
	}

	.bl-nav.is-open { display: block; }

	.bl-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.bl-nav li { border-bottom: 1px solid var(--bl-rule); }

	.bl-nav > ul > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--bl-16) 0;
		font-size: 16px;
		font-weight: 600;
		border-bottom: 0;
		white-space: normal;
	}

	.bl-nav .current-menu-item > a,
	.bl-nav .current-menu-ancestor > a { color: var(--bl-red); border-bottom: 0; }

	.bl-nav .menu-item-has-children::after { content: none; }

	.bl-nav .menu-item-has-children > a::after {
		content: "\25BC";
		font-size: 10px;
		color: var(--bl-muted);
		margin-left: 0;
	}

	.bl-nav .menu-item-has-children.is-expanded > a::after { content: "\25B2"; }

	/* Submenu stays closed until the parent is tapped. */
	.bl-nav .sub-menu {
		display: none;
		position: static;
		border: 0;
		box-shadow: none;
		padding: 0;
		min-width: 0;
		background: none;
	}

	.bl-nav .is-expanded > .sub-menu { display: block; }

	.bl-nav .sub-menu li { border-bottom: 0; }

	.bl-nav .sub-menu a {
		display: block;
		margin: 0 0 var(--bl-12);
		padding: 13px 16px;
		background: var(--bl-tint);
		border-left: 2px solid var(--bl-red);
		font-size: 16px;
		color: var(--bl-blue);
	}
}

/* Footer --------------------------------------------------------------- */

.bl-footer {
	background: var(--bl-footer);
	color: #fff;
	padding-block: var(--bl-88);
}

.bl-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.bl-footer__name {
	font-family: var(--bl-serif);
	font-size: 21px;
	font-weight: 600;
	margin-bottom: var(--bl-12);
	color: #fff;
}

.bl-footer__address {
	font-size: 14px;
	line-height: 1.75;
	color: var(--bl-footer-text);
}

.bl-footer__label {
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bl-footer-label);
	margin-bottom: var(--bl-12);
}

.bl-footer a { color: #fff; }

.bl-footer a:hover { color: #fff; text-decoration: underline; }

.bl-footer a:focus-visible { outline-color: #fff; }

.bl-footer__email {
	font-size: 17px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.bl-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bl-8);
	font-size: 14px;
}

@media (max-width: 1024px) {
	.bl-footer { padding-block: var(--bl-64); }
	.bl-footer__grid { gap: var(--bl-32); }
}

@media (max-width: 767px) {
	.bl-footer { padding-block: var(--bl-48); }
	.bl-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--bl-32);
	}
}