/** * Accessibility Controls Styles   ============================================ */
:root {
  /* Primary colors */
  --a11y-primary: #0c2d62;
  --a11y-primary-rgb: 12, 45, 98;
  --a11y-primary-light: rgba(12, 45, 98, 0.1);
  --a11y-primary-hover: rgba(12, 45, 98, 0.05);
  
  /* Accent colors */
  --a11y-accent: #1D0A69;
  --a11y-accent-rgb: 29, 10, 105;
  
  /* Background colors */
  --a11y-bg: #ffffff;
  --a11y-bg-secondary: #f8f9fa;
  
  /* Text colors */
  --a11y-text: #212529;
  --a11y-text-muted: #6c757d;
  
  /* Border colors */
  --a11y-border: #0c2d62;
  --a11y-border-light: #dee2e6;
  
  /* Focus ring */
  --a11y-focus-ring: 3px solid var(--a11y-accent);
  --a11y-focus-offset: 2px;
  
  /* Dark contrast mode colors */
  --a11y-dark-bg: #000000;
  --a11y-dark-text: #ffff00;
  
  /* Transitions */
  --a11y-transition-fast: 150ms ease;
  --a11y-transition-normal: 300ms ease;
  
  /* Spacing */
  --a11y-spacing-xs: 4px;
  --a11y-spacing-sm: 8px;
  --a11y-spacing-md: 16px;
  --a11y-spacing-lg: 24px;
}

/* Reduced Motion Support */
@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;
  }
}

.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: 0 !important;
}

/* Reset Buttons */
.accessibility-reset-wrapper {
  display: flex;
  justify-content: flex-start;
  gap: var(--a11y-spacing-sm);
  width: 100%;
  padding: var(--a11y-spacing-sm) 0;
  margin-bottom: var(--a11y-spacing-sm);
}

.btn-reset-accessibility {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--a11y-spacing-sm) var(--a11y-spacing-md);
  gap: var(--a11y-spacing-sm);
  
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-decoration: none;
  
  color: var(--a11y-accent);
  background: var(--a11y-bg);
  border: 1px solid var(--a11y-accent);
  border-radius: 4px;
  
  cursor: pointer;
  transition: all var(--a11y-transition-normal);
}

.btn-reset-accessibility:hover {
  color: var(--a11y-bg);
  background: var(--a11y-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--a11y-accent-rgb), 0.3);
}

.btn-reset-accessibility:active {
  transform: translateY(0);
}

.btn-reset-accessibility:focus-visible {
  outline: var(--a11y-focus-ring);
  outline-offset: var(--a11y-focus-offset);
}

/*  Accessibility Control  */
.acccessibility-icon-div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--a11y-spacing-md);
  
  background: var(--a11y-bg);
  border: 1px solid var(--a11y-border);
  border-radius: 8px;
  
  color: var(--a11y-primary);
  font-weight: 600;
  
  cursor: pointer;
  transition: all var(--a11y-transition-normal);
}

.acccessibility-icon-div:hover {
  background-color: var(--a11y-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--a11y-primary-rgb), 0.15);
}

.acccessibility-icon-div:focus-visible {
  outline: var(--a11y-focus-ring);
  outline-offset: var(--a11y-focus-offset);
  box-shadow: 0 0 0 6px rgba(var(--a11y-accent-rgb), 0.2);
}

/* Active state */
.acccessibility-icon-div.active {
  background-color: var(--a11y-primary-light);
  border: 2px solid var(--a11y-accent);
}

/*  Accessibility Icons  */
.accessibility-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--a11y-spacing-sm);
}

.accessibility-icon svg {
  width: 100%;
  height: 100%;
}

.accessibility-icon svg path {
  fill: var(--a11y-primary);
  transition: fill var(--a11y-transition-fast);
}

/* Control labels */
.acccessibility-icon-div .control-label,
.acccessibility-icon-div p {
  font-size: 0.8125rem;
  margin: 0;
  text-align: center;
}

