/* ==========================================================================
   Readability & polish layer — loaded LAST on every page (includes/meta.php,
   blogs/__stylesheet.inc.php). 2026-11-05.
   Client feedback: ragged right edge on mobile, hard to read, should feel
   more premium. This file only overrides; delete its two <link> tags to undo.
   ========================================================================== */

/* ── 1. Base rendering ─────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;                      /* off-canvas menu no longer makes pages scroll sideways */
}
h1, h2, h3, h4 { text-wrap: balance; }   /* no single word left alone on a heading's last line */
main p, main li { text-wrap: pretty; }   /* no orphans at the end of paragraphs */
::selection { background: #1B6FD8; color: #fff; }

/* ── 2. Body copy colour: slate-500 greys were too faint on white ──────── */
main p, main li { color: #3d4757; }
main [class*="sub"], main [class*="desc"] { color: #4a5568; }

/* ── 3. Mobile reading: one size, one rhythm, a straight right edge ────── */
@media (max-width: 767.98px) {
  main p, main li,
  body .article-body p, body .article-body li, body .article-lead {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 8 3 3;        /* only hyphenate longer words */
    overflow-wrap: break-word;
    word-spacing: -0.01em;
  }

  /* Centred intros keep a centred last line under their centred headings */
  .hero-subtext, .diff2-subtitle, .team-lead-bio, .svc-section-sub, .about-section-sub,
  .svc-cta-inner p, .about-cta-inner p, .kd-section > p, main [class*="section-sub"] {
    text-align: justify;
    text-align-last: center;
  }

  /* Short UI text keeps its own alignment */
  main [class*="badge"], main [class*="badge"] *, main [class*="pill"], main [class*="pill"] *,
  main [class*="btn"], main [class*="btn"] *, main [class*="stat"], main [class*="stat"] *,
  main [class*="label"], main [class*="label"] *, main form p, main form li,
  main nav li, main .breadcrumb li, main [class*="breadcrumb"] li,
  main [class*="faq"] summary, main [class*="faq"] button, main [class*="accordion"] button,
  main [class*="trust"] *, main [class*="-tag"], main [class^="tag"] {
    text-align: inherit;
    text-align-last: auto;
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  /* Long-form paragraphs: 15.5px / 1.75 everywhere */
  .intro-text p, .about-intro-text, .about-intro-text p, .svc-what-content p, .svc-what-content li,
  .cf-pain-content p, .svc-doctor-content p, .svc-adv-body, .svc-adv-body p,
  .au-lede, .au-section p, .au-section li, .kd-section > p, .team-header-desc, .services-header-desc,
  .appt-sub, .hero-subtext, .emerg-desc, .diff2-subtitle, .about-hero-sub, .svc-hero-sub {
    font-size: 15.5px;
    line-height: 1.75;
  }
  .intro-text p + p, .about-intro-text + .about-intro-text, .svc-what-content p + p { margin-top: 14px; }

  /* Card copy: was 13.4–14.4px, now one size */
  main [class*="card"] p, main [class*="card"] li, main [class*="-body"] p, main [class*="-body"],
  main [class*="card-body"], main [class*="type-body"], main [class*="service-body"] {
    font-size: 14.5px;
    line-height: 1.65;
  }
}

/* ── 4. Faded white text on dark sections: lift to readable contrast ───── */
.au-cta p{color:rgba(255,255,255,0.86)}
.bk-aside-foot{color:rgba(255,255,255,0.86)}
.cb-cta-hours{color:rgba(255,255,255,0.86)}
.cf-step-time > span{color:rgba(255,255,255,0.86)}
.why-card p{color:rgba(255,255,255,0.86)}
.split-copy p,.difference-list li{color:rgba(255,255,255,0.86)}
.specialty-card--info .eyebrow,.specialty-card--info .eyebrow-light{color:rgba(255,255,255,0.86)}
.specialty-card--info p{color:rgba(255,255,255,0.86)}
.emergency-panel p{color:rgba(255,255,255,0.86)}
.ft-cta-text p{color:rgba(255,255,255,0.86)}
.site-footer{color:rgba(255,255,255,0.86)}
.ft-brand-label{color:rgba(255,255,255,0.72)}
.ft-desc{color:rgba(255,255,255,0.86)}
.ft-badge{color:rgba(255,255,255,0.86)}
.ft-social-btn{color:rgba(255,255,255,0.86)}
.ft-links a{color:rgba(255,255,255,0.86)}
.ft-contact-row p{color:rgba(255,255,255,0.86)}
.ft-contact-row a{color:rgba(255,255,255,0.86)}
.ft-contact-label{color:rgba(255,255,255,0.72)}
.ft-hours{color:rgba(255,255,255,0.86)}
.ft-trust-item span{color:rgba(255,255,255,0.72)}
.ft-bottom p{color:rgba(255,255,255,0.72)}
.ft-credit a{color:rgba(255,255,255,0.86)}
.ft-bottom-links a{color:rgba(255,255,255,0.72)}
.ft-bottom-links a:hover{color:rgba(255,255,255,1)}
.intro-stat span{color:rgba(255,255,255,0.86)}
.wc-header-desc{color:rgba(255,255,255,0.86)}
.wc-icon{color:rgba(255,255,255,0.86)}
.wc-card-featured p{color:rgba(255,255,255,0.86)}
.wc-card p{color:rgba(255,255,255,0.86)}
.wc-stat-label{color:rgba(255,255,255,0.86)}
.wc-emergency-left p{color:rgba(255,255,255,0.86)}
.wc-stats-item span{color:rgba(255,255,255,0.72)}
.team-lead-badge span{color:rgba(255,255,255,0.86)}
.emergency-left .eyebrow-invert{color:rgba(255,255,255,0.86)}
.emergency-desc{color:rgba(255,255,255,0.86)}
.emergency-card span{color:rgba(255,255,255,0.86)}
.difference-intro{color:rgba(255,255,255,0.86)}
.difference-photo-badge span{color:rgba(255,255,255,0.86)}
.emerg-live-text{color:rgba(255,255,255,0.86)}
.emerg-desc{color:rgba(255,255,255,0.86)}
.emerg-stat span{color:rgba(255,255,255,0.86)}
.btn-emerg-secondary{color:rgba(255,255,255,0.86)}
.emerg-card span{color:rgba(255,255,255,0.86)}
.emerg-hotline-label{color:rgba(255,255,255,0.86)}
.diff2-subtitle{color:rgba(255,255,255,0.86)}
.diff2-trust{color:rgba(255,255,255,0.72)}
.cr-modal-counter{color:rgba(255,255,255,0.86)}
.about-hero-sub{color:rgba(255,255,255,0.86)}
.about-mission-card p{color:rgba(255,255,255,0.86)}
.about-cta-inner p{color:rgba(255,255,255,0.86)}
.svc-hero-sub{color:rgba(255,255,255,0.86)}
.svc-steps-content>p{color:rgba(255,255,255,0.86)}
.svc-step-body p{color:rgba(255,255,255,0.86)}
.svc-cta-inner p{color:rgba(255,255,255,0.86)}
.br-section-hd--light p{color:rgba(255,255,255,0.86)}
.br-hero__sub{color:rgba(255,255,255,0.86)}
.br-hero__urgency{color:rgba(255,255,255,0.86)}
.br-cta-strip__text span{color:rgba(255,255,255,0.86)}
.br-final-cta__content p{color:rgba(255,255,255,0.86)}
.br-final-cta__address{color:rgba(255,255,255,0.72)}
.about-cta-inner .about-cta-note{color:rgba(255,255,255,0.86)}
.ft-prefsrc-label{color:rgba(255,255,255,0.86)}
.svc-hero-stat span{color:rgba(255,255,255,0.86)}
.svc-steps .svc-numcard p,.svc-steps .svc-numcard ul li{color:rgba(255,255,255,0.86)}
.side-card--cta .side-card__title{color:rgba(255,255,255,0.86)}
/* ── 5. Blog pages: the old template shrank everything to 13px on phones ── */
@media (max-width: 992px) { body .article-body p, body .article-body li { font-size: 16px; line-height: 1.75; } }
@media (max-width: 767.98px) {
  body .article-body p, body .article-body li { font-size: 16px; line-height: 1.75; color: #334155; }
  body .article-body p { margin-bottom: 1.05em; }
  body .article-lead { font-size: 17px; line-height: 1.7; }
  body .article-body h2 { font-size: 22px; line-height: 1.3; margin-top: 1.6em; }
  body .article-body h3 { font-size: 18.5px; line-height: 1.35; }
  body .callout, body .callout p { font-size: 15px; line-height: 1.65; }
  body .author-box__body, body .author-box__body p { font-size: 14.5px; line-height: 1.6; }
  body .blog__card .desc, body .desc { font-size: 14.5px; line-height: 1.6; color: #4a5568; }
  body .site-footer { font-size: 14px; }
  body .site-footer p, body .site-footer a, body .site-footer span, body .site-footer li { font-size: max(13px, 1em); }
  body .ft-bottom p, body .ft-bottom a { font-size: 12.5px; }
}

/* ── 6. Premium finish: calmer, more consistent surfaces ───────────────── */
main [class*="card"]:not([class*="wc-"]):not([class*="emerg"]) { border-radius: 16px; }
main img { image-rendering: auto; }
main a:not([class*="btn"]):not([class*="card"]) { text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 767.98px) {
  main section { scroll-margin-top: 80px; }
  main h2 { letter-spacing: -0.015em; line-height: 1.18; }
  main .eyebrow, main [class*="eyebrow"] { letter-spacing: .14em; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ── 7. Homepage intro (the section in the client's screenshot) ────────── */
.intro-text p { color: #3d4757; }
@media (max-width: 767.98px) { .intro-text p { margin-bottom: 14px; } }

/* ── 8. Small print that was under 14px on phones (found page by page) ─── */
@media (max-width: 767.98px) {
  main .br-types__note, main .br-timeline__body p, main .br-trust__item p,
  main .ca-condition-item p, main .ca-when-better-list li, main .ca-when-better p, main .ca-daily-item p,
  main .cf-risk p, main .cd-intro-point p, main .cd-intro-cta-box p, main .cd-who-note p, main .cd-wedding-cta p,
  main .cb-when-list li, main .cb-compare-note, main .di-choice-note p, main .svc-callout p,
  main .svc-dodont-col li, main .svc-cta p, main .svc-hero-content p, main .gt-cost-note p,
  main .wc-emergency-left p, main .mt-hero-note, main .mt-loc-detail p, main .cf-pain-content p,
  main .tw-timeline-item p, main .tw-wedding-package p, main .svc-adv-feat p, main .intro-feature-card p,
  main .di-when-card p, main .di-type-body, main .di-type-body p, main .kd-service-body, main .kd-service-body p,
  main .svc-why-card p, main .about-why-card p, main .svc-step-body p, main .svc-numcard p, main .svc-numcard li,
  main .svc-optcard-body, main .svc-optcard-body p, main .service-card-body, main .wc-card p {
    font-size: 14.5px;
    line-height: 1.65;
  }
}

/* ── 9. Content wider than the phone screen ────────────────────────────── */
@media (max-width: 767.98px) {
  /* Full mouth rehab: single grid column was sized to its content (430px on a 390px screen) */
  .svc-what-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .svc-what-inner > * { min-width: 0; }
  /* Meet our team: three trust boxes in one 659px row → stack them */
  .mt-trust-row { flex-wrap: wrap; gap: 10px; }
  .mt-trust-row > * { flex: 1 1 100%; min-width: 0; }
}

/* ── 10. Last stragglers (more specific rules in page CSS) ─────────────── */
@media (max-width: 767.98px) {
  .cd-wedding-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .cd-wedding-inner > *, .cd-wedding-content { min-width: 0; max-width: 100%; }
  .ct-hero .ct-urgency, .svc-hero .svc-hero-content p, .cf-pain .cf-pain-content p { font-size: 14.5px !important; line-height: 1.65; }
  .br-trust .br-trust__lead, .svc-cost .container > p { text-align: justify !important; text-align-last: center; hyphens: auto; }
}

/* ── 11. Price / package tables: wrap inside the screen instead of being cut off ── */
@media (max-width: 767.98px) {
  .svc-cost-table { min-width: 0 !important; width: 100% !important; table-layout: auto; }
  .svc-cost-table th, .svc-cost-table td { white-space: normal !important; padding: 11px 9px !important; font-size: 13.5px; line-height: 1.45; vertical-align: top; }
  .svc-cost-table td:first-child { font-weight: 600; }
  /* Blog "In this guide" links were 11–12px */
  body .toc a, body .toc li { font-size: 14.5px !important; line-height: 1.5; }
  body .toc li { margin-bottom: 6px; }
  /* Note boxes on service pages: same straight edge as the rest */
  .di-choice-note p, .svc-callout p, .cf-aftercare-note, .gt-cost-note p, .cb-compare-note, .br-types__note { text-align: justify !important; hyphens: auto; }
}
@media (max-width: 767.98px) { body .toc li, body .toc a, main nav li { text-align: left !important; hyphens: manual !important; } }