/* Forms. Control borders use --lbs-border-strong (3:1 against white, WCAG 1.4.11). */

/* The LBS search box (Vefstaðall 7.4): a label saying where the search looks, then the field and a
   button with the word "Leita" side by side; they stack when the form is narrower than 26rem (a
   container query, so it follows the room the box is given, not the window). Field and button have the
   corners of any other control (3.6), as in the header and the drawer; only the hero search box below is
   fully round (Kristinn, 2026-10-15; until then every main search box was): --lbs-search-r, the control
   corners when not set. The button is the main button (components.css). */
.lbs-search-form {
	container-type: inline-size;
	max-width: var(--lbs-search-width);
}
.lbs-search__label {
	display: block;
	margin-bottom: var(--lbs-space-1);
	font-weight: 700;
}
.lbs-search {
	display: flex;
	gap: var(--lbs-space-2);
}
.lbs-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--lbs-target);
	padding: 0 var(--lbs-space-4);
	border: 1px solid var(--lbs-border-strong);
	border-radius: var(--lbs-search-r, var(--lbs-radius-control));
	background: var(--lbs-white);
	color: var(--lbs-text);
	font-size: var(--lbs-fs-sm);
	appearance: none;
}
.lbs-search__input::placeholder { color: var(--lbs-muted); opacity: 1; }
.lbs-search__button { flex: none; padding-inline: var(--lbs-space-5); border-radius: var(--lbs-search-r, var(--lbs-radius-control)); }
.lbs-search__button .lbs-icon { width: 24px; height: 24px; }
@container (width < 26rem) {
	.lbs-search { flex-direction: column; }
}

/* The search box in a page's opening picture (the signature picture, block or Elementor, and the picture strip):
   larger, with the button inside the round field, as on landsbokasafn.is's front page before the move (Kristinn,
   2026-10-15: every site's hero search; in-text search boxes, the search page, header and drawer keep the look
   above). The label stays above it. The frame is the box's: the field has none, and the button sits flush in its
   right end; one focus ring goes round the whole box when the field has focus (the button keeps its own). The
   theme's form and the core Search block alike. Below 18rem the button goes under the field, still inside the
   box, which then has a control's corners. The corners go through --lbs-search-r, which the field and button
   already read (also in compat-elementor.css, where the other differences are repeated at its weight). A core
   Search block set to "button only" keeps its own look: a box round a lone button would span the column.
   The house box stacks below 26rem; this rule outweighs that one, so the hero stays in a row down to 18rem. */
:is(.lbs-strip__search, div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) :is(.lbs-search, .wp-block-search:not(.wp-block-search__button-only) .wp-block-search__inside-wrapper) {
	--lbs-search-r: var(--lbs-radius-pill);
	flex-direction: row;
	gap: 0;
	padding: 0;
	border: 1px solid var(--lbs-border-strong);
	border-radius: var(--lbs-search-r);
	background: var(--lbs-white);
}
:is(.lbs-strip__search, div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) :is(.lbs-search__input, .wp-block-search__input) {
	height: calc(4rem - 2px);
	padding: 0 var(--lbs-space-5);
	border: 0;
	border-radius: var(--lbs-search-r);
	background: transparent;
	font-size: var(--lbs-fs-md);
}
/* The field's own ring gives way to the box's only where the browser can draw that one (:has). */
@supports selector(:has(a)) {
	:is(.lbs-strip__search, div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) :is(.lbs-search__input, .wp-block-search__input):focus-visible { outline: none; }
	:is(.lbs-strip__search, div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) :is(.lbs-search, .wp-block-search__inside-wrapper):has(:is(.lbs-search__input, .wp-block-search__input):focus-visible) {
		outline: var(--lbs-focus-ring) solid var(--lbs-focus);
		outline-offset: 2px;
	}
}
:is(.lbs-strip__search, div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) :is(.lbs-search__button, .wp-block-search__button) {
	height: calc(4rem - 2px);
	padding-inline: var(--lbs-space-6);
	border-radius: var(--lbs-search-r);
	font-size: var(--lbs-fs-md);
	text-transform: uppercase; /* "LEITA", as on dev1 (Kristinn, 2026-10-15): the hero's button only */
}
@container (width < 18rem) {
	:is(.lbs-strip__search, div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) :is(.lbs-search, .wp-block-search__inside-wrapper) { --lbs-search-r: var(--lbs-radius-control); flex-direction: column; }
	:is(.lbs-strip__search, div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) :is(.lbs-search__button, .wp-block-search__button) { --lbs-search-r: 0 0 calc(var(--lbs-radius-control) - 1px) calc(var(--lbs-radius-control) - 1px); }
}

