/* ==========================================================================
   Matt White — Institute
   Design tokens first. Everything downstream (theme, plugin widgets, Elementor
   Site Settings) reads from these, so the whole site re-skins from one block.
   ========================================================================== */

:root {
	/* Colour */
	--mw-theme-navy: #0B2545;
	--mw-theme-navy-soft: #1F3A5C;
	--mw-theme-gold: #FDB515;
	--mw-theme-accent: #8A6A0A;      /* gold, darkened to pass contrast on white */
	--mw-theme-ink: #0B2545;
	--mw-theme-body: #33475E;
	--mw-theme-muted: #5B7086;
	--mw-theme-line: #D6DEE8;
	--mw-theme-line-soft: #E8EDF3;
	--mw-theme-panel: #F5F7FA;
	--mw-theme-page: #FFFFFF;
	--mw-theme-invert: #A9BDD3;

	/* Type */
	--mw-theme-sans: "Archivo", system-ui, -apple-system, sans-serif;
	--mw-theme-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

	/* Rhythm */
	--mw-gutter: clamp(20px, 4vw, 64px);
	--mw-section: clamp(48px, 6vw, 88px);
}

/* --------------------------------------------------------------- Base type */

body {
	background: var(--mw-theme-page);
	color: var(--mw-theme-body);
	font-family: var(--mw-theme-serif);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mw-theme-sans);
	color: var(--mw-theme-ink);
	letter-spacing: -0.028em;
	line-height: 1.1;
	font-weight: 800;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.875rem); }
h2 { font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.018em; }

a {
	color: var(--mw-theme-ink);
	text-decoration-color: var(--mw-theme-gold);
	text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
	color: var(--mw-theme-accent);
}

:focus-visible {
	outline: 2px solid var(--mw-theme-accent);
	outline-offset: 2px;
}

strong { font-weight: 600; }

/* A lede paragraph — the sentence under a page title.
   The measure is constrained on the inner container rather than on the widget
   itself: an Elementor widget is a flex item, so narrowing the widget would let
   the next widget (usually a button) ride up alongside it. */
.mw-lede {
	font-family: var(--mw-theme-serif);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
	line-height: 1.62;
	color: var(--mw-theme-body);
}

.elementor-widget.mw-lede {
	width: 100%;
	max-width: none;
}

.mw-lede .elementor-widget-container,
.mw-lede > p {
	max-width: 62ch;
}

/* Small caps eyebrow above a heading. */
.mw-eyebrow {
	display: block;
	font-family: var(--mw-theme-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mw-theme-accent);
	margin-bottom: 16px;
}

/* --------------------------------------------------------------- Buttons */

.mw-button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
	display: inline-block;
	font-family: var(--mw-theme-sans);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 15px 28px;
	border: 2px solid var(--mw-theme-navy);
	border-radius: 0;
	background: var(--mw-theme-navy);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.mw-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background: #06192F;
	border-color: #06192F;
	color: #fff;
}

.mw-button--ghost {
	background: transparent;
	color: var(--mw-theme-navy);
}

.mw-button--ghost:hover {
	background: var(--mw-theme-navy);
	color: #fff;
}

.mw-button + .mw-button {
	margin-left: 10px;
}

/* Elementor's own button widget, matched to the same shape. Elementor defaults
   its background to the global accent colour, which is why the kit sets that
   accent to the navy — this rule keeps the rest (square corners, Archivo,
   padding) consistent whatever the palette becomes. */
