/* ============================================================
   A11Y.CSS - Accessibility styles (WCAG 2.2 AA)
   ============================================================ */

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  padding: 10px 20px;
  background: #00d4ff;
  color: #000 !important;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.1s;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* --- Focus Indicators --- */
*:focus-visible {
  outline: 3px solid #00d4ff !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}
.btn-custom:focus-visible,
.nav-link:focus-visible,
.card *:focus-visible {
  outline-offset: 2px !important;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.35) !important;
}

.btn-close:focus-visible {
  outline: 3px solid #00d4ff !important;
  outline-offset: 0 !important;
  border-radius: 4px;
}

/* --- 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;
  }
  .hero-bg { display: none; }
  .hero h1 { animation: none; }
  .fade-up { opacity: 1; transform: none; }
  .typing-effect {
    white-space: normal;
    border-right: none;
    animation: none;
  }
  .navbar-brand .brand-dot { animation: none; }
}

/* --- High Contrast / prefers-contrast --- */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #ffffff;
    --text-secondary: #f0f0f0;
    --text-muted: #cccccc;
    --bg-card: #000000;
    --bg-card-hover: #111111;
    --border-color: rgba(255, 255, 255, 0.3);
    --border-glow: rgba(0, 212, 255, 0.4);
  }
  .text-muted { color: #cccccc !important; }
  .opacity-50 { opacity: 0.85 !important; }
  .opacity-75 { opacity: 1 !important; }
  .navbar {
    background: #000 !important;
    border-bottom-color: #333 !important;
  }
  .card, .service-card, .project-card, .glass {
    border-width: 2px;
    border-color: rgba(255,255,255,0.3) !important;
  }
  .badge { border-width: 2px; font-weight: 700; }
  a, .nav-link, .btn-link {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .hero-badge { background: #00d4ff; color: #000; border: 2px solid #fff; }
  .hero-badge .badge-dot { background: #000; }
}

@media (prefers-contrast: more) {
  /* Same as high contrast */
}

/* --- prefers-color-scheme: light override for admin (admin uses fixed dark theme) --- */
@media (prefers-color-scheme: light) {
  body:not(.admin-body) .navbar {
    background: rgba(10, 14, 23, 0.95) !important;
  }
}

/* --- prefers-reduced-transparency --- */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .navbar,
  .hero-bg .gradient-sphere {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 14, 23, 1) !important;
  }
  .hero-bg .gradient-sphere { display: none; }
}

/* --- Screen Reader 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;
}
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* --- Aria live regions for screen readers --- */
[aria-live="polite"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
[aria-live="assertive"] {
  font-size: 1rem;
  font-weight: 700;
}

/* --- Contraste mínimo WCAG AA 4.5:1 específico para o tema escuro --- */
.text-light { color: #f1f5f9 !important; }
.text-primary { color: #00d4ff !important; }
.text-success { color: #00b894 !important; }
.text-warning { color: #fdcb6e !important; }
.text-danger { color: #ff6b6b !important; }
.text-info { color: #54d5f0 !important; }
.text-muted { color: #94a3b8 !important; }

/* Cards no admin: */
.card.border-secondary { border-color: #333 !important; }
.btn-outline-primary {
  border-color: #00d4ff;
  color: #00d4ff;
}

/* --- Minimum touch/click target: 44x44px --- */
.btn, .btn-custom, .nav-link, .filter-btn, .social-link, .btn-demo,
button, .navbar-toggler, .btn-close, .badge, .form-check-input {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-link {
  min-height: 44px;
  padding: 0.5rem 1rem !important;
}
.filter-btn {
  min-height: 44px;
  padding: 8px 20px;
}
.social-link {
  min-width: 44px;
  min-height: 44px;
}
.btn-demo {
  min-height: 44px;
  padding: 8px 18px;
}

/* Form fields */
.form-control, .form-select {
  min-height: 44px;
}

/* --- Ensure proper color contrast for badges and status indicators --- */
.status-badge.active {
  background: rgba(0, 184, 148, 0.2);
  color: #00b894;
  font-weight: 700;
}
.status-badge.inactive {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
  font-weight: 700;
}

/* --- Links must be distinguishable --- */
a:not(.btn):not(.btn-custom):not(.btn-demo):not(.social-link):not(.skip-link) {
  color: #54d5f0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:not(.btn):not(.btn-custom):not(.btn-demo):not(.social-link):not(.skip-link):hover {
  color: #00d4ff;
}

/* --- Animations disabled class for toggle --- */
.animations-disabled *,
.animations-disabled *::before,
.animations-disabled *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
.animations-disabled .hero-bg { display: none; }
.animations-disabled .fade-up { opacity: 1; transform: none; }

/* --- High contrast mode class for toggle --- */
.high-contrast-mode {
  --text-primary: #ffffff;
  --text-secondary: #f0f0f0;
  --text-muted: #cccccc;
  --bg-dark: #000000;
  --bg-card: #0a0a0a;
}
.high-contrast-mode .text-muted { color: #cccccc !important; }
.high-contrast-mode a { text-decoration: underline; }
.high-contrast-mode .card,
.high-contrast-mode .service-card,
.high-contrast-mode .project-card {
  border-width: 2px;
  border-color: #555 !important;
}

/* --- Large font mode --- */
.font-large {
  font-size: 1.2rem !important;
}
.font-large .small,
.font-large small {
  font-size: 1rem !important;
}
.font-large .navbar-brand {
  font-size: 1.5rem !important;
}
.font-large h1 { font-size: 3.5rem !important; }
.font-large h2 { font-size: 2.5rem !important; }
.font-large h3 { font-size: 1.75rem !important; }

/* --- Acessibilidade Toolbar --- */
.a11y-toolbar {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.a11y-toolbar button {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.a11y-toolbar button:hover,
.a11y-toolbar button:focus-visible {
  background: #00d4ff;
  color: #000;
  border-color: #00d4ff;
  outline: 3px solid rgba(0, 212, 255, 0.4);
}
.a11y-toolbar button.active {
  background: #00d4ff;
  color: #000;
}
@media (max-width: 768px) {
  .a11y-toolbar {
    bottom: 12px;
    left: 12px;
    flex-direction: row;
  }
}

/* --- Admin: Login page accessibility fixes --- */
.admin-body .login-page label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
.admin-body .login-page .login-error {
  border: 2px solid #ef4444;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: rgba(239, 68, 68, 0.1);
  color: #ff6b6b;
  font-weight: 600;
}

/* --- Ensure form labels are visible --- */
.form-label {
  color: #ccc !important;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

/* --- Required field indicator --- */
.required-field::after {
  content: ' *';
  color: #ff6b6b;
  font-weight: 700;
}

/* --- Project card: ensure keyboard navigation works --- */
.project-card .btn-demo:focus-visible,
.project-card a:focus-visible,
.project-card button:focus-visible {
  outline: 3px solid #00d4ff !important;
  outline-offset: 2px !important;
}

/* --- Filter buttons: active state visible --- */
.filter-btn.active {
  background: #00d4ff;
  color: #000;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  border-color: #00d4ff;
}

/* --- Ensure tables have proper styling --- */
.table caption {
  caption-side: top;
  color: #00d4ff;
  font-weight: 700;
  padding: 8px 0;
  text-align: left;
}

/* --- Stats section contrast --- */
.stat-number {
  color: #f1f5f9;
}
.stat-label {
  color: #94a3b8;
}

/* --- Hero section readability --- */
.hero-badge {
  border: 1px solid rgba(0, 212, 255, 0.3);
}
.hero-content p {
  color: #94a3b8;
}

/* --- Modal accessibility --- */
.modal-content {
  border: 1px solid #333;
}
.modal-header .btn-close {
  filter: brightness(1.5);
}
.modal-header .btn-close:focus-visible {
  outline: 3px solid #00d4ff !important;
  outline-offset: 0 !important;
}