/* Orienteering NSW theme for the calendars page.
   Source: the "Orienteering NSW" design system (https://claude.ai/artifact/FCF2j8ccwhNemrJvdmaDpq,
   version 1789698286-fd69, 18 September 2026), itself built from the ONSW Brand Identity Style
   Guide v01 (2024). Section 1 transcribes its tokens; section 3 ports its Button, CalendarSubscribe,
   SiteHeader and SiteFooter rules onto the tool's page. When the design system changes, update the
   values here by hand and bump the version above.
   The page's markup and the --ecs-* contract belong to eventor-calendar-sync (README, "Theming the
   page"); a printed page is the tool's handout and ignores the screen styling below. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap");

/* 1. Tokens, light theme first because it is the brand's home. */
:root {
  --brand-red: #de1d24;
  --brand-orange: #f26522;
  --brand-navy: #2a3087;
  --brand-sky: #6dcff6;
  --brand-white: #ffffff;
  --surface: #ffffff;
  --surface-sunken: #f2f4fa;
  --surface-raised: #ffffff;
  --surface-accent: #eaf7fe;
  --surface-inverse: #2a3087;
  --ink: #1f2452;
  --ink-muted: #545a7d;
  --ink-on-inverse: #ffffff;
  --ink-link: #2a3087;
  --border: #e2e5f0;
  --border-strong: #6f76a0;
  --focus: #2a3087;
  --accent: #de1d24;
  --accent-hover: #b8151b;
  --accent-soft: #fdeced;
  --on-accent: #ffffff;
  --secondary: #f26522;
  --font-sans: Archivo, "Acumin Pro", Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-sm: 0 1px 2px 0 rgba(31, 36, 82, 0.10);
  --shadow-md: 0 2px 4px -1px rgba(31, 36, 82, 0.10), 0 8px 16px -4px rgba(31, 36, 82, 0.12);
  --tap-target-min: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #14172e;
    --surface-sunken: #0d0f22;
    --surface-raised: #1e2247;
    --surface-accent: #18293d;
    --surface-inverse: #0d0f22;
    --ink: #eef0f8;
    --ink-muted: #adb4d6;
    --ink-on-inverse: #eef0f8;
    --ink-link: #9ba3f0;
    --border: #2a2f57;
    --border-strong: #7a83bd;
    --focus: #6dcff6;
    --accent-hover: #c2161c;
    --accent-soft: #3a1519;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.60);
    --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.50), 0 8px 16px -4px rgba(0, 0, 0, 0.60);
  }
}

/* 2. Binding the tokens to the page's contract. */
:root {
  --ecs-accent: var(--accent);
  --ecs-ink: var(--ink);
  --ecs-muted: var(--ink-muted);
  --ecs-paper: var(--surface);
  --ecs-card: var(--surface-raised);
  --ecs-line: var(--border);
  --ecs-band: var(--surface-inverse);
  --ecs-band-ink: var(--ink-on-inverse);
  --ecs-outline-ink: var(--ink);
  --ecs-font: var(--font-sans);
  --ecs-mono: var(--font-mono);
  --ecs-radius: var(--radius-lg);
  --ecs-radius-sm: var(--radius-md);
}

/* 3. The page, in the design system's components. */
body { line-height: 26px; }                              /* body: 16/26 */
.intro { font-size: 18px; line-height: 28px; }           /* body-lg */

/* SiteHeader: the navy band, the mark on its white plate, the 4px red rule. */
header { padding: var(--space-4) 0; border-bottom: 4px solid var(--accent); }
header img { height: 72px; padding: var(--space-1); background: var(--brand-white); border-radius: var(--radius-sm); }
header h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; }   /* heading-1 */
header p { margin-top: var(--space-1); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 1; }   /* eyebrow */

h2 { font-size: 22px; line-height: 28px; font-weight: 700; padding-bottom: var(--space-2); border-bottom-width: 3px; }   /* heading-2 with the 3px accent rule */

.steps, details { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
summary { font-size: 15px; line-height: 20px; }

/* CalendarSubscribe: each calendar is a feed panel on the sky tint. */
.card { padding: var(--space-5); background: var(--surface-accent); border-color: var(--border-strong); gap: var(--space-2) var(--space-4); }
.card:target { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
.card h3 { font-size: 18px; line-height: 24px; }         /* heading-3 */
.card .desc { font-size: 14px; line-height: 22px; }      /* body-sm */
.buttons { gap: var(--space-3); margin-top: var(--space-2); }
.next { font-size: 14px; line-height: 22px; }
.next a { color: var(--ink-link); text-decoration: underline; text-underline-offset: 3px; }
.url { padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: 13px/20px var(--font-mono); color: var(--ink); }

/* Button: primary fills with accent; the others are secondary; Copy link is a ghost. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-target-min); padding: var(--space-3) var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
.btn:hover { background: var(--surface-sunken); }
.btn.primary { border-color: transparent; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.copy { border-color: transparent; color: var(--ink-link); text-decoration: underline; text-underline-offset: 3px; }
.btn.copy:hover { background: var(--accent-soft); }
.btn:focus-visible, .next a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* SiteFooter: the closing navy band. */
footer { margin-top: var(--space-8); padding: var(--space-6) 0; background: var(--surface-inverse); color: var(--ink-on-inverse); border-top: 4px solid var(--accent); font-size: 14px; line-height: 22px; }
footer p { margin: 0; }
footer a { text-decoration: underline; text-underline-offset: 3px; }
footer .legal { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-strong); font-size: 12px; line-height: 18px; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }