@import url("theme-system.css?v=20260911-1");

/**
 * Max Exam Lab - WCAG 2.1 AA Accessibility Foundation
 */

/* ============================================================
   1. FOCUS INDICATORS FOR KEYBOARD USERS
   ============================================================ */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 3px solid var(--max-accent, #0F3D36);
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--max-accent, #0F3D36);
  outline-offset: 2px;
}

body.max-landing-mode :focus-visible,
body.dark-mode :focus-visible,
.dark-theme :focus-visible,
.launch-footer :focus-visible,
.trust-section :focus-visible,
.premium-plan :focus-visible,
.category-card :focus-visible,
.auth-backdrop :focus-visible {
  outline: 3px solid var(--max-accent, #45dec8);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   2. SKIP NAVIGATION LINK
   ============================================================ */
.skip-link {
  position: absolute;
  top: -60px;
  left: 14px;
  background: #0F3D36;
  color: #ffffff !important;
  padding: 10px 18px;
  text-decoration: none;
  border-radius: 8px;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  z-index: 999999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border: 2px solid #45dec8;
  transition: top 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 14px;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* ============================================================
   3. VISUALLY HIDDEN (SCREEN READER ACCESSIBLE)
   ============================================================ */
.visually-hidden,
.sr-only {
  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-width: 0 !important;
}

/* ============================================================
   4. COLOR CONTRAST COMPLIANCE (WCAG AA 4.5:1+)
   ============================================================ */
body {
  background-color: var(--max-bg, #ffffff);
  color: var(--max-text, #1a1a1a);
}

.error-message,
.auth-error,
.input-error,
.validation-error,
.gap-input-warning {
  color: #b91c1c !important;
  font-weight: 600;
}

.success-message,
.auth-success,
.status-success {
  color: #065f46 !important;
  font-weight: 600;
}

.help-text {
  display: block;
  font-size: 12px;
  color: var(--max-text-secondary, #4b5563);
  margin-top: 4px;
  line-height: 1.4;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-group label {
  font-weight: 600;
  font-size: 14px;
  color: var(--max-text, #1a1a1a);
}

body.max-landing-mode .form-group label {
  color: var(--max-text, #e5f3f1);
}

.accessible-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
  color: var(--max-text, #1a1a1a);
}

.accessible-table th,
.accessible-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--max-border, #d1e2df);
}

.accessible-table th {
  background: var(--max-surface-elevated, #f0f7f6);
  font-weight: 700;
  color: var(--max-text, #0F3D36);
}

.accessible-table tr:hover {
  background: color-mix(in srgb, var(--max-surface-elevated, #f8fbfa) 72%, transparent);
}

progress.accessible-progress,
.accessible-progress {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--max-border, rgba(15, 61, 54, 0.2));
  background-color: var(--max-surface-elevated, #e4eeec);
}

progress.accessible-progress::-webkit-progress-bar {
  background-color: var(--max-surface-elevated, #e4eeec);
  border-radius: 999px;
}

progress.accessible-progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--max-accent, #0F3D36), var(--max-accent-strong, #287c78));
  border-radius: 999px;
}

progress.accessible-progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--max-accent, #0F3D36), var(--max-accent-strong, #287c78));
  border-radius: 999px;
}

/* Step 9.2: The landing header must be a complete color pair in either theme.
   This prevents late landing bundles from combining a light surface with dark-
   theme text tokens or vice versa. */
html[data-theme="light"] body.max-landing-mode header.site-header {
  background: #ffffff !important;
  color: #10232e !important;
  border-bottom-color: #d6e0e4 !important;
}
html[data-theme="light"] body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link {
  color: #425761 !important;
  background: transparent !important;
}
html[data-theme="light"] body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link:hover,
html[data-theme="light"] body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link:focus-visible,
html[data-theme="light"] body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link.active,
html[data-theme="light"] body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link[aria-current="page"] {
  color: #07545c !important;
  background: #e7f1f3 !important;
}
html[data-theme="light"] body.max-landing-mode header.site-header #languageMenuButton.language-menu-toggle,
html[data-theme="light"] body.max-landing-mode header.site-header #signInBtn.account-btn {
  background: #ffffff !important;
  background-image: none !important;
  color: #10232e !important;
  border-color: #a8bac2 !important;
  box-shadow: none !important;
}
html[data-theme="light"] body.max-landing-mode header.site-header #languageMenuButton.language-menu-toggle [data-language-current],
html[data-theme="light"] body.max-landing-mode header.site-header #signInBtn.account-btn .wide-label,
html[data-theme="light"] body.max-landing-mode header.site-header #signInBtn.account-btn .short-label {
  color: #10232e !important;
}

html[data-theme="dark"] body.max-landing-mode header.site-header,
html:not([data-theme]) body.max-landing-mode header.site-header {
  background: #07191d !important;
  color: #eefaff !important;
  border-bottom-color: #244048 !important;
}
html[data-theme="dark"] body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link,
html:not([data-theme]) body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link {
  color: #d4e9ee !important;
  background: transparent !important;
}
html[data-theme="dark"] body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link:hover,
html[data-theme="dark"] body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link:focus-visible,
html[data-theme="dark"] body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link.active,
html[data-theme="dark"] body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link[aria-current="page"],
html:not([data-theme]) body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link:hover,
html:not([data-theme]) body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link:focus-visible,
html:not([data-theme]) body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link.active,
html:not([data-theme]) body.max-landing-mode header.site-header nav.header-quick-links a.header-quick-link[aria-current="page"] {
  color: #8ff4e3 !important;
  background: #103036 !important;
}
html[data-theme="dark"] body.max-landing-mode header.site-header #languageMenuButton.language-menu-toggle,
html[data-theme="dark"] body.max-landing-mode header.site-header #signInBtn.account-btn,
html:not([data-theme]) body.max-landing-mode header.site-header #languageMenuButton.language-menu-toggle,
html:not([data-theme]) body.max-landing-mode header.site-header #signInBtn.account-btn {
  background: #10272d !important;
  background-image: none !important;
  color: #eefaff !important;
  border-color: #3a5961 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.max-landing-mode header.site-header #languageMenuButton.language-menu-toggle [data-language-current],
html[data-theme="dark"] body.max-landing-mode header.site-header #signInBtn.account-btn .wide-label,
html[data-theme="dark"] body.max-landing-mode header.site-header #signInBtn.account-btn .short-label,
html:not([data-theme]) body.max-landing-mode header.site-header #languageMenuButton.language-menu-toggle [data-language-current],
html:not([data-theme]) body.max-landing-mode header.site-header #signInBtn.account-btn .wide-label,
html:not([data-theme]) body.max-landing-mode header.site-header #signInBtn.account-btn .short-label {
  color: #eefaff !important;
}

/* Step 9.2: Signed-out dashboard gate contrast. */
body #gate.gate {
  background: #eef4f6 !important;
  color: #10232e !important;
}
body #gate.gate .gate-card {
  background: #ffffff !important;
  color: #10232e !important;
  border-color: #c4d1d7 !important;
}
body #gate.gate .gate-card #gateTitle {
  color: #10232e !important;
}
body #gate.gate .gate-card #gateText {
  color: #435862 !important;
}
html[data-theme="dark"] body #gate.gate {
  background: #07131c !important;
  color: #eefaff !important;
}
html[data-theme="dark"] body #gate.gate .gate-card {
  background: #0f1b29 !important;
  color: #eefaff !important;
  border-color: rgba(79,238,241,.22) !important;
}
html[data-theme="dark"] body #gate.gate .gate-card #gateTitle {
  color: #eefaff !important;
}
html[data-theme="dark"] body #gate.gate .gate-card #gateText {
  color: #b7c8d1 !important;
}

/* ============================================================
   5. RESIZABLE TEXT & SCALING
   ============================================================ */
* {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ============================================================
   6. REDUCED MOTION SUPPORT (VESTIBULAR DISORDERS)
   ============================================================ */
@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;
  }
}