/* Tonson Lab readability overrides.
   Load after styles.css and before brand-update.css. */
:root {
  --readable-body-size: 18px;
  --readable-control-size: 16px;
  --readable-fine-size: 13px;
}

body {
  font-size: var(--readable-body-size);
  line-height: 1.75;
}

p {
  font-size: var(--readable-body-size);
  line-height: 1.8;
}

main p,
.section-heading > p,
.about-copy > p,
.preparation-layout p,
.step p,
.update-copy p,
.faq-section > div > p,
.faq-list details p,
.contact-section p,
.contact-section .section-heading p,
.contact-detail p,
.footer-top > p,
.medical-note,
.dialog > p,
.sources-dialog p {
  font-size: var(--readable-body-size);
  line-height: 1.8;
}

.hero-description {
  font-size: var(--readable-body-size);
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.hero-note {
  font-size: var(--readable-fine-size);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.section-heading h2,
.about-copy h2,
.preparation-layout h2,
.faq-section h2,
.contact-section h2 {
  font-size: 48px;
  line-height: 1.4;
}

.service-card h3,
.consult-card h3 {
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;
}

.service-card p {
  max-width: none;
  font-size: var(--readable-body-size);
  line-height: 1.8;
}

.service-card,
.service-card h3,
.service-card p,
.card-bottom,
.card-bottom > span,
.consult-link {
  min-width: 0;
}

.card-bottom > span {
  max-width: none;
  font-size: var(--readable-fine-size);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}

.update-copy h3 {
  font-size: 22px;
  line-height: 1.55;
}

.gallery-item strong {
  font-size: 16px;
  line-height: 1.6;
}

summary {
  font-size: var(--readable-body-size);
  line-height: 1.7;
}

.dialog ul {
  font-size: var(--readable-body-size);
  line-height: 1.9;
}

/* Keep supporting labels legible without competing with the main copy. */
.announcement,
.eyebrow,
.card-number,
.section-footnote,
.about-facts span,
.step > span,
.article-tag,
.branch-label,
.branch-note,
.contact-footnote,
.footer-top > p span,
.footer-bottom,
.footer-text-button,
.footer-social,
.medical-note,
.dialog .dialog-note,
.gallery-dialog > p {
  font-size: var(--readable-fine-size);
  line-height: 1.7;
}

.strip-inner {
  font-size: var(--readable-control-size);
  line-height: 1.6;
}

.button:not(.button-small),
.filter,
.consult-link,
.contact-line,
.branch-tabs button,
.mobile-contact a {
  font-size: var(--readable-control-size);
  line-height: 1.6;
}

.text-link,
.hero-actions .text-link,
.section-heading > .text-link,
.about-copy .text-link,
.faq-section .text-link,
.branch-actions .text-link,
.update-copy .text-link {
  font-size: var(--readable-control-size);
  line-height: 1.6;
}

.branch-tabs button span {
  font-size: var(--readable-control-size);
  line-height: 1.6;
}

.branch-note {
  font-size: var(--readable-fine-size) !important;
}

.contact-footnote {
  font-size: var(--readable-fine-size) !important;
}

@media (min-width: 601px) and (max-width: 980px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-heading h2,
  .about-copy h2,
  .preparation-layout h2,
  .faq-section h2,
  .contact-section h2 {
    font-size: 42px;
  }
}

@media (max-width: 600px) {
  :root {
    --readable-body-size: 16px;
  }

  .section-heading h2,
  .about-copy h2,
  .preparation-layout h2,
  .faq-section h2,
  .contact-section h2 {
    font-size: 36px;
    line-height: 1.45;
  }

  .service-card h3,
  .consult-card h3 {
    font-size: 22px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 0;
    padding: 24px 20px;
  }

  .updates-grid {
    grid-template-columns: 1fr;
  }

  .update-card {
    display: block;
  }

  .update-art {
    height: 225px;
  }

  .update-copy {
    padding-top: 18px;
  }

  .update-copy h3 {
    font-size: 20px;
  }

  .contact-detail {
    display: grid;
    gap: 4px;
    font-size: var(--readable-body-size);
  }

  .contact-detail > span {
    min-width: 0;
    padding-top: 0;
    font-size: var(--readable-fine-size);
  }

  .contact-detail p {
    font-size: var(--readable-body-size);
  }

  .branch-tabs {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .branch-tabs button {
    min-width: 0;
    margin-right: 16px;
  }
}

/* Apply the same readable scale to text embedded in section artwork. */
.update-art small,
.art-badge,
.about-badge span,
.about-image > span,
.branch-photo > span {
  font-size: 13px;
  line-height: 1.7;
}

.update-art strong,
.art-community strong,
.art-line strong {
  font-size: 24px;
}

.update-art {
  min-height: 250px;
  height: auto;
}

.about-facts strong {
  font-size: 23px;
}

.branch-info h3 {
  font-size: 30px;
}

.contact-detail > span {
  font-size: 15px;
}

@media (max-width: 760px) {
  .update-art strong,
  .art-community strong,
  .art-line strong {
    font-size: 23px;
  }

  .about-facts {
    flex-wrap: wrap;
    gap: 20px;
  }

  .branch-info h3 {
    font-size: 27px;
  }

  .contact-detail > span {
    font-size: 14px;
  }
}