/**
 * LEGAL & POLICIES — Phase 7D
 *
 * The approved `design-reference/Legal.dc.html` layout. Loaded on the Legal hub
 * and on every policy page, replacing article.css — see bsn_legal_stylesheet().
 *
 * -----------------------------------------------------------------------------
 * EVERY VALUE BELOW WAS EXTRACTED FROM THE RENDERED REFERENCE
 *
 *   Hero        840px · 56/32/48 · eyebrow 11px +18 · h1 52px/1.05/-.015em +18
 *               · intro 18px/1.55 on 600px · 1px bottom rule
 *   Directory   880px · 44/32/16 · rows 1fr + auto · gap 24 · padding 24/0
 *               · 1px rule between, none after the last
 *               · name 24px serif +5 · description 13.5px sans
 *               · action 10.5px/.14em brass, never wrapping
 *   Note        3px rule · +8 above · 18 padding-top · 12px/1.6
 *   Policy      200px contents + text · gap 48 · reading measure 760px
 *               · eyebrow 10px/.2em +12 · title 36px/-.01em +8
 *               · review date 11px +22 · section headings 19px
 *   Contents    sticky at 70px · label 9.5px/.18em +12 · items 12px · gap 8
 *               · 1px rule, 12px indent, 2px brass on the current heading
 * -----------------------------------------------------------------------------
 *
 * THIS SHEET CARRIES ITS OWN PROSE RULES rather than borrowing article.css's. A
 * policy is not a news story: the reference sets section headings at 19px against
 * an article's fluid 22–28px, and numbered clauses want a tighter, more even
 * rhythm than a feature's. Reaching for the article treatment would have produced
 * a policy that reads like longform journalism, which is the wrong document — and
 * the architecture is one template stylesheet per request, swapped not appended.
 *
 * NO @layer. WordPress prints theme.json's `global-styles` unlayered and it would
 * win. This sheet is enqueued at priority 20, after it.
 *
 * SCOPED: every selector begins with a `legal-` or `policy` class.
 */

.legal,
.policy {
	--legal-space-hero: 3.5rem;    /* 56px — hero top                        */
	--legal-space-hero-end: 3rem;  /* 48px — hero bottom, policy top         */
	--legal-space-dir: 2.75rem;    /* 44px — directory top                   */
	--legal-space-row: 1.5rem;     /* 24px — row padding and column gap      */
	--legal-space-cols: 3rem;      /* 48px — contents-to-text gap            */
	--legal-measure: 760px;        /* the reference's stated reading width   */
	--legal-contents: 200px;       /* the contents column                    */
}

/* =========================================================================
   HUB — HERO
   ====================================================================== */

.legal-hero {
	border-block-end: var(--bsn-hairline);
	text-align: center;
}

.legal-hero__inner {
	max-inline-size: 840px;
	padding-block: var(--legal-space-hero) var(--legal-space-hero-end); /* 56 / 48 */
	min-inline-size: 0;
}

.legal-hero__eyebrow {
	margin: 0 0 1.125rem; /* 18px */
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.26em;
	line-height: 1.27;
	text-transform: uppercase;

	/* The design's #A9873E measures 3.16:1 on the page ground and fails at 11px. */
	color: var(--bsn-brass-text);
}

.legal-hero__title {
	margin: 0 0 1.125rem; /* 18px */
	font-family: var(--bsn-font-serif);
	font-size: clamp(2.125rem, 5.8vw, 3.25rem); /* 34 → 52px, 52 by ~900px */
	font-weight: var(--bsn-weight-bold);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--bsn-ink);
}

.legal-hero__standfirst {
	margin: 0 auto;
	max-inline-size: 600px;
	font-family: var(--bsn-font-serif);
	font-size: 1.125rem; /* 18px */
	line-height: 1.55;
	color: var(--bsn-ink-soft);
}

/* =========================================================================
   HUB — DIRECTORY
   ====================================================================== */

.legal-directory__inner {
	max-inline-size: 880px;
	padding-block: var(--legal-space-dir) 1rem; /* 44 / 16 */
	min-inline-size: 0;
}

.legal-directory__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal-row + .legal-row { border-block-start: var(--bsn-hairline); }

/*
 * The whole row is the link. A 94px target rather than a 14px "READ POLICY", and
 * one accessible name per row instead of seven links all called the same thing.
 */
.legal-row__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--legal-space-row); /* 24px */
	align-items: center;
	padding-block: var(--legal-space-row); /* 24px */
	text-decoration: none;
	color: var(--bsn-ink);
}

