/*
Theme Name: RAIN Alliance Documents
Theme URI: https://wwebdesign.co.uk/
Author: W Web Design & Hosting
Author URI: https://wwebdesign.co.uk/
Description: The document register for docs.therainalliance.org — permanent URLs, version history, no page builder, no build step.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: raindocs
*/

/* ==========================================================================
   Tokens.

   Taken from the main site's theme so the two read as one organisation:
   Montserrat, headings at weight 400 in #00467f, square corners everywhere but
   buttons, the mint rule under section headings. The only deliberate departure
   is density — this is a reference document, not a marketing page, so the
   measure is tighter and the vertical rhythm is smaller.

   MINT IS NEVER TEXT ON WHITE. #02dfb3 on white measures 1.72:1, well under the
   4.5:1 WCAG 2.2 AA needs. It is used here only as a rule and as a fill.
   ========================================================================== */

:root {
  --docs-brand:      #00467f;   /* headings, links */
  --docs-brand-dark: #000036;   /* header band, body text */
  --docs-accent:     #00a7e8;
  --docs-mint:       #02dfb3;   /* the 100px rule — decoration only */
  --docs-pale:       #e1f4fd;
  --docs-grey-bg:    #f4f4f4;
  --docs-footer:     #2d2d2d;   /* the main site's footer, not the navy header */
  --docs-line:       #dcdcdc;
  --docs-line-soft:  #ebeef1;

  --docs-text:       #000036;
  --docs-muted:      #5b6a76;
  --docs-invert:     #ffffff;

  --docs-ok-bg:      #e4f6ef;   /* Active   — 0b6b4f on this is 6.9:1 */
  --docs-ok-ink:     #0b6b4f;
  --docs-warn-bg:    #fdf1de;   /* Draft    — 96530a on this is 6.1:1 */
  --docs-warn-ink:   #96530a;
  --docs-old-bg:     #eceff1;   /* Superseded */
  --docs-old-ink:    #4a5560;

  --docs-font:       "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --docs-max:        1000px;
  --docs-measure:    68ch;
  --docs-gutter:     24px;
  --docs-radius:     0;
  --docs-btn-radius: 4px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--docs-text);
  font-family: var(--docs-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--docs-brand); }
a:hover { color: var(--docs-accent); }

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

h1, h2, h3, h4 {
  font-family: var(--docs-font);
  font-weight: 400;          /* the main site's headings are light — bold is the single change that stops it looking like RAIN */
  color: var(--docs-brand);
  line-height: 1.25;
  margin: 0;
}

.docs-wrap {
  max-width: var(--docs-max);
  margin-inline: auto;
  padding-inline: var(--docs-gutter);
}

.docs-skip {
  position: absolute; left: -9999px;
  background: var(--docs-brand-dark); color: #fff; padding: 12px 18px; z-index: 100;
}
.docs-skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------- shell + sidebar

   The subsite navigates on its own, which is what the client asked for on the
   call: "we probably want some ability to navigate this subsite… without going
   back to the main site."

   Grid rather than float, and the sidebar is the SECOND child in source order
   on narrow screens via order — a column of section links above the page title
   pushes the content off a phone screen, and the register is the thing people
   came for.
   ========================================================================== */

.docs-shell {
  max-width: var(--docs-max);
  margin-inline: auto;
  padding-inline: var(--docs-gutter);
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* Inside the shell the wrap has already had its gutter applied by .docs-shell,
   so it must not add a second one or the content sits in a narrower column than
   the page title. */
.docs-shell .docs-wrap { padding-inline: 0; max-width: none; margin-inline: 0; }

.docs-side {
  padding-block: 44px 0;
  position: sticky;
  top: 24px;
}

.docs-side__list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* The anchors are styled through the list, not a class on each one: a menu
   built in Appearance → Menus comes out of wp_nav_menu without our class, and
   two divergent link styles is how a menu ends up looking broken only for the
   client who made one. */
.docs-side__list a {
  display: block;
  padding: 6px 12px;
  font-size: 14.5px;
  text-decoration: none;
  color: var(--docs-text);
  border-left: 2px solid var(--docs-line-soft);
}
.docs-side__list a:hover, .docs-side__list a:focus-visible { border-left-color: var(--docs-mint); background: var(--docs-grey-bg); }
.docs-side__list a[aria-current="page"],
.docs-side__list .current-menu-item > a { border-left-color: var(--docs-brand); font-weight: 600; color: var(--docs-brand); }

.docs-side__heading {
  margin: 0 0 8px 12px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--docs-muted);
}

@media (max-width: 860px) {
  .docs-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-side {
    position: static;
    order: 2;
    padding-block: 28px 8px;
    border-top: 1px solid var(--docs-line);
  }
  .docs-main { order: 1; }
}

