/**
 * lbs-kos: konurogstjornmal.is's own parts on the LBS Foundation theme. Theme tokens only, no literal
 * colours (CLAUDE.md); the theme's breakpoints.
 */

/* Manuscript pages ------------------------------------------------------------------------------ */

.lbs-kos-ms {
	clear: both; /* text often ends with a floated picture or logo */
	margin-block: var(--lbs-space-6);
}
.lbs-kos-ms__title {
	margin-block-end: var(--lbs-space-2);
}
.lbs-kos-ms__note {
	color: var(--lbs-muted);
	font-size: var(--lbs-fs-sm);
	margin-block: 0 var(--lbs-space-3);
}
.lbs-kos-ms__pages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lbs-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lbs-kos-ms__page {
	margin: 0;
}
/* A fixed box, so each page is a large target before its picture has loaded (they load as they scroll in). */
.lbs-kos-ms__page a {
	align-items: center;
	block-size: calc(9rem + 2 * var(--lbs-space-1) + 2px);
	border: 1px solid var(--lbs-border);
	display: flex;
	justify-content: center;
	line-height: 0;
	min-inline-size: 5rem;
	padding: var(--lbs-space-1);
}
.lbs-kos-ms__page a:hover {
	border-color: var(--lbs-red);
}
.lbs-kos-ms__page img {
	block-size: 9rem;
	inline-size: auto;
	max-inline-size: 12rem;
	object-fit: contain;
}

/* The viewer window (assets/js/manuscripts.js) */
.lbs-kos-viewer {
	background: var(--lbs-dark);
	block-size: 100dvh;
	border: 0;
	color: var(--lbs-white);
	inline-size: 100vw;
	margin: 0;
	max-block-size: none;
	max-inline-size: none;
	padding: 0;
}
.lbs-kos-viewer[open] {
	display: flex;
	flex-direction: column;
}
.lbs-kos-viewer::backdrop {
	background: var(--lbs-scrim);
}
.lbs-kos-viewer__bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--lbs-space-2);
	padding: var(--lbs-space-2) var(--lbs-gutter);
}
.lbs-kos-viewer__caption {
	flex: 1 1 15rem;
	margin: 0;
}
.lbs-kos-viewer__button {
	background: var(--lbs-white);
	border: 0;
	border-radius: var(--lbs-radius-control);
	color: var(--lbs-text);
	cursor: pointer;
	font: inherit;
	min-block-size: var(--lbs-target);
	padding: 0 var(--lbs-space-3);
}
.lbs-kos-viewer__button:hover:not(:disabled) {
	background: var(--lbs-border);
}
.lbs-kos-viewer__button:focus-visible {
	outline: 3px solid var(--lbs-focus);
	outline-offset: 2px;
}
.lbs-kos-viewer__button:disabled {
	background: var(--lbs-disabled-surface);
	color: var(--lbs-disabled-text);
	cursor: default;
}
.lbs-kos-viewer__frame {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	min-block-size: 0;
	padding: 0 var(--lbs-gutter) var(--lbs-space-3);
}
.lbs-kos-viewer__img {
	max-block-size: 100%;
	max-inline-size: 100%;
	object-fit: contain;
}

/* Events and people (inc/views.php) --------------------------------------------------------------- */

/* Pictures beside the text (the 2015 texts' left and right pictures, a person's portrait): headings start
   below them. kos only, by Kristinn's choice (review N3, 2026-10-05); that a picture starts below the one
   before it on its side is now the theme's rule. */
.entry-content > :is(h2, h3, h4) {
	clear: both;
}

/* The date under an event's title; a person's life dates. */
.lbs-kos-date {
	color: var(--lbs-muted);
	font-size: var(--lbs-fs-lg);
	margin-block: calc(-1 * var(--lbs-space-3)) var(--lbs-space-5);
}
.lbs-kos-related {
	clear: both;
	margin-block-start: var(--lbs-space-7);
}
.lbs-kos-events {
	list-style: none;
	padding: 0;
}
.lbs-kos-events li {
	margin-block-end: var(--lbs-space-2);
}
.lbs-kos-events__date {
	color: var(--lbs-muted);
	display: block;
	font-size: var(--lbs-fs-sm);
}

