/*
Theme Name: The RAIN Alliance
Theme URI: https://wwebdesign.co.uk/
Author: W Web Design & Hosting
Author URI: https://wwebdesign.co.uk/
Description: Lean custom theme for The RAIN Alliance — code-registered ACF blocks, no page builder, no build step.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: rain
*/

/* ==========================================================================
   Design tokens — the ONLY place cross-block values live.
   Anything used by more than one block belongs here. Anything used by exactly
   one block belongs in that block's own style.css.
   ========================================================================== */

:root {
  /* Brand — read off the live site's computed styles, not guessed.
     Avada palette: color3 #000036 · custom_color_1 #00467f · color5 #00a7e8 */
  --rain-brand:        #00467f;   /* headings, primary buttons */
  --rain-brand-dark:   #000036;   /* header, the "Be in the Know" band */
  --rain-accent:       #00a7e8;   /* links, tiles, cyan CTAs */
  --rain-accent-soft:  #e1f4fd;   /* the accent at wash strength */
  --rain-table-line:   #dcdcdc;   /* the live site's table hairline */
  --rain-zebra:        #f7f9fb;   /* alternating table rows */
  --rain-mint:         #02dfb3;   /* the 100px rule under every section heading */
  --rain-pale:         #e1f4fd;   /* the light-blue bands */
  --rain-grey-bg:      #f4f4f4;   /* the news band */
  --rain-footer-bg:    #2d2d2d;

  /* Surfaces. Sections stay transparent and take a band class instead. */
  --rain-bg:           #ffffff;
  --rain-bg-alt:       #f4f4f4;
  --rain-card-bg:      #ffffff;
  --rain-border:       #dfe6ec;

  /* Text */
  --rain-text:         #000036;
  --rain-text-muted:   #5b6a76;
  --rain-text-invert:  #ffffff;

  /* Type — the live site is Montserrat throughout, 18px/26px body, and its
     headings are WEIGHT 400. Setting them bold is the single change that makes
     this site stop looking like itself. */
  --rain-font:         "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rain-font-heading: "Montserrat", -apple-system, "Segoe UI", sans-serif;
  --rain-h-weight:     400;
  --rain-h-color:      #00467f;

  /* Layout */
  --rain-content-max:  1200px;
  --rain-gutter:       24px;
  --rain-section-y:    clamp(40px, 5vw, 64px);
  --rain-radius:       0px;       /* cards and images are square-cornered */
  --rain-btn-radius:   4px;       /* buttons are not — measured on the live site */
  --rain-header-height: 132px;

  --rain-ease:         cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--rain-bg);
  color: var(--rain-text);
  font-family: var(--rain-font);
  font-size: 18px;
  line-height: 26px;      /* 18/26 — the live site's exact body metric */
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rain-font-heading);
  font-weight: var(--rain-h-weight);
  color: var(--rain-h-color);
  line-height: 1.2;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Shared layout primitives — used by chrome AND blocks.
   -------------------------------------------------------------------------- */

.rain-wrap {
  width: 100%;
  max-width: var(--rain-content-max);
  margin-inline: auto;
  padding-inline: var(--rain-gutter);
}

/* .rain-section is defined once, with the band system further down. */

.rain-section__head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.rain-section__head--center { margin-inline: auto; text-align: center; }

.rain-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rain-accent);
  margin-bottom: .75em;
}

.rain-lede { font-size: 1.1rem; color: var(--rain-text-muted); }

/* Buttons */
/* .rain-btn is defined once, further down with the band system. It used to be
   declared here too, and the duplicate is how `line-height: 1` kept applying to
   every button no matter what the later rule said. */


/* Cards — the ONLY place --rain-card-bg should appear. */
.rain-card {
  background: var(--rain-card-bg);
  border: 1px solid var(--rain-border);
  border-radius: var(--rain-radius);
  padding: clamp(20px, 2.5vw, 32px);
}

/* Screen-reader only */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* WP core alignment classes */
.alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.alignwide { max-width: calc(var(--rain-content-max) + 160px); margin-inline: auto; }
.aligncenter { margin-inline: auto; }

/* ==========================================================================
   Section bands.

   The live site is banded: every section is a full-bleed colour or texture,
   and almost nothing sits on plain white. Blocks stay transparent and take one
   of these classes, so the band is a layout decision rather than something
   baked into each block.
   ========================================================================== */

.rain-section { position: relative; padding: var(--rain-section-y) 0; }

/* Two plain white prose sections in a row are one section as far as the reader
   is concerned; stacking both paddings leaves a 128px void mid-page, which is
   what the gaps on /develop-your-skills/ and /join-the-rain-alliance/ were.
   Banded sections keep their full padding — there the gap IS the design.

   THE LIST OF BLOCKS HERE IS LOAD-BEARING. It named only .rain-wysiwyg, so the
   moment a prose section became a .rain-columns or .rain-buttons — which is
   what bin/split-blobs.php does — the rule stopped matching and 60px of
   padding reappeared between sections that had been flush. It showed up as
   thirty pages growing by 25–64px with no content change to explain it. Add
   any new prose-like block to both halves of this selector. */
:is(.rain-wysiwyg, .rain-columns, .rain-buttons):not([class*="rain-band--"]) +
:is(.rain-wysiwyg, .rain-columns, .rain-buttons):not([class*="rain-band--"]) {
  padding-top: 0;
}

body .rain-band--navy.rain-band--navy  { background: var(--rain-brand-dark); color: var(--rain-text-invert); }
body .rain-band--pale.rain-band--pale  { background: var(--rain-pale); }
body .rain-band--grey.rain-band--grey  { background: var(--rain-grey-bg); }
body .rain-band--white.rain-band--white { background: #fff; }

body .rain-band--navy :is(h1,h2,h3,h4,p) { color: var(--rain-text-invert); }
body .rain-band--navy a { color: var(--rain-accent); }

/* Textured bands — the hexagon wash and the circuit artwork. */
body .rain-band--hex.rain-band--hex {
  background-color: var(--rain-pale);
  background-repeat: repeat-x;
  background-position: center;
  background-size: cover;
}
body .rain-band--circuit.rain-band--circuit {
  background-color: #0d7fc4;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--rain-text-invert);
}
body .rain-band--circuit :is(h1,h2,h3,h4,p) { color: var(--rain-text-invert); }

/* --------------------------------------------------------------------------
   Section headings — 40px, weight 400, #00467f, centred, with a 100px mint
   rule beneath. This pairing is the site's strongest visual signature.
   -------------------------------------------------------------------------- */
.rain-section__title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: var(--rain-h-weight);
  color: var(--rain-h-color);
  text-align: center;
  margin: 0 0 14px;
}
.rain-band--navy .rain-section__title,
.rain-band--circuit .rain-section__title { color: var(--rain-text-invert); }

.rain-rule {
  width: 100px;
  height: 3px;
  border: 0;
  margin: 0 auto 36px;
  background: var(--rain-mint);
}
.rain-rule--left { margin-left: 0; }

/* Buttons follow the live site: square, uppercase, letter-spaced. */
.rain-btn,
.rain-postgrid__more,
.rain-reslist__filters button {
  border-radius: 0;
}
.rain-btn {
  display: inline-block;
  padding: 13px 29px;
  border: 1px solid transparent;
  border-radius: var(--rain-btn-radius);
  background: var(--rain-brand);
  color: var(--rain-text-invert);
  font-family: var(--rain-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;          /* not 1 — at 1 the caps sit hard against the padding */
  letter-spacing: .015em;
  text-transform: none;       /* labels carry their own case, as on the source */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  transition: background .2s var(--rain-ease);
}
.rain-btn--ghost {
  background: transparent;
  border: 2px solid currentColor;
}
.rain-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.rain-btn:hover, .rain-btn:focus-visible { background: var(--rain-brand-dark); }
.rain-btn--outline {
  background: transparent;
  border: 1px solid currentColor;   /* 1px, as on the source */
  color: var(--rain-text-invert);
}
.rain-btn--outline:hover, .rain-btn--outline:focus-visible {
  background: var(--rain-text-invert);
  color: var(--rain-brand);
}

/* Band textures. These are theme chrome — fixed artwork that is part of the
   site's identity and never edited by the client — so they live in the theme
   rather than the media library, and can be referenced from CSS. */
body .rain-band--hex.rain-band--hex {
  background-image: url("assets/img/band-hex.png");
}
body .rain-band--circuit.rain-band--circuit {
  background-image: url("assets/img/band-circuit.png");
}

/* ==========================================================================
   Interior page chrome and converted body content.

   Everything below either renders the chrome Avada drew around every page, or
   styles the classes migrate/lib/fusion.php emits when it converts a Fusion
   page. Both halves have to exist or the migrated pages come out as unstyled
   text — which is exactly what the 28 Aug audit found.
   ========================================================================== */

/* The page-title band: 300px, brand blue behind a per-page photograph, with a
   centred 54px/80px white title. Read off the live site, not invented. */
.rain-page-title {
  background-color: var(--rain-brand);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  min-height: 300px;
  display: flex;
  align-items: center;
  text-align: center;
}
.rain-page-title__h {
  font-family: var(--rain-font);
  font-weight: var(--rain-h-weight);
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.2;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.rain-crumbs {
  margin-top: 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
}
.rain-crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.rain-crumbs a:hover, .rain-crumbs a:focus-visible { text-decoration: underline; }
.rain-crumbs__sep { opacity: .6; padding-inline: 4px; }

@media (max-width: 782px) {
  .rain-page-title { min-height: 190px; }
}

/* "Stay Updated" — the sitewide band above the footer. */
.rain-stay {
  background-color: var(--rain-brand);
  background-image: url("assets/img/band-stay.png");
  background-size: cover;
  background-position: center;
  padding: 46px 0;
  text-align: center;
}
.rain-stay__h {
  font-family: var(--rain-font);
  font-weight: var(--rain-h-weight);
  font-size: clamp(28px, 3.2vw, 40px);
  color: #fff;
  margin: 0 0 14px;
}
.rain-stay .rain-rule { margin-bottom: 26px; }
.rain-stay__p {
  color: #fff;
  max-width: 760px;
  margin: 0 auto 22px;
}
.rain-stay__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Converted Fusion content.
   -------------------------------------------------------------------------- */

/* Fusion rows come back as a 12-unit grid; --span is written by the converter. */
.rain-cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  align-items: start;
  margin-block: 1.4em;
}
.rain-col { grid-column: span var(--span, 12); min-width: 0; }
.rain-col > :first-child { margin-top: 0; }
@media (max-width: 900px) {
  .rain-cols { grid-template-columns: 1fr; gap: 24px; }
  .rain-col { grid-column: 1 / -1; }
}

/* Accordions. The question is an attribute in the source; without this rule it
   was being dropped and the answers ran together as one wall of text. */
.rain-toggle {
  border-bottom: 1px solid #dfe4ea;
  padding: 0;
}
.rain-toggle > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  position: relative;
  font-family: var(--rain-font);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--rain-h-color);
}
.rain-toggle > summary::-webkit-details-marker { display: none; }
.rain-toggle > summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rain-accent);
}
.rain-toggle[open] > summary::after { content: "\2013"; }
.rain-toggle > summary:focus-visible { outline: 2px solid var(--rain-accent); outline-offset: 2px; }
.rain-toggle__body { padding: 0 0 18px; }
.rain-toggle__body > :first-child { margin-top: 0; }

