/* ============================================================
   Display choices: colour theme, text size, easy reading.
   ------------------------------------------------------------
   Set on <html> by includes/display_head.html before the page paints:
     data-tone   dark (studio, the default) | light | navy: the visitor's choice
     data-theme  dark | light: navy is a dark theme, so the older pages'
                 [data-theme="dark"] rules keep applying under it
     data-text   md (default) | lg | xl
     data-font   standard (default) | easy
   Every colour on the public site (--rd-*) and the staff dashboard
   (--dash-*) is a token, so a theme is only a token swap. Photo bands
   keep their dark overlay in every theme, so they stay dark islands.
   ============================================================ */

/* ── Light ─────────────────────────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;
  --rd-bg: #F7F6F2;
  --rd-surface: #FFFFFF;
  --rd-surface-2: #EFEEE8;
  --rd-surface-3: #E4E2DA;
  --rd-accent: #0B1B6D;
  --rd-accent-2: #2238B0;
  --rd-accent-dim: #081350;
  --rd-accent-ink: #FFFFFF;
  --rd-accent-wash: rgba(11, 27, 109, 0.06);
  --rd-accent-wash-2: rgba(11, 27, 109, 0.12);
  --rd-accent-text: #0B1B6D;
  --rd-ink: #141714;
  --rd-muted: #4A5048;
  --rd-muted-2: #5E635C;
  --rd-line: rgba(20, 23, 20, 0.12);
  --rd-line-2: rgba(20, 23, 20, 0.24);
  --rd-ok: #17682B;
  --rd-warn: #855C00;
  --rd-bad: #B3261E;

  --dash-bg: #F7F6F2;
  --dash-bg-2: #FFFFFF;
  --dash-surface: #FFFFFF;
  --dash-surface-2: #F1F0EB;
  --dash-surface-3: #E6E4DD;
  --dash-surface-hover: #E9E8E2;
  --dash-border: rgba(20, 23, 20, 0.12);
  --dash-border-strong: rgba(20, 23, 20, 0.26);
  --dash-text: #141714;
  --dash-text-2: #4A5048;
  --dash-text-3: #5E635C;
  --dash-accent: #0B1B6D;
  --dash-accent-hover: #2238B0;
  --dash-accent-text: #0B1B6D;
  --dash-accent-ink: #FFFFFF;
  --dash-accent-bg: rgba(11, 27, 109, 0.08);
  --dash-success: #17682B;
  --dash-success-bg: rgba(23, 104, 43, 0.09);
  --dash-warning: #855C00;
  --dash-warning-bg: rgba(212, 160, 23, 0.16);
  --dash-danger: #B3261E;
  --dash-danger-bg: rgba(179, 38, 30, 0.09);
  --dash-info: #4A5048;
  --dash-info-bg: rgba(74, 80, 72, 0.10);
  --dash-shadow: 0 1px 3px rgba(20, 23, 20, .08), 0 1px 2px rgba(20, 23, 20, .06);
  --dash-shadow-lg: 0 8px 24px rgba(20, 23, 20, .12);
}

/* ── Brand navy ────────────────────────────────────────────── */
html[data-tone="navy"] {
  color-scheme: dark;
  --rd-bg: #0A1240;
  --rd-surface: #0F1950;
  --rd-surface-2: #15215F;
  --rd-surface-3: #1C2A70;
  --rd-accent: #F7F6F2;
  --rd-accent-2: #FFFFFF;
  --rd-accent-dim: #DCDDF0;
  --rd-accent-ink: #0B1B6D;
  --rd-accent-wash: rgba(247, 246, 242, 0.06);
  --rd-accent-wash-2: rgba(247, 246, 242, 0.12);
  --rd-accent-text: #C3CEFF;
  --rd-ink: #F7F6F2;
  --rd-muted: #B7BFDD;
  --rd-muted-2: #99A3CB;
  --rd-line: rgba(247, 246, 242, 0.14);
  --rd-line-2: rgba(247, 246, 242, 0.26);

  --dash-bg: #0A1240;
  --dash-bg-2: #0C1548;
  --dash-surface: #0F1950;
  --dash-surface-2: #15215F;
  --dash-surface-3: #1C2A70;
  --dash-surface-hover: #22317D;
  --dash-border: rgba(247, 246, 242, 0.14);
  --dash-border-strong: rgba(247, 246, 242, 0.26);
  --dash-text: #F7F6F2;
  --dash-text-2: #B7BFDD;
  --dash-text-3: #A3ACD2;
  --dash-accent: #F7F6F2;
  --dash-accent-hover: #FFFFFF;
  --dash-accent-text: #C3CEFF;
  --dash-accent-ink: #0B1B6D;
  --dash-accent-bg: rgba(195, 206, 255, 0.14);
}

