/* The institutional header (Vefstaðall 7.1, Kristinn's choices of 2026-10-01).

   One row at every width: the brand on the left (as before, logos unchanged), then the tools: the
   optional search box, the language link and the menu button. All navigation is in the drawer the
   button opens. The row never wraps: when the tools run short of room the search box gives way, then
   the language link, then the button's word (container queries below); what gives way is in the drawer.

   z-index ledger: header 140 · language list 150. The drawer is a popover, above everything. */

.lbs-header {
	position: relative;
	z-index: 140;
	font-size: var(--lbs-fs-sm);
	line-height: var(--lbs-lh-ui);
	background: var(--lbs-white);
	border-bottom: 1px solid var(--lbs-border);
}
.lbs-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--lbs-space-4);
}

/* Brand ---------------------------------------------------------------- */
/* 20px above and below the 48px logos: an 88px row. The brand keeps its width and gives way only when
   even the menu button alone would not fit (the logo beside the wordmark then shrinks, as before). */
.lbs-brand { flex: 0 1 auto; min-width: 0; margin: 20px 0; }
.lbs-brand__link { display: flex; align-items: flex-end; gap: 9px; color: var(--lbs-text); }
.lbs-brand__link:hover { color: var(--lbs-text); }
.lbs-brand__mark { width: auto; height: 48px; color: var(--lbs-red); flex: none; }
.lbs-brand__name {
	font-size: 1.625rem;
	line-height: calc(40 / 26); /* 40px at 26px, as a proportion so it grows with the text */
	font-weight: 500;
	white-space: nowrap;
}
/* Customizer option for long names: two lines set like the library's own wordmark, the second line
   resting on the bottom of the mark's bar (8px above the tip of its tail). 2 x 22 + 4 = the mark's 48px. */
.lbs-brand__name--two-lines { font-size: 1.1875rem; line-height: calc(22 / 19); padding-bottom: 4px; }
.lbs-brand__line { display: block; }
.lbs-brand__wordmark,
.lbs-brand .custom-logo { display: block; width: auto; height: 48px; max-width: none; }
/* Wordmark + the site's own logo or its name, side by side with a hairline between them. */
.lbs-brand--wordmark-custom,
.lbs-brand--wordmark-name { display: flex; align-items: flex-end; }
.lbs-brand--wordmark-custom .custom-logo-link,
.lbs-brand--wordmark-name .lbs-brand__link { margin-left: var(--lbs-space-4); padding-left: var(--lbs-space-4); border-left: 1px solid var(--lbs-border-strong); }
.lbs-brand--wordmark-name .lbs-brand__org { flex: none; }
.lbs-brand--wordmark-name .lbs-brand__link { min-width: 0; min-height: 48px; }
@media (max-width: 575.98px) {
	:is(.lbs-brand--wordmark-custom, .lbs-brand--wordmark-name) :is(.lbs-brand__wordmark, .custom-logo) { height: 32px; }
	.lbs-brand--wordmark-custom .custom-logo-link,
	.lbs-brand--wordmark-name .lbs-brand__link { margin-left: var(--lbs-space-3); padding-left: var(--lbs-space-3); }
	/* The name shrinks with the wordmark, to two thirds. Two lines: 2 x 14.5 + 3 = 32px. */
	.lbs-brand--wordmark-name .lbs-brand__link { min-height: 32px; }
	.lbs-brand--wordmark-name .lbs-brand__name:not(.lbs-brand__name--two-lines) { font-size: 1.0625rem; line-height: calc(27 / 17); }
	.lbs-brand--wordmark-name .lbs-brand__name--two-lines { font-size: 0.8125rem; line-height: calc(14.5 / 13); padding-bottom: 3px; }
}
/* A wide uploaded logo (jh's signature, 5:1) shrinks to the room left beside the menu button instead of
   running under it; the wordmark keeps its size. Both constraints together keep the logo's proportions. */
@media (max-width: 991.98px) {
	.lbs-brand--wordmark-custom .lbs-brand__org { flex: none; }
	.lbs-brand--wordmark-custom .custom-logo-link { flex: 0 1 auto; min-width: 0; }
	.lbs-brand--wordmark-custom .custom-logo { height: auto; max-height: 48px; max-width: 100%; }
}
@media (max-width: 575.98px) {
	.lbs-brand--wordmark-custom .custom-logo { max-height: 32px; }
}