.rain-quote {
  border-left: 3px solid var(--rain-mint);
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  font-size: 1.05rem;
}
.rain-quote cite {
  display: block;
  margin-top: .7em;
  font-size: .85rem;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rain-brand);
}

/* The converter's [fusion_separator]. Deliberately NOT .rain-rule — that class
   is the 100px mint rule under every section heading, and an `hr.rain-rule`
   selector silently outranked it and wiped the mint off the whole site. */
hr.rain-hr {
  border: 0;
  border-top: 1px solid #e3e7ec;
  margin: 2.2em 0;
}

/* A run of converted buttons should sit on one line, not stack as paragraphs. */
.rain-btn-wrap { display: inline-block; max-width: 100%; margin: 0 12px 1.15em 0; }
/* The source carries the button's alignment as an attribute; an inline-block
   in a left-aligned column ignores it, which left centred CTAs hard left. */
.rain-btn-wrap.is-center, .rain-btn-wrap.is-right { display: block; margin-right: 0; }
.rain-btn-wrap.is-center { text-align: center; }
.rain-btn-wrap.is-right  { text-align: right; }
.rain-col > .rain-btn-wrap { margin-right: 0; }
.rain-col > .rain-btn-wrap .rain-btn { width: 100%; }

.rain-video { margin-block: 1.6em; }
.rain-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

/* Backstop for inc/embeds.php stage 3. A rejected iframe is collapsed to a bare
   tag by kses and then removed by an exact string match; if a shape ever slips
   past that, this makes the worst case an invisible attribute-free frame rather
   than a blank grey box. It can never hit a real embed — those always carry src. */
.rain-wysiwyg__inner iframe:not([src]) { display: none; }

/* Every embed inc/embeds.php passes carries .rain-embed, wrapped in a figure or
   not. A bare iframe at the provider's width="560" would otherwise overflow a
   390px viewport, and that used to be the only reason the <figure> mattered. */
