/* ── Rich footer (.hb-footer) — shared stylesheet ──
   Rules MOVED from home-b-bold-bento.css so the footer can render on any
   page (currently: homepage + dashboard) without loading the whole
   homepage stylesheet. Markup: templates/partials/footer-rich.php.

   The footer is a de-scoped sibling of <main> (HTML spec forbids <footer>
   inside <main>), so it does NOT inherit .home-b's font or its
   --space-2xl-3xl scope override. The top padding below pins the SAME
   clamp the .home-b override uses (home-b-bold-bento.css) so the footer
   renders identically on every page (80/64/48px rhythm @1440/768/390).
   Content-box (not covered by the .home-b * reset): the 2px border-top
   adds outer size — safe (plan A6). */

.hb-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--space-s-l, 16px);
	box-sizing:border-box
}

.hb-footer {
	background: var(--lmin-slate-900, #0F172A);
	color: var(--lmin-slate-300, #CBD5E1);
	font-family: var(--lmin-font-sans, system-ui, sans-serif);
	line-height: 1.6;
	padding: clamp(2.5rem, 1.9429rem + 2.2857vw, 4rem) 0 var(--space-m, 1.5rem);
	border-top: var(--nb-border-width, 2px) solid var(--nb-border-color, #0F172A);
}

.hb-footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-l-xl, 2rem);
	padding-bottom: var(--space-l, 2rem);
	border-bottom: var(--nb-border-width, 2px) solid rgba(203, 213, 225, 0.2);
}

.hb-footer h3 {
	font-size: var(--step--2, 0.6944rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lmin-slate-400, #94A3B8);
	margin: 0 0 var(--space-xs, 0.75rem);
}

.hb-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, 0.5rem);
}

.hb-footer a {
	color: var(--lmin-slate-300, #CBD5E1);
	text-decoration: none;
	font-size: var(--step--1, 0.8333rem);
}

.hb-footer a:hover {
	color: #fff;
	text-decoration: none;
	border-bottom: var(--nb-border-width, 2px) solid #fff;
}

/* G2: white outline on dark — #2563EB fails 1.4.11 (3:1) on #0F172A */
.hb-footer a:focus-visible {
	outline: var(--nb-focus-outline-on-dark, 2px solid #FFFFFF);
	outline-offset: var(--nb-focus-offset, 2px);
}

.hb-footer-bottom {
	padding-top: var(--space-s, 1rem);
	font-size: var(--step--2, 0.6944rem);
	color: var(--lmin-slate-400, #94A3B8);
}

.hb-footer-bottom p {
	margin: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.hb-footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.hb-footer-grid {
		grid-template-columns: 1fr;
	}
}

/* Dark mode — footer is dark slate in both modes; only the grid divider
   needs a tweak (moved from home-b-bold-bento.css dark section). */
[data-theme="dark"] .hb-footer-grid {
	border-bottom-color: rgba(203, 213, 225, 0.15);
}