/*
Theme Name: Macro-Finance Bern
Theme URI: https://macrofinancebern.ch
Author: PhD Program in Macro-Finance, University of Bern
Description: Block theme for the PhD Program in Macro-Finance at the University of Bern. Two typefaces, one teal accent, no page builder. Colours, type, spacing and the self-hosted typefaces live in theme.json; everything below hangs off explicit class names so the design does not depend on the internals of any block.
Version: 1.3.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: macrofinance
Tags: block-theme, education, one-column, custom-colors, custom-menu, editor-style, full-site-editing
*/

/* ============================================================
   The design lives here, keyed to classes this theme's patterns
   set explicitly. Tokens come from theme.json as CSS variables.
   ============================================================ */

:root {
	--mf-radius: 3px;
	--mf-shadow: 0 1px 2px rgba(15, 28, 29, .05), 0 8px 24px -16px rgba(15, 28, 29, .3);
	--mf-measure: 68ch;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-hi);
	outline-offset: 3px;
	border-radius: 2px;
}

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

/* Running text never gets wider than is comfortable to read, and stays
   on the left even inside a constrained group, which would otherwise
   centre anything narrower than the content width. */
.mf-measure { max-width: var(--mf-measure); }
.is-layout-constrained > .mf-measure {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

/* ---------- eyebrow ------------------------------------------
   Small sans, sentence case, used only where it says something
   the heading does not: the institutions above the hero title, the
   lecture above "Register". Not a label repeated above every
   section heading.
   ------------------------------------------------------------ */
.mf-eyebrow {
	font-family: var(--wp--preset--font-family--text);
	font-size: .92rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--accent);
	margin: 0;
}

/* ---------- header ------------------------------------------ */
.mf-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.mf-brand-sub {
	font-size: .8rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	margin: 2px 0 0;
}
.mf-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink-2);
	font-size: .925rem;
	font-weight: 500;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}
.mf-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom-color: var(--wp--preset--color--line-strong);
}
.mf-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* The register button is a button, not a nav link. */
.mf-btn-ink .wp-block-button__link,
.wp-block-button.mf-btn-ink .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-bottom: 0;
}
.mf-btn-ink .wp-block-button__link:hover { background: var(--wp--preset--color--ink-2); }

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--ink);
	background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
}

/* ---------- hero -------------------------------------------- */
.mf-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--wp--preset--color--line); }
/* The curve is decoration, so it is drawn by the stylesheet rather than
   placed as an image block an editor could select or delete. */
.mf-hero::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: min(40%, 230px);
	background: url(assets/img/hero-curve.svg) center bottom / 100% 100% no-repeat;
	opacity: .9;
	pointer-events: none;
}
.mf-hero > * { position: relative; }

/* the small fact rail beside the hero */
.mf-facts { border-top: 2px solid var(--wp--preset--color--ink); padding-top: 16px; }
.mf-facts .mf-fact {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin: 0;
}
.mf-facts .mf-fact dt, .mf-facts .mf-fact-label { font-size: .9rem; color: var(--wp--preset--color--muted); }
.mf-facts .mf-fact dd, .mf-facts .mf-fact-value {
	margin: 0;
	font-size: .95rem;
	font-weight: 500;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ---------- at a glance -------------------------------------- */
.mf-glance { gap: 1px !important; background: var(--wp--preset--color--line); border: 1px solid var(--wp--preset--color--line); }
.mf-glance > .wp-block-column {
	background: var(--wp--preset--color--surface);
	padding: 28px 26px;
	margin: 0;
}
.mf-glance h3 { margin-bottom: 10px; font-size: 1.45rem; }

/* ---------- featured speaker --------------------------------- */
.mf-feature {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--mf-shadow);
	gap: 0 !important;
}
.mf-feature > .wp-block-column:first-child {
	/* 300px keeps the column close to the portraits' 4:5 at the panel's
	   usual height, so faces are not trimmed at the top. */
	flex-basis: 300px !important;
	flex-grow: 0;
	background: var(--wp--preset--color--accent-soft);
	border-right: 1px solid var(--wp--preset--color--line);
	padding: 0;
	min-height: 310px;
}
.mf-feature .mf-feature-photo,
.mf-feature .mf-feature-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The panel is narrower than 4:5, so the portrait is trimmed top and
	   bottom. Faces sit in the upper part of every portrait, so take the
	   trim off the bottom. */
	object-position: 50% 0;
	display: block;
	margin: 0;
}
.mf-feature > .wp-block-column:last-child { padding: clamp(26px, 3.4vw, 42px); }