/* --------------------------------------------------- the stability promise

   Written on the page in plain words rather than left implicit. GS1 does the
   same on its own archive page, and the person choosing which link to paste
   into an email is exactly the person who needs to read it.
   ========================================================================== */

.docs-promise {
  border-left: 3px solid var(--docs-mint);
  background: var(--docs-grey-bg);
  padding: 18px 22px;
  margin-block: 26px;
  max-width: var(--docs-measure);
}
.docs-promise p { margin: 0 0 10px; font-size: 15px; color: var(--docs-muted); }
.docs-promise p:last-child { margin-bottom: 0; }
.docs-promise--tight { margin-block: 20px 0; padding: 14px 18px; }
.docs-promise__links { display: flex; gap: 10px; flex-wrap: wrap; }

.docs-history__permalinks { margin: 10px 0 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.docs-history__permaLabel { font-size: 12px; color: var(--docs-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ------------------------------------------------------- the register list */

.docs-register { list-style: none; margin: 30px 0 0; padding: 0; }

.docs-register__item {
  padding-block: 24px;
  border-top: 1px solid var(--docs-line);
}
.docs-register__item:last-child { border-bottom: 1px solid var(--docs-line); }

.docs-register__head { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.docs-register__title { font-size: 21px; margin: 0; }
.docs-register__title a { text-decoration: none; }
.docs-register__title a:hover { text-decoration: underline; }

.docs-register__summary { margin: 8px 0 0; color: var(--docs-muted); max-width: var(--docs-measure); }

.docs-register__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin: 14px 0 0;
  font-size: 13.5px;
}
.docs-register__meta dt {
  color: var(--docs-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  align-self: center;
}
.docs-register__meta dd { margin: 0 18px 0 0; align-self: center; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  /* Pairs wrap independently in a flex row, so "SECTION" ends a line and its
     value starts the next one hard left, which reads as a broken layout. A
     two-column grid keeps each label with its value. */
  .docs-register__meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; }
  .docs-register__meta dd { margin-right: 0; }
}

.docs-register__files { margin: 14px 0 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.docs-register__filesLabel { font-size: 12px; color: var(--docs-muted); text-transform: uppercase; letter-spacing: .08em; }

.docs-permalink {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--docs-pale);
  border: 1px solid #c4e5f5;
  padding: 2px 8px;
  text-decoration: none;
  word-break: break-all;
}
.docs-permalink:hover, .docs-permalink:focus-visible { border-color: var(--docs-brand); }

/* --------------------------------------------------------------- header */

.docs-header {
  background: var(--docs-brand-dark);
  color: var(--docs-invert);
}
.docs-header__utilityBar { background: rgba(255,255,255,.06); }
.docs-header__utility {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 20px; padding-block: 7px;
}
.docs-header__in {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding-block: 16px;
}
.docs-brand { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 14px; }
/* 36px keeps the two-line wordmark legible without the header growing into a
   marketing bar. The main site runs it at 60px; this is a reference site and
   the chrome should stay out of the way. */
.docs-brand__mark { height: 52px; width: auto; display: block; }
.docs-brand__name { font-size: 18px; font-weight: 600; letter-spacing: .01em; }
.docs-brand__sub {
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,.28);
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--docs-mint);           /* mint on #000036 is 11.6:1 */
}
.docs-header__back { color: rgba(255,255,255,.78); font-size: 12.5px; text-decoration: none; display: inline-flex; gap: 7px; align-items: center; }
.docs-header__back:hover, .docs-header__back:focus-visible { color: #fff; }

.docs-nav { margin-inline-start: auto; }
.docs-nav__list { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.docs-nav__list a { color: #fff; text-decoration: none; font-size: 15px; padding-block: 4px; border-bottom: 2px solid transparent; }
.docs-nav__list a:hover, .docs-nav__list a:focus-visible { border-bottom-color: var(--docs-mint); color: #fff; }
.docs-header__out { color: rgba(255,255,255,.72); font-size: 12.5px; text-decoration: none; letter-spacing: .01em; }
.docs-header__out:hover { color: #fff; }

/* ---------------------------------------------------------------- main */

.docs-main { padding-block: 40px 72px; min-height: 60vh; }

.docs-page__head { margin-bottom: 20px; }
.docs-page__title { font-size: clamp(28px, 4vw, 40px); }
.docs-page__head--index .docs-page__title { margin-bottom: 14px; }

/* The mint rule under a heading. Decorative, never carrying meaning. */
.docs-page__title::after,
.docs-h::after {
  content: ""; display: block;
  width: 100px; height: 3px; margin-top: 14px;
  background: var(--docs-mint);
}

.docs-lede { font-size: 18px; color: var(--docs-muted); max-width: var(--docs-measure); }

.docs-prose { max-width: var(--docs-measure); }
.docs-prose p { margin-block: 0 1em; }
.docs-prose ul, .docs-prose ol { padding-left: 1.3em; }
.docs-prose li { margin-bottom: .4em; }

.docs-page__intro { margin-bottom: 8px; }

.docs-section { margin-top: 44px; }
.docs-h { font-size: 22px; margin-bottom: 18px; }
.docs-h::after { margin-top: 10px; }

.docs-empty { color: var(--docs-muted); font-style: italic; }

/* ------------------------------------------------------------ the index */

.docs-areas { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 1px; background: var(--docs-line); border: 1px solid var(--docs-line); }
/* The LINK is the card, not a block sitting inside one.
   As display:block it was only as tall as its own text, so the hover fill
   stopped short of the cell and left a white band under the shortest card —
   which reads as a rendering bug rather than a hover state. Stretching the
   anchor also makes the whole cell clickable, which is what a card implies. */
.docs-areas__item { background: #fff; display: flex; }
.docs-areas__link { flex: 1; display: flex; flex-direction: column; padding: 26px 24px; text-decoration: none; color: inherit; }
.docs-areas__link:hover, .docs-areas__link:focus-visible { background: var(--docs-pale); }
.docs-areas__name { font-size: 21px; }
.docs-areas__desc { margin: 8px 0 0; color: var(--docs-muted); max-width: 60ch; }
/* Pushed to the foot of the card so the counts line up across a row whose
   descriptions are different lengths. */
.docs-areas__count { margin: 10px 0 0; padding-top: 14px; margin-top: auto; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--docs-muted); }

@media (min-width: 720px) {
  .docs-areas { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------- document lists */

.docs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--docs-line); }
.docs-list__item { padding: 24px 0; border-bottom: 1px solid var(--docs-line); }
.docs-list__title { font-size: 21px; margin-bottom: 6px; }
.docs-list__title a { text-decoration: none; }
.docs-list__title a:hover { text-decoration: underline; }
.docs-list__summary { margin: 0 0 12px; color: var(--docs-muted); max-width: var(--docs-measure); }
.docs-list__meta,
.docs-doc__meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  /* 12px top was set by a SECOND .docs-doc__meta rule further down the file,
     which quietly beat the 0 in this shorthand. Merged here so the value is
     stated once — a selector declared twice in one stylesheet has caused three
     separate bugs in the main site's theme. */
  margin: 12px 0 6px; font-size: 13px; color: var(--docs-muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.docs-ref { font-weight: 600; color: var(--docs-text); }

/* ----------------------------------------------------- a document record */

.docs-crumbs { font-size: 13px; color: var(--docs-muted); margin-bottom: 18px; display: flex; gap: 8px; }
.docs-crumbs a { text-decoration: none; }

.docs-doc__head { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.docs-doc__title { font-size: clamp(26px, 3.6vw, 36px); }
.docs-doc__title::after { content: none; }   /* the rule belongs under the section headings, not the document title */
.docs-doc__summary { font-size: 18px; max-width: var(--docs-measure); margin: 20px 0 0; }
.docs-byline { color: var(--docs-muted); font-size: 15px; margin-top: 18px; }

.docs-status {
  margin: 0; padding: 5px 12px; border-radius: 2px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: var(--docs-old-bg); color: var(--docs-old-ink); white-space: nowrap;
}
.docs-status--active     { background: var(--docs-ok-bg);   color: var(--docs-ok-ink); }
.docs-status--draft      { background: var(--docs-warn-bg); color: var(--docs-warn-ink); }
.docs-status--inline     { padding: 2px 8px; font-size: 11px; }

.docs-archivebar {
  background: var(--docs-warn-bg); color: var(--docs-warn-ink);
  border-left: 3px solid var(--docs-warn-ink);
  padding: 14px 18px; margin: 0 0 24px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
}
.docs-archivebar a { color: var(--docs-warn-ink); }

/* ------------------------------------------------------------ downloads */

.docs-dl-row { display: flex; flex-wrap: wrap; gap: 12px; }

.docs-dl {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 13px 20px; border-radius: var(--docs-btn-radius);
  background: var(--docs-brand); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 500;
}
.docs-dl:hover, .docs-dl:focus-visible { background: var(--docs-brand-dark); color: #fff; }
.docs-dl__meta { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.docs-dl__gate {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 2px;
}

/* Secondary downloads — history rows and list items — are outlined, so the
   current version's download is the one the eye lands on. */
.docs-dl-row--small .docs-dl {
  background: transparent; color: var(--docs-brand);
  border: 1px solid var(--docs-line); padding: 9px 14px; font-size: 14px;
}
.docs-dl-row--small .docs-dl:hover { background: var(--docs-pale); color: var(--docs-brand); border-color: var(--docs-brand); }
.docs-dl-row--small .docs-dl__meta { color: var(--docs-muted); }
.docs-dl-row--small .docs-dl__gate { background: var(--docs-grey-bg); color: var(--docs-muted); }

/* -------------------------------------------------------------- history */

.docs-history { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--docs-line-soft); }
.docs-history__row { padding: 18px 0; border-bottom: 1px solid var(--docs-line-soft); }
.docs-history__head { margin: 0 0 6px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.docs-history__ver { font-weight: 600; text-decoration: none; }
.docs-history__date { font-size: 13px; color: var(--docs-muted); letter-spacing: .04em; text-transform: uppercase; }
.docs-history__changed { margin: 0 0 12px; color: var(--docs-muted); max-width: var(--docs-measure); }

/* ----------------------------------------------------------- references */

.docs-refs { list-style: none; margin: 0; padding: 0; }
.docs-refs li { padding: 10px 0; border-bottom: 1px solid var(--docs-line-soft); display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.docs-refs__org { font-size: 13px; color: var(--docs-muted); letter-spacing: .04em; text-transform: uppercase; }

.docs-section--contact { border-top: 3px solid var(--docs-pale); padding-top: 28px; }

/* --------------------------------------------------- the templates table */

/* The RUTlist rendered from its own JSON. Wide strings in a narrow column, so
   the wrapper scrolls rather than the page: a RUT must never be shown broken
   across a line, because a reader cannot tell a wrap from a character. */

.docs-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); border: 0; white-space: nowrap;
}

.docs-ruts__source { font-size: 15px; color: var(--docs-muted); }

.docs-ruts__wrap { margin-top: 18px; overflow-x: auto; border: 1px solid var(--docs-line); }
.docs-ruts__wrap:focus-visible { outline: 3px solid var(--docs-accent); outline-offset: 2px; }
.docs-ruts { width: 100%; border-collapse: collapse; font-size: 15px; }
.docs-ruts thead th {
  background: var(--docs-pale); color: var(--docs-brand-dark);
  text-align: left; padding: 12px 14px; white-space: nowrap;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.docs-ruts td, .docs-ruts tbody th {
  padding: 14px; border-top: 1px solid var(--docs-line-soft);
  text-align: left; vertical-align: top;
}
.docs-ruts__sel { width: 1%; white-space: nowrap; color: var(--docs-brand); font-variant-numeric: tabular-nums; }

/* The selector and the template take what they need and the instructions take
   the rest. A RUT is never wrapped: a line break inside one reads as a
   character, and nobody can tell which. The instructions are prose and wrap
   like prose, so nothing is ever cut off the right-hand edge. */
.docs-ruts__rut { width: 1%; }
.docs-ruts__rut code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; white-space: nowrap;
}
.docs-ruts__inst { color: var(--docs-muted); overflow-wrap: anywhere; }
.docs-ruts__inst ul { margin: 0; padding-left: 1.2em; }
.docs-ruts__inst li + li { margin-top: .35em; }

.docs-h--sub { font-size: 17px; margin-top: 34px; margin-bottom: 12px; }
.docs-h--sub::after { display: none; }

.docs-ruts__notes { color: var(--docs-muted); max-width: var(--docs-measure); padding-left: 1.3em; margin: 0; }
.docs-ruts__notes li { margin-bottom: .5em; }

.docs-ruts__legal { margin-top: 24px; font-size: 13px; color: var(--docs-muted); display: flex; flex-direction: column; gap: 4px; }

/* ------------------------------------------------------------- the gate */

.docs-gate__form { max-width: 560px; margin-top: 24px; padding: 24px; background: var(--docs-grey-bg); }

/* -------------------------------------------------------------- footer */

.docs-footer { background: var(--docs-footer); color: rgba(255,255,255,.78); padding-block: 28px; }
.docs-footer__in { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.docs-footer__line { margin: 0; font-size: 14px; display: flex; gap: 20px; flex-wrap: wrap; }
.docs-footer a { color: #fff; }

/* --------------------------------------------------------------- phone */

@media (max-width: 720px) {
  body { font-size: 16px; }
  .docs-header__in { gap: 14px; padding-block: 14px; }
  .docs-nav { margin-inline-start: 0; width: 100%; }
  .docs-nav__list { gap: 14px; }
  /* Hidden on a phone: the wordmark is the return path to the main site and the
     footer carries the link too, so a third copy is a band of navy doing nothing. */
  .docs-header__utilityBar { display: none; }
  .docs-main { padding-block: 28px 48px; }
  .docs-doc__head { gap: 12px; }
  .docs-dl { width: 100%; justify-content: space-between; }
  .docs-ruts { font-size: 14px; }
  .docs-ruts td, .docs-ruts tbody th { padding: 11px; }
  .docs-ruts__rut code { font-size: 13px; }
}