.legal-row__body {
	display: block;
	min-inline-size: 0;
}

.legal-row__title {
	display: block;
	margin-block-end: 0.3125rem; /* 5px */
	font-family: var(--bsn-font-serif);
	font-size: 1.5rem; /* 24px */
	font-weight: var(--bsn-weight-bold);

	/*
	 * 24.8px on a 24px face and 16.2px on a 13.5px one — what the reference
	 * renders, and together they are the 94px row height. 1.15 and 1.5 looked like
	 * safe defaults and measured the row 6.84px tall. Both relax below 768px, where
	 * the description wraps and the reference has no design at all.
	 */
	line-height: 1.0333;

	color: var(--bsn-ink);
}

.legal-row__desc {
	display: block;
	font-family: var(--bsn-font-sans);
	font-size: 0.84375rem; /* 13.5px */
	line-height: 1.2;
	color: var(--bsn-ink-muted);
}

.legal-row__action {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--bsn-font-sans);
	font-size: 0.65625rem; /* 10.5px */
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.14em;
	line-height: 1.27;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--bsn-brass-text);
}

.legal-row__link:hover .legal-row__title,
.legal-row__link:focus-visible .legal-row__title { color: var(--bsn-brass-text); }

.legal-row__arrow { transition: transform var(--bsn-duration) var(--bsn-ease); }
.legal-row__link:hover .legal-row__arrow { transform: translateX(2px); }

.legal-note {
	margin: 0.5rem 0 0; /* 8px */
	padding-block-start: 1.125rem; /* 18px */
	border-block-start: 3px solid var(--bsn-ink);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs); /* 12px */
	line-height: 1.6;

	/* The design's #9A9184 measures 2.8:1 here. This is the same family, passing. */
	color: var(--bsn-ink-muted);
}

.legal-note__link {
	font-weight: var(--bsn-weight-semibold);
	color: var(--bsn-ink);
	text-decoration: underline;
	text-decoration-color: var(--bsn-rule-strong);
	text-underline-offset: 0.18em;
}

.legal-note__link:hover,
.legal-note__link:focus-visible { text-decoration-color: var(--bsn-brass); }

/*
 * Admin-only. Never rendered for a reader — see the template — so it is allowed to
 * look like what it is: a note to whoever is building the page.
 */
.legal-empty {
	margin: 0;
	padding: var(--legal-space-row);
	border: 1px dashed var(--bsn-rule-strong);
	background: var(--bsn-band);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm);
	line-height: 1.6;
	color: var(--bsn-ink-soft);
}

/* =========================================================================
   POLICY — LAYOUT
   ====================================================================== */

.policy__inner {
	display: grid;
	grid-template-columns: var(--legal-contents) minmax(0, 1fr);
	gap: var(--legal-space-cols); /* 48px */
	padding-block: var(--legal-space-hero-end) 4rem; /* 48 / 64 */
	align-items: start;
}

.policy--no-contents .policy__inner { grid-template-columns: minmax(0, 1fr); }

.policy__main {
	max-inline-size: var(--legal-measure); /* 760px */
	min-inline-size: 0;
}

/* Centred when there is no contents column to sit beside. */
.policy--no-contents .policy__main { margin-inline: auto; }

/* =========================================================================
   POLICY — HEADER
   ====================================================================== */

.policy__header { margin-block-end: 0; }

.policy__eyebrow {
	margin: 0 0 0.75rem; /* 12px */
	font-family: var(--bsn-font-sans);
	font-size: 0.625rem; /* 10px */
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.2em;
	line-height: 1.27;
	text-transform: uppercase;
	color: var(--bsn-brass-text);
}

/*
 * Padded to a 24px target (WCAG 2.2, 2.5.8) and pulled back by the same amount, so
 * the box a thumb can hit grows while the 12px gap to the title does not.
 */
.policy__eyebrow-link {
	display: inline-block;
	padding-block: 0.375rem;
	margin-block: -0.375rem;
	color: inherit;
	text-decoration: none;
}

.policy__eyebrow-link:hover,
.policy__eyebrow-link:focus-visible { color: var(--bsn-ink); }

.policy__title {
	margin: 0 0 0.5rem; /* 8px */
	font-family: var(--bsn-font-serif);
	font-size: clamp(1.75rem, 3.2vw, 2.25rem); /* 28 → 36px */
	font-weight: var(--bsn-weight-bold);
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--bsn-ink);
}

