/**
 * TSDC Accessibility & UX Fixes
 * topsmiledentalclinic.com — 2026-10-28
 * Fixes: focus-visible, skip-nav, button contrast, line-length, form placeholders
 */

/* ── Skip Navigation Link ──────────────────────────────────────── */
.tsdc-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 100000;
  padding: 12px 24px;
  background: #0A7C8C;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.15s ease;
}
.tsdc-skip-link:focus {
  top: 0;
  outline: 2px solid #065A66;
  outline-offset: 2px;
}

/* ── Global Focus-Visible ──────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid #0A7C8C;
  outline-offset: 2px;
  border-radius: 2px;
}
/* Remove outline for mouse clicks */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ── CTA Button Contrast Fix (C9A84C → 8B6914 for WCAG AA) ──── */
/* Gold/champagne buttons — darken background for white text contrast */
.hp-book-btn,
.cta-band a[href*="make-appointments"],
a.hp-book-btn,
.tsdc-cta-gold,
[style*="background:#C9A84C"],
[style*="background: #C9A84C"],
[style*="background-color:#C9A84C"],
[style*="background-color: #C9A84C"] {
  background: #8B6914 !important;
  background-color: #8B6914 !important;
}
.hp-book-btn:hover,
.cta-band a[href*="make-appointments"]:hover,
a.hp-book-btn:hover,
.tsdc-cta-gold:hover {
  background: #6D5210 !important;
  background-color: #6D5210 !important;
}

/* ── Line Length Constraint ─────────────────────────────────────── */
.entry-content p,
.entry-content li,
.faq-a,
.tsdc-home-wrap p,
.page-service-wrap p,
.single-blog-wrap p {
  max-width: 68ch;
}

/* ── Placeholder Contrast Fix ──────────────────────────────────── */
::placeholder {
  color: #6B7280;
  opacity: 1;
}
::-webkit-input-placeholder { color: #6B7280; }
::-moz-placeholder { color: #6B7280; opacity: 1; }

/* ── Form Inline Validation ────────────────────────────────────── */
.tsdc-field-error {
  display: block;
  color: #DC2626;
  font-size: 0.8125rem;
  margin-top: 4px;
  line-height: 1.4;
}
input.tsdc-invalid,
select.tsdc-invalid,
textarea.tsdc-invalid {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 1px #DC2626;
}
input.tsdc-valid,
select.tsdc-valid,
textarea.tsdc-valid {
  border-color: #16A34A !important;
}

/* ── Form Labels (visually hidden but accessible) ──────────────── */
.tsdc-sr-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Exit-Intent: Disable on Mobile ────────────────────────────── */
@media (max-width: 768px) {
  #tsdcExitOverlay {
    display: none !important;
  }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #tsdcExitOverlay {
    transition: none !important;
    animation: none !important;
  }
  .tsdc-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Heading Hierarchy Visual Consistency ───────────────────────── */
.entry-content h1,
.tsdc-home-wrap h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
}
.entry-content h2,
.tsdc-home-wrap h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  line-height: 1.25;
}
.entry-content h3,
.tsdc-home-wrap h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.3;
}

/* ── Orphan/Widow Prevention ───────────────────────────────────── */
h1, h2, h3, .tsdc-testi-card p {
  text-wrap: balance;
}

/* ── Trust Badge Consistency (handled by JS) ───────────────────── */