/*
Theme Name: Joe Fagan MSP — Holding Site
Theme URI: https://scottishlabour.org.uk
Author: Scottish Labour / Joe Fagan MSP office
Description: Lightweight, type-led custom holding-site theme for Joe Fagan MSP (Scottish Labour, South of Scotland). Two pages — a home/holding page and a privacy notice — in an editorial, 1980s-revival campaign style built on Playfair Display + Poppins. Hand-written CSS, no page builder.
Version: 2.0.6
Requires at least: 6.6
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jfmsp
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --paper:       #f7f3ea;  /* page background            */
  --paper-2:     #efe7d6;  /* tinted band                */
  --card:        #fffdf8;  /* raised surface             */
  --accent:      #E4003B;  /* Labour red                 */
  --accent-dark: #9a352f;  /* deep red — strap/links     */
  --ink:         #211c18;  /* headings / name            */
  --body:        #46403a;  /* paragraph text             */
  --muted:       #9a8f7c;  /* footer text                */
  --muted-2:     #a89b84;  /* eyebrows / labels          */
  --hairline:    rgba(0,0,0,.08);

  --wrap-wide:   1080px;
  --wrap-read:   760px;

  /* Bridge to the plugin's tokens.
     Patch styles itself with the block-theme variable names, so declaring them
     here makes every plugin component — router, signup, maps — inherit this
     site's palette instead of falling back to its own defaults. */
  --wp--preset--color--accent-1: var(--accent);
  --wp--preset--color--accent-3: var(--accent-dark);
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { max-width: 100%; }

/* Visually hidden but available to assistive tech (WordPress convention;
   used by the_posts_pagination's heading and the search form label). */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
