/*
 * pm-footer — the Poortman site footer (WO-20, frame 369:1444).
 *
 * Compiled to assets/css/components/footer.css by src/build-tokens.mjs,
 * which substitutes the breakpoint markers (a comment holding `@bp <name>`)
 * with the pixel value from tokens/tokens.json. Custom properties cannot
 * resolve inside @media conditions and a bare integer is invalid CSS, so the
 * build appends the unit. Never type a breakpoint width here.
 *
 * Every colour is a --pm-color-* token; spacing and font weights come from
 * tokens/tokens.json. No hex value and no literal breakpoint width may
 * appear in this file. The typeface comes from --pm-font-family-base — the
 * frame's face arrives through that token via a follow-up work order and
 * must reach the footer unedited.
 *
 * One variant (WO-20 AC 9): the footer always sits on Volcanic Ink, whatever
 * the header variant on <body> is — no body class is referenced here.
 *
 * Measurements are from docs/design/frames/20-footer.json at 1440: padding
 * 96 top and sides, 24 bottom; 64 between the two rows; brand column 380
 * with a 20px inner gap; link columns 72 apart with items 14 apart; 28
 * above the rule. Component dimensions with no token (the 290px logo
 * export, the font sizes) are typed here like the header's 80px bar height.
 *
 * Mobile-first (WO-20 AC 7): one column below the laptop breakpoint, in the
 * source order — brand, products, navigation, useful links. The frame has
 * no mobile layout (MISTAKES.md §C7); developer judgement, recorded: the
 * side padding steps down to --pm-space-6 and the stacked columns sit 48px
 * apart, everything else keeps the frame's values.
 */

/*
 * The bar spans the viewport. The scaffold stylesheet (style.css) constrains
 * body to a centred 72rem column; the footer escapes that box with the
 * standard full-bleed technique. Unlike the header, the footer does NOT
 * re-align its content to the body column — the frame measures 96px from
 * the viewport edge, so the padding below is the frame's own figure. The
 * negative bottom margin cancels the scaffold body's padding-bottom
 * (--pm-space-8) so the dark footer reaches the viewport bottom. Revisit
 * both when the scaffold body styles are replaced by the layout epic.
 */
.pm-footer {
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-bottom: calc(-1 * var(--pm-space-8));
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-16); /* the frame's 64px between the two rows */
	padding: var(--pm-space-12) var(--pm-space-6) var(--pm-space-6);
	background-color: var(--pm-color-ink);
	color: var(--pm-color-surface);
	font-family: var(--pm-font-family-base), system-ui, sans-serif;
}

/* The columns row: stacked below the laptop breakpoint (AC 7). */
.pm-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-12);
}

/*
 * Brand column: logo, tagline and social links, 20px apart (the frame's
 * brand_column.inner_gap). The 380px width is the frame's figure at 1440
 * and applies at the laptop breakpoint and up — fixed-width on a 375px
 * screen would overflow.
 */
.pm-footer__col--brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pm-space-5);
}

.pm-footer__logo {
	display: inline-flex;
	/* Not a text link — it inherits the footer's surface colour. */
	color: inherit;
}

/* The footer logo's native export is 290 x 31 (20-footer.json#measured.logo);
   no token exists for component dimensions, so it is typed here like the
   header's 80px bar height. max-width keeps it inside a 375px screen. */
.pm-footer__logo svg {
	display: block;
	width: 290px;
	height: auto;
	max-width: 100%;
}

/* The tagline: Light 16px / 1.6 in the muted on-ink colour. */
.pm-footer__tagline {
	margin: 0;
	font-size: 1rem;
	font-weight: var(--pm-font-weight-300);
	line-height: 1.6;
	color: var(--pm-color-on-ink-muted);
}

/*
 * Social links (ADR 0008 §14): a 16x16 icon 8px from uppercase 12px text,
 * 24px between links. Text is White — the existing --pm-color-on-accent —
 * not a new role (WO-20 AC 3).
 */
.pm-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pm-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-footer__social-link {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-space-2);
	color: var(--pm-color-on-accent);
	font-size: 0.75rem;
	font-weight: var(--pm-font-weight-400);
	text-transform: uppercase;
	text-decoration: none;
}

.pm-footer__social-icon {
	display: block;
	width: var(--pm-space-4);
	height: var(--pm-space-4);
}

/* The three link columns: heading plus a 14px-gap list. */
.pm-footer__col {
	min-width: 0;
}

.pm-footer__heading {
	margin: 0 0 var(--pm-space-4);
	font-size: 0.75rem;
	font-weight: var(--pm-font-weight-700);
	text-transform: uppercase;
	color: var(--pm-color-accent);
}

.pm-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-3-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Column links: Light 14px / 1.6, uppercase, in the muted on-ink
 * colour. The scaffold's `a { color: accent }` is overridden here.
 */
.pm-footer__link,
.pm-footer__consent {
	color: var(--pm-color-on-ink-muted);
	font-size: 0.875rem;
	font-weight: var(--pm-font-weight-300);
	line-height: 1.6;
	text-transform: uppercase;
	text-decoration: none;
}

/*
 * Hover (developer judgement — hover states are not designed, MISTAKES.md
 * §C12): an underline, colour unchanged. The header's hover takes
 * --pm-color-accent, but Terra Sienna on Volcanic Ink measures ~3.4:1 —
 * below AA for text — and unlike the header the footer is always dark, so
 * the colour-only hover would fail on every link. The underline keeps the
 * high-contrast text and still signals the link.
 */
.pm-footer__link:hover,
.pm-footer__social-link:hover,
.pm-footer__consent:hover,
.pm-footer__credit:hover {
	text-decoration: underline;
}

/*
 * The cookie-settings trigger (ticket 62 AC 4): a <button> styled
 * identically to the links around it, inert until ticket 62 wires it. The
 * reset strips the user-agent button chrome so only the text shows.
 */
.pm-footer__consent {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
}

/*
 * The bottom row: the frame's 1px rule in the muted on-ink colour, 28px
 * above the text, copyright left and the Agifly credit right.
 */
.pm-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-2);
	border-top: 1px solid var(--pm-color-on-ink-muted);
	padding-top: var(--pm-space-7);
}

.pm-footer__copyright {
	margin: 0;
	font-size: 0.75rem;
	font-weight: var(--pm-font-weight-400);
	text-transform: uppercase;
	color: var(--pm-color-on-ink-muted);
}

.pm-footer__credit {
	font-size: 0.75rem;
	color: var(--pm-color-on-ink-muted);
	text-decoration: none;
}

/* The frame's layout at the laptop breakpoint and above (AC 7). */
@media (min-width: 1024px) {
	.pm-footer {
		padding: var(--pm-space-24) var(--pm-space-24) var(--pm-space-6);
	}

	.pm-footer__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--pm-space-18); /* the frame's 72px between link columns */
	}

	.pm-footer__col--brand {
		width: 380px;
		flex-shrink: 0;
	}

	/* The three link columns right-aligned: the auto margin puts all the
	   slack between the brand column and Products, which is the frame's
	   own geometry — 72px between the link columns, the rest of the row
	   free to the left of them. */
	.pm-footer__col--products {
		margin-left: auto;
	}

	.pm-footer__bottom {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
	}
}

/*
 * WO-20 AC 10 — the Terra Sienna focus ring, WO-09's convention (2px
 * outline, 2px offset), on every focusable footer element. As a non-text
 * indicator the accent passes the 3:1 non-text contrast the text hover
 * above cannot.
 */
.pm-footer a:focus-visible,
.pm-footer__consent:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}