/* blind.training, Access Technology Institute. 30 September 2026.
   The portal's colours and serif headings (src/App.jsx: C, SERIF, SANS,
   A11Y_THEMES), so the two read as one organisation. Built to her
   Accessibility Standards: the gold focus ring on plain :focus (never
   :focus-visible, which hides it from mouse users), targets at least 44
   by 44 pixels, and the reader's choices on the Accessibility page
   (background, text size, focus indicator), set on <html> by site.js
   before the page is drawn. */

@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}

:root {
  --ink: #1a1a2e;
  --page: #f5f0e0;
  --card: #fdfaf4;
  --card-heading: #1a3a6b;
  --card-border: rgba(184, 134, 11, 0.35);
  --nav: #2a3a6a;
  --nav-text: #f5f0e8;
  --gold: #c8983a;
  --accent: #2a5a8a;
  --muted: #5a4a3a;
  --rule: #c8b89a;
  --error: #8b1a1a;
  --error-bg: #fff0f0;
  --success: #2a5a2a;
  --success-bg: #e8f0e8;
  --field-bg: #ffffff;
  --field-border: #8a8378;
  --button: #2a3a6a;
  --button-text: #ffffff;
  --focus: #b8860b;
  --focus-edge: rgba(26, 26, 46, 0.55);
  --text-size: 14pt;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* The portal's six backgrounds, the same names and colours. */
html[data-theme='dark'] {
  --ink: #f5f0e8; --page: #1a1a2e; --card: #26263f; --card-heading: #e3c88a;
  --card-border: rgba(200, 152, 58, 0.55); --nav: #10101c; --accent: #9cc4ec; --muted: #d8cfc0;
  --rule: #5a5a7a; --field-bg: #12121f; --field-border: #9a93a8; --button: #e3c88a; --button-text: #1a1a2e;
  --error: #ffb4b4; --error-bg: #3a1a1a; --success: #b4e0b4; --success-bg: #1a3a1a; --focus: #ffd24a;
  --focus-edge: rgba(255, 255, 255, 0.6);
}
html[data-theme='contrast'] {
  --ink: #ffff00; --page: #000000; --card: #000000; --card-heading: #ffff00; --card-border: #ffff00;
  --nav: #000000; --nav-text: #ffff00; --gold: #ffff00; --accent: #ffff00; --muted: #ffff00; --rule: #ffff00;
  --field-bg: #000000; --field-border: #ffff00; --button: #ffff00; --button-text: #000000;
  --error: #ffff00; --error-bg: #000000; --success: #ffff00; --success-bg: #000000; --focus: #00ffff;
  --focus-edge: #ffffff;
}
html[data-theme='contrastAlt'] {
  --ink: #1a1a2e; --page: #ffff00; --card: #ffff00; --card-heading: #1a3a6b; --card-border: #1a1a2e;
  --nav: #1a1a2e; --nav-text: #ffff00; --accent: #1a1a2e; --muted: #1a1a2e; --rule: #1a1a2e;
  --field-bg: #ffffff; --field-border: #1a1a2e; --button: #1a1a2e; --button-text: #ffff00;
  --error: #8b0000; --error-bg: #ffffff; --success: #003300; --success-bg: #ffffff; --focus: #8b0000;
}
html[data-theme='sepia'] {
  --page: #f4ecd8; --card: #fdf8ec;
}
html[data-theme='white'] {
  --page: #ffffff; --card: #f6f2e8;
}

html {
  font-size: var(--text-size);
  -webkit-text-size-adjust: 100%;
  background: var(--page);
}
* { box-sizing: border-box; }
/* Hidden means hidden, even for elements this sheet gives a display
   (buttons are inline-flex): without this, a button the page has hidden
   at a limit stayed on screen and in the reading order. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.25;
  color: var(--card-heading);
}
h1 { font-size: 2rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.45rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: 0.35rem; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

/* THE FOCUS RING. Plain :focus, the portal's gold, 3px with a dark edge
   so it shows on any background (WCAG 1.4.11, 3:1). Bold and Off are the
   reader's choices on the Accessibility page. */
:focus {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--focus-edge);
}
html.focus-bold :focus { outline-width: 6px; outline-offset: 4px; }
html.focus-off :focus { outline: none; box-shadow: none; }
h1:focus, h2:focus { outline-offset: 6px; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------- the header ---------------- */
.site-header {
  background: var(--nav);
  color: var(--nav-text);
  border-bottom: 4px solid var(--gold);
}
.site-header .inner,
.site-footer .inner,
main {
  max-width: 54rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.brand {
  display: block;
  padding: 1.25rem 0 0.5rem;
  color: var(--nav-text);
  text-decoration: none;
}
.brand-name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
}
.brand-tagline {
  display: block;
  font-size: 0.95rem;
  color: var(--nav-text);
  opacity: 0.9;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.75rem;
  color: var(--nav-text);
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
}
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current='page'] {
  border-bottom: 3px solid var(--gold);
  border-radius: 0;
}
.site-nav a.nav-login {
  border: 2px solid var(--gold);
}

/* ---------------- the page ---------------- */
main { padding-top: 2rem; padding-bottom: 3rem; }
.lead { font-size: 1.15rem; }
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.cards .card { margin: 0; display: flex; flex-direction: column; }
.cards .card > p:last-child { margin-top: auto; margin-bottom: 0; }
.figure-right {
  float: right;
  width: 9rem;
  height: auto;
  margin: 0 0 1rem 1.5rem;
}
@media (max-width: 40rem) {
  .figure-right { float: none; display: block; margin: 0 auto 1rem; }
}

/* Buttons and button-like links. */
.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 1.25rem;
  background: var(--button);
  color: var(--button-text);
  border: 2px solid var(--button);
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.button:hover, button:hover { filter: brightness(1.12); text-decoration: underline; }
.button.secondary, button.secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; }

/* ---------------- forms ---------------- */
form { margin: 0; }
.field { margin: 0 0 1.25rem; }
.field label,
fieldset legend {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.field .hint { display: block; color: var(--muted); font-size: 0.95rem; margin-bottom: 0.35rem; }
.required-mark { color: var(--error); font-weight: 700; }
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--field-bg);
  border: 2px solid var(--field-border);
  border-radius: 6px;
}
textarea { min-height: 9rem; resize: vertical; }
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] {
  border-color: var(--error);
  border-width: 3px;
}
fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin: 0;
}
.choice input { width: 1.4rem; height: 1.4rem; margin: 0; }
.choice label { font-weight: 400; margin: 0; }

.message {
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border: 2px solid;
}
.message.error { color: var(--error); background: var(--error-bg); border-color: var(--error); }
.message.success { color: var(--success); background: var(--success-bg); border-color: var(--success); }
.message:empty { display: none; }
.message p:last-child { margin-bottom: 0; }

/* ---------------- the footer ---------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 2rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------------- the reader's own settings ----------------
   Windows High Contrast (forced colours) keeps the system's colours; the
   ring and borders stay visible. Reduced motion: nothing here animates. */
@media (forced-colors: active) {
  :focus { outline: 3px solid Highlight; box-shadow: none; }
  .button, button { border: 2px solid ButtonText; }
  .site-nav a[aria-current='page'] { border-bottom: 3px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header nav, .skip-link, .site-footer ul { display: none; }
  body { background: #ffffff; color: #000000; }
}