/**
 * Footer — Gg (F6)
 *
 * Figma node 2:551 (desktop 1440) + mobile mock 2011:103 (D1, Home 375).
 * Full rebuild of the NHC-stock footer. REMOVED (NHC leftovers): the
 * font-weight:900 tagline (faux-bold — only 500/600 faces are self-hosted
 * post-F2), the "Stay in Touch" newsletter signup + Subscribe button, the
 * "Your donation can be a tax deduction" line, the 3-column layout, and the
 * wp_nav_menu footer/social mounts (which fell back to an admin "Assign a menu"
 * placeholder when unassigned). KEPT / BUILT per 2:551: centred wordmark, a
 * centred 6-link nav (plural "Portfolio & Collaborations", Q11 / node 2:540),
 * a hairline divider, copyright, and a single LinkedIn social icon.
 *
 * Footer links + the LinkedIn icon are HARD-COMPOSED in parts/footer.html
 * (not wp_nav_menu): a 6-page brochure footer with a fixed structure renders
 * identically in every environment with zero DB dependency and never shows the
 * "Assign a menu" placeholder — the CLAUDE.md-sanctioned "hard-composed nav
 * blocks in the footer part" path, and the same "render designed content, never
 * a placeholder" stance F5 took for the empty secondary tier. inc/navigation.php
 * is therefore UNTOUCHED (its footer/social render fns stay for potential reuse).
 *
 * This partial glob-enqueues AFTER assets/css/global.css, whose SITE FOOTER block
 * was written for the OLD red band (white text, red bg, 3-column responsive). All
 * overrides below are scoped under .kd-site-footer so they out-specify global's
 * `.kd-site-footer X` rules on normal cascade order — no !important except where
 * neutralising an existing !important in that read-only shared file (documented).
 * Colours/fonts/font-sizes reference --kd-* tokens; structural px literals match
 * the Figma node the same way gg-header.css does (heights/paddings aren't tokens).
 */

/* ══ Band — cream, full-width, 1216 content column ═════════════════════════════
   bg #fff8d4 (2:530) via the has-cream-background-color block class + this rule
   (loads after global's `.kd-site-footer{background:primary}` → wins on order).
   Text flips to black (2:540/2:544) — global painted it near-white for the red
   bar. padding-inline is global's own edge-pad !important (line 764), which caps
   the content at 1216 centred with the 7.78% gutter — the SAME container the
   header + every band uses, so the footer lines up. padding-block per 2:551:
   73px above the wordmark, 26px below the bottom row. */
.kd-site-footer {
	background-color: var(--kd-color-cream);
	color: var(--kd-color-contrast);
	padding-top: 73px;
	padding-bottom: 26px;
}

/* ══ Inner grid — reflows between desktop and mobile without reordering the DOM ═
   Desktop (2:551): centred logo, centred nav, full-width divider, then a bottom
   row with copyright LEFT + the LinkedIn icon RIGHT.
   Mobile (2011:103): single column — logo, nav, LinkedIn (centred), divider,
   copyright (left). The icon moves ABOVE the divider on mobile, so grid-areas
   (not flex order) drive the reflow. The 5 grid items are the wp:html children
   (logo/nav/social/hr) + the copyright group — see parts/footer.html. */
.kd-site-footer .kd-footer-inner {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"logo      logo"
		"nav       nav"
		"landack   landack"
		"divider   divider"
		"copyright social";
	align-items: center;
	justify-items: center;
	column-gap: var(--kd-space-md); /* 24px min between copyright + icon */
	width: 100%;
}

/* Neutralise the group block-gap margins WP emits on a default-layout group so
   this grid's spacing is driven solely by the rules below. */
.kd-site-footer .kd-footer-inner > * {
	margin: 0;
}

/* ══ Wordmark — centred (2:532: 160×70 @ top 73px) ═════════════════════════════
   Same hi-res asset the header uses (gracie-wordmark-nav.png, 242×106 native);
   at height 70 it renders ~160px wide = the Figma box. Own class so global's
   `.kd-footer-logo img{width:84px}` (NHC value) is overridden here. */
.kd-site-footer .kd-footer-logo {
	grid-area: logo;
	display: inline-flex;
	line-height: 0;
}
.kd-site-footer .kd-footer-logo img {
	display: block;
	height: 70px;
	width: auto;
	max-width: 100%;
}

/* ══ Nav — centred vertical list, Inter Regular 17/22 black (2:540) ════════════
   6px between links (2:540: 22px line + 6px gap = 28px step). Hover → maroon,
   matching the header's on-cream link hover (D2 Nav/Link). */
