/* ============================================================
   OakMD Shared UI Token & Component Alignment
   Overrides main.css and commerce.css with homepage visual language
   ============================================================ */

/* 1. Typography */
:root {
  --font-base: Inter, system-ui, -apple-system, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --warm-ivory: #FAF9F6;
  --charcoal: #181816;
  --muted-gold: #7A5C22;
  --text-muted: #4A4844;
  --max-width: 1240px;
  
  --radius-sm: 4px;
  --radius: 4px;
  --radius-lg: 8px;
}

body {
  font-family: var(--font-base);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3,
.picker-title,
.start-page h1,
.hero h1,
.hero-light-inner h1,
.page-intro h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em; /* match --oak-tracking-display */
}

h4, h5, h6,
.eyebrow, .card-eyebrow, .hero-label, .telehealth-badge,
.picker-axis-label, .plan-badge {
  font-family: var(--font-base);
}

/* 2. Containers */
.container, main .container {
  max-width: 1240px;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .container, main .container {
    padding: 0 24px;
  }
}
@media (min-width: 1200px) {
  .container, main .container {
    padding: 0 24px;
  }
}
@media (max-width: 767px) {
  .container, main .container {
    padding: 0 20px;
  }
}

/* 3. Section Spacing */
.section, .hero, .hero-treatment, .page-intro, .start-page {
  padding: 128px 0;
}
.section-sm, .disclaimer, .commerce-legal {
  padding: 64px 0;
}
@media (max-width: 767px) {
  .section, .hero, .hero-treatment, .page-intro, .start-page {
    padding: 64px 0;
  }
  .section-sm, .disclaimer, .commerce-legal {
    padding: 48px 0;
  }
}

/* 4. Buttons */
.btn, main .btn, main .picker-cta-btn {
  font-family: var(--font-base);
  text-transform: none;
  letter-spacing: 0.04em; /* match --oak-tracking-button */
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.9375rem; /* ~15px */
  padding: 12px 24px; /* match --oak-button-pad-block & inline */
  box-shadow: none;
}
.btn-primary, main .btn-primary {
  box-shadow: none;
}
.btn-primary:hover, main .btn-primary:hover {
  box-shadow: none;
  transform: none;
}
.picker-billing-btn, main .picker-billing-btn {
  text-transform: none;
  border-radius: var(--radius-sm);
}

/* 5. Cards */
.card, .service-card, .sidebar-card, .med-card,
.picker-card, .how-step, .pricing-card, .intake-fieldset,
.pillar-card, .process-card, .program-card,
main .card, main .picker-card, main .pricing-card, main .how-step {
  box-shadow: none;
  border-radius: var(--radius);
  border-color: rgba(24, 24, 22, 0.08); /* light theme hairline */
}
.card:hover, .service-card:hover, .med-card:hover, .pricing-card:hover,
.pillar-card:hover, .process-card:hover, .program-card:hover,
main .card:hover, main .pricing-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  border-color: rgba(24, 24, 22, 0.15);
  transform: none;
}

/* Editorial/navigation card titles share the homepage's sans-serif treatment.
   Preserve the existing legal and article reading-column widths. */
.card h3, .service-card h3, .med-card h3, .pricing-card h3,
.program-card .program-card-name {
  font-family: var(--font-base);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: normal;
}

/* 7. Forms and Tables */
.intake-form input[type="text"],
.intake-form input[type="email"],
.intake-form input[type="tel"],
.intake-form input[type="date"],
.intake-form input[type="url"],
.intake-form select,
.intake-form textarea,
.picker-notify-label input,
.admin-table input[type="url"],
.admin-table select {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(24, 24, 22, 0.15);
  box-shadow: none;
  font-family: var(--font-base);
}
.intake-form input:focus, .intake-form select:focus, .intake-form textarea:focus,
.picker-notify-label input:focus,
.admin-table input:focus, .admin-table select:focus {
  border-color: #7A5C22; /* light theme gold */
  box-shadow: 0 0 0 1px #7A5C22;
  outline: none;
}

.admin-table, .comparison-table {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(24, 24, 22, 0.08);
  box-shadow: none;
}
.admin-table th, .comparison-table th {
  background: #F2F0EB; /* light theme surface */
  border-bottom: 1px solid rgba(24, 24, 22, 0.08);
  font-family: var(--font-base);
  font-weight: 600;
}
.admin-table td, .comparison-table td {
  border-bottom: 1px solid rgba(24, 24, 22, 0.08);
  font-family: var(--font-base);
}

/* 8. Footer Typography & Grid (Coordinate with home) */
.site-footer {
  font-family: var(--font-base);
}
.site-footer .footer-logo {
  font-family: var(--font-base);
}
.site-footer .footer-tagline,
.site-footer .footer-col h6,
.site-footer .footer-col a,
.site-footer .footer-address,
.site-footer .footer-disclaimer,
.site-footer .footer-copy,
.site-footer .footer-legal a {
  font-family: var(--font-base);
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-template-areas:
      "brand treatments company legal"
      "brand treatments contact legal";
  }
  .footer-brand { grid-area: brand; }
  .footer-col:nth-child(2) { grid-area: treatments; }
  .footer-col:nth-child(3) { grid-area: company; }
  .footer-col:nth-child(4) { grid-area: legal; }
  .footer-col:nth-child(5) { grid-area: contact; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "treatments company"
      "legal contact";
  }
  .footer-brand { grid-area: brand; }
  .footer-col:nth-child(2) { grid-area: treatments; }
  .footer-col:nth-child(3) { grid-area: company; }
  .footer-col:nth-child(4) { grid-area: legal; }
  .footer-col:nth-child(5) { grid-area: contact; }
}
@media (max-width: 639px) {
  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "treatments"
      "company"
      "legal"
      "contact";
  }
  .footer-brand { grid-area: brand; }
  .footer-col:nth-child(2) { grid-area: treatments; }
  .footer-col:nth-child(3) { grid-area: company; }
  .footer-col:nth-child(4) { grid-area: legal; }
  .footer-col:nth-child(5) { grid-area: contact; }
}