/* ============================================================
   Avium homepage — Clean & Modern (warm)
   Off-white base, charcoal text, dusty sage accent.
   Inter for body / nav, Playfair Display for serif headlines.
   No monospace chrome, no tight tracking, no `◆` markers.
   ============================================================ */

:root {
  --ivory: #e8e6e3;
  --bone:  #d4d1cd;
  --warm-gray: #b0aca6;
  --sage: #8aa385;          /* dusty sage — warmer than the old neon */
  --sage-dark: #6b8466;
  --sage-deep: #506946;     /* darkest sage — used for light-mode accent */
  --charcoal: #2a2a2a;
  --charcoal-2: #5e5a52;
  --charcoal-3: #a09a8e;

  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Lato', system-ui, -apple-system, sans-serif;
  /* Mono kept as a token for back-compat but should not appear in the public
     UI — `.mono` class below redirects to the body font. */
  --font-mono: var(--font-body);
}

/* Light (default) — the canonical "clean modern" look */
.theme-light {
  --bg: #e8e6e3;             /* neutral-warm light grey — no yellow */
  --bg-2: #d4d1cd;           /* deeper neutral grey for sections */
  --bg-3: #b8b4ae;           /* deepest tier */
  --fg: #2a2a2a;             /* charcoal */
  --fg-2: #4a463e;           /* warm secondary text (darkened) */
  --fg-3: #7a7368;           /* muted/placeholder (darkened — was barely visible) */
  --border: rgba(42, 42, 42, 0.18);
  --border-strong: rgba(42, 42, 42, 0.32);
  --accent: var(--sage-dark);
  --accent-2: var(--sage-deep);
  --glass: rgba(42, 42, 42, 0.06);
  --glass-border: rgba(42, 42, 42, 0.12);
  color-scheme: light;
}

/* Dark — softened editorial dark, not the old dashboard look */
.theme-dark {
  --bg: #1c1a17;             /* warm dark, not green-tinted */
  --bg-2: #25221e;
  --bg-3: #2f2c27;
  --fg: #ece8df;
  --fg-2: #b8b3a7;
  --fg-3: #7a766c;
  --border: rgba(236, 232, 223, 0.08);
  --border-strong: rgba(236, 232, 223, 0.18);
  --accent: var(--sage);
  --accent-2: #b3c4ae;
  --glass: rgba(236, 232, 223, 0.04);
  --glass-border: rgba(236, 232, 223, 0.08);
  color-scheme: dark;
}

/* Make form controls explicitly inherit color-scheme so native dropdowns
   (and the date input clear button) follow the theme. */
select, input[type="date"], input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea {
  color-scheme: inherit;
}

.theme-light select { color-scheme: light; }
.theme-light select option { background-color: #ffffff; color: #2a2a2a; }
.theme-dark  select { color-scheme: dark; }
.theme-dark  select option { background-color: #25221e; color: #ece8df; }

/* flatpickr's altInput is a sibling to the original input. Style it to match
   the rest of the form. Scope to direct child of <label> so we DON'T target
   inputs inside the calendar widget itself (year picker, etc.). */
label > input.flatpickr-input,
label > input.form-control.input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-strong) !important;
  color: var(--fg) !important;
  font-size: 15px !important;
  padding: 10px 0 !important;
  font-family: inherit !important;
  outline: none !important;
  width: 100% !important;
}

/* flatpickr calendar — light theme defaults are mostly fine, just tighten borders */
html[data-theme="light"] .flatpickr-calendar {
  background: #ffffff !important;
  border: 1px solid rgba(42, 42, 42, 0.16) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.10) !important;
  font-family: var(--font-body) !important;
}
html[data-theme="light"] .flatpickr-day.selected,
html[data-theme="light"] .flatpickr-day.selected:hover {
  background: var(--sage) !important; border-color: var(--sage) !important; color: #ffffff !important;
}

