/*
 * Pure Air Alabama — Design System
 * Colors & Type
 *
 * Source of truth: brand colors taken from the official Pure Air Alabama
 * wordmark — a three-stroke "air current" swoosh (navy / sky / navy) with
 * "Pure Air Alabama" set in a clean rounded grotesque.
 *
 * Primary brand color (swoosh sky blue):  #00ACFF
 * Brand navy (wordmark + swoosh anchor):  #002C6B
 *
 * Type, scale, radii, shadow and motion tokens are inherited from the
 * parent design system this brand was adapted from.
 *
 * Use: link this file from any HTML file in this project to inherit the brand.
 *   <link rel="stylesheet" href="../colors_and_type.css">
 *
 * Plus Jakarta Sans   = body / UI. Rounded, airy — echoes the wordmark's
 *                       soft grotesque letterforms.
 * Schibsted Grotesk   = display headings. A confident modern grotesque
 *                       that reads as clean-air / clinical-trust rather
 *                       than editorial; pairs with the logo's geometry.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  /* ── Brand color ───────────────────────────────────────────────── */
  --color-brand-primary:   #00ACFF;   /* Pure Air Alabama sky blue — the swoosh's center stroke. */
  --color-brand-secondary: #002C6B;   /* Brand navy — the wordmark + outer swoosh strokes. Use for navbar bg, footer bg, primary CTA fills, gradient text endpoints on light surfaces. */

  /* Tonal variants of the brand blues, derived for hover/press,
     overlays, tinted surfaces, and the deeper tones needed for accessible
     text/CTA contrast against white. */
  /* Brand-blue scale — deep tones derive from the logo navy (#002C6B,
     ~215°); light tones derive from the sky stroke (#00ACFF, ~200°). So
     the dark gradient reads as "the logo's navy, deepened" and the pale
     washes read as "the sky stroke, diluted". */
  --color-brand-primary-950:   #021733;  /* Deepest brand navy — footer, mission bg, dark band end-stop */
  --color-brand-primary-900:   #01224D;  /* Deep brand navy — closing CTA bg, surface dark anchor */
  --color-brand-primary-800:   #002C6B;  /* The logo navy itself — mid-stop in dark gradient */
  --color-brand-primary-700:   #00509E;  /* CTA fill / hover-press / text gradient end on light bg */
  --color-brand-primary-500:   #0081CF;  /* Mid brand blue — link hover, lifted gradient stop */
  --color-brand-primary-400:   #0095DE;  /* Lifted brand blue — soft hover, gradient transition */
  --color-brand-primary-300:   #00ACFF;  /* Logo sky — the brand color itself (swoosh center). */
  --color-brand-primary-200:   #BFE9FF;  /* Pale sky wash — pill bg, soft surface tint. */
  --color-brand-primary-100:   #EBF7FF;  /* Lightest sky wash — gradient bottom, surface bg. */
  --color-brand-secondary-900: #021024;  /* Deepest navy — pressed */
  --color-brand-secondary-700: #002C6B;  /* Default navy (same as --color-brand-secondary). */
  --color-brand-secondary-500: #1A4480;  /* Lifted navy — hover */
  --color-brand-secondary-100: #E4EAF4;  /* Pale navy tint — chip background */

  /* Logo gradient — the swoosh's sky → pale sweep.
     This is the brand's most recognisable visual stamp; reserve for
     soft surface bands, eyebrow washes, and TEXT GRADIENTS ON DARK
     BACKGROUNDS ONLY. For text on light surfaces, use --gradient-brand-deep. */
  --gradient-brand:        linear-gradient(135deg, #00ACFF 0%, #C7ECFF 100%);

  /* Dark band variant — the brand's ONE dark gradient.
     Starts at the deepest navy, passes through the logo navy itself at
     60%, then lifts toward a saturated mid-blue. The intermediate stop
     keeps the interpolation inside the navy family so neither buttons
     nor short text spans show cyan/teal mid-tones. */
  --gradient-brand-dark:   linear-gradient(135deg, #021733 0%, #002C6B 60%, #0066B8 100%);

  /* Compact-element variant of the dark gradient — same navy family,
     same start point, but TRIMMED before the bright lift. Use for
     buttons, text emphasis (.t-gradient), small numbered circles, bar
     fills, map pin icons — anywhere the rendered element is small
     enough that the lifted end would dominate the visible area. Large
     surfaces keep --gradient-brand-dark so the full sweep still lands
     near the sky stroke. */
  --gradient-brand-deep:   linear-gradient(135deg, #021733 0%, #002C6B 60%, #00509E 100%);

  /* Accent gradient — the swoosh sky, the bright direction.
     For TEXT GRADIENTS ON DARK BACKGROUNDS (e.g. inside the dark
     "Home health specialists" or mission sections). */
  --gradient-accent:       linear-gradient(90deg, #00ACFF 0%, #7FD4FF 60%, #D6F2FF 100%);

  /* Hero radial accents — pure logo-hue family. */
  --gradient-hero-accent:  radial-gradient(circle at 80% 20%, rgba(0,172,255,0.16), transparent 40%);
  --gradient-hero-accent-2:radial-gradient(circle at 12% 90%, rgba(0,80,158,0.18), transparent 45%);

  /* ── Text ──────────────────────────────────────────────────────── */
  --color-text-primary:    #0f1b2d;   /* All headings, primary body. <body> color — slate pulled toward the brand navy. */
  --color-text-secondary:  #5b6b80;   /* Lead paragraphs, descriptions under headings. */
  --color-text-tertiary:   #94a3b8;   /* Muted metadata, eyebrow micro-labels. (slate-400) */
  --color-text-body:       #44546a;   /* Secondary button text. */
  --color-text-inverse:    #ffffff;   /* Text on gradient or dark backgrounds. */

  /* ── Surface ───────────────────────────────────────────────────── */
  --color-surface-app:     #f6f9fc;   /* App background — cool off-white with the faintest sky warmth. <body> + App root. */
  --color-surface-section: #fafcfe;   /* Alternate section background. */
  --color-surface-card:    #ffffff;   /* Card backgrounds, navbar fill (under glass). */
  --color-surface-subtle:  #EBF7FF;   /* Icon-chip backgrounds (sky tint). */
  --color-surface-subtle-2:#E4EAF4;   /* Alternate icon-chip background (navy tint), use sparingly. */

  /* ── Border ────────────────────────────────────────────────────── */
  --color-border-subtle:    #f0f4f9;  /* Default card and divider border. */
  --color-border-default:   #e1e8f0;  /* Section dividers, secondary button border. */
  --color-border-brand-30:  rgba(0, 44, 107, 0.30); /* Card border on hover. */
  --color-border-accent-30: rgba(0, 44, 107, 0.22);   /* Alt accent border, used sparingly. */

  /* ── Status / accent ───────────────────────────────────────────── */
  --color-status-success:  #16a34a;   /* Independent success green (brand is blue-only, so success stays neutral). */
  --color-status-danger:   #f43f5e;   /* rose-500. Comparison-table X marks. */
  --color-accent-gold:     #fbbf24;   /* Star ratings (filled). */

  /* ── Glass / overlays ──────────────────────────────────────────── */
  --color-glass-bg:          rgba(255, 255, 255, 0.85);
  --color-glass-border:      rgba(255, 255, 255, 0.50);
  --color-glass-bg-dark:     rgba(255, 255, 255, 0.10);
  --color-glass-border-dark: rgba(255, 255, 255, 0.20);

  /* ── White-alpha scale (for use on dark sections) ──────────────
     One tier per role. If a new opacity is needed, add a token here
     rather than hand-rolling rgba(255,255,255,X) inline. */
  --color-white-grid:        rgba(255, 255, 255, 0.04);  /* grid-pattern overlays */
  --color-white-surface:     rgba(255, 255, 255, 0.06);  /* glass-card fill on dark */
  --color-white-surface-hi:  rgba(255, 255, 255, 0.10);  /* hover state for above */
  --color-white-border:      rgba(255, 255, 255, 0.14);  /* glass-card border */
  --color-white-border-hi:   rgba(255, 255, 255, 0.28);  /* hover state border */
  --color-white-divider:     rgba(255, 255, 255, 0.18);  /* hero-trust dividers */
  --color-white-outline:     rgba(255, 255, 255, 0.55);  /* ghost-button outline */
  --color-white-text-muted:  rgba(255, 255, 255, 0.72);  /* body text on dark */
  --color-white-text-lead:   rgba(255, 255, 255, 0.85);  /* lead text on dark */

  /* ── Typography: family ────────────────────────────────────────── */
  --font-family-sans:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-family-display: "Schibsted Grotesk", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;   /* Confident modern grotesque — used for h1/h2 display headings. */
  --font-family-script:  var(--font-family-display);   /* No script accent in the Pure Air Alabama brand — alias kept for compatibility. */
  /* Legacy alias retained for any code still referencing --font-family-slab. */
  --font-family-slab:    var(--font-family-display);

  /* ── Typography: weight ────────────────────────────────────────── */
  --font-weight-regular:   400;
  --font-weight-medium:    500;   /* Body, descriptions */
  --font-weight-bold:      700;   /* Strong text, button text */
  --font-weight-extrabold: 800;   /* Emphasized labels, eyebrows */
  --font-weight-black:     900;   /* All headlines. **Default for display.** */

  /* ── Typography: scale (desktop values) ────────────────────────── */
  --font-size-h1:         4.2rem;     /* 67.2px */
  --font-size-h2:         3rem;       /* 48px */
  --font-size-h3:         2.25rem;    /* 36px */
  --font-size-lead:       1.25rem;    /* 20px */
  --font-size-body:       1.125rem;   /* 18px */
  --font-size-body-small: 0.9375rem;  /* 15px */
  --font-size-button:     1rem;       /* 16px desktop / 11–13px nav buttons */
  --font-size-eyebrow:    0.6875rem;  /* 11px */

  /* ── Typography: tracking ──────────────────────────────────────── */
  --tracking-display: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-body:    -0.01em;
  --tracking-label:   0.10em;
  --tracking-eyebrow: 0.40em;

  /* ── Typography: leading ───────────────────────────────────────── */
  --leading-display: 1.05;
  --leading-heading: 1.10;
  --leading-tight:   1.25;
  --leading-body:    1.625;

  /* ── Spacing & layout ──────────────────────────────────────────── */
  --container-max:        1400px;
  --container-max-wide:   1440px;
  --container-pad-x-mob:  1rem;
  --container-pad-x-tab:  1.5rem;
  --container-pad-x-desk: 2rem;

  --section-py-compact:  5rem;
  --section-py-default:  7rem;
  --section-py-spacious: 8rem;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --radius-button:  1.8rem;
  --radius-card:    3rem;
  --radius-card-lg: 3.5rem;
  --radius-hero:    4.5rem;
  --radius-pill:    9999px;
  --radius-sm:      0.75rem;
  --radius-md:      1rem;

  /* ── Shadows ───────────────────────────────────────────────────── */
  --shadow-subtle:       0 4px 20px rgba(2,23,51,0.02);
  --shadow-glass:        0 10px 30px -10px rgba(2,23,51,0.05);
  --shadow-card:         0 20px 50px -15px rgba(2,23,51,0.04);
  --shadow-menu:         0 30px 60px -15px rgba(2,23,51,0.10);
  --shadow-card-hover:   0 40px 80px -20px rgba(2,23,51,0.06);
  --shadow-image:        0 50px 100px -20px rgba(2,23,51,0.10);
  --shadow-image-large:  0 60px 120px -30px rgba(2,23,51,0.15);
  --shadow-brand-button: 0 15px 30px -5px rgba(0,44,107,0.40);
  --shadow-accent-button:0 15px 30px -5px rgba(0,44,107,0.35);

  /* ── Motion ────────────────────────────────────────────────────── */
  --duration-standard:  300ms;

  --ease-out:   ease-out;
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ──────────────────────────────────────────────────────── */

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-sans);
  background-color: var(--color-surface-app);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: #BFE9FF;        /* pale sky */
  color:      #002C6B;        /* brand navy */
}

/* ── Semantic typography classes ───────────────────────────────── */
/* Use these for "set me a heading"-style needs without thinking about
   tracking/leading/weight every time.                              */

.t-h1,
h1 {
  font-family: var(--font-family-display);
  font-size: clamp(2.25rem, 4.5vw + 0.5rem, var(--font-size-h1));
  font-weight: 800;                        /* Schibsted reads confident at 800 — 900 crowds the counters. */
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  margin: 0;
}

.t-h2,
h2 {
  font-family: var(--font-family-display);
  font-size: clamp(2rem, 3.5vw + 0.5rem, var(--font-size-h2));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--color-text-primary);
  margin: 0;
}

.t-h3,
h3 {
  font-size: clamp(1.5rem, 2vw + 0.5rem, var(--font-size-h3));
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.t-lead {
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  margin: 0;
}

.t-body,
p {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
  color: var(--color-text-body);
  margin: 0;
}

.t-eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-secondary);
}