/*  Offcanvas Panel Styles */
.accessibility-offcanvas {
  width: 500px !important;
  max-width: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.accessibility-header .offcanvas-title {
  font-size: 1.125rem;
}

.accessibility-header .offcanvas-title h2,
.accessibility-header .offcanvas-title .h5 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

/* DARK CONTRAST MODE */
body.dark-contrast {
  --a11y-bg: var(--a11y-dark-bg);
  --a11y-text: var(--a11y-dark-text);
  --a11y-border: var(--a11y-dark-text);
  
  background-color: var(--a11y-dark-bg) !important;
  color: var(--a11y-dark-text) !important;
}

body.dark-contrast * {
  background-color: var(--a11y-dark-bg) !important;
  color: var(--a11y-dark-text) !important;
  border-color: var(--a11y-dark-text) !important;
}

/* Preserve images in dark mode */
body.dark-contrast img:not([src*=".svg"]) {
  filter: brightness(0.8) contrast(1.2);
  background: #fff !important;
  background-color: #fff !important;
}

/* Links in dark mode */
body.dark-contrast a {
  color: var(--a11y-dark-text) !important;
  text-decoration: underline;
}

body.dark-contrast a:hover {
  text-decoration: none;
}

/* Interactive elements in dark mode */
body.dark-contrast button,
body.dark-contrast .btn,
body.dark-contrast [role="button"] {
  background-color: var(--a11y-dark-bg) !important;
  color: var(--a11y-dark-text) !important;
  border: 1px solid var(--a11y-dark-text) !important;
}

body.dark-contrast button:hover,
body.dark-contrast .btn:hover,
body.dark-contrast [role="button"]:hover {
  background-color: var(--a11y-dark-text) !important;
  color: var(--a11y-dark-bg) !important;
}

/* Form elements in dark mode */
body.dark-contrast input,
body.dark-contrast select,
body.dark-contrast textarea {
  background-color: var(--a11y-dark-bg) !important;
  color: var(--a11y-dark-text) !important;
  border: 1px solid var(--a11y-dark-text) !important;
}

body.dark-contrast input::placeholder,
body.dark-contrast textarea::placeholder {
  color: rgba(255, 255, 0, 0.7) !important;
}

/* Cards and containers in dark mode */
body.dark-contrast .card,
body.dark-contrast .stat-card,
body.dark-contrast .dashboard-section .card-header {
  background-color: var(--a11y-dark-bg) !important;
  color: var(--a11y-dark-text) !important;
  border: 1px solid var(--a11y-dark-text) !important;
}

/* Reset button in dark mode */
body.dark-contrast .btn-reset-accessibility {
  background: var(--a11y-dark-bg) !important;
  color: var(--a11y-dark-text) !important;
  border: 1px solid var(--a11y-dark-text) !important;
}

body.dark-contrast .btn-reset-accessibility:hover {
  background: var(--a11y-dark-text) !important;
  color: var(--a11y-dark-bg) !important;
}

/* SVG icons in dark mode */
body.dark-contrast svg path,
body.dark-contrast .accessibility-icon svg path {
  fill: var(--a11y-dark-text) !important;
}

/* Focus indicators in dark mode */
body.dark-contrast *:focus-visible {
  outline: 3px solid var(--a11y-dark-text) !important;
  outline-offset: var(--a11y-focus-offset);
}

/* Active control checkmark in dark mode */
body.dark-contrast .acccessibility-icon-div.active::after {
  color: var(--a11y-dark-text);
}

/*  HIGHLIGHT LINKS MODE  */
body.highlight-links a, body.highlight-links button {
  background-color: #ffff00 !important;
  color: #000000 !important;
  border-radius: 3px !important;
  font-weight: bold !important;
  outline: 2px solid transparent;
  transition: all var(--a11y-transition-fast);
}

body.highlight-links a:hover {
  background-color: #ffcc00 !important;
}

body.highlight-links a:focus,
body.highlight-links a:focus-visible {
  outline: 3px solid #ff0000 !important;
  outline-offset: 2px !important;
}

/* Ensure contrast in dark mode with highlight links */
body.dark-contrast.highlight-links a {
  background-color: #ffff00 !important;
  color: #000000 !important;
}

/*  HIDE IMAGES MODE */
body.hide-images img:not(.accessibility-icon img):not(.icon-btn img):not([role="presentation"]) {
  visibility: hidden !important;
  opacity: 0 !important;
}

body.hide-images picture,
body.hide-images figure img {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Placeholder for hidden images */
body.hide-images img:not(.accessibility-icon img):not(.icon-btn img)::after {
  content: "[Image Hidden]";
  visibility: visible;
  display: block;
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  border: 2px dashed #ccc;
  font-size: 14px;
  color: #666;
}

/* Common image containers */
body.hide-images .swiper-slide img,
body.hide-images .hero-section img,
body.hide-images .slide-image-bg,
body.hide-images .carousel img,
body.hide-images .gallery img {
  visibility: hidden !important;
}

/*  BIG CURSOR MODE  */

/* Standard cursor - Light mode (Gray) */
body.big-cursor,
body.big-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 256 256'><g fill='%234d4d4d' fill-rule='nonzero' stroke='white' stroke-width='8'><g transform='scale(5.12,5.12)'><path d='M29.69922,47c-0.12109,0 -0.24219,-0.02344 -0.35937,-0.06641c-0.25,-0.09766 -0.44922,-0.28906 -0.55859,-0.53516l-5.83594,-13.49219l-7.26172,6.82422c-0.28906,0.27344 -0.71484,0.34375 -1.08203,0.1875c-0.36328,-0.15625 -0.60156,-0.51953 -0.60156,-0.91797v-33c0,-0.39844 0.23438,-0.75781 0.60156,-0.91797c0.36328,-0.15625 0.78906,-0.08594 1.08203,0.1875l24,22.39844c0.28906,0.26953 0.39063,0.6875 0.26172,1.05859c-0.12891,0.375 -0.46484,0.63672 -0.85937,0.67188l-10.18359,0.875l6.10547,13.3125c0.10938,0.23828 0.12109,0.51563 0.02734,0.76563c-0.09375,0.25 -0.27734,0.44922 -0.51953,0.55859l-4.40234,2c-0.13281,0.05859 -0.26953,0.08984 -0.41406,0.08984z'></path></g></g></svg>") 10 0, auto !important;
}

/* Standard cursor - Dark contrast mode (Yellow) */
body.dark-contrast.big-cursor,
body.dark-contrast.big-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 256 256'><g fill='%23ffff00' fill-rule='nonzero' stroke='black' stroke-width='8'><g transform='scale(5.12,5.12)'><path d='M29.69922,47c-0.12109,0 -0.24219,-0.02344 -0.35937,-0.06641c-0.25,-0.09766 -0.44922,-0.28906 -0.55859,-0.53516l-5.83594,-13.49219l-7.26172,6.82422c-0.28906,0.27344 -0.71484,0.34375 -1.08203,0.1875c-0.36328,-0.15625 -0.60156,-0.51953 -0.60156,-0.91797v-33c0,-0.39844 0.23438,-0.75781 0.60156,-0.91797c0.36328,-0.15625 0.78906,-0.08594 1.08203,0.1875l24,22.39844c0.28906,0.26953 0.39063,0.6875 0.26172,1.05859c-0.12891,0.375 -0.46484,0.63672 -0.85937,0.67188l-10.18359,0.875l6.10547,13.3125c0.10938,0.23828 0.12109,0.51563 0.02734,0.76563c-0.09375,0.25 -0.27734,0.44922 -0.51953,0.55859l-4.40234,2c-0.13281,0.05859 -0.26953,0.08984 -0.41406,0.08984z'></path></g></g></svg>") 10 0, auto !important;
}

