/*
 * Components: layout primitives, buttons, chrome, footer, shared blocks.
 */

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

.eg-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.eg-section {
	padding-block: var(--section-y);
	position: relative;
}

.eg-section__head {
	margin-bottom: var(--sp-8);
}

.eg-section__head--tight {
	margin-bottom: var(--sp-7);
}

/*
 * Headline with a lead paragraph. Stacked, always: putting the explainer in a
 * right-hand column leaves a small paragraph floating in the corner with
 * nothing to align to, and splits the section's message in two.
 */
.eg-section__head--split {
	display: grid;
	gap: var(--sp-4);
}

.eg-section__lead {
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--c-ink-2);
	margin: 0;
	max-width: var(--measure);
}

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

.eg-btn {
	--btn-py: 0.72rem;
	--btn-px: 1.35rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--btn-py) var(--btn-px);
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.2;
	/* A call to action that wraps to two lines is a broken control. */
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	background: none;
	transition:
		background-color var(--d-fast) var(--e-out),
		border-color var(--d-fast) var(--e-out),
		color var(--d-fast) var(--e-out),
		box-shadow var(--d-fast) var(--e-out);
	/* Feedback fires on pointer-down, driven by JS; this is the resting state. */
	transform: scale(1);
}

.eg-btn--sm {
	--btn-py: 0.55rem;
	--btn-px: 1.05rem;
	font-size: var(--fs-xs);
}

.eg-btn--lg {
	--btn-py: 0.92rem;
	--btn-px: 1.7rem;
	font-size: var(--fs-body);
}

.eg-btn--block {
	display: flex;
	width: 100%;
}

.eg-btn--primary {
	background: var(--c-accent);
	color: var(--c-on-accent);
	box-shadow: var(--sh-sm);
}

.eg-btn--primary:hover {
	background: var(--c-accent-hover);
	color: var(--c-on-accent);
	box-shadow: var(--sh-md);
}

.eg-btn--ghost {
	color: var(--c-ink);
	border-color: var(--c-line-strong);
	background: color-mix(in srgb, var(--c-surface) 60%, transparent);
}

.eg-btn--ghost:hover {
	color: var(--c-ink);
	border-color: var(--c-ink-3);
	background: var(--c-surface);
}

.eg-btn[disabled],
.eg-btn[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
}

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

/*
 * The sentinel sits at the very top of the document. An IntersectionObserver
 * watches it to toggle the header's scrolled state, which is why this theme
 * has no scroll event listener anywhere.
 */
.eg-header-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.eg-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--z-header);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--d-base) var(--e-out),
		border-color var(--d-base) var(--e-out),
		backdrop-filter var(--d-base) var(--e-out);
}

/* Translucent material only once content is actually scrolling underneath. */
.eg-header.is-stuck {
	background: var(--m-chrome);
	border-bottom-color: var(--m-chrome-border);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
}

.admin-bar .eg-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .eg-header {
		top: 46px;
	}
}

.eg-header__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	height: var(--header-h);
	display: flex;
	align-items: center;
	gap: var(--sp-5);
}

.eg-header__brand {
	flex: 0 0 auto;
	margin-right: auto;
}

.eg-header__brand img,
.custom-logo {
	max-height: 34px;
	width: auto;
}

.eg-wordmark {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	color: var(--c-ink);
}

.eg-wordmark:hover {
	color: var(--c-ink);
}

/* Monogram mark: a filled ring, drawn in CSS. */
.eg-wordmark__mark {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2.5px solid var(--c-accent);
	position: relative;
	flex: 0 0 auto;
}

.eg-wordmark__mark::after {
	content: "";
	position: absolute;
	inset: 3.5px;
	border-radius: 50%;
	background: var(--c-accent);
	transform: scale(0.55);
	transform-origin: 100% 100%;
	transition: transform var(--d-base) var(--e-out);
}

.eg-wordmark:hover .eg-wordmark__mark::after {
	transform: scale(1);
}

