/* =============================================================
   ARNARSKÓLI — templates.css
   Layout for the five article page templates. Base components
   (.back-link, .toc, .sidebar-siblings, .panel-dark, .chip,
   .card-soft, .date-pill, .prose …) live in main.css; only the
   per-template composition and spacing belongs here.
   ============================================================= */

/* -------------------------------------------------------------
   Shared article shell
   ------------------------------------------------------------- */
/* No top padding: .site-main already opens with --space-3xl, and stacking a
   second inset on top of it pushed the back link a full 114px down the page —
   twice the gap page.php gets, which prints its back link outside .article.
   Dropping it lines every article template up with the default template. */
.article {
	padding: 0 0 90px;
}

.article__header {
	margin: 0 0 32px;
}

.article__title {
	margin: 0 0 8px;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: clamp( 28px, 4vw, 38px );
	font-weight: 700;
	line-height: 1.2;
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--color-ink-2);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
}

/* Section label inside the meta line. */
.article__section {
	color: var(--color-ink-2);
	font-weight: 600;
}

/* Decorative punctuation — aria-hidden in the markup, so the AA floor
   does not apply and it can sit a step lighter than the words. */
.article__meta-sep {
	color: var(--color-ink-3);
}

/* The lead is a wrapper div around one or more paragraphs; the type is
   set here and inherited, and the reset's paragraph margin is dropped on
   the last child so it does not stack on the block's own spacing. */
.article__lead {
	max-width: 620px;
	margin: 14px 0 0;
	color: var(--color-ink-2);
	font-size: 16px;
	line-height: 1.6;
}

.article__lead p:last-child {
	margin-bottom: 0;
}

/* General, news and single lead — heavier and in full ink. */
.article__lead--strong {
	color: var(--color-ink);
	font-weight: 600;
	line-height: 1.7;
}

/* Values and calendar lead — one size down. */
.article__lead--sm {
	font-size: 15px;
	line-height: 1.6;
}

/* Category pill and date/updated line above the title. */
.article__topline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 22px;
}

.article__date {
	color: var(--color-ink-2);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
}

/* Policy revision stamp. It also carries .eyebrow--upper, which supplies
   the 1.5px tracking and the uppercasing — only the type and colour
   belong here. */
.article__updated {
	color: var(--color-ink-3);
	font-family: var(--font-body);
	font-size: var(--fs-2xs);
	font-weight: 700;
}

/* -------------------------------------------------------------
   Contact page
   ------------------------------------------------------------- */
.contact-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 240px, 300px );
	gap: 32px;
	align-items: start;
}

.contact-layout__form {
	min-width: 0;
}

.contact-layout .wpforms-container {
	margin: 0;
}

.contact-layout .wpforms-field-label {
	color: var(--color-ink);
	font-family: var(--font-body);
}

.contact-layout .wpforms-field input,
.contact-layout .wpforms-field textarea {
	border: 1.5px solid color-mix( in srgb, var(--color-ink) 18%, transparent );
	border-radius: var(--radius-12);
	font-family: var(--font-body);
}

.contact-layout .wpforms-submit {
	padding: 13px 24px !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	background: var(--accent-dark) !important;
	color: var(--color-surface) !important;
	font-family: var(--font-body) !important;
	font-weight: 700 !important;
}

