/**
 * Component layer.
 *
 * Styles the markup emitted by the Abroad Plan HQ Core plugin. The plugin's HTML
 * is semantic and readable with stylesheets disabled; this layer only makes it
 * look like the brand.
 */

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

.aphq-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(253, 252, 250, 0.94);
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--aphq-color-gray-100);
}

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

.aphq-logo {
	font-family: var(--aphq-font-serif);
	font-size: var(--aphq-text-lg);
	font-weight: 700;
	color: var(--aphq-color-navy-900);
	text-decoration: none;
	letter-spacing: -0.02em;
}

.aphq-logo span {
	color: var(--aphq-color-teal-600);
}

/* Custom logo (the-custom-logo output). The source is a wide wordmark, so we
   constrain by height and let width follow. The height sits a little below the
   header height so the logo has breathing room above and below. */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.custom-logo-link img,
img.custom-logo {
	height: 2rem;
	width: auto;
	max-width: 100%;
	display: block;
}

@media (max-width: 30rem) {
	.custom-logo-link img,
	img.custom-logo {
		height: 1.75rem;
	}
}

.aphq-nav ul {
	display: flex;
	gap: var(--aphq-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aphq-nav a {
	color: var(--aphq-color-navy-700);
	text-decoration: none;
	font-size: var(--aphq-text-sm);
	font-weight: 500;
	padding: var(--aphq-space-xs) 0;
	display: inline-block;
}

.aphq-nav a:hover,
.aphq-nav .current-menu-item > a {
	color: var(--aphq-color-teal-600);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Menu toggle: hidden on desktop and until JavaScript reveals it. */
.aphq-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--aphq-color-navy-900);
	cursor: pointer;
}

/* Three bars built from one element, morphing to an X when expanded. */
.aphq-nav-toggle__bars,
.aphq-nav-toggle__bars::before,
.aphq-nav-toggle__bars::after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.aphq-nav-toggle__bars {
	position: relative;
}

.aphq-nav-toggle__bars::before {
	position: absolute;
	top: -7px;
}

.aphq-nav-toggle__bars::after {
	position: absolute;
	top: 7px;
}

.aphq-nav-toggle[aria-expanded="true"] .aphq-nav-toggle__bars {
	background: transparent;
}

.aphq-nav-toggle[aria-expanded="true"] .aphq-nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.aphq-nav-toggle[aria-expanded="true"] .aphq-nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (max-width: 52rem) {
	/* No-JS fallback: the menu stays visible and wraps. */
	.aphq-nav:not(.is-collapsible) ul {
		flex-wrap: wrap;
		gap: var(--aphq-space-sm) var(--aphq-space-md);
		justify-content: flex-end;
	}

	/* JS present: show the button, collapse the menu into a dropdown panel. */
	.aphq-nav-toggle:not([hidden]) {
		display: inline-flex;
	}

	.aphq-nav.is-collapsible {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--aphq-color-white);
		border-bottom: 1px solid var(--aphq-color-gray-100);
		box-shadow: var(--aphq-shadow-md);
		padding-block: var(--aphq-space-sm);
	}

	.aphq-nav.is-collapsible.is-open {
		display: block;
	}

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

	.aphq-nav.is-collapsible a {
		display: block;
		padding: var(--aphq-space-sm) var(--aphq-space-md);
		font-size: var(--aphq-text-base);
	}
}

/* Breadcrumbs ---------------------------------------------------------- */

.aphq-breadcrumbs {
	font-size: var(--aphq-text-xs);
	color: var(--aphq-color-gray-700);
	padding-block: var(--aphq-space-sm);
}

.aphq-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aphq-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aphq-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: var(--aphq-space-xs);
	color: var(--aphq-color-gray-300);
}

.aphq-breadcrumbs [aria-current="page"] {
	color: var(--aphq-color-gray-900);
}

/* Hero ----------------------------------------------------------------- */

.aphq-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-items: center;
	min-height: clamp(34rem, 53vw, 46rem);
	padding-block: var(--aphq-space-2xl) var(--aphq-space-xl);
	background: var(--aphq-color-sand-100);
}

.aphq-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		var(--aphq-color-sand-100) 0%,
		var(--aphq-color-sand-100) 32%,
		transparent 76%
	);
	pointer-events: none;
}

