/* ── Brand typeface ──────────────────────────────────────────────────────
   Kunstler Script — same font used in the Windows desktop application.
   Single-weight calligraphic font; no bold/italic variants to load.
   ──────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'KunstlerScript';
  src: url('/fonts/KUNSTLER.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =============================================
   FTAnalyzer Web — global styles
   WCAG 2.1 AA compliant
   Target audience: genealogists of all ages,
   including elderly and visually impaired users.
   ============================================= */

/* -----------------------------------------------
   CSS variable overrides for Radzen defaults.
   app.css loads after Radzen's CSS, so :root here
   wins via normal cascade specificity.
   ----------------------------------------------- */
:root {
  color-scheme: light dark; /* Both modes; OS dark preference activates the @media block below */

  /* ── Brand palette (sourced from application logo) ─────────────────────
     --color-* are our semantic design tokens; Radzen --rz-* are set below.

     Contrast ratios measured against --color-bg-main (#F7F8F5):
       #364F29  7.8:1   ✓ AAA  — primary green (text & buttons)
       #2A2723 14.0:1   ✓ AAA  — charcoal body text
       #5C5249  6.3:1   ✓ AAA  — secondary text (darkened bronze)
       #80776D  3.65:1  ✓ non-text only (borders/icons; fails 4.5:1 body text)
       #C7882C  2.88:1  ✗ all  — as-is; darkened to #BE7E24 (3.15:1) for bars
       #BE7E24  3.15:1  ✓ non-text; #2A2723 on #C7882C badge bg = 4.75:1 ✓
  ─────────────────────────────────────────────────────────────────────── */
  --color-primary:       #364F29;  /* Deep Forest Green */
  --color-secondary:     #2A2723;  /* Charcoal Bark — body text */
  --color-accent-warm:   #80776D;  /* Bronze — borders/icons/inactives only */
  --color-accent-action: #C7882C;  /* Deep Amber/Gold — badge/button backgrounds */
  --color-bg-main:       #F7F8F5;  /* Soft Archive White */
  --color-bg-card:       #FFFFFF;  /* Pure white for data panels */
  --color-border:        #E2E4DE;  /* Light green-tinted grey for grids */

  /* 1. Font size
        Radzen default: 0.875rem (14px) — too small for our audience.
        16px base gives WCAG-comfortable reading without zooming. */
  --rz-body-font-size: 1rem;
  --rz-body-line-height: 1.65;

  /* 2. Primary — Deep Forest Green
        #364F29 on #F7F8F5: 7.8:1 (AAA) / white text on primary: 8.4:1 (AAA) */
  --rz-primary:        #364F29;
  --rz-primary-light:  #4a6b39;
  --rz-primary-lighter:#edf2e9;
  --rz-primary-dark:   #293d1f;
  --rz-primary-darker: #1d2b16;

  /* 3. Body & secondary text
        #2A2723 on #F7F8F5: 14:1 (AAA)
        #5C5249 is a darkened warm bronze — 6.3:1 (AAA) for labels/sub-text.
        The brand bronze #80776D achieves only 3.65:1 — acceptable for borders
        and non-text UI elements but NOT for body text. */
  --rz-text-color:           #2A2723;
  --rz-text-secondary-color: #5C5249;

  /* 4. Background & borders */
  --rz-body-background-color: #F7F8F5;
  --rz-base-background-color: #F7F8F5;
  --rz-base-300: #E2E4DE;   /* grid lines, dividers */
  --rz-base-400: #80776D;   /* stronger borders, inactive icons (non-text only) */

  /* 5. Success — Deep Forest Green family
        Same hue as primary; distinguishable by context (health bars, badges).
        White text on success: 8.4:1 (AAA) */
  --rz-success:        #364F29;
  --rz-success-light:  #4a6b39;
  --rz-success-lighter:#edf2e9;
  --rz-success-dark:   #293d1f;
  --rz-success-darker: #1d2b16;

  /* 6. Warning — Deep Amber/Gold
        #C7882C is the brand CTA colour and is used for badge/button backgrounds
        with dark charcoal text (#2A2723 on #C7882C: 4.75:1 ✓ AA).
        For progress bars and non-text UI the slightly darker #BE7E24 is used
        (3.15:1 on white — passes WCAG 1.4.11 non-text).
        Neither shade is suitable as body text on a light background. */
  --rz-warning:        #BE7E24;   /* darkened amber for bars/borders — 3.15:1 */
  --rz-warning-light:  #C7882C;   /* brand CTA amber — badge/button bg only */
  --rz-warning-lighter:#fdf4e3;
  --rz-warning-dark:   #9b6520;
  --rz-warning-darker: #7a4f18;

  /* 7. Danger red — unchanged; strong, accessible
        #b71c1c on white: 6.53:1 (AAA) / white text: 6.53:1 (AAA) */
  --rz-danger:        #b71c1c;
  --rz-danger-light:  #ef5350;
  --rz-danger-lighter:#ffebee;
  --rz-danger-dark:   #7f0000;
  --rz-danger-darker: #650000;
}

