/*
 * PouchPick site footer — S9D-B Navy architecture (GLOBAL-COMMERCE-POLISH-
 * LOCK.md §46–§47) ported to the FT.1B HUMAN FINAL VISUAL LOCK by FT.2
 * (~/Documents/PouchPick-Labs/footer-lab/ft1b-final-lock-refinement/).
 * Loaded with the commerce shell (non-checkout pages, inc/assets.php).
 *
 * FT.2: stable future-complete navigation — active anchors and pending
 * plain-text labels share IDENTICAL box metrics (.pp-footer-link), so a
 * pending item promoting to a real link can never reflow the footer
 * (FT.1B 0px span→anchor contract). Pending ink is the FT.1B human lock:
 * 85% white in the columns, one step quieter (72%) in the legal bar.
 * Mobile is a native <details> accordion, all groups closed by default,
 * zero JS.
 *
 * VR NOTE (HOMEPAGE-VERTICAL-RHYTHM-LOCK.md §11): the locked homepage ink
 * contract includes the "help -> footer" cell, measured to the footer's
 * first ink (the Lime wordmark, on the retired plate's top line since
 * FOOTER-01). The grid's TOP padding therefore stays at the
 * committed 40px desktop / 32px mobile — a deliberate MINOR deviation from
 * the FT.1B lab's 48/24, which was built outside the homepage contract.
 */

.pp-footer {
	margin-top: var(--pp-section-gap-l);
	background: var(--pp-navy);
	color: #fff;
	/* FT.1B lock: pending (unresolved-destination) ink strengths. */
	--pp-footer-pending-ink: rgba(255, 255, 255, 0.85);
	--pp-footer-pending-ink-legal: rgba(255, 255, 255, 0.72);
}
/* Homepage only (HOMEPAGE-VERTICAL-RHYTHM-LOCK.md): the Help teaser's own
   bottom rung owns the gap into the footer, so the shared section margin
   would double it. Every other page type keeps the rule above. */
body.home .pp-footer { margin-top: 0; }
.pp-footer-inner { max-width: var(--pp-container-max); margin: 0 auto; padding: 0 var(--pp-gutter); }

/* Main grid: brand block + one column per navigation group (4 today; the
   count still follows the real group list via --pp-footer-cols). */
.pp-footer-grid {
	display: grid;
	grid-template-columns: minmax(180px, 1.1fr) repeat(var(--pp-footer-cols, 4), minmax(0, 1fr));
	gap: 32px;
	padding: 40px 0 40px;
}
.pp-footer h4 { font: 700 11px/1.3 var(--pp-font-body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.62); margin: 0 0 14px; }
.pp-footer ul { list-style: none; margin: 0; padding: 0; }

/* Link-state contract: anchor and pending span share every box metric. */
.pp-footer-link {
	display: inline-flex; align-items: center; min-height: 32px;
	font: 400 13.5px/1.35 var(--pp-font-body); color: #fff;
}
a.pp-footer-link {
	text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
	text-emphasis-color: transparent; /* Safari ≤18 repaint carrier (WebKit bug 292078); never drawn */
	transition: text-decoration-color var(--pp-motion-micro) var(--pp-ease-out), text-emphasis-color var(--pp-motion-micro) var(--pp-ease-out), color var(--pp-motion-micro) var(--pp-ease-out);
}
a.pp-footer-link:hover { text-decoration-color: currentColor; text-emphasis-color: currentColor; }
span.pp-footer-link--pending { color: var(--pp-footer-pending-ink); cursor: default; }

/* Brand block — FOOTER-01 (Human, 2026-11-01): the header's own wordmark,
   assets/brand/pouchpick-logo-lime.svg (#D7FF00 on Navy, 11.7:1), replaces
   the black-on-Lime plate and is still the only Lime here. Width per tier,
   height from the artwork's 869:201 ratio. The link hugs the artwork, so its
   top keeps the plate's line (VR NOTE above) and the focus ring follows the
   mark; .pp-hit (footer.php) supplies the 44px touch height. Two classes:
   WooCommerce's `.woocommerce img { height:auto; max-width:100% }` (0,1,1)
   must not reach it. */
.pp-footer-logo { display: inline-block; vertical-align: top; line-height: 0; border-radius: 4px; }
.pp-footer-logo .pp-footer-logo-img { display: block; width: 164px; height: auto; max-width: none; aspect-ratio: 869 / 201; }
.pp-footer-line { font: 400 13px/1.5 var(--pp-font-body); color: rgba(255,255,255,.72); margin: 12px 0 0; max-width: 30ch; }