.aphq-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.aphq-hero__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;

	/* The couple sits between roughly 46% and 88% across, faces around 40% down.
	   Horizontal centring keeps them in frame at every width the desktop layout
	   covers; the vertical bias keeps headroom above them on ultra-wide screens,
	   where cover crops the top and bottom hardest. */
	object-position: 50% 42%;
}

.aphq-hero__content {
	width: 100%;
}

.aphq-hero__title {
	max-width: 18ch;
	margin-bottom: var(--aphq-space-md);
	text-wrap: balance;
}

.aphq-hero__subtitle {
	max-width: 48ch;
	font-size: var(--aphq-text-lg);
	color: var(--aphq-color-gray-900);
	line-height: var(--aphq-leading-snug);
	margin-bottom: var(--aphq-space-lg);
}

.aphq-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aphq-space-sm);
}

@media (max-width: 48rem) {
	.aphq-hero {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding-block: 0;
	}

	.aphq-hero::after {
		display: none;
	}

	.aphq-hero__media {
		position: relative;
		inset: auto;
		z-index: auto;
		width: 100%;
		height: clamp(15rem, 62vw, 24rem);
	}

	.aphq-hero__media img {
		object-position: 64% center;
	}

	.aphq-hero__content {
		padding-block: var(--aphq-space-xl) var(--aphq-space-lg);
	}
}

/* Page header ---------------------------------------------------------- */

.aphq-page-header {
	padding-block: var(--aphq-space-lg) var(--aphq-space-md);
	border-bottom: 1px solid var(--aphq-color-gray-100);
	margin-bottom: var(--aphq-space-lg);
}

.aphq-page-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aphq-space-sm) var(--aphq-space-md);
	font-size: var(--aphq-text-xs);
	color: var(--aphq-color-gray-700);
	margin-top: var(--aphq-space-sm);
}

/* Verified badge ------------------------------------------------------- */

.aphq-verified {
	display: inline-flex;
	align-items: center;
	gap: var(--aphq-space-xs);
	font-size: var(--aphq-text-xs);
	font-weight: 600;
	color: var(--aphq-color-success);
	background: var(--aphq-color-success-bg);
	padding: var(--aphq-space-xs) var(--aphq-space-sm);
	border-radius: 999px;
	margin: 0;
}

.aphq-verified__mark {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--aphq-color-success);
	flex: none;
}

/* Cards ---------------------------------------------------------------- */

.aphq-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--aphq-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aphq-card {
	background: var(--aphq-color-white);
	border: 1px solid var(--aphq-color-gray-100);
	border-radius: var(--aphq-radius-lg);
	box-shadow: var(--aphq-shadow-sm);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.aphq-card:hover {
	box-shadow: var(--aphq-shadow-md);
}

.aphq-card a {
	display: block;
	padding: var(--aphq-space-md);
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.aphq-card h3 {
	margin: 0 0 var(--aphq-space-xs);
	font-size: var(--aphq-text-lg);
}

.aphq-card p {
	font-size: var(--aphq-text-sm);
	color: var(--aphq-color-gray-700);
	margin: 0;
}

/* Summary / disclaimer / notices --------------------------------------- */

.aphq-summary {
	background: var(--aphq-color-navy-100);
	border-left: 4px solid var(--aphq-color-navy-700);
	border-radius: 0 var(--aphq-radius-md) var(--aphq-radius-md) 0;
	padding: var(--aphq-space-md) var(--aphq-space-lg);
	margin-block: var(--aphq-space-lg);
}

.aphq-summary__title {
	font-size: var(--aphq-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--aphq-color-navy-700);
	margin: 0 0 var(--aphq-space-sm);
	font-family: var(--aphq-font-sans);
	font-weight: 700;
}

.aphq-disclaimer,
.aphq-notice {
	border: 1px solid var(--aphq-color-gray-100);
	border-radius: var(--aphq-radius-md);
	padding: var(--aphq-space-md);
	margin-block: var(--aphq-space-lg);
	font-size: var(--aphq-text-sm);
	background: var(--aphq-color-sand-200);
}

.aphq-disclaimer__title,
.aphq-notice__date {
	font-weight: 700;
	margin: 0 0 var(--aphq-space-xs);
}

.aphq-notice--warning {
	background: var(--aphq-color-warning-bg);
	border-color: var(--aphq-color-warning-line);
	color: var(--aphq-color-warning);
}

.aphq-notice--critical {
	background: var(--aphq-color-danger-bg);
	border-color: var(--aphq-color-danger-line);
	color: var(--aphq-color-danger);
}

/* Key facts ------------------------------------------------------------ */

.aphq-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--aphq-space-md);
	margin-block: var(--aphq-space-lg);
	padding: var(--aphq-space-md);
	background: var(--aphq-color-white);
	border: 1px solid var(--aphq-color-gray-100);
	border-radius: var(--aphq-radius-lg);
}