.t-button {
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
}

.t-mono { /* not in the brand; exposed for code samples in tooling only */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The signature gradient text used on the differentiator phrase in
   display headlines. Reserve for the brand name or differentiator —
   never for a full sentence. Default uses the navy gradient; pair the
   `.t-gradient-accent` modifier when the phrase sits on a dark band
   and wants the bright sky family instead. */
.t-gradient {
  background-image: var(--gradient-brand-deep);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Use when you want the actual logo gradient (sky → pale) behind text.
   Only readable on DARK backgrounds. */
.t-gradient-soft {
  background-image: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.t-gradient-accent {
  background-image: var(--gradient-accent);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ── Brand utilities ───────────────────────────────────────────── */
/* Button definitions (.btn-brand, .btn-accent, .btn-secondary) live in
   site.css. Don't redeclare them here — site.css loads second and the
   richer version wins anyway. */

.text-brand  { color: var(--color-brand-primary-700); }      /* readable on white — use --color-brand-primary itself only on dark surfaces */
.text-accent { color: var(--color-brand-secondary); }
.t-slab      { font-family: var(--font-family-slab);   font-weight: 800; letter-spacing: var(--tracking-tight); }
.t-script    { font-family: var(--font-family-display); font-weight: 800; letter-spacing: var(--tracking-tight); }   /* Legacy hook — the PAA brand has no script face. */

/* Brand wordmark — inline lockup for headlines or footers. The Pure Air
   Alabama wordmark is a single grotesque voice; no mixed faces. */
.brand-wordmark {
  font-family: var(--font-family-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-brand-secondary);
}

.glass-panel {
  background-color: var(--color-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-glass);
}

@keyframes pm-marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: flex;
  width: max-content;
  animation: pm-marquee 80s linear infinite;
}
.animate-marquee:hover { animation-play-state: paused; }

@keyframes pm-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping {
  animation: pm-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pm-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: pm-fade-up 700ms var(--ease-out) both;
}