/* ==========================================================================
   CareFirst Dental Clinic - Base CSS & Typography System
   Bold, Crisp, High-Contrast Typography
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--cf-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-weight: 500; /* Robust, bold-reading body weight */
  color: var(--cf-text-primary, #0F172A);
  background-color: var(--cf-bg-light, #F8FAFC);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Paragraphs & Normal Descriptions (Solid Font-Weight) */
p {
  font-weight: 500;
  color: #1E293B;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.lead {
  font-weight: 500;
  font-size: 1.2rem;
  color: #1E293B;
  line-height: 1.75;
}

.text-muted {
  color: #475569 !important; /* Darker, high-contrast readable slate */
  font-weight: 500 !important;
}

strong, b, .fw-bold {
  font-weight: 700 !important;
  color: #0F172A;
}

.fw-semibold {
  font-weight: 600 !important;
}

/* Headings with Outfit Font (Bold & Sharp) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--cf-font-head, 'Outfit', sans-serif);
  color: var(--cf-navy, #0B2545);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
  color: var(--cf-primary, #0284C7);
  font-weight: 600;
  transition: var(--cf-transition);
}

a:hover {
  color: var(--cf-primary-dark, #0369A1);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cf-primary);
  outline-offset: 2px;
}

/* Typography Hierarchy Scale */
.display-1 { font-size: clamp(2.5rem, 5vw, 4.25rem); font-weight: 800; }
.display-2 { font-size: clamp(2.25rem, 4.5vw, 3.75rem); font-weight: 800; }
.display-3 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; }
.display-4 { font-size: clamp(1.85rem, 3.5vw, 2.75rem); font-weight: 800; }

h1, .h1 { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; }
h2, .h2 { font-size: clamp(1.65rem, 2.5vw, 2.15rem); font-weight: 800; }
h3, .h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 700; }
h4, .h4 { font-size: 1.25rem; font-weight: 700; }
h5, .h5 { font-size: 1.1rem; font-weight: 700; }
h6, .h6 { font-size: 0.95rem; font-weight: 700; }

/* Custom Badge Pill */
.cf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--cf-radius-full);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--cf-primary-light);
  color: var(--cf-primary-dark);
  border: 1px solid rgba(2, 132, 199, 0.2);
}

.cf-badge-gold {
  background: #FEF3C7;
  color: #B45309;
  border-color: #FDE68A;
}

.cf-badge-danger {
  background: #FEE2E2;
  color: #B91C1C;
  border-color: #FECACA;
}

/* ==========================================================================
   Mobile Reliability & Cross-Platform Fixes (iOS Safari, Android, iPadOS)
   ========================================================================== */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}

/* Responsive Embeds & Videos */
iframe, video, object, embed {
  max-width: 100%;
}

.ratio-16x9 {
  aspect-ratio: 16 / 9;
}

.ratio-9x16 {
  aspect-ratio: 9 / 16;
}

/* Fix iOS Safari input auto-zoom: inputs must have min 16px font-size on mobile */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Smooth momentum scrolling for iOS touch */
.scroll-touch,
.cf-filters-scroll {
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}