.policy__updated {
	margin: 0 0 1.375rem; /* 22px */
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs); /* 11px */
	line-height: 1.5;

	/* #9A9184 fails at 11px; this is the passing tone from the same family. */
	color: var(--bsn-ink-muted);
}

/* =========================================================================
   POLICY — CONTENTS
   ====================================================================== */

.policy__contents { min-inline-size: 0; }

.policy__contents-sticky {
	position: sticky;

	/*
	 * 70px in the reference. Here it clears whatever the sticky section nav
	 * actually occupies, so the list never hides under it — base.css sets
	 * scroll-padding-top: 5rem for the same reason.
	 */
	inset-block-start: 5.5rem;
}

.policy__contents-label {
	margin: 0 0 0.75rem; /* 12px */
	font-family: var(--bsn-font-sans);
	font-size: 0.59375rem; /* 9.5px */
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.18em;
	line-height: 1.27;
	text-transform: uppercase;
	color: var(--bsn-ink-muted);
}

.policy__contents-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem; /* 8px */
	margin: 0;
	padding: 0;
	list-style: none;
	border-inline-start: var(--bsn-hairline);
}

.policy__contents-link {
	display: block;
	padding-inline-start: 0.75rem; /* 12px */
	padding-block: 0.375rem;
	margin-inline-start: -1px;
	border-inline-start: 2px solid transparent;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs); /* 12px */
	line-height: 1.45;
	text-decoration: none;
	color: var(--bsn-ink-muted);
}

.policy__contents-link:hover,
.policy__contents-link:focus-visible {
	border-inline-start-color: var(--bsn-brass);
	color: var(--bsn-ink);
	font-weight: var(--bsn-weight-bold);
}

/* =========================================================================
   POLICY — PROSE
   ====================================================================== */

.policy__prose {
	font-family: var(--bsn-font-serif);
	font-size: 1.0625rem; /* 17px */
	line-height: 1.7;
	color: var(--bsn-ink);
}

.policy__prose > p { margin: 0 0 1.25rem; }

/*
 * 19px in the reference — flat, not a fluid scale. A policy's sections are peers:
 * "Information we collect" is not more important than "How to contact us", and a
 * heading that grows with the viewport implies a hierarchy the document does not
 * have.
 */
.policy__prose h2 {
	margin: 2.25rem 0 0.5rem;
	font-family: var(--bsn-font-serif);
	font-size: 1.1875rem; /* 19px */
	font-weight: var(--bsn-weight-bold);
	line-height: 1.3;
	text-wrap: balance;
	scroll-margin-block-start: 6rem;
}

.policy__prose h2:first-child { margin-block-start: 0; }

/*
 * The heading a reader jumped to, marked in CSS. The design puts a brass marker on
 * the current item in the contents list, which needs a scroll-spy to be accurate —
 * and an inaccurate "you are here" is worse than none. :target marks the section
 * actually navigated to, costs no JavaScript, and cannot be wrong.
 */
.policy__prose h2:target {
	padding-inline-start: 0.75rem;
	margin-inline-start: -0.875rem;
	border-inline-start: 2px solid var(--bsn-brass);
}

.policy__prose h3 {
	margin: 1.75rem 0 0.5rem;
	font-family: var(--bsn-font-serif);
	font-size: 1.0625rem; /* 17px */
	font-weight: var(--bsn-weight-bold);
	line-height: 1.35;
	scroll-margin-block-start: 6rem;
}

.policy__prose h4 {
	margin: 1.5rem 0 0.4rem;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	color: var(--bsn-ink);
}

.policy__prose h2,
.policy__prose h3,
.policy__prose h4 { break-after: avoid; }

.policy__prose strong { font-weight: var(--bsn-weight-bold); }
.policy__prose em { font-style: italic; }