/* History, /atburdir/ (inc/history.php, templates/history.php) ------------------------------------ */

.lbs-kos-lead {
	font-size: var(--lbs-fs-lg);
	line-height: var(--lbs-lh-lead);
}
.lbs-kos-period {
	margin-block-start: var(--lbs-space-7);
}
.lbs-kos-period__years {
	color: var(--lbs-muted);
	font-size: var(--lbs-fs-md);
	font-weight: normal;
	white-space: nowrap;
}
.lbs-kos-events li[id] {
	scroll-margin-block-start: var(--lbs-space-5);
}
.lbs-kos-history__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lbs-space-4);
	list-style: none;
	padding: 0;
}

/* The timeline of decades. Narrow screens: a wrapping row of decades, each with its dots. */
.lbs-kos-timeline {
	margin-block: var(--lbs-space-5) var(--lbs-space-6);
}
.lbs-kos-timeline ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lbs-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lbs-kos-timeline li {
	margin: 0;
}
.lbs-kos-timeline a,
.lbs-kos-timeline__empty {
	align-items: center;
	border: 1px solid var(--lbs-border);
	border-radius: var(--lbs-radius-control);
	display: flex;
	gap: var(--lbs-space-1);
	min-block-size: var(--lbs-target);
	padding: 0 var(--lbs-space-2);
	text-decoration: none;
}
.lbs-kos-timeline a:hover {
	border-color: var(--lbs-red);
}
.lbs-kos-timeline a:hover .lbs-kos-timeline__decade {
	text-decoration: underline;
}
.lbs-kos-timeline__empty {
	color: var(--lbs-muted);
}
.lbs-kos-timeline__decade {
	font-size: var(--lbs-fs-sm);
	order: -1;
}
.lbs-kos-timeline__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	max-inline-size: 4.5rem;
}
.lbs-kos-timeline__dots span {
	background: var(--lbs-red);
	block-size: 0.4rem;
	border-radius: 50%;
	inline-size: 0.4rem;
}

/* Wide screens: one line through the decades, the events as dots stacked above each decade. */
@media (min-width: 992px) {
	.lbs-kos-timeline ol {
		align-items: end;
		display: grid;
		gap: 0;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
	}
	.lbs-kos-timeline a,
	.lbs-kos-timeline__empty {
		border: 0;
		border-radius: 0;
		flex-direction: column;
		gap: var(--lbs-space-1);
		justify-content: flex-end;
		padding: var(--lbs-space-1) 0 0;
	}
	.lbs-kos-timeline__decade {
		border-block-start: 2px solid var(--lbs-border-strong);
		display: block;
		font-size: var(--lbs-fs-xs);
		inline-size: 100%;
		order: 1;
		padding-block-start: var(--lbs-space-1);
		text-align: center;
	}
	.lbs-kos-timeline a:hover .lbs-kos-timeline__decade {
		border-block-start-color: var(--lbs-red);
	}
	.lbs-kos-timeline__dots {
		flex-direction: column-reverse;
		flex-wrap: nowrap;
		max-inline-size: none;
	}
	.lbs-kos-timeline__dots span {
		block-size: 0.5rem;
		inline-size: 0.5rem;
	}
}

/* The interactive timeline (inc/timeline.php, assets/js/timeline.js): drawn by the script inside .lbs-kos-tl,
   which holds the timeline of decades above until then. -------------------------------------------------- */