.rain-embed { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.rain-embed--audio { aspect-ratio: auto; height: 166px; }

/* The skip link has to become visible when it takes focus, or it is decoration. */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 10px 16px;
  background: var(--rain-brand-dark);
  color: #fff;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Body copy inside migrated pages.

   Measured on therainalliance.org: the content column is 1200px and centred,
   body is Montserrat 18/26 in #000036, and in-content headings are cyan
   (#00a7e8) at 30px weight 400 — NOT the navy used for section titles. Getting
   this wrong is what made the migrated pages read as a generic document.
   -------------------------------------------------------------------------- */

/* A bare URL or email address as link text has no break opportunity, so it
   pushed eight pages sideways on a phone — up to 322px on the DPP statement.
   break-word only breaks a word that would otherwise overflow. */
.rain-wysiwyg__inner,
.rain-prose { overflow-wrap: break-word; }

/* The source hand-wrote flex rows with inline styles and no wrap, so three
   buttons in a row ran off the side of a phone. Content authored for a 1200px
   column has to be allowed to reflow. */
.rain-wysiwyg__inner [style*="display: flex"],
.rain-wysiwyg__inner [style*="display:flex"],
.rain-prose [style*="display: flex"],
.rain-prose [style*="display:flex"] { flex-wrap: wrap; }

/* h5 and h6 were left out of this rule, so the twelve of them on the site fell
   through to the global heading colour (navy, not cyan) at the browser's own
   default sizes — 0.83em and 0.67em, i.e. SMALLER than the body copy they
   introduced. The converter now renumbers headings per page so a page rarely
   reaches h5, but a rule that silently unstyles two of six levels is the kind
   of thing that comes back, so all five are named. */
.rain-wysiwyg__inner :is(h2, h3, h4, h5, h6) {
  color: var(--rain-accent);
  font-weight: var(--rain-h-weight);
  text-align: left;
  margin: 1.4em 0 .5em;
}
.rain-wysiwyg__inner h2 { font-size: 30px; }
.rain-wysiwyg__inner h3 { font-size: 24px; }
.rain-wysiwyg__inner h4 { font-size: 20px; }
.rain-wysiwyg__inner :is(h5, h6) { font-size: 18px; }
.rain-wysiwyg__inner > :first-child { margin-top: 0; }

/* A dark band flips the in-content heading and link colours with it. */
.rain-band--navy .rain-wysiwyg__inner :is(h2, h3, h4, h5, h6),
.rain-band--circuit .rain-wysiwyg__inner :is(h2, h3, h4, h5, h6) { color: #fff; }

/* Buttons inside prose must not inherit the link colour — a cyan label on a
   navy button is invisible, and that is exactly what happened. */
.rain-wysiwyg__inner a.rain-btn,
.rain-band--navy .rain-wysiwyg__inner a.rain-btn,
.rain-prose a.rain-btn { color: var(--rain-text-invert); text-decoration: none; }
.rain-wysiwyg__inner a.rain-btn--outline { color: currentColor; }

.rain-wysiwyg__inner figure { margin: 1.8em auto; text-align: center; }
.rain-wysiwyg__inner figure img { margin-inline: auto; }

/* "Stay Updated" reproduces the source: transparent buttons with a hairline
   white border, on the pattern band. */
.rain-stay .rain-btn {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.rain-stay .rain-btn:hover,
.rain-stay .rain-btn:focus-visible { background: #fff; color: var(--rain-brand); }

/* --------------------------------------------------------------------------
   CONVERTED CONTENT — classes the Fusion converter emits
   --------------------------------------------------------------------------

   Three shortcodes used to render nothing at all, because the content they
   pointed at was never in the page: [cool-timeline] reads a cool_timeline CPT,
   [wpdatatable] reads a spreadsheet in uploads, and one [display-frm-data]
   reads a Formidable View. migrate/lib/fusion.php now resolves all three at
   extract time and emits the markup below.
   -------------------------------------------------------------------------- */

/* The 10th-anniversary history. The source drew this as circles on a rail; the
   rebuild keeps the rail and squares the corners, like everything else here. */
.rain-timeline {
  list-style: none;
  margin: 1.8em 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--rain-mint);
}
.rain-timeline__item {
  position: relative;
  padding-bottom: 32px;
}
.rain-timeline__item::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 8px;
  width: 13px;
  height: 13px;
  background: var(--rain-brand);
}
.rain-timeline__year {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rain-brand);
}
.rain-timeline__title {
  margin: 0 0 .4em;
  font-size: 22px;
  font-weight: var(--rain-h-weight);
  color: var(--rain-accent);
}
.rain-timeline__body > :first-child { margin-top: 0; }
.rain-timeline__body > :last-child  { margin-bottom: 0; }
/* The source's entries carry inline text-align:center from the plugin's own
   editor, which reads as ragged indentation once they are in a left rail. */
.rain-timeline__body p[style] { text-align: left !important; }

.rain-band--navy .rain-timeline,
.rain-band--circuit .rain-timeline { border-left-color: var(--rain-accent); }
.rain-band--navy .rain-timeline__year,
.rain-band--navy .rain-timeline__title,
.rain-band--circuit .rain-timeline__year,
.rain-band--circuit .rain-timeline__title { color: #fff; }

/* wpDataTables. 45 rows x 7 columns of Tag IC data — it has to be able to
   scroll sideways on its own rather than pushing the page wide. */
/* Header blue and hairline grey are the live site's own table values, read off
   therainalliance.org rather than picked. */
.rain-table-wrap {
  margin: 1.8em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rain-table-line);
  border-radius: var(--rain-btn-radius);
}
.rain-table-wrap:focus-visible { outline: 2px solid var(--rain-accent); outline-offset: 2px; }
.rain-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
  background: #fff;
}
.rain-table th,
.rain-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--rain-table-line);
  word-break: normal;
  overflow-wrap: anywhere;
}
/* The wrapper draws the outer frame, so the cells must not double it. */
.rain-table tr > :first-child { border-left: 0; }
.rain-table tr > :last-child { border-right: 0; }
.rain-table tr:first-child > * { border-top: 0; }
.rain-table tr:last-child > * { border-bottom: 0; }

.rain-table thead th {
  background: var(--rain-brand);
  color: var(--rain-text-invert);
  font-weight: 600;
  white-space: nowrap;
  border-color: var(--rain-brand);
}
/* Sticky only pins against a scrolling ancestor. The wrapper scrolls
   vertically ONLY when it is tall, so this is where the header can actually
   stay put — elsewhere it would be a no-op that looks like a promise. */