.kd-site-footer .kd-footer-nav {
	grid-area: nav;
	margin-top: 24px; /* logo → nav (2:551) */
}
.kd-site-footer .kd-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	/* Pin the list line-box to 22px (2:540). Without this each <li> inherits the
	   body's 1.5×16 = 24px line-height, making every link row 2px too tall — the
	   nav block renders 174px instead of the Figma 162px, and the mobile
	   nav→icon gap opens 2px×6 too far. */
	line-height: 22px;
}
.kd-site-footer .kd-footer-nav a {
	font-family: var(--kd-font-body); /* Inter */
	font-weight: 400;
	font-size: var(--kd-size-footer-link); /* 17px */
	line-height: 22px;
	color: var(--kd-color-contrast); /* black */
	text-decoration: none;
}
.kd-site-footer .kd-footer-nav a:hover,
.kd-site-footer .kd-footer-nav a:focus-visible {
	color: var(--kd-color-secondary); /* maroon #900000 */
	text-decoration: none;
}

/* ══ Land Acknowledgement — small text under the nav (client add, 2026-09) ═════
   Client copy, placed under the footer nav per their request ("It can go under
   the menu"). Small/quiet treatment: --kd-size-sub-label (15px, the theme's
   existing small-text token — same size the copyright line uses) at
   --kd-color-neutral-700 (#3F3F46) on the #fff8d4 cream band → ~9.6:1 contrast,
   comfortably past WCAG AA's 4.5:1 (neutral-500 #888A8A would only clear ~3.3:1,
   hence neutral-700 here instead). Constrained to ~72ch and centred so the
   paragraph reads as a quiet aside, not body copy, matching the footer's
   centred rhythm at every width — no separate mobile override needed. */
.kd-site-footer .kd-footer-landack {
	grid-area: landack;
	/* 2026-09-16 (client): the closing word "together." was stranded alone on the
	   last line. `text-wrap: pretty` is the fix — it is the property designed to
	   prevent orphans in body copy. NOT `balance`: that evens line lengths for
	   SHORT blocks and Chrome ignores it past ~6 lines, which is exactly this
	   paragraph's length. Widened 72ch -> 76ch at the client's request; the
	   original 72ch was a deliberate "quiet aside" choice (see note above), so
	   revert this one value if the footer rhythm reads wrong. */
	max-width: 76ch;
	text-wrap: pretty;
	margin: 24px auto 0;
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-sub-label); /* 15px */
	line-height: 1.5;
	color: var(--kd-color-neutral-700); /* #3F3F46 — AA-passing on cream */
	text-align: center;
}

/* ══ Divider — 1px solid black hairline, full content width (2:543) ════════════
   Pixel-sampled from the 1:1 node render: a solid #000 1px line (not a grey/
   translucent stroke). A bare <hr class="kd-footer-divider"> (no wp-block-
   separator class) sidesteps global's `.kd-footer-divider.wp-block-separator`
   accent-divider rule entirely. */
.kd-site-footer .kd-footer-divider {
	grid-area: divider;
	justify-self: stretch;
	width: 100%;
	height: 1px;
	border: 0;
	margin: 56px 0 24px; /* nav → divider 56px, divider → bottom row 24px (2:551) */
	background-color: var(--kd-color-contrast); /* black */
	opacity: 1;
}

/* ══ Copyright — Inter Regular 15/22 black, left of the bottom row (2:544) ══════
   Reuses the .kd-footer-copyright class → override global's near-white colour +
   0.85 opacity (written for the red bar). The [gg_year] shortcode renders the
   year inside this div (see parts/footer.html). */
.kd-site-footer .kd-footer-copyright {
	grid-area: copyright;
	justify-self: start;
	font-family: var(--kd-font-body); /* Inter */
	font-weight: 400;
	font-size: var(--kd-size-sub-label); /* 15px */
	line-height: 22px;
	color: var(--kd-color-contrast); /* black */
	opacity: 1;
	margin: 0;
}
/* wpautop wraps the [gg_year] shortcode output in a <p> — kill its default block
   margins so the line sits on the grid baseline (font/colour inherit from above). */
.kd-site-footer .kd-footer-copyright p {
	margin: 0;
}

/* ══ Social — LinkedIn in a maroon circle, right of the bottom row (2:545/2:546)
   36px #900000 circle (accent = maroon), white 'in' glyph. Right-aligned to the
   content edge on desktop. Hover darkens to the button-active maroon (#6b0000)
   — a derived state (no footer hover in Figma; reuses an existing token). The
   .kd-site-footer prefix (0,2,0) beats global's `.kd-site-footer a` (0,1,1) so
   the glyph stays white, not the near-white link colour global sets. */