/* Pointer cursor for interactive  */
body.big-cursor a,
body.big-cursor button,
body.big-cursor [role="button"],
body.big-cursor input[type="submit"],
body.big-cursor input[type="button"],
body.big-cursor select,
body.big-cursor label[for] {
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 256 256'%3E%3Cg fill='%234d4d4d' fill-rule='nonzero' stroke='white' stroke-width='4'%3E%3Cg transform='scale(4,4)'%3E%3Cpath d='M48.294 26.119c-3.184-.565-3.855 2.001-3.855 2.001s.126-3.404-3.276-4.154c-2.987-.659-3.98 2.318-3.98 2.318s.205-3.681-3.206-3.861c-3.131-.165-3.501 2.845-3.501 2.845-.066-.481-1.906-16.398-1.995-16.999-.242-1.62-1.767-2.334-2.716-2.349-1.225-.019-2.573 1.235-2.554 2.616.004.339-.039 20.824-.057 29.256-1.031-2.314-3.033-5.752-6.154-6.792-3-1-5 1-5 1 6 11 9.017 21.024 18 25l-.13-.368c.089.059.17.12.261.178l17.704-3.404s1.626-3.228 2.482-7.616c.871-4.467 1.087-9.023 1.036-11.186-.08-3.34-.377-8.009-3.059-8.485z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0, pointer !important;
}

