/*
   pn-design-system.css
   The design system's own token definitions, from 04-content-plan/design-system.md.

   WHY THIS FILE EXISTS
   pn-tokens.css is deliberately a BRIDGE. It maps --pn-color-* onto --pn-* and never
   defines a --pn-* name the design system owns, so the two files cannot fight. That
   left the owned names undefined: every reference fell through to its inline fallback,
   and the tokens with no neutral equivalent (sand, brass, inverted surfaces) resolved
   to nothing at all. This file is the missing half.

   Load order is load bearing: this file, then pn-tokens.css, then pn-patterns.css.
   functions.php enforces it through wp_enqueue_style dependencies.

   EVERY VALUE IS ALIASED TO A GENERATEPRESS GLOBAL COLOUR FIRST.
   var(--contrast, #111C2B) means: use whatever the client picked in Customize > Colors,
   and fall back to the design system value if that slot is empty. So the Customizer stays
   the single place to change a colour, and the site still renders correctly before anyone
   opens it.

   VERIFY THE GP VARIABLE NAMES BEFORE TRUSTING THE ALIASES.
   design-system.md section 1.3 warns that GeneratePress slug-to-variable naming has shifted
   between versions. After saving the Customizer, read the <style id="generate-style-inline-css">
   block in the page source and confirm --contrast, --base-3 and --accent are really what GP
   emits. If they are not, correct the names here and nowhere else.

   Contrast ratios for every pair are published in design-system.md section 1.2. The lowest
   text pair in the system is 4.95:1. Do not change a value here without re-checking it there.
*/

