/*
Theme Name: Nelson Law Firm
Theme URI: https://nelsonlawfirm.com/
Author: Metzae
Author URI: https://metzae.media/
Description: Custom theme for the George H. Nelson Law Firm. Keeps the oxblood-and-white identity of the original RockinBizRed layout and rebuilds it as a responsive, accessible, search-legible site: one H1 per page, LegalService structured data, a tappable phone number on every screen, and no remote includes.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nelsonlawfirm
Tags: two-columns, right-sidebar, custom-logo, custom-menu, accessibility-ready, translation-ready
*/

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* The original theme's heading colour, kept as the brand anchor. */
	--maroon: #6b030b;
	--maroon-dark: #4a0207;
	--maroon-light: #8c1420;

	--ink: #1f2124;
	--ink-soft: #4a4f56;
	--muted: #61666d;

	--paper: #ffffff;
	--paper-soft: #faf8f7;
	--paper-tint: #f3efed;

	--rule: #e0dbd8;
	--link: #0b4f8f;
	--link-hover: var(--maroon);

	--focus: #b8860b;

	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;

	--wrap: 68rem;
	--measure: 42rem;

	--radius: 3px;
	--shadow: 0 1px 2px rgba(31, 33, 36, .06), 0 4px 12px rgba(31, 33, 36, .05);

	/* Tight by default. Loosened deliberately, never by accident. */
	--gap-xs: .5rem;
	--gap-sm: .75rem;
	--gap: 1rem;
	--gap-lg: 1.25rem;
	--section: 1.75rem;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	/* Stops body copy from leaving a single word on the last line. */
	text-wrap: pretty;
}

img,
picture,
video,
canvas,
svg,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
}

a:hover,
a:focus {
	color: var(--link-hover);
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--maroon);
	line-height: 1.2;
	margin: 0 0 var(--gap-sm);
	font-weight: 700;
	/* Even line lengths: no orphaned last word in a heading. */
	text-wrap: balance;
}

h1 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem); }
h2 { font-size: clamp(1.25rem, 1.08rem + .75vw, 1.55rem); }
h3 { font-size: clamp(1.08rem, 1rem + .4vw, 1.22rem); }
h4 { font-size: 1rem; }

p, ul, ol, table, blockquote, figure, pre {
	margin: 0 0 var(--gap);
}

ul, ol {
	padding-left: 1.25em;
}

li + li {
	margin-top: .25em;
}

blockquote {
	margin-left: 0;
	padding: var(--gap-xs) 0 var(--gap-xs) var(--gap);
	border-left: 3px solid var(--paper-tint);
	color: var(--ink-soft);
	font-style: italic;
}

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: var(--section) 0;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: var(--gap-xs) var(--gap-sm);
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 1rem;
}

@media (min-width: 30em) {
	.wrap { padding-inline: 1.25rem; }
}

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

.skip-link:focus {
	position: fixed !important;
	top: .5rem;
	left: .5rem;
	z-index: 100;
	width: auto;
	height: auto;
	clip-path: none;
	margin: 0;
	padding: .6rem 1rem;
	background: var(--maroon);
	color: #fff;
	border-radius: var(--radius);
	text-decoration: none;
}

.label {
	font-weight: 700;
	color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: baseline;
	gap: .4em;
	padding: .6rem 1.1rem;
	background: var(--maroon);
	color: #fff;
	border: 2px solid var(--maroon);
	border-radius: var(--radius);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	/* A call-to-action must never wrap mid-number. */
	white-space: nowrap;
}

.button:hover,
.button:focus {
	background: var(--maroon-dark);
	border-color: var(--maroon-dark);
	color: #fff;
}

.button__label {
	font-weight: 600;
	opacity: .85;
}

.button__number {
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

.button--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .65);
}

.button--ghost:hover,
.button--ghost:focus {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
}

.hero .button--call {
	background: #fff;
	border-color: #fff;
	color: var(--maroon-dark);
}

.hero .button--call:hover,
.hero .button--call:focus {
	background: var(--paper-tint);
	border-color: var(--paper-tint);
	color: var(--maroon-dark);
}

/* --------------------------------------------------------------------------
   5. Top bar
   -------------------------------------------------------------------------- */

.topbar {
	background: var(--maroon-dark);
	color: #f2e7e7;
	font-size: .82rem;
}

.topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-xs) var(--gap);
	/* No block padding here: the phone link carries it, so the whole
	   44px-tall strip is tappable rather than just the text. */
	padding-block: 0;
	min-height: 2.75rem;
}

.topbar p {
	margin: 0;
}

.topbar__tagline {
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .74rem;
	color: #d9c7c8;
}