.aphq-facts dt {
	font-size: var(--aphq-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--aphq-color-gray-700);
	font-weight: 600;
	margin-bottom: var(--aphq-space-xs);
}

.aphq-facts dd {
	margin: 0;
	font-weight: 600;
	color: var(--aphq-color-navy-900);
}

/* Tables --------------------------------------------------------------- */

.aphq-table-wrap {
	overflow-x: auto;
	margin-block: var(--aphq-space-lg);
	border: 1px solid var(--aphq-color-gray-100);
	border-radius: var(--aphq-radius-md);
	background: var(--aphq-color-white);
}

.aphq-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--aphq-text-sm);
}

.aphq-table caption {
	text-align: left;
	padding: var(--aphq-space-sm) var(--aphq-space-md);
	font-weight: 600;
	color: var(--aphq-color-gray-700);
	border-bottom: 1px solid var(--aphq-color-gray-100);
}

.aphq-table th,
.aphq-table td {
	padding: var(--aphq-space-sm) var(--aphq-space-md);
	text-align: left;
	border-bottom: 1px solid var(--aphq-color-gray-100);
	vertical-align: top;
}

.aphq-table thead th {
	background: var(--aphq-color-sand-200);
	font-size: var(--aphq-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--aphq-color-gray-700);
}

.aphq-table tbody tr:last-child th,
.aphq-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Below 34rem a wide table stops being a table and becomes stacked records.
   Horizontal scrolling a five-column table on a phone is not "responsive". */
@media (max-width: 34rem) {
	.aphq-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.aphq-table tbody tr {
		display: block;
		border-bottom: 2px solid var(--aphq-color-gray-100);
		padding: var(--aphq-space-sm) 0;
	}

	.aphq-table tbody th,
	.aphq-table tbody td {
		display: block;
		border: 0;
		padding: var(--aphq-space-xs) var(--aphq-space-md);
	}

	.aphq-table tbody th {
		font-family: var(--aphq-font-serif);
		font-size: var(--aphq-text-base);
		color: var(--aphq-color-navy-900);
	}

	.aphq-table tbody td::before {
		content: attr(data-label) ": ";
		font-weight: 600;
		color: var(--aphq-color-gray-700);
	}
}

/* Timeline ------------------------------------------------------------- */

.aphq-timeline {
	list-style: none;
	margin: var(--aphq-space-lg) 0;
	padding: 0;
}

.aphq-timeline__item {
	display: flex;
	gap: var(--aphq-space-md);
	padding-bottom: var(--aphq-space-md);
	position: relative;
}

.aphq-timeline__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 34px;
	bottom: 0;
	width: 2px;
	background: var(--aphq-color-gray-100);
}

.aphq-timeline__step {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--aphq-color-navy-700);
	color: var(--aphq-color-white);
	display: grid;
	place-items: center;
	font-size: var(--aphq-text-sm);
	font-weight: 700;
	z-index: 1;
}

.aphq-timeline__when {
	font-weight: 700;
	margin: 0.3em 0 var(--aphq-space-xs);
}

.aphq-timeline__what {
	color: var(--aphq-color-gray-700);
	margin: 0;
}

/* Considerations ------------------------------------------------------- */

.aphq-considerations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--aphq-space-md);
	margin-block: var(--aphq-space-lg);
}

.aphq-considerations__col {
	background: var(--aphq-color-success-bg);
	border-radius: var(--aphq-radius-md);
	padding: var(--aphq-space-md);
}

.aphq-considerations__col--friction {
	background: var(--aphq-color-warning-bg);
}

.aphq-considerations h3 {
	margin: 0 0 var(--aphq-space-sm);
	font-size: var(--aphq-text-base);
	font-family: var(--aphq-font-sans);
	font-weight: 700;
}

.aphq-considerations ul {
	margin: 0;
	padding-left: 1.2em;
	font-size: var(--aphq-text-sm);
}

/* Sources -------------------------------------------------------------- */

