/* ═══════════════════════════════════════════════════════
   100CLAN — Accessibility & UX Polish (global)
   Loaded on every page after rtl.css/mobile.css.
   ─────────────────────────────────────────────────────── */

/* ─── Skip-to-content link (visually hidden until focused) ─── */
.skip-to-content {
  position: absolute; top: -100px; left: 12px;
  background: var(--yellow, #E6BA38); color: #000;
  padding: 12px 20px; border-radius: 0 0 10px 10px;
  font-weight: 700; font-size: 14px; text-decoration: none;
  z-index: 99999; transition: top 0.2s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}
html[dir="rtl"] .skip-to-content,
html.lang-ar .skip-to-content { left: auto; right: 12px; }

/* ─── Focus-visible: clear yellow ring on keyboard nav ─── */
*:focus-visible {
  outline: 2px solid var(--yellow, #E6BA38) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
/* Don't draw ring on mouse clicks (modern browsers separate :focus and :focus-visible) */
*:focus:not(:focus-visible) { outline: none; }

/* ─── Form error messages: high-contrast + animated entry ─── */
[role="alert"],
.form-error,
.error-message {
  color: #ff6b6b; font-size: 13px; font-weight: 600;
  padding: 8px 12px; margin-top: 6px; border-radius: 8px;
  background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.2);
  animation: clan-error-in 0.18s ease-out;
}
@keyframes clan-error-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Modal dialog defaults (when role=dialog used) ─── */
[role="dialog"][aria-modal="true"] {
  outline: none;
}

/* ─── Reduced motion: respect user preference ─── */
@media (prefers-reduced-motion: reduce) {
  .skip-to-content { transition: none; }
}