.topbar__phone a {
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	gap: .45em;
	align-items: center;
	min-height: 2.75rem;
	padding-block: .35rem;
	white-space: nowrap;
}

.topbar__phone a:hover,
.topbar__phone a:focus {
	color: #fff;
	text-decoration: underline;
}

.topbar__phone-label {
	color: #d9c7c8;
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.topbar__phone-number {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   6. Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
	background: var(--paper);
	border-bottom: 3px solid var(--maroon);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap-sm) var(--gap);
	padding-block: var(--gap);
}

.site-branding {
	flex: 1 1 auto;
	min-width: 0;
}

.site-title,
.site-branding .site-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 1rem + 1.1vw, 1.7rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--maroon);
	text-wrap: balance;
}

.site-title a {
	color: inherit;
	text-decoration: none;
}

.site-title a:hover,
.site-title a:focus {
	color: var(--maroon-light);
}

.site-description {
	margin: .15rem 0 0;
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
	text-wrap: balance;
}

.site-branding-logo img {
	max-height: 72px;
	width: auto;
}

/* Toggle: hidden entirely when scripting is unavailable. */
.nav-toggle {
	display: none;
	align-items: center;
	gap: .5em;
	padding: .5rem .85rem;
	background: var(--maroon);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.js .nav-toggle {
	display: inline-flex;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 1.1em;
	height: 2px;
	background: currentColor;
	content: "";
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }

.site-nav {
	flex: 1 1 100%;
}

.js .site-nav {
	display: none;
}

.js .site-nav.is-open {
	display: block;
}

.nav-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
}

.nav-list li {
	margin: 0;
}

.nav-list li + li {
	border-top: 1px solid var(--rule);
}

.nav-list a {
	display: block;
	padding: .6rem .25rem;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.nav-list a:hover,
.nav-list a:focus {
	color: var(--maroon);
	text-decoration: underline;
}

.nav-list .current-menu-item > a,
.nav-list .current_page_item > a,
.nav-list .current_page_ancestor > a {
	color: var(--maroon);
}

/* Sub-menus stay flat on small screens; they become a hover panel later. */
.nav-list .sub-menu,
.nav-list .children {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--gap);
}

@media (min-width: 45em) {
	.site-header__inner {
		flex-wrap: nowrap;
	}

	.nav-toggle,
	.js .nav-toggle {
		display: none;
	}

	.site-nav,
	.js .site-nav {
		display: block;
		flex: 0 1 auto;
	}

	.nav-list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: var(--gap-xs) var(--gap);
		border-top: 0;
	}

	.nav-list li + li {
		border-top: 0;
	}

	.nav-list > li {
		position: relative;
	}

	.nav-list a {
		padding: .35rem 0;
		border-bottom: 2px solid transparent;
		white-space: nowrap;
	}

	.nav-list a:hover,
	.nav-list a:focus {
		text-decoration: none;
		border-bottom-color: var(--maroon);
	}

	.nav-list .current-menu-item > a,
	.nav-list .current_page_item > a,
	.nav-list .current_page_ancestor > a {
		border-bottom-color: var(--maroon);
	}

	.nav-list .sub-menu,
	.nav-list .children {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		display: none;
		min-width: 13rem;
		padding: var(--gap-xs) var(--gap-sm);
		background: var(--paper);
		border: 1px solid var(--rule);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
	}

	.nav-list > li:hover > .sub-menu,
	.nav-list > li:focus-within > .sub-menu,
	.nav-list > li:hover > .children,
	.nav-list > li:focus-within > .children {
		display: block;
	}

	.nav-list .sub-menu a,
	.nav-list .children a {
		white-space: normal;
		border-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
	background: linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon) 60%, var(--maroon-light) 100%);
	color: #fff;
}

.hero__inner {
	padding-block: var(--section);
}

.hero__lede {
	max-width: 46rem;
	margin: 0 0 var(--gap-lg);
	font-family: var(--font-display);
	font-size: clamp(1.05rem, .95rem + .7vw, 1.4rem);
	line-height: 1.35;
	color: #fff;
	text-wrap: balance;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
	margin: 0;
}

/* --------------------------------------------------------------------------
   8. Layout
   -------------------------------------------------------------------------- */

.site-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--section) var(--gap-lg);
	padding-block: var(--section);
	align-items: start;
}

@media (min-width: 60em) {
	.site-body {
		/* The original put the secondary column on the left. Keeping that
		   visual order while leaving the main content first in the source,
		   so screen readers and crawlers reach the content immediately. */
		grid-template-columns: 17rem minmax(0, 1fr);
	}

	.site-main {
		grid-column: 2;
		grid-row: 1;
	}

	.site-sidebar {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: var(--gap);
	}
}