.eg-header__nav {
	display: none;
}

@media (min-width: 1000px) {
	.eg-header__nav {
		display: block;
	}
}

.eg-menu {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	list-style: none;
	margin: 0;
	padding: 0;
	/* Navigation is one line at desktop or it is not navigation. */
	white-space: nowrap;
}

.eg-menu a {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-ink-2);
	text-decoration: none;
}

.eg-menu a:hover,
.eg-menu .current-menu-item > a {
	color: var(--c-ink);
}

.eg-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

@media (max-width: 599px) {
	.eg-header__actions .eg-btn {
		display: none;
	}
}

/*
 * Language switcher.
 *
 * Two-letter codes rather than flags: a flag is a country, not a language, and
 * with Serbian, Croatian and Slovenian side by side that distinction stops being
 * pedantic. The codes also stay legible at this size, which small flag images
 * do not.
 *
 * The current language stays visible rather than being hidden, so the control
 * always shows what you are reading, not just what you could switch to.
 */
.eg-langs {
	display: flex;
	align-items: center;
	gap: 1px;
	padding: 2px;
	border-radius: var(--r-pill);
	background: var(--c-line);
}

.eg-langs__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.15rem;
	padding: 0.3rem 0.45rem;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--c-ink-2);
	text-decoration: none;
	transition: color var(--d-fast) var(--e-out),
		background-color var(--d-fast) var(--e-out);
}

.eg-langs__item:hover {
	color: var(--c-ink);
}

.eg-langs__item.is-current {
	background: var(--c-surface);
	color: var(--c-ink);
	box-shadow: var(--sh-sm);
}

/* The header is tight at small widths; the sheet carries the switcher there. */
@media (max-width: 599px) {
	.eg-langs--header {
		display: none;
	}
}

.eg-langs--sheet {
	justify-content: space-between;
	margin-top: var(--sp-3);
}

.eg-langs--sheet .eg-langs__item {
	flex: 1 1 auto;
	padding-block: 0.55rem;
	font-size: var(--fs-sm);
}

/* Burger: three CSS-drawn rules that cross into an X when open. */
.eg-burger {
	appearance: none;
	background: none;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
}

@media (min-width: 1000px) {
	.eg-burger {
		display: none;
	}
}

.eg-burger__lines,
.eg-burger__lines::before,
.eg-burger__lines::after {
	display: block;
	width: 16px;
	height: 1.5px;
	background: var(--c-ink);
	border-radius: 2px;
	transition: transform var(--d-base) var(--e-out),
		opacity var(--d-fast) var(--e-out);
}

.eg-burger__lines {
	position: relative;
}

.eg-burger__lines::before,
.eg-burger__lines::after {
	content: "";
	position: absolute;
	left: 0;
}

.eg-burger__lines::before {
	transform: translateY(-5px);
}

.eg-burger__lines::after {
	transform: translateY(5px);
}

.eg-burger[aria-expanded="true"] .eg-burger__lines {
	background: transparent;
}

.eg-burger[aria-expanded="true"] .eg-burger__lines::before {
	transform: rotate(45deg);
}

.eg-burger[aria-expanded="true"] .eg-burger__lines::after {
	transform: rotate(-45deg);
}

/* ---------------------------------------------------- Mobile menu sheet */

.eg-sheet {
	position: fixed;
	inset: 0;
	z-index: var(--z-sheet);
}

.eg-sheet[hidden] {
	display: none;
}

.eg-sheet__scrim {
	position: absolute;
	inset: 0;
	background: var(--m-scrim);
	opacity: 0;
	transition: opacity var(--d-base) var(--e-out);
}

.eg-sheet.is-open .eg-sheet__scrim {
	opacity: 1;
}

/*
 * The panel enters from the top and leaves the same way. Something that
 * disappears one direction is expected to come back from there.
 */