:root {
	/* ---------------------------------------------------------------- colour */

	/* Text */
	--pn-text: var(--contrast, #111C2B);
	--pn-text-2: var(--contrast-2, #3F4C5C);
	--pn-text-muted: var(--contrast-3, #5C6875);
	--pn-text-invert: #FFFFFF;
	--pn-text-invert-2: #DCE5EE;

	/* Rules and borders. --pn-border is decorative only, at 1.29:1 it must never
	   be the sole indicator of anything. --pn-border-strong is the one that carries
	   meaning: form inputs, secondary button outlines, table header rules. */
	--pn-border: var(--base, #DDE3EA);
	--pn-border-strong: var(--border-strong, #6E7D8F);

	/* Surfaces */
	--pn-surface: var(--base-3, #FFFFFF);
	--pn-surface-alt: var(--base-2, #F6F7F9);
	--pn-surface-sand: var(--sand, #F4F1EA);
	--pn-surface-tint: var(--tint, #EAF0F6);
	--pn-surface-brass: #F7F1E2;
	--pn-surface-invert: var(--navy-deep, #0A2036);
	--pn-surface-invert-2: var(--navy-hover, #0F2C48);

	/* Action. Navy is the only action colour in the system. There is deliberately no
	   red or orange call to action anywhere: urgency colouring on a regulated legal
	   service reads as a scam signal to this audience. */
	--pn-navy: var(--accent, #14456F);
	--pn-navy-hover: var(--navy-hover, #0F2C48);

	/* Brass is a hairline and a label colour. Never a background behind body text. */
	--pn-brass-rule: var(--brass, #A88429);
	--pn-brass-text: #7A5E1B;
	--pn-brass-on-dark: #C79F3F;

	/* WhatsApp. The brand green #25D366 is BANNED as a background for white text:
	   it measures about 1.8:1 and fails at every size. This is the accessible
	   substitute at 6.55:1. Use the official glyph, not the brand colour. */
	--pn-whatsapp: #0E6B45;

	/* Status */
	--pn-ok: #14654A;
	--pn-ok-bg: #E8F3EE;
	--pn-note: #7A5200;
	--pn-note-bg: #FBF2DF;
	--pn-alert: #9B1C1C;
	--pn-alert-bg: #FBEAEA;

	/* Focus. Two rings, because a single ring disappears against one of the two
	   surface families. --pn-focus on light, --pn-focus-invert on the footer and CTA band. */
	--pn-focus: var(--accent, #14456F);
	--pn-focus-invert: #E7B14A;

	/* ---------------------------------------------------------------- type */

	/* Georgia ships on Windows, macOS, iOS and ChromeOS. Android falls through to
	   Noto Serif, which is metrically close enough that nothing shifts. Zero bytes,
	   zero requests, and no render-blocking font on the critical path. */
	--pn-font-display: Georgia, "Times New Roman", "Noto Serif", "Liberation Serif", serif;

	--pn-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, "Noto Sans", sans-serif;

	/* Numerals. Georgia is BANNED from tables: its old style figures set 100 and 1,000
	   at different heights and a fee column looks broken. Every number on this site
	   uses this stack with tabular lining figures. Not optional. */
	--pn-font-numeric: var(--pn-font-body);
}

/* Numerals, applied. The fee tables are the primary content of this site, so this
   rule is part of the design system rather than a pattern detail. */
table,
.pn-fee-table,
.wp-block-table {
	font-variant-numeric: tabular-nums lining-nums;
}

/* ====================================================================
   CLASSIC THEME COMPATIBILITY SHIM

   GeneratePress is a classic theme, not a block theme, so it does not declare
   layout support in theme.json. WordPress therefore renders every core Group
   block with the legacy wrapper:

       <div class="pn-cards">
         <div class="wp-block-group__inner-container">   <-- this
           <div class="pn-card">...

   That wrapper breaks every pattern in pn-patterns.css, because they are all
   written against direct children: .pn-cards > *, .pn-trust__list > li, and so
   on. The grid lands on the wrapper and every card becomes one full width row.
   Verified in the browser: .pn-cards computed to grid-template-columns
   "740px 0px" with a single child, rather than a two column grid of four cards.

   display: contents removes the wrapper box from layout entirely, so the real
   children become direct grid and flex items of the pattern container. One rule
   fixes every pattern, and pn-patterns.css needs no changes, which matters
   because a future GenerateBlocks or WordPress update could drop the wrapper
   again and this rule would simply stop having anything to do.

   The wrapper is a presentational div with no semantics and no ARIA role, which
   is the case display: contents is safe for. Do not apply this to an element
   that carries a role, a landmark or a label.
   ==================================================================== */

/* Written as an attribute selector rather than a list of component names ON PURPOSE.
   The list version was maintained by hand, and every component added after it was
   written silently lost its layout: the reviews grid, the media splits, the office
   panel and the image bands all rendered as a single stacked column because their
   wrapper was not in the list. Matching any pn- prefixed container means a new
   component is covered the moment it exists. */
[class*="pn-"] > .wp-block-group__inner-container {
	display: contents;
}

/* ====================================================================
   ONE H1 PER PAGE

   GeneratePress prints the page title as an H1 in .entry-header. A page that
   opens with a hero prints its own H1 inside the hero, which would give two.
   Hide the theme's title only on those pages, so ordinary pages keep theirs.
   ==================================================================== */

.entry-header:has(+ .entry-content .pn-hero),
.entry-header:has(+ .entry-content .pn-imageband),
article:has(.pn-hero) .entry-header,
article:has(.pn-imageband) .entry-header {
	display: none;
}

/* ====================================================================
   BASE ELEMENTS

   design-system.md routes typography through Customize > Typography, which is the
   right long term home because it keeps the client in one place. But GeneratePress
   takes a single px value per device and steps between them at its own breakpoints,
   whereas the tokens below are clamp() and scale smoothly at every width. The two
   agree at both ends of the range, so this is the better of the two renderings and
   it also means the site is correct before anyone opens the Customizer.

   If typography is later set in Customize > Typography, GeneratePress emits its rules
   inline in the document head and this child stylesheet still loads after them, so
   THESE WOULD WIN. Delete this block at that point rather than fighting it with
   specificity. That is the whole reason it is fenced off and labelled.
   ==================================================================== */

body {
	font-family: var(--pn-font-body);
	font-size: var(--pn-text-base);
	line-height: 1.65;
	color: var(--pn-text);
	background-color: var(--pn-surface);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pn-font-display);
	font-weight: 600;
	color: var(--pn-text);
	text-wrap: balance;
}

h1 { font-size: var(--pn-text-3xl); line-height: 1.15; }
h2 { font-size: var(--pn-text-2xl); line-height: 1.22; }
h3 { font-size: var(--pn-text-xl);  line-height: 1.30; }
h4 { font-size: var(--pn-text-lg);  line-height: 1.35; }

/* NO PROSE MEASURE CAP.
   Body text fills the content container. A 78ch cap inside a 1120px container stopped
   every paragraph two thirds of the way across and left a ragged empty half, which reads
   as a forced line break rather than as a deliberate column. The client raised this three
   times; the cap is gone.

   The container width is what controls line length now. If lines ever feel too long,
   narrow the container in Customize > Layout > Container Width rather than reinstating a
   cap here, because that keeps headings and body text on the same measure automatically. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
	max-inline-size: none;
}

a {
	color: var(--pn-navy);
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--pn-navy-hover);
}

/* One visible focus style for everything, on both surface families.
   :focus-visible rather than :focus so a mouse click does not draw a ring,
   but every keyboard user gets one. */
:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--pn-surface), 0 0 0 5px var(--pn-focus);
	border-radius: 4px;
}

.pn-surface-invert :focus-visible,
.site-footer :focus-visible {
	box-shadow: 0 0 0 2px var(--pn-surface-invert), 0 0 0 5px var(--pn-focus-invert);
}

/* Tables. The fee tables are this site's differentiator, so they get real styling
   rather than the theme default. Logical properties throughout for the Arabic phase. */
.entry-content table {
	inline-size: 100%;
	border-collapse: collapse;
}

.entry-content th {
	text-align: start;
	font-family: var(--pn-font-body);
	font-size: var(--pn-text-sm);
	font-weight: 600;
	color: var(--pn-text-muted);
	background-color: var(--pn-surface-alt);
	border-block-end: 2px solid var(--pn-border-strong);
	padding: 0.75rem 1rem;
}

.entry-content td {
	border-block-end: 1px solid var(--pn-border);
	padding: 0.75rem 1rem;
	vertical-align: top;
}

/* A two column fee table needs the fee column to shrink to its content, never wrap,
   and sit against the end edge. That flips correctly in Arabic for free, which a
   text-align: right would not. */
.entry-content table tr > :last-child:nth-child(2) {
	inline-size: 1%;
	white-space: nowrap;
	text-align: end;
}