/*
 * nonprofittechsupport.ca: stylesheet (Train 18, 2026-10: the layered design system; owner decision D8, same words)
 *
 * Design goals: render fast on every phone (no framework, no remote font, one small script), meet WCAG 2.2 AA (contrast, target
 * size, focus), and keep the brand: navy and gold. Cascade layers, in order of weight: reset, tokens, base, layout, components,
 * utilities, overrides. Print rules sit outside the layers on purpose: an unlayered rule beats a layered one.
 * Tests read this file by rule (tests/test_site_train5.py, _train8.py, test_site_print.py, test_site_design.py); keep the phone
 * header block the first "@media (max-width: 640px)" block in the file.
 */
@layer reset, tokens, base, layout, components, utilities, overrides;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
  ul[role="list"] { list-style: none; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
}

@layer tokens {
  :root {
    /* brand */
    --brand: #1B3A5C;
    --brand-deep: #12294a;
    --brand-soft: #2c5a8c;
    --brand-fg: #ffffff;
    --accent: #B57F1B;
    --accent-strong: #d49a2e;
    --accent-on-dark: #dca73f; /* lighter amber: 5.34:1 on the navy header; the base amber is only 3.33:1 there */
    /* surfaces and text */
    --bg: #ffffff;
    --bg-alt: #f5f7fa;
    --surface: #ffffff;
    --surface-tint: #e4ecf6;
    --fg: #1a1a1a;
    --fg-muted: #555;
    --border: #d8dde3;
    --border-strong: #b9c2cd;
    --link: #1B3A5C;
    --link-hover: #8A5D0F; /* 5.75:1 on white */
    --warn: #b54a1b;
    /* focus: one colour per surface so the ring keeps 3:1 against what it sits on */
    --focus: #1d5fb8;
    --focus-on-dark: #ffffff;
    /* icons */
    --icon-bg: #e4ecf6;
    --icon-fg: #1B3A5C;
    /* type: fluid, largest step at most 2.5 times the smallest in each pair */
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --step--1: clamp(.875rem, .86rem + .08vw, .9375rem);
    --step-0: clamp(1rem, .97rem + .15vw, 1.0625rem);
    --step-1: clamp(1.125rem, 1.05rem + .4vw, 1.3rem);
    --step-2: clamp(1.4rem, 1.2rem + .9vw, 1.85rem);
    --step-3: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
    --step-4: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
    --measure: 65ch;
    /* space, radius, elevation */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;
    --space-7: 6rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --shadow-1: 0 1px 2px rgba(16, 38, 63, .08);
    --shadow-2: 0 4px 14px rgba(16, 38, 63, .10);
    --shadow-3: 0 12px 32px rgba(16, 38, 63, .16);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #131720;
      --bg-alt: #1c2330;
      --surface: #1a2130;
      --surface-tint: #26344c;
      --fg: #f0f3f8;
      --fg-muted: #b8c0cc;
      --border: #2a3142;
      --border-strong: #3d475c;
      --link: #c8d8ee;
      --link-hover: #f0c97f;
      --focus: #8fbfff;
      --icon-bg: #26344c;
      --icon-fg: #dca73f;
      --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
      --shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
      --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
    }
  }
}

@layer base {
  html { color-scheme: light dark; scroll-padding-top: var(--space-3); }
  body {
    font-family: var(--font-stack);
    font-size: var(--step-0);
    line-height: 1.6;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a { color: var(--link); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
  a:hover, a:focus { color: var(--link-hover); }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

  h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; color: var(--fg); text-wrap: balance; }
  h1 { font-size: var(--step-4); margin-block: var(--space-3); letter-spacing: -.01em; }
  h2 { font-size: var(--step-3); margin-block: var(--space-5) var(--space-3); letter-spacing: -.005em; }
  h3 { font-size: var(--step-1); margin-block: var(--space-4) var(--space-2); }
  h4 { font-size: var(--step-0); margin-block: var(--space-3) var(--space-2); }
  p { max-width: var(--measure); margin-block: var(--space-3); text-wrap: pretty; }
  ::selection { background: var(--accent-on-dark); color: #1a1a1a; }
  hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-4); }
}

