/* The footer: the site's three ruled columns on a light panel, the strip that is the same on every LBS site, and
   the red bar across the bottom of every LBS page. Rules: docs/design-footer.md. */

.lbs-footer {
	margin-top: var(--lbs-space-9);
	background: var(--lbs-white);
	border-bottom: var(--lbs-footer-bar) solid var(--lbs-red);
	font-size: var(--lbs-fs-md);
	line-height: var(--lbs-lh-body);
}

.lbs-footer__site { padding: var(--lbs-space-6) 0; background: var(--lbs-panel); }
.lbs-footer__cols { display: grid; gap: var(--lbs-space-5) 20px; }
.lbs-footer__col { min-width: 0; }
.lbs-footer__col--empty { display: none; }

.lbs-footer__head {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--lbs-border-strong);
}
.lbs-footer__head > * { margin: 0; }
.lbs-footer__title { font-size: var(--lbs-fs-md); font-weight: 700; hyphens: manual; }
.lbs-footer__title--site { font-size: var(--lbs-fs-lg); }

/* Column 1: the site's own contact details, social media, free content (the widget area) and the about link. */
.lbs-footer__contact { margin: 0 0 9px; font-weight: 700; }
.lbs-footer__contact a[href^="tel:"] { white-space: nowrap; }
/* Social media icons: 24px drawings in 40px links (easy to hit), pulled left by the 8px of air so
   the first drawing lines up with the contact lines above. */
.lbs-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: var(--lbs-space-3) 0 0 -8px;
	padding: 0;
}
.lbs-footer__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.lbs-footer__social .lbs-icon { width: 24px; height: 24px; }

/* The free area: a List shows as links like the other columns, a Paragraph as small text. Block widgets come
   wrapped in a Group, so the rules reach any depth. */
.lbs-footer__free { margin-top: var(--lbs-space-3); }
.lbs-footer__free p { margin: 0 0 10px; font-size: var(--lbs-fs-sm); }
.lbs-footer__free ul { list-style: none; margin: 0 0 10px; padding: 0; font-weight: 500; }
.lbs-footer__free li { margin-bottom: 6px; }
.lbs-footer__free :is(ul, p) a:not(:hover, :focus-visible) { color: inherit; }
.lbs-footer__free ul a { text-decoration: none; }
/* A link inside a sentence is underlined, as in running text everywhere (a licence line, a feedback address). */
.lbs-footer__free p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.lbs-footer__free > .widget + .widget { margin-top: 10px; }
/* Headings are not designed for here; one that turns up stays below the site's name in size. */
.lbs-footer__free :is(.widget-title, h2, h3, h4) { margin: 0 0 6px; font-size: var(--lbs-fs-md); }

.lbs-footer__about { margin: var(--lbs-space-4) 0 0; font-weight: 700; }
.lbs-footer__about a { text-decoration: none; }

/* Columns 2 and 3: menus. */
.lbs-footer__nav { list-style: none; margin: 0 0 20px; padding: 0; font-weight: 500; }
.lbs-footer__nav li { margin-bottom: 6px; }
.lbs-footer__nav .current-menu-item > a { color: var(--lbs-red); }

/* A menu item with the CSS class "lbs-see-more" (Menus > Screen Options > CSS Classes) becomes the
   "+ Sjá fleiri" link. */
.lbs-footer__nav .lbs-see-more { font-size: var(--lbs-fs-md); }

/* Where a link leads, as in link cards (components.css, which defines the masks): the column headings end in an
   arrow (this site) or an arrow up to the right (other sites), the about link in an arrow, and a link to a PDF in an
   arrow onto a line (its words for screen readers come from inc/template-tags.php or the strip; only in the menus and
   the strip, where those words are there: a PDF link in the free area says "(PDF)" in its own words). Empty generated
   content, so screen readers meet none of them. Without masks (old browsers) no symbol at all. */