/* Forms in content (Vefstaðall 7.6), written against plain HTML so that the output of any form tool can
   use it: within the page's text, comment forms, widgets, and anything marked class="lbs-form". All
   without weight (":where"), so that a form tool's own rules win where it has them.
   - Every field has a visible <label> (bold), above the field.
   - A hint (class "lbs-hint") sits between label and field, tied to the field with aria-describedby.
   - An error message (class "lbs-error-message") sits under the hint, starts with "Villa:" and says how
     to put it right; its field has aria-invalid="true" and gets a 2px frame in the error colour. A
     field the browser finds invalid after the visitor has used it (:user-invalid) gets the same frame.
   - Required fields say so in the label's text: "(nauðsynlegt)", or "(valfrjálst)" on the few that are
     not when most are. No asterisks.
   - Checkboxes and radio buttons are the browser's own, in the brand red; related ones are grouped in a
     <fieldset> with a <legend>.
   - class "lbs-field" on a wrapper stacks label, hint, error and field with small steps between. */
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="range"], [type="hidden"]), select, textarea) {
	width: 100%;
	max-width: 100%;
	min-height: var(--lbs-target);
	padding: var(--lbs-space-2) 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-size: var(--lbs-fs-sm);
	line-height: var(--lbs-lh-ui);
}
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(textarea) { min-height: calc(var(--lbs-target) * 3); }
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(label, legend) { display: inline-block; margin-bottom: var(--lbs-space-1); font-weight: 700; }
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(fieldset) { min-width: 0; margin: 0 0 var(--lbs-space-5); padding: 0; border: 0; }
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(legend) { padding: 0; }
/* Choices: the label beside the box is ordinary text. */
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; margin: 0 var(--lbs-space-2) 0 0; vertical-align: -4px; accent-color: var(--lbs-red); }
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(label:has(> input[type="checkbox"], > input[type="radio"]), input[type="checkbox"] + label, input[type="radio"] + label) { font-weight: 400; }
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(.lbs-field) { display: grid; gap: var(--lbs-space-1); max-width: 32rem; margin: 0 0 var(--lbs-space-5); }
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(.lbs-field) > :where(label) { margin: 0; }
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(.lbs-hint) { display: block; color: var(--lbs-muted); font-size: var(--lbs-fs-sm); line-height: var(--lbs-lh-ui); }
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(.lbs-error-message) { display: flex; align-items: flex-start; gap: var(--lbs-space-2); color: var(--lbs-error); font-weight: 700; line-height: var(--lbs-lh-ui); }
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(.lbs-error-message)::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	background: currentColor;
	mask: var(--lbs-icon-error) center / 20px no-repeat;
}
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="range"], [type="hidden"]), select, textarea):where([aria-invalid="true"], :user-invalid) {
	padding: calc(var(--lbs-space-2) - 1px) calc(var(--lbs-space-3) - 1px);
	border: 2px solid var(--lbs-error);
}
:where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="range"], [type="hidden"]), select, textarea):where(:disabled, [aria-disabled="true"]) {
	border-color: var(--lbs-border);
	background: var(--lbs-disabled-surface);
	color: var(--lbs-disabled-text);
	cursor: not-allowed;
}
/* Submit buttons in content look like the main button: components.css. */

/* LBS Core's request forms (lbs-core inc/forms.php: the block and Elementor widget "LBS form"). The rules above do
   the fields; these place the rest. The required mark "(nauðsynlegt)" in a label is plain weight; an error summary
   (an error notice listing links to the fields, focused after a sending with errors) and a notice that the request
   did not go through sit above the fields; a box and the sentence beside it wrap side by side; the send button gets
   room above it. The thank-you text is a notice in the service-answer look (components.css). */
.lbs-form__req { font-weight: 400; }
.lbs-form__summary { margin-bottom: var(--lbs-space-6); }
.lbs-form__summary ul { margin-bottom: 0; }
.lbs-form__choice {
	display: flex;
	align-items: flex-start;
	gap: var(--lbs-space-2);
}
.lbs-form .lbs-form__choice input[type="checkbox"] { flex: none; margin: 4px 0 0; }
.lbs-form__note { max-width: 32rem; margin: 0 0 var(--lbs-space-5); }
.lbs-form__note > :last-child { margin-bottom: 0; }
.lbs-form__actions { margin: var(--lbs-space-6) 0 0; }
.lbs-form-done { margin: var(--lbs-space-5) 0; }

/* The note LBS Core's forms.js puts over the page just before a form's time stamp runs out (a day after the page was
   made): the page behind it is dimmed and inert, the panel holds a heading, one sentence and the reload button, which
   has the focus. Above the header and its language list (header.css's ledger: 140 · 150); the drawer is a popover
   and cannot be open at that moment. */
.lbs-form-expired {
	position: fixed;
	inset: 0;
	z-index: 160;
	display: grid;
	place-items: center;
	padding: var(--lbs-gutter);
	background: var(--lbs-scrim);
}
.lbs-form-expired__panel {
	max-width: 32rem;
	padding: var(--lbs-space-5) var(--lbs-space-6);
	border: 1px solid var(--lbs-border-strong);
	border-top: 4px solid var(--lbs-red);
	background: var(--lbs-white);
	color: var(--lbs-text);
	box-shadow: 0 2px 12px color-mix(in srgb, var(--lbs-text) 22%, transparent);
}
.lbs-form-expired__panel h2 { margin: 0 0 var(--lbs-space-3); }
.lbs-form-expired__panel p { margin: 0 0 var(--lbs-space-5); }
html:has(.lbs-form-expired) { overflow: hidden; }