/* Import Montserrat font faces */
@import url("/static/fonts/montserrat/montserrat.30533a25d256.css");

/* --- Custom Properties (CSS Variables) --- */
:root {
  /* 1. Base Color Components */
  /* --- Primary Color Family - RED --- */
  --primary-hue: 358;
  --primary-saturation: 81%;
  --primary-lightness: 41%;
  /* --- Secondary Color Family - GREEN --- */
  --secondary-hue: 144;
  --secondary-saturation: 100%;
  --secondary-lightness: 25%;
  /* --- Grayscale Family --- */
  --gray-hue: 0;
  --gray-saturation: 0%;

  /* 2. Constructed Color Palette */
  /* The main theme colors, constructed with specific lightness values */
  --colour-primary: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness));
  /* Primary color with alpha for overlays */
  --colour-primary-alpha-80: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness) / 0.8);
  --colour-primary-alpha-50: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness) / 0.5);
  --colour-primary-alpha-20: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness) / 0.2);
  /* Slightly more saturated and lighter */
  --colour-primary-light: hsl(var(--primary-hue) 84% 49%);
  /* Slightly less saturated and darker */
  --colour-primary-dark: hsl(var(--primary-hue) 76% 25%);

  /* Secondary color for contrast or accents */
  --colour-secondary: hsl(var(--secondary-hue) var(--secondary-saturation) var(--secondary-lightness));
  /* Secondary color with alpha for overlays */
  --colour-secondary-alpha-80: hsl(var(--secondary-hue) var(--secondary-saturation) var(--secondary-lightness) / 0.8);
  --colour-secondary-alpha-50: hsl(var(--secondary-hue) var(--secondary-saturation) var(--secondary-lightness) / 0.5);
  --colour-secondary-alpha-20: hsl(var(--secondary-hue) var(--secondary-saturation) var(--secondary-lightness) / 0.2);
  --colour-secondary-alpha-10: hsl(var(--secondary-hue) var(--secondary-saturation) var(--secondary-lightness) / 0.1);
  /* Slightly more saturated and lighter secondary colour */
  --colour-secondary-light: hsl(var(--secondary-hue) 84% 49%);

  --colour-secondary-medium: hsl(var(--secondary-hue) 80% 33%);
  /* Slightly less saturated and darker secondary colour */
  --colour-secondary-dark: hsl(var(--secondary-hue) 76% 25%);

  /* Grayscale palette */
  --colour-dark: hsl(var(--gray-hue) var(--gray-saturation) 13%);
  --colour-medium: hsl(var(--gray-hue) var(--gray-saturation) 70%);
  --colour-light: hsl(var(--gray-hue) var(--gray-saturation) 87%);
  --colour-lighter: hsl(var(--gray-hue) var(--gray-saturation) 97%);
  --colour-text: hsl(var(--gray-hue) var(--gray-saturation) 20%);
  --colour-text-light: hsl(var(--gray-hue) var(--gray-saturation) 40%);

  /* 3. Aliased & Thematic Variables */
  /* Colours */
  --colour-link: var(--colour-primary);
  --colour-link-hover: var(--colour-primary-dark);

  /* Typography */
  --font-main: 'Montserrat', sans-serif;
  --font-size-base: 1rem;

  /* Utilities */
  --radius: 4px;

  /* ====================================================================
     Design-system extensions (shared component layer — components.css)
     ==================================================================== */
  /* Surfaces & borders (previously undefined; pages used hardcoded fallbacks) */
  --colour-border: hsl(0 0% 89%);
  --colour-border-strong: hsl(0 0% 80%);
  --colour-text-muted: hsl(0 0% 42%);
  --colour-bg: #ffffff;
  --colour-bg-subtle: hsl(0 0% 98%);
  --colour-primary-alpha-10: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness) / 0.08);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Radius scale */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.06);
  --shadow-md: 0 4px 16px hsl(0 0% 0% / 0.08);
  --shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.12);

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.4rem;
  --text-2xl: 1.85rem;
  --text-3xl: 2.4rem;
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-fast: 0.12s;
  --motion-base: 0.2s;
  --motion-slow: 0.3s;

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Breakpoints (reference) + container widths */
  --bp-sm: 600px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  /* A real cap, expressed as a GUTTER budget rather than a fixed width.

     History matters here. An older value, `calc(0.82 * 100vw + 300px)`, only
     undercuts the `.container` `width: 95%` floor above a 2308px viewport, so
     on every real screen `.container` was simply `width: 95%` — which produced
     161-304 characters per line of body text (measured at 1440px and 1920px).
     The fix for that was a flat `1320px`, but at 1920px that leaves 300px
     (3.1in) of dead margin on each side, which is what the owner asked to
     shrink on 2026-08-02.

     Both of those treated one number as doing two jobs. It isn't: the reading
     measure is owned separately by `--container-prose` / `--measure-lead`
     (components.css caps `.prose`, `.page-intro--text`, `.section-intro--text`
     and `.section__lead`), and `--container-max` is only ever read by
     `.container` and `.paginator`. So the shell can widen without lengthening
     a single line of prose — verify that claim in components.css before
     touching either token.

     The formula: aim for a gutter each side, never go narrower than a floor on
     mid-size laptops, and stop growing at 2400px so a 3-up card grid does not
     stretch across an ultrawide.

     THE GUTTER BUDGET WAS CUT BY 60% ON 2026-09-13, owner-directed, after the
     section rail made the empty strip beside it obvious: *"it seems the side
     menu has left dead space on the left… Please reduce the space by 60%."*
     It is the same complaint as 2026-08-02, one screen size down — the rail is
     the leftmost thing on the page now, so the margin that used to sit beside
     body text sits beside navigation instead, where it reads as a gap rather
     than as breathing room.

     Gutter each side, MEASURED in the browser before -> after:
       390px  viewport -> 10px -> 10px (unchanged; `width: 95%` still wins)
       900px  viewport -> 23px -> 15px
       1440px viewport -> 60px -> 24px     1920px -> 96px -> 38px
       2560px viewport -> 80px -> 80px (the 2400px ceiling governs, unchanged)
     A phone has no dead space to reclaim, which is why the bottom row does not
     move; the 60% is measured where the complaint was, on a laptop. */
  --container-max: min(2400px, max(1392px, calc(100vw - 4.8rem)));
  /* Same gutter formula, half the budget. This MUST stay wider than
     `--container-max` at every viewport — `.container--wide` is an opt-in
     widening on the party index's dense table, and a flat value would have
     become NARROWER than the base container above some viewport. Both the
     floor and the subtracted budget move with the 60% cut above, or the base
     container overtakes this one at 1920px. */
  --container-wide: min(2800px, max(1440px, calc(100vw - 2.4rem)));
  /* What `.container` keeps clear of the viewport edge. The clamp's floor is
     what a phone gets; its ceiling is the 60%-cut desktop gutter. */
  --container-gutter: clamp(0.75rem, 1.65vw, 2.4rem);
  --container-narrow: 1120px;
  /* READING MEASURES ARE OFF — owner decision, 2026-08-02. Both were lengths
     (`64ch` body, `62ch` lead) and are now `none`, so every paragraph that
     consumes them spans its container.

     This was chosen with the cost stated and accepted. The caps existed because
     uncapped text measured 161-304 characters per line, and typographic
     guidance puts the comfortable maximum near 75. After the container widened
     to 1728px, a capped paragraph used ~40% of the width and the owner reported
     the resulting white space as a defect on four separate pages. Two attempts
     to have it both ways failed: CSS multi-column was built site-wide and
     rejected ("remove the multi col if the rest of the page is not multi col"),
     and a partial widening still leaves ~750px empty. Presented with
     full-width / half-measure / per-page-layout, the owner chose full width and
     the long lines that come with it: roughly 155 cpl for a 17px lead and ~270
     for 12px fine print.

     So this is a DELIBERATE trade, not an oversight, and re-adding a cap is a
     revert of an owner decision — ask first. Note `ch` is the advance of "0",
     wider than average lowercase, so Nch renders roughly 1.25N characters.
     Document-reader surfaces deliberately keep their own caps: see
     `.document-reader` (legislation.css, parliament.css) and `.hansard-content`
     (tazabu.css), which set long-form transcripts and would be unreadable at
     full width. */
  --container-prose: none;
  --measure-lead: none;
  /* The lead measure as a LENGTH, for the one consumer that needs a real track
     size rather than a cap: publicfinance.css sizes a grid column with
     `minmax(0, …)`, and `minmax(0, none)` is invalid — it would drop the whole
     declaration and collapse that layout. */
  --measure-lead-len: 62ch;

  /* Counties choropleth ramp (token ADDITIONS, derived from the brand red
     family; light -> dark). Consumed by parliament.css (.ccard--t*) and read
     by the counties-map JS via getComputedStyle — keep the names stable. */
  --map-ramp-0: #eeeeee; /* zero members / no data */
  --map-ramp-1: #f3d6d8;
  --map-ramp-2: #e08e92;
  --map-ramp-3: #c84d54;
  --map-ramp-4: #A51E27;
  --map-ramp-4-deep: #8d1820; /* count-badge shade between ramp-4 and ramp-5 */
  --map-ramp-5: #7a1620;

  /* Semantic colours (intent-based; map onto the brand where sensible) */
  --colour-success: hsl(145 63% 32%);
  --colour-success-bg: hsl(145 50% 95%);
  --colour-warning: hsl(38 92% 32%);
  --colour-warning-bg: hsl(45 100% 94%);
  --colour-danger: var(--colour-primary);
  --colour-danger-bg: hsl(358 70% 96%);
  --colour-info: hsl(205 75% 42%);
  --colour-info-bg: hsl(205 70% 95%);

  /* Legislative stage palette (client, 2026-09-07: the Bills Tracker's Stage
     Key painted every stage the same two colours, so a reader could see how
     FAR a Bill had gone but never WHICH stage it was on). One hue per stage in
     `legislation.services.bill_stage.BILL_STAGES` order, defined here rather
     than in the app CSS because this is the token layer and the only file
     allowed raw hex/hsl (scripts/lint_design_system.py).

     Hues are picked for distinguishability rather than as a ramp, and are
     never the ONLY cue: each segment also carries its stage name as a title,
     and the row prints the stage in words. The count must stay in step with
     BILL_STAGES — apps/legislation/tests/test_bill_stage_colours.py fails if a
     stage ever has no colour.

     THESE VALUES ARE MEASURED, NOT CHOSEN BY EYE (2026-09-08). The first repair
     gave each stage its own hue and passed a test that compared the token
     STRINGS — and still failed the client's actual complaint, because Second
     Reading and Committee were 7.2 dE76 apart for a protanope: one colour, for
     roughly 8% of male readers. Hand-picked replacements measured 10.1 and 5.6,
     so intuition is not usable here.

     The Stage Key shows SIX swatches, not five: `.term` takes --colour-danger,
     the brand red. So the red is part of the set every stage must stay clear
     of, and no stage may take a red hue itself.

     Worst pair over all six swatches under normal / protanopia / deuteranopia /
     tritanopia vision (Machado et al. 2009, severity 1.0), CIE Lab dE76:
     21.9, against 7.2 for what shipped before. Every swatch clears 3.5:1 on
     white, above the 3:1 WCAG 1.4.11 floor for a non-text graphical object.
     test_bill_stage_colours.py re-runs that measurement, so a hand-tweaked hue
     that undoes it fails the build. */
  --colour-stage-1: hsl(230 55% 22%);   /* First Reading — deep navy */
  --colour-stage-2: hsl(250 82% 44%);   /* Second Reading — indigo */
  --colour-stage-3: hsl(305 70% 40%);   /* Committee of the Whole House — magenta */
  --colour-stage-4: hsl(25 89% 46%);    /* Third Reading — orange */
  --colour-stage-5: hsl(175 50% 38%);   /* Presidential Assent — teal-green */

  /* Navigation icon tones — the section rail's glyphs (2026-09-13). Cycled by
     row POSITION, so neighbours differ; the colour names nothing, because the
     label is printed beside the glyph and the glyphs differ anyway.

     NOT the stage palette above, on purpose. Those five hues ARE the five Bill
     stages; spending one on a menu row would teach a reader a colour means a
     stage in one place and a link in another.

     Measured with apps/legislation/tests/colour_vision.py, the same module the
     stage palette uses, but against a DIFFERENT contract — a rail icon carries
     no meaning, so the 15.0 dE76 separation floor does not apply. What must
     hold, and what test_menu_icons.py re-measures:
       * every tone clears 3:1 on white (WCAG 2.2 SC 1.4.11) — floor here 3.72:1;
       * no tone is confusable with the brand red, which DOES carry meaning on
         this component ("you are here") — nearest 15.8 dE76;
       * nor with the resting grey of a link that is not current — 14.0 dE76;
       * neighbours are separated — closest pair 7.9 dE76 (nav-2/nav-3 under
         tritanopia), over normal / protanopia / deuteranopia / tritanopia
         (Machado et al. 2009, severity 1.0). */
  --colour-nav-1: hsl(214 78% 44%);     /* blue */
  --colour-nav-2: hsl(186 84% 30%);     /* teal */
  --colour-nav-3: hsl(140 62% 30%);     /* green */
  --colour-nav-4: hsl(42 95% 35%);      /* amber */
  --colour-nav-5: hsl(284 62% 52%);     /* violet */

  /* The same five hues at wash lightness, for the tile behind each glyph. */
  --colour-nav-1-bg: hsl(214 78% 95%);
  --colour-nav-2-bg: hsl(186 84% 94%);
  --colour-nav-3-bg: hsl(140 62% 94%);
  --colour-nav-4-bg: hsl(42 95% 92%);
  --colour-nav-5-bg: hsl(284 62% 96%);
}