.aphq-sources ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.aphq-sources li {
	padding: var(--aphq-space-sm) 0;
	border-bottom: 1px solid var(--aphq-color-gray-100);
}

.aphq-sources__meta {
	display: block;
	font-size: var(--aphq-text-xs);
	color: var(--aphq-color-gray-700);
}

/* FAQ ------------------------------------------------------------------ */

.aphq-faq__item {
	border-bottom: 1px solid var(--aphq-color-gray-100);
}

.aphq-faq__item summary {
	cursor: pointer;
	padding: var(--aphq-space-md) 0;
	font-weight: 600;
	list-style-position: outside;
}

.aphq-faq__answer {
	padding-bottom: var(--aphq-space-md);
	color: var(--aphq-color-gray-700);
}

/* Related -------------------------------------------------------------- */

.aphq-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--aphq-space-md);
	list-style: none;
	padding: 0;
	margin: 0;
}

.aphq-related__item a {
	display: block;
	padding: var(--aphq-space-md);
	background: var(--aphq-color-white);
	border: 1px solid var(--aphq-color-gray-100);
	border-radius: var(--aphq-radius-md);
	text-decoration: none;
}

.aphq-related__title {
	display: block;
	font-weight: 600;
	color: var(--aphq-color-navy-900);
	margin-bottom: var(--aphq-space-xs);
}

.aphq-related__excerpt {
	display: block;
	font-size: var(--aphq-text-sm);
	color: var(--aphq-color-gray-700);
}

/* Newsletter ----------------------------------------------------------- */

.aphq-newsletter {
	background: var(--aphq-color-navy-900);
	color: var(--aphq-color-white);
	border-radius: var(--aphq-radius-lg);
	padding: var(--aphq-space-lg);
	margin-block: var(--aphq-space-xl);
}

.aphq-newsletter h2 {
	color: var(--aphq-color-white);
	margin-top: 0;
}

.aphq-newsletter p {
	color: var(--aphq-color-navy-100);
}

.aphq-newsletter a {
	color: var(--aphq-color-white);
}

/* Tools: calculator and checklist -------------------------------------- */

.aphq-calc,
.aphq-checklist {
	margin-block: var(--aphq-space-xl);
}

.aphq-calc__intro,
.aphq-checklist__intro {
	color: var(--aphq-color-gray-700);
}

.aphq-calc__group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--aphq-space-md);
	padding: var(--aphq-space-md);
	background: var(--aphq-color-white);
	border: 1px solid var(--aphq-color-gray-100);
	border-radius: var(--aphq-radius-lg);
}

.aphq-calc__group legend {
	grid-column: 1 / -1;
}

.aphq-calc__hint {
	display: block;
	font-size: var(--aphq-text-xs);
	color: var(--aphq-color-gray-700);
	margin-top: var(--aphq-space-xs);
}

.aphq-calc__results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--aphq-space-md);
	margin-block: var(--aphq-space-lg);
}

.aphq-calc__result {
	background: var(--aphq-color-white);
	border: 1px solid var(--aphq-color-gray-100);
	border-radius: var(--aphq-radius-lg);
	padding: var(--aphq-space-md);
	/* Reserve height so results appearing cannot shift the page. */
	min-height: 7.5rem;
}

.aphq-calc__result--total {
	background: var(--aphq-color-navy-900);
	border-color: var(--aphq-color-navy-900);
}

.aphq-calc__result--total .aphq-calc__result-label { color: var(--aphq-color-navy-100); }
.aphq-calc__result--total .aphq-calc__result-value { color: var(--aphq-color-white); }

.aphq-calc__result-label {
	font-size: var(--aphq-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--aphq-color-gray-700);
	margin: 0 0 var(--aphq-space-xs);
	font-weight: 600;
}

.aphq-calc__result-value {
	font-family: var(--aphq-font-serif);
	font-size: var(--aphq-text-2xl);
	color: var(--aphq-color-navy-900);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.aphq-assumptions {
	background: var(--aphq-color-sand-200);
	border: 1px solid var(--aphq-color-gray-100);
	border-radius: var(--aphq-radius-md);
	padding: var(--aphq-space-md);
}

.aphq-assumptions summary {
	cursor: pointer;
	font-weight: 600;
}

.aphq-assumptions ul {
	margin-top: var(--aphq-space-sm);
	font-size: var(--aphq-text-sm);
	color: var(--aphq-color-gray-700);
}

.aphq-assumptions__date {
	font-size: var(--aphq-text-xs);
	color: var(--aphq-color-gray-700);
	font-style: italic;
}

.aphq-checklist__controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--aphq-space-md);
	padding: var(--aphq-space-md);
	background: var(--aphq-color-sand-200);
	border-radius: var(--aphq-radius-lg);
	margin-bottom: var(--aphq-space-lg);
}