.rain-table-wrap--tall {
  max-height: 70vh;
  overflow: auto;
}
.rain-table-wrap--tall .rain-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
/* A second header row — the pricing table opens with a spanning caption, and
   writes it as a separate <thead>, so both forms need covering. */
.rain-table thead tr + tr th,
.rain-table thead + thead th {
  background: var(--rain-pale);
  color: var(--rain-brand);
  border-color: var(--rain-table-line);
  position: static;
}
.rain-table tbody tr:nth-child(even) { background: var(--rain-zebra); }
.rain-table tbody tr:hover { background: var(--rain-accent-soft); }
.rain-table tbody th { background: var(--rain-zebra); font-weight: 600; }
.rain-table img { max-width: 20px; height: auto; }
/* Support ticks and the detail that used to be locked in a dead tooltip. */
.rain-table__mark-wrap { display: inline-flex; vertical-align: middle; }
.rain-table__mark { display: inline-block; }
.rain-table__note {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--rain-text-muted);
}
.rain-table a { color: var(--rain-accent); }

/* Numbers read better right-aligned and lined up. Fees, durations, counts. */
.rain-table td:not([data-label]) { hyphens: none; }
.rain-table .rain-num,
.rain-table td[data-label*="Fee" i],
.rain-table td[data-label*="Price" i],
.rain-table td[data-label*="Revenue" i] { font-variant-numeric: tabular-nums; }

/*
 * Below 760px a seven-column table cannot be read by scrolling sideways, so it
 * stacks: one block per row, each cell showing its column name beside the
 * value. data-label is written onto the cells by rain_enhance_tables().
 */
@media (max-width: 760px) {
  .rain-table-wrap:has(.rain-table--stack) { overflow-x: visible; border: 0; border-radius: 0; }
  .rain-table--stack,
  .rain-table--stack tbody,
  .rain-table--stack tr,
  .rain-table--stack td { display: block; width: auto; }
  .rain-table--stack thead { display: none; }
  .rain-table--stack tbody tr {
    border: 1px solid var(--rain-table-line);
    border-radius: var(--rain-btn-radius);
    margin-bottom: 14px;
    background: #fff;
    overflow: hidden;
  }
  .rain-table--stack tbody tr:nth-child(even) { background: #fff; }
  .rain-table--stack tbody tr:hover { background: #fff; }
  .rain-table--stack td {
    border: 0;
    border-bottom: 1px solid var(--rain-table-line);
    padding: 10px 14px;
  }
  .rain-table--stack tr > :last-child { border-bottom: 0; }
  .rain-table--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rain-brand);
    margin-bottom: 3px;
  }
  /* An empty action cell would otherwise render as a stray bordered strip. */
  .rain-table--stack td:empty { display: none; }
}

/* The per-page member list on EU Road Charging. */
.rain-member-list {
  list-style: none;
  margin: 1.2em 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 24px;
}
.rain-member-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--rain-border);
}

/* A converted [fusion_modal]. Same disclosure widget as an accordion toggle,
   but its summary is a modal title rather than a question, so it reads better
   with the brand colour on it. */
.rain-modal > summary { color: var(--rain-brand); }
.rain-band--navy .rain-modal > summary,
.rain-band--circuit .rain-modal > summary { color: #fff; }
.rain-modal .rain-toggle__body { padding-bottom: 24px; }

/* --------------------------------------------------------------------------
   Pagination.

   Shared by the news feed, the event lists and the member directory, so it
   lives here rather than in one block's stylesheet — a block stylesheet is
   only enqueued on pages that use that block, and the member directory would
   have rendered an unstyled pager.

   The member directory's pager is built in JavaScript and uses <button>, not
   <a>: there is no URL to link to because the paging happens in the browser.
   Both get the same treatment.
   -------------------------------------------------------------------------- */

.rain-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 32px;
}
.rain-pager .page-numbers {
  display: inline-block;
  min-width: 40px;
  padding: 9px 12px;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--rain-border);
  border-radius: var(--rain-btn-radius);
  background: transparent;
  color: var(--rain-brand);
  font: inherit;
  font-size: .92rem;
  line-height: 1.2;
  cursor: pointer;
}
.rain-pager .page-numbers.current {
  background: var(--rain-brand);
  border-color: var(--rain-brand);
  color: #fff;
  cursor: default;
}
.rain-pager .page-numbers.dots { border-color: transparent; cursor: default; }
.rain-pager .page-numbers.is-disabled { opacity: .4; cursor: default; }
.rain-pager .page-numbers:hover:not(.current):not(.dots):not(.is-disabled) {
  border-color: var(--rain-brand);
}
.rain-pager .page-numbers:focus-visible { outline: 2px solid var(--rain-accent); outline-offset: 2px; }

/* The market report price matrix. A row-header table rather than a grid of
   columns, so the labels cannot drift away from the prices they belong to. */