@media (max-width: 820px) {
	.mf-feature > .wp-block-column:first-child {
		flex-basis: 100% !important;
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
		min-height: 0;
	}
	/* Stacked, a 4:5 portrait at full width eats half the screen.
	   Crop it to a band and hold the face near the top. */
	.mf-feature .mf-feature-photo img {
		aspect-ratio: 3 / 2;
		object-position: 50% 15%;
	}
}

.mf-byline { font-size: .94rem; color: var(--wp--preset--color--muted); }
.mf-byline strong { color: var(--wp--preset--color--ink); font-weight: 600; }

/* ---------- tags --------------------------------------------- */
.mf-tag {
	display: inline-block;
	font-size: .8rem;
	font-weight: 500;
	padding: 5px 11px;
	border-radius: 2px;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--wp--preset--color--line);
	font-variant-numeric: tabular-nums;
}
.mf-tag-date { background: var(--wp--preset--color--date-soft); color: var(--wp--preset--color--date); border-color: transparent; }
.mf-tag-accent { background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); border-color: transparent; }

/* ---------- people -------------------------------------------
   The pattern sets the columns block to "not stacked on mobile", so the
   breakpoints here are the only ones that apply. Five across on desktop,
   three on tablets, two on phones. Any number of people wraps.
   ------------------------------------------------------------ */
.wp-block-columns.mf-people { flex-wrap: wrap !important; gap: 30px 22px !important; }
.wp-block-columns.mf-people > .wp-block-column {
	flex-basis: calc((100% - 4 * 22px) / 5) !important;
	flex-grow: 0 !important;
	margin: 0;
}
/* The column count follows the head count, so a row never ends with one
   stray portrait: six across for six people, four across for seven,
   eight, eleven or twelve, five across for everything else. */
.wp-block-columns.mf-people > .wp-block-column:first-child:nth-last-child(6),
.wp-block-columns.mf-people > .wp-block-column:first-child:nth-last-child(6) ~ .wp-block-column {
	flex-basis: calc((100% - 5 * 22px) / 6) !important;
}
.wp-block-columns.mf-people > .wp-block-column:first-child:nth-last-child(7),
.wp-block-columns.mf-people > .wp-block-column:first-child:nth-last-child(7) ~ .wp-block-column,
.wp-block-columns.mf-people > .wp-block-column:first-child:nth-last-child(8),
.wp-block-columns.mf-people > .wp-block-column:first-child:nth-last-child(8) ~ .wp-block-column,
.wp-block-columns.mf-people > .wp-block-column:first-child:nth-last-child(11),
.wp-block-columns.mf-people > .wp-block-column:first-child:nth-last-child(11) ~ .wp-block-column,
.wp-block-columns.mf-people > .wp-block-column:first-child:nth-last-child(12),
.wp-block-columns.mf-people > .wp-block-column:first-child:nth-last-child(12) ~ .wp-block-column {
	flex-basis: calc((100% - 3 * 22px) / 4) !important;
}
@media (max-width: 1000px) {
	.wp-block-columns.mf-people > .wp-block-column,
	.wp-block-columns.mf-people > .wp-block-column:first-child ~ .wp-block-column { flex-basis: calc((100% - 2 * 22px) / 3) !important; }
}
@media (max-width: 680px) {
	.wp-block-columns.mf-people > .wp-block-column,
	.wp-block-columns.mf-people > .wp-block-column:first-child ~ .wp-block-column { flex-basis: calc((100% - 22px) / 2) !important; }
}
.mf-portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	border: 1px solid var(--wp--preset--color--line);
}
/* Caption under a portrait: a clear gap below the photo, then name,
   institute and research interests as three spaced lines. */
.mf-people .mf-portrait { margin: 0 0 14px; }
.mf-person-name { font-family: var(--wp--preset--font-family--display); font-size: 1.12rem; font-weight: 600; line-height: 1.25; margin: 0 0 5px; text-wrap: balance; }
.mf-person-role { font-size: .87rem; color: var(--wp--preset--color--ink-2); line-height: 1.4; margin: 0 0 5px; }
.mf-person-fields { font-size: .82rem; color: var(--wp--preset--color--muted); line-height: 1.5; margin: 0; text-wrap: pretty; }

/* management: two wider cards, portrait beside the text */
.mf-leads > .wp-block-column {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	padding: 24px;
}
.mf-lead-inner > .wp-block-column:first-child { flex-basis: 180px !important; flex-grow: 0; }
@media (max-width: 520px) {
	.mf-lead-inner > .wp-block-column:first-child { flex-basis: 100% !important; }
}