.elementor-button,
.elementor-button-wrapper .elementor-button {
	font-family: var(--mw-theme-sans);
	font-weight: 700;
	letter-spacing: 0.01em;
	border-radius: 0;
	border: 2px solid transparent;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Ghost variant: add the CSS class `mw-button--ghost` to a button widget. */
.elementor-widget-button.mw-button--ghost .elementor-button,
.mw-button--ghost .elementor-button {
	background: transparent;
	border-color: var(--mw-theme-navy);
	color: var(--mw-theme-navy);
}

.elementor-widget-button.mw-button--ghost .elementor-button:hover,
.mw-button--ghost .elementor-button:hover {
	background: var(--mw-theme-navy);
	color: #fff;
}

/* On a navy band the ghost button inverts. */
.mw-navy .mw-button--ghost .elementor-button {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.mw-navy .mw-button--ghost .elementor-button:hover {
	background: #fff;
	color: var(--mw-theme-navy);
}

/* Buttons that sit side by side. Elementor's widget wrap is already a wrapping
   flex row with every widget at width:100%; releasing the width is all it takes
   to put two buttons on one line. Add the CSS class `mw-inline-btn` to each. */
.elementor-widget-button.mw-inline-btn {
	width: auto;
	max-width: none;
	margin-right: 12px;
}

.elementor-widget-button.mw-inline-btn:last-child {
	margin-right: 0;
}

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

/* The 3px navy rule under the nav is the signature of this design. Applied to
   an Elementor header container by adding the CSS class `mw-header`. */
.mw-header {
	border-bottom: 3px solid var(--mw-theme-navy);
}

/* Hello Elementor's own header, used when Elementor Pro's Theme Builder is not
   installed. Gives it the same signature navy rule and Archivo wordmark as the
   Elementor header template. */
.site-header,
header.site-header {
	border-bottom: 3px solid var(--mw-theme-navy);
	padding-block: 18px;
}

.site-header .site-title,
.site-header .site-title a {
	font-family: var(--mw-theme-sans);
	font-weight: 800;
	letter-spacing: -0.024em;
	color: var(--mw-theme-ink);
	text-decoration: none;
}

.site-header .site-navigation a {
	font-family: var(--mw-theme-sans);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--mw-theme-muted);
	text-decoration: none;
}

.site-header .site-navigation a:hover,
.site-header .site-navigation .current-menu-item > a {
	color: var(--mw-theme-ink);
}

.site-header .site-navigation .current-menu-item > a {
	box-shadow: inset 0 -3px 0 0 var(--mw-theme-gold);
	padding-bottom: 5px;
}

/* Hero photo fills its column edge to edge. */
.mw-hero-photo,
.mw-hero-photo .elementor-widget-container,
.mw-hero-photo figure,
.mw-hero-photo .elementor-image {
	height: 100%;
}

.mw-hero-photo img {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
	object-position: 50% 38%;
	display: block;
}

/* The thin dark utility strip above the nav. */
.mw-utility {
	background: var(--mw-theme-navy);
	color: var(--mw-theme-invert);
	font-family: var(--mw-theme-sans);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.mw-utility a {
	color: var(--mw-theme-invert);
	text-decoration: none;
}

.mw-utility a:hover {
	color: #fff;
}

/* Current page marker in the nav. */
.mw-header .elementor-nav-menu .current-menu-item > a,
.mw-header .elementor-nav-menu a.elementor-item-active {
	box-shadow: inset 0 -3px 0 0 var(--mw-theme-gold);
}

/* ------------------------------------------------------------ Page panels */

.mw-panel {
	background: var(--mw-theme-panel);
}

.mw-navy {
	background: var(--mw-theme-navy);
	color: #fff;
}

.mw-navy h1,
.mw-navy h2,
.mw-navy h3 {
	color: #fff;
}

.mw-navy p,
.mw-navy li {
	color: var(--mw-theme-invert);
}

.mw-navy a {
	color: var(--mw-theme-gold);
}

/* A heading with the gold rule above it. */
.mw-ruled {
	border-top: 4px solid var(--mw-theme-gold);
	padding-top: 18px;
}

/* ------------------------------------------------- Single post / talk page */

.mw-single-media {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	margin: 0 0 24px;
	background: var(--mw-theme-panel);
}

.mw-single-media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mw-single-media--slides {
	border: 1px solid var(--mw-theme-line);
	margin-top: 8px;
}

.mw-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-family: var(--mw-theme-sans);
	font-size: 0.875rem;
	color: var(--mw-theme-muted);
	padding-bottom: 20px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--mw-theme-line);
}

.mw-single-meta a {
	color: var(--mw-theme-accent);
	font-weight: 600;
	text-decoration: none;
}

.mw-single-meta a:hover {
	text-decoration: underline;
}

.mw-single-meta__sep {
	color: var(--mw-theme-line);
}

.mw-single-subhead {
	margin: 40px 0 14px;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.018em;
}

.mw-single-actions {
	margin: 0 0 28px;
}

/* Long-form body copy on single pages. */
.single-mw_talk .entry-content,
.single-mw_publication .entry-content,
.single-post .entry-content {
	max-width: 68ch;
	font-size: 1.0625rem;
}

