/**
 * global.css — Light, caregiver-friendly design system for HealthRankings.com
 *
 * Direction: calm healthcare / modern data transparency
 * Audience: adult children, caregivers, spouses, seniors
 *
 * Accessibility intent:
 * - WCAG 2.1 AA-oriented color contrast for core text, links, focus states, and UI surfaces
 * - Light mode by default for readability and trust
 * - Clear focus indicators for keyboard users
 * - Reduced motion support
 *
 * Note:
 * Several Astro component styles currently include hard-coded dark-mode values
 * such as rgba(255,255,255,...) and dark backgrounds. This file includes
 * global override rules for the current components, but the cleaner long-term
 * approach is to move those component colors to CSS variables.
 */

/* ── Design tokens ────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Page + surfaces */
  --color-bg: #f7faf8;
  /* warm healthcare white */
  --color-surface-1: #ffffff;
  --color-surface-2: #ffffff;
  --color-surface-3: #edf4f1;
  --color-surface-muted: #f1f6f4;

  /* Borders and dividers */
  --color-border: #d8e5df;
  --color-border-strong: #b7cfc5;

  /* Text — AA contrast on white/light backgrounds */
  --color-text-primary: #18322b;
  /* deep green-charcoal */
  --color-text-secondary: #3e5a50;
  --color-text-muted: #667b73;

  /* Brand/accent — teal-blue, AA against white when used as text */
  --color-accent: #0b6f7a;
  --color-accent-hover: #084f57;
  --color-accent-subtle: #e4f4f3;
  --color-accent-border: #a8d8d4;

  /* Secondary accent */
  --color-blue: #2563eb;
  --color-blue-subtle: #eaf2ff;

  /* Semantic colors — tuned for light background */
  --color-success: #13795b;
  --color-success-bg: #e8f6ef;
  --color-success-border: #a9dcc7;

  --color-warning: #9a5b00;
  --color-warning-bg: #fff6df;
  --color-warning-border: #f2cf83;

  --color-danger: #b42318;
  --color-danger-bg: #fff0ed;
  --color-danger-border: #f4b0a9;

  /* Ratings */
  --color-star: #b7791f;
  --color-star-empty: #c7d3cd;

  /* Tables & interactive */
  --color-table-header-bg: #f1f6f4;
  --color-surface-hover: #f8fbfa;
  --color-tooltip-bg: #ffffff;
  --color-tooltip-text: #18322b;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Outfit', var(--font-sans);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Shadows — soft, not SaaS-heavy */
  --shadow-sm: 0 1px 2px rgba(24, 50, 43, 0.06);
  --shadow-md: 0 6px 18px rgba(24, 50, 43, 0.08);
  --shadow-lg: 0 14px 36px rgba(24, 50, 43, 0.12);

  /* Layout rhythm */
  --content-max: 1280px;
}

/* ── CSS Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse at 8% 0%, rgba(11, 111, 122, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 88% 8%, rgba(19, 121, 91, 0.045) 0%, transparent 45%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ───────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

p {
  line-height: 1.65;
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration-thickness: 2px;
}

strong {
  color: var(--color-text-primary);
}

/* ── Focus styles — WCAG visible focus ────────────────────────── */
:focus-visible {
  outline: 3px solid #0b6f7a;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Selection ────────────────────────────────────────────────── */
::selection {
  background: #c9ebe7;
  color: var(--color-text-primary);
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #edf4f1;
}

::-webkit-scrollbar-thumb {
  background: #b7cfc5;
  border-radius: 999px;
  border: 2px solid #edf4f1;
}

::-webkit-scrollbar-thumb:hover {
  background: #8fb6a8;
}

/* ── Utility: screen-reader only ──────────────────────────────── */
.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;
}

/* ── Main content ─────────────────────────────────────────────── */
#main-content {
  min-height: calc(100vh - 64px - 300px);
}



/* High contrast / forced colors support */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
  }

  a {
    text-decoration: underline;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Print */
@media print {
  body {
    background: #ffffff;
    color: #000000;
  }

  .site-header,
  .site-footer,
  .header-search,
  .facility-map-section {
    display: none !important;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  .facility-header,
  .key-facts,
  .decision-summary,
  .signals-card,
  .metric-card,
  .staffing-context,
  .inspections-enforcement,
  .nearby-facilities,
  .facility-faq,
  .data-notice {
    box-shadow: none !important;
    border: 1px solid #cccccc !important;
  }
}