.lbs-footer__title--internal,
.lbs-footer__about a { --lbs-footer-symbol: var(--lbs-icon-link); }
.lbs-footer__title--external { --lbs-footer-symbol: var(--lbs-icon-link-external); }
:is(.lbs-footer__nav, .lbs-footer__policies) a[href]:is([href$=".pdf" i], [href*=".pdf?" i], [href*=".pdf#" i]) { --lbs-footer-symbol: var(--lbs-icon-link-pdf); }
@supports (mask-image: none) {
	:is(.lbs-footer__title--internal, .lbs-footer__title--external, .lbs-footer__about a)::after,
	:is(.lbs-footer__nav, .lbs-footer__policies) a[href]:is([href$=".pdf" i], [href*=".pdf?" i], [href*=".pdf#" i])::after {
		content: '';
		display: inline-block;
		width: 0.9em;
		height: 0.9em;
		margin-left: 0.3em;
		vertical-align: -0.12em;
		background-color: var(--lbs-red);
		mask: var(--lbs-footer-symbol) center / contain no-repeat;
	}
}

/* The shared strip. */
.lbs-footer__strip {
	padding: var(--lbs-space-5) 0 var(--lbs-space-6);
	border-top: 1px solid var(--lbs-border);
	font-size: var(--lbs-fs-sm);
	line-height: var(--lbs-lh-body);
}
.lbs-footer__strip-inner { display: grid; gap: var(--lbs-space-4); }
/* A long e-mail address breaks rather than widening the page (200% text on a phone). */
.lbs-footer__strip-inner > * { min-width: 0; }
.lbs-footer__contact { overflow-wrap: anywhere; }
.lbs-footer__logo { display: block; justify-self: start; }
.lbs-footer__logo img { display: block; width: auto; height: 48px; max-width: 100%; }
.lbs-footer__address { font-style: normal; margin: 0; }
.lbs-footer__strip .lbs-footer__contact { margin: 0; }
.lbs-footer__strip ul { list-style: none; margin: 0; padding: 0; }
.lbs-footer__strip-social { font-weight: 500; }
.lbs-footer__strip-social a { text-decoration: none; }
.lbs-footer__strip-social a:not(:hover, :focus-visible),
.lbs-footer__policies a:not(:hover, :focus-visible) { color: inherit; }

@media (max-width: 991.98px) { .lbs-footer { margin-top: var(--lbs-space-7); } }
@media (max-width: 767.98px) {
	.lbs-footer { margin-top: var(--lbs-space-5); }
	.lbs-footer__site { padding-bottom: var(--lbs-space-4); }
	.lbs-footer__col--wide-only { display: none; }
	/* Links at least 32px tall on phones. */
	.lbs-footer :is(.lbs-footer__nav, .lbs-footer__free ul, .lbs-footer__strip ul) a,
	.lbs-footer :is(.lbs-footer__contact, .lbs-footer__about) a { display: inline-flex; align-items: center; min-height: 32px; }
	.lbs-footer__nav li,
	.lbs-footer__free li { margin-bottom: 2px; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
	.lbs-footer__cols { grid-template-columns: 1fr 1fr; }
	.lbs-footer__strip-inner { grid-template-columns: auto 1fr; column-gap: var(--lbs-space-6); }
	.lbs-footer__logo { grid-row: span 3; }
}
@media (min-width: 768px) {
	.lbs-footer__cols,
	.lbs-footer__strip-inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 56px;
		padding-inline: 20px;
	}
	/* An empty column keeps its place, so the others line up with every other LBS site. */
	.lbs-footer__col--empty { display: block; }
	/* The headings share one band, so the three rules line up; the rule reaches a little beyond the text on both
	   sides. */
	.lbs-footer__head {
		display: flex;
		align-items: flex-end;
		min-height: 64px;
		margin: 0 -22px 10px;
		padding: 0 22px 10px;
	}
	/* The strip: the logo, then the contact lines, the policy and the social media, side by side. */
	.lbs-footer__strip-inner { grid-template-columns: auto repeat(3, minmax(0, 1fr)); }
}
/* Three columns are tight between 768 and 991: close the gaps and step the contact lines down. */
@media (min-width: 768px) and (max-width: 991.98px) {
	.lbs-footer__cols,
	.lbs-footer__strip-inner { column-gap: 44px; padding-inline: 16px; }
	.lbs-footer__head { margin-inline: -16px; padding-inline: 16px; }
	.lbs-footer__contact { font-size: var(--lbs-fs-sm); }
	.lbs-footer__strip-inner { grid-template-columns: auto 1fr 1fr; }
	.lbs-footer__strip-social { grid-column: 3; }
}