html[data-theme="dark"] .flatpickr-calendar {
  background: #25221e !important;
  border: 1px solid rgba(236, 232, 223, 0.18) !important;
  color: #ece8df !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
  font-family: var(--font-body) !important;
}
html[data-theme="dark"] .flatpickr-day { color: #b8b3a7 !important; background: transparent !important; border-color: transparent !important; }
html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.selected:hover {
  background: var(--sage) !important; border-color: var(--sage) !important; color: #1c1a17 !important;
}
html[data-theme="dark"] .flatpickr-day:hover:not(.flatpickr-disabled) {
  background: #2f2c27 !important; border-color: rgba(236, 232, 223, 0.18) !important; color: #ece8df !important;
}
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover {
  color: #7a766c !important; opacity: 0.3 !important; background: transparent !important;
}
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: #ece8df !important; }
html[data-theme="dark"] .flatpickr-current-month .cur-month,
html[data-theme="dark"] .flatpickr-current-month input.cur-year,
html[data-theme="dark"] .flatpickr-weekday { color: #ece8df !important; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }

.homepage {
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.6;
  position: relative;
}

/* `.mono` is kept as a class for back-compat with all the JSX components that
   reference it, but it now renders as the body font with normal letter
   spacing. Anywhere a tight monospace label used to appear, it's now a small
   sans-serif label — no more dashboard chrome. */
.mono {
  font-family: var(--font-body);
  font-feature-settings: normal;
  letter-spacing: 0;
  text-transform: none;
}
.serif { font-family: var(--font-heading); }

/* `.eyebrow` retains its semantic role as a small section label, but loses
   the uppercase + 0.18em tracking + monospace look. Now: small sans, modest
   tracking, sentence case. Components that pass it `◆ TITLE` strings get the
   leading diamond stripped in SignalChrome.jsx so the text reads cleanly. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--accent);
}

button, a { font-family: inherit; }

.homepage::-webkit-scrollbar { width: 0; height: 0; }

/* ============================================================
   Subtle interactive polish — lifts, shadows, gentle glow.
   Restraint matters: hover effects use only properties NOT set
   inline (transform, box-shadow, filter, opacity) so CSS doesn't
   need !important to win against React's inline styles.
   ============================================================ */

.homepage a,
.homepage button,
.homepage input,
.homepage textarea,
.homepage select {
  transition:
    transform 180ms ease,
    box-shadow 200ms ease,
    filter 180ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

/* Buttons — signalBtnPrimary/Ghost share the same padding (13px 24px); the
   per-package "Quote basic/mid/premium" buttons use 12px 18px. Both lift,
   pick up a soft shadow, and brighten just slightly on hover. */
.homepage a[style*="padding: 13px 24px"]:hover,
.homepage a[style*="padding: 12px 18px"]:hover,
.homepage button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(42, 42, 42, 0.10);
  filter: brightness(1.04);
}
.theme-dark .homepage a[style*="padding: 13px 24px"]:hover,
.theme-dark .homepage a[style*="padding: 12px 18px"]:hover,
.theme-dark .homepage button[type="submit"]:hover:not(:disabled) {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  filter: brightness(1.10);
}

/* Nav links — gentle opacity dip on hover (non-inline so it always applies). */
.homepage nav a:hover { opacity: 0.72; }

/* FAQ disclosure buttons (have aria-expanded) — soft background tint on hover. */
.homepage button[aria-expanded]:hover { background: var(--bg-2); }

/* List-row anchors (the dashboard's "card-row" cousins on the portal) lift
   gently on hover. Matched via display:flex + border-radius inline. */
.homepage a[style*="display: flex"][style*="border-radius"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(42, 42, 42, 0.06);
}
.theme-dark .homepage a[style*="display: flex"][style*="border-radius"]:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

/* Card containers — package cards, market cards, credential cards. They use
   border-radius: 8 inline. A faint shadow on hover signals interactivity for
   the cards that link to a quote/contact action without being loud. The
   :has() selector limits this to cards that actually contain a CTA link. */
.homepage div[style*="border-radius: 8"][style*="border: 1px solid var(--border)"]:has(a):hover {
  box-shadow: 0 10px 30px rgba(42, 42, 42, 0.06);
}
.theme-dark .homepage div[style*="border-radius: 8"][style*="border: 1px solid var(--border)"]:has(a):hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
}

/* Hero "lighting" — a soft warm radial wash that very slowly drifts across
   the top of the first section on each page. The pseudo-element is what
   moves; the section itself stays still. ~50s loop is slow enough to feel
   ambient (you notice it only if you stare). */
.homepage section:first-of-type {
  position: relative;
  overflow: hidden;
}
.homepage section:first-of-type::before {
  content: '';
  position: absolute;
  inset: -10% -25% 50% -25%;
  background: radial-gradient(
    ellipse 50% 100% at 30% 0%,
    rgba(138, 163, 133, 0.07),
    transparent 70%
  );
  animation: hero-sun-drift 48s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.theme-dark .homepage section:first-of-type::before {
  background: radial-gradient(
    ellipse 50% 100% at 30% 0%,
    rgba(138, 163, 133, 0.12),
    transparent 70%
  );
}
.homepage section:first-of-type > * {
  position: relative;
  z-index: 1;
}
@keyframes hero-sun-drift {
  0%, 100% { transform: translateX(-3%); }
  50%      { transform: translateX(3%); }
}

/* Sections fade up gently as they enter the viewport. The class is added by
   shared/interactions.jsx on script load, so there's no flash of invisibility
   for sections already on screen at first paint (those get is-visible
   immediately and skip the animation). */
.fade-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.fade-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fade-on-scroll, .fade-on-scroll.is-visible {
    opacity: 1; transform: none; transition: none;
  }
  .homepage section:first-of-type::before {
    animation: none;
  }
}

/* ============================================================
   Responsive overrides.
   Page components use React inline styles, so we target the
   rendered `style="…"` substrings to override layout at smaller
   widths. Breakpoints:
     ≤880px  — tablet / large phone (matches nav's mobile cutoff)
     ≤640px  — phone
   ============================================================ */

@media (max-width: 880px) {
  /* Section padding — pull horizontal in tight, ease vertical. */
  .homepage section[style*="padding: 110px 48px"],
  .homepage section[style*="padding: 96px 48px 80px"],
  .homepage section[style*="padding: 88px 48px 80px"],
  .homepage section[style*="padding: 90px 48px"],
  .homepage section[style*="padding: 72px 48px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 72px !important;
    padding-bottom: 64px !important;
  }
  .homepage section[style*="padding: 72px 48px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Footer: pull padding in; collapse 4-col strip to 2-col. */
  .homepage footer[style*="padding: 64px 48px 36px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 48px !important;
  }
  .homepage footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .homepage footer div[style*="justify-content: space-between"] {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Multi-column grids — 3/4 cols become 2 at tablet; 2 col stacks. */
  .homepage div[style*="grid-template-columns: repeat(3, 1fr)"],
  .homepage div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .homepage div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Asymmetric splits (hero, about, contact, product block) stack. */
  .homepage div[style*="grid-template-columns: 1.1fr 1fr"],
  .homepage div[style*="grid-template-columns: 5fr 7fr"],
  .homepage div[style*="grid-template-columns: 8fr 4fr"],
  .homepage div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Portrait/event-photo placeholders shouldn't dominate when stacked. */
  .homepage div[style*="aspect-ratio: 4 / 5"],
  .homepage div[style*="aspect-ratio: 4/5"] {
    max-width: 360px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
  }

  /* Section heads — tighten gap on the eyebrow/tagline pair. */
  .homepage div[style*="gap: 60px"][style*="grid-template-columns: 1fr"] {
    gap: 20px !important;
  }

  /* Product block icon panel — its 480 minHeight is fine, but pull
     padding in so the SVG isn't hugging the edge of the screen. */
  .homepage div[style*="padding: 56px 48px"] {
    padding: 48px 24px !important;
    min-height: 320px !important;
  }
  .homepage div[style*="padding: 48px 44px"] {
    padding: 36px 24px !important;
  }
  .homepage div[style*="padding: 44px 44px"],
  .homepage div[style*="padding: 44px 40px"] {
    padding: 32px 24px !important;
  }

  /* Mailing list (Software page): left panel has border-right which dangles
     off the right edge once the grid stacks. Swap it for a bottom divider. */
  .homepage div[style*="border-right: 1px solid var(--border)"][style*="padding: 44px 40px"] {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
}

@media (max-width: 640px) {
  /* Phone: tighter horizontal padding, shorter vertical rhythm. */
  .homepage section[style*="padding: 110px 48px"],
  .homepage section[style*="padding: 96px 48px 80px"],
  .homepage section[style*="padding: 88px 48px 80px"],
  .homepage section[style*="padding: 90px 48px"],
  .homepage section[style*="padding: 72px 48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
    padding-bottom: 52px !important;
  }
  .homepage footer[style*="padding: 64px 48px 36px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .homepage footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Collapse remaining multi-col grids to a single column. */
  .homepage div[style*="grid-template-columns: repeat(3, 1fr)"],
  .homepage div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Cards — shrink their internal padding a touch. */
  .homepage div[style*="padding: 32px 28px"],
  .homepage div[style*="padding: 32px 30px"],
  .homepage div[style*="padding: 28px 24px"] {
    padding: 24px 20px !important;
  }
  .homepage div[style*="padding: 24px 22px"] {
    padding: 20px 18px !important;
  }
  .homepage div[style*="padding: 36px 32px"] {
    padding: 24px 20px !important;
  }
  .homepage div[style*="padding: 44px 44px"],
  .homepage div[style*="padding: 44px 40px"] {
    padding: 26px 20px !important;
  }
  .homepage div[style*="padding: 48px 44px"] {
    padding: 28px 20px !important;
  }

  /* Package cards' fixed minHeight wastes space when stacked. */
  .homepage div[style*="min-height: 480px"] {
    min-height: 0 !important;
  }

  /* FAQ disclosure headers + bodies — shrink horizontal padding. */
  .homepage button[aria-expanded][style*="padding: 22px 28px"] {
    padding: 18px 18px !important;
  }
  .homepage div[style*="padding: 0 28px 22px 28px"] {
    padding: 0 18px 18px 18px !important;
  }

  /* Comparison table — cells get crowded with 4 cols at phone width. */
  .homepage table { font-size: 12px; }
  .homepage th[style*="padding: 18px 22px"] {
    padding: 12px 8px !important;
  }
  .homepage td[style*="padding: 16px 22px"] {
    padding: 12px 8px !important;
  }

  /* Nav: the inner button is already 40px; tighten ring spacing
     so the logo doesn't crowd the menu icon on very narrow phones. */
  .homepage nav[style*="padding: 14px 20px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero headline wraps better on small screens with a tiny lineHeight bump. */
  .homepage h1.serif {
    line-height: 1.08 !important;
  }

  /* Bio name h3 (fontSize: 40, fixed) is too heavy on phone; shrink it. */
  .homepage h3.serif[style*="font-size: 40px"] {
    font-size: 30px !important;
  }
  /* The promise pull-quote eats horizontal room via paddingLeft: 22 — pull in. */
  .homepage p.serif[style*="border-left: 2px solid var(--accent)"] {
    padding-left: 16px !important;
    font-size: 19px !important;
  }

  /* iOS Safari zooms in on focus when input font-size < 16. Bump form
     fields to 16px on phone so the page doesn't jump during typing. */
  .homepage input[type="text"],
  .homepage input[type="email"],
  .homepage input[type="tel"],
  .homepage input[type="number"],
  .homepage input[type="date"],
  .homepage select,
  .homepage textarea {
    font-size: 16px !important;
  }

  /* Long unbreakable strings (URLs, emails) shouldn't blow out narrow cards. */
  .homepage p, .homepage li, .homepage h1, .homepage h2, .homepage h3, .homepage h4 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Comparison table — if cell wrapping still looks rough on the narrowest
     phones, let the table scroll horizontally rather than crushing. */
  .homepage section > div > div[style*="overflow: hidden"][style*="border-radius: 8"]:has(> table) {
    overflow-x: auto !important;
  }
  .homepage table { min-width: 100%; }
}