.lbs-kos-tl {
	margin-block: var(--lbs-space-5) var(--lbs-space-6);
}
.lbs-kos-tl__skip:not(:focus) {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}
.lbs-kos-tl__skip:focus {
	display: inline-block;
	margin-block-end: var(--lbs-space-2);
}
.lbs-kos-tl__bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--lbs-space-2) var(--lbs-space-4);
	justify-content: space-between;
	margin-block-end: var(--lbs-space-3);
}
.lbs-kos-tl__person {
	margin: 0;
}
.lbs-kos-tl__person a {
	margin-inline-start: var(--lbs-space-2);
}
.lbs-kos-tl__zoom {
	display: flex;
	gap: var(--lbs-space-2);
	margin-inline-start: auto;
}
.lbs-kos-tl__zoom button {
	background: var(--lbs-white);
	border: 1px solid var(--lbs-border-strong);
	border-radius: var(--lbs-radius-control);
	color: var(--lbs-text);
	cursor: pointer;
	font: inherit;
	font-size: var(--lbs-fs-sm);
	min-block-size: var(--lbs-target);
	padding: 0 var(--lbs-space-3);
}
.lbs-kos-tl__zoom button:hover {
	border-color: var(--lbs-red);
	text-decoration: underline;
}
.lbs-kos-tl__zoom button[aria-pressed="true"] {
	background: var(--lbs-dark);
	border-color: var(--lbs-dark);
	color: var(--lbs-white);
}

/* The strip scrolls sideways; while it fits (the whole history), the marks' names may reach outside it. */
.lbs-kos-tl__view {
	overflow-x: auto;
	overflow-y: hidden;
	padding-block-end: var(--lbs-space-2);
}
.lbs-kos-tl__view.is-fit {
	overflow: visible;
}
.lbs-kos-tl__view:not(.is-fit) {
	cursor: grab;
}
.lbs-kos-tl__view.is-dragging {
	cursor: grabbing;
	user-select: none;
}
.lbs-kos-tl__canvas {
	position: relative;
}
.lbs-kos-tl__probe { /* tells the script when the text size changes */
	font-size: var(--lbs-fs-sm);
	position: absolute;
	visibility: hidden;
}

/* The years. */
.lbs-kos-tl__axis {
	block-size: 2rem;
	border-block-end: 1px solid var(--lbs-text);
	position: relative;
}
.lbs-kos-tl__tick {
	block-size: 0.375rem;
	border-inline-start: 1px solid var(--lbs-border-strong);
	inset-block-end: 0;
	position: absolute;
}
.lbs-kos-tl__tick.is-label {
	block-size: 0.625rem;
	border-color: var(--lbs-text);
}
.lbs-kos-tl__year {
	font-size: var(--lbs-fs-xs);
	inset-block-end: 0.75rem;
	line-height: 1;
	position: absolute;
	transform: translateX(-50%);
}