/* Mobile accordion (FT.1B) — hidden wherever the open columns render. */
.pp-footer-acc { display: none; }

/* Bottom / utility bar — darker Chrome Navy, full bleed, safe-area padding.
   Desktop: legal navigation left, Market selector right (FT.1B). */
.pp-footer-bottom { background: var(--pp-navy-pressed); color: rgba(255,255,255,.72); --pp-safe-pad-bottom: 17px; padding-top: 15px; }
.pp-footer-bottom-inner {
	max-width: var(--pp-container-max); margin: 0 auto; padding: 0 var(--pp-gutter);
	display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap;
	font: 400 12px/1.5 var(--pp-font-body); min-height: 32px;
}
.pp-footer-bottom-left { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; min-width: 0; }
.pp-footer-bottom-right { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-inline-start: auto; }
.pp-footer-legal { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.pp-footer-legal .pp-footer-link { min-height: 32px; font-size: 12px; }
.pp-footer-legal a.pp-footer-link { color: rgba(255,255,255,.85); }
.pp-footer-legal span.pp-footer-link--pending { color: var(--pp-footer-pending-ink-legal); }

/* FOOTER-01 (Human, 2026-11-01): the page ends in the bar's Chrome Navy, not
   white. At a page's end iPhone Safari leaves the strip under its floating
   toolbar below the document (IMG_9531: 58px of white under the bar), and
   WebKit fills it — like every overscroll area — with the document
   background colour, taken from the html and body background COLOURS only
   (an image layer does not count). So the canvas carries the bar's Navy and
   body paints the same white page as an image layer over a transparent
   colour: nothing changes inside the document; beyond it (Safari's toolbar
   strip, rubber-band overscroll, below a short page) is Navy. This sheet
   loads only with the full footer (inc/assets.php), so the reduced Checkout
   / Order Received shells keep their white canvas. */
html { background-color: var(--pp-navy-pressed); }
body { background: linear-gradient(var(--pp-page-bg), var(--pp-page-bg)); }

/* Focus on Navy: white gap + ring (design-system .pp-navy-surface rule);
   the darker bar keeps the gap colour of its own surface. */
.pp-footer :focus-visible { box-shadow: 0 0 0 2px var(--pp-navy), 0 0 0 4px #fff; }
.pp-footer-bottom :focus-visible { box-shadow: 0 0 0 2px var(--pp-navy-pressed), 0 0 0 4px #fff; }

/* ---------- S11-B3 source-gated regions (unchanged authority; every region
   absent until its source is real — lock §47) ---------- */
.pp-footer-newsletter { margin-top: 24px; max-width: 380px; }
.pp-footer-newsletter h4 { margin-bottom: 6px; }
.pp-footer-newsletter p { font: 400 13px/1.5 var(--pp-font-body); color: rgba(255,255,255,.72); margin: 0 0 10px; }
.pp-footer-newsletter-form { display: flex; gap: 8px; margin: 0 0 8px; }
.pp-footer-newsletter-input { flex: 1 1 auto; min-width: 0; min-height: var(--pp-hit-min); border: 1.5px solid rgba(255,255,255,.28); border-radius: var(--pp-radius-md); background: rgba(255,255,255,.08); color: #fff; padding: 0 12px; font: 400 15px/1 var(--pp-font-body); }
.pp-footer-newsletter-input::placeholder { color: rgba(255,255,255,.55); }
.pp-footer-newsletter-consent { font: 400 12px/1.4 var(--pp-font-body); color: rgba(255,255,255,.62); margin: 0; }
.pp-footer-statement { font: 400 12px/1.4 var(--pp-font-body); color: rgba(255,255,255,.72); margin: 0; max-width: 46ch; }
/* PL.2A identity line (© + age statement) — the statement's type, uncapped
   so it holds one line wherever the bar has room. The left group fills the
   row and wraps inside itself, so the Market selector keeps its place on
   the right (FT.1B: legal left, selector right) instead of dropping a row. */
.pp-footer-identity { font: 400 12px/1.4 var(--pp-font-body); color: rgba(255,255,255,.72); margin: 0; }
@media (min-width: 768px) { .pp-footer-bottom-left { flex: 1 1 0; } }
/* PM.1 payment-method strip (as human-corrected) — the compact region that
   ends the Navy body: an UNLABELLED group of micro tiles, right-aligned to
   the content edge on desktop as a secondary trust signal balancing the
   right half of the footer (the marks are self-explanatory; the list names
   itself via aria-label). Common 30px tile height with per-mark optical
   normalisation (equal presence, not equal geometry). Klarna's tile carries
   the brand's own pink ground exactly as supplied; Amex is a designed
   full-bleed small-size card treatment. A Payment-Profile mark without
   artwork falls back to its label as a text tile. The Chrome-Navy utility
   bar below stays legal + Market selector only. */
.pp-footer-paymarks { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
/* Final human spacing correction: ~10px of body Navy between the tile row and
   the Chrome-Navy bar, DESKTOP ONLY. Declared at ul.class specificity because
   the shared `.pp-footer ul` reset (0,1,1) outranks the single class (0,1,0)
   above — a padding declared there never renders. Mobile has its own 24px
   (FOOTER-01, the ≤767 block below). */
@media (min-width: 768px) {
	.pp-footer ul.pp-footer-paymarks { padding-bottom: 10px; }
}
.pp-footer-paymark { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 46px; padding: 0 9px; border-radius: 5px; background: #fff; overflow: hidden; color: var(--pp-navy); font: 700 10px/1 var(--pp-font-body); letter-spacing: .04em; }
.pp-footer-paymark img { display: block; height: 14px; width: auto; }
.pp-footer-paymark--visa img { height: 11px; }
.pp-footer-paymark--mastercard img { height: 18px; }
.pp-footer-paymark--amex { padding: 0; }
.pp-footer-paymark--amex img { height: 100%; }
.pp-footer-paymark--klarna { background: #FFA8CD; }
.pp-footer-paymark--klarna img { height: 10px; }
/* PM.1 (human correction): the Footer Market selector is the SAME component
   family as the Header commerce-row chip (.pp-market--row, header-commerce
   .css HC.7) — identical geometry, typography, presentation grammar (flag +
   CODE · CUR in the summary; region/language live in the popover rows),
   caret and popover. Only the ink adapts to the Chrome-Navy ground: white
   text, the white-alpha keyline/hover the dark surfaces already use, and
   the bar's own focus ring. The popover itself is the shared white
   .pp-market-list, opening upward here. */
.pp-footer-market .pp-market-summary {
	min-height: 40px;
	gap: 6px;
	padding: 0 10px;
	border: 1.5px solid rgba(255,255,255,.28);
	border-radius: var(--pp-radius-md);
	color: #fff;
	font: 600 12.5px/1 var(--pp-font-body);
	letter-spacing: 0;
}
@media (hover: hover) { .pp-footer-market .pp-market-summary:hover { border-color: rgba(255,255,255,.6); } } /* UI.1 P2 (Human Lock §8): hover-capable input only — a tap never leaves this shade behind. */
.pp-footer-market .pp-market-summary .pp-i { opacity: 1; color: rgba(255,255,255,.72); }
.pp-footer-market .pp-market-summary .pp-market-caret { width: 12px; height: 12px; }
.pp-footer-market .pp-market-sep { color: rgba(255,255,255,.72); opacity: 1; }
.pp-footer-market .pp-market-region,
.pp-footer-market .pp-market-lang,
.pp-footer-market .pp-market-sep:not(.pp-market-sep--cur) { display: none; }
.pp-footer-market .pp-market-list { top: auto; bottom: calc(100% + 6px); min-width: 300px; }
.pp-footer-market .pp-market-opt { min-height: 46px; gap: 11px; }

/* INT.4 (M2.55-B Velvet Cascade): the footer popover RISES, so its motion
   mirrors bottom→top — the same family, direction carried by one token
   (--pp-mkt-dir, header.css) — and the wave runs trigger-first (nearest row
   first, i.e. document order reversed). Scoped ≥768 because ≤767 flips this
   popover downward (below), where the header-css defaults (dir -1, top
   origin, document-order indices) are already the physically correct
   motion. Selector is class-doubled so it beats the header.css base
   regardless of stylesheet print order. */
@media (min-width: 768px) {
	.pp-footer-market details.pp-market.pp-market--footer {
		--pp-mkt-dir: 1;
		--pp-mkt-origin: 50% 100%;
	}
	.pp-footer-market details.pp-market.pp-market--footer .pp-market-list > li:nth-last-child(1) { --pp-mkt-i: 0; }
	.pp-footer-market details.pp-market.pp-market--footer .pp-market-list > li:nth-last-child(2) { --pp-mkt-i: 1; }
	.pp-footer-market details.pp-market.pp-market--footer .pp-market-list > li:nth-last-child(3) { --pp-mkt-i: 2; }
	.pp-footer-market details.pp-market.pp-market--footer .pp-market-list > li:nth-last-child(4) { --pp-mkt-i: 3; }
	.pp-footer-market details.pp-market.pp-market--footer .pp-market-list > li:nth-last-child(5) { --pp-mkt-i: 4; }
	.pp-footer-market details.pp-market.pp-market--footer .pp-market-list > li:nth-last-child(6) { --pp-mkt-i: 5; }
	.pp-footer-market details.pp-market.pp-market--footer .pp-market-list > li:nth-last-child(7) { --pp-mkt-i: 6; }
	.pp-footer-market details.pp-market.pp-market--footer .pp-market-list > li:nth-last-child(8) { --pp-mkt-i: 7; }
	.pp-footer-market details.pp-market.pp-market--footer .pp-market-list > li:nth-last-child(9) { --pp-mkt-i: 8; }
	.pp-footer-market details.pp-market.pp-market--footer .pp-market-list > li:nth-last-child(10) { --pp-mkt-i: 9; }
}

/* ---------- Tablet: brand full width, three columns (FT.1B lab) ---------- */
@media (max-width: 1024px) {
	.pp-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pp-footer-brand { grid-column: 1 / -1; }
	.pp-footer-market .pp-market-summary { min-height: var(--pp-hit-min); }
}

/* ---------- Mobile ≤767px: native accordion, all closed (FT.1B) ---------- */
@media (max-width: 767px) {
	.pp-footer-inner, .pp-footer-bottom-inner { padding-inline: var(--pp-gutter-mobile); }

	/* The open columns hand over to the accordion: brand block stays, the
	   desktop navs leave the tree entirely (no duplicate links for AT). */
	.pp-footer-grid { display: block; padding: 32px 0 0; }
	.pp-footer-col { display: none; }
	/* FOOTER-01: the unplated wordmark at 148px (the header's phone mark is
	   124px), 24px above the first divider (16px suited the solid plate). */
	.pp-footer-brand { margin-bottom: 24px; }
	.pp-footer-logo .pp-footer-logo-img { width: 148px; }

	.pp-footer-acc { display: block; padding-bottom: 12px; }
	.pp-footer-acc-group { border-top: 1px solid rgba(255,255,255,.14); }
	.pp-footer-acc-group:last-of-type { border-bottom: 1px solid rgba(255,255,255,.14); }
	.pp-footer-acc-summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none; }
	.pp-footer-acc-summary::-webkit-details-marker { display: none; }
	.pp-footer-acc-title { font: 700 11px/1.3 var(--pp-font-body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.62); }
	.pp-footer-acc-caret { stroke: rgba(255,255,255,.62); flex: 0 0 auto; transition: transform var(--pp-motion-micro) var(--pp-ease-out); }
	.pp-footer-acc-group[open] .pp-footer-acc-caret { transform: rotate(180deg); }
	.pp-footer-acc ul { padding: 2px 0 14px; }
	.pp-footer-acc .pp-footer-link, .pp-footer-legal .pp-footer-link { min-height: var(--pp-hit-min); }

	.pp-footer-newsletter { max-width: none; }
	/* PM.1 mobile recomposition (human-corrected): the tiles join the mobile
	   stack's left alignment and wrap freely (two rows at 320); no label —
	   the group reads naturally on its own. FOOTER-01 (Human, 2026-11-01):
	   24px of body Navy below the tiles before the Chrome-Navy bar (the
	   reset's zero left them sitting on it); ul.class specificity, as on
	   desktop above. */
	.pp-footer-paymarks { justify-content: flex-start; }
	.pp-footer ul.pp-footer-paymarks { padding-bottom: 24px; }
	.pp-footer-bottom-inner { flex-direction: column; align-items: flex-start; padding-top: 0; }
	.pp-footer-bottom { padding-top: 12px; --pp-safe-pad-bottom: 16px; }
	.pp-footer-bottom-right { margin-inline-start: 0; }
	.pp-footer-market .pp-market-list { bottom: auto; top: calc(100% + 6px); inset-inline-end: auto; inset-inline-start: 0; }
}