/**
 * @file
 * Accessibility overrides for the iDeeksha theme.
 * Loaded separately to ensure modularity and clean separations.
 */

/* 1. Global Keyboard Focus Indicators (WCAG 2.4.7 Focus Visible) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid #087f5b !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(8, 127, 91, 0.35) !important;
}

/* 2. Skip Link Visual Appearance on Focus (WCAG 2.4.1 Bypass Blocks) */
.skip-link.focusable:focus-visible {
  position: fixed !important;
  clip: auto !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  top: 15px;
  left: 15px;
  z-index: 999999;
  padding: 12px 24px;
  background-color: #087f5b;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-radius: 6px;
  border: 2px solid #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* 3. Keyboard Submenu Dropdown Support (WCAG 2.1.1 Keyboard) */
#mainMenu .nav-item.dropdown:focus-within > .custom-submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#mainMenu .dropdown-submenu:focus-within > .nested-submenu {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Mobile responsive menu keyboard dropdown compatibility */
@media (max-width: 991.98px) {
  #mainMenu .nav-item.dropdown:focus-within > .custom-submenu,
  #mainMenu .dropdown-submenu:focus-within > .nested-submenu {
    display: block;
  }
}

/* 4. Prevent focus outlines on programmatically focused containers (tabindex="-1") */
[tabindex="-1"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 5. Accessibility Controls Styles */

/* Active state for Accessibility Cards */
.accessibility-card.active {
  background-color: #087f5b !important;
  color: #ffffff !important;
  outline: 2px solid #044431 !important;
  box-shadow: 0 6px 14px rgba(8, 127, 91, 0.25) !important;
}
.accessibility-card.active strong,
.accessibility-card.active span,
.accessibility-card.active i {
  color: #ffffff !important;
}

/* Dark Contrast Mode */
body.accessibility-dark-contrast,
body.accessibility-dark-contrast *:not(#accessibilityMenu):not(#accessibilityMenu *):not(.accessibility-overlay):not(.accessibility-btn):not(.accessibility-btn *) {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
}
body.accessibility-dark-contrast a:not(#accessibilityMenu *):not(.accessibility-btn *) {
  color: #ffff00 !important;
  text-decoration: underline !important;
}
body.accessibility-dark-contrast a:not(#accessibilityMenu *):not(.accessibility-btn *):hover {
  color: #00ffff !important;
}
body.accessibility-dark-contrast button:not(#accessibilityMenu *):not(.accessibility-btn *),
body.accessibility-dark-contrast input:not(#accessibilityMenu *),
body.accessibility-dark-contrast select:not(#accessibilityMenu *),
body.accessibility-dark-contrast textarea:not(#accessibilityMenu *) {
  border: 2px solid #ffffff !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Invert Mode */
html.accessibility-invert {
  background-color: #000000 !important;
}
/* Prevent media elements from being inverted */
html.accessibility-invert img,
html.accessibility-invert video,
html.accessibility-invert iframe,
html.accessibility-invert .gov-logo,
html.accessibility-invert .brand-logo,
html.accessibility-invert .social-circle,
html.accessibility-invert [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Highlight Links */
body.accessibility-highlight-links a {
  background-color: #ffff00 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  outline: 2px dashed #000000 !important;
  outline-offset: 1px !important;
}

/* Default / Large Cursor */
body.accessibility-default-cursor,
body.accessibility-default-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23000000' stroke='%23ffffff' stroke-width='2' d='M0,0 L0,22 L6,16 L12,28 L16,26 L10,14 L18,14 Z'/%3E%3C/svg%3E"), auto !important;
}

/* Hide Images */
body.accessibility-hide-images img,
body.accessibility-hide-images svg:not(.fa-solid):not(.fa-regular):not(.fa-brands),
body.accessibility-hide-images [style*="background-image"] {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Pause Animations */
body.accessibility-pause-animation,
body.accessibility-pause-animation * {
  animation: none !important;
  transition: none !important;
  animation-play-state: paused !important;
}

/* Text Spacing */
body.accessibility-text-spacing,
body.accessibility-text-spacing * {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
  line-height: 1.8 !important;
}

/* Screen Reader Highlight Outline */
body.accessibility-screen-reader *:hover {
  outline: 3px solid #ff7100 !important;
  outline-offset: 2px !important;
  cursor: help !important;
}

/* 6. Dynamic Color Themes */
body.theme-color-1 {
  --theme-primary: #4f6ec5;
  --theme-primary-hover: #3b549e;
  --theme-bg-gradient: linear-gradient(90deg, #4f6ec5, #34a637);
}
body.theme-color-2 {
  --theme-primary: #5578d6;
  --theme-primary-hover: #405ca8;
  --theme-bg-gradient: linear-gradient(90deg, #5578d6, #3b82f6);
}
body.theme-color-3 {
  --theme-primary: #2d176d;
  --theme-primary-hover: #1e0e4b;
  --theme-bg-gradient: linear-gradient(90deg, #2d176d, #6366f1);
}
body.theme-color-4 {
  --theme-primary: #f98200;
  --theme-primary-hover: #c26500;
  --theme-bg-gradient: linear-gradient(90deg, #f98200, #ff9e3b);
}

body.theme-color-1,
body.theme-color-2,
body.theme-color-3,
body.theme-color-4 {
  /* Top Sitemap / Contact Bar */
  .top-header1 {
    background: var(--theme-bg-gradient) !important;
  }

  /* Main Menu Navbar Background ONLY — NOT the logo/title header row */
  .custom-navbar {
    background: var(--theme-bg-gradient) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18) !important;
  }

  /* Submenu hover — coloured background + white text so it is always readable */
  #mainMenu .custom-submenu a:hover,
  #mainMenu .dropdown-submenu:hover > a {
    background-color: var(--theme-primary) !important;
    color: #ffffff !important;
    padding-left: 17px;
  }

  /* Submenu top accent bar */
  #mainMenu .custom-submenu {
    border-top: 4px solid var(--theme-primary) !important;
  }

  /* Buttons and CTAs */
  .primary-cta,
  .view-all,
  .explore-events-btn,
  .kd-view-link,
  .impact-btn,
  .accessibility-btn,
  .search-float,
  .reset-btn,
  .btn,
  button:not(#accessibilityMenu):not(#accessibilityMenu *):not(.accessibility-btn):not(.accessibility-btn *),
  input[type="submit"] {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #ffffff !important;
  }
  
  .primary-cta:hover,
  .view-all:hover,
  .explore-events-btn:hover,
  .kd-view-link:hover,
  .impact-btn:hover,
  .accessibility-btn:hover,
  .search-float:hover,
  .reset-btn:hover,
  .btn:hover,
  button:not(#accessibilityMenu):not(#accessibilityMenu *):not(.accessibility-btn):not(.accessibility-btn *):hover,
  input[type="submit"]:hover {
    background-color: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
  }

  /* Outline CTAs */
  .outline-cta {
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
  }
  .outline-cta:hover {
    background-color: var(--theme-primary) !important;
    color: #ffffff !important;
  }
  
  /* Badges and Text Accents */
  .follow-label,
  .contact-icon,
  .date-card .mon,
  .kd-stat-icon i,
  .sectoral-icon i,
  .sectoral-explore,
  .slider-arrow {
    color: var(--theme-primary) !important;
  }
  
  .slider-progress-bar {
    background-color: var(--theme-primary) !important;
  }

  .about-menu-box h2::after {
    background-color: var(--theme-primary) !important;
  }

  .title-line i {
    color: var(--theme-primary) !important;
  }

  /* Titles and Headings */
  .platform-title,
  .hero-title,
  .hero-title span,
  h1:not(#accessibilityMenu *),
  h2:not(#accessibilityMenu *),
  h3:not(#accessibilityMenu *),
  .section-title {
    color: var(--theme-primary) !important;
  }
}