/* Accessibility Styles for Magnus Chile */
/* Language Switcher, Dark Mode, and High Contrast */

/* ============================================
   ACCESSIBILITY PANEL
   ============================================ */

#accessibility-panel {
  position: fixed;
  top: 80px;
  left: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(11, 47, 51, 0.95);
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.acc-btn {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acc-btn:hover {
  background: #C9A227;
  border-color: #C9A227;
  color: #0B2F33;
  transform: scale(1.05);
}

.acc-btn:focus {
  outline: 3px solid #C9A227;
  outline-offset: 2px;
}

/* ============================================
   DARK MODE - IMPROVED CONTRAST
   ============================================ */

body.dark-mode {
  background-color: #0d1f23 !important;
  color: #f0f0f0 !important;
}

body.dark-mode .header {
  background: #08181c !important;
}

body.dark-mode .article-content {
  background: #122a2f !important;
  color: #f0f0f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #ffffff !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div {
  color: #e8e8e8 !important;
}

body.dark-mode .highlight-box {
  background: #1a3d44 !important;
  border-left-color: #4dd0e1 !important;
  color: #f0f0f0 !important;
}

body.dark-mode .stat-box {
  background: #08181c !important;
  color: #ffffff !important;
}

body.dark-mode .stat-number {
  color: #ffd54f !important;
}

body.dark-mode .tag {
  background: #1a3d44 !important;
  color: #80deea !important;
}

body.dark-mode .cta-box {
  background: linear-gradient(135deg, #08181c 0%, #1a3d44 100%) !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #122a2f !important;
  color: #ffffff !important;
  border-color: #4dd0e1 !important;
}

body.dark-mode table {
  background: #122a2f !important;
}

body.dark-mode table tr:nth-child(even) {
  background: #1a3d44 !important;
}

body.dark-mode table th {
  background: #1a3d44 !important;
  color: #ffffff !important;
}

body.dark-mode table td {
  color: #e8e8e8 !important;
  border-color: #2a555e !important;
}

body.dark-mode blockquote {
  border-left-color: #ffd54f !important;
  color: #d0d0d0 !important;
}

body.dark-mode .footer {
  background: #08181c !important;
}

body.dark-mode a:not(.cta-button):not(.back-link) {
  color: #80deea !important;
}

body.dark-mode .meta {
  color: #b0b0b0 !important;
}

body.dark-mode .article-summary {
  color: #d0d0d0 !important;
}

body.dark-mode .category {
  color: #4dd0e1 !important;
}

body.dark-mode li {
  color: #e8e8e8 !important;
}

body.dark-mode ul,
body.dark-mode ol {
  color: #e8e8e8 !important;
}

/* Dark mode for React app sections */
body.dark-mode #root {
  background-color: #0d1f23 !important;
}

body.dark-mode [class*="bg-white"],
body.dark-mode [class*="bg-gray-50"],
body.dark-mode [class*="bg-[#F5F5F0]"] {
  background-color: #122a2f !important;
}

body.dark-mode [class*="text-gray-700"],
body.dark-mode [class*="text-gray-600"] {
  color: #e0e0e0 !important;
}

body.dark-mode [class*="text-gray-500"] {
  color: #b0b0b0 !important;
}

body.dark-mode [class*="text-gray-900"],
body.dark-mode [class*="text-gray-800"] {
  color: #ffffff !important;
}

body.dark-mode [class*="border-gray-200"] {
  border-color: #2a555e !important;
}

body.dark-mode [class*="bg-[#0B2F33]"] {
  background-color: #08181c !important;
}

body.dark-mode [class*="text-[#0B2F33]"] {
  color: #ffffff !important;
}

body.dark-mode [class*="text-[#C9A227]"] {
  color: #ffd54f !important;
}

body.dark-mode [class*="bg-[#C9A227]"] {
  background-color: #ffd54f !important;
  color: #0d1f23 !important;
}

/* Cards in dark mode */
body.dark-mode [class*="rounded-2xl"],
body.dark-mode [class*="rounded-xl"] {
  background-color: #122a2f !important;
  border-color: #2a555e !important;
}

/* Simulator section in dark mode */
body.dark-mode [class*="simulator"] {
  background-color: #122a2f !important;
}

body.dark-mode label {
  color: #e0e0e0 !important;
}

body.dark-mode .text-3xl,
body.dark-mode .text-4xl,
body.dark-mode .text-5xl {
  color: #ffffff !important;
}

/* ============================================
   HIGH CONTRAST MODE - IMPROVED
   ============================================ */

body.high-contrast {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast .header {
  background: #000000 !important;
  border-bottom: 4px solid #ffff00;
}

body.high-contrast .article-content {
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff;
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6 {
  color: #ffff00 !important;
  text-shadow: 2px 2px 0 #000000;
}

body.high-contrast p,
body.high-contrast span,
body.high-contrast div {
  color: #ffffff !important;
}

body.high-contrast .highlight-box {
  background: #000000 !important;
  border-left: 6px solid #ffff00 !important;
  color: #ffffff !important;
  border: 2px solid #ffff00;
}

body.high-contrast .stat-box {
  background: #000000 !important;
  border: 4px solid #ffff00;
}

body.high-contrast .stat-number {
  color: #ffff00 !important;
  text-shadow: 2px 2px 0 #000000;
}

body.high-contrast .tag {
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #ffff00;
  font-weight: 700;
}

body.high-contrast .cta-box {
  background: #000000 !important;
  border: 4px solid #ffff00;
}

body.high-contrast .cta-button {
  background: #ffff00 !important;
  color: #000000 !important;
  border: 3px solid #ffff00;
  font-weight: 800;
  text-shadow: none;
}

body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
  background: #000000 !important;
  color: #ffffff !important;
  border: 4px solid #ffff00 !important;
  font-weight: 600;
}

body.high-contrast table {
  background: #000000 !important;
  border: 3px solid #ffffff;
}

body.high-contrast table th {
  background: #ffff00 !important;
  color: #000000 !important;
  font-weight: 800;
  border: 2px solid #000000;
}

body.high-contrast table td {
  border: 2px solid #ffffff;
  color: #ffffff !important;
}

body.high-contrast table tr:nth-child(even) {
  background: #111111 !important;
}

body.high-contrast blockquote {
  border-left: 6px solid #ffff00 !important;
  color: #ffffff !important;
  background: #111111 !important;
}

body.high-contrast .footer {
  background: #000000 !important;
  border-top: 4px solid #ffff00;
}

body.high-contrast a {
  color: #00ffff !important;
  text-decoration: underline !important;
  font-weight: 600;
}

body.high-contrast a:hover {
  color: #ffff00 !important;
  background: #000000 !important;
}

body.high-contrast .meta {
  color: #ffffff !important;
}

body.high-contrast .article-summary {
  color: #ffffff !important;
}

body.high-contrast .category {
  color: #ffff00 !important;
  font-weight: 800;
}

body.high-contrast .back-link {
  color: #ffff00 !important;
  font-weight: 800;
}

body.high-contrast .logo {
  filter: brightness(1.5) contrast(1.5);
}

body.high-contrast li {
  color: #ffffff !important;
}

body.high-contrast ul,
body.high-contrast ol {
  color: #ffffff !important;
}

body.high-contrast strong {
  color: #ffff00 !important;
}

/* High contrast for React app sections — comprehensive */
body.high-contrast #root {
  background-color: #000000 !important;
}

/* Section backgrounds */
body.high-contrast section,
body.high-contrast footer,
body.high-contrast header {
  background-color: #000000 !important;
}

/* White / light backgrounds → black */
body.high-contrast [class*="bg-white"] {
  background-color: #000000 !important;
}

body.high-contrast [class*="bg-gray-50"],
body.high-contrast [class*="bg-gray-100"] {
  background-color: #111111 !important;
}

/* Dark backgrounds → pure black with yellow border */
body.high-contrast [class*="bg-\[#0B2F33\]"] {
  background-color: #000000 !important;
}

/* Gold/accent backgrounds → high-vis yellow */
body.high-contrast [class*="bg-\[#C9A227\]"] {
  background-color: #ffff00 !important;
  color: #000000 !important;
}

/* Text colors — all grays → white for readability */
body.high-contrast [class*="text-gray-"],
body.high-contrast [class*="text-\[#0B2F33\]"] {
  color: #ffffff !important;
}

/* Semi-transparent white text → full white */
body.high-contrast [class*="text-white\/50"],
body.high-contrast [class*="text-white\/60"],
body.high-contrast [class*="text-white\/70"],
body.high-contrast [class*="text-white\/80"],
body.high-contrast [class*="text-white\/90"] {
  color: #ffffff !important;
}

/* Gold text → bright yellow */
body.high-contrast [class*="text-\[#C9A227\]"] {
  color: #ffff00 !important;
}

/* Semi-transparent backgrounds → opaque */
body.high-contrast [class*="bg-white\/10"],
body.high-contrast [class*="bg-white\/5"],
body.high-contrast [class*="bg-white\/20"] {
  background-color: #111111 !important;
  border: 2px solid #ffffff !important;
}

body.high-contrast [class*="bg-\[#C9A227\]\/10"],
body.high-contrast [class*="bg-\[#C9A227\]\/20"] {
  background-color: #222200 !important;
  border: 2px solid #ffff00 !important;
}

/* Borders */
body.high-contrast [class*="border-gray-"],
body.high-contrast [class*="border-white\/"] {
  border-color: #ffffff !important;
}

body.high-contrast [class*="border-\[#C9A227\]"] {
  border-color: #ffff00 !important;
}

/* Cards — add visible borders */
body.high-contrast [class*="rounded-2xl"],
body.high-contrast [class*="rounded-3xl"] {
  border: 2px solid #ffffff !important;
}

/* Headings — yellow on black */
body.high-contrast h1, body.high-contrast h2,
body.high-contrast h3, body.high-contrast h4 {
  color: #ffff00 !important;
}

/* Body text, labels, paragraphs */
body.high-contrast p, body.high-contrast label,
body.high-contrast span, body.high-contrast div,
body.high-contrast li {
  color: #ffffff !important;
}

/* Buttons: gold → bright yellow */
body.high-contrast button[class*="bg-\[#C9A227\]"],
body.high-contrast a[class*="bg-\[#C9A227\]"] {
  background-color: #ffff00 !important;
  color: #000000 !important;
  border: 3px solid #ffff00 !important;
  font-weight: 800 !important;
}

/* Dark buttons */
body.high-contrast button[class*="bg-\[#0B2F33\]"],
body.high-contrast a[class*="bg-\[#0B2F33\]"] {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border: 3px solid #ffff00 !important;
  font-weight: 800 !important;
}

/* Form inputs */
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #ffff00 !important;
  font-weight: 600 !important;
}