/* Leaflet paints its internal panes/controls on a 200–1000 z-index scale
   (.leaflet-bottom is 1000, controls 800), but .leaflet-container sets no
   z-index of its own — so on map pages (e.g. /mps-performance/counties/) those
   values leak into the root stacking context and paint OVER the navbar dropdown
   (--z-dropdown: 100). `isolation: isolate` makes each map its own stacking
   context so its internal layers stay contained and the whole map sits below
   site chrome (header menus, modals, toasts). Map popups/controls still stack
   correctly *within* the map. */
.leaflet-container {
  isolation: isolate;
}

/* --- Basic Reset & Base Styles --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* Remove forced 100vh and flex column for normal flow */
  height: auto;
  min-height: 0;
  display: block;
  flex-direction: unset;
  font-family: var(--font-main);
  line-height: var(--leading-normal);
  color: var(--colour-text);
  /* Comfortable 16px floor scaling to ~17px on desktop (was a 14px floor). */
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.0625rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Guard against accidental horizontal scroll from a single wide child. */
  overflow-x: hidden;
}

/* Long unbroken strings (URLs, hashes) wrap instead of forcing a scrollbar. */
p,
li,
dd,
.card__title,
.result-excerpt,
.breadcrumb-item {
  overflow-wrap: break-word;
}