/* Pointer cursor for interactive elements - Dark contrast mode */
body.dark-contrast.big-cursor a,
body.dark-contrast.big-cursor button,
body.dark-contrast.big-cursor [role="button"],
body.dark-contrast.big-cursor input[type="submit"],
body.dark-contrast.big-cursor input[type="button"],
body.dark-contrast.big-cursor select,
body.dark-contrast.big-cursor label[for] {
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 256 256'%3E%3Cg fill='%23ffff00' fill-rule='nonzero' stroke='black' stroke-width='4'%3E%3Cg transform='scale(4,4)'%3E%3Cpath d='M48.294 26.119c-3.184-.565-3.855 2.001-3.855 2.001s.126-3.404-3.276-4.154c-2.987-.659-3.98 2.318-3.98 2.318s.205-3.681-3.206-3.861c-3.131-.165-3.501 2.845-3.501 2.845-.066-.481-1.906-16.398-1.995-16.999-.242-1.62-1.767-2.334-2.716-2.349-1.225-.019-2.573 1.235-2.554 2.616.004.339-.039 20.824-.057 29.256-1.031-2.314-3.033-5.752-6.154-6.792-3-1-5 1-5 1 6 11 9.017 21.024 18 25l-.13-.368c.089.059.17.12.261.178l17.704-3.404s1.626-3.228 2.482-7.616c.871-4.467 1.087-9.023 1.036-11.186-.08-3.34-.377-8.009-3.059-8.485z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0, pointer !important;
}


/* Remove default focus for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}


/*  Text Size Indicator */
.text-size-indicator {
  padding: var(--a11y-spacing-sm);
  margin-bottom: var(--a11y-spacing-sm);
  font-size: 0.875rem;
  color: var(--a11y-text-muted);
}

/*  Responsive Styles */
@media (max-width: 768px) {
  .accessibility-offcanvas {
    width: 100% !important;
    border-radius: 0;
  }

  .acccessibility-icon-div .control-label,
  .acccessibility-icon-div p {
    font-size: 0.75rem;
  }

  .accessibility-icon {
    width: 40px;
    height: 40px;
  }

  .btn-reset-accessibility {
    padding: var(--a11y-spacing-sm);
    font-size: 0.8125rem;
  }

  /* Ensure no overflow on mobile when filters applied */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .accessibility-reset-wrapper {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .acccessibility-icon-div {
    padding: var(--a11y-spacing-sm);
  }

  .accessibility-icon {
    width: 32px;
    height: 32px;
  }
}

/*  Print Styles  */
@media print {
  body.dark-contrast,
  body.hide-images,
  body.highlight-links,
  body.big-cursor {
    filter: none !important;
    background-color: white !important;
    color: black !important;
    cursor: default !important;
  }

  body.dark-contrast *,
  body.highlight-links *,
  body.hide-images * {
    background-color: transparent !important;
    color: black !important;
    border-color: #ccc !important;
  }

  body.hide-images img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
  }

  body.highlight-links a {
    background-color: transparent !important;
    color: black !important;
    text-decoration: underline !important;
    font-weight: normal !important;
  }

  /* Hide accessibility panel in print */
  .accessibility-offcanvas-section,
  .accessibility-offcanvas {
    display: none !important;
  }
}