body.high-contrast input::placeholder,
body.high-contrast textarea::placeholder {
  color: #999999 !important;
}

/* Range slider */
body.high-contrast input[type="range"] {
  accent-color: #ffff00 !important;
}

/* Links */
body.high-contrast a {
  color: #00ffff !important;
  text-decoration: underline !important;
}

body.high-contrast a:hover {
  color: #ffff00 !important;
}

/* Stat numbers — bright and visible */
body.high-contrast [class*="font-bold"] {
  color: #ffff00 !important;
}

/* WhatsApp FAB */
body.high-contrast [class*="bg-\[#25D366\]"] {
  background-color: #00ff00 !important;
  border: 3px solid #ffffff !important;
}

/* Backdrop blur — remove (hard to see on high contrast) */
body.high-contrast [class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Images — increase contrast, but NOT logos (handled by JS swap) */
body.high-contrast img:not([src*="magnus"]):not([alt="Magnus"]) {
  filter: contrast(1.3) brightness(1.1);
}
body.high-contrast img[src*="magnus"] {
  filter: none !important;
}

/* Accessibility panel itself */
body.high-contrast #accessibility-panel {
  background: #000000 !important;
  border: 3px solid #ffff00 !important;
}

body.high-contrast .acc-btn {
  border-color: #ffff00 !important;
  color: #ffff00 !important;
}

/* ============================================
   RESPONSIVE ACCESSIBILITY PANEL
   ============================================ */

@media (max-width: 768px) {
  #accessibility-panel {
    top: auto;
    bottom: 80px;
    left: 10px;
    right: auto;
    flex-direction: row;
    padding: 8px;
  }
  
  .acc-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

/* ============================================
   FOCUS STYLES FOR ACCESSIBILITY
   ============================================ */

body.dark-mode *:focus,
body.high-contrast *:focus {
  outline: 3px solid #C9A227 !important;
  outline-offset: 2px !important;
}

body.high-contrast *:focus {
  outline: 4px solid #ffff00 !important;
  outline-offset: 3px !important;
}

/* Skip to content link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #C9A227;
  color: #0B2F33;
  padding: 8px 16px;
  z-index: 10000;
  font-weight: 600;
  transition: top 0.3s;
}

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

body.dark-mode .skip-link {
  background: #4dd0e1;
  color: #000;
}

body.high-contrast .skip-link {
  background: #ffff00;
  color: #000;
  border: 3px solid #fff;
  font-weight: 800;
}