/* 
 * ustwo Accessibility Microsite - Dark Theme Styles
 */

/* Global Dark Mode Styles */
.dark {
  color-scheme: dark;
}

.dark body {
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
}

.dark .page-wrapper {
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
}

/* Dark background theme for headers, footers, and sections */
.bg-dark-theme,
.bg-dark {
  background-color: var(--color-dark);
  color: var(--color-footer-text);
}

/* Navigation links in dark backgrounds (both header and footer) */
.bg-dark-theme a {
  color: var(--color-secondary);
}

.bg-dark-theme a:hover {
  color: var(--color-light);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-sm);
}

/* Navigation links in header and footer share the same style */
.bg-dark-theme .site-nav a,
.bg-dark-theme .footer-links a {
  color: var(--color-light);
  padding: var(--space-2);
  display: inline-block;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-base);
  font-weight: 500;
}

.bg-dark-theme .site-nav a:hover,
.bg-dark-theme .footer-links a:hover {
  color: var(--color-light);
  background-color: rgba(255, 255, 255, 0.1);
}

.bg-dark-theme .site-nav a[aria-current="page"],
.bg-dark-theme .footer-links a[aria-current="page"] {
  font-weight: 700;
  color: var(--color-secondary);
}


/* Regular links in dark areas */
.bg-dark-theme p a,
.bg-dark-theme li:not(.site-nav li, .footer-links li, .company-links li) a,
.bg-dark-theme .regular-link {
  color: var(--color-secondary);
}

/* Button styles for dark backgrounds */
.bg-dark-theme button,
.bg-dark-theme .button {
  background-color: var(--color-secondary);
  color: var(--color-dark);
  border-color: var(--color-secondary);
}

.bg-dark-theme button:hover,
.bg-dark-theme .button:hover {
  background-color: var(--color-light);
  color: var(--color-secondary);
  border-color: var(--color-light);
}

.bg-dark-theme .button-outline {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.bg-dark-theme .button-outline:hover {
  background-color: var(--color-secondary);
  color: var(--color-dark);
}

/* Dark sections styling */
.section-dark,
.bg-dark {
  padding: var(--space-12) var(--space-4);
}

footer h2,
.section-dark h2 {
  font-size: var(--font-size-section-title);
  color: var(--color-light);
}

footer p,
.section-dark p {
  color: var(--color-footer-text);
}

/* Contribute section styles */
.contribute-section {
  background-color: var(--color-discover);
  color: var(--color-dark);
}

.contribute-section h2,
.contribute-section p {
  color: var(--color-dark);
}

.dark body {
  background-color: var(--color-gray-900);
}

/* Header styles in dark mode */
.dark .site-header {
  background-color: var(--color-gray-900);
  /* border-bottom: 1px solid var(--color-gray-700); */
}

.dark .site-logo svg {
  fill: white;
}

.dark .site-nav a {
  color: var(--color-gray-200);
}

.dark .site-nav a:hover {
  color: var(--color-lightBlue);
  /* background-color: var(--color-gray-700); */
}

.dark .site-nav a[aria-current="page"] {
  border-color: var(--color-lightBlue);
  font-weight: 600;
}

.dark .accessibility-text {
  color: var(--color-gray-200);
}

/* Card styles in dark mode */
.dark .card,
.dark .pattern-card,
.dark .tool-card-link.pattern-card {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-700);
  color: var(--color-gray-100);
}

.dark .tool-card-link.pattern-card:hover {
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.1);
}

.dark .principle-card {
  border-color: var(--color-gray-700);
}

.dark .card:hover,
.dark .pattern-card:hover,
.dark .principle-card-link:hover {
  /* border-color: var(--color-gray-600); */
  background-color: var(--color-gray-800);
}

.dark .card h2,
.dark .card h3,
.dark .pattern-card h2,
.dark .pattern-card h3,
.dark .principle-card h2,
.dark .principle-card h3,
.dark .tool-card-link.pattern-card h3 {
  color: var(--color-gray-100);
}

.dark .card p,
.dark .pattern-card p,
.dark .principle-card p,
.dark .tool-card-link.pattern-card p {
  color: var(--color-gray-300);
}

.dark .pattern-categories span, 
.dark .tool-disciplines span,
.dark .responsible-pills span {
  color: var(--color-gray-300);
  background: rgba(255, 255, 255, 0.2);
}

.dark .completion-footer span {
  /* background: var(--color-gray-800); */
  color: black;
}

/* Button styles in dark mode */
.dark .button {
  background-color: var(--color-blue);
  color: var(--color-light);
  /* border-color: var(--color-blue); */
}


.dark .button:hover {
  background-color: #434bfe;
}

.dark figcaption {
  color: var(--color-gray-300);
}

.dark .guide-section {
  border-color: var(--color-gray-700);
}

