/*
Theme Name: Services Across America
Theme URI: https://saa.johnnyswebsites.com/
Author: Cybercom Digital Solutions
Author URI: https://getcybercom.com/
Description: The Services Across America theme — a three-column disaster-relief matching site with a mega menu, live NOAA and FEMA alert panels, maps, donation blocks, and a full light and dark theme. The light theme reproduces the original SAA look; the dark theme is built for people reading on a phone at 2am with the power out. Designed to run alongside the SAA Core plugin.
Version: 1.5.0
Requires at least: 5.8
Tested up to: 6.6
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: saa-theme
Tags: three-columns, custom-menu, custom-logo, featured-images, translation-ready, accessibility-ready, block-styles, wide-blocks, dark-mode
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Light theme — the classic Services Across America palette. */
	--saa-bg: #cad8e3;
	--saa-bg-grad: linear-gradient(180deg, #b9cbdb 0, #cad8e3 220px);
	--saa-surface: #ffffff;
	--saa-surface-2: #f2f6fa;
	--saa-surface-3: #e5edf4;
	--saa-text: #22303c;
	--saa-heading: #16222c;
	--saa-muted: #5d6f7e;
	--saa-border: #d3dfe8;
	--saa-accent: #1f5f96;
	--saa-accent-hover: #17496f;
	--saa-accent-ink: #ffffff;
	--saa-header: #1b4f7d;
	--saa-header-2: #16405f;
	--saa-header-ink: #ffffff;
	--saa-utility-bg: #f4f8fb;
	--saa-red: #c0392b;
	--saa-orange: #e08e1b;
	--saa-green: #6aa62b;
	--saa-danger: #b3261e;
	--saa-success: #2e7d32;
	--saa-warning: #b26a00;
	--saa-info: #1565c0;
	--saa-radius: 6px;
	--saa-radius-lg: 10px;
	--saa-shadow: 0 1px 3px rgba(20, 40, 60, .12), 0 6px 18px rgba(20, 40, 60, .06);
	--saa-shadow-lg: 0 10px 40px rgba(14, 30, 45, .22);
	--saa-focus: #f0a202;
	--saa-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
	--saa-font-head: "Trebuchet MS", "Segoe UI", Arial, sans-serif;

	/*
	 * Layout. All five are overwritten inline from SAA → Settings → Appearance,
	 * so the page width is a setting rather than a stylesheet edit.
	 */
	--saa-max: 100%;          /* full width by default */
	--saa-gutter: 28px;
	--saa-left-width: 250px;
	--saa-right-width: 300px;
	--saa-measure: 88ch;      /* prose only — never cards, tables or maps */
	--saa-form-max: 1200px;
}

:root[data-theme="dark"] {
	--saa-bg: #0d1520;
	--saa-bg-grad: linear-gradient(180deg, #0a1018 0, #0d1520 220px);
	--saa-surface: #17222f;
	--saa-surface-2: #1c2937;
	--saa-surface-3: #243547;
	--saa-text: #e4ecf4;
	--saa-heading: #f2f7fb;
	--saa-muted: #9cb0c3;
	--saa-border: #2c3e52;
	--saa-accent: #5aa9e4;
	--saa-accent-hover: #83c1ef;
	--saa-accent-ink: #07121d;
	--saa-header: #0f1c28;
	--saa-header-2: #0a141d;
	--saa-header-ink: #e4ecf4;
	--saa-utility-bg: #111c27;
	--saa-red: #d9584a;
	--saa-orange: #e6a23c;
	--saa-green: #7dbb3d;
	--saa-danger: #ef6a5e;
	--saa-success: #6fcf74;
	--saa-warning: #e0a44a;
	--saa-info: #6ab0f3;
	--saa-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .35);
	--saa-shadow-lg: 0 14px 44px rgba(0, 0, 0, .6);
	--saa-focus: #ffc94a;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body.saa-body {
	margin: 0;
	background: var(--saa-bg);
	background-image: var(--saa-bg-grad);
	background-repeat: no-repeat;
	color: var(--saa-text);
	font-family: var(--saa-font);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--saa-font-head);
	color: var(--saa-heading);
	line-height: 1.25;
	margin: 0 0 .5em;
}

a { color: var(--saa-accent); }
a:hover { color: var(--saa-accent-hover); }

img, video, iframe { max-width: 100%; height: auto; }

table { max-width: 100%; }

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

.saa-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--saa-accent);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 var(--saa-radius) 0;
}

.saa-skip:focus {
	left: 0;
}

.saa-muted { color: var(--saa-muted); }