.aphq-checklist__controls label {
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: var(--aphq-space-xs);
	min-height: 32px;
}

.aphq-checklist__controls input {
	width: auto;
	min-height: auto;
}

.aphq-checklist__progress {
	font-size: var(--aphq-text-sm);
	font-weight: 600;
	color: var(--aphq-color-teal-700);
}

.aphq-checklist__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--aphq-space-lg);
}

.aphq-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: var(--aphq-space-sm);
	padding: var(--aphq-space-sm) 0;
	border-bottom: 1px solid var(--aphq-color-gray-100);
}

.aphq-checklist__item[hidden] {
	display: none;
}

.aphq-checklist__item input {
	width: auto;
	min-height: auto;
	margin-top: 0.35em;
	flex: none;
}

.aphq-checklist__item label {
	font-weight: 400;
	margin: 0;
	font-size: var(--aphq-text-base);
}

.aphq-checklist__item input:checked + label {
	color: var(--aphq-color-gray-700);
	text-decoration: line-through;
}

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

.aphq-footer {
	background: var(--aphq-color-navy-900);
	color: var(--aphq-color-navy-100);
	padding-block: var(--aphq-space-xl) var(--aphq-space-lg);
	margin-top: var(--aphq-space-2xl);
}

.aphq-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--aphq-space-lg);
}

.aphq-footer h2 {
	color: var(--aphq-color-white);
	font-size: var(--aphq-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--aphq-font-sans);
	margin: 0 0 var(--aphq-space-sm);
}

.aphq-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.aphq-footer li {
	margin-bottom: var(--aphq-space-xs);
}

.aphq-footer a {
	color: var(--aphq-color-navy-100);
	text-decoration: none;
	font-size: var(--aphq-text-sm);
}

.aphq-footer a:hover {
	color: var(--aphq-color-white);
	text-decoration: underline;
}

.aphq-footer__legal {
	margin-top: var(--aphq-space-lg);
	padding-top: var(--aphq-space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: var(--aphq-text-xs);
	color: var(--aphq-color-gray-300);
}

.aphq-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aphq-space-md);
}

.aphq-footer__legal-links li {
	margin: 0;
}

/* Table of contents ---------------------------------------------------- */

.aphq-toc {
	background: var(--aphq-color-sand-200);
	border: 1px solid var(--aphq-color-gray-100);
	border-radius: var(--aphq-radius-lg);
	padding: var(--aphq-space-md) var(--aphq-space-lg);
	margin-block: var(--aphq-space-lg);
	max-width: var(--aphq-content-width);
}

.aphq-toc h2 {
	margin: 0 0 var(--aphq-space-sm);
	font-size: var(--aphq-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--aphq-font-sans);
	color: var(--aphq-color-gray-700);
}

.aphq-toc ol {
	margin: 0;
	padding-left: 1.2em;
	font-size: var(--aphq-text-sm);
}

.aphq-toc li {
	margin-bottom: var(--aphq-space-xs);
}

/* Anchored headings must not land under the sticky header. */
.aphq-prose :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--aphq-header-height) + var(--aphq-space-md));
}

/* Updates -------------------------------------------------------------- */

.aphq-updates {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: var(--aphq-content-width);
}

.aphq-update {
	padding: var(--aphq-space-md) 0;
	border-bottom: 1px solid var(--aphq-color-gray-100);
}

.aphq-update__date {
	font-size: var(--aphq-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--aphq-color-gray-700);
	font-weight: 600;
	margin: 0 0 var(--aphq-space-xs);
}

.aphq-update h2 {
	margin: 0 0 var(--aphq-space-xs);
	font-size: var(--aphq-text-xl);
}

.aphq-empty {
	color: var(--aphq-color-gray-700);
	font-style: italic;
}

/* 404 ------------------------------------------------------------------ */

.aphq-404 {
	padding-block: var(--aphq-space-2xl);
	max-width: var(--aphq-content-width);
}