.dark .practice-area,
.dark .keyboard-visual {
  background-color: var(--color-gray-800);
}

.dark .practice-area li {
  color: white;
}

/* .dark .button-outline,
.dark .buttonInvert {
  background-color: transparent;
  color: var(--color-gray-200);
  border-color: var(--color-gray-500);
}

.dark .button-outline:hover,
.dark .buttonInvert:hover {
  background-color: var(--color-gray-200);
  color: var(--color-dark);
  border-color: var(--color-gray-200);
} */

/* Text and headings in dark mode */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark .h1,
.dark .h2,
.dark .h2Bigger,
.dark #page-header {
  color: var(--color-gray-100);
}

.dark p,
.dark li,
.dark span {
  color: var(--color-gray-300);
}

.dark .introText {
  color: var(--color-gray-200);
}

/* Links in dark mode */
.dark a,
.dark p a, 
.dark li:not(.site-nav li, .pattern-links li) a,
.dark .regular-link {
  color: var(--color-lightBlue);
}

.dark a:hover {
  
}

/* Form styles in dark mode */
.dark input,
.dark textarea,
.dark select {
  background-color: var(--color-gray-800);
  border: 1px solid var(--color-gray-600);
  color: var(--color-gray-100);
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: var(--color-blue);
  background-color: var(--color-gray-750);
}

.dark label {
  color: var(--color-gray-200);
}

/* Section backgrounds in dark mode */
.dark .section {
  background-color: transparent;
}

.dark .section.backgroundOffWhite,
.dark .section[style*="background"] {
  background-color: var(--color-gray-900) !important;
}

.dark .section.backgroundOffWhite, 
.dark .bg-gray-50, .dark .bg-gray-100 {
  background-color: var(--color-gray-900) !important;
}

/* Footer styles in dark mode */
.dark .site-footer {
  background-color: black;
}

/* Main content area dark mode */
.dark main,
.dark .site-main {
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
}

/* CallToAction styles in dark mode */
.dark .callToAction {
  color: var(--color-gray-100);
}

.dark .callToAction:hover {

}

.dark .callToAction::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8L12 8M8 4L12 8L8 12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.dark .light-background {
  background-color: var(--color-gray-800) !important;
}


/* Section backgrounds in dark mode */
.dark section,
.dark .section {
  background-color: transparent;
}

.dark section[aria-labelledby="hero-heading"],
.dark .hero-section {
  background-color: var(--color-gray-900);
}

.dark .content-section {
  background-color: var(--color-gray-900);
}

.dark .content-section:nth-child(even) {
  background-color: var(--color-gray-900);
}

.dark .section.backgroundOffWhite,
.dark .bg-gray-50,
.dark .bg-gray-100 {
  background-color: var(--color-gray-900) !important;
}

/* Filter section */
.dark .filter-section {
  background-color: var(--color-gray-800);
  border-bottom-color: var(--color-gray-700);
}

/* Principle card hover states */
.dark .principle-card-link:hover {
  /* background-color: var(--color-gray-800); */
}

.dark .principle-card-link:focus,
.dark .principle-card-link:focus-visible {
  /* background-color: rgba(255, 229, 0, 0.1); */
}

/* Pattern and tool cards full width */
.dark .full-width-card {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.dark .full-width-card:hover {
  border-color: var(--color-gray-600);
  background-color: var(--color-gray-750);
}

.dark .full-width-card h3 {
  color: var(--color-gray-100);
}

.dark .tool-card-link.pattern-card:hover h3 {
  color: var(--color-lightBlue);
}

.dark .tool-card-link:hover .external-link-icon svg {
  fill: var(--color-lightBlue);
}

.dark .full-width-card .tool-description,
.dark .full-width-card p {
  color: var(--color-gray-300);
}

/* Pattern items */
.dark .pattern-item {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.dark .pattern-item:hover {
  /* border-color: var(--color-gray-600);
  background-color: var(--color-gray-800); */
}

.dark .pattern-item h3 {
  color: var(--color-gray-100);
}

.dark .pattern-item p {
  color: var(--color-gray-300);
}

/* Pattern link cards */
.dark .pattern-link-card {
  /* background-color: var(--color-gray-800); */
  /* border-color: var(--color-gray-700); */
}

.dark .pattern-link-card:hover {
  /* border-color: var(--color-blue); */
  /* background-color: var(--color-gray-750); */
}

/* Hero subtitle */
.dark .hero-subtitle {
  color: var(--color-gray-200);
}

.dark .button-link {
  color: var(--color-lightBlue);
}



/* High contrast mode support */
@media (prefers-contrast: high) {
  .dark .card,
  .dark .pattern-card,
  .dark .principle-card {
    border: 2px solid var(--color-gray-400);
  }
  
  .dark .button {
    border: 2px solid currentColor;
  }
}



.dark .checklist-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.05);
}