/* ---------------------------------------------------------------------------
   WNC Allocate — brand foundation
   Derived directly from: West Northamptonshire Council Brand Guideline V1.0
     page 9  — Typeface: Roboto for all online platforms
     page 10 — Primary colour palette
     page 11 — Secondary colour palette (text must NOT be overlaid on these)
     page 21 — Accessibility Checklist
   Nothing here is invented. Every hex below is quoted from the guideline.
   --------------------------------------------------------------------------- */

:root {
  /* -- Primary palette, guideline page 10 ------------------------------- */
  --wnc-black:        #000000; /* Black,          PMS Black 6 C */
  --wnc-green-light:  #6C9A36; /* Green gradient,  PMS 361 C    */
  --wnc-green:        #008D49; /* Green gradient,  PMS 2271 C   */
  --wnc-blue-light:   #386193; /* Blue gradient,   PMS 2386 C   */
  --wnc-blue:         #244D7A; /* Blue gradient,   PMS 7687 C   */
  --wnc-red-light:    #9D0B1D; /* Red gradient,    PMS 186 C    */
  --wnc-red:          #7E1824; /* Red gradient,    PMS 7421 C   */

  /* -- Secondary palette, guideline page 11 -----------------------------
     "Text and logos should not be overlaid on the secondary palette
     colours." These are therefore used only as chart fills, tag bars and
     small non-textual indicators. Never as a background behind words.   */
  --wnc-yellow:       #E2CA76; /* PMS 120 C      */
  --wnc-cyan:         #6CC7E1; /* PMS Blue 0821 C */
  --wnc-pink:         #ED6B8E; /* PMS 244 C      */
  --wnc-black-50:     #808080; /* Black 50%      */

  /* -- Neutrals. Guideline page 21: "Black text on a white or very pale
        background is most legible." ------------------------------------- */
  --paper:            #FFFFFF;
  --pale:             #F4F6F8;
  --pale-2:           #EAEEF2;
  --line:             #D3DAE1;
  --line-strong:      #A9B4C0;
  --ink:              #000000;
  --ink-soft:         #333B45;

  /* -- Type. Guideline page 9: Roboto for online, Tahoma is the print
        equivalent and so is the natural local fallback. ----------------- */
  --font-body: Roboto, Tahoma, "Segoe UI", Arial, sans-serif;

  /* Guideline page 21: "ideally size 12 or above" — 12pt is ~16px. */
  --size-body: 16px;
  --size-small: 14px;
  --size-tiny: 12.5px;

  --radius: 4px;
  --gap: 16px;
}

/* ---------------------------------------------------------------------------
   Accessibility Checklist, guideline page 21, applied globally:
     - clear sans serif body text at 16px (= 12pt) or above
     - text always aligned left, never justified
     - no italics, no block capitals
     - fewest possible text styles, and no effects such as drop shadows
   These three rules are enforced here rather than left to each component.
   --------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--pale);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.5;
  text-align: left;          /* never justified */
  -webkit-font-smoothing: antialiased;
}

/* No italics anywhere. */
i, em, cite, address, dfn, var { font-style: normal; }

/* No block capitals anywhere. */
* { text-transform: none !important; }

/* No drop shadows or text effects anywhere. Depth is carried by the 1px
   rules in --line instead, which also holds contrast better. */
* { text-shadow: none !important; box-shadow: none !important; }

h1, h2, h3, h4 {
  margin: 0 0 8px 0;
  font-weight: 700;
  color: var(--wnc-blue);
  line-height: 1.3;
  text-align: left;
}
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
h4 { font-size: var(--size-body); color: var(--ink); }

p { margin: 0 0 10px 0; max-width: 78ch; }  /* keeps lines short, page 21 */

a { color: var(--wnc-blue); }
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--wnc-green);
  outline-offset: 2px;
}

/* Screen-reader-only text. Used so that no status is ever carried by colour
   alone, which the accessibility checklist requires in substance and
   WCAG 2.2 requires explicitly (1.4.1 Use of Colour).

   Deliberately NOT absolutely positioned. The usual absolute technique takes
   its containing block from the nearest positioned ancestor, which inside a
   horizontally scrolling table is the document itself — so the hidden spans
   escape the scroll box and stretch the whole page sideways. A 1 by 1 box
   clipped in normal flow is read the same way and cannot escape. */
.sr {
  display: inline-block;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: top;
}

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