::selection { background: var(--accent); color: #fff; }

a:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   Scaffolding
   ============================================================ */
.page { display: flex; flex-direction: column; min-height: 100vh; }

.topbar { flex: none; height: 6px; background: var(--accent); }

.wrap { width: 100%; max-width: var(--wrap-wide); margin: 0 auto; }
.wrap--read { max-width: var(--wrap-read); }

/* ------------------------------------------------------------------
   Block group wrapper flattening

   Without a theme.json, WordPress wraps every Group block's children in an
   extra <div class="wp-block-group__inner-container">. That wrapper sat
   between our flex/grid containers (.hero, .helpgrid, .contact__grid, .routes)
   and their actual columns, so the layout only ever saw one child and stacked
   everything.

   `display: contents` makes the wrapper generate no box of its own: its
   children take part in the grandparent's flex/grid directly, exactly as if
   the wrapper weren't there. One line, and every multi-column section lays out
   as designed — against the block markup as WordPress actually saves it, with
   nothing to re-paste. The wrapper carries no styling of its own, so nothing
   is lost by collapsing it. (Well supported across current browsers.)
   ------------------------------------------------------------------ */
.wp-block-group__inner-container { display: contents; }

/* Block template parts wrap their content in <div class="wp-block-template-part">.
   For the header that wrapper is only as tall as the masthead, which breaks
   position:sticky (the header sticks within the wrapper, then unsticks the moment
   you scroll past it). Collapsing the wrapper makes .site-head a direct child of
   the page container again, so it sticks against the whole scroll as before. The
   wrapper carries no styling of its own, so nothing is lost. */
.wp-block-template-part { display: contents; }

/* Those sections space their columns with `gap`; stop WordPress's default
   block-gap from also adding vertical margins to the (now hoisted) columns.
   The class-led selectors sit above core's :where() rules regardless of load
   order, and cover both the wrapped and already-flat shapes. */
.hero > *,           .hero > .wp-block-group__inner-container > *,
.helpgrid > *,       .helpgrid > .wp-block-group__inner-container > *,
.contact__grid > *,  .contact__grid > .wp-block-group__inner-container > *,
.routes > *,         .routes > .wp-block-group__inner-container > * {
  margin-block: 0;
}

/* ============================================================
   Masthead
   ============================================================ */
/* Sticky bar. The 6px red topbar sits above it and scrolls away. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  flex: none;
  background: rgba(247, 243, 234, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.site-head.is-scrolled {
  border-bottom-color: var(--hairline);
  box-shadow: 0 6px 20px -16px rgba(0, 0, 0, .5);
}

/* Keep clear of the WordPress admin bar when logged in. */
body.admin-bar .site-head { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-head { top: 46px; }
}

.masthead {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 40px;
}

/* Brand lock-ups. On the front page the Scottish Labour logo cross-fades to the
   thistle + name; elsewhere only the thistle + name is rendered. The inactive
   lock-up is hidden with `visibility` so it leaves the tab order entirely. */
/* Pin the lock-up to the left on its own, rather than relying on a right-hand
   element (the nav or region) to hold it there via space-between. With the auto
   right margin the brand stays hard left whether or not a primary menu is
   assigned, and any nav/region still lands on the right. */
.brand { flex: none; margin-right: auto; }
.brand__lock {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.brand__full img { display: block; height: 23px; width: auto; max-width: none; }

/* The thistle and the name go to different places, so they are two links.
   They still have to read as one lock-up, which is what the tight gap and the
   shared hover are for. */
.brand__thistle-link { display: flex; align-items: center; text-decoration: none; }

/* The name and the badge sit on one line of ordinary text, not in a flex row.
   A flex item that is itself a flex container has no reliable baseline — the
   browser makes one up from the box edge — which is what threw the badge out of
   line. As plain inline content the badge has a real text baseline and lands on
   the same line as "Joe Fagan" with nothing to tune. */
.brand__name-link {
  display: block;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

/* The thistle is top-heavy: the flower carries about nine-tenths of the ink and
   the stem trails away thin, so centring the box floats it visually upward.
   Nudging it down by the measured offset between its ink centre and its
   geometric centre settles it against the name. Proportional, so it holds if
   the height changes. */
.brand__thistle {
  display: block;
  flex: none;
  height: 28px;
  width: auto;
  max-width: none;
  transform: translateY(6.5%);
}
.brand__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}

/* The same idea as the hero badge, shrunk: Poppins in a red box. At this size
   an x-height box would be too small to read, so it takes the cap height and
   centres against the name rather than sitting on the baseline. */
/* Sized to the F: both faces have a cap height of seven tenths of an em, so
   matching the name's size matches the capitals exactly — MSP stands the same
   height as the F and sits on the same baseline.

   line-height is the cap height rather than 1. At 1 the box takes the whole em,
   including the ascender and descender space the capitals never reach, which is
   what made it look oversized with the letters low inside it. Set to the cap
   height it closes around the letters, 1.5px clear all round. The radius keeps
   the hero's ratio to its box rather than repeating the hero's 5px. */
.brand__badge {
  display: inline-block;
  vertical-align: baseline;
  background: var(--accent);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: .7;
  letter-spacing: .03em;
  padding: .12em .15em;
  margin-left: 6px;
  border-radius: .075em;
}
.brand__name-link:hover .brand__name { color: var(--accent-dark); }
.brand__thistle-link:hover { opacity: .82; }
.brand__thistle-link,
.brand__name-link { transition: opacity .18s ease; }

/* Front page: the two lock-ups stack in one box and cross-fade. */
.brand--morph { position: relative; height: 34px; min-width: 186px; }
.brand--morph .brand__lock {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.brand--morph .brand__full {
  opacity: 1;
  visibility: visible;
  transition: opacity .28s ease, visibility 0s;
}
.site-head.is-scrolled .brand--morph .brand__full {
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.site-head.is-scrolled .brand--morph .brand__mark {
  opacity: 1;
  visibility: visible;
  transition: opacity .28s ease, visibility 0s;
}

/* Every other page: a single, ordinary link. */
.brand--fixed .brand__mark { position: static; transform: none; opacity: 1; visibility: visible; }

.masthead__region {
  font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); white-space: nowrap;
}
.masthead__back {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--muted-2); text-decoration: none;
}
.masthead__back:hover { color: var(--accent-dark); }

@media (max-width: 600px) {
  .masthead { padding: 12px 20px; }
  .brand--morph { height: 30px; min-width: 152px; }
  .brand__full img { height: 19px; }
  .brand__thistle { height: 24px; }
  .brand__name { font-size: 16px; }
  .brand__lock { gap: 9px; }
}

/* Primary navigation */
.masthead__nav { min-width: 0; }
.navlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navlist a {
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
}
.navlist a:hover { color: var(--accent-dark); }
.navlist .current-menu-item > a,
.navlist .current_page_item > a {
  color: var(--accent-dark);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
@media (max-width: 600px) {
  .navlist { gap: 4px 14px; }
  .navlist a { font-size: 13px; }
}

/* ============================================================
   Hero (home)
   ============================================================ */
.hero {
  flex: 1 0 auto;
  padding: clamp(40px, 7vh, 90px) 40px 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.hero__text { flex: 1 1 420px; min-width: min(100%, 360px); }

.eyebrow {
  font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 22px;
}

.hero__name {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: clamp(58px, 11vw, 116px);
  line-height: .9;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* MSP badge — Poppins lettering in a red box, built the same way as the one in
   the masthead so the two stay in proportion at any size.

   Drawn with ::after rather than a span in the heading: the front page is
   edited as blocks, and RichText strips inline HTML it doesn't recognise the
   moment the heading is edited. Generated content survives any edit, and the
   fallback template uses the same plain heading so one rule serves both.

   line-height is the cap height, not 1, so the box closes on the capitals
   instead of the whole em. Padding is in em, so it holds through the clamp.
   Because the cap height and Poppins' descent are both .35em either side of
   the middle, the box falls exactly the vertical padding below the baseline —
   which is all the translate has to take back to sit it on the line. */
.hero__name::after {
  content: "MSP";
  display: inline-block;
  vertical-align: baseline;
  background: var(--accent);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5.6vw, 59px);
  line-height: .7;
  letter-spacing: .01em;
  padding: .12em .15em;
  margin-left: 10px;
  border-radius: .075em;
  transform: translateY(-.12em);
}

.strapline {
  max-width: 680px;
  margin: 30px 0 24px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.35;
  color: var(--accent-dark);
}

.welcome {
  max-width: 640px;
  margin: 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.72;
  color: var(--body);
}

/* Portraits are <figure> elements now (the image block's shape; the fallback
   template matches it), so layout lives on the figure and the photo treatment
   on the img. Explicit margins override the browser's figure defaults. */

/* Portrait — desktop column.

   These carry a .hero prefix on purpose. On the block-built front page the
   portraits render as <figure class="wp-block-image">, and the block-library
   stylesheet's .wp-block-image rules share the same specificity as a bare
   .hero__photo-* class but load later — so they were quietly winning, which
   put the mobile photo on screen at desktop widths and knocked the desktop
   photo out of its flex column. Scoping under .hero lifts every one of these
   above block-library and settles the cascade regardless of load order. */
.hero .hero__photo-desktop {
  display: block;
  flex: 1 1 300px;
  min-width: min(100%, 280px);
  max-width: 420px;
  margin: 0;
}
.hero .hero__photo-desktop img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: 50% 6%;
  border-radius: clamp(7px, 1.4vw, 12px);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.4);
}

/* Portrait — mobile, sits inside the text column under the strapline */
.hero .hero__photo-mobile {
  display: none;
  width: 100%;
  margin: 0 0 28px;
}
.hero .hero__photo-mobile img {
  display: block;
  width: 100%;
  height: clamp(200px, 52vw, 300px);
  object-fit: cover;
  object-position: center 6%;
  border-radius: 12px;
  box-shadow: 0 14px 36px -16px rgba(0,0,0,.4);
}

@media (max-width: 760px) {
  .hero .hero__photo-desktop { display: none; }
  .hero .hero__photo-mobile  { display: block; }
}

/* Site-wide 20px mobile gutter: the masthead, bands, and footer all drop from
   40px to 20px at 600px, so the hero and contact grid follow suit. */
@media (max-width: 600px) {
  .hero {
    padding-left: 20px;
    padding-right: 20px;
  }
  .contact__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* On narrow phones the logo keeps its true size; the region label gives way:
   it shrinks a touch and may wrap to a second line rather than squeezing the logo. */
@media (max-width: 480px) {
  .masthead__region {
    font-size: 12px;
    letter-spacing: .06em;
    white-space: normal;
    text-align: right;
  }
}

/* ============================================================
   Contact bar
   ============================================================ */
.contact { flex: none; background: var(--accent); color: #fff; }
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  padding: 40px;
}
.contact__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  opacity: .72; margin: 0 0 10px;
}
.contact__email,
.contact__emailline a {
  font-size: 16px; line-height: 1.5; font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 2px;
}
.contact__emailline { margin: 0; }
.contact__address { font-size: 16px; line-height: 1.6; margin: 0; }
.contact__social { display: flex; gap: 18px; font-size: 15px; font-weight: 600; }
.contact__social p { margin: 0; }
.contact__social a {
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 2px;
}
.contact__handle { font-size: 14px; opacity: .85; margin: 8px 0 0; }
.contact a:hover { border-bottom-color: #fff; }

/* ============================================================
   News (front-page band, listing, archives, single)
   ============================================================ */
.band--news { background: var(--paper-2); }

.newsgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 860px) { .newsgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .newsgrid { grid-template-columns: 1fr; } }

/* On the listing/archive pages the grid lives inside .doc, whose children are
   capped to the reading measure — the cards want the full column instead. */
.doc .newsgrid,
.doc .news-pagination { max-width: none; }

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
}
.news-card__media { display: block; }
.news-card__img { display: block; width: 100%; height: 180px; object-fit: cover; }
.news-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.news-card__meta {
  margin: 0;
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2);
}
.news-card__title {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: 20px; line-height: 1.2;
  color: var(--ink);
}
.news-card__title a { text-decoration: none; color: inherit; }
/* Stretch the title link across the whole card so the card is clickable. */
.news-card__title a::after { content: ""; position: absolute; inset: 0; }
.news-card:hover .news-card__title { color: var(--accent-dark); }
.news-card__excerpt { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--body); }