.site-main {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   9. Entries
   -------------------------------------------------------------------------- */

.breadcrumbs {
	margin-bottom: var(--gap-sm);
	font-size: .84rem;
	color: var(--muted);
}

.breadcrumbs a {
	color: var(--muted);
}

.entry-header {
	margin-bottom: var(--gap);
	padding-bottom: var(--gap-sm);
	border-bottom: 1px solid var(--rule);
}

.entry-title {
	margin: 0;
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
	text-decoration: underline;
}

.entry-meta {
	margin: .3rem 0 0;
	font-size: .84rem;
	color: var(--muted);
}

.entry-content {
	/* Wider than the widest thing inside it, so nothing is forced into a
	   narrow column while the page has room to spare. */
	max-width: var(--measure);
}

.entry-content > :last-child {
	margin-bottom: 0;
}

.entry-content h2,
.entry-content h3 {
	margin-top: var(--gap-lg);
}

.entry-content img {
	border-radius: var(--radius);
}

.entry-thumbnail {
	margin: 0 0 var(--gap);
}

.entry-terms,
.entry-edit {
	margin-top: var(--gap);
	font-size: .86rem;
	color: var(--muted);
}

.entry--summary + .entry--summary {
	margin-top: var(--section);
	padding-top: var(--section);
	border-top: 1px solid var(--rule);
}

.page-header {
	margin-bottom: var(--gap-lg);
	padding-bottom: var(--gap-sm);
	border-bottom: 1px solid var(--rule);
}

.page-title {
	margin: 0;
}

.search-term {
	font-style: italic;
}

/* Legacy content: centre-aligned paragraphs from the 2007 pages read as
   stranded blocks at desktop width, so they are pulled back to the measure. */
.entry-content p[align="center"],
.entry-content div[align="center"] {
	text-align: center;
}

.entry-content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

@media (min-width: 40em) {
	.entry-content table {
		display: table;
	}
}

/* --------------------------------------------------------------------------
   10. Embeds
   -------------------------------------------------------------------------- */

.embed {
	position: relative;
	margin: 0 0 var(--gap);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper-tint);
}

.embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

.embed--video {
	aspect-ratio: 16 / 9;
}

.embed--map {
	aspect-ratio: 4 / 3;
}

@media (min-width: 40em) {
	.embed--map {
		aspect-ratio: 16 / 10;
	}
}

.embed--video iframe,
.embed--map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   11. Sidebar
   -------------------------------------------------------------------------- */

.site-sidebar {
	min-width: 0;
	display: grid;
	gap: var(--gap-lg);
}

.widget,
.contact-card {
	background: var(--paper-soft);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
}

