/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY FIXES — loaded LAST so it wins the cascade.
   Each rule records the WCAG criterion and the measured value it corrects.
   Keep this file small and purposeful; fold fixes into their home stylesheet
   when that file is next touched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Form input boundaries — WCAG 1.4.11 Non-text Contrast (3:1) ──
   --ph-border (#e2e6e2) measures 1.26:1 on the white input background, so the
   field edge was effectively invisible. These inputs sit on white with no fill
   difference, so the border is the only thing identifying them as controls. */
.contact-text-input,
.contact-textarea-input,
.contact-form__input,
input[type="text"]:not([class*="admin"]),
input[type="email"]:not([class*="admin"]),
input[type="tel"]:not([class*="admin"]),
input[type="url"]:not([class*="admin"]),
input[type="search"]:not([class*="admin"]),
textarea:not([class*="admin"]),
select:not([class*="admin"]) {
  border-color: #8b938b; /* 3.16:1 on #ffffff */
}

/* Focus: brand-matched, high-contrast ring. The previous ring was a 18%-alpha
   indigo left over from an earlier palette — too faint to read as focus. */
.contact-text-input:focus,
.contact-textarea-input:focus,
.contact-form__input:focus {
  border-color: var(--ph-primary-hover, #0756ad);
  box-shadow: 0 0 0 3px rgba(7, 86, 173, 0.32);
}

/* ── 2. Error state — paired with the inline messages in the contact form.
   Colour is never the only signal: an inline message and aria-invalid
   accompany every one of these (WCAG 1.4.1 Use of Colour). */
.contact-text-input[aria-invalid="true"],
.contact-textarea-input[aria-invalid="true"],
.contact-form__input[aria-invalid="true"] {
  border-color: #b91c1c; /* 6.17:1 on white */
  background: #fffafa;
}
.contact-text-input[aria-invalid="true"]:focus,
.contact-textarea-input[aria-invalid="true"]:focus,
.contact-form__input[aria-invalid="true"]:focus {
  border-color: #991b1b;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.26);
}
.contact-field-error {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  color: #b91c1c; /* 6.17:1 on white */
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}
.contact-field-error.is-visible {
  display: flex;
}

/* ── 3. Touch targets — WCAG 2.5.8 Target Size (Minimum), 24px floor;
   44x44 is the platform guidance the project's own rules follow. ── */

/* Mobile nav trigger: was 42x42 */
.hamburger {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Footer social buttons: were 42x42 */
.footer-social-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

/* Cookie dismiss: padding-only sizing resolved to roughly 27x27 */
.ph-cookie-close-btn {
  min-width: 44px;
  min-height: 44px;
}

/* Captcha refresh was 46x48 — already fine; the category pills were not.
   Explicit centring because min-height alone leaves the label off-centre. */
.contact-category-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

/* Footer legal row: min-height was 36-40px. Padding keeps the row visually
   compact while the hit area reaches the full 44px. */
.footer-legal-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── 4. Badge text contrast — WCAG 1.4.3 (4.5:1; the badge is 0.65rem bold,
   well under the 18.66px bold large-text threshold) ──
   cyan-600 rgba(8,145,178,.92) gave white text 3.68:1; emerald-600 gave 3.77:1. */
.mega-card__badge--cyan {
  background: #0e7490 !important; /* white text → 5.36:1 */
}
.mega-card__badge--emerald {
  background: #047857 !important; /* white text → 5.48:1 */
}

/* ── 5. Respect reduced motion for the pulsing footer bolt and any
   infinite decorative animation this file's siblings add. ── */
@media (prefers-reduced-motion: reduce) {
  .footer-bolt,
  .footer-pulse-dot {
    animation: none !important;
  }
}