.rain-pricing th[scope="row"] {
  background: transparent;
  font-weight: 500;
  color: var(--rain-text);
  width: 42%;
}
.rain-pricing td { text-align: center; font-variant-numeric: tabular-nums; }
.rain-pricing thead th { text-align: center; }
.rain-pricing thead td,
.rain-pricing__corner { background: #fff; border-color: transparent; }
.rain-pricing__note {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  opacity: .85;
}
@media (max-width: 760px) {
  .rain-pricing th[scope="row"] { width: auto; }
  .rain-pricing td { text-align: left; }
}

/* A migrated call-to-action whose destination could not be recovered. It keeps
   the words — they are the client's copy — but does not pretend to be a
   control that works. */
.rain-btn-dead {
  margin: 0 0 1.15em;
  color: var(--rain-text-muted);
}

/* --------------------------------------------------------------------------
   Membership tiers.

   Live sets these as two quarter-width columns of grey boxes, and repeats the
   "User Member Fee" box in both — the second copy carries Avada's `v-none`
   (visibility: hidden) and exists only to push "Community 2" level with
   "Community 1". Here they are three cards in one column beside the fee
   table, so no spacer is needed and nothing is said twice. The converter's
   fix_membership_tiers() builds the markup.

   They are <details>, closed by default, at Sarah's request (5 Sep 2026):
   three open cards of eligibility criteria pushed the governance documents
   below two screens, and a visitor only ever needs the one tier that
   describes them.
   -------------------------------------------------------------------------- */

.rain-tiers { display: grid; gap: 18px; }
.rain-tier {
  background: var(--rain-grey-bg);
  border-left: 4px solid var(--rain-accent);
}
.rain-tier__body { padding: 0 26px 22px; }
.rain-tier__body > :first-child { margin-top: 0; }
.rain-tier__body > :last-child  { margin-bottom: 0; }
.rain-tier p, .rain-tier li { font-size: 16px; line-height: 24px; }
.rain-tier ul { padding-left: 1.2em; margin-bottom: 0; }
.rain-tier li { margin-bottom: .35em; }

/* The disclosure control.

   `list-style: none` plus the ::-webkit-details-marker rule are BOTH needed:
   Safari ignores the first and keeps drawing its own triangle, which then sits
   beside ours. The chevron is a rotated border, not an entity or an SVG, so it
   inherits currentColor and animates. */
.rain-tier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0;
  padding: 20px 46px 20px 26px;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-family: var(--rain-font-heading);
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 600;
  color: var(--rain-h-color);
}
.rain-tier__head::-webkit-details-marker { display: none; }
.rain-tier__head:hover,
.rain-tier[open] > .rain-tier__head { background: rgba(0, 70, 127, .05); }
.rain-tier__head:focus-visible {
  outline: 2px solid var(--rain-brand);
  outline-offset: -2px;
}
.rain-tier__head::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 28px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--rain-brand);
  border-bottom: 2px solid var(--rain-brand);
  transform: translateY(-4px) rotate(45deg);
  transition: transform .18s ease;
}
.rain-tier[open] > .rain-tier__head::after { transform: translateY(0) rotate(-135deg); }

@media (prefers-reduced-motion: reduce) {
  .rain-tier__head::after { transition: none; }
}
.rain-tier__price {
  background: var(--rain-brand);      /* #fff on #00467f — 8.59:1 */
  color: var(--rain-text-invert);
  border-radius: var(--rain-btn-radius);
  padding: 3px 11px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.rain-tier__note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rain-border);
  font-size: 16px;
  line-height: 24px;
  color: var(--rain-text-muted);
}
.rain-tier__note strong { color: var(--rain-text); }

/* --------------------------------------------------------------------------
   Governance downloads.

   Six documents, not six calls to action. The source gave each its own 2-of-12
   column — 170px at this measure, narrow enough that "Membership Agreement"
   broke mid-word and the row came out at four different heights.
   -------------------------------------------------------------------------- */