/* -----------------------------------------------
   Focus indicators — WCAG 2.4.7 / 2.4.11
   Global: applies to all elements across the app.
   Browsers and component libraries often suppress
   outlines. Restore them explicitly for keyboard
   and AT users.
   ----------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--rz-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Suppress outline for mouse/touch — keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Radzen interactive elements */
.rz-button:focus-visible,
.rz-navigation-item:focus-visible,
.rz-panel-menu-item:focus-visible,
.rz-checkbox:focus-visible,
.rz-dropdown:focus-visible {
  outline: 3px solid var(--rz-primary);
  outline-offset: 3px;
}

/* -----------------------------------------------
   Screen-reader-only utility — WCAG 1.1.1 / 1.3.1
   Visually hidden but accessible to AT.
   ----------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------
   Base typography improvements
   ----------------------------------------------- */
body {
  font-size: 1rem;
  line-height: 1.65;
}

h1 { font-size: 2rem;   line-height: 1.25; }
h2 { font-size: 1.5rem; line-height: 1.3;  }
h3 { font-size: 1.25rem; line-height: 1.35; }

/* Headings are focused programmatically by Blazor's FocusOnNavigate so screen
   readers announce the new page after navigation. They are not keyboard-tabbable
   so a visible focus ring on them is never useful — suppress it. */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
  outline: none;
}

/* -----------------------------------------------
   Privacy Policy / Terms of Service pages
   (Shared across two pages — kept global)
   ----------------------------------------------- */
.policy-page {
  max-width: 800px;
}

.policy-page h1 {
  margin-bottom: 0.25rem;
}

.policy-date {
  color: var(--rz-text-secondary-color);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.policy-page section {
  margin-bottom: 2rem;
}

.policy-page h2 {
  margin-bottom: 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--rz-base-300);
}

.policy-page p {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

.policy-page ul {
  margin: 0.5rem 0 0.75rem 1.5rem;
  line-height: 1.7;
}

.policy-page ul li {
  margin-bottom: 0.375rem;
}

.policy-page a {
  color: var(--rz-primary);
  text-decoration: underline;
}

.policy-page a:hover {
  color: var(--rz-primary-darker);
}

/* -----------------------------------------------
   Blazor error / reconnect UI
   ----------------------------------------------- */
#blazor-error-ui {
  background: #fefce8 !important;
  color: #1a1a1a !important;
  border-top: 3px solid var(--rz-warning);
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
  display: none;
  left: 0;
  padding: 0.75rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-size: 1rem;
}

#blazor-error-ui a {
  color: #1a1a1a !important;
  font-weight: 600;
  text-decoration: underline;
}

#blazor-error-ui .dismiss {
  color: #1a1a1a !important;
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/* ===============================================
   DARK MODE
   Activated automatically when the user's OS or
   browser is set to a dark colour scheme.

   Design approach:
   – Charcoal Bark family (#1A1816 → #2A2723) for
     all backgrounds — drawn from the same logo ink
   – Primary green lightened to #7BAF5A so it reads
     on dark surfaces (7.3:1 on page bg — AAA)
   – Brand amber #C7882C is now fully usable as
     text AND non-text (6.2:1 on page bg — AAA)
   – Danger red lifted to #EF5350 (5.1:1 — AA)
   – All hardcoded light colours patched below
   =============================================== */
