/*
 * TopSmileDentalClinic.com — Performance & UX Fix Pack
 * Generated: 2026-09-29
 *
 * HOW TO APPLY:
 * Option A: WordPress → Appearance → Customize → Additional CSS → paste this
 * Option B: Install "WPCode" plugin → Add Snippet → CSS → paste this
 * Option C: Child theme style.css (safest for updates)
 *
 * This CSS is additive — it overrides only broken values.
 * It does NOT remove or restructure any existing layout.
 * All fixes use the exact class names from the live site.
 */

/* ==========================================================================
   P0-1: MOBILE OVERFLOW FIX — 81 elements breaking viewport
   Targets: grids, footer, availability bar, testimonials, scrolling elements
   ========================================================================== */

html {
  overflow-x: hidden; /* last-resort viewport guard */
}

/* Prevent any element from exceeding viewport */
body,
.site-container,
main,
.tsdc-ft,
.tsdc-avail-bar,
.testi-grid,
.ins-scroll-wrap,
.hp-stats,
.hp-svc-grid,
.hp-loc-grid,
.hp-team-grid {
  max-width: 100%;
  overflow-x: hidden;
}

/* Testimonial grid: 3-col fixed → responsive */
@media (max-width: 768px) {
  .testi-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px;
  }

  /* Footer: prevent overflow */
  .tsdc-ft {
    width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* Availability bar */
  .tsdc-avail-bar {
    width: 100% !important;
    flex-wrap: wrap;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* Insurance scroll track */
  .ins-scroll-wrap {
    width: 100% !important;
  }

  /* Any table that might overflow */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Google Maps iframe */
  iframe {
    max-width: 100% !important;
  }

  /* Service grids */
  .hp-svc-grid {
    grid-template-columns: 1fr !important;
  }

  /* Location grid */
  .hp-loc-grid {
    grid-template-columns: 1fr !important;
  }

  /* Ensure images never exceed container */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   P0-2: LINE-HEIGHT FIX — Impeccable flagged 30x tight-leading (1.15x)
   Body text needs >= 1.5; headings >= 1.3
   ========================================================================== */

body,
p,
li,
td,
th,
span,
.testi-q,
.sec-desc,
.hp-svc-desc,
.ins-note,
footer p {
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
}

/* ==========================================================================
   P0-3: TAP TARGET FIX — 70 elements under 44px on mobile
   ========================================================================== */

@media (max-width: 768px) {
  /* Navigation links */
  .primary-menu-container a,
  .header-menu-container a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Footer links */
  .tsdc-ft a,
  footer a,
  .site-info a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Insurance items */
  .ins-scroll-item {
    min-height: 44px;
    padding: 10px 12px;
  }

  /* All buttons and CTAs */
  a.btn-p,
  a.btn-o,
  a.btn-s,
  button,
  input[type="submit"],
  .tsdc-nav-book,
  .tsdc-mobile-cta-book,
  .tsdc-mobile-cta-wa,
  .tsdc-mobile-cta-call,
  .hp-loc-cta,
  .tsdc-avail-cta {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Social media icons */
  .tsdc-ft-social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Service card links */
  .hp-svc-card a {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ==========================================================================
   P0-4: CONTRAST FIX — axe-core CRITICAL + Impeccable low-contrast x14
   ========================================================================== */

/* Gold accent text on white background — 2.28:1 → needs 3:1 for large text */
h2 .accent,
h3 .accent,
.accent {
  color: #8B6914; /* darkened gold — passes 4.5:1 on white */
}

/* Testimonial role text — 3.77:1 → needs 4.5:1 */
/* .testi-role is a <div> — need high specificity to override theme */
div.testi-role,
.testi .testi-role,
.testi-who .testi-role {
  color: #596577 !important; /* from #78849a — now passes 4.5:1 on white */
  font-size: 13px !important; /* from 12.24px — more readable */
}

/* Testimonial name — bump from 13.94px */
.testi-name {
  font-size: 14px;
}

/* WhatsApp green button — white on #25D366 = 1.98:1 */
a[href*="wa.me"],
.tsdc-mobile-cta-wa,
.tsdc-wa-float {
  background-color: #128C7E !important; /* darker WhatsApp teal — 4.6:1 with white */
  color: #ffffff !important;
}

/* Insurance type badges — text same color as transparent bg */
/* These have inline styles (font-size:.68rem) so need !important */
span.ins-t.ins-d,
.ins-scroll-item .ins-t.ins-d {
  background-color: rgba(5, 150, 105, 0.15) !important;
  color: #047857 !important; /* darker green — passes 4.5:1 */
  font-size: 12px !important;
}

span.ins-t.ins-r,
.ins-scroll-item .ins-t.ins-r {
  background-color: rgba(100, 116, 139, 0.12) !important;
  color: #475569 !important; /* darker slate — passes 4.5:1 */
  font-size: 12px !important;
}

/* Tag/badge text — 11.56px teal on teal tint */
span.tag,
div.tag,
div.doc-badge,
div.hp-loc-badge,
.tag,
.doc-badge,
.hp-loc-badge {
  color: #067080 !important; /* darker teal for contrast */
  font-size: 12px !important; /* from 11.56px */
}

/* Footer links — white 60% opacity on dark = low contrast */
/* Need !important to override theme's rgba(255,255,255,0.6) */
.tsdc-ft a,
footer a,
footer p,
.footer-html,
.site-info {
  color: rgba(255, 255, 255, 0.85) !important; /* from 0.6/0.65 — now passes 4.5:1 on #0A2540 */
}

/* Social icons in footer — white 70% on white 5% */
.tsdc-ft-social a {
  color: rgba(255, 255, 255, 0.9) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* WhatsApp CTA teal bg — 4.13:1 with white, needs darker */
.tsdc-avail-cta,
.tsdc-ft-grid a[href*="wa.me"],
a[href*="wa.me"][class*="cta"],
#tsdc-sticky-footer a[href*="wa.me"],
#tsdc-sticky-footer a[target="_blank"] {
  background-color: #0e7a6e !important; /* darker teal — passes 4.7:1 with white */
  color: #ffffff !important;
}

/* Footer bottom copyright/disclaimer text */
.tsdc-ft-bottom > span,
.tsdc-ft-bottom {
  color: #8fa0b2 !important; /* from #6c7c8c — passes 4.5:1 on #0a2540 */
}

/* Google rating score text */
.tsdc-grating-score > span,
.tsdc-grating-score span {
  color: #6b7280 !important; /* from #9ca3af — passes 4.6:1 on white */
}

/* ==========================================================================
   P0-5: MINIMUM FONT SIZE — 127 elements below 14px
   ========================================================================== */

/* Badges and tags — from 11.56px, 11.05px (inline styles need !important) */
.tag,
span.ins-t,
.ins-scroll-item .ins-t,
div.doc-badge,
div.hp-loc-badge,
.hp-svc-featured-badge {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* Insurance note — from 14.28px (borderline, keep as-is) */

/* Footer small text — from 13.94px */
.tsdc-ft a,
footer p,
footer a {
  font-size: 14px !important;
}

@media (max-width: 768px) {
  /* On mobile, enforce 14px minimum on body text */
  body {
    font-size: 16px;
  }

  p, li, td, th, span, a {
    font-size: max(14px, inherit);
  }

  /* Footer links on mobile */
  .tsdc-ft a,
  footer a,
  footer p {
    font-size: 14px;
  }
}

/* ==========================================================================
   P1-1: LINE LENGTH — Impeccable flagged 14x line-length
   ========================================================================== */

/* Constrain body text to readable width */
.sec-desc,
.hp-intro p,
.hp-about-text p,
article p,
.entry-content p,
.post-content p {
  max-width: 72ch;
}

/* FAQ answers */
.faq-a,
.faq-answer {
  max-width: 72ch;
}

/* ==========================================================================
   P1-2: LAYOUT TRANSITIONS — Impeccable flagged 13x layout-transition
   Replace max-height animations with transform-based alternatives
   ========================================================================== */

/* Override max-height transitions with opacity+transform */
.tsdc-nav-mega,
.faq-a,
.faq-answer,
[class*="accordion"] {
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Bounce easing fix (Impeccable: bounce-easing x2) */
.tsdc-wa-float,
.wa-bounce {
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important; /* expo ease-out */
}

/* ==========================================================================
   P1-3: TYPOGRAPHY CLEANUP — 15+ font sizes, Times fallback leak
   ========================================================================== */

/* Fix Times font fallback leak (110 elements) */
body,
input,
select,
textarea,
button,
.wpcf7 * {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.sec-hdr h2,
.sec-hdr h3 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   P1-4: FORM ACCESSIBILITY — axe-core CRITICAL: 2 selects without names
   We cannot add aria-label via CSS, so this is handled in the JS file.
   But we can improve form field sizing for mobile.
   ========================================================================== */

/* Improve form field styling */
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea,
.hp-hero-form input,
.hp-hero-form select {
  font-size: 16px; /* prevents iOS zoom on focus */
  min-height: 48px;
  padding: 10px 14px;
  line-height: 1.5;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .wpcf7 input,
  .wpcf7 select,
  .wpcf7 textarea,
  .hp-hero-form input,
  .hp-hero-form select {
    font-size: 16px !important; /* iOS zoom prevention */
    width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   P2-1: KICKER LABELS — Impeccable flagged 11x kicker-above-heading
   Merge tiny kickers into the heading visually
   ========================================================================== */

/* Make kicker labels part of the heading block, not standalone */
.sec-hdr .tag,
.sec-hdr [class*="label"],
.sec-hdr [class*="kicker"] {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ==========================================================================
   P2-2: AI-GENERATED UI TELLS — thin border + wide shadow
   ========================================================================== */

/* Tone down border+shadow combos (6 advisories) */
.testi,
.hp-svc-card,
.faq-item {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* ==========================================================================
   CATEGORY PAGE SEO FIX — 7 pages scoring 92 instead of 100
   This requires meta descriptions added per-page in WordPress/Yoast.
   Cannot be fixed via CSS — noted in instructions.
   ========================================================================== */

/* ==========================================================================
   RENDER-BLOCKING OPTIMIZATION
   These @font-face rules add font-display: swap to prevent FOIT
   ========================================================================== */

/* Force font-display: swap if not already set */
@font-face {
  font-family: "DM Sans";
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-display: swap;
}

/* ==========================================================================
   FIX ROUND 2 (deployed 2026-09-29)
   1. Remove floating Book/CTA bar on mobile
   2. Fix mobile menu z-index / pointer events
   3. Increase font sizes for readability
   ========================================================================== */

/* ==========================================================================
   FIX 1: REMOVE FLOATING MOBILE CTA BAR
   #tsdcMobileCtaBar / .tsdc-mobile-cta — the "Book Consultation | Phone | WhatsApp"
   bar fixed to bottom of every page on mobile
   ========================================================================== */

#tsdcMobileCtaBar,
.tsdc-mobile-cta {
  display: none !important;
}

/* Also remove the space it was taking at the bottom */
body {
  padding-bottom: 0 !important;
}

/* ==========================================================================
   FIX 2: MOBILE MENU — Ensure burger click event can fire
   The nav overlay and menu need proper z-index stacking.
   The wp-i18n JS error ("wp is not defined") can break script execution
   chain — we fix this in JS. Here we ensure CSS doesn't block interaction.
   ========================================================================== */

/* Ensure burger is always clickable */
.tsdc-nav-burger {
  position: relative;
  z-index: 1000000 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Ensure menu displays correctly when open class is toggled */
.tsdc-nav-links--open {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  width: 80vw;
  max-width: 320px;
  height: 100vh;
  background: #1a1a2e;
  padding: 60px 24px 24px;
  z-index: 999998;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0,0,0,0.3);
}

/* Overlay when menu is open */
.tsdc-nav-overlay--show {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999997;
}

/* Close button visibility */
.tsdc-nav-links--open .tsdc-nav-close {
  display: block !important;
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 28px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  z-index: 999999;
}

/* Menu items styling when open */
.tsdc-nav-links--open .tsdc-nav-item > a {
  display: block;
  padding: 14px 0;
  color: #fff;
  font-size: 17px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Body scroll lock when menu open */
body.tsdc-nav-mob-open {
  overflow: hidden !important;
}

/* ==========================================================================
   FIX 3: INCREASE FONT SIZES — Content readability on all pages
   ========================================================================== */

/* Base body text — from 17px to 18px */
body {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

/* Paragraphs inside content areas */
.pg-content p,
.entry-content p,
.post-content p,
article p,
.sec-desc,
.hp-svc-desc,
.hp-about-text p {
  font-size: 17px !important;
  line-height: 1.75 !important;
}

/* List items */
.pg-content li,
.entry-content li,
article li {
  font-size: 17px !important;
  line-height: 1.7 !important;
}

/* Headings — slightly larger */
h1 { font-size: clamp(28px, 5vw, 48px) !important; }
h2 { font-size: clamp(22px, 3.5vw, 36px) !important; }
h3 { font-size: clamp(18px, 2.5vw, 26px) !important; }
h4 { font-size: clamp(16px, 2vw, 22px) !important; }

/* FAQ text */
.faq-q {
  font-size: 17px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}
.faq-a,
.faq-a p {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Table cells */
td, th {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Service cards */
.hp-svc-card p,
.hp-svc-card span {
  font-size: 15px !important;
}

/* Testimonials */
.testi-q {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Stats bar */
.pg-stat-label,
.hp-stats span {
  font-size: 15px !important;
}

/* Mobile font size increases */
@media (max-width: 768px) {
  body {
    font-size: 17px !important;
  }

  .pg-content p,
  .entry-content p,
  article p {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  .pg-content li,
  .entry-content li {
    font-size: 16px !important;
  }

  h1 { font-size: clamp(24px, 6vw, 36px) !important; }
  h2 { font-size: clamp(20px, 5vw, 28px) !important; }
  h3 { font-size: clamp(17px, 4vw, 22px) !important; }

  .faq-q { font-size: 16px !important; }
  .faq-a, .faq-a p { font-size: 15px !important; }

  /* Ensure footer text is readable */
  .tsdc-ft,
  .tsdc-ft p,
  .tsdc-ft a,
  .tsdc-ft li,
  footer,
  footer p,
  footer a {
    font-size: 15px !important;
  }
}

/* ==========================================================================
   FIX: REMOVE ALL FLOATING ELEMENTS — Book, Call, WhatsApp, Google Badge
   Deployed: 2026-09-29 (Round 3)

   Targets:
   1. #tsdcMobileCtaBar / .tsdc-mobile-cta — mobile CTA bar (Book|Call|WhatsApp)
   2. #tsdc-sticky-footer — sticky footer bar
   3. #tsdcFabCluster / .tsdc-fab-cluster — floating Call/WhatsApp FAB buttons
   4. #tsdcGoogleBadge / .tsdc-grating — floating Google rating badge
   5. .tsdc-wa-float — floating WhatsApp button
   ========================================================================== */

/* Mobile CTA bar */
#tsdcMobileCtaBar,
.tsdc-mobile-cta {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Sticky footer bar */
#tsdc-sticky-footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}

/* Floating Call + WhatsApp FAB cluster */
#tsdcFabCluster,
.tsdc-fab-cluster {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Floating Google rating badge */
#tsdcGoogleBadge,
.tsdc-grating {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Floating WhatsApp button */
.tsdc-wa-float {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Remove any body padding that compensated for floating bars */
body {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove overlay that might have been for the nav — keep only for mobile menu */
.tsdc-nav-overlay:not(.tsdc-nav-overlay--show) {
  display: none;
}

/* FIX: Remaining gold button contrast — white on #c9a84c = 2.3:1, need 4.5:1 */
/* Darken all gold background buttons to pass WCAG AA */
.btn-g,
a.btn-g,
.hp-svc-card a[style*="c9a84c"],
a[style*="background:#c9a84c"],
a[style*="background: #c9a84c"],
a[style*="background-color:#c9a84c"],
a[style*="background-color: #c9a84c"],
a[style*="C9A84C"],
[style*="c9a84c"] a,
.tsdc-nav-book {
  background-color: #8B6914 !important;
  color: #ffffff !important;
}