@media ( max-width: 48em ) {
	.contact-layout {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------
   General — two columns with a sticky section rail
   ------------------------------------------------------------- */
.article__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px;
}

.article__main {
	flex: 1 1 560px;
	min-width: 0;
}

/* The rail follows the reader down a long page. position: sticky is silently
   cancelled by an overflow-x: hidden on any ancestor, so if one is ever
   introduced above .article__layout it has to be overflow-x: clip instead.
   max-height plus its own scrollbar keeps a nine-entry rail from outgrowing
   the viewport, and overscroll-behavior stops that scroll chaining to the page. */
.article__aside {
	position: sticky;
	top: 24px;
	display: flex;
	flex: 0 1 300px;
	flex-direction: column;
	gap: 20px;
	min-width: 260px;
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Reading measure. Icelandic compounds run long, so the cap matters more
   here than the extra column width would gain. */
.article--general .prose {
	max-width: 720px;
}

.article--general .prose p {
	text-wrap: pretty;
}

/* Single column below the layout breakpoint: nothing to stick to, and a
   scrollable rail in normal flow would trap the page scroll. */
@media ( max-width: 899px ) {
	.article__aside {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

/* -------------------------------------------------------------
   Hub — one numbered section per child page
   ------------------------------------------------------------- */
/* The whole component is .doc-section from main.css; only the run of
   sections needs composing. The first rule would double up on the header's
   own spacing and the last would close the list with a stray hairline. */
.article--hub .doc-section:first-child {
	padding-top: 0;
}

.article--hub .doc-section:last-child {
	border-bottom: 0;
}

/* The whole section is the hit area. The title's own anchor is stretched over
   it with an overlay pseudo element rather than a click handler on the block,
   so the destination stays a real link: middle click, ctrl click and the
   screen reader's link list all keep working. ::after is free here — the one
   .link-arrow owns is its arrow glyph, which is why the overlay hangs off the
   title instead. The tint sits on a ::before behind the content; the two real
   children stay unpositioned so the overlay still resolves to the section. */
.article--hub .doc-section {
	position: relative;
}

.article--hub .doc-section::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 calc( var(--space-md) * -1 );
	border-radius: var(--radius-12);
	background: var(--article-accent-soft);
	opacity: 0;
	transition: opacity .15s ease;
}

.article--hub .doc-section:hover::before,
.article--hub .doc-section:focus-within::before {
	opacity: 1;
}

/* The title is a link, so it has to opt out of the global anchor colour and
   read as a heading first. */
.article--hub .doc-section__title a {
	color: inherit;
	text-decoration: none;
}

.article--hub .doc-section__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Driven from the section, not the anchor: pointing anywhere on the card is
   what follows the link, so the affordance has to answer the same gesture. */
.article--hub .doc-section:hover .doc-section__title a,
.article--hub .doc-section:focus-within .doc-section__title a {
	color: var(--article-accent-dark);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.article--hub .doc-section__body {
	text-wrap: pretty;
}

/* Lifted clear of the title's overlay so it keeps a hit area of its own —
   the same destination, but a control the reader can still aim at. */
.article--hub .link-arrow {
	position: relative;
	margin-top: 10px;
	color: var(--article-link);
	font-size: var(--fs-sm);
}

.article--hub .doc-section:hover .link-arrow,
.article--hub .doc-section:focus-within .link-arrow,
.article--hub .link-arrow:hover,
.article--hub .link-arrow:focus {
	color: var(--article-accent-dark);
}

.article--hub .doc-section:hover .link-arrow::after,
.article--hub .doc-section:focus-within .link-arrow::after {
	transform: translateX( 3px );
}

/* The number gutter is the same 56px the numbered prose uses; below the
   layout breakpoint it collapses so the copy keeps its measure. */
@media ( max-width: 600px ) {
	.article--hub .doc-section {
		gap: var(--space-sm);
	}

	.article--hub .doc-section__num {
		min-width: 40px;
		font-size: 26px;
	}
}

/* -------------------------------------------------------------
   Policy — table of contents and numbered sections
   ------------------------------------------------------------- */
.article--policy .toc {
	margin: 0 0 8px;
}

.prose--numbered {
	counter-reset: arnarskoli-section;
}

.prose--numbered > h2 {
	display: flex;
	align-items: baseline;
	gap: 24px;
	margin: 0;
	padding: 32px 0 10px;
	scroll-margin-top: 90px;
}

.prose--numbered > h2::before {
	counter-increment: arnarskoli-section;
	content: counter( arnarskoli-section, decimal-leading-zero );
	flex: none;
	min-width: 56px;
	color: var(--sage);
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	opacity: .55;
}

/* Body copy lines up under the heading text, past the number. */
.prose--numbered > *:not( h2 ) {
	max-width: 620px;
	margin-left: 80px;
}

.prose--numbered > h2 + * {
	margin-top: 0;
}

.article--policy .panel-dark {
	margin-top: 32px;
}

@media ( max-width: 600px ) {
	.prose--numbered > h2 {
		gap: 14px;
	}

	.prose--numbered > h2::before {
		min-width: 40px;
		font-size: 26px;
	}

	.prose--numbered > *:not( h2 ) {
		margin-left: 0;
	}
}

/* -------------------------------------------------------------
   News — hero image and back link
   ------------------------------------------------------------- */
/* The design crops the hero to a fixed band rather than letting the
   upload's own ratio set the height. */
.article-news__hero {
	aspect-ratio: 640 / 220;
	margin: 0 0 22px;
	overflow: hidden;
	border-radius: 20px;
}

.article-news__hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	color: var(--gold-link);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
}

/* Same nudge-on-hover as .link-arrow, pointing the other way. */
.article__back-arrow {
	display: inline-block;
	font-size: 15px;
	line-height: 1;
	transition: transform .15s ease;
}

.article__back:hover .article__back-arrow,
.article__back:focus .article__back-arrow {
	transform: translateX( -3px );
}

/* -------------------------------------------------------------
   Values — auto-fit card grid
   ------------------------------------------------------------- */
.values-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 18px;
}

.value-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--teal-soft);
}

.value-card .card__text p:last-child {
	margin-bottom: 0;
}

/* The dot is a size down from the shared card icon, and the design
   cycles it through the three warm accents. */
.value-card .card__icon {
	width: 36px;
	height: 36px;
	background: var(--accent);
}

.value-card:nth-child( 3n + 2 ) .card__icon {
	background: var(--sage);
}

.value-card:nth-child( 3n ) .card__icon {
	background: var(--gold);
}

/* -------------------------------------------------------------
   Calendar — date pill rows
   ------------------------------------------------------------- */
.calendar-list {
	display: flex;
	flex-direction: column;
	padding: 8px;
	border-radius: 20px;
	background: var(--alt-bg);
}

.calendar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--hairline);
}

.calendar-row:last-child {
	border-bottom: 0;
}

.calendar-row__event {
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
}