@media (prefers-color-scheme: dark) {

  :root {
    color-scheme: dark;

    /* ── Brand tokens (dark-adapted) ─────────────── */
    --color-bg-main:       #1A1816;  /* near-black warm */
    --color-bg-card:       #2A2723;  /* charcoal bark → card surface */
    --color-secondary:     #F2F3EF;  /* light text */
    --color-accent-action: #C7882C;  /* amber — 6.2:1 on bg: AAA */
    --color-accent-warm:   #B5ADA4;  /* warm light grey */
    --color-border:        #3D3832;  /* subtle warm dark border */

    /* ── Backgrounds ─────────────────────────────── */
    --rz-body-background-color: #1A1816;
    --rz-base-background-color: #1A1816;
    --rz-base-100: #242019;  /* log/code panels, subtle insets */
    --rz-base-200: #2D2A25;
    --rz-base-300: #3D3832;  /* grid lines, dividers */
    --rz-base-400: #5C5249;  /* stronger borders */
    --rz-base-500: #80776D;  /* bronze — decorative only */

    /* ── Text ────────────────────────────────────── */
    --rz-text-color:           #F2F3EF;  /* warm near-white — 16:1 (AAA) */
    --rz-text-secondary-color: #B5ADA4;  /* warm light grey — 8.5:1 (AAA) */
    --rz-text-title-color:     var(--rz-text-color);  /* h1/h2/h3 → warm white, not Radzen's #28363c navy */

    /* ── Primary: lightened forest green ─────────── */
    /*    #7BAF5A on #1A1816: 7.3:1 (AAA)             */
    /*    #7BAF5A on #2A2723 card: 5.6:1 (AA)         */
    --rz-primary:        #7BAF5A;
    --rz-primary-light:  #9CC47A;   /* hover → lighter green */
    --rz-primary-lighter:#263318;   /* chip/badge bg → dark tinted green */
    --rz-primary-dark:   #5C9140;
    --rz-primary-darker: #4A7A32;
    --rz-on-primary:         #1A1816;   /* dark text on #7BAF5A: 7.3:1 AAA */
    --rz-on-primary-light:   #1A1816;
    --rz-on-primary-lighter: var(--rz-primary);   /* green text on dark-green chip bg: 5.6:1 */
    --rz-on-primary-dark:    #1A1816;
    --rz-on-primary-darker:  #1A1816;

    /* ── Success: same lightened green ───────────── */
    --rz-success:        #7BAF5A;
    --rz-success-light:  #9CC47A;
    --rz-success-lighter:#263318;
    --rz-success-dark:   #5C9140;
    --rz-on-success:         #1A1816;
    --rz-on-success-light:   #1A1816;
    --rz-on-success-lighter: var(--rz-success);

    /* ── Warning: brand amber, now fully accessible ─ */
    /*    #C7882C on #1A1816: 6.2:1 (AAA)             */
    --rz-warning:        #C7882C;
    --rz-warning-light:  #D99A45;
    --rz-warning-lighter:#2D1E06;   /* dark amber tint for alert bg */
    --rz-warning-dark:   #9B6520;
    --rz-on-warning:         #1A1816;   /* dark text on #C7882C amber: 6.0:1 AAA */
    --rz-on-warning-light:   #1A1816;
    --rz-on-warning-lighter: var(--rz-warning);

    /* ── Danger: lifted red for dark surfaces ─────── */
    /*    #EF5350 on #1A1816: 5.1:1 (AA)              */
    --rz-danger:        #EF5350;
    --rz-danger-light:  #FF7875;
    --rz-danger-lighter:#2D0808;   /* dark red tint for alert bg */
    --rz-danger-dark:   #C62828;
    --rz-on-danger:         #1A1816;   /* dark text on #EF5350: 5.1:1 AA */
    --rz-on-danger-light:   #1A1816;
    --rz-on-danger-lighter: var(--rz-danger);
  }

  /* ── Radzen layout surfaces ──────────────────────── */
  .rz-sidebar {
    background-color: #2A2723;
    border-right: 1px solid #3D3832;
  }

  .rz-header {
    background-color: #1A1816;
    border-bottom: 1px solid #3D3832;
  }

  .rz-card {
    background-color: #2A2723;
    border-color: #3D3832;
  }

  /* ── Link hover on policy pages (stays global — used across 2 pages) ── */
  .policy-page a:hover {
    color: var(--rz-primary-light);
  }

  /* ── Blazor error bar ────────────────────────────── */
  #blazor-error-ui {
    background: #2A1E06 !important;
    color: #F2F3EF !important;
  }

  #blazor-error-ui a,
  #blazor-error-ui .dismiss {
    color: #F2F3EF !important;
  }
}