/* ---------- course cards ------------------------------------- */
.mf-course {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	padding: 26px;
}

/* ---------- archive: a genuine chronological sequence -------- */
.mf-archive-row {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 30px 0;
	gap: 32px !important;
}
.mf-archive-row > .wp-block-column:first-child { flex-basis: 110px !important; flex-grow: 0; }
.wp-block-columns.mf-archive-row > .wp-block-column:nth-child(2) { flex-basis: 140px !important; flex-grow: 0; max-width: 140px; }
.mf-archive-photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	border: 1px solid var(--wp--preset--color--line);
}
.mf-year {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
	line-height: 1.05;
	margin: 0;
}
@media (max-width: 760px) {
	.mf-archive-row > .wp-block-column:first-child { flex-basis: 100% !important; }
}

/* ---------- numbered requirements ---------------------------- */
.mf-reqs { counter-reset: mfreq; list-style: none; padding: 0; margin: 0; }
.mf-reqs > li {
	counter-increment: mfreq;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 22px;
	padding: 24px 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.mf-reqs > li::before {
	content: counter(mfreq, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}

/* ---------- tables ------------------------------------------- */
.mf-table table, .wp-block-table table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.mf-table th, .mf-table td, .wp-block-table th, .wp-block-table td {
	text-align: left;
	padding: 14px 18px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-left: 0;
	border-right: 0;
	border-top: 0;
}
.mf-table th, .wp-block-table th {
	font-size: .85rem;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	background: var(--wp--preset--color--surface-2);
}
.mf-table tbody tr:last-child td { border-bottom: 0; }
.mf-table figure, .wp-block-table { overflow-x: auto; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); }

/* ---------- note --------------------------------------------- */
.mf-note {
	border-left: 3px solid var(--wp--preset--color--date);
	background: var(--wp--preset--color--date-soft);
	padding: 16px 20px;
	font-size: .9rem;
	color: var(--wp--preset--color--ink-2);
}

/* ---------- the dark band, for page rhythm ------------------- */
.mf-band { background: var(--wp--preset--color--band); color: var(--wp--preset--color--band-text); }
.mf-band h1, .mf-band h2, .mf-band h3 { color: #FFFFFF; }
.mf-band p { color: var(--wp--preset--color--band-text); }
.mf-band a { color: var(--wp--preset--color--band-accent); }

/* ---------- footer ------------------------------------------- */
.mf-footer { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.mf-footer a, .mf-footer p, .mf-footer li { color: var(--wp--preset--color--paper); }
.mf-footer a { opacity: .8; }
.mf-footer a:hover { opacity: 1; }
.mf-footer h4 { color: var(--wp--preset--color--paper); }
.mf-footer ul { list-style: none; padding-left: 0; margin: 0; }
.mf-footer-label {
	font-size: .85rem;
	font-weight: 500;
	opacity: .62;
	margin: 0;
}
.mf-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 20px;
	margin-top: 44px;
	font-size: .82rem;
	opacity: .72;
}

/* ---------- forms --------------------------------------------
   Wrap the form block in a group with the class mf-form. The selectors
   cover plain inputs and the ones Fluent Forms renders.
   ------------------------------------------------------------ */
.mf-form input[type="text"],
.mf-form input[type="email"],
.mf-form input[type="number"],
.mf-form input[type="tel"],
.mf-form select,
.mf-form textarea,
.mf-form .ff-el-form-control {
	font: inherit;
	font-size: .95rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--mf-radius);
	padding: 11px 13px;
	width: 100%;
}
.mf-form input:focus, .mf-form select:focus, .mf-form textarea:focus, .mf-form .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-soft);
}
.mf-form label, .mf-form .ff-el-input--label label { font-size: .85rem; font-weight: 500; color: var(--wp--preset--color--ink-2); }
.mf-form .ff-el-group { margin-bottom: 18px; }
.mf-form .ff-btn-submit,
.mf-form button[type="submit"] {
	font: inherit;
	font-size: .9rem;
	font-weight: 500;
	color: #FFFFFF;
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: var(--mf-radius);
	padding: 13px 20px;
	cursor: pointer;
}
.mf-form .ff-btn-submit:hover,
.mf-form button[type="submit"]:hover { background: var(--wp--preset--color--accent-hi); }
.mf-form .ff-message-success {
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
	padding: 16px 20px;
}

/* ---------- section rules ------------------------------------ */
.mf-section { border-top: 1px solid var(--wp--preset--color--line); }
.mf-section-first { border-top: 0; }

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}