:focus-visible {
	outline: 3px solid var(--saa-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   3. Utility bar & masthead
   ========================================================================== */

.saa-site { min-height: 100vh; display: flex; flex-direction: column; }

.saa-utility {
	background: var(--saa-utility-bg);
	border-bottom: 1px solid var(--saa-border);
	font-size: .78rem;
}

.saa-utility__inner {
	max-width: var(--saa-max);
	margin: 0 auto;
	padding: 5px var(--saa-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	justify-content: space-between;
	color: var(--saa-muted);
}

.saa-utility__note,
.saa-utility__account { margin: 0; }

.saa-utility__menu {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.saa-masthead {
	background: var(--saa-surface);
	border-bottom: 1px solid var(--saa-border);
}

.saa-masthead__inner {
	max-width: var(--saa-max);
	margin: 0 auto;
	padding: 14px var(--saa-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	align-items: center;
	justify-content: space-between;
}

.saa-brand { min-width: 0; }

.saa-brand__title {
	margin: 0;
	font-family: var(--saa-font-head);
	font-size: clamp(1.5rem, 4vw, 2.3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.01em;
}

.saa-brand__title a {
	color: var(--saa-heading);
	text-decoration: none;
}

.saa-brand__tagline {
	margin: 2px 0 0;
	font-size: .82rem;
	color: var(--saa-muted);
}

.saa-masthead__aside {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-end;
}

.saa-masthead__cta {
	margin: 0;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.saa-searchform {
	display: flex;
	max-width: 380px;
}

.saa-searchform__input {
	flex: 1;
	min-width: 0;
	padding: 7px 11px;
	border: 1px solid var(--saa-border);
	border-right: 0;
	border-radius: var(--saa-radius) 0 0 var(--saa-radius);
	background: var(--saa-surface);
	color: var(--saa-text);
	font-size: .85rem;
	font-family: inherit;
}

.saa-searchform__button {
	padding: 7px 13px;
	border: 1px solid var(--saa-accent);
	border-radius: 0 var(--saa-radius) var(--saa-radius) 0;
	background: var(--saa-accent);
	color: var(--saa-accent-ink);
	font-size: 1rem;
	cursor: pointer;
	line-height: 1;
}

/* ==========================================================================
   4. Navigation bar & mega menu
   ========================================================================== */

.saa-navbar {
	background: linear-gradient(180deg, var(--saa-header), var(--saa-header-2));
	position: sticky;
	top: 0;
	z-index: 900;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.saa-navbar__inner {
	max-width: var(--saa-max);
	margin: 0 auto;
	padding: 0 var(--saa-gutter);
	display: flex;
	align-items: center;
	gap: 10px;
}

.saa-navbar__burger {
	display: none;
	background: none;
	border: 0;
	padding: 12px 8px;
	cursor: pointer;
}

.saa-burger-bars,
.saa-burger-bars::before,
.saa-burger-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--saa-header-ink);
	position: relative;
}

.saa-burger-bars::before,
.saa-burger-bars::after {
	content: "";
	position: absolute;
}

.saa-burger-bars::before { top: -7px; }
.saa-burger-bars::after  { top: 7px; }

.saa-menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.saa-menu__item { position: relative; }

.saa-menu__item--right { margin-left: auto; }

.saa-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 12px 16px;
	color: var(--saa-header-ink);
	background: none;
	border: 0;
	font-family: var(--saa-font);
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.saa-menu__link:hover,
.saa-menu__link:focus,
.saa-menu__link.is-current,
.saa-menu__item.is-open > .saa-menu__link {
	background: rgba(255, 255, 255, .13);
	color: var(--saa-header-ink);
}

.saa-menu__caret {
	font-size: .65em;
	opacity: .75;
	transition: transform .15s ease;
}

.saa-menu__item.is-open .saa-menu__caret { transform: rotate(180deg); }

.saa-mega {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: min(760px, 92vw);
	background: var(--saa-surface);
	border: 1px solid var(--saa-border);
	border-top: 3px solid var(--saa-accent);
	border-radius: 0 0 var(--saa-radius-lg) var(--saa-radius-lg);
	box-shadow: var(--saa-shadow-lg);
	padding: 18px 20px 14px;
	z-index: 950;
}

.saa-menu__item--right .saa-mega { left: auto; right: 0; }

.saa-mega[hidden] { display: none; }

.saa-mega__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px 26px;
}

.saa-mega__title {
	margin: 0 0 8px;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--saa-muted);
	border-bottom: 1px solid var(--saa-border);
	padding-bottom: 6px;
}

.saa-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.saa-mega__list li { margin: 0 0 2px; }

.saa-mega__link {
	display: block;
	padding: 6px 8px;
	border-radius: var(--saa-radius);
	text-decoration: none;
	color: var(--saa-text);
	line-height: 1.35;
}

.saa-mega__link:hover,
.saa-mega__link:focus {
	background: var(--saa-surface-2);
	color: var(--saa-accent);
}

.saa-mega__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: 1px;
}

.saa-mega__label {
	font-size: .88rem;
	font-weight: 600;
}

.saa-mega__desc {
	display: block;
	font-size: .75rem;
	color: var(--saa-muted);
	font-weight: 400;
}

.saa-mega__note {
	margin: 8px 0 0;
	font-size: .76rem;
	color: var(--saa-muted);
	line-height: 1.5;
}

.saa-mega__footer {
	margin: 14px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--saa-border);
	font-size: .76rem;
	color: var(--saa-muted);
	text-align: center;
}

.saa-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	background: var(--saa-surface);
	border: 1px solid var(--saa-border);
	border-radius: 0 0 var(--saa-radius) var(--saa-radius);
	box-shadow: var(--saa-shadow);
	display: none;
	z-index: 950;
}

.saa-menu__item--has-children:hover .saa-submenu,
.saa-menu__item--has-children:focus-within .saa-submenu { display: block; }

.saa-submenu__link {
	display: block;
	padding: 7px 14px;
	color: var(--saa-text);
	text-decoration: none;
	font-size: .86rem;
}

.saa-submenu__link:hover { background: var(--saa-surface-2); }

.saa-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	margin-left: 8px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: var(--saa-header-ink);
	font-size: .82rem;
	cursor: pointer;
	line-height: 1;
	flex: none;
}