/* The events: in rows under the axis, each with a line up to its date. */
.lbs-kos-tl__events {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
.lbs-kos-tl__event {
	inset-block-start: calc(var(--row) * var(--row-height) + 0.375rem);
	margin: 0;
	position: absolute;
}
.lbs-kos-tl__event:not(:has(.lbs-kos-tl__mark))::before {
	block-size: calc(var(--row) * var(--row-height) + 0.375rem);
	border-inline-start: 1px solid var(--lbs-border-strong);
	content: "";
	inset-block-end: 100%;
	inset-inline-start: 4px;
	position: absolute;
}
/* A name covers the lines of the events after it (lines are drawn under every name). */
.lbs-kos-tl__name {
	background: var(--lbs-panel);
	border: 1px solid var(--lbs-border-soft);
	border-radius: var(--lbs-radius-control);
	color: var(--lbs-text);
	display: block;
	font-size: var(--lbs-fs-sm);
	line-height: 1.625rem;
	padding: 0 var(--lbs-space-2);
	position: relative;
	text-decoration: none;
	white-space: nowrap;
	z-index: 1;
}
.lbs-kos-tl__name:hover {
	border-color: var(--lbs-red);
	text-decoration: underline;
}
.lbs-kos-tl__name[aria-current] {
	background: var(--lbs-red);
	border-color: var(--lbs-red);
	color: var(--lbs-white);
	font-weight: 500;
}

/* The whole history: a mark per event (a 26px target), its name on hover or focus. */
.lbs-kos-tl__mark {
	block-size: 26px;
	display: block;
	inline-size: 26px;
	position: relative;
}
.lbs-kos-tl__mark::before {
	background: var(--lbs-dark);
	block-size: 12px;
	border-radius: 50%;
	content: "";
	inline-size: 12px;
	inset: 7px;
	position: absolute;
}
.lbs-kos-tl__mark:hover::before,
.lbs-kos-tl__mark[aria-current]::before {
	background: var(--lbs-red);
}
.lbs-kos-tl__mark[aria-current]::before {
	block-size: 16px;
	inline-size: 16px;
	inset: 5px;
}
.lbs-kos-tl__tip {
	background: var(--lbs-dark);
	border-radius: var(--lbs-radius-control);
	color: var(--lbs-white);
	display: none;
	font-size: var(--lbs-fs-sm);
	inset-block-start: 100%;
	inset-inline-start: 0;
	line-height: var(--lbs-lh-tight);
	padding: var(--lbs-space-1) var(--lbs-space-2);
	position: absolute;
	white-space: nowrap;
	z-index: 2;
}
.lbs-kos-tl__tip span {
	display: block;
	font-size: var(--lbs-fs-xs);
}
.is-end > .lbs-kos-tl__mark .lbs-kos-tl__tip {
	inset-inline: auto 0;
}
.lbs-kos-tl__mark:hover .lbs-kos-tl__tip,
.lbs-kos-tl__mark:focus-visible .lbs-kos-tl__tip {
	display: block;
}
.lbs-kos-tl.is-quiet .lbs-kos-tl__tip {
	display: none;
}

/* The periods, under the events; a period's name stays in view while its band scrolls by. */
.lbs-kos-tl__periods {
	block-size: 1.75rem;
	margin-block-start: var(--lbs-space-1);
	position: relative;
}
.lbs-kos-tl__period {
	background: var(--lbs-panel);
	block-size: 100%;
	border-inline-start: 2px solid var(--lbs-red);
	font-size: var(--lbs-fs-xs);
	line-height: 1.75rem;
	position: absolute;
	white-space: nowrap;
}
.lbs-kos-tl__period span {
	inset-inline-start: 0;
	padding-inline: var(--lbs-space-2);
	position: sticky;
}

/* Reading lists (inc/reading-lists.php) ----------------------------------------------------------- */

.lbs-kos-lists__nav ul,
.lbs-kos-lists__subjects ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lbs-space-2);
	list-style: none;
	margin: 0 0 var(--lbs-space-4);
	padding: 0;
}
.lbs-kos-lists__nav li,
.lbs-kos-lists__subjects li {
	margin: 0;
}
.lbs-kos-lists__nav a,
.lbs-kos-lists__subjects a {
	align-items: center;
	border: 1px solid var(--lbs-border-strong);
	border-radius: var(--lbs-radius-control);
	display: inline-flex;
	min-block-size: var(--lbs-target);
	padding: 0 var(--lbs-space-3);
	text-decoration: none;
}
.lbs-kos-lists__subjects a {
	font-size: var(--lbs-fs-sm);
	min-block-size: var(--lbs-target-small);
}
.lbs-kos-lists__nav a:hover,
.lbs-kos-lists__subjects a:hover {
	border-color: var(--lbs-red);
	text-decoration: underline;
}
.lbs-kos-lists__nav a[aria-current],
.lbs-kos-lists__subjects a[aria-current] {
	background: var(--lbs-dark);
	border-color: var(--lbs-dark);
	color: var(--lbs-white);
}
.lbs-kos-lists__search {
	margin-block-end: var(--lbs-space-4);
	max-inline-size: var(--lbs-content);
}
.lbs-kos-lists__count {
	color: var(--lbs-muted);
}
.lbs-kos-lists__table caption {
	caption-side: top;
	font-weight: bold;
	text-align: start;
}
.lbs-kos-lists__table td:last-child,
.lbs-kos-lists__table th:last-child {
	white-space: nowrap;
}

/* Petitions map (inc/map.php) --------------------------------------------------------------------- */