.rain-doclist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 1.4em 0;
  padding: 0;
}
.rain-doclist li { margin: 0; }
.rain-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  background: var(--rain-card-bg);
  border: 1px solid var(--rain-border);
  color: var(--rain-brand);
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  transition: background .2s var(--rain-ease), border-color .2s var(--rain-ease),
              color .2s var(--rain-ease);
}
.rain-doc:hover, .rain-doc:focus-visible {
  background: var(--rain-brand);      /* #fff on #00467f — 8.59:1 */
  border-color: transparent;
  color: var(--rain-text-invert);
}
.rain-doc__kind {
  flex: none;
  background: var(--rain-accent-soft);
  color: var(--rain-brand);           /* #00467f on #e1f4fd — 7.53:1 */
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.rain-doc:hover .rain-doc__kind,
.rain-doc:focus-visible .rain-doc__kind {
  background: rgba(255, 255, 255, .16);
  color: var(--rain-text-invert);
}

/* --------------------------------------------------------------------------
   The workgroup "who runs this" aside.

   Co-Chairs / Participants / Meeting cadence / Level of dedication /
   Responsible for — the same set of fields on seven community pages, in a
   narrow column beside the prose. On live it is an unmarked column, so once
   the prose runs longer than it does the two just stop at different heights
   and nothing says where the reference material begins. It is an aside, so
   it gets the surface of one. Written by fix_role_panels().
   -------------------------------------------------------------------------- */

.rain-sidecard {
  background: var(--rain-grey-bg);
  border-top: 3px solid var(--rain-accent);
  padding: 24px 26px;
}

/* The converter now rebuilds all seven workgroup side cards on one shape:
   a label, then either a list of people or a paragraph. Before that, each card
   carried whatever markup its author happened to paste, and wpautop rendered
   the difference — Tyres put a paragraph gap between every name, How-To put
   none, so the same card read as differently spaced on each page. The rhythm
   lives here now, not in the content. */
.rain-sidecard > :first-child { margin-top: 0; }
.rain-sidecard > :last-child  { margin-bottom: 0; }
.rain-sidecard__label {
  font-weight: 700;
  color: var(--rain-h-color);
  margin: 1.4em 0 .35em;
}
.rain-sidecard__people {
  list-style: none;
  margin: 0 0 .35em;
  padding: 0;
}
/* A hanging indent is the whole point. In a 310px column "Lars Thuring,
   Logopak Systeme GmbH & Co. KG" wraps, and flush left the second line looked
   exactly like the start of the next person. Indented, it reads as one entry. */
.rain-sidecard__people li {
  margin: 0 0 .3em;
  padding-left: 1em;
  text-indent: -1em;
}
.rain-sidecard > :first-child { margin-top: 0; }
.rain-sidecard > :last-child  { margin-bottom: 0; }
.rain-sidecard p, .rain-sidecard li { font-size: 16px; line-height: 24px; }
.rain-sidecard p { margin: 0 0 1em; }
.rain-sidecard strong { color: var(--rain-text); }
.rain-sidecard ul { padding-left: 1.2em; margin: 0 0 1em; }
.rain-sidecard li { margin-bottom: .35em; }

/* A banded section split in three, so its list sits between its heading and
   its "View More" button the way live draws it. The three parts are one band,
   so only the outer edges keep the band's vertical padding — otherwise the
   heading, the cards and the button each get their own and the band grows to
   three times its height. Written by the converter's block loop. */
/* `display: flow-root` is load-bearing, not tidiness. Zeroing the padding on
   the joining edge is exactly what lets the last child's BOTTOM MARGIN collapse
   out through the section — and the margin is transparent, so it draws the page
   background as a stripe straight across a band that is supposed to be
   continuous. `hr.rain-rule` carries `margin: 0 auto 36px`, so every banded
   section that opened with a heading and its mint rule had a 36px white line
   under it: nine pages, including /sustainability-community/, /retail/ and
   /news/. flow-root gives each half its own block formatting context, which
   contains the margin without changing anything else about the box.
   Remove it and the stripe comes back. */
.rain-band--cont { padding-top: 0; display: flow-root; }
.rain-section:has(+ .rain-band--cont) { padding-bottom: 0; display: flow-root; }

/* --------------------------------------------------------------------------
   Sidebar furniture on the training pages.

   The source styles these with its own class names, which survived the
   migration with no rule behind them: `.black-border` and `.blue-bg` were
   plain unmarked runs of text, and `.star-rating-custom` was five FontAwesome
   <i> tags rendering as a tall empty gap, because Avada loaded FontAwesome and
   this theme does not. The converter turns the stars into inline SVG; these
   give the two boxes their surfaces.
   -------------------------------------------------------------------------- */

.black-border, .blue-bg { padding: 18px 20px; margin-bottom: 20px; }
.black-border { border: 1px solid var(--rain-text); }
.blue-bg      { background: var(--rain-accent-soft); }
.black-border > :first-child, .blue-bg > :first-child { margin-top: 0; }
.black-border > :last-child,  .blue-bg > :last-child  { margin-bottom: 0; }
.black-border p, .blue-bg p { font-size: 16px; line-height: 24px; }

.rain-stars {
  display: flex;
  gap: 4px;
  margin: 8px 0 0;
  color: var(--rain-accent);      /* #00a7e8 as a filled shape, not as text */
}

/* A narrow column is a sidebar, and a stack of buttons in one reads as a list
   of actions — so they share an edge and a width instead of each shrinking to
   its own label. Without this the Tyres and Encoding Masterclass sidebars came
   out as a ragged staircase of four different button widths. */
.rain-col[style*="--span:3"] .rain-btn,
.rain-col[style*="--span:4"] .rain-btn,
.rain-btn--wide {
  display: block;
  width: 100%;
  text-align: center;
}
.rain-col[style*="--span:3"] .rain-btn-wrap,
.rain-col[style*="--span:4"] .rain-btn-wrap { display: block; margin: 0 0 12px; }

/* --------------------------------------------------------------------------
   Text wrap around aligned images.

   These lived in assets/posts.css, which is enqueued only on the blog, the
   archives and single posts. `alignright` therefore did nothing on a PAGE —
   the market report's cover images dropped to full width and the copy went
   underneath them instead of beside them. They are WordPress core content
   classes; they belong wherever content renders.
   -------------------------------------------------------------------------- */

.rain-prose .alignleft,
.rain-wysiwyg__inner .alignleft {
  float: left;
  margin: .4em 1.8em 1.2em 0;
}
.rain-prose .alignright,
.rain-wysiwyg__inner .alignright {
  float: right;
  margin: .4em 0 1.2em 1.8em;
}
.rain-prose .aligncenter,
.rain-wysiwyg__inner .aligncenter {
  display: block;
  margin-inline: auto;
}
.rain-prose .alignleft,
.rain-prose .alignright,
.rain-wysiwyg__inner .alignleft,
.rain-wysiwyg__inner .alignright { max-width: 50%; }
.rain-prose figure.alignleft img,
.rain-prose figure.alignright img,
.rain-wysiwyg__inner figure.alignleft img,
.rain-wysiwyg__inner figure.alignright img { margin-block: 0; }

/* Headings and the end of the section must clear a float, or a short paragraph
   beside a tall image drags the next section up alongside it. */
.rain-prose :is(h2, h3, h4, h5, h6),
.rain-wysiwyg__inner :is(h2, h3, h4, h5, h6) { clear: both; }
.rain-prose::after,
.rain-wysiwyg__inner::after { content: ""; display: block; clear: both; }

/* A floated image at phone width leaves a two-word-wide column of text. */
@media (max-width: 700px) {
  .rain-prose .alignleft,
  .rain-prose .alignright,
  .rain-wysiwyg__inner .alignleft,
  .rain-wysiwyg__inner .alignright {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   Protected page — the password form
   -------------------------------------------------------------------------- */

/* Sits on the pale band so the panel has something to sit ON. Core's form is
   four bare paragraphs, which on a banded design reads as an error page. */
.rain-pw { background: var(--rain-pale); }

.rain-pw__panel {
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 44px);
  background: var(--rain-card-bg);
  border-top: 3px solid var(--rain-accent);
  text-align: center;
}

.rain-pw__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rain-text-muted);
}
.rain-pw__lock { flex: none; color: var(--rain-accent); }