.saa-theme-toggle:hover { background: rgba(255, 255, 255, .18); }

:root[data-theme="light"] .saa-theme-toggle__moon,
:root[data-theme="dark"] .saa-theme-toggle__sun { opacity: .35; }

/* ==========================================================================
   5. Layout
   ========================================================================== */

.saa-container {
	flex: 1;
	max-width: var(--saa-max);
	width: 100%;
	margin: 0 auto;
	padding: 16px var(--saa-gutter) 44px;
}

.saa-crumbs {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--saa-muted);
	margin-bottom: 12px;
}

.saa-crumbs a { color: var(--saa-muted); text-decoration: none; }
.saa-crumbs a:hover { color: var(--saa-accent); }
.saa-crumbs__sep { margin: 0 4px; opacity: .6; }

.saa-layout {
	display: grid;
	grid-template-columns: var(--saa-left-width) minmax(0, 1fr) var(--saa-right-width);
	gap: 24px;
	align-items: start;
}

/* Map, directory, dashboard and form pages run the full width of the screen. */
.saa-layout--wide { grid-template-columns: minmax(0, 1fr); }
.saa-layout--wide .saa-main { max-width: 100%; }
.saa-layout--wide .saa-entry__content > p,
.saa-layout--wide .saa-entry__content > ul,
.saa-layout--wide .saa-entry__content > ol { max-width: var(--saa-measure); }

body:not(.has-left-column) .saa-layout { grid-template-columns: minmax(0, 1fr) var(--saa-right-width); }

/*
 * With the Local Resources column on, the news column keeps its width and the
 * resources column takes its place beside it. The main column gives up the
 * space, because on a bad day the two narrow columns are the ones people read.
 */
body.has-resources-column .saa-layout {
	grid-template-columns: var(--saa-left-width) var(--saa-resources-width) minmax(0, 1fr) var(--saa-right-width);
}

body.has-resources-column:not(.has-left-column) .saa-layout {
	grid-template-columns: var(--saa-resources-width) minmax(0, 1fr) var(--saa-right-width);
}

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

.saa-col { min-width: 0; }

/* ==========================================================================
   6. Widgets & columns
   ========================================================================== */

.saa-widget {
	background: var(--saa-surface);
	border: 1px solid var(--saa-border);
	border-radius: var(--saa-radius-lg);
	padding: 14px 16px;
	margin: 0 0 16px;
	box-shadow: var(--saa-shadow);
	font-size: .88rem;
}

.saa-widget__title {
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--saa-border);
	font-size: 1rem;
}

.saa-widget ul { padding-left: 18px; margin: 0; }

.saa-widget--donate { padding-bottom: 18px; }

.saa-widget__more { margin: 8px 0 0; font-size: .8rem; }

.saa-newslist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.saa-newslist li {
	padding: 7px 0;
	border-bottom: 1px solid var(--saa-border);
}

.saa-newslist li:last-child { border-bottom: 0; }

.saa-newslist a {
	font-weight: 600;
	text-decoration: none;
	color: var(--saa-text);
}

.saa-newslist a:hover { color: var(--saa-accent); }

.saa-newslist__date {
	display: block;
	font-size: .74rem;
	color: var(--saa-muted);
}

/* ==========================================================================
   7. Front page panels
   ========================================================================== */

.saa-front-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin: 0 0 22px;
}