/* === High Contrast Mode === */
@media (prefers-contrast: high) {
  :root {
    --a11y-border: #000000;
    --a11y-primary: #000000;
  }

  .acccessibility-icon-div {
    border-width: 2px;
  }

  .acccessibility-icon-div.active {
    border-width: 3px;
  }
}

/* ==== Dark Mode  === */
@media (prefers-color-scheme: dark) {
  :root {
    --a11y-bg: #1a1a1a;
    --a11y-bg-secondary: #2d2d2d;
    --a11y-text: #e0e0e0;
    --a11y-text-muted: #a0a0a0;
    --a11y-border-light: #404040;
  }

  /* Only apply if dark-contrast is not already active */
  body:not(.dark-contrast) .accessibility-offcanvas {
    background-color: var(--a11y-bg);
    color: var(--a11y-text);
  }

  body:not(.dark-contrast) .acccessibility-icon-div {
    background-color: var(--a11y-bg-secondary);
    color: var(--a11y-text);
    border-color: var(--a11y-border-light);
  }

  body:not(.dark-contrast) .accessibility-icon svg path {
    fill: var(--a11y-text);
  }
}

/* === Animation Classes  === */
.a11y-fade-in {
  animation: a11yFadeIn var(--a11y-transition-normal) ease-out;
}

@keyframes a11yFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Disable animations when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
  .a11y-fade-in {
    animation: none;
  }
}

.btn-close {
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-toggle::after {
	border: none;
	width: 8px;
	height: 6px;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99998 3.82441L8.49774 0.251896C8.66217 0.0839538 8.87143 0 9.12556 0C9.37969 0 9.58895 0.0839538 9.75337 0.251896C9.9178 0.419839 10 0.633571 10 0.893128C10 1.15268 9.9178 1.36642 9.75337 1.53436L5.6278 5.74807C5.5381 5.83968 5.44094 5.90457 5.33631 5.94274C5.23168 5.9809 5.11958 6 4.99998 6C4.88042 6 4.76829 5.9809 4.66366 5.94274C4.55903 5.90457 4.46187 5.83968 4.3722 5.74807L0.246626 1.53436C0.0821972 1.36642 0 1.15268 0 0.893128C0 0.633571 0.0821972 0.419839 0.246626 0.251896C0.411055 0.0839538 0.620314 0 0.874439 0C1.12853 0 1.33779 0.0839538 1.50222 0.251896L4.99998 3.82441Z' fill='black'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}

body.dark-contrast .dropdown-toggle::after {
	border: none;
	width: 8px;
	height: 6px;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99998 3.82441L8.49774 0.251896C8.66217 0.0839538 8.87143 0 9.12556 0C9.37969 0 9.58895 0.0839538 9.75337 0.251896C9.9178 0.419839 10 0.633571 10 0.893128C10 1.15268 9.9178 1.36642 9.75337 1.53436L5.6278 5.74807C5.5381 5.83968 5.44094 5.90457 5.33631 5.94274C5.23168 5.9809 5.11958 6 4.99998 6C4.88042 6 4.76829 5.9809 4.66366 5.94274C4.55903 5.90457 4.46187 5.83968 4.3722 5.74807L0.246626 1.53436C0.0821972 1.36642 0 1.15268 0 0.893128C0 0.633571 0.0821972 0.419839 0.246626 0.251896C0.411055 0.0839538 0.620314 0 0.874439 0C1.12853 0 1.33779 0.0839538 1.50222 0.251896L4.99998 3.82441Z' fill='yellow'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}