/* ========================================
   VHSA Design System
   Vision & Hearing Screening of Austin
   ======================================== */

/* --- Design Tokens --- */
:root {
  /* Brand Colors */
  --color-primary: #1E3A8A;
  --color-primary-light: #2D54C4;

  /* Accent */
  --color-accent: #FFB84D;
  --color-accent-hover: #E6A030;
  --color-accent-light: #FFD699;

  /* Text */
  --color-heading: #1a2e6e;
  --color-body: #2C3E50;
  --color-muted: #64748b;

  /* Surfaces */
  --color-surface: #F0F4FF;
  --color-surface-warm: #F8FAFF;
  --color-white: #FFFFFF;

  /* Footer */
  --color-footer-bg: #1E3A8A;

  /* Borders */
  --color-border: #E2E8F0;

  /* Typography */
  --font-heading: 'DM Serif Display', serif;
  --font-body: 'Source Sans 3', sans-serif;
}

/* --- Font Classes --- */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

/* --- Gradient Backgrounds --- */
.hero-gradient {
  background: linear-gradient(135deg, #EEF2FF 0%, #E8EFFE 50%, #F0F4FF 100%);
}

.cta-gradient {
  background: linear-gradient(135deg, #1E3A8A 0%, #2D54C4 100%);
}

/* --- Smooth Transitions --- */
.transition-all {
  transition: all 0.3s ease;
}

/* --- Card Hover Lift --- */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* --- Navigation Scroll Effect --- */
.nav-scrolled {
  background-color: rgba(240, 244, 255, 0.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

/* --- Mobile Menu Animation --- */
.mobile-menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.mobile-menu.open {
  transform: translateX(0);
}

/* --- Button Micro-interactions --- */
.btn-primary {
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 184, 77, 0.4);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-outline {
  transition: all 0.2s ease;
}
.btn-outline:hover {
  transform: translateY(-1px);
}

/* --- Link Underline Animation --- */
.link-animated {
  position: relative;
  text-decoration: none;
}
.link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width 0.25s ease;
}
.link-animated:hover::after {
  width: 100%;
}

/* --- Trust Indicator Stat Numbers --- */
.stat-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

/* --- Blog Editorial Typography --- */
.prose-editorial {
  max-width: 65ch;
  line-height: 1.8;
  font-size: 1.125rem;
}
.prose-editorial p {
  margin-bottom: 1.5em;
}
.prose-editorial h2 {
  font-family: var(--font-heading);
  margin-top: 2.5em;
  margin-bottom: 0.75em;
}
.prose-editorial h3 {
  font-family: var(--font-heading);
  margin-top: 2em;
  margin-bottom: 0.5em;
}
.prose-editorial ul,
.prose-editorial ol {
  margin-bottom: 1.5em;
}

/* --- Placeholder Image Styling --- */
.placeholder-image {
  background-color: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-weight: 500;
  border-radius: 0.5rem;
}