.saa-panel-card {
	background: var(--saa-surface);
	border: 1px solid var(--saa-border);
	border-radius: var(--saa-radius-lg);
	padding: 14px 16px;
	box-shadow: var(--saa-shadow);
}

.saa-panel-card__title {
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--saa-border);
	font-size: 1rem;
}

.saa-front-top { margin: 0 0 22px; }

.saa-front-map { margin: 26px 0; }

/* ==========================================================================
   8. Entries & teasers
   ========================================================================== */

.saa-entry {
	background: var(--saa-surface);
	border: 1px solid var(--saa-border);
	border-radius: var(--saa-radius-lg);
	padding: 22px 26px;
	box-shadow: var(--saa-shadow);
	margin: 0 0 22px;
}

.saa-entry__title {
	margin: 0 0 10px;
	font-size: clamp(1.4rem, 3vw, 1.95rem);
}

.saa-entry__badges {
	margin: 0 0 8px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.saa-entry__thumb {
	margin: 0 0 18px;
}

.saa-entry__thumb img {
	border-radius: var(--saa-radius);
	display: block;
	width: 100%;
}

.saa-entry__content > * { max-width: 100%; }

/*
 * Running text is capped at a comfortable line length so a 2560px monitor does
 * not produce 250-character lines. Everything structural — tables, figures,
 * embeds, shortcode output, galleries, maps — is explicitly exempt and uses the
 * full width. Set "Cap paragraph line length" off in SAA → Settings →
 * Appearance and --saa-measure becomes "none".
 */
.saa-entry__content > p,
.saa-entry__content > ul,
.saa-entry__content > ol,
.saa-entry__content > blockquote,
.saa-entry__content > h2,
.saa-entry__content > h3,
.saa-entry__content > h4,
.saa-archive-desc > p {
	max-width: var(--saa-measure);
}

.saa-entry__content > figure,
.saa-entry__content > table,
.saa-entry__content > .wp-block-table,
.saa-entry__content > .wp-block-embed,
.saa-entry__content > .wp-block-gallery,
.saa-entry__content > .wp-block-columns,
.saa-entry__content > .alignwide,
.saa-entry__content > .alignfull,
.saa-entry__content > .saa-map-wrap,
.saa-entry__content > .saa-cards,
.saa-entry__content > .saa-results,
.saa-entry__content > .saa-steps,
.saa-entry__content > .saa-stats,
.saa-entry__content > .saa-search,
.saa-entry__content > .saa-dashboard,
.saa-entry__content > .saa-source-grid,
.saa-entry__content > .saa-action-cards,
.saa-entry__content > .saa-donate {
	max-width: 100%;
}

.saa-entry__content h2 { margin-top: 1.6em; }
.saa-entry__content h3 { margin-top: 1.4em; }

.saa-entry__content blockquote {
	margin: 1.4em 0;
	padding: 12px 18px;
	border-left: 4px solid var(--saa-accent);
	background: var(--saa-surface-2);
	border-radius: 0 var(--saa-radius) var(--saa-radius) 0;
}

.saa-entry__content table {
	width: 100%;
	border-collapse: collapse;
}

.saa-entry__content th,
.saa-entry__content td {
	padding: 8px 10px;
	border: 1px solid var(--saa-border);
	text-align: left;
}

.saa-entry__content pre,
.saa-entry__content code {
	background: var(--saa-surface-2);
	border-radius: var(--saa-radius);
}

.saa-entry__content pre { padding: 12px 14px; overflow: auto; }
.saa-entry__content code { padding: 1px 5px; font-size: .88em; }

.saa-entry__terms {
	margin: 18px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--saa-border);
	font-size: .82rem;
	color: var(--saa-muted);
}

.saa-postmeta {
	margin: 0 0 12px;
	font-size: .8rem;
	color: var(--saa-muted);
}

.saa-postlist {
	display: grid;
	gap: 16px;
	margin-bottom: 24px;
}