/* One heading system: near-black by default; colour is reserved for the page
   title (.page-heading) and intentional accents — not arbitrary per level. */
h1,
h2,
h3,
h4 {
  line-height: var(--leading-tight);
  font-weight: var(--fw-bold);
  color: var(--colour-text);
  letter-spacing: -0.011em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.021em;
  margin-bottom: 1.25rem;
}

h2 {
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem);
  margin-bottom: 1.1rem;
}

h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: var(--fw-semibold);
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

h4 {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  font-weight: var(--fw-semibold);
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 1rem;
  font-size: inherit;
}

span.emphasis {
  font-weight: 600;
}

span.highlight {
  font-weight: 600;
  font-style: italic;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--motion-fast) var(--ease-standard);
}

/* Content links must READ as clickable. The base rule above (color:inherit,
   no underline) is correct for CLASSED UI links (nav, buttons, cards, pills,
   entity mentions) which style their own affordance — but it left every plain,
   unclassed content link (member/legislation lists, prose body links, "read
   more") looking identical to surrounding text. Give those inside the main
   content area a real link treatment. UI links carry a class and opt out; the
   footer sits outside .site-content; breadcrumbs and pagination reset below. */
.site-content a:not([class]) {
  color: var(--colour-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.site-content a:not([class]):hover,
.site-content a:not([class]):focus-visible {
  color: var(--colour-link-hover);
  text-decoration-thickness: 2px;
}
/* Chrome/controls that happen to be bare <a> but are NOT body copy —
   breadcrumbs, pagination, and ARIA tab/button controls: keep them quiet at
   rest (they have their own affordance) and only underline on hover. */
.breadcrumbs a:not([class]),
[class*="pagination"] a:not([class]),
[role="tab"]:not([class]),
[role="button"]:not([class]) {
  color: inherit;
  text-decoration: none;
}
.breadcrumbs a:not([class]):hover,
[class*="pagination"] a:not([class]):hover,
.site-footer a:not([class]):hover {
  text-decoration: underline;
}

a:hover,
a:active {
  color: var(--colour-primary-light);
}

/* Accessible, on-brand focus ring for keyboard users across every interactive
   element. Mouse clicks stay clean (:focus-visible only). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--colour-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

svg:not(:root) {
  overflow: hidden;
}

/* --- Global Utility Classes --- */
/* `max()` picks the WIDER of the two rules, which is what keeps the 60% gutter
   cut off small screens: the old `95%` wins below ~480px (measured — that is
   where 5% of the viewport drops under the clamp's 12px floor), and the gutter
   rule wins above it. Swapping to `min()`, or dropping the 95%, would squeeze a
   390px screen from a 10px edge to 12px of hard-clamped padding and take the
   phone layout with it. */
.container {
  width: max(95%, calc(100% - var(--container-gutter) * 2));
  max-width: var(--container-max);
  margin: 0 auto;
}

.svg-logo {
  max-width: 100%;
  max-height: 100%;
}

.page-heading {
  color: var(--colour-primary);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  line-height: var(--leading-tight);
  letter-spacing: -0.022em;
  margin: 0;
}

/* Lead paragraph: larger and muted. It is NOT full-width — components.css caps
   it at `--measure-lead` and sets `margin-inline: 0`.

   This comment used to argue the opposite ("spans the full content width … a
   narrower reading measure read as an odd word-wrap"). That reasoning is what
   produced 137-215 characters per line on these leads. The odd word-wrap it
   describes was caused by `.prose`'s `margin-inline: auto` CENTRING the
   paragraph, not by the width cap — cap the measure and stay flush left and it
   reads correctly. Two separate sessions removed the cap on that mistaken
   reading (analysis.css, parliament.css); the stale comment here is how the
   mistake kept being rediscovered. Do not re-widen these without reading
   components.css first. */
.page-intro--text,
.section-intro--text {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--colour-text-light);
  margin-bottom: 1.5rem;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px var(--colour-primary-alpha-20);
}

/* Visible keyboard focus for interactive elements (was only on form inputs). */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
summary:focus-visible,
.tab:focus-visible {
  outline: 2px solid var(--colour-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip-to-content link: visually hidden until focused (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: var(--z-toast);
  background: var(--colour-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: top var(--motion-fast) var(--ease-standard);
}
.skip-link:focus {
  top: var(--space-3);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- Header Styles --- */
.site-header {
  padding-top: 0.25rem;
}

/* Masthead: logo on the left, a two-row stack (nav + page title) on the right. */
.site-header__bar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: center;
  position: relative;
  padding: var(--space-3) 0;
}
.site-header__stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  min-width: 0;
}
.site-header__navrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
/* Page-header band at the top of <main> (breadcrumb + title), left-aligned.
   Collapses on pages with neither a title nor breadcrumbs (e.g. home). */
.page-band .breadcrumbs {
  margin: 0 0 var(--space-2);
}
.page-band .page-heading:empty {
  display: none;
}
.page-band:not(:has(.page-heading:not(:empty))):not(:has(.breadcrumbs)) {
  display: none;
}
/* Title + primary action on one line. A page that overrides `page_heading` to
   put a CTA beside its title uses this: on a wide screen the action sits at the
   far right of the title's line; when the two no longer fit, flex-wrap drops
   the action onto its own line rather than squeezing the name. No media query
   is needed — the break happens at whatever width THIS title stops fitting,
   which differs per member name. */
.page-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}
.page-heading-row .page-heading {
  flex: 1 1 auto;
  min-width: 0;
}
/* The action may shrink and wrap its own label: these CTAs carry the member's
   full name, which on a phone is wider than the viewport. `.btn` sets
   `line-height: 1`, correct for a one-line pill and cramped for two. */
.page-heading-row > .btn {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: var(--leading-tight);
}

.site-header__logo {
  max-width: 300px;
  height: auto;
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-header__logo a,
.site-header__logo svg,
.site-header__logo img,
.svg-logo {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: auto;
  display: block;
}

/* The anniversary logo PNG is 250x303 (a tall vertical lockup). Cap its height so
   the header stays compact. Mobile gets the smaller cap here; desktop bumps it up
   (the logo lives on its own brand row, so a bigger logo creates no dead space). */
.site-header__logo,
.site-header__logo a,
.site-header__logo img {
  max-height: 72px;
}
.site-header__logo img {
  height: auto;
  width: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-actions--top {
  flex: 1;
  justify-content: flex-end;
}

/* Primary nav lives in the masthead's top-right row, beside the logo. Hidden on
   mobile — the hamburger drawer serves navigation there. */
.main-nav {
  flex: 0 1 auto;
  min-width: 0;
  display: none;
}

.main-nav__list {
  display: flex;
  /* Items wrap to a second row when the navrow is too narrow — the nowrap
     link labels must never overflow under the search control beside them. */
  flex-wrap: wrap;
  width: auto;
  justify-content: flex-start;
  align-items: center;
  gap: 0.1rem;
}

.main-nav__list-item {
  text-align: center;
  position: relative;
}

.main-nav__list-item:first-child {
  text-align: left;
}

.main-nav__list-item:last-child {
  text-align: right;
}

.main-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 3.25rem;
  min-height: 3.25rem;
  padding: 0 var(--space-3);
  font-size: clamp(0.8rem, 1vw, 1rem);
  white-space: nowrap;
  font-weight: 600;
  color: var(--colour-text);
  border-bottom: 2px solid transparent;
  transition: color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.main-nav__link:hover,
.main-nav__list-item:focus-within > .main-nav__link {
  color: var(--colour-primary);
  border-bottom-color: var(--colour-primary);
}

/* Caret affordance on items that open a dropdown */
.main-nav__list-item.has-desktop-submenu > .main-nav__link::after {
  content: "\25BE";
  font-size: 0.7em;
  line-height: 1;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.main-nav__list-item.has-desktop-submenu:hover > .main-nav__link::after,
.main-nav__list-item.has-desktop-submenu:focus-within > .main-nav__link::after {
  transform: rotate(180deg);
}

/* --- Desktop Submenu Styles ---
   A vertical dropdown card. (The old design laid items out in one horizontal
   row, which made each menu 666–1500px wide and clipped off the viewport.) */
.main-nav__list-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-width: 320px;
  padding: var(--space-2) 0;
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-top: 3px solid var(--colour-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  /* Animated open (replaces a display toggle so it can transition) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    visibility var(--motion-fast) var(--ease-standard);
}

.has-desktop-submenu:hover > .main-nav__list-submenu,
.has-desktop-submenu:focus-within > .main-nav__list-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Right-most menus (Resources / News / About) anchor to the right edge so the
   card never clips off the right of the viewport. */
.main-nav__list-item:nth-last-child(-n + 3) .main-nav__list-submenu {
  left: auto;
  right: 0;
}

.main-nav__list-submenu a {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  color: var(--colour-text);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-align: left;
  border-left: 3px solid transparent;
  transition: background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.main-nav__list-submenu a:hover,
.main-nav__list-submenu a:focus {
  background: var(--colour-primary-alpha-10);
  color: var(--colour-primary);
  border-left-color: var(--colour-primary);
}

/* Third-level-by-appearance. The menu model is only two levels deep, so an item
   that belongs under its predecessor (e.g. Constituency Allocations under Public
   Finance Observatory) is flagged by core.context_processors._mark_nested and
   indented here. The guide rule reads as the parent/child line the dropdown
   cannot express structurally. */
.main-nav__list-submenu .is-nested {
  position: relative;
}

.main-nav__list-submenu .is-nested a {
  padding-left: var(--space-6);
  font-size: var(--text-xs);
}

.main-nav__list-submenu .is-nested a::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: 50%;
  width: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.hamburger-icon {
  font-size: 1.5rem;
  cursor: pointer;
  display: block;
  /* Shown by default on mobile/tablet */
  padding: 0.5rem;
  color: var(--colour-primary);
  background: none;
  border: none;
  line-height: 1;
}

.hamburger-icon:hover {
  color: var(--colour-primary-dark);
}

.search-area {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0;
  display: none;
}

.search-area input[type='search'] {
  height: 2.5rem;
  box-sizing: border-box;
  padding: 0.75rem;
  border: 2px solid var(--colour-primary-dark);
  border-radius: var(--radius) 0 0 var(--radius);
  font-family: var(--font-main);
  margin-right: -8px;
  /* Adjust to overlap with search icon */
  opacity: 0;
  max-width: 0;
  pointer-events: none;
  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-area.expanded input[type='search'] {
  opacity: 1;
  max-width: 10rem;
  pointer-events: auto;
}

.search-area input[type='search']:focus {
  outline: none;
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px var(--colour-primary-alpha-20);
}

.search-icon {
  cursor: pointer;
  padding: 0.7rem;
  background: var(--colour-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 2.5rem;
  width: 2.5rem;
  z-index: 100;
}

/* --- Mobile Menu Styles --- */
.mobile-menu {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  width: 90vw;
  max-width: 420px;
  height: 100vh;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  padding: 2rem 1rem;
  z-index: 1000;
  flex-direction: column;
  border-left: 1px solid #eee;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  /* Make menu scrollable if content overflows */
  overflow-x: hidden;
  /* Prevent horizontal scrolling */
  overscroll-behavior: contain;
}

.mobile-menu.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu .close-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--colour-primary);
  background: none;
  border: none;
  line-height: 1;
  z-index: 1100;
}

.mobile-menu .close-icon:hover {
  color: var(--colour-primary-dark);
}

.mobile-menu nav ul {
  flex-direction: column;
}

.mobile-menu nav {
  margin-top: 0.75rem;
}

.mobile-menu nav li {
  margin: 0;
  width: 100%;
}

.mobile-menu nav a {
  display: block;
  padding: 0.8rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-menu nav a:hover {
  background-color: #f8f9fa;
}

.mobile-nav__list-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  width: 100%;
  padding: 0;
}

.mobile-nav__list-item .mobile-nav__link {
  font-size: 1rem;
  font-weight: 600;
  padding-left: 0.5rem;
}

.mobile-nav__toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  width: 3rem;
  height: 2rem;
  margin-right: 0;
  cursor: pointer;
  color: var(--colour-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.mobile-nav__submenu {
  max-height: 0;
  overflow: hidden;
  flex-direction: column;
  grid-column: 1 / -1;
  width: 100%;
  background: #fafbfc;
  border-left: 2px solid var(--colour-primary-dark);
  border-top: 1px solid #eee;
  margin-left: 3.5rem;
  margin-top: -1px;
  position: static;
  box-shadow: none;
  padding-left: 0.5rem;
  transition: max-height 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav__submenu a {
  font-size: 0.95rem;
  font-weight: 500;
}

/* Mirrors the desktop indent so the two navs keep saying the same thing.
   `.mobile-menu nav a` has no left padding, so this reads purely as the indent. */
.mobile-nav__submenu .is-nested a {
  padding-left: var(--space-5);
  font-size: 0.875rem;
}

.mobile-nav__list-item.expanded>.mobile-nav__submenu {
  max-height: 500px;
  /* Large enough for submenu content */
  display: flex;
}

.mobile-nav__list-item>.mobile-nav__link {
  flex: 1;
}

.mobile-nav__list-item:not(.has-submenu) .mobile-nav__link {
  grid-column: 2;
  margin-left: 3rem;
}

/* Make the mobile search form fill the menu width */
.mobile-menu .mobile-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  margin-top: 1rem;
  width: 100%;
}

/* Make the input fill available space */
.mobile-menu .mobile-search-form input[type='search'] {
  height: 2.5rem;
  width: 100%;
  flex: 1 1 0%;
  padding: 0.75rem;
  border: 1px solid var(--colour-primary-dark);
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 0.9rem;
  font-family: var(--font-main);
  margin-left: 3.4rem;
  margin-right: -4px;
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

.mobile-menu .mobile-search-form .search-icon {
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.7rem;
  background: var(--colour-primary, #d21218);
  color: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--colour-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 2.5rem;
  width: 2.5rem;
  margin-left: 0;
}

/* --- Main Content Section --- */
.site-content {
  /* Ensures footer stays at the bottom */
  flex-grow: unset;
  /* Top padding is 0 by owner direction (2026-09-02): this was the 32px of
     dead white above `.page-band`, present on pages without the brand hero and
     absent on pages with it, which is the inconsistency that was reported.
     `home.css`'s `.site-content { padding-top: 0 }` now merely agrees with
     this rule instead of overriding it. */
  padding: 0;
  /* The last block on the page used to sit flush against the grey footer —
     0px on 74 of 76 pages measured — because the shorthand above sets a top
     padding only. Deliberately the LONGHAND, and deliberately left inside this
     same rule; the footer gap is unrelated to the band and stays. */
  padding-bottom: var(--space-7);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  height: auto;
  /* THE page-level vertical rhythm. This element is a flex column, which has
     two consequences that are easy to miss and that together produced the
     "sections have no space between them" report of 2026-08-02:

       1. Flex items' margins do NOT collapse, so any margin here ADDS to a
          child's own margin rather than merging with it.
       2. `* { margin: 0 }` above strips every default, so a child with no
          explicit margin sits at exactly 0px from its sibling.

     Measured before this line: 20 of 75 top-level pairs across 76 pages
     rendered at 0px. A `row-gap` is the right tool precisely BECAUSE margins
     do not collapse here — it applies once, between every pair, and cannot
     double up. `.page-band`'s `margin-bottom` was removed in components.css
     when this landed; restore one or the other, never both, or the hero-to-
     content gap becomes 64px. */
  row-gap: var(--space-6);
}


/* --- Breadcrumbs --- */
.breadcrumbs {
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

.breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb-item {
  margin: 0 0.25rem;
  color: var(--colour-secondary-dark);
  font-weight: var(--fw-medium);
}

.breadcrumb-item a:hover {
  color: var(--colour-primary);
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 0.25rem;
  color: var(--colour-medium);
}

.breadcrumb-item.current {
  font-weight: var(--fw-semibold);
  color: var(--colour-text);
}

/* --- Shared Global Search and Hansard Styles --- */
.search-results-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.search-option:hover {
  border-color: var(--colour-secondary);
  box-shadow: var(--shadow-md);
}

small {
  display: flex;
  align-items: center;
  color: var(--colour-text-muted);
}

small img {
  width: 1.5rem;
  margin-left: 0.5rem;
}

.search-results {
  flex: 1;
}

.result-title-link {
  text-decoration: none;
  /* At-rest link colour so result titles read as clickable (affordance
     contract in components.css) — hover keeps the secondary accent. */
  color: var(--colour-link);
  transition: color var(--motion-fast) var(--ease-standard);
}

.result-title-link:hover {
  color: var(--colour-secondary);
  text-decoration: underline;
}

.result-title-link:hover .result-title {
  color: var(--colour-secondary);
}

.results-info {
  font-weight: var(--fw-semibold);
  color: var(--colour-text);
}

.ai-answer-section {
  border-radius: var(--radius-md);
  padding: var(--space-5) 0;
}

.ai-answer {
  background: var(--colour-bg);
  padding: var(--space-5);
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--colour-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  line-height: var(--leading-normal);
}

.ai-sources {
  color: var(--colour-text);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ai-sources h4 {
  flex: 1 1 100%;
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--colour-text-muted);
}

.ai-sources span {
  background: var(--colour-primary-alpha-10);
  color: var(--colour-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
}

.ai-sources a {
  text-decoration: none;
}

.result-item {
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  transition: box-shadow var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
  box-shadow: var(--shadow-sm);
}

.result-item:hover {
  border-color: var(--colour-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.result-header h4 {
  color: var(--colour-primary-dark);
}

.result-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--colour-primary);
  margin: 0;
  text-decoration: none;
}

.result-title:hover {
  color: var(--colour-secondary);
  text-decoration: underline;
}

.result-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--colour-secondary-alpha-10);
  color: var(--colour-secondary-dark);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
}

.result-excerpt {
  line-height: var(--leading-normal);
  margin: var(--space-4) 0;
  color: var(--colour-text);
}

.result-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--colour-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--colour-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  transition: background var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

.read-more-btn:hover {
  background: var(--colour-primary-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.help-text {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  font-style: italic;
  padding: var(--space-1) var(--space-4);
}

.no-results {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  background: var(--colour-bg-subtle);
  border-radius: var(--radius-lg);
  border: 1px solid var(--colour-border);
  margin-bottom: var(--space-4);
}

.no-results h3 {
  color: var(--colour-text);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.search-suggestions {
  background: var(--colour-danger-bg);
  border: 1px solid var(--colour-primary-alpha-20);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  margin-top: var(--space-6);
}

/* Contributor Names */
div.contributor-name {
  font-size: var(--text-sm);
  color: var(--colour-primary);
  font-weight: var(--fw-bold);
}

/* Unmatched Contributors - Visual Indicator */
div.contributor-name.unmatched-contributor {
  background-color: var(--colour-warning-bg);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-5) 0 var(--space-2);
  border-radius: var(--radius-sm);
  position: relative;
}

div.contributor-name.unmatched-contributor:hover {
  background-color: hsl(45 90% 86%);
  cursor: help;
}

/* Speech Content */
div.speech-content {
  margin-left: 0;
  padding-left: 0;
}

div.speech-content p {
  margin: var(--space-3) 0;
  text-align: justify;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* --- Pagination (legacy Wagtail paginator) --- */
.paginator {
  max-width: var(--container-max);
  margin: 0 auto;
}

.pagination-container {
  width: 100%;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 100%;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-medium);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  list-style: none;
  padding: var(--space-5) 0;
}

.pagination li {
  display: flex;
}

.pagination hr {
  margin-bottom: 0.5rem;
}

.pagination-link--previous,
.pagination-link--next {
  font-weight: var(--fw-bold);
}

.pagination a {
  color: var(--colour-text);
}

.pagination svg {
  width: 1.5em;
  height: 1.5em;
  margin: 0 0.4em;
}

.pagination .enabled {
  fill: var(--colour-primary);
}

/* Number tiles + chevrons share one consistent, token-driven pill shape. */
.pagination .number_box,
.pagination .page_chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--space-3);
  text-decoration: none;
  border: 1px solid var(--colour-border-strong);
  text-align: center;
  background-color: var(--colour-bg);
  color: var(--colour-text);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background-color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard);
}

.pagination .number_box:hover,
.pagination .page_chevron:hover {
  color: #fff;
  background-color: var(--colour-primary);
  border-color: var(--colour-primary);
}

.pagination .number_box:hover a.page_label {
  color: #fff;
}

.pagination .active_number_box,
.pagination li.active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--space-3);
  color: #fff;
  font-weight: var(--fw-bold);
  text-align: center;
  background-color: var(--colour-primary);
  border: 1px solid var(--colour-primary);
  border-radius: var(--radius-md);
}

.pagination .page_chevron.is-disabled,
.pagination .is-disabled {
  color: var(--colour-medium);
  background-color: var(--colour-lighter);
  border-color: var(--colour-border);
  cursor: not-allowed;
  pointer-events: none;
}

.pagination li.active_ellipses a {
  text-decoration: none;
  padding: 0 var(--space-2);
  color: var(--colour-text-muted);
}

.pagination .disabled {
  display: none;
}

/* --- Footer Styles --- */
/* Light footer matched to old.mzalendo.com: a light-grey slab sitting above the
   black fine-print bar. Text and links inherit the (dark) body colour so they
   read on the light background. */
.site-footer {
  background-color: #ededed;
  position: static;
  bottom: unset;
  width: 100%;
}

/* Footer Row: Newsletter */
.newsletter {
  background-color: var(--colour-primary);
  color: #fff;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.newsletter .container.newsletter-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile first */
  gap: 1rem;
  align-items: center;
}

.newsletter-cta h3 {
  margin-bottom: 0.5rem;
  color: #fff;
}

.newsletter-link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

.newsletter-link:hover {
  color: var(--colour-secondary-light);
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.newsletter-form input[type='email'] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #6c757d;
  border-radius: var(--radius);
  background-color: #fff;
  color: #333;
  min-width: 0;
  font-family: var(--font-main);
}

.newsletter-form input[type='email']:focus {
  outline: none;
  border-color: var(--colour-primary-dark);
  box-shadow: 0 0 0 3px hsl(0 0% 100% / 0.45);
}

.newsletter-form button {
  width: 100%;
  padding: 0.75rem 1.5rem;
  /* White fill on the red band — distinct from the band, and avoids a third
     (brighter) red competing with the brand red. */
  background-color: #fff;
  color: var(--colour-primary);
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-family: var(--font-main);
}

.newsletter-form button:hover {
  background-color: var(--colour-secondary);
  color: #fff;
}

/* Footer Row 2: Main Footer Content */
/* The top padding matches the bottom: old.mzalendo.com got its top spacing from
   the red newsletter band above this row, which this (analytics) site drops —
   without it the logo sits flush against the top edge of the grey slab. */
.footer-content .container {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile first */
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.footer-logo {
  width: 150px;
  margin-bottom: 1rem;
}

.footer-logo a {
  display: block;
}

/* Column headings, matched to the old footer's dark h4 treatment (our footer
   markup uses <h2>, so size it down to the old heading scale). */
.site-footer h2 {
  color: var(--colour-dark);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 1rem;
}

.footer-links ul li,
.footer-contact p,
.footer-social ul li {
  margin-bottom: 0.5rem;
}

.footer-social ul {
  display: flex;
  justify-content: flex-start;
}

/* Mobile: spread the social icons evenly across the row */
@media (max-width: 1023px) {
  .footer-social ul {
    justify-content: space-evenly;
  }

  .footer-social li {
    margin-right: 0;
  }
}

.footer-social li {
  margin-right: 1rem;
}

.footer-social a {
  font-size: 1.5rem;
  /* Icon size */
}

/* Footer Bottom: Fine Print */
.footer-bottom {
  background-color: #000;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--colour-light);
}

.footer-bottom .container {
  display: flex;
  flex-direction: column;
  /* Stack on small screens */
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.footer-bottom-links a {
  margin: 0 0.5rem;
}

/* --- Media Queries (Responsive Design) --- */

/* Tablet Styles */
@media (min-width: 768px) {
  .main-nav {
    display: none !important;
    /* Tablet: keep the desktop nav hidden; hamburger drawer is used */
  }

  .hamburger-icon {
    display: block !important;
    /* Ensure hamburger is visible on tablet */
  }

  /* Newsletter (Footer Row 1) */
  .newsletter-grid {
    grid-template-rows: auto auto;
    /* Re-adjust for tablet */
    gap: 1.5rem;
  }

  .newsletter-cta {
    grid-row: 1;
    text-align: left;
    width: 100%;
  }

  .newsletter-form {
    grid-row: 2;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    align-items: center;
  }

  .newsletter-form input[type='email'] {
    flex: 2 1 0%;
    min-width: 120px;
    font-size: 1rem;
    width: 100%;
  }

  .newsletter-form button {
    flex: 1 1 0%;
    min-width: 100px;
    font-size: 1rem;
    width: 100%;
  }

  /* Footer Content (Footer Row 2) */
  .footer-content .container {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns for tablet */
    text-align: left;
  }

  .footer-logo {
    grid-column: 1 / -1;
    /* Span all columns */
    text-align: center;
    margin-bottom: 1rem;
  }

  /* Footer Bottom */
  .footer-bottom .container {
    flex-direction: row;
    /* Side by side */
  }
}

/* Desktop Media Query */
@media (min-width: 1024px) {

  /* Bigger logo, flanked by the two-row stack (nav + page title) — no dead space. */
  .site-header__logo,
  .site-header__logo a,
  .site-header__logo img {
    max-height: 112px;
  }

  /* Show the desktop nav (—important— to beat the tablet none rule).
     Nav packs from the left; when the navrow is too narrow for all nine
     nowrap items (common at 1280–1440px) the list wraps onto a second
     row instead of overflowing beneath the search control. */
  .main-nav {
    display: flex !important;
    flex: 0 1 auto;
    justify-content: flex-start;
  }

  .main-nav__list {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    justify-content: flex-start;
    gap: 0.25rem;
  }

  .header-actions {
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: 0;
  }

  .search-area {
    display: flex;
    align-items: center;
  }

  .hamburger-icon {
    display: none !important;
    /* Hide hamburger, force with !important */
  }

  .mobile-menu {
    display: none !important;
    /* Ensure mobile menu is hidden */
  }

  /* Newsletter */
  .newsletter .container.newsletter-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 2rem;
  }

  .newsletter-cta {
    grid-column: 1 / 2;
    grid-row: 1;
    text-align: left;
  }

  .newsletter-form {
    grid-column: 2 / 3;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin: 0;
  }

  /* Footer Content */
  .footer-content .container {
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns for desktop */
    text-align: left;
  }

  .footer-logo {
    grid-column: auto;
    text-align: left;
    margin-bottom: 0;
  }
}

/* All eight primary items fit at this width once their decorative side
   padding is reduced. Keeping flex-wrap here made "Contact" create a second
   52px-tall row at 1440px while more than 80px remained unused to its right. */
@media (min-width: 1400px) {
  .main-nav__list {
    flex-wrap: nowrap;
  }

  .main-nav__link {
    padding-inline: var(--space-1);
  }
}

/* Long-tail guard: a page that leaves the heading block empty must not
   paint an empty h1 band (templates with hero h1s override page_heading). */
.page-heading:empty { display: none; }