/* Tools: search, language, menu button --------------------------------
   The tools take the room the brand leaves (flex-basis 0) and are measured as a container, so their
   rules below see exactly that room. */
.lbs-header__tools {
	flex: 1 1 0;
	min-width: var(--lbs-target);
	container-type: inline-size;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--lbs-space-3);
}
/* The header's search box: field and button in one row, never stacked (it gives way instead, below).
   No room for its label above it: the label is read out, and the button's word names the field
   (WCAG technique G167). */
.lbs-header__tools .lbs-search-form { flex: none; width: 18rem; } /* control corners: the default since 2026-10-15 */
.lbs-header__tools .lbs-search { flex-direction: row; }
.lbs-header__tools .lbs-search__input { padding: 0 var(--lbs-space-3); }
.lbs-header__tools .lbs-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Language: one link to the other language, its code visible and its name read out. */
.lbs-lang-link {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--lbs-target);
	min-height: var(--lbs-target);
	font-weight: 700;
	color: var(--lbs-text);
	text-decoration: none;
}
.lbs-lang-link:hover { color: var(--lbs-red); text-decoration: underline; text-underline-offset: 0.18em; }

/* Three or more languages: the current code opens a short list. */
.lbs-lang { position: relative; flex: none; }
.lbs-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--lbs-space-2);
	min-height: var(--lbs-target);
	padding: 0 var(--lbs-space-3);
	border: 1px solid var(--lbs-border-strong);
	border-radius: var(--lbs-radius-control);
	background: var(--lbs-white);
	color: var(--lbs-text);
	font-weight: 700;
}
.lbs-lang__caret { width: 12px; height: 7px; transition: transform var(--lbs-transition); }
.lbs-lang.is-open .lbs-lang__caret { transform: rotate(180deg); }
.lbs-lang__menu {
	position: absolute;
	z-index: 150;
	top: 100%;
	right: 0;
	min-width: 10rem;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	background: var(--lbs-white);
	border: 1px solid var(--lbs-border);
	box-shadow: 0 4px 10px rgb(0 0 0 / 0.12);
	display: none;
}
.lbs-lang.is-open .lbs-lang__menu { display: block; }
.lbs-lang__menu a { display: flex; align-items: center; min-height: var(--lbs-target); padding: 0 var(--lbs-space-4); color: var(--lbs-text); }

/* The menu button: filled black, a 24px icon and its word (choice C). */
.lbs-menu-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lbs-space-2);
	min-width: var(--lbs-target);
	min-height: var(--lbs-target);
	padding: 0 var(--lbs-space-4);
	border: 1px solid var(--lbs-text);
	border-radius: var(--lbs-radius-control);
	background: var(--lbs-text);
	color: var(--lbs-white);
	font: inherit;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--lbs-transition), color var(--lbs-transition);
}
.lbs-menu-btn .lbs-icon { flex: none; width: 24px; height: 24px; }
.lbs-menu-btn:hover,
.lbs-menu-btn--close { background: var(--lbs-white); color: var(--lbs-text); }
.lbs-menu-btn--close:hover { background: var(--lbs-text); color: var(--lbs-white); }

/* Giving way, in this order; the limits are the widths the items need (rem, so they follow the text
   size). The search box and the language link are in the drawer below 1200px. */