.kd-site-footer .kd-footer-social {
	grid-area: social;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--kd-color-accent); /* maroon #900000 */
	color: var(--kd-color-white); /* glyph — white */
	transition: background-color var(--kd-transition-fast);
}
.kd-site-footer .kd-footer-social svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.kd-site-footer .kd-footer-social:hover,
.kd-site-footer .kd-footer-social:focus-visible {
	background-color: var(--kd-color-maroon-active); /* #6b0000 (derived) */
	color: var(--kd-color-white);
}

/* ══ (a11y) Keyboard focus ring — visible on the cream band ═════════════════════
   global.css:896 recolours `.kd-site-footer :focus-visible` to --kd-color-base
   (near-white #fffefa) — the light ring for the OLD red footer. On this cream
   band it is INVISIBLE (cream-on-cream) → the exact F5 regression. Restore a
   maroon ring (--kd-color-secondary #900000, ~9:1 vs the cream bg, > WCAG
   1.4.11 3:1). Same selector/specificity as global's rule, loads after → wins;
   offset 2px keeps the icon's ring on the cream OUTSIDE the maroon circle so it
   reads there too. Matches the header's 2px maroon ring. */
.kd-site-footer :focus-visible {
	outline: 2px solid var(--kd-color-secondary);
	outline-offset: 2px;
}

/* ══ Tablet + mobile gutter — restore the proportional edge-pad ════════════════
   global.css forces `.kd-site-footer` padding-inline to --kd-space-md (24px)
   !important at ≤1024 AND ≤768 (NHC-era rules sized for the old columns footer).
   Override with edge-pad !important so the band keeps the same 1216 content
   column + 7.78% gutter as the header at every width, collapsing to the D1 20px
   floor <768 (tokens.css sets --kd-gutter:20px there). Justified !important:
   it neutralises an existing !important in a read-only shared file. */
@media (max-width: 1024px) {
	.kd-site-footer {
		padding-left: var(--kd-edge-pad) !important;
		padding-right: var(--kd-edge-pad) !important;
	}
}

/* ══ Mobile <768 — single column, icon centred above the divider (2011:103) ════
   Breakpoint is 767.98px (not 768) so the layout switch and the gutter switch
   fire together: tokens.css drops --kd-gutter to 20px at ≤767.98 only, so keeping
   the reflow here leaves iPad-portrait (exactly 768) on the desktop 2-column band
   with proportional gutters — which is what matches node 2:551 at the 768 verify
   width — and hands phones the mobile mock 2011:103 treatment. */
@media (max-width: 767.98px) {
	.kd-site-footer {
		padding-top: 48px; /* wordmark top (2012:114) */
		padding-bottom: 32px;
	}
	.kd-site-footer .kd-footer-inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"logo"
			"nav"
			"landack"
			"social"
			"divider"
			"copyright";
		row-gap: 24px; /* ~24px rhythm (2011:103) */
		column-gap: 0;
	}
	/* row-gap owns the vertical rhythm now — drop the desktop margins. */
	.kd-site-footer .kd-footer-nav {
		margin-top: 0;
	}
	.kd-site-footer .kd-footer-landack {
		margin-top: 0;
		max-width: 100%;
	}
	.kd-site-footer .kd-footer-divider {
		margin: 0;
	}
	/* Wordmark 110×48 on mobile (2012:114). */
	.kd-site-footer .kd-footer-logo img {
		height: 48px;
	}
	/* LinkedIn circle grows to a 40px touch target, centred (2012:122). */
	.kd-site-footer .kd-footer-social {
		justify-self: center;
		width: 40px;
		height: 40px;
	}
	.kd-site-footer .kd-footer-social svg {
		width: 20px;
		height: 20px;
	}
	/* Copyright spans + left-aligns at the 20px gutter (2012:124). The mobile mock
	   (2011:103) drops the "Copyright" word and shows just "© [year] …" — hide the
	   prefix span. At the 20px gutter the short string is 346px vs a 335px content
	   column, so it still overflows 15px by ~11px → step down to 14px (≈323px) to
	   hold it on ONE line, matching the mock. Desktop keeps "Copyright ©…" 15px. */
	.kd-site-footer .kd-footer-copyright {
		justify-self: stretch;
		text-align: left;
		font-size: 14px;
	}
	.kd-site-footer .kd-copy-prefix {
		display: none;
	}
	/* Mobile nav link gaps open up (2011:103: ~16px between links). */
	.kd-site-footer .kd-footer-nav ul {
		gap: 16px;
	}
}