/*
Theme Name:  RODS 50th
Theme URI:   https://50.rods.sk.ca
Description: Child theme of Blocksy for the Regina Open Door Society 50th anniversary site.
             Brand palette, type scale, and spacing are defined in theme.json; this file
             carries base styles that theme.json cannot express.
Author:      Regina Open Door Society
Template:    blocksy
Version:     0.1.0
Requires PHP: 8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rods-50
*/

/* ---------------------------------------------------------------------------
   Brand tokens
   Sourced from the main RODS site (rods.sk.ca) so the anniversary site reads as
   the same organisation. Mirrored in theme.json for the block editor.

   CONTRAST — measured against #FFFFFF, WCAG 2.1:
     --rods-blue        #0052A0   7.73:1   AAA. Safe for body text, links, anything.
     --rods-body        #55606E   6.39:1   AA.  Default body colour.
     --rods-green       #669C42   3.28:1   Large text only (24px+, or 19px+ bold).
     --rods-orange      #F6931D   2.31:1   FILL ONLY. Never text on a light background.

   THE ORANGE BUTTON RULE. #F6931D is a great button fill, but white text on it
   is 2.31:1 — unreadable. Dark ink on it is 6.40:1 and passes AA. So orange
   buttons carry --rods-ink labels, never white. If a white label is ever
   genuinely required, use --rods-orange-deep (#B25F00, 5.1:1 with white).
--------------------------------------------------------------------------- */

:root {
  --rods-blue:        #0052A0;
  --rods-blue-deep:   #003A73;
  --rods-orange:      #F6931D;
  --rods-orange-deep: #B25F00;
  --rods-green:       #669C42;
  --rods-ink:         #1F2933;
  --rods-body:        #55606E;
  --rods-pale:        #E4EFF9;
  --rods-paper:       #FFFFFF;

  --rods-font-display: 'Josefin Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --rods-font-body:    'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --rods-focus-width:  3px;
  --rods-focus-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Full-bleed safety
   The story form's gradient escapes its container with `width: 100vw` and a
   negative inline margin. 100vw includes the scrollbar on desktop, so without
   this the page gains a few pixels of horizontal scroll.

   `clip` rather than `hidden` on purpose: `overflow: hidden` creates a scroll
   container, which silently breaks `position: sticky` further down the page —
   including the form's own mobile action bar. `clip` crops without that side
   effect.
--------------------------------------------------------------------------- */

html {
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Visible keyboard focus — non-negotiable per the brief.
   Blocksy ships its own focus handling; this makes the outline unmistakable and
   ensures it survives our own overrides. Do not remove, and do not replace with
   `outline: none` plus a subtle box-shadow.
--------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--rods-focus-width) solid var(--rods-blue);
  outline-offset: var(--rods-focus-offset);
  border-radius: 2px;
}

/* On dark or blue backgrounds the blue outline disappears — switch to white. */
.has-rods-blue-background-color :focus-visible,
.has-rods-blue-deep-background-color :focus-visible,
.has-rods-ink-background-color :focus-visible {
  outline-color: var(--rods-paper);
}

/* Skip link must be reachable and visible once focused. */
.skip-link:focus-visible {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--rods-paper);
  color: var(--rods-blue);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Motion
   Every animation on this site must be opt-out. Rather than remembering to
   guard each one, disable them globally for users who have asked.
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Typography baseline
   The scale itself lives in theme.json so the block editor offers it. This just
   sets the families and the reading measure.
--------------------------------------------------------------------------- */

body {
  font-family: var(--rods-font-body);
  color: var(--rods-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rods-font-display);
  color: var(--rods-ink);
  text-wrap: balance;
}

/* Long-form story content reads badly at full container width. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
  max-width: 68ch;
}