.eg-sheet__panel {
	position: absolute;
	inset-inline: 0;
	top: 0;
	background: var(--c-surface);
	border-bottom-left-radius: var(--r-xl);
	border-bottom-right-radius: var(--r-xl);
	box-shadow: var(--sh-lg);
	padding: calc(var(--header-h) + var(--sp-5)) var(--gutter) var(--sp-7);
	transform: translate3d(0, -100%, 0);
	transition: transform var(--d-base) var(--e-out);
	will-change: transform;
}

.eg-sheet.is-open .eg-sheet__panel {
	transform: none;
}

.eg-sheet__menu {
	list-style: none;
	margin: 0 0 var(--sp-6);
	padding: 0;
	display: grid;
	gap: var(--sp-1);
}

.eg-sheet__menu a {
	display: block;
	padding: var(--sp-3) 0;
	font-family: var(--ff-display);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
	border-bottom: 1px solid var(--c-line);
}

.eg-sheet__actions {
	display: grid;
	gap: var(--sp-3);
}

@media (prefers-reduced-motion: reduce) {
	.eg-sheet__panel {
		transform: none;
		opacity: 0;
		transition: opacity 180ms linear;
	}

	.eg-sheet.is-open .eg-sheet__panel {
		opacity: 1;
	}
}

/* ------------------------------------------------------- Shared blocks */

/* Definition list used for program facts in several places. */
.eg-facts {
	margin: 0;
	display: grid;
	gap: 0;
}

.eg-facts__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--c-line);
}

.eg-facts__row:last-child {
	border-bottom: 0;
}

.eg-facts dt {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--c-ink-3);
	flex: 0 0 auto;
}

.eg-facts dd {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	text-align: right;
	color: var(--c-ink);
}

.eg-facts--quiet {
	margin-top: var(--sp-6);
	max-width: 26rem;
}

.eg-facts--inline .eg-facts__row {
	border-bottom-color: var(--c-accent-line);
}

/*
 * List item marks are drawn with a short rule rather than an icon. It keeps the
 * typographic register consistent and avoids shipping an icon font.
 */
.eg-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-4);
}

.eg-list__item {
	position: relative;
	padding-left: var(--sp-6);
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--c-ink-2);
}

.eg-list__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 14px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--c-accent);
}

.eg-list--accent .eg-list__item {
	color: var(--c-ink);
}

/* Notices */
.eg-notice {
	border-radius: var(--r-lg);
	padding: var(--sp-5) var(--sp-6);
	border: 1px solid var(--c-accent-line);
	background: var(--c-accent-soft);
}

.eg-notice h3 {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-h3);
}

.eg-notice--error {
	border-color: color-mix(in srgb, var(--c-error) 35%, transparent);
	background: var(--c-error-soft);
	color: var(--c-error);
}

/* Empty and 404 states */
.eg-empty {
	padding-block: var(--section-y);
	max-width: 46rem;
}

.eg-empty p {
	color: var(--c-ink-2);
	font-size: var(--fs-lead);
}

.eg-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

/* Post cards, used by the blog index */
.eg-cards {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.eg-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.eg-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--d-base) var(--e-out),
		border-color var(--d-base) var(--e-out);
}

.eg-card:hover {
	border-color: var(--c-line-strong);
	box-shadow: var(--sh-md);
}

.eg-card__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.eg-card__body {
	padding: var(--sp-5) var(--sp-5) var(--sp-6);
}

.eg-card__title {
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-h3);
	margin-bottom: var(--sp-3);
}

.eg-card__title a {
	text-decoration: none;
}

.eg-card__excerpt {
	color: var(--c-ink-2);
	font-size: var(--fs-sm);
}

.eg-card__meta {
	margin-top: var(--sp-4);
	font-size: var(--fs-xs);
	color: var(--c-ink-3);
}

/* Pagination and post navigation */
.pagination,
.eg-post-nav {
	margin-top: var(--sp-9);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--sp-3);
	border-radius: var(--r-pill);
	border: 1px solid var(--c-line);
	text-decoration: none;
	font-size: var(--fs-sm);
}