@layer layout {
  .skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-3);
    background: var(--brand);
    color: var(--brand-fg);
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    border-radius: var(--radius-sm);
    z-index: 100;
  }
  .skip-link:focus { top: var(--space-3); }
  .skip-link:focus-visible { outline-color: var(--focus-on-dark); }

  /* header and navigation */
  .site-header {
    background: var(--brand);
    color: var(--brand-fg);
    padding-block: var(--space-3);
    border-bottom: 4px solid var(--accent);
  }
  .site-header a:focus-visible, .site-header button:focus-visible { outline-color: var(--focus-on-dark); }
  .site-header__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
  }
  .site-header__brand {
    color: var(--brand-fg);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .site-header__brand:hover, .site-header__brand:focus { color: var(--accent-on-dark); }
  .site-header__brand .brand-logo { flex: none; }

  .site-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
  }
  .site-nav a {
    color: var(--brand-fg);
    text-decoration: none;
    font-weight: 500;
    padding-block: var(--space-1);
    min-height: 44px; /* WCAG 2.2 AA target size */
    display: inline-flex;
    align-items: center;
  }
  .site-nav a:hover, .site-nav a:focus, .site-nav a[aria-current="page"] { color: var(--accent-on-dark); text-decoration: underline; }

  .nav-toggle { display: none; }
  @media (max-width: 640px) {
    .site-header { padding-block: var(--space-2); }
    .site-header__inner { flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 0; min-height: 44px; }
    .nav-toggle {
      display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
      margin-left: auto; padding: 0 var(--space-3);
      font: inherit; font-weight: 600; color: var(--brand-fg); background: transparent;
      border: 2px solid var(--brand-fg); border-radius: var(--radius-sm); cursor: pointer;
    }
    .site-nav.is-enhanced { flex-basis: 100%; }
    .site-nav.is-enhanced ul { flex-direction: column; gap: 0; }
    .site-nav.is-enhanced:not(.is-open) ul { display: none; }
    .site-nav.is-enhanced.is-open { padding-top: var(--space-2); }
  }

  /* Phones with scripting on: the menu list is collapsed from the first paint. Before this rule the full list showed until
     main.js had run, and the header then shrank by 89 px: a layout shift of 0.103 on every throttled load (2026-10-11). */
  @media (max-width: 640px) and (scripting: enabled) {
    .site-nav { flex-basis: 100%; }
    .site-nav ul { flex-direction: column; gap: 0; }
    .site-nav:not(.is-open) ul { display: none; }
  }

  /* main and sections */
  main { display: block; }
  section { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
  section.alt { background: var(--bg-alt); }
  .section__inner { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-3); }
  .prose { max-width: 70ch; margin-inline: 0; }
  .lede { font-size: var(--step-1); color: var(--fg-muted); max-width: 60ch; }

  /* hero */
  .hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 55%, var(--brand-soft) 100%);
    color: var(--brand-fg);
    padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  }
  .hero > .section__inner { position: relative; }
  .hero h1, .hero p, .hero .lede { color: var(--brand-fg); }
  .hero a:focus-visible, .hero button:focus-visible { outline-color: var(--focus-on-dark); }
  /* footer */
  .site-footer {
    background: var(--bg-alt);
    color: var(--fg-muted);
    border-top: 1px solid var(--border);
    padding-block: var(--space-5);
    margin-top: var(--space-6);
  }
  .site-footer__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-3);
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }
  .site-footer a { color: var(--link); }
  .site-footer .small { font-size: var(--step--1); }
  /* WCAG 2.2 AA target size (SC 2.5.8): footer list links get a tappable height of at least 24px (19px text + padding). */
  .site-footer li a { display: inline-block; padding-block: 6px; }
  .site-footer__legal {
    max-width: 1200px;
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-3) 0;
    border-top: 1px solid var(--border);
  }
}