@container (width < 31.25rem) {
	.lbs-header__tools .lbs-search-form { display: none; }
}
@container (width < 12.5rem) {
	.lbs-header__tools :is(.lbs-lang-link, .lbs-lang) { display: none; }
}
@container (width < 8.25rem) {
	.lbs-header__tools .lbs-menu-btn { padding: 0; }
	.lbs-header__tools .lbs-menu-btn__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
/* Browsers without container queries: the plain small-screen rule. */
@supports not (container-type: inline-size) {
	@media (max-width: 575.98px) {
		.lbs-header__tools :is(.lbs-search-form, .lbs-lang-link, .lbs-lang) { display: none; }
	}
}

/* Phones: 32px logos, the 44px button sets the row. */
@media (max-width: 575.98px) {
	.lbs-header__inner { padding-block: var(--lbs-space-3); }
	.lbs-brand { margin: 0; }
}
@media (max-width: 991.98px) {
	/* A long site name wraps inside the brand rather than pushing the tools out. */
	/* At very large text sizes a long word is hyphenated, or broken, rather than run under the tools. */
	.lbs-brand__name { white-space: normal; text-wrap: balance; hyphens: auto; overflow-wrap: anywhere; }
}
@media (max-width: 767.98px) {
	.lbs-brand__name:not(.lbs-brand__name--two-lines) { font-size: 1.5rem; line-height: calc(35 / 24); }
}

/* The drawer (template-parts/header/navigation.php) -------------------
   A popover the window's full height, coming out of the page's right-hand content line rather than the
   window's edge (Kristinn, 2026-10-01): its right edge is one side margin beyond the line where the
   header's menu button ends, so its own close button sits exactly where the menu button is (the header
   does not stay in view when the page is scrolled; at the top of the page the drawer reads as the
   header carrying on). Up to the full page width that line is the window's edge. The rest of the page
   is dimmed; site.js makes it inert while the drawer is open.
   --lbs-drawer-edge: the menu button's distance from the window's right edge, measured by site.js as
   the drawer opens and when the window is resized; the calculation is the fallback. */
:root { --lbs-header-row: 88px; }
@media (max-width: 575.98px) { :root { --lbs-header-row: 68px; } }

.lbs-drawer:popover-open {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0px) max(0px, var(--lbs-drawer-edge, max(var(--lbs-gutter), (100vw - var(--lbs-wide)) / 2)) - var(--lbs-gutter)) 0 auto;
	width: min(var(--lbs-drawer-width), 100%);
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0 0 var(--lbs-space-6);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	border-left: 1px solid var(--lbs-border);
	background: var(--lbs-white);
	color: var(--lbs-text);
	box-shadow: -10px 0 28px rgb(0 0 0 / 0.14);
}
.lbs-drawer::backdrop { background: var(--lbs-scrim); }
/* The page does not scroll behind the open drawer. Where a scrollbar takes up room, site.js keeps that
   room while it is hidden (scrollbar-gutter), so nothing moves; elsewhere nothing needs keeping. */
html:has(.lbs-drawer:popover-open) { overflow: hidden; }
@media (max-width: 575.98px) {
	.lbs-drawer:popover-open { width: 100%; border-left: 0; box-shadow: none; }
}
/* It slides out from behind the content line: moved right by its width and cut off at the line, the two
   in step (the cut leaves room on the left for the shadow). */
@media (prefers-reduced-motion: no-preference) {
	.lbs-drawer:popover-open { clip-path: inset(0 0 0 -40px); }
	.lbs-drawer { transition: translate var(--lbs-transition), clip-path var(--lbs-transition), overlay var(--lbs-transition) allow-discrete, display var(--lbs-transition) allow-discrete; }
	.lbs-drawer:not(:popover-open) { translate: 100% 0; clip-path: inset(0 100% 0 -40px); }
	@starting-style {
		.lbs-drawer:popover-open { translate: 100% 0; clip-path: inset(0 100% 0 -40px); }
	}
}

/* Its first row: the close button where the menu button is (the header's right edge). */
.lbs-drawer__top {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: calc(var(--lbs-header-row) + 1px);
	padding: 0 var(--lbs-gutter) 0 var(--lbs-space-6);
	border-bottom: 1px solid var(--lbs-border);
}

/* The header's search box and language link, for when they have given way in the row. */
.lbs-drawer__tools { display: grid; gap: var(--lbs-space-3); padding: var(--lbs-space-5) var(--lbs-space-6) 0; }
.lbs-drawer__tools .lbs-search-form { max-width: none; }
.lbs-lang-list { margin: 0; padding: 0; list-style: none; }
.lbs-lang-list a { display: inline-flex; align-items: center; min-height: var(--lbs-target); font-weight: 700; color: var(--lbs-text); text-decoration: underline; text-underline-offset: 0.18em; }
@media (min-width: 1200px) {
	.lbs-drawer__tools { display: none; }
}

