/*
 * 123skóli theme styles.
 *
 * Light refresh of the original 123skoli.is look: vivid azure canvas,
 * white 1200px sheet, two tier header (white main row + full width nav
 * band), uppercase two tone slab section headings with a green accent,
 * flat hairline cards with red titles, yellow Bokhladan band and a light
 * grey boxed footer with a slim dark bottom bar.
 *
 * Shared component classes: .skoli-card, .skoli-chip, .skoli-btn,
 * .skoli-btn-secondary, .skoli-section-header, .skoli-badge-nytt,
 * .skoli-external, .screen-reader-text.
 *
 * Mobile first. No build step. No em dashes.
 */

/* ------------------------------------------------------------------ */
/* Global reset: border-box everywhere so padding and borders never    */
/* push a fixed-width control (e.g. .skoli-btn) past its container.     */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Custom properties (fallbacks keep the theme working standalone)     */
/* ------------------------------------------------------------------ */

:root {
	--skoli-color-canvas: var(--wp--preset--color--canvas-blue, #0d9bfa);
	--skoli-color-sheet: var(--wp--preset--color--sheet-white, #ffffff);
	--skoli-color-primary: var(--wp--preset--color--primary, #c83a3a);
	--skoli-color-primary-dark: var(--wp--preset--color--primary-dark, #a93131);
	--skoli-color-secondary: var(--wp--preset--color--secondary, #7db641);
	--skoli-color-secondary-dark: var(--wp--preset--color--secondary-dark, #71a63a);
	--skoli-color-yellow: var(--wp--preset--color--accent-yellow, #f7d84b);
	--skoli-color-n100: var(--wp--preset--color--neutral-100, #f6f4f1);
	--skoli-color-n200: var(--wp--preset--color--neutral-200, #e7e3de);
	--skoli-color-n400: var(--wp--preset--color--neutral-400, #b3ada5);
	--skoli-color-n600: var(--wp--preset--color--neutral-600, #6b645c);
	--skoli-color-n900: var(--wp--preset--color--neutral-900, #2e2b28);
	--skoli-font-heading: var(--wp--preset--font-family--heading, "Roboto Slab", Georgia, serif);
	--skoli-font-body: var(--wp--preset--font-family--body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--skoli-radius-s: 4px;
	--skoli-radius-m: 4px;
	--skoli-shadow-card-hover: 0 2px 4px rgba(46, 43, 40, 0.08), 0 8px 20px rgba(46, 43, 40, 0.12);
	--skoli-shadow-sheet: 0 0 44px rgba(9, 60, 92, 0.28);
	--skoli-focus-color: #1d5c8c;
	--skoli-sheet-max: 1200px;
	--skoli-sheet-pad: clamp(1rem, 3vw, 3rem);
}

/* ------------------------------------------------------------------ */
/* Base layout: vivid azure canvas, white sheet                        */
/* ------------------------------------------------------------------ */

body {
	background-color: var(--skoli-color-canvas);
	/* Sampled from the original site flanks: azure left, cyan right,
	   slight brightening downwards. */
	background-image: linear-gradient(115deg, #0c8efe 0%, #0da9ff 55%, #0fceff 100%);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Header, sheet and footer sit flush against each other. */
body .wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* The white content sheet that the blue canvas flanks.
   .skoli-catalog-page is the catalog templates' main wrapper and
   gets the same treatment. */
.skoli-sheet,
.skoli-catalog-page {
	background: var(--skoli-color-sheet);
	width: 100%;
	max-width: var(--skoli-sheet-max);
	margin-inline: auto;
	padding: clamp(1.5rem, 3vw, 2.5rem) var(--skoli-sheet-pad) clamp(2.5rem, 5vw, 4rem);
	box-shadow: var(--skoli-shadow-sheet);
	flex: 1 0 auto;
}

/* ------------------------------------------------------------------ */
/* Accessibility helpers                                               */
/* ------------------------------------------------------------------ */

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

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--skoli-focus-color);
	outline-offset: 2px;
}

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

.skoli-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: var(--skoli-radius-s);
	background: var(--skoli-color-primary);
	color: #ffffff;
	font-family: var(--skoli-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.skoli-btn:hover,
.skoli-btn:active {
	background: var(--skoli-color-primary-dark);
	color: #ffffff;
}

/* Green secondary: dark text, white text on this green fails AA. */
.skoli-btn-secondary {
	background: var(--skoli-color-secondary);
	color: var(--skoli-color-n900);
}

.skoli-btn-secondary:hover,
.skoli-btn-secondary:active {
	background: var(--skoli-color-secondary-dark);
	color: var(--skoli-color-n900);
}

/* ------------------------------------------------------------------ */
/* Cards: flat, hairline border, tiny radius, red titles               */
/* ------------------------------------------------------------------ */

.skoli-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--skoli-color-sheet);
	border: 1px solid var(--skoli-color-n200);
	border-radius: var(--skoli-radius-m);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.skoli-card:hover,
.skoli-card:focus-within {
	border-color: var(--skoli-color-n400);
	box-shadow: var(--skoli-shadow-card-hover);
}

.skoli-card img {
	display: block;
	width: 100%;
	height: auto;
}

.skoli-card__grid .skoli-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.5rem;
	padding: 1rem 1.125rem 1.25rem;
}

.skoli-card :is(h2, h3, .wp-block-post-title) {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.skoli-card :is(h2, h3, .wp-block-post-title) a {
	color: var(--skoli-color-primary);
	font-weight: 700;
	text-decoration: none;
}

.skoli-card :is(h2, h3, .wp-block-post-title) a:hover {
	color: var(--skoli-color-primary-dark);
	text-decoration: underline;
}

.skoli-card__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	gap: 1.5rem;
}

/* NÝTT: red banner strip across the top of a card or gallery image.
   The parent media element needs position: relative. */
.skoli-badge-nytt {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: block;
	padding: 0.3125rem 0;
	background: var(--skoli-color-primary);
	color: #ffffff;
	font-family: var(--skoli-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Chips                                                               */
/* ------------------------------------------------------------------ */

.skoli-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.25rem;
	padding: 0.375rem 0.875rem;
	background: var(--skoli-color-n100);
	border: 1px solid var(--skoli-color-n200);
	border-radius: 999px;
	color: var(--skoli-color-n900);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.skoli-chip:hover {
	background: var(--skoli-color-sheet);
	border-color: var(--skoli-color-primary);
	color: var(--skoli-color-primary);
}

.skoli-chip.is-active,
.skoli-chip[aria-pressed="true"],
.skoli-chip[aria-current] {
	background: var(--skoli-color-primary);
	border-color: var(--skoli-color-primary);
	color: #ffffff;
}

.skoli-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Námsgrein chips (front page): white, hairline border, red text,
   red fill with white text on hover. */
.skoli-chip-grein {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.15rem;
	background: var(--skoli-color-sheet);
	border: 1px solid var(--skoli-color-n200);
	border-radius: var(--skoli-radius-s);
	color: var(--skoli-color-primary);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.skoli-chip-grein:hover,
.skoli-chip-grein:active {
	background: var(--skoli-color-primary);
	border-color: var(--skoli-color-primary);
	color: #ffffff;
}

.skoli-chip-grein--solid {
	background: var(--skoli-color-primary);
	border-color: var(--skoli-color-primary);
	color: #ffffff;
}

.skoli-chip-grein--solid:hover,
.skoli-chip-grein--solid:active {
	background: var(--skoli-color-primary-dark);
	border-color: var(--skoli-color-primary-dark);
	color: #ffffff;
}

@media (pointer: coarse) {
	.skoli-chip {
		min-height: 2.75rem;
	}
}

/* ------------------------------------------------------------------ */
/* Section headings: uppercase slab, two tone, green underline accent  */
/* ------------------------------------------------------------------ */

.skoli-section-header {
	position: relative;
	margin: 0 0 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--skoli-color-n200);
	font-family: var(--skoli-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--skoli-color-n900);
}

/* First word red, remainder near black (original two tone language). */
.skoli-section-header .skoli-section-header__lead {
	color: var(--skoli-color-primary);
}

.skoli-section-header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 60px;
	height: 3px;
	background: var(--skoli-color-secondary);
}

/* ------------------------------------------------------------------ */
/* Catalog page titles (archive + taxonomy): hairline + green accent   */
/* ------------------------------------------------------------------ */

.skoli-page-title :is(h1, .wp-block-query-title) {
	position: relative;
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--skoli-color-n200);
	font-size: var(--wp--preset--font-size--x-large, 1.875rem);
}

.skoli-page-title :is(h1, .wp-block-query-title)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 60px;
	height: 3px;
	background: var(--skoli-color-secondary);
}

/* ------------------------------------------------------------------ */
/* External link marker (BÓKHLAÐAN and friends)                        */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Header, tier one: white main row (logo, search, login)              */
/* ------------------------------------------------------------------ */

.skoli-header {
	background: var(--skoli-color-sheet);
}

.skoli-header-main .skoli-header-inner {
	max-width: var(--skoli-sheet-max);
	margin-inline: auto;
	padding: 0.875rem 1rem;
}

.skoli-logo,
.skoli-logo a {
	font-family: var(--skoli-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--skoli-color-primary);
	text-decoration: none;
	margin: 0;
}

.skoli-logo a:hover {
	color: var(--skoli-color-primary-dark);
}

.skoli-logo--img {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.skoli-logo--img img {
	display: block;
	height: 56px;
	width: auto;
}

/* Search + login + hamburger cluster. */
.skoli-header-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	flex: 1 1 auto;
	justify-content: flex-end;
}

/* Compact search form (header, 404): square field + red button. */
.skoli-search {
	display: flex;
	align-items: stretch;
}

.skoli-search input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--skoli-color-n600);
	border-right: none;
	border-radius: var(--skoli-radius-s) 0 0 var(--skoli-radius-s);
	background: var(--skoli-color-sheet);
	color: var(--skoli-color-n900);
	font-family: var(--skoli-font-body);
	font-size: 0.9375rem;
}

.skoli-search input[type="search"]::placeholder {
	color: var(--skoli-color-n600);
}

.skoli-search .skoli-search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--skoli-color-primary);
	border-radius: 0 var(--skoli-radius-s) var(--skoli-radius-s) 0;
	background: var(--skoli-color-primary);
	color: #ffffff;
	font-family: var(--skoli-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.skoli-search .skoli-search-submit:hover {
	background: var(--skoli-color-primary-dark);
	border-color: var(--skoli-color-primary-dark);
	color: #ffffff;
}

/* Hamburger, visible on small screens only. */
.skoli-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem;
	background: transparent;
	border: 1px solid var(--skoli-color-n200);
	border-radius: var(--skoli-radius-s);
	color: var(--skoli-color-n900);
	cursor: pointer;
}

.skoli-nav-toggle:hover {
	border-color: var(--skoli-color-n600);
}

.skoli-nav-toggle[aria-expanded="true"] {
	background: var(--skoli-color-n100);
}

/* Mobile order: login + hamburger first, search wraps to its own line. */
.skoli-btn-login {
	order: 1;
}

/* Small logout link next to the Minar sidur button (logged in only). */
.skoli-logout-link {
	order: 1;
	color: var(--skoli-color-n900);
	font-family: var(--skoli-font-body);
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.skoli-logout-link:hover {
	color: var(--skoli-color-primary-dark);
}

.skoli-nav-toggle {
	order: 2;
}

.skoli-search {
	order: 3;
	flex: 1 1 100%;
}

/* ------------------------------------------------------------------ */
/* Header, tier two: full width nav band with hairline borders         */
/* ------------------------------------------------------------------ */

.skoli-navband {
	background: var(--skoli-color-sheet);
	border-top: 1px solid var(--skoli-color-n200);
	border-bottom: 1px solid var(--skoli-color-n200);
}

/* Collapsed into the drawer on small screens (theme.js toggles). */
.skoli-nav {
	display: none;
}

.skoli-nav.is-open {
	display: block;
}

.skoli-nav-links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: var(--skoli-sheet-max);
	margin: 0 auto;
	padding: 0.5rem 1rem;
}

.skoli-nav-links li {
	margin: 0;
}

.skoli-nav-links a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 0.25rem;
	color: var(--skoli-color-n900);
	font-family: var(--skoli-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.skoli-nav-links a:hover,
.skoli-nav-links a[aria-current] {
	color: var(--skoli-color-primary);
}

/* Desktop: nav band always visible, items evenly spaced from the left. */
@media (min-width: 960px) {
	.skoli-nav-toggle {
		display: none;
	}

	.skoli-nav,
	.skoli-nav.is-open {
		display: block;
	}

	.skoli-nav-links {
		flex-direction: row;
		align-items: center;
		gap: 2.25rem;
		padding: 0 1rem;
	}

	.skoli-nav-links a {
		min-height: 0;
		padding: 0.8125rem 0;
	}

	.skoli-search {
		order: 1;
		flex: 0 1 auto;
	}

	.skoli-search input[type="search"] {
		width: 15rem;
		min-height: 2.5rem;
	}

	.skoli-search .skoli-search-submit {
		min-height: 2.5rem;
	}

	.skoli-btn-login {
		order: 2;
		min-height: 2.5rem;
		padding: 0.5rem 1.125rem;
	}

	.skoli-logout-link {
		order: 3;
	}
}

/* ------------------------------------------------------------------ */
/* Two column layout with the Namsgreinar sidebar nav (v3)             */
/*                                                                     */
/* Front page and product page: menu column left (280px from 1024px),  */
/* content right. Below 1024px the menu block itself collapses into a  */
/* details/summary accordion that stacks above the content. The block  */
/* gap of the wrapper is zeroed in the templates, spacing is explicit  */
/* here so grid and stacked modes stay deterministic.                  */
/* ------------------------------------------------------------------ */

.skoli-with-sidebar__nav {
	margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
	.skoli-with-sidebar {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		gap: clamp(1.5rem, 2.5vw, 2.5rem);
		align-items: start;
	}

	.skoli-with-sidebar__nav {
		margin-bottom: 0;
	}

	/* theme.js adds is-sticky only when the whole column fits the viewport.
	   A taller column flows with the page, so nothing hides below the fold. */
	.skoli-with-sidebar__nav.is-sticky {
		position: sticky;
		top: 1rem;
	}
}

/* ------------------------------------------------------------------ */
/* Front page: auglýsingaborðar                                        */
/* ------------------------------------------------------------------ */

.skoli-promo__group + .skoli-promo__group {
	margin-top: 2.5rem;
}

.skoli-promo__grid {
	--skoli-promo-columns: 3;
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin: 1.25rem 0 0;
	padding: 0;
}

@media (min-width: 640px) {
	.skoli-promo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.skoli-promo__grid {
		grid-template-columns: repeat(var(--skoli-promo-columns), minmax(0, 1fr));
	}
}

.skoli-promo__grid li {
	margin: 0;
	min-width: 0;
}

.skoli-promo__tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--skoli-color-sheet);
	border: 1px solid var(--skoli-color-n200);
	border-radius: var(--skoli-radius-s);
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.skoli-promo__tile:hover {
	border-color: var(--skoli-color-n400);
	box-shadow: var(--skoli-shadow-card-hover);
}

.skoli-promo__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--skoli-color-n100);
	border-bottom: 1px solid var(--skoli-color-n200);
	overflow: hidden;
}

/* The whole picture shown inside the 16/9 frame, the same fix the Í
   deiglunni cards got on 2026-09-22. It was object-fit:cover anchored at the
   top, which cut the foot or the sides off every ad that was not already
   16/9. Contain plus padding keeps every tile in a row the same size and
   never crops; an ad of another shape just sits on the grey frame. */
.skoli-promo__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 0.625rem;
	box-sizing: border-box;
}

.skoli-promo__body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1rem 1.125rem 1.25rem;
	text-align: center;
}

.skoli-promo__title {
	font-family: var(--skoli-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	color: var(--skoli-color-primary);
}

.skoli-promo__tile:hover .skoli-promo__title {
	color: var(--skoli-color-primary-dark);
	text-decoration: underline;
}

/* Two lines, then an ellipsis. It used to be white-space: nowrap, which
   cut the description mid-word on the first line however wide the tile
   was. Clamping to a line count instead gives the text room while still
   keeping every tile in a row the same height. */
.skoli-promo__blurb {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-width: 0;
	max-width: 100%;
	color: var(--skoli-color-n600);
	font-size: 0.875rem;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Front page: Efni í deiglunni (core query loop as cards)             */
/* ------------------------------------------------------------------ */

.skoli-featured-efni .wp-block-post-template .wp-block-post {
	display: flex;
	flex-direction: column;
	background: var(--skoli-color-sheet);
	border: 1px solid var(--skoli-color-n200);
	border-radius: var(--skoli-radius-s);
	overflow: hidden;
	padding-bottom: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.skoli-featured-efni .wp-block-post-template .wp-block-post:hover {
	border-color: var(--skoli-color-n400);
	box-shadow: var(--skoli-shadow-card-hover);
}

/* One fixed frame for every card, and the whole page shown inside it.
   The block's own aspectRatio attribute was removed from the pattern on
   2026-09-22: it renders object-fit:cover, which sliced a band out of the
   middle of every A4 worksheet. Half the catalogue is portrait and half is
   landscape, so any frame that fills by cropping loses half the material.
   Contain plus padding is what the catalogue cards and the old site both do:
   nothing is ever cut, and every box stays the same size. */
.skoli-featured-efni .wp-block-post-featured-image {
	margin: 0 0 0.75rem;
	aspect-ratio: 4 / 3;
	background: var(--skoli-color-n100);
	border-bottom: 1px solid var(--skoli-color-n200);
	overflow: hidden;
}

/* The link wrapper is what isLink adds, and it has to carry the height or the
   image inside it has nothing to be 100% of. */
.skoli-featured-efni .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.skoli-featured-efni .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.625rem;
	box-sizing: border-box;
}

.skoli-featured-efni .wp-block-post-title {
	margin: 0 0 0.375rem;
	padding: 0 1rem;
	font-size: 1rem;
	line-height: 1.35;
}

.skoli-featured-efni .wp-block-post-title a {
	color: var(--skoli-color-primary);
	font-weight: 700;
	text-decoration: none;
}

.skoli-featured-efni .wp-block-post-title a:hover {
	color: var(--skoli-color-primary-dark);
	text-decoration: underline;
}

.skoli-featured-efni .skoli-aldursstig-chips {
	margin: auto 0 0;
	padding: 0 1rem;
}

.skoli-featured-efni .skoli-aldursstig-chips a {
	display: inline-block;
	margin: 0 0.25rem 0.25rem 0;
	padding: 0.1875rem 0.5625rem;
	background: var(--skoli-color-n100);
	border: 1px solid var(--skoli-color-n200);
	border-radius: 3px;
	color: var(--skoli-color-n600);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
}

.skoli-featured-efni .skoli-aldursstig-chips a:hover {
	color: var(--skoli-color-primary);
	border-color: var(--skoli-color-primary);
}

/* ------------------------------------------------------------------ */
/* Front page: aldursstig image tiles                                  */
/* ------------------------------------------------------------------ */

.skoli-stig-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding: 0;
}

@media (min-width: 900px) {
	.skoli-stig-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.skoli-stig-grid li {
	margin: 0;
}

.skoli-stig-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--skoli-color-sheet);
	border: 1px solid var(--skoli-color-n200);
	border-radius: var(--skoli-radius-s);
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.skoli-stig-tile:hover {
	border-color: var(--skoli-color-n400);
	box-shadow: var(--skoli-shadow-card-hover);
}

.skoli-stig-tile__media {
	display: block;
	height: 160px;
	background: var(--skoli-color-n100);
	border-bottom: 1px solid var(--skoli-color-n200);
	overflow: hidden;
}

.skoli-stig-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.skoli-stig-tile__label {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	flex: 1;
	justify-content: center;
	padding: 0.875rem 0.75rem 1rem;
	text-align: center;
	font-family: var(--skoli-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--skoli-color-primary);
}

.skoli-stig-tile:hover .skoli-stig-tile__label {
	color: var(--skoli-color-primary-dark);
	text-decoration: underline;
}

.skoli-stig-tile__sub {
	font-family: var(--skoli-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--skoli-color-n600);
	text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Front page: Bókhlaðan yellow band                                   */
/* ------------------------------------------------------------------ */

.skoli-bokhladan {
	background: var(--skoli-color-yellow);
	border-radius: var(--skoli-radius-s);
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
	color: var(--skoli-color-n900);
}

.skoli-bokhladan__heading {
	margin: 0 0 0.75rem;
	font-family: var(--skoli-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Dekkri rauður: #c83a3a nær ekki 4.5:1 á gula fletinum. */
	color: var(--skoli-color-primary-dark);
}

.skoli-bokhladan p {
	color: var(--skoli-color-n900);
}

/* ------------------------------------------------------------------ */
/* Footer: light grey band with boxed columns + slim dark bottom bar   */
/* ------------------------------------------------------------------ */

.skoli-footer {
	background: #efefef;
	color: var(--skoli-color-n900);
}

.skoli-footer-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	max-width: var(--skoli-sheet-max);
	margin-inline: auto;
	padding: clamp(1.75rem, 4vw, 2.75rem) 1rem;
}

@media (min-width: 640px) {
	.skoli-footer-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.skoli-footer-inner {
		grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
	}
}

.skoli-footer-col {
	background: var(--skoli-color-sheet);
	border: 1px solid #dcdcdc;
	border-radius: var(--skoli-radius-s);
	padding: 1.25rem 1.375rem 1.375rem;
}

.skoli-footer h2 {
	margin: 0 0 0.75rem;
	font-family: var(--skoli-font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--skoli-color-primary);
}

.skoli-footer p {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.skoli-footer ul {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.skoli-footer a {
	color: var(--skoli-color-n900);
	text-decoration: none;
}

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

.skoli-footer .skoli-btn-secondary {
	color: var(--skoli-color-n900);
	text-decoration: none;
}

.skoli-footer-brand {
	font-family: var(--skoli-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--skoli-color-n900);
}

.skoli-footer-legal {
	color: var(--skoli-color-n600);
	font-size: 0.875rem;
}

.skoli-footer-bottom {
	background: var(--skoli-color-n900);
	padding: 0.875rem 1rem;
	text-align: center;
}

.skoli-footer-bottom p {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--skoli-color-n200);
}

/* ------------------------------------------------------------------ */
/* Archive fallback grid and pagination                                */
/* ------------------------------------------------------------------ */

.skoli-archive .wp-block-query-pagination {
	margin-top: 2rem;
}

.skoli-archive .wp-block-query-pagination a,
.skoli-archive .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--skoli-color-n200);
	border-radius: var(--skoli-radius-s);
	color: var(--skoli-color-n900);
	text-decoration: none;
}

.skoli-archive .wp-block-query-pagination a:hover {
	border-color: var(--skoli-color-primary);
	color: var(--skoli-color-primary);
}

.skoli-archive .wp-block-query-pagination .page-numbers.current {
	background: var(--skoli-color-primary);
	border-color: var(--skoli-color-primary);
	color: #ffffff;
}

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

.skoli-404 {
	padding-block: clamp(2rem, 6vw, 5rem);
	text-align: center;
}

.skoli-404 .skoli-search {
	max-width: 26rem;
	margin-inline: auto;
}

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

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

/* Gravity Forms, themed to match the site's form language (scoped) */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--preset--color--n200, #ddd);
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
	font: inherit;
}
.gform_wrapper .gfield_label { font-weight: 700; }
.gform_wrapper .gfield_required { color: #c83a3a; }
.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button {
	background: #c83a3a;
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 0.7rem 1.4rem;
	font-weight: 700;
	cursor: pointer;
}
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover { background: #a93131; }
.gform_wrapper .gform_validation_errors,
.gform_wrapper .gfield_validation_message {
	color: #a93131;
	background: #fdf1f1;
	border: 1px solid #e8c9c9;
	border-radius: 4px;
	padding: 0.5rem 0.75rem;
}
.gform_confirmation_message {
	background: #f1f7e8;
	border: 1px solid #7db641;
	border-radius: 4px;
	padding: 1rem 1.25rem;
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Mobile tap targets: on small phones (around 390px) lift the small   */
/* touch controls to a 44px minimum. Scoped to max-width so desktop    */
/* and tablet layouts are untouched (F26).                             */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
	/* Footer quick links. */
	.skoli-footer li a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Featured grid title links. */
	.skoli-featured-efni .wp-block-post-title a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Aldursstig chips under the featured cards. */
	.skoli-aldursstig-chips a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Namsgreinar accordion summary (small-screen sidebar toggle). */
	.skoli-subjects__toggle {
		min-height: 44px;
	}

	/* Postlisti consent checkbox: enlarge the hit area. */
	.skoli-postlisti-consent {
		width: 1.75rem !important;
		height: 1.75rem !important;
	}
}

/* ------------------------------------------------------------------ */
/* Auglýsingaborðar: per-slot variants                                 */
/* The grid rules above are the default. These two slots need to look  */
/* different, and the slot arrives as a modifier class on the wrapper. */
/* ------------------------------------------------------------------ */

/* Neðst: sits outside .skoli-with-sidebar in front-page.html, so it
   already spans the full sheet. It only needs separating from the
   content column above it. */
.skoli-promo__group--nedst {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Hliðarstika: spacing only. The one-column layout is enforced in
   skoli_hopur_settings(), not here, so the admin and the page agree. */
.skoli-promo__group--hlidarstika {
	margin-top: 1.5rem;
}

/* Undir Námsgreinar: fills the gap at the foot of the content column. It
   stays inside that column, so it is narrower than the full-sheet strip
   below it. */
.skoli-promo__group--undir-namsgreinum {
	margin-top: 1.5rem;
}

/* Aðeins mynd, a per-group setting rather than a slot: the card chrome
   comes off and the picture carries the message, the way the old site did
   it. The renderer prints no title or blurb for these groups either. */
.skoli-promo__group--image-only .skoli-promo__tile {
	display: block;
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.skoli-promo__group--image-only .skoli-promo__tile:hover {
	box-shadow: none;
	opacity: 0.92;
}

/* aspect-ratio off and height auto together let a tall poster keep its own
   proportions instead of being cropped into the 16/9 box the grid tiles use. */
.skoli-promo__group--image-only .skoli-promo__media {
	aspect-ratio: auto;
	background: none;
	border-bottom: 0;
}

/* padding 0: the frame padding on the card tiles would otherwise put a gap
   round a picture that has no frame to sit in. */
.skoli-promo__group--image-only .skoli-promo__media img {
	height: auto;
	padding: 0;
	object-fit: contain;
	border-radius: var(--skoli-radius-s);
}

/* ------------------------------------------------------------------ */
/* Modal dialog (póstlisti signup)                                     */
/* Native <dialog>, so the browser supplies the backdrop, Escape and   */
/* the focus trap. Only appearance is set here.                        */
/* ------------------------------------------------------------------ */

.skoli-modal {
	width: min(28rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	color: var(--skoli-color-n900);
	background: var(--skoli-color-sheet);
	border: 0;
	border-radius: var(--skoli-radius-s);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.skoli-modal::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.skoli-modal__inner {
	position: relative;
	padding: clamp(1.25rem, 4vw, 2rem);
}

.skoli-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--skoli-color-n600);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.skoli-modal__close:hover {
	color: var(--skoli-color-n900);
	background: var(--skoli-color-n100);
}

.skoli-modal__title {
	margin: 0 2rem 0.5rem 0;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.skoli-modal__lead {
	margin: 0 0 1.25rem;
	color: var(--skoli-color-n600);
}

/* ------------------------------------------------------------------ */
/* Póstlisti form, shared by the front page section and the modal      */
/* ------------------------------------------------------------------ */

.skoli-postlisti-form {
	max-width: 26rem;
	margin: 1.25rem 0 0;
}

.skoli-modal .skoli-postlisti-form {
	margin-top: 0;
}

.skoli-postlisti-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skoli-postlisti-field {
	margin: 0 0 1rem;
}

.skoli-postlisti-field label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.skoli-postlisti-field input {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 0.75rem;
	font: inherit;
	color: inherit;
	background: #ffffff;
	border: 1px solid var(--skoli-color-n200);
	border-radius: 4px;
}

.skoli-postlisti-consent-row {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 0 0 1.25rem;
}

.skoli-postlisti-consent {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.2rem;
	accent-color: var(--skoli-color-secondary);
}

.skoli-postlisti-consent-row label {
	font-size: 0.95rem;
	line-height: 1.5;
}

.skoli-postlisti-submit {
	margin: 0;
}

.skoli-postlisti-notice {
	max-width: 26rem;
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border-radius: 8px;
	font-weight: 600;
}

.skoli-postlisti-notice--takk {
	color: #1f3306;
	background: #e7f2d8;
	border: 1px solid #7db641;
}

.skoli-postlisti-notice--villa {
	color: #5c1d1d;
	background: #fbeaea;
	border: 1px solid #c83a3a;
	font-weight: 400;
}