.news-more { margin: 28px 0 0; }
.news-more a {
  font-size: 15px; font-weight: 600; color: var(--accent-dark);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.news-more a:hover { color: var(--accent); }

.news-empty { color: var(--muted); }

/* Single post extras layered onto the .doc / .privacy-body column */
.news-chips { margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.news-chip {
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  color: var(--accent-dark);
  background: rgba(228, 0, 59, .08);
  border-radius: 999px; padding: 4px 12px; text-decoration: none;
}
.news-chip:hover { background: rgba(228, 0, 59, .15); }
.news-single__media { margin: 0 0 26px; }
.news-single__img { width: 100%; border-radius: 14px; display: block; }
.news-back { margin-top: 44px; }
.news-back a { font-size: 15px; font-weight: 600; color: var(--accent-dark); text-decoration: none; }
.news-back a:hover { color: var(--accent); }

/* Pagination — shared by the shortcode (paginate_links) and the archive
   templates (the_posts_pagination). */
.news-pagination { margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.news-pagination .nav-links,
.news-pagination.nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.news-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--hairline); border-radius: 10px;
  text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink);
}
.news-pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.news-pagination .page-numbers:hover:not(.current) { border-color: var(--accent); color: var(--accent-dark); }
.news-pagination .page-numbers.dots { border-color: transparent; }

