/**
 * NKT Footer — cool blue-gray redesign, mockup-aligned.
 *
 * Self-contained, namespaced under .nkt-ft. A cool dark blue-gray ground
 * (Tailwind gray-900 lineage) grounding the page beneath the light "Discover
 * More" section, with the "Sand & Coral" coral accent kept for buttons/links.
 * Three columns — brand+donate | connect | explore — over a hairline legal
 * bar. Everything runs through the tokens on .nkt-ft so it re-themes from one
 * place.
 */

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

.nkt-ft {
	--ft-bg:      #111827; /* cool blue-gray ground (Tailwind gray-900) */
	--ft-bg-2:    #0d131f; /* a touch darker toward the base for depth */
	--ft-ink:     #F9FAFB; /* headings / wordmark */
	--ft-muted:   #9CA3AF; /* body + link rest (gray-400, ~6.7:1 on ground) */
	--ft-faint:   #8B93A1; /* legal / copyright, still ≥4.5:1 on ground */
	--ft-line:        #1F2937; /* hairlines + social circle ground (gray-800) */
	--ft-accent:      #FF6A3C; /* coral — safe as link TEXT on the dark ground (~5.9:1) */
	--ft-accent-ink:  #E0521F; /* darker coral so white text on the button clears AA */
	--ft-accent-dark: #C9481A; /* button :hover */
	/* match the site chrome's brand sans (--font-sans in nkt-redesign-chrome):
	   'mundial' comes from the Typekit kit the chrome enqueues sitewide, so it's
	   already loaded on every page the footer renders on. Inter + system-ui are
	   the graceful fallbacks. This is why the footer now reads like the rest of
	   the redesign instead of the bare system font. */
	--ft-sans: 'mundial', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* display serif for the wordmark + column headers — the same Playfair the
	   Modern Buddhism section uses for its title (and --font-serif in the
	   chrome), enqueued sitewide, so the footer headers read the same. */
	--ft-serif: 'Playfair Display', Georgia, "Times New Roman", serif;

	background: linear-gradient(180deg, var(--ft-bg) 0%, var(--ft-bg-2) 100%);
	color: var(--ft-muted);
	font-family: var(--ft-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.nkt-ft a { color: inherit; text-decoration: none; }
.nkt-ft p { margin: 0; }

.nkt-ft__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(44px, 5vw, 64px) clamp(16px, 4vw, 40px) 30px;
}

/* ── columns ─────────────────────────────────────────────── */
.nkt-ft__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px 56px;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--ft-line);
}

/* extra .nkt-ft prefix + text-transform:none defeat the theme's uppercase h3
   rule (0,1,1) so these read as Title-Case Playfair headers like the Modern
   Buddhism section, not tracked all-caps sans labels. */
.nkt-ft .nkt-ft__h {
	color: var(--ft-ink);
	font-family: var(--ft-serif);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.25;
	margin: 0 0 16px;
}
/* stacked heading blocks inside the connect column */
.nkt-ft__connect .nkt-ft__h + * { margin-bottom: 26px; }
.nkt-ft__connect .nkt-ft__h:not(:first-child) { margin-top: 4px; }

/* ── col 1: brand ────────────────────────────────────────── */
.nkt-ft__mark {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}
.nkt-ft__emblem {
	width: 42px; height: 42px; flex: none;
	/* source mark is black line-art on transparent — invert to read on the dark ground */
	filter: invert(1) brightness(1.7) contrast(1.05);
}
.nkt-ft__wordmark {
	color: var(--ft-ink);
	font-family: var(--ft-serif);
	font-size: clamp(20px, 2.2vw, 23px);
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.15;
}
/* `.nkt-ft p { margin: 0 }` above is (0,1,1) — beats a plain `.nkt-ft__blurb`
   class selector (0,1,0) regardless of source order, so margin-bottom below
   was silently dropped. Tie it at (0,1,1) with a `p.` prefix and rely on
   this rule printing later to win. */
p.nkt-ft__blurb {
	color: var(--ft-muted);
	font-size: 14px;
	line-height: 1.7;
	max-width: 52ch;
	margin-bottom: 40px;
}

.nkt-ft__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 15px 32px;
	border-radius: 11px;
	font-weight: 600; font-size: 14.5px; letter-spacing: 0.01em;
	line-height: 1.2;
	transition: transform 0.2s, background-color 0.2s;
}
/* Deeper coral so the white label clears AA (plain #FF6A3C + white = 2.6:1). */
/* The extra .nkt-ft prefix beats `.nkt-ft a { color: inherit }`, which would
   otherwise drop the label to muted-gray instead of white. */
.nkt-ft .nkt-ft__btn--accent { background: var(--ft-accent-ink); color: #fff; }
.nkt-ft__btn--accent:hover { background: var(--ft-accent-dark); transform: translateY(-1px); }

/* ── col 2: connect links ────────────────────────────────── */
/* extra .nkt-ft prefix beats `.nkt-ft a { color: inherit }` (0,1,1), which
   would otherwise drop these coral links to the inherited muted gray. */
.nkt-ft .nkt-ft__link {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 14.5px; color: var(--ft-accent);
	transition: color 0.2s;
}
.nkt-ft__link:hover { color: var(--ft-accent-dark); }
.nkt-ft__link svg {
	width: 17px; height: 17px; flex: none;
	fill: none; stroke: currentColor; stroke-width: 1.7;
}
.nkt-ft__link svg.is-filled { fill: currentColor; stroke: none; }

.nkt-ft__social { display: flex; gap: 10px; }
.nkt-ft__social a {
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--ft-line);
	display: grid; place-items: center;
	color: var(--ft-muted);
	transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.nkt-ft__social a:hover {
	background: var(--ft-accent); color: #fff; transform: translateY(-2px);
}
.nkt-ft__social svg { width: 16px; height: 16px; fill: currentColor; }

/* ── col 3: explore nav ──────────────────────────────────── */
.nkt-ft__quick { display: flex; flex-direction: column; }
.nkt-ft__quick a {
	font-size: 14px; color: var(--ft-muted);
	padding: 5px 0;
	transition: color 0.2s;
}
.nkt-ft__quick a:hover { color: var(--ft-accent); }

/* ── bottom: legal ───────────────────────────────────────── */
.nkt-ft__bot {
	display: flex; flex-wrap: wrap;
	justify-content: space-between; align-items: baseline;
	gap: 10px 28px;
	padding-top: 22px;
	font-size: 13px; color: var(--ft-faint);
}
.nkt-ft__bot p + p { margin-top: 4px; }
.nkt-ft__bot a { color: var(--ft-faint); transition: color 0.2s; }
.nkt-ft__bot a:hover { color: var(--ft-accent); }
.nkt-ft__legal { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.nkt-ft__legal a { color: var(--ft-muted); }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
	.nkt-ft__cols { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
	.nkt-ft__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.nkt-ft__cols { grid-template-columns: 1fr; gap: 30px; }
	.nkt-ft__bot { flex-direction: column; align-items: flex-start; }
}

/* ── a11y ────────────────────────────────────────────────── */
.nkt-ft a:focus-visible,
.nkt-ft button:focus-visible {
	outline: 2px solid var(--ft-accent);
	outline-offset: 3px;
	border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
	.nkt-ft *, .nkt-ft *::before, .nkt-ft *::after { transition: none !important; }
}