.single-mw_talk .entry-content > p,
.single-post .entry-content > p {
	margin: 0 0 1.1em;
}

/* -------------------------------------------------- Single item wrappers

   Talks, publications, projects and press items use the theme's own single
   template rather than an Elementor one, so they need their own measure and
   padding. Build an Elementor Theme Builder single template later and this is
   simply unused.
   ----------------------------------------------------------------------- */

.single-mw_talk .site-main,
.single-mw_publication .site-main,
.single-mw_project .site-main,
.single-mw_press .site-main,
.single-post .site-main,
.archive .site-main,
.search .site-main {
	max-width: 920px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 64px) var(--mw-gutter) var(--mw-section);
}

.single-mw_talk .page-header .entry-title,
.single-mw_publication .page-header .entry-title,
.single-post .page-header .entry-title {
	margin: 0 0 24px;
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
}

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

.mw-footer {
	background: var(--mw-theme-navy);
	color: var(--mw-theme-invert);
	font-family: var(--mw-theme-sans);
	font-size: 0.875rem;
}

.mw-footer a {
	color: var(--mw-theme-invert);
	text-decoration: none;
}

.mw-footer a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mw-footer h2,
.mw-footer h3,
.mw-footer h4 {
	color: #fff;
}

/* The theme's own footer, used when Elementor Pro's Theme Builder is not
   installed. Matches the Elementor footer template so the site looks the same
   either way. */
.mw-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 56px var(--mw-gutter) 36px;
}

.mw-footer__name {
	font-family: var(--mw-theme-sans);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.024em;
	color: #fff;
	text-decoration: none;
}

.mw-footer__tagline {
	margin: 10px 0 0;
	font-family: var(--mw-theme-serif);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--mw-theme-invert);
	max-width: 42ch;
}

.mw-footer__heading {
	margin: 0 0 12px;
	font-family: var(--mw-theme-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mw-theme-gold);
}

.mw-footer__list,
.mw-footer .site-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.mw-footer__list a,
.mw-footer .site-navigation a {
	font-family: var(--mw-theme-sans);
	font-size: 0.875rem;
	color: var(--mw-theme-invert);
	text-decoration: none;
}

.mw-footer__list a:hover,
.mw-footer .site-navigation a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mw-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	max-width: 1240px;
	margin: 0 auto;
	padding: 18px var(--mw-gutter) 26px;
	font-family: var(--mw-theme-sans);
	font-size: 0.8125rem;
	color: var(--mw-theme-invert);
}

@media (max-width: 782px) {
	.mw-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
		padding-top: 40px;
	}
}

/* --------------------------------------------------------------- Forms */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
select,
textarea {
	font-family: var(--mw-theme-sans);
	font-size: 1rem;
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--mw-theme-line);
	border-radius: 0;
	background: #fff;
	color: var(--mw-theme-ink);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--mw-theme-navy);
	outline: 2px solid var(--mw-theme-gold);
	outline-offset: 0;
}

label {
	display: block;
	font-family: var(--mw-theme-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--mw-theme-ink);
	margin-bottom: 6px;
}

/* A note meant for you, not for visitors. Add the CSS class `mw-admin-note`
   to any widget and it only appears when you are logged in. */
.mw-admin-note {
	display: none;
}

body.logged-in .mw-admin-note {
	display: block;
	padding: 14px 18px;
	border-left: 3px solid var(--mw-theme-gold);
	background: var(--mw-theme-panel);
	font-size: 0.9375rem;
	color: var(--mw-theme-muted);
}

body.logged-in .mw-admin-note p {
	margin: 0;
}

/* ------------------------------------------------------------ Utilities */

.mw-rule-top { border-top: 1px solid var(--mw-theme-line); }
.mw-rule-bottom { border-bottom: 1px solid var(--mw-theme-line); }
.mw-gold-rule-top { border-top: 4px solid var(--mw-theme-gold); }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link, visible on focus. */
.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--mw-theme-navy);
	color: #fff;
}

/* ----------------------------------------------------------- Print (CV) */

@media print {
	.mw-header,
	.mw-utility,
	.mw-footer,
	.elementor-location-header,
	.elementor-location-footer {
		display: none !important;
	}

	body {
		font-size: 11pt;
		color: #000;
	}

	a {
		text-decoration: none;
		color: #000;
	}

	.mw-resume__item {
		break-inside: avoid;
	}
}

/* ----------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}