/* ============================================================
   Footer
   ============================================================ */
.sitefoot {
  background: var(--ink);
  color: #cfc6b6;
  margin-top: 0;
}
.sitefoot a { color: #f0e9dc; text-decoration: none; }
.sitefoot a:hover { color: #fff; text-decoration: underline; }

/* The footer containers are bare .wrap elements, so — unlike the bands and
   masthead, which pad themselves — they must carry their own side gutters. */
.sitefoot__cols,
.sitefoot__legalbar {
  padding-left: 40px;
  padding-right: 40px;
}

.sitefoot__cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-top: 54px;
  padding-bottom: 40px;
}
.sitefoot__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800; font-size: 21px;
  color: #fff; margin: 0 0 8px;
}
.sitefoot__blurb { margin: 0; max-width: 32ch; font-size: 14px; line-height: 1.6; }
.sitefoot__h {
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 12px;
}
.sitefoot__col { font-size: 15px; line-height: 1.9; }
.sitefoot__addr { font-size: 14px; line-height: 1.6; display: inline-block; margin-top: 6px; }
.sitefoot__handle { font-size: 14px; color: var(--muted-2); margin: 10px 0 0; }

.sitefoot__legalbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.sitefoot__copy { font-size: 13px; color: var(--muted-2); }
.sitefoot__link { font-size: 13px; }

