/* Public footer CSS — mirrors the styles in scripts/apply_theme_and_hero.py
 * for the /welcome Web Page's footer. Loaded site-wide via
 * `web_include_css` so template-rendered public pages (/404, /verify,
 * /signup, /adopter-intake, /help) get a visually-identical footer to
 * the script-injected footer on /welcome.
 *
 * Keep this file byte-exact against the CSS block in
 * scripts/apply_theme_and_hero.py lines 427-515 — if you change one,
 * change the other in the same PR. The duplication is intentional:
 * the script can't import .css files at the time it writes the /welcome
 * Web Page content (single-file `custom_css` string is pushed inline to
 * the Web Page doctype), and the template pages can't read the script's
 * inline CSS. This stylesheet is the "source of truth" for future
 * refactors; the script should eventually read from this file.
 *
 * CSS variables (--br-primary-deep, --br-accent, --br-serif) are defined
 * on :root by the script's custom_css block which loads on the /welcome
 * page. For template pages that don't share that custom_css, we declare
 * our own local fallbacks on .br-footer scope so the footer renders
 * standalone without color/font drift.
 */

.br-footer {
	/* Local fallbacks for CSS vars defined in apply_theme_and_hero.py's
	 * custom_css. If a page that loads this CSS also loads the script's
	 * custom_css (unlikely for template pages), the root-scope vars win. */
	--br-primary-deep: #0A3A63;
	--br-accent: #F5A623;
	--br-serif: "Newsreader", Georgia, serif;

	background: var(--br-primary-deep);
	color: rgba(255,255,255,0.92);
	padding: 48px 24px 32px;
	font-size: 0.92rem;
	box-sizing: border-box;
}
.br-footer * { box-sizing: border-box; }

.br-footer-bottom a {
	color: rgba(255,255,255,0.95);
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,0.3);
	text-underline-offset: 2px;
}
.br-footer-bottom a:hover { text-decoration-color: var(--br-accent); }

.br-footer-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr repeat(3, 1fr);
	gap: 40px;
}

.br-footer-brand {
	font-family: var(--br-serif);
	font-size: 1.1rem;
	font-weight: 700;
	color: #FFFFFF;
	margin: 0 0 10px;
	letter-spacing: 0.01em;
}

.br-footer-disclaimer {
	font-size: 0.82rem;
	color: rgba(255,255,255,0.68);
	line-height: 1.5;
	margin: 0;
}

.br-footer-col h3 {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	margin: 0 0 14px;
}

.br-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.br-footer-col li { margin-bottom: 10px; }

.br-footer-col a {
	color: rgba(255,255,255,0.9);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 120ms ease;
}

.br-footer-col a:hover {
	color: #FFFFFF;
	border-bottom-color: var(--br-accent);
	text-decoration: none;
}

.br-footer-bottom {
	max-width: 1100px;
	margin: 32px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.14);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.8rem;
	color: rgba(255,255,255,0.65);
}

/* Responsive — mirrors apply_theme_and_hero.py lines 508, 514-515. */
@media (max-width: 900px) {
	.br-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
	.br-footer-inner { grid-template-columns: 1fr; gap: 28px; }
	.br-footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.br-footer-col a { transition: none; }
}