.saa-teaser {
	background: var(--saa-surface);
	border: 1px solid var(--saa-border);
	border-radius: var(--saa-radius-lg);
	padding: 16px 18px;
	box-shadow: var(--saa-shadow);
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.saa-teaser__thumb img {
	width: 190px;
	border-radius: var(--saa-radius);
	display: block;
}

.saa-teaser__body { flex: 1; min-width: 0; }

.saa-teaser__title {
	margin: 0 0 6px;
	font-size: 1.18rem;
}

.saa-teaser__title a {
	color: var(--saa-heading);
	text-decoration: none;
}

.saa-teaser__title a:hover { color: var(--saa-accent); }

.saa-teaser__excerpt p { margin: 0 0 10px; }

.saa-teaser__more { margin: 0; }

/*
 * On a wide screen a single stacked column wastes most of the page, so the
 * listing grids fan out. These are the plugin's own grids, restyled here
 * because only the theme knows how much room there is.
 */
@media (min-width: 1500px) {
	.saa-postlist,
	.saa-main .saa-results,
	.saa-main .saa-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.saa-layout--wide .saa-main .saa-results,
	.saa-layout--wide .saa-main .saa-cards,
	.saa-layout--wide .saa-postlist {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.saa-main .saa-front-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 2100px) {
	.saa-postlist,
	.saa-main .saa-results,
	.saa-main .saa-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.saa-layout--wide .saa-main .saa-results,
	.saa-layout--wide .saa-main .saa-cards,
	.saa-layout--wide .saa-postlist {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.saa-archive-head { margin-bottom: 18px; }

.saa-archive-title {
	margin: 0 0 6px;
	font-size: clamp(1.4rem, 3vw, 1.95rem);
}

.saa-archive-desc { color: var(--saa-muted); }

.saa-empty {
	background: var(--saa-surface);
	border: 1px solid var(--saa-border);
	border-radius: var(--saa-radius-lg);
	padding: 26px;
	text-align: center;
}

.saa-404-links {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	line-height: 2;
}

/* ==========================================================================
   9. Pagination & post navigation
   ========================================================================== */

.saa-wp-pagination,
.navigation.pagination {
	margin: 24px 0;
	display: flex;
	justify-content: center;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.navigation.pagination .page-numbers {
	padding: 7px 13px;
	border: 1px solid var(--saa-border);
	border-radius: var(--saa-radius);
	background: var(--saa-surface);
	color: var(--saa-text);
	text-decoration: none;
	font-size: .85rem;
}

.navigation.pagination .page-numbers.current {
	background: var(--saa-accent);
	border-color: var(--saa-accent);
	color: var(--saa-accent-ink);
}

.saa-postnav {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 24px;
	font-size: .88rem;
}

.saa-postnav .nav-links {
	display: flex;
	justify-content: space-between;
	width: 100%;
	gap: 14px;
}

.saa-navlabel {
	display: block;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--saa-muted);
}

.saa-pagelinks {
	margin: 18px 0 0;
	font-size: .85rem;
}

/* ==========================================================================
   10. Comments
   ========================================================================== */

.saa-comments {
	background: var(--saa-surface);
	border: 1px solid var(--saa-border);
	border-radius: var(--saa-radius-lg);
	padding: 22px 26px;
	box-shadow: var(--saa-shadow);
	margin: 0 0 24px;
}

.saa-commentlist {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.saa-commentlist .children {
	list-style: none;
	margin: 12px 0 0 26px;
	padding: 0;
}

.saa-commentlist .comment-body {
	padding: 14px 0;
	border-bottom: 1px solid var(--saa-border);
}

.saa-commentlist .comment-author img {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 8px;
}

.saa-commentform input[type="text"],
.saa-commentform input[type="email"],
.saa-commentform input[type="url"],
.saa-commentform textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--saa-border);
	border-radius: var(--saa-radius);
	background: var(--saa-surface);
	color: var(--saa-text);
	font-family: inherit;
	font-size: .95rem;
}

.saa-commentform .submit {
	padding: 10px 18px;
	border: 0;
	border-radius: var(--saa-radius);
	background: var(--saa-accent);
	color: var(--saa-accent-ink);
	font-weight: 600;
	cursor: pointer;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.saa-footer {
	background: var(--saa-header);
	color: rgba(255, 255, 255, .82);
	margin-top: auto;
	padding: 30px 0 22px;
}

:root[data-theme="dark"] .saa-footer { border-top: 1px solid var(--saa-border); }

.saa-footer__inner {
	max-width: var(--saa-max);
	margin: 0 auto;
	padding: 0 var(--saa-gutter);
	text-align: center;
}

.saa-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	text-align: left;
	margin-bottom: 26px;
}

.saa-footer__widgets .saa-widget {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .84);
	box-shadow: none;
	margin: 0;
}

.saa-footer__widgets .saa-widget__title {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .18);
}

.saa-footer__widgets .saa-widget a { color: #cfe3f3; }

.saa-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 1.9;
}

.saa-footer__menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	padding: 0;
	margin: 0 0 10px;
	font-size: .85rem;
}

.saa-footer__menu a,
.saa-footer__legal a {
	color: #cfe3f3;
	text-decoration: none;
}

.saa-footer__menu a:hover,
.saa-footer__legal a:hover { text-decoration: underline; }

.saa-footer__legal {
	font-size: .82rem;
	margin-bottom: 10px;
}

.saa-footer__tagline {
	font-size: .86rem;
	margin: 0 0 8px;
}