.widget-title,
.contact-card__title {
	margin: 0;
	padding: .55rem var(--gap-sm);
	/* The red bar over each sidebar block is the one motif worth keeping
	   verbatim from the original theme. */
	background: var(--maroon);
	color: #fff;
	font-family: var(--font-body);
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.widget > *:not(.widget-title),
.contact-card > *:not(.contact-card__title) {
	margin-inline: var(--gap-sm);
}

.widget > *:not(.widget-title):first-of-type,
.contact-card > *:not(.contact-card__title):first-of-type {
	margin-top: var(--gap-sm);
}

.widget > *:last-child,
.contact-card > *:last-child {
	margin-bottom: var(--gap-sm);
}

.contact-card__phone {
	margin-bottom: var(--gap-sm);
}

.contact-card__phone .button {
	display: flex;
	justify-content: center;
	width: calc(100% - 0px);
}

.contact-card__address {
	font-style: normal;
	line-height: 1.45;
	color: var(--ink-soft);
}

.contact-card__list {
	list-style: none;
	padding: 0;
	font-size: .9rem;
}

.contact-card__list li {
	padding-block: .3rem;
	border-top: 1px solid var(--rule);
	overflow-wrap: anywhere;
}

.contact-card__list .label {
	display: block;
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}

.widget ul {
	list-style: none;
	padding: 0;
	font-size: .92rem;
}

.widget li {
	padding-block: .25rem;
}

/* --------------------------------------------------------------------------
   12. Search form
   -------------------------------------------------------------------------- */

.search-form {
	display: flex;
	gap: .4rem;
}

.search-field,
.contact-form input,
.contact-form textarea {
	width: 100%;
	min-width: 0;
	padding: .5rem .6rem;
	background: #fff;
	border: 1px solid #b9b3af;
	border-radius: var(--radius);
	font: inherit;
	color: var(--ink);
}

.search-field:focus,
.contact-form input:focus,
.contact-form textarea:focus {
	border-color: var(--maroon);
}

.search-submit {
	flex: 0 0 auto;
	padding: .5rem .8rem;
	background: var(--maroon);
	color: #fff;
	border: 1px solid var(--maroon);
	border-radius: var(--radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.search-submit:hover,
.search-submit:focus {
	background: var(--maroon-dark);
}

/* --------------------------------------------------------------------------
   13. Contact form
   -------------------------------------------------------------------------- */

.contact-form {
	max-width: var(--measure);
	margin-top: var(--section);
	padding: var(--gap-lg);
	background: var(--paper-soft);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}

.contact-form__title {
	margin-top: 0;
}

.contact-form .field {
	margin-bottom: var(--gap-sm);
}

.contact-form label {
	display: block;
	margin-bottom: .2rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--ink-soft);
}

.contact-form .required {
	color: var(--maroon);
}

/* Honeypot: removed from the layout and from the accessibility tree, but
   still submitted by a bot that fills every field it finds. */
.field--honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.field--submit {
	margin-top: var(--gap);
}

.form-notice {
	margin: 0 0 var(--gap);
	padding: .6rem .8rem;
	border-left: 4px solid;
	border-radius: var(--radius);
	font-weight: 600;
}

.form-notice--success {
	background: #eef6ee;
	border-color: #2f6b3a;
	color: #21522a;
}

.form-notice--error {
	background: #fbeeee;
	border-color: var(--maroon);
	color: var(--maroon-dark);
}

.form-footnote {
	margin: var(--gap) 0 0;
	font-size: .82rem;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   14. Child pages, pagination, comments
   -------------------------------------------------------------------------- */

.child-pages {
	margin-top: var(--section);
	padding-top: var(--gap);
	border-top: 1px solid var(--rule);
}

.child-pages__title {
	font-size: 1rem;
}

.child-pages__list,
.page-list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--gap-xs);
}

@media (min-width: 34em) {
	.child-pages__list {
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	}
}

.child-pages__list a,
.page-list a {
	display: block;
	padding: .55rem .7rem;
	background: var(--paper-soft);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-weight: 600;
	text-decoration: none;
}

.child-pages__list a:hover,
.child-pages__list a:focus,
.page-list a:hover,
.page-list a:focus {
	background: var(--paper-tint);
	border-color: var(--maroon);
}

.pagination,
.post-navigation {
	margin-top: var(--section);
	padding-top: var(--gap);
	border-top: 1px solid var(--rule);
	font-size: .9rem;
}

.pagination .page-numbers {
	display: inline-block;
	padding: .3rem .6rem;
	text-decoration: none;
}

.pagination .current {
	background: var(--maroon);
	color: #fff;
	border-radius: var(--radius);
}

.nav-links {
	display: grid;
	gap: var(--gap-xs);
}

.post-navigation .label {
	display: block;
	font-size: .74rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}

.comments-area {
	max-width: var(--measure);
	margin-top: var(--section);
	padding-top: var(--gap);
	border-top: 1px solid var(--rule);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	padding-left: var(--gap);
}

.comment-body {
	padding-block: var(--gap-sm);
	border-bottom: 1px solid var(--rule);
}

.comment-notes,
.comment-form label {
	font-size: .88rem;
	color: var(--muted);
}

.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
	width: 100%;
	padding: .5rem .6rem;
	border: 1px solid #b9b3af;
	border-radius: var(--radius);
	font: inherit;
}

.comment-form .submit {
	padding: .6rem 1.1rem;
	background: var(--maroon);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
	margin-top: auto;
	background: var(--maroon-dark);
	color: #e8dbdc;
	font-size: .9rem;
}

.site-footer a {
	color: #fff;
}

.site-footer__inner {
	display: grid;
	gap: var(--gap-lg);
	padding-block: var(--section);
}

@media (min-width: 40em) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}
}

.site-footer__name {
	margin: 0 0 .3rem;
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
}

.site-footer__address {
	margin: 0 0 var(--gap-xs);
	font-style: normal;
	line-height: 1.45;
}

.site-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem var(--gap);
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem var(--gap);
}

.site-footer__legal,
.site-footer__meta {
	padding-block: var(--gap-sm);
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .78rem;
	line-height: 1.5;
	color: #cbb7b8;
}

.site-footer__legal p,
.site-footer__meta p {
	margin: 0;
	max-width: 60rem;
}

/* --------------------------------------------------------------------------
   16. Print
   -------------------------------------------------------------------------- */

@media print {
	.topbar,
	.site-nav,
	.nav-toggle,
	.site-sidebar,
	.contact-form,
	.comments-area,
	.pagination,
	.post-navigation,
	.skip-link {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 11pt;
	}

	.hero,
	.site-footer {
		background: none !important;
		color: #000;
	}

	.hero__lede,
	.site-footer,
	.site-footer a,
	.site-footer__name {
		color: #000;
	}

	.site-body {
		display: block;
		padding-block: 0;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}