.rain-pw__h { margin: 0 0 14px; font-size: clamp(1.5rem, 3vw, 2rem); }

/* .rain-rule is the 100px mint rule under every section heading, and it is
   left-aligned by default — centred here because the panel is. */
.rain-pw .rain-rule { margin-inline: auto; }

.rain-pw__p {
  margin: 18px auto 0;
  max-width: 42ch;
  color: var(--rain-text-muted);
}

.rain-pw__error {
  margin: 18px 0 0;
  padding: 10px 14px;
  font-size: .95rem;
  color: #8a1c1c;
  background: #fdf0f0;
  border-left: 3px solid #c62828;
  text-align: left;
}

.rain-pw__form { margin: 24px 0 0; }

/* Visible, not screen-reader-only: the field is the one thing on the page to
   do, and an unlabelled password box next to a button is a login form nobody
   asked for. */
.rain-pw__label {
  display: block;
  margin-bottom: 6px;
  font-size: .88rem;
  font-weight: 600;
  text-align: left;
}

/* The button sits beside the field on a real measure and drops under it when
   there is not room — core's size="20" input was the actual problem. */
.rain-pw__row { display: flex; flex-wrap: wrap; gap: 10px; }

.rain-pw__input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: .95rem;
  color: var(--rain-text);
  background: var(--rain-bg);
  border: 1px solid var(--rain-border);
  border-radius: var(--rain-radius);
  transition: border-color .2s var(--rain-ease), box-shadow .2s var(--rain-ease);
}
.rain-pw__input:focus {
  outline: none;
  border-color: var(--rain-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rain-accent) 22%, transparent);
}
.rain-pw__form .rain-btn { flex: 0 0 auto; }

/* Once the button wraps under the field it should not sit there at 158px next
   to a 286px input, which reads as a mistake rather than a stack.
   THE FLEX RESET ON THE INPUT IS NOT OPTIONAL. Its `flex: 1 1 200px` above is a
   basis along the MAIN axis, so the moment this rule turns the row into a
   column that 200px stops being a width and becomes a HEIGHT — a password box
   200px tall, which is what it did. */
@media (max-width: 480px) {
  .rain-pw__row { flex-direction: column; }
  /* 16px, not .95rem: iOS zooms the whole page in on any input under 16px when
     it takes focus, and this one is autofocused — so the page jumped on load. */
  .rain-pw__input { flex: 0 0 auto; width: 100%; font-size: 16px; }
  .rain-pw__form .rain-btn { width: 100%; text-align: center; }
}

.rain-pw__help {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rain-border);
  font-size: .9rem;
  color: var(--rain-text-muted);
}

/* The panel is the whole page here, so the "Stay Updated" band directly under
   it makes the page look like it continues. It does not. */
.rain-pw + .rain-stay { margin-top: 0; }