.lbs-kos-map__text {
	max-inline-size: var(--lbs-content);
}
.lbs-kos-map__figure {
	margin-block: var(--lbs-space-5);
}
.lbs-kos-map__figure svg {
	block-size: auto;
	display: block;
	inline-size: 100%;
}
.lbs-kos-map__land {
	fill: var(--lbs-panel);
	stroke: var(--lbs-border-strong);
	stroke-width: 1.5;
}
.lbs-kos-map__figure circle {
	fill: var(--lbs-red);
	stroke: var(--lbs-white);
	stroke-width: 2;
}
.lbs-kos-map__figure text {
	fill: var(--lbs-white);
	font-family: var(--lbs-font);
	font-size: 22px;
	font-weight: bold;
	pointer-events: none;
	text-anchor: middle;
}
.lbs-kos-map__figure a {
	text-decoration: none;
}
.lbs-kos-map__figure a:hover circle {
	fill: var(--lbs-red-dark);
}
.lbs-kos-map__figure a.is-current circle {
	fill: var(--lbs-dark);
}
@media (max-width: 575.98px) {
	.lbs-kos-map__figure text {
		display: none;
	}
}
.lbs-kos-map__table {
	max-inline-size: var(--lbs-content);
}
.lbs-kos-map__table caption {
	caption-side: top;
	font-weight: bold;
	text-align: start;
}
.lbs-kos-map__table td {
	font-variant-numeric: tabular-nums;
	text-align: end;
}
.lbs-kos-map__table tr.is-current {
	background: var(--lbs-panel);
}
.lbs-kos-map__district,
.lbs-kos-map .lbs-kos-lists__nav {
	scroll-margin-block-start: var(--lbs-space-5);
}

/* People, /flokkur/brautrydjendur/ (inc/people.php), and the same cards made of blocks (a Group
   "lbs-kos-people" of Groups "lbs-kos-person-card": Image, Heading with the link, Paragraph). ------------- */

.lbs-kos-people {
	display: grid;
	gap: var(--lbs-space-4);
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	list-style: none;
	margin-block: var(--lbs-space-5);
	padding: 0;
}
.lbs-kos-person-card {
	border: 1px solid var(--lbs-border);
	margin: 0;
	padding: var(--lbs-space-3);
	position: relative;
}
.lbs-kos-person-card:hover {
	border-color: var(--lbs-red);
}
.lbs-kos-person-card:focus-within {
	outline: 3px solid var(--lbs-focus);
	outline-offset: 2px;
}
.lbs-kos-person-card__img,
.lbs-kos-person-card .wp-block-image img {
	aspect-ratio: 1;
	background: var(--lbs-panel);
	block-size: auto;
	display: block;
	inline-size: 100%;
	object-fit: cover;
	object-position: top;
}
.lbs-kos-person-card__name {
	font-size: var(--lbs-fs-md);
	line-height: var(--lbs-lh-tight);
	margin: var(--lbs-space-2) 0 var(--lbs-space-1);
}
.lbs-kos-person-card__name a {
	text-decoration: none;
}
/* The name is the card's one link; it covers the whole card. A card with another link (e.g. "Nánar á
   vef Alþingis") is not a link card: its links stay ordinary links. */
.lbs-kos-person-card:has(p a) .lbs-kos-person-card__name a::after {
	content: none;
}
.lbs-kos-person-card__name a::after {
	content: "";
	inset: 0;
	position: absolute;
}
.lbs-kos-person-card__name a:focus-visible {
	outline: none;
}
.lbs-kos-person-card:hover .lbs-kos-person-card__name a {
	color: var(--lbs-red);
	text-decoration: underline;
}
.lbs-kos-person-card__life {
	color: var(--lbs-muted);
	font-size: var(--lbs-fs-xs);
	margin: 0;
}

.wp-block-group.lbs-kos-people > * {
	margin: 0; /* the grid's gap spaces the cards */
}
.lbs-kos-person-card .wp-block-image {
	margin: 0;
}
.lbs-kos-person-card p {
	font-size: var(--lbs-fs-sm);
	margin: 0;
}