/* Underlined, not colour alone — WCAG 1.4.1, and legal text is full of links. */
.policy__prose a {
	color: var(--bsn-ink);
	text-decoration: underline;
	text-decoration-color: var(--bsn-brass);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.policy__prose a:hover { color: var(--bsn-brass-text); text-decoration-thickness: 2px; }
.policy__prose a:visited { color: var(--bsn-ink-soft); }

/* A bare URL in a policy is common and is the classic cause of sideways scroll. */
.policy__prose,
.policy__prose p,
.policy__prose li,
.policy__prose a { overflow-wrap: anywhere; }

/*
 * NOT `anywhere` in a table cell. A narrow column plus `anywhere` breaks ordinary
 * words mid-syllable — at 320px "example" rendered as "An exam ple row". Cells
 * break only what genuinely cannot fit, and the table scrolls instead.
 */
.policy__prose th,
.policy__prose td { overflow-wrap: break-word; }

.policy__prose h2,
.policy__prose h3 { overflow-wrap: break-word; }

/* --- Lists ---------------------------------------------------------------
 * The global reset strips markers from any list carrying a class, and the block
 * editor gives them one. Policy clauses are numbered — restored explicitly.
 */
.policy__prose ul,
.policy__prose ol {
	margin: 0 0 1.25rem;
	padding-inline-start: 1.5rem;
	line-height: 1.7;
}

.policy__prose ul { list-style: disc; }
.policy__prose ol { list-style: decimal; }
.policy__prose li { margin-block-end: 0.5rem; }

.policy__prose ul ul,
.policy__prose ol ol,
.policy__prose ul ol,
.policy__prose ol ul {
	margin-block: 0.5rem 0;
}

.policy__prose ul ul { list-style: circle; }
.policy__prose ol ol { list-style: lower-alpha; }

.policy__prose blockquote {
	margin: 1.5rem 0;
	padding-inline-start: 1.25rem;
	border-inline-start: 3px solid var(--bsn-rule-strong);
	font-style: italic;
	color: var(--bsn-ink-soft);
}

.policy__prose blockquote p:last-child { margin-block-end: 0; }

.policy__prose hr,
.policy__prose .wp-block-separator {
	margin: 2rem 0;
	border: 0;
	border-block-start: var(--bsn-hairline);
}

/* --- Tables --------------------------------------------------------------
 * A policy table — what is collected, why, how long — is the one block most
 * likely to be wider than a phone. The wrapper scrolls; the PAGE never does.
 */
.policy__prose .wp-block-table,
.policy__prose figure.wp-block-table {
	margin: 0 0 1.5rem;
	overflow-x: auto;
	max-inline-size: 100%;
}

.policy__prose table {
	inline-size: 100%;

	/*
	 * The table keeps a readable minimum and the WRAPPER scrolls — the page never
	 * does. Without it, three columns squeezed into 288px gave a 60px first column
	 * and one word per line, which is technically not overflow and practically not
	 * a table.
	 */
	min-inline-size: 24rem; /* 384px */

	border-collapse: collapse;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm);
	line-height: 1.5;
}

.policy__prose th,
.policy__prose td {
	padding: 0.625rem 0.75rem;
	border: var(--bsn-hairline);
	text-align: start;
	vertical-align: top;
}

.policy__prose th {
	background: var(--bsn-band);
	font-weight: var(--bsn-weight-bold);
}

.policy__prose figcaption {
	margin-block-start: 0.5rem;
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	color: var(--bsn-ink-muted);
}

/* =========================================================================
   RESPONSIVE
   ====================================================================== */

/*
 * THE REFERENCE HAS NO MOBILE DESIGN. Its document stays 601px wide from 390px
 * down, so it scrolls sideways on every phone — the directory's "READ POLICY"
 * column never wraps and the specimen card keeps its 200px sidebar. There is
 * nothing to match below 768px, and the composition there is this build's own.
 */

@media (max-width: 64rem) { /* 1024px */
	.policy__inner { gap: 2.5rem; }
}

@media (max-width: 48rem) { /* 768px */
	/*
	 * Contents above the text, not beside it, and no longer sticky: a sticky
	 * sidebar on a phone is a block of links occupying a screen a reader is trying
	 * to read through.
	 */
	.policy__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.policy__contents-sticky { position: static; }

	.policy__contents {
		padding-block-end: 1.5rem;
		border-block-end: var(--bsn-hairline);
	}

	/* The action drops under the name rather than squeezing it to nothing. */
	.legal-row__link {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	/* Room to breathe once the name and description actually wrap. */
	.legal-row__title { line-height: 1.15; }
	.legal-row__desc { line-height: 1.5; }

	.legal-row__action { white-space: normal; }
}

@media (max-width: 30rem) { /* 480px */
	.legal-directory__inner { padding-block: 2rem 1rem; }
	.legal-hero__inner { padding-block: 2.5rem 2rem; }
}

/* A policy is the page people print. Give it the page, not the sidebar. */
@media print {
	.policy__contents { display: none; }
	.policy__inner { display: block; }
	.policy__main { max-inline-size: none; }
}