/* ── 1. Skip-to-content link ─────────────────────────────────────────────── */
.skip {
  background: #082032;
  border: 2px solid #c3921c;
  border-radius: 0.25rem;
  clip: rect(0 0 0 0);
  color: #fafbfc;
  font-size: 0.875rem;
  font-weight: 700;
  left: 1rem;
  padding: 0.75rem 1.25rem;
  position: fixed;
  text-decoration: none;
  top: -100%;
  z-index: 99999;
}

.skip:focus {
  clip: auto;
  top: 1rem;
}

/* ── 2. Focus indicators ────────────────────────────────────────────────────
   Remove any outline:none overrides and provide a visible ring on keyboard
   navigation. :focus-visible targets keyboard users only (not mouse clicks).  */
*:focus {
  outline: none; /* Reset browser default — we apply our own below */
}

*:focus-visible {
  outline: 3px solid #c3921c;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Slightly tighter ring inside form inputs */
.ssc-input:focus-visible,
.ssc-textarea:focus-visible {
  outline: 3px solid #c3921c;
  outline-offset: 0;
  border-color: #c3921c;
}

/* ── 3. Color contrast — .ssc-topper text on light backgrounds ───────────────
   In light mode the gold --primary (#c3921c) on --sectionBg (#f7f7f7) only
   achieves a 2.45:1 contrast ratio, which fails WCAG AA (requires 4.5:1 for
   normal text). Darkened to #7a5510 which achieves 6.2:1 on white/light gray.
   Dark mode is unaffected because the original gold passes on dark navy.      */
.ssc-topper {
  color: #7a5510;
}

body.dark-mode .ssc-topper {
  color: var(--primary); /* #c3921c on #082032 = ~5.2:1 ✓ */
}

/* ssc-category-label (services page section headings) same fix */
.ssc-category-label {
  color: #7a5510;
}

/*
 * SPECIFICITY FIX — services page category headings ("Stucco", "Stone", "Concrete")
 *
 * The scraped services.css sets:
 *   #services-964 .ssc-category-label { color: var(--headerColor) }  ← specificity 1-1-0
 * and has NO dark-mode override for that element.
 *
 * Our old rule `body.dark-mode .ssc-category-label` only scores 0-2-0 and loses.
 * We match the ID-selector specificity to win.
 */
body.dark-mode #services-964 .ssc-category-label,
body.dark-mode .services-964 .ssc-category-label {
  color: var(--bodyTextColorWhite); /* #fafbfc on dark navy — very high contrast */
}

/*
 * SPECIFICITY FIX — home page "Why Choose Us" card headings
 *
 * The scraped local.css sets:
 *   #why-choose-289 .ssc-h3 { color: var(--headerColor) }  ← specificity 1-1-0
 * There are 14 dark-mode blocks in local.css but NONE target #why-choose-289.
 */
body.dark-mode #why-choose-289 .ssc-h3 {
  color: var(--bodyTextColorWhite);
}

/* ── 4. Placeholder text contrast ──────────────────────────────────────────
   Browser default renders placeholder at ~40% opacity, which often falls
   below 3:1. Explicit color values ensure compliance.                        */
.ssc-input::placeholder,
.ssc-textarea::placeholder {
  color: #767676; /* 4.54:1 on white — passes AA */
  opacity: 1;     /* Firefox renders placeholder at reduced opacity by default */
}

body.dark-mode .ssc-input::placeholder,
body.dark-mode .ssc-textarea::placeholder {
  color: #9ca3af; /* sufficient contrast on dark input backgrounds */
  opacity: 1;
}

/* ── 5. Form input visibility ───────────────────────────────────────────────
   Ensure inputs have a visible border so sighted keyboard users can locate
   the active field.                                                           */
.ssc-input,
.ssc-textarea {
  border: 1px solid #6b7280;
}

body.dark-mode .ssc-input,
body.dark-mode .ssc-textarea {
  border: 1px solid #4b5563;
}

/* ── 6. Cursor ──────────────────────────────────────────────────────────────
   Interactive elements should always indicate they are clickable.            */
button,
[role="button"],
.ssc-button,
.ssc-button-solid,
.ssc-toggle,
#dark-mode-toggle {
  cursor: pointer;
}

/* ── 7. Reduced-motion ──────────────────────────────────────────────────────
   Users who have enabled "Reduce Motion" in their OS settings should not see
   large animations. Fade remains as a subtle, non-vestibular transition.     */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}