@layer components {
  /* buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
  }
  .btn--lg { min-height: 48px; padding: var(--space-3) var(--space-5); font-size: 1.05rem; }
  .btn--primary { background: var(--accent); color: #1a1a1a; box-shadow: var(--shadow-1); }
  .btn--primary:hover, .btn--primary:focus { background: var(--accent-strong); color: #1a1a1a; }
  .btn--secondary { background: transparent; color: var(--brand-fg); border-color: var(--brand-fg); }
  .btn--secondary:hover, .btn--secondary:focus { background: var(--brand-fg); color: var(--brand); }
  .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); }
  .hero .cta-row { margin-top: var(--space-4); }
  /* buttons on light sections; the default secondary button is for the dark hero */
  .alt .btn--secondary { color: var(--brand); border-color: var(--brand); }
  .alt .btn--secondary:hover, .alt .btn--secondary:focus { background: var(--brand); color: var(--brand-fg); }

  /* cards and grids */
  .grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-1);
  }
  .card > * + * { margin-top: var(--space-2); }
  .card h3, .card h4 { margin: 0 0 var(--space-1); font-size: var(--step-1); display: flex; align-items: center; gap: var(--space-3); }
  .card p { margin-block: 0; }
  .stat { text-align: center; }
  .stat__number { font-size: 2.5rem; font-weight: 800; color: var(--accent); display: block; }
  .stat__label { font-size: 1rem; color: var(--fg-muted); }

  /* icons: an inline sprite per page; the symbols carry no colour, so the badge sets it */
  .icon { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .icon-badge {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md);
    background: var(--icon-bg); color: var(--icon-fg);
  }
  /* a link that ends in an arrow: the icon follows the last word, also when the text wraps */
  .link-arrow .icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-inline-start: .25em; }

  /* the hero's decorative mark. It sits after .icon in this layer so that its size and thin stroke win. */
  .hero__mark { display: none; }
  @media (min-width: 56em) {
    .hero__mark {
      display: block; position: absolute; right: -2rem; top: 50%; width: 22rem; height: 22rem;
      transform: translateY(-50%); color: rgba(255, 255, 255, .09); stroke-width: 1; pointer-events: none;
    }
  }

  /* service areas: a heading, then its cards */
  .area + .area { margin-top: var(--space-5); }
  .area__title { margin: 0 0 var(--space-3); padding-left: var(--space-3); border-left: 4px solid var(--accent); font-size: var(--step-2); }

  /* disclosure (FAQ): a flex summary hides the native marker, so a border chevron stands in for it */
  details { border-bottom: 1px solid var(--border); }
  details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
  details > summary::after { content: ""; flex: none; margin-inline-start: auto; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
  details[open] > summary::after { transform: rotate(-135deg); }

  .post-cta { margin-block: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); background: var(--bg-alt); }
  .post-cta p { margin: 0; }
  .jump-list ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); padding: 0; }
  .jump-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .org-details dt { font-weight: 600; margin-top: var(--space-2); }
  .org-details dd { margin: 0 0 var(--space-2) 0; }
  .table-wrap { overflow-x: auto; margin-block: var(--space-3); }
  .table-wrap table { border-collapse: collapse; width: 100%; }
  .table-wrap th, .table-wrap td { border: 1px solid var(--border); padding: .4rem .6rem; text-align: left; vertical-align: top; }
  pre { overflow-x: auto; background: var(--bg-alt); padding: var(--space-3); border-radius: var(--radius-sm); }

  /* forms */
  .form-field { margin-block: var(--space-3); }
  .form-field label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
  .form-field input, .form-field textarea, .form-field select {
    width: 100%; padding: var(--space-2) var(--space-3); min-height: 44px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; background: var(--bg); color: var(--fg);
  }
  .form-field input:focus, .form-field textarea:focus { border-color: var(--focus); }
  .form-field .help { font-size: .875rem; color: var(--fg-muted); margin-top: var(--space-1); }
  /* Honeypot field: hidden from people; bots that fill it get their submission dropped by Web3Forms. */
  .hp { display: none !important; }
}

@layer utilities {
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* the inline icon sprite: no inline style is allowed by the CSP */
  .small { font-size: var(--step--1); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .stack > * + * { margin-top: var(--space-3); }
}

@layer overrides {
  /* the dark colour scheme: surfaces that carry their own colour keep it */
  @media (prefers-color-scheme: dark) {
    .alt .btn--secondary { color: var(--link); border-color: var(--link); }
    .alt .btn--secondary:hover, .alt .btn--secondary:focus { background: var(--link); color: var(--bg); }
  }

  /* motion only for people who have not asked for less of it (WCAG 2.3.3) */
  @media (prefers-reduced-motion: no-preference) {
    .card, .btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
    .card:hover { box-shadow: var(--shadow-2); } /* a card is not a link, so it does not lift */
    .btn:hover { transform: translateY(-1px); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  }

  /* forced colours: keep borders and focus visible where the system replaces the palette */
  @media (forced-colors: active) {
    .card, .btn, .icon-badge { border: 1px solid CanvasText; }
    .btn--primary { border-color: ButtonText; }
  }
}

/* Cross-document view transitions: a short cross-fade between pages, only for people who have not asked for less motion.
   Unlayered, because @view-transition is a top-level rule. A browser without support ignores it. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .14s; }
}

/* print: unlayered, so these rules win. The footer prints (legal name, office, contact). */
@media print {
  .site-header, .site-nav, .skip-link, .cta-row, .hero__mark { display: none; }
  body { color: #000; background: #fff; }
  .hero { background: none; color: #000; }
  .hero h1, .hero p { color: #000; }
  .card { box-shadow: none; break-inside: avoid; }
}