.pagination .page-numbers.current {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent);
}

.eg-post-nav .nav-links {
	display: grid;
	gap: var(--sp-5);
}

@media (min-width: 700px) {
	.eg-post-nav .nav-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.eg-post-nav a {
	display: grid;
	gap: var(--sp-1);
	text-decoration: none;
	font-weight: 500;
}

/* Single post shell */
.eg-single__head {
	padding-block: calc(var(--header-h) + var(--sp-9)) var(--sp-7);
}

/*
 * The title uses the container's full width, but not as one long line: a
 * headline at --fs-h1 gets about forty characters across 1180px, and past
 * roughly half that it stops reading as a headline and starts reading as a
 * sentence.
 */
.eg-single__head .eg-h1 {
	max-width: 26ch;
}

/*
 * The article body fills the container; the reading column inside it does not.
 *
 * Two tracks: text at a measure, then whatever the container has left over.
 * Text stays flush with the page's left edge -- the same edge as the title, the
 * header and the footer -- while figures, tables and embeds may cross into the
 * second track and use the full width. One grid does both, which is why the
 * body no longer needs a narrower wrapper around it.
 *
 * Below roughly 700px the first track is clamped to the container and the
 * second collapses to zero, so on a phone this is a plain single column.
 *
 * Scoped to .eg-single: .eg-prose is also the lead block on the mentor and
 * application pages, where it is already inside a column and has nothing to
 * spend a second track on.
 */
.eg-single .eg-prose {
	display: grid;
	grid-template-columns:
		[text-start] minmax(0, var(--measure))
		[text-end] minmax(0, 1fr) [full-end];
}

.eg-single .eg-prose > * {
	grid-column: text-start / text-end;
}

.eg-single .eg-prose > figure,
.eg-single .eg-prose > table,
.eg-single .eg-prose > .wp-block-image,
.eg-single .eg-prose > .wp-block-gallery,
.eg-single .eg-prose > .wp-block-embed,
.eg-single .eg-prose > .wp-block-table {
	grid-column: text-start / full-end;
}

.eg-single__media {
	margin: 0 0 var(--sp-8);
}

.eg-single__media img {
	width: 100%;
	border-radius: var(--r-lg);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*
 * Comments are running text and take the same measure as the article body.
 * Left-flush, so the thread lines up with the paragraphs above it.
 */
.comments-area {
	max-width: var(--measure);
	margin-top: var(--sp-9);
}

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

.eg-footer {
	background: var(--c-surface);
	border-top: 1px solid var(--c-line);
	padding-block: var(--sp-9) var(--sp-6);
	margin-top: var(--sp-6);
}

.eg-footer__top {
	display: grid;
	gap: var(--sp-7);
	padding-bottom: var(--sp-8);
}

@media (min-width: 800px) {
	.eg-footer__top {
		grid-template-columns: minmax(0, 1.2fr) repeat(auto-fit, minmax(160px, 1fr));
	}
}

.eg-footer__name {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	margin-bottom: var(--sp-3);
}

.eg-footer__address {
	font-style: normal;
	color: var(--c-ink-2);
	font-size: var(--fs-sm);
	line-height: 1.9;
}

.eg-footer__menu,
.eg-footer__legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
}

.eg-footer__menu a,
.eg-footer__legal-menu a {
	color: var(--c-ink-2);
	text-decoration: none;
}

.eg-footer__menu a:hover,
.eg-footer__legal-menu a:hover {
	color: var(--c-accent);
}

.eg-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
}

.eg-footer__copy {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--c-ink-3);
}

.eg-footer__legal-menu {
	display: flex;
	gap: var(--sp-5);
	font-size: var(--fs-xs);
}

.eg-footer .widget {
	font-size: var(--fs-sm);
}

.eg-footer .widget-title {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-ink-3);
	margin-bottom: var(--sp-3);
}