/* ==========================================================================
   THE SANCTUARY ORPHANAGE — ACCESSIBILITY & RESPONSIVE PATCH (WCAG 2.1 AA)
   File: assets/css/accessibility.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HIGH CONTRAST FOCUS INDICATORS (SC 2.4.7)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-accent-terracotta, #B85042) !important;
  outline-offset: 3px !important;
  border-radius: 2px !important;
}

/* Remove default outlines when using mouse click while preserving keyboard accessibility */
:focus:not(:focus-visible) {
  outline: none !important;
}

/* --------------------------------------------------------------------------
   2. ACCESSIBLE SKIP LINK (SC 2.4.1)
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background-color: var(--color-navy-dark, #0F2C3D);
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  z-index: 9999;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease-in-out;
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   3. MINIMUM TOUCH TARGET SIZES (SC 2.5.5)
   -------------------------------------------------------------------------- */
button,
.btn,
.nav-link,
.dropdown-link,
.filter-btn,
.amount-btn,
.freq-btn,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   4. PREFERS-REDUCED-MOTION OVERRIDES (SC 2.3.3)
   -------------------------------------------------------------------------- */
@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;
  }

  .slide {
    transition: opacity 0s !important;
  }

  .news-card:hover,
  .credential-card:hover,
  .gallery-item:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   5. PRINT OPTIMISATION STYLESHEET
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .mobile-toggle,
  .skip-link,
  .btn,
  .frequency-toggle,
  .amount-grid {
    display: none !important;
  }

  body {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-size: 12pt;
  }

  main {
    margin: 0 !important;
    padding: 0 !important;
  }

  .documents-table,
  .bank-account-card {
    border: 1px solid #000000 !important;
    page-break-inside: avoid;
  }

  a[href^="http"]:after {
    content: " (" attr(href) ")";
  }
}
/* --------------------------------------------------------------------------
   6. VISUALLY HIDDEN UTILITY & ACCESSIBLE CAROUSEL CONTROLS
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.slider-pause {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 5;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-sm, 4px);
  background: rgba(10, 27, 40, 0.86);
  color: #FFFFFF;
  font: 600 0.85rem/1.2 var(--font-sans, Arial, sans-serif);
  cursor: pointer;
}

.slider-pause:hover,
.slider-pause:focus-visible {
  background: #FFFFFF;
  color: var(--color-text-main, #0F2537);
}

/* Keep inactive carousel content out of keyboard navigation even in browsers
   that do not yet apply the inert attribute visually. */
.hero-slider .slide[aria-hidden="true"] {
  pointer-events: none;
}

@media (max-width: 575px) {
  .slider-pause {
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
  }
}


/* --------------------------------------------------------------------------
   7. PHASE 5 — ACCESSIBLE INTERACTION STATES
   -------------------------------------------------------------------------- */
.form-input:focus {
  outline: 3px solid var(--color-accent-text, #B85042) !important;
  outline-offset: 2px !important;
}

.nav-link:focus-visible,
.dropdown-link:focus-visible,
.footer-links a:focus-visible,
.footer-social-links a:focus-visible,
.trustee-social-links a:focus-visible,
.btn:focus-visible,
.filter-btn:focus-visible,
.amount-btn:focus-visible,
.freq-btn:focus-visible,
.tab-btn:focus-visible {
  outline: 3px solid var(--color-accent-text, #B85042) !important;
  outline-offset: 3px !important;
}

[aria-hidden="true"] {
  pointer-events: none;
}

.gallery-filters {
  margin-bottom: 1rem;
}