@media (max-width: 780px) {
  .sitefoot__cols { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
}
@media (max-width: 600px) {
  .sitefoot__cols,
  .sitefoot__legalbar {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================
   Privacy notice
   ============================================================ */
.doc { flex: 1 0 auto; padding: 48px 40px 80px; }
@media (max-width: 600px) {
  .doc { padding-left: 20px; padding-right: 20px; }
}

/* The document column matches the home page width so headings line up,
   but the text itself stays at a comfortable reading measure, left-aligned. */
.doc > * { max-width: var(--wrap-read); }

.doc__kicker {
  font-size: 12px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 16px;
}
.doc__title {
  margin: 0 0 14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: clamp(42px, 7vw, 62px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.doc__updated { font-size: 14px; color: var(--muted); margin: 0 0 28px; }
.doc__intro { font-size: 17px; line-height: 1.72; color: var(--body); margin: 0 0 14px; }
.doc__draft-flag {
  margin: 0 0 40px;
  padding: 12px 14px;
  font-size: 13px; line-height: 1.5; font-weight: 600;
  color: var(--accent-dark);
  background: #f6e6e3;
  border: 1px solid #ecccc6;
  border-radius: 8px;
}

/* Body region — styles both the bundled draft and any wording the
   office later pastes into the WordPress page editor. */
.privacy-body > *:first-child { margin-top: 0; }
.privacy-body h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: 25px; line-height: 1.2;
  margin: 34px 0 12px; color: var(--ink);
}
.privacy-body p {
  font-size: 16px; line-height: 1.72; color: var(--body); margin: 0 0 16px;
}
.privacy-body p:last-child { margin-bottom: 0; }

.privacy-body h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  margin: 24px 0 6px;
  color: var(--ink);
}
.privacy-body ul {
  margin: 0 0 16px;
  padding-left: 1.25em;
}
.privacy-body li {
  font-size: 16px;
  line-height: 1.72;
  color: var(--body);
  margin: 0 0 8px;
}
.privacy-body li::marker { color: var(--accent); }
.privacy-body li:last-child { margin-bottom: 0; }
.privacy-body a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.privacy-body a:hover { color: var(--accent); }
.privacy-body strong { font-weight: 600; color: var(--ink); }
.privacy-body .contact-block {
  font-size: 16px; line-height: 1.85; color: var(--body); margin: 0 0 16px;
}

.welcome-more { margin: 18px 0 0; }
.welcome-more a {
  font-size: 15px; font-weight: 600; color: var(--accent-dark);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.welcome-more a:hover { color: var(--accent); }

/* ============================================================
   Bio page
   ============================================================ */
.bio-hero {
  display: flex;
  flex-direction: row-reverse;   /* portrait is first in DOM -> sits on the right */
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(24px, 3.5vw, 40px);
  margin: 0 0 38px;
}
.bio-hero__portrait { flex: 0 0 230px; max-width: 230px; }
.bio-hero__portrait img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.45);
}
.bio-hero__intro { flex: 1 1 320px; min-width: min(100%, 280px); }
.bio-hero__intro p {
  font-size: 17px; line-height: 1.7; color: var(--body); margin: 0 0 16px;
}
.bio-hero__intro p:last-child { margin-bottom: 0; }

/* Narrow screens: portrait becomes a full-width, wide band sitting directly
   below the title, cropped to Joe's face rather than the square desktop crop.
   Tweak object-position's Y value to reframe the face, or aspect-ratio for a
   taller/shorter band. */
@media (max-width: 620px) {
  .bio-hero { flex-direction: column; align-items: stretch; }
  .bio-hero__portrait { flex: none; width: 100%; max-width: none; margin: 0; }
  .bio-hero__portrait img { aspect-ratio: 16 / 9; object-position: 50% 20%; }
  .bio-hero__intro { width: 100%; }
}

/* Key facts */
.bio-facts { margin: 0 0 38px; padding: 0; border-top: 1px solid var(--hairline); }
.bio-facts div {
  display: flex; flex-wrap: wrap; gap: 3px 18px;
  padding: 11px 0; border-bottom: 1px solid var(--hairline);
}
.bio-facts dt {
  flex: none; width: 132px; padding-top: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted-2);
}
.bio-facts dd {
  flex: 1 1 220px; margin: 0;
  font-size: 15.5px; line-height: 1.55; font-weight: 500; color: var(--ink);
}

/* Full-width photo band inside the bio */
.bio-figure { margin: 28px 0 30px; }
.bio-figure img {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  box-shadow: 0 16px 40px -20px rgba(0,0,0,.45);
}
.bio-figure figcaption {
  font-size: 13px; line-height: 1.5; color: var(--muted); margin: 10px 0 0;
}

/* Bio prose */
.bio-body h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: 25px; line-height: 1.2;
  margin: 34px 0 12px; color: var(--ink);
}
.bio-body h2:first-child { margin-top: 0; }
.bio-body p { font-size: 16px; line-height: 1.72; color: var(--body); margin: 0 0 16px; }
.bio-body p:last-child { margin-bottom: 0; }
.bio-body em { font-style: italic; }