/* The links: main ones large, their sub-links listed beneath, all visible; the current page has the red
   bar. A site with the page tree instead of a menu lists the first level, and marks the branch. */
.lbs-drawer__nav,
.lbs-drawer__nav ul { margin: 0; padding: 0; list-style: none; }
.lbs-drawer__nav { padding: var(--lbs-space-5) var(--lbs-space-6) 0; }
.lbs-drawer__nav > li + li { margin-top: var(--lbs-space-1); }
.lbs-drawer__nav a {
	display: flex;
	align-items: center;
	padding-left: var(--lbs-space-3);
	border-left: var(--lbs-nav-underline) solid transparent;
	color: var(--lbs-text);
	text-decoration: none;
}
.lbs-drawer__nav > li > a { min-height: var(--lbs-target); font-size: var(--lbs-fs-lg); line-height: var(--lbs-lh-heading); font-weight: 500; }
.lbs-drawer__nav :is(.sub-menu, .children) { margin: 0 0 var(--lbs-space-3) var(--lbs-space-3); }
.lbs-drawer__nav :is(.sub-menu, .children) a { min-height: var(--lbs-space-6); font-size: var(--lbs-fs-sm); }
.lbs-drawer__nav a:hover { color: var(--lbs-red); text-decoration: underline; text-underline-offset: 0.18em; }
.lbs-drawer__nav :is(.current-menu-item, .current_page_item) > a,
.lbs-drawer__nav--top > .current_page_ancestor > a { border-left-color: var(--lbs-red); }
.lbs-drawer__nav :is(.sub-menu, .children) :is(.current-menu-item, .current_page_item) > a { font-weight: 500; }

/* Browsers without popovers (and so without the buttons' behaviour): the drawer's contents are a plain
   list under the header row. */
@supports not selector(:popover-open) {
	.lbs-menu-btn,
	.lbs-drawer__top { display: none; }
	.lbs-drawer { padding-bottom: var(--lbs-space-4); border-top: 1px solid var(--lbs-border); }
}

/* Sub-sites (lbs-core) ------------------------------------------------- */
/* A page marked as a sub-site root gives its descendants their own brand: the header keeps the site's
   variant, and the site's part (logo or name) is replaced by the sub-site's logo, as tall as the
   wordmark, or its name; after the wordmark it sits behind the same hairline as the site's own logo. */
.lbs-brand--subsite { display: flex; align-items: flex-end; }
.lbs-brand--subsite .lbs-brand__logo { display: block; width: auto; height: 48px; max-width: none; }
.lbs-brand--subsite .lbs-brand__org + .lbs-brand__site { margin-left: var(--lbs-space-4); padding-left: var(--lbs-space-4); border-left: 1px solid var(--lbs-border-strong); min-height: 48px; }
@media (max-width: 575.98px) {
	.lbs-brand--subsite .lbs-brand__logo { height: 32px; }
	.lbs-brand--subsite .lbs-brand__org + .lbs-brand__site { margin-left: var(--lbs-space-3); padding-left: var(--lbs-space-3); min-height: 32px; }
}
/* The breadcrumb line: a slim row at the foot of the header, above its hairline. */
.lbs-breadcrumb { font-size: var(--lbs-fs-sm); line-height: var(--lbs-lh-tight); border-top: 1px solid var(--lbs-border); }
.lbs-breadcrumb__list { display: flex; flex-wrap: wrap; gap: 0 var(--lbs-space-2); margin: 0 auto; padding-block: var(--lbs-space-2); list-style: none; }
/* Each item centres its separator, link or current page on one line: the links are 24px tall (target
   size), the current page is not a link, and its text sat 2px higher before. */
.lbs-breadcrumb__list li { display: flex; align-items: center; }
.lbs-breadcrumb__list li + li::before { content: '\203A'; margin-right: var(--lbs-space-2); color: var(--lbs-muted); }
.lbs-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--lbs-target-small); color: var(--lbs-text); text-decoration: none; }
.lbs-breadcrumb a:hover { text-decoration: underline; }
.lbs-breadcrumb [aria-current] { color: var(--lbs-muted); }