/*
 * fixes.css — global a11y + motion + safe-area + focus + contrast overlays
 * Created TIER 2-B5  2026-05-19
 * Round 2 (TIER 2r-B5q): corrected safe-area selectors, reduced-motion,
 *   orphan contrast rules, orphan tap-target labels, country-chip a11y.
 * Loads AFTER form.css; rules deliberately bump specificity via element+class.
 */

/* ============ Focus visibility ============ */
/* Replace outline:none with WCAG-compliant focus-visible rings */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.20);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* Inputs: stronger focus ring (form context, more critical) */
input.form-input:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 0;
  border-color: #2563eb;
}

/* ============ Safe-area-inset (iPhone Dynamic Island / home indicator) ============ */
/* Requires viewport meta `viewport-fit=cover` — B1q sets that. */
.krak-form-wrapper {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}
/* B4q's form.css already adds `padding-bottom: calc(2rem + env(safe-area-inset-bottom))`
   to .krak-form-wrapper, so we don't repeat that here */
.form-actions {
  /* Extra safe-area cushion on the action row itself, in case the wrapper is overridden */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ Color contrast bumps (WCAG AA) ============ */
/* Bump greys that may fall <4.5:1 against white backgrounds */
/* .text-muted and .form-helper do not exist in the HTML — removed */
.field-hint {
  color: #4b5563; /* was likely #9ca3af or similar */
}
.field-error {
  color: #b91c1c; /* AA-compliant red on white */
}

/* ============ Tap target safety (defensive — B4q owns primary sizing) ============ */
input[type="checkbox"],
input[type="radio"] {
  min-width: 1.125rem;
  min-height: 1.125rem;
}
/* label.checkbox-label and label.radio-label do not exist in the HTML;
   the real consent label uses .consent-row (already styled in form.css:645-658) */
.consent-row {
  min-height: 2.75rem;
  display: flex;
  align-items: flex-start;
}

/* ============ Hide-but-accessible utility (for sr-only) ============ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============ Pending state for submit button ============ */
button[aria-busy="true"],
button:disabled[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
  position: relative;
}

/* ============ ARIA-invalid input styling ============ */
input[aria-invalid="true"] {
  border-color: #b91c1c !important;
  background-color: #fef2f2;
}
input[aria-invalid="true"]:focus-visible {
  outline-color: #b91c1c;
  box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.20);
}

/* ============ Noscript fallback styling ============ */
noscript > p {
  background: #fee2e2;
  color: #7f1d1d;
  padding: 1rem;
  text-align: center;
  border-bottom: 2px solid #b91c1c;
}

/* ============ Country chip + dropdown a11y ============ */
.country-chip:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.country-option:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}
@media (prefers-color-scheme: dark) {
  .country-dropdown { background: #1f2937; border-color: #374151; }
  .country-option { color: #f9fafb; }
  .country-option:hover, .country-option:focus { background: #374151; }
  .country-option .opt-code { color: #9ca3af; }
}