/* Logo: white lettering on dark themes, navy lettering on Light. */
.wsa-logo-light { display: none !important; }
html[data-theme="light"] .wsa-logo-dark { display: none !important; }
html[data-theme="light"] .wsa-logo-light { display: block !important; }

/* Fixed dark colours in the base CSS that a theme must follow. */
html[data-theme="light"] .db-topbar { background: rgba(247, 246, 242, 0.9); }
html[data-tone="navy"] .db-topbar { background: rgba(10, 18, 64, 0.9); }
html[data-theme="light"] .rd-header { background: rgba(247, 246, 242, 0.9); }
html[data-tone="navy"] .rd-header { background: rgba(10, 18, 64, 0.9); }
html[data-theme="light"] .rd-cookie { background: rgba(255, 255, 255, 0.97); }
html[data-tone="navy"] .rd-cookie { background: rgba(15, 25, 80, 0.97); }
html[data-theme="light"] .rd-hero-card { background: rgba(255, 255, 255, 0.92); }
html[data-tone="navy"] .rd-hero-card { background: rgba(15, 25, 80, 0.9); }
html[data-theme="light"] .rd-modal-backdrop { background: rgba(20, 23, 20, 0.55); }
html[data-theme="light"] .rd-interrupt .rd-btn--accent:hover,
html[data-theme="light"] .rd .rd-interrupt a.rd-btn--accent:hover { background: #FFFFFF; color: #0B1B6D; }

/* The navy "interrupt" strip turns cream under Navy: its text follows. */
html[data-tone="navy"] .rd-interrupt p,
html[data-tone="navy"] .rd-interrupt .rd-eyebrow { color: #24306F; }
html[data-tone="navy"] .rd-interrupt .rd-btn--accent,
html[data-tone="navy"] .rd .rd-interrupt a.rd-btn--accent { background: #0B1B6D; color: #F7F6F2; }

/* Photo bands and photo heroes keep their dark overlay in every theme, so the
   text on them keeps the dark-theme colours (a "dark island"). */
html[data-theme="light"] .rd-band,
html[data-tone="navy"] .rd-band,
html[data-theme="light"] .rd-hero:has(.rd-hero-media),
html[data-tone="navy"] .rd-hero:has(.rd-hero-media) {
  --rd-ink: #F2F3EF;
  --rd-muted: #C9CCC4;
  --rd-muted-2: #A9ADA4;
  --rd-accent-text: #A9B8FF;
  --rd-line: rgba(242, 243, 239, 0.14);
  --rd-line-2: rgba(242, 243, 239, 0.26);
  --rd-surface: #141714;
  --rd-surface-2: #1b1f1b;
  --color-ink: #F2F3EF;
  --color-ink-2: #c3c7bc;
  --color-ink-3: #B4B9AE;
  color: var(--rd-ink);
}
html[data-theme="light"] .rd-hero:has(.rd-hero-media) .rd-hero-card { background: rgba(20, 23, 20, 0.86); }
/* On a dark island the light theme's navy button would vanish: use the cream one. */
html[data-theme="light"] .rd-band .rd-btn--accent,
html[data-theme="light"] .rd-hero:has(.rd-hero-media) .rd-btn--accent { background: #F7F6F2; color: #0B1B6D; }
html[data-theme="light"] .rd-band .rd-btn--ghost,
html[data-theme="light"] .rd-hero:has(.rd-hero-media) .rd-btn--ghost { color: #F2F3EF; border-color: rgba(242, 243, 239, 0.5); }

/* ── Text size ─────────────────────────────────────────────── */
/* zoom scales px and rem alike, so every page grows evenly. Browsers without
   zoom keep the standard size. */
html[data-text="lg"] body { zoom: 1.12; }
html[data-text="xl"] body { zoom: 1.25; }
/* The public header is already a row of short, bold links: keep it at its normal
   size so it still fits on one line. */
html[data-text="lg"] .rd-header { zoom: 0.893; }
html[data-text="xl"] .rd-header { zoom: 0.8; }

/* ── Easy reading ──────────────────────────────────────────── */
/* Plain, mixed-case headings instead of tall condensed capitals, more line
   space, underlined links in running text. */
html[data-font="easy"] { --rd-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; }
html[data-font="easy"] h1, html[data-font="easy"] h2, html[data-font="easy"] h3,
html[data-font="easy"] .rd-display, html[data-font="easy"] [class*="rd-hero"] h1 {
  text-transform: none !important; letter-spacing: -0.01em !important; font-weight: 750; line-height: 1.15 !important;
}
html[data-font="easy"] body { line-height: 1.75; letter-spacing: 0.005em; }
html[data-font="easy"] p a, html[data-font="easy"] li a:not([class]) { text-decoration: underline; text-underline-offset: 3px; }
html[data-font="easy"] .rd-eyebrow, html[data-font="easy"] [class*="eyebrow"] { text-transform: none; letter-spacing: 0.01em; }

/* ── The Display menu ──────────────────────────────────────── */
.wsa-display { position: relative; }
.wsa-display > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 36px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rd-line-2, var(--dash-border-strong)); color: inherit;
  font: 700 0.85rem/1 var(--rd-sans, var(--dash-font)); user-select: none;
}
.wsa-display > summary::-webkit-details-marker { display: none; }
.wsa-display > summary:hover { border-color: currentColor; }
.wsa-display > summary .wsa-aa { font-size: 1rem; letter-spacing: -0.02em; }
.wsa-display-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; width: 300px; max-width: calc(100vw - 24px);
  padding: 16px; border-radius: 14px; display: grid; gap: 14px; text-align: left;
  background: var(--rd-surface, var(--dash-surface)); color: var(--rd-ink, var(--dash-text));
  border: 1px solid var(--rd-line-2, var(--dash-border-strong)); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.wsa-display-panel h2 { margin: 0; font: 700 1rem/1.2 var(--rd-sans, var(--dash-font)); text-transform: none; letter-spacing: 0; }
.wsa-display-group { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.wsa-display-group legend { padding: 0; margin-bottom: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rd-muted, var(--dash-text-2)); }
.wsa-display-opts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.wsa-display-opts label { position: relative; cursor: pointer; }
.wsa-display-opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wsa-display-opts span {
  display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; font-size: 0.8rem; font-weight: 600;
  border: 1px solid var(--rd-line-2, var(--dash-border-strong)); color: inherit; text-align: center; line-height: 1.2;
}
.wsa-display-opts input:checked + span { border-color: var(--rd-accent-text, var(--dash-accent-text)); box-shadow: inset 0 0 0 1px var(--rd-accent-text, var(--dash-accent-text)); }
.wsa-display-opts input:focus-visible + span { outline: 2px solid var(--rd-accent-text, var(--dash-accent-text)); outline-offset: 2px; }
.wsa-swatch { width: 34px; height: 22px; border-radius: 6px; border: 1px solid rgba(127, 127, 127, 0.5); }
.wsa-swatch--dark { background: linear-gradient(135deg, #0D0F0D 60%, #3450D6 60%); }
.wsa-swatch--light { background: linear-gradient(135deg, #F7F6F2 60%, #0B1B6D 60%); }
.wsa-swatch--navy { background: linear-gradient(135deg, #0B1B6D 60%, #F7F6F2 60%); }
.wsa-display-reset { justify-self: start; background: none; border: 0; padding: 0; color: var(--rd-accent-text, var(--dash-accent-text)); font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; }
@media (max-width: 520px) {
  .wsa-display-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; }
}
@media print { .wsa-display { display: none; } }

/* Signed in, the header carries Front desk / Dashboard / Sign out too; below 1440px drop the
   visitor CTA so nothing (the Aa menu included) is pushed off the right edge. */
@media (max-width: 1439px) { .rd-cta-roomy { display: none !important; } }