.saa-footer__copy {
	font-size: .8rem;
	margin: 0 0 6px;
	color: rgba(255, 255, 255, .7);
}

.saa-footer__disclaimer {
	font-size: .72rem;
	color: rgba(255, 255, 255, .5);
	margin: 0;
	max-width: 760px;
	margin-inline: auto;
	line-height: 1.55;
}

/* ==========================================================================
   12. Plugin surface tweaks inside the theme shell
   ========================================================================== */

.saa-main .saa-card,
.saa-main .saa-filterbar,
.saa-main .saa-panel,
.saa-main .saa-table,
.saa-main .saa-fieldset {
	box-shadow: var(--saa-shadow);
}

.saa-main .saa-dashboard,
.saa-main .saa-search,
.saa-main .saa-auth {
	background: var(--saa-surface);
	border: 1px solid var(--saa-border);
	border-radius: var(--saa-radius-lg);
	padding: 22px 26px;
	box-shadow: var(--saa-shadow);
	margin-bottom: 22px;
}

.saa-main .saa-search .saa-filterbar,
.saa-main .saa-dashboard .saa-panel,
.saa-main .saa-dashboard .saa-table {
	box-shadow: none;
}

.saa-layout--wide .saa-main .saa-form { max-width: 100%; }

/* ==========================================================================
   13. Responsive
   ========================================================================== */

/*
 * The three-column layout needs roughly left + right + 520px of main before it
 * starts squeezing, so the right column folds underneath first, then the left.
 */
@media (max-width: 1280px) {
	:root { --saa-left-width: 220px; --saa-right-width: 265px; --saa-gutter: 20px; }
}

@media (max-width: 1180px) {
	.saa-layout { grid-template-columns: var(--saa-left-width) minmax(0, 1fr); }

	body.has-resources-column .saa-layout {
		grid-template-columns: var(--saa-left-width) var(--saa-resources-width) minmax(0, 1fr);
	}

	.saa-col--right {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 16px;
		align-items: start;
	}
	.saa-col--right .saa-widget { margin: 0; }
}

/* Two narrow columns plus a main column stop fitting well before this. */
@media (max-width: 1040px) {
	body.has-resources-column .saa-layout {
		grid-template-columns: var(--saa-left-width) minmax(0, 1fr);
	}

	body.has-resources-column .saa-col--resources {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 16px;
		align-items: start;
	}
}

@media (max-width: 900px) {
	.saa-navbar { position: static; }

	.saa-navbar__burger { display: block; }

	.saa-menu {
		display: none;
		width: 100%;
		flex-direction: column;
		padding-bottom: 8px;
	}

	.saa-menu.is-open { display: flex; }

	.saa-navbar__inner { flex-wrap: wrap; padding: 0 12px; }

	.saa-menu__item--right { margin-left: 0; }

	.saa-menu__link {
		width: 100%;
		justify-content: space-between;
		padding: 12px 10px;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}

	.saa-mega,
	.saa-menu__item--right .saa-mega {
		position: static;
		min-width: 0;
		width: 100%;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: rgba(255, 255, 255, .06);
		padding: 12px 10px;
	}

	.saa-mega__title { color: rgba(255, 255, 255, .7); border-bottom-color: rgba(255, 255, 255, .18); }
	.saa-mega__link { color: #fff; }
	.saa-mega__link:hover, .saa-mega__link:focus { background: rgba(255, 255, 255, .12); color: #fff; }
	.saa-mega__desc, .saa-mega__note, .saa-mega__footer { color: rgba(255, 255, 255, .62); }
	.saa-mega__footer { border-top-color: rgba(255, 255, 255, .18); }

	.saa-layout,
	body.has-resources-column .saa-layout { grid-template-columns: minmax(0, 1fr); }
	.saa-col--left, .saa-col--right, .saa-col--resources { grid-column: auto; }
	body.has-resources-column .saa-col--resources { display: block; }
	.saa-col--left { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
	.saa-col--left .saa-widget { margin: 0; }

	/*
	 * On a phone the person is usually the one who needs help, so the action
	 * cards come first and the news and alert columns follow. The source order
	 * stays left-column-first for screen readers on desktop.
	 */
	.saa-main { order: 1; }
	.saa-col--resources { order: 2; }
	.saa-col--left { order: 3; }
	.saa-col--right { order: 4; }

	.saa-masthead__inner { flex-direction: column; align-items: flex-start; }
	.saa-masthead__aside { align-items: flex-start; width: 100%; }
	.saa-searchform { max-width: 100%; width: 100%; }

	.saa-teaser { flex-direction: column; }
	.saa-teaser__thumb img { width: 100%; }

	.saa-entry, .saa-comments { padding: 18px; }
	.saa-main .saa-dashboard, .saa-main .saa-search, .saa-main .saa-auth { padding: 18px; }

	:root { --saa-gutter: 16px; }
	.saa-navbar__inner { padding-left: var(--saa-gutter); padding-right: var(--saa-gutter); }
}

@media (max-width: 560px) {
	:root { --saa-gutter: 14px; }

	body.saa-body { font-size: 15px; }
	.saa-container { padding-top: 12px; padding-bottom: 30px; }
	.saa-utility__inner { justify-content: flex-start; }
	.saa-postnav .nav-links { flex-direction: column; }

	/* Never let a wide table or map force the whole page to scroll sideways. */
	.saa-entry__content { overflow-x: auto; }
	.saa-table, .saa-detail-table { font-size: .85rem; }
	.saa-detail-table th { width: 42%; }
}

/* A last-resort guard: nothing may push the document wider than the screen. */
html, body.saa-body { overflow-x: hidden; max-width: 100%; }

@media print {
	.saa-navbar,
	.saa-utility,
	.saa-col,
	.saa-masthead__aside,
	.saa-footer__widgets,
	.saa-theme-toggle,
	.saa-skip { display: none !important; }

	body.saa-body { background: #fff; color: #000; }
	.saa-layout { display: block; }
	.saa-entry { border: 0; box-shadow: none; padding: 0; }
}

/* ==========================================================================
   14. Location strip inside the mega menu
   ========================================================================== */

.saa-mega__top {
	margin: -4px 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--saa-border);
}

.saa-mega__top .saa-whereami {
	background: var(--saa-surface-2);
	border-color: var(--saa-border);
	border-left-width: 4px;
}

/* On a phone the panel sits inside the dark drawer, so invert it. */
@media (max-width: 900px) {
	.saa-mega__top {
		border-bottom-color: rgba(255, 255, 255, .18);
	}

	.saa-mega__top .saa-whereami {
		background: rgba(255, 255, 255, .08);
		border-color: rgba(255, 255, 255, .18);
		border-left-color: rgba(255, 255, 255, .45);
		color: #fff;
	}

	.saa-mega__top .saa-whereami__lead,
	.saa-mega__top .saa-whereami__source,
	.saa-mega__top .saa-whereami__correct { color: rgba(255, 255, 255, .72); }

	.saa-mega__top .saa-whereami__place { color: #fff; }

	.saa-mega__top .saa-whereami__locate {
		color: #fff;
		border-color: rgba(255, 255, 255, .35);
	}

	.saa-mega__top .saa-whereami__locate:hover { background: rgba(255, 255, 255, .15); }
}

/* ==========================================================================
   15. The animated wordmark
   ========================================================================== */

/*
 * Red, white and blue sweep across the lettering while a dark outline holds
 * every glyph together, so the name stays legible whichever colour is passing
 * behind it.
 *
 * The ribbon is a repeating gradient two element-widths wide, and the
 * animation slides it left by exactly one image width — which is why the loop
 * has no seam, and why --saa-logo-band is 100% / (16 x runs): one
 * red-white-blue run takes eight bands, so a whole number of runs fits the
 * image and the tiles meet without a joint.
 *
 * The settings screen writes --saa-logo-* on :root. Every value below is only
 * a fallback for a site running the theme without the plugin.
 */

.saa-wordmark {
	display: inline-block;
	max-width: 100%;
	text-decoration: none;
	-webkit-text-stroke: var(--saa-logo-stroke, 1.2px) var(--saa-logo-stroke-color, #000);
	paint-order: stroke fill;
}

/*
 * Without background-clip: text — very old browsers — the lettering simply
 * keeps the heading colour. Nothing disappears.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.saa-wordmark {
		--saa-logo-ribbon: repeating-linear-gradient(
			90deg,
			var(--saa-logo-red, #b22234) 0,
			var(--saa-logo-red, #b22234) calc(var(--saa-logo-band, 3.125%) * 3),
			var(--saa-logo-white, #fff) calc(var(--saa-logo-band, 3.125%) * 4),
			var(--saa-logo-blue, #3c3b6e) calc(var(--saa-logo-band, 3.125%) * 5),
			var(--saa-logo-blue, #3c3b6e) calc(var(--saa-logo-band, 3.125%) * 7),
			var(--saa-logo-red, #b22234) calc(var(--saa-logo-band, 3.125%) * 8)
		);

		background-image: var(--saa-logo-ribbon);
		background-size: 200% 100%;
		background-repeat: repeat;
		background-position: 0 0;
		-webkit-background-clip: text;
		background-clip: text;
		animation: saa-wordmark-sweep var(--saa-logo-speed, 7s) linear infinite;
	}

	/*
	 * Specific enough to beat the ordinary link and heading colours in the
	 * masthead and the footer, hover and focus included.
	 */
	.saa-wordmark,
	.saa-wordmark__ch,
	.saa-brand__title a.saa-wordmark,
	.saa-brand__title a.saa-wordmark:hover,
	.saa-brand__title a.saa-wordmark:focus,
	.saa-footer .saa-wordmark,
	.saa-widget__title .saa-wordmark { color: transparent; }
}

@keyframes saa-wordmark-sweep {
	from { background-position: 0 0; }
	to   { background-position: -200% 0; }
}

/* ------------------------------------------------------------- The wave --- */

/*
 * A letter that moves has to carry its own piece of the ribbon: a moving
 * glyph is painted in a later pass than its parent's background, so an
 * ancestor's background-clip: text would leave it hollow. JavaScript measures
 * each letter and writes --saa-x (how far into the wordmark it sits) and
 * --saa-mark-w (the width of one full pass), which line the pieces back up
 * into a single continuous ribbon.
 */

.saa-wordmark--wave {
	background-image: none;
	animation: none;
}

.saa-wordmark__ch {
	display: inline-block;
	will-change: transform;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.saa-wordmark--wave .saa-wordmark__ch {
		background-image: var(--saa-logo-ribbon);
		background-size: var(--saa-mark-w, 200%) 100%;
		background-repeat: repeat;
		background-position: calc(var(--saa-x, 0px) * -1) 0;
		-webkit-background-clip: text;
		background-clip: text;
		animation:
			saa-wordmark-sweep-ch var(--saa-logo-speed, 7s) linear infinite,
			saa-wordmark-wave var(--saa-logo-wave-speed, 2.6s) ease-in-out infinite;
		animation-delay: 0s, calc(var(--saa-ch, 0) * -.07s);
	}
}

@keyframes saa-wordmark-sweep-ch {
	from { background-position: calc(var(--saa-x, 0px) * -1) 0; }
	to   { background-position: calc((var(--saa-x, 0px) + var(--saa-mark-w, 0px)) * -1) 0; }
}

@keyframes saa-wordmark-wave {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(calc(var(--saa-logo-wave-lift, .12em) * -1)); }
}

/* The footer lettering is quieter: smaller type, so a thinner outline. */
.saa-wordmark--footer {
	-webkit-text-stroke-width: calc(var(--saa-logo-stroke, 1.2px) * .6);
}

/*
 * A visitor who has asked for less motion gets the flag standing still
 * rather than no flag at all.
 */
@media (prefers-reduced-motion: reduce) {
	.saa-wordmark,
	.saa-wordmark--wave .saa-wordmark__ch {
		animation: none !important;
		transform: none !important;
	}
}

/* High-contrast mode: drop the ribbon entirely and use the system colour. */
@media (forced-colors: active) {
	.saa-wordmark,
	.saa-wordmark__ch {
		background-image: none;
		color: CanvasText;
		-webkit-text-stroke: 0;
		animation: none;
	}
}

/* ==========================================================================
   16. The location line under the Information panel
   ========================================================================== */

.saa-mega__foot {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--saa-border);
}

/*
 * One flowing sentence rather than a stacked panel: everything inside goes
 * inline, so it sits on a single line where there is room and wraps like
 * ordinary text where there is not.
 */
.saa-whereami--line {
	display: block;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: .84rem;
	line-height: 1.6;
}

.saa-whereami--line .saa-whereami__pin {
	display: inline;
	margin-right: 4px;
}

.saa-whereami--line .saa-whereami__body,
.saa-whereami--line .saa-whereami__line,
.saa-whereami--line .saa-whereami__source,
.saa-whereami--line .saa-whereami__correct {
	display: inline;
	margin: 0;
	padding: 0;
}

/* Separators, so the clauses do not run into one another. */
.saa-whereami--line .saa-whereami__source::before,
.saa-whereami--line .saa-whereami__correct::before {
	content: " · ";
	color: var(--saa-muted);
}

.saa-whereami--line .saa-whereami__locate {
	display: inline-flex;
	margin-left: 6px;
	vertical-align: baseline;
}

/* On a phone the panel is inside the dark drawer. */
@media (max-width: 900px) {
	.saa-mega__foot { border-top-color: rgba(255, 255, 255, .18); }

	.saa-mega__foot .saa-whereami--line,
	.saa-mega__foot .saa-whereami--line .saa-whereami__place { color: #fff; }

	.saa-mega__foot .saa-whereami--line .saa-whereami__lead,
	.saa-mega__foot .saa-whereami--line .saa-whereami__source { color: rgba(255, 255, 255, .72); }

	.saa-mega__foot .saa-whereami--line .saa-whereami__locate {
		color: #fff;
		border-color: rgba(255, 255, 255, .35);
	}
}