/* Closing contact prompt */
.bio-cta {
  margin: 44px 0 0; padding: 22px 24px;
  background: var(--paper-2); border-radius: 12px;
}
.bio-cta p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--body); }
.bio-cta a {
  font-weight: 600; color: var(--accent-dark);
  text-decoration: underline; text-underline-offset: 2px;
}

/* Footer may carry more than one link */
.sitefoot__links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ============================================================
   Motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Front page bands (plugin-backed sections)
   --------------------------------------------------------------------------- */

.band { padding: 68px 0; border-top: 1px solid var(--hairline); }
.band .wrap { padding-left: 40px; padding-right: 40px; }

.band__head { max-width: var(--wrap-read); margin-bottom: 32px; }
.band__kicker {
  font-size: 12px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
.band__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800; font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 12px;
}
.band__lede { font-size: 17px; line-height: 1.65; color: var(--body); margin: 0; max-width: 54ch; }

/* Get help */
.band--help { background: var(--paper); }
.band--help .band__body { max-width: 760px; }

/* Signup: a full-width band so it reads as a distinct invitation */
.band--signup { background: var(--paper-2); }
.band--signup__inner { display: flex; justify-content: flex-start; }

@media (max-width: 600px) {
  .band { padding: 48px 0; }
  .band .wrap { padding-left: 20px; padding-right: 20px; }
  .band__head { margin-bottom: 24px; }
}

/* Plugin components sit inside theme bands — align their shape with the site. */
.band .lir-router__panel,
.band .lir-teaser {
  font-family: inherit;
}
.band .lir-teaser__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
.band .lir-teaser__t { color: var(--body); font-size: 16px; }
.band .lir-router__panel {
  background: var(--card, #fffdf8);
  border-color: var(--hairline);
  border-radius: 12px;
}

/* ---------------------------------------------------------------------------
   Get help section
   --------------------------------------------------------------------------- */

.helpgrid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: center;
}
.helpgrid__intro .band__lede { margin-bottom: 0; }

.routes { display: flex; flex-direction: column; gap: 12px; }

.route {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px 18px;
}
/* The coloured dot is generated content, not markup, for the same reason as
   the hero badge: the cards are editable blocks, and a span would not survive
   an edit. Only the three explainer cards get one — no content, no dot. */
.route--msp::before,
.route--mp::before,
.route--council::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 6px;
}
.route--msp::before     { background: var(--accent); }
.route--mp::before      { background: #2f5d9a; }
.route--council::before { background: #6a8a3a; }
.route__title {
  margin: 0 0 2px;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 15px; font-weight: 600;
  color: var(--ink);
}
.route__desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* The fourth box: the one that does something, so it carries the weight. */
.route--start {
  background: var(--ink);
  border-color: var(--ink);
  padding: 18px;
}
.route--start .route__startbody { width: 100%; }
.route--start .route__title { color: #fff; font-size: 16px; margin-bottom: 4px; }
.route--start .route__desc { color: #cfc6b6; margin-bottom: 12px; }

/* The router's inline row, inside the dark card. */
.route--start .lir-router__start { gap: 8px; }
.route--start .lir-router__start input[type="text"] {
  flex: 1 1 140px;
  padding: 12px 14px;
  font-size: 15px;
  border-color: transparent;
}
.route--start .lir-router__start .lir-btn { padding: 12px 20px; font-size: 15px; }
.route--start .lir-router__err { color: #ffb3c4; margin-top: 8px; }

/* Nothing expands in place: the card only ever holds the postcode box, and
   the check itself continues on the Get help page. */

.jfmsp-admin-note {
  background: #fcf6e6;
  border: 1px solid #e6d9a8;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .helpgrid { grid-template-columns: 1fr; gap: 28px; }
}

/* Wins band */
.band--wins { background: var(--paper-2); }
.band--wins .lir-win__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: var(--ink);
}