/* ========================================
   Accessibility Styles
   ======================================== */

/* Force header wrapper to allow clicks */
header,
header.wrapper,
header.wrapper.bg-soft-primary,
nav.navbar,
.navbar-other,
.navbar-nav,
.nav-item {
  pointer-events: auto !important;
}

/* Keep navbar positioning intact but ensure high z-index */
nav.navbar.position-absolute {
  z-index: 10000 !important;
}

/* Prevent ONLY the hero section from blocking clicks */
section.wrapper.image-wrapper,
section.wrapper.bg-image {
  pointer-events: none !important;
}

section.wrapper.image-wrapper *,
section.wrapper.bg-image * {
  pointer-events: auto !important;
}

/* Accessibility section - positioned at right edge of viewport */
.navbar-accessibility {
  position: absolute !important;
  right: 1.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10001 !important;
  margin: 0 !important;
}

/* Add padding to navbar to make room for accessibility toggle */
@media (min-width: 992px) {
  nav.navbar .container {
    padding-right: 180px !important;
  }
}

/* Accessibility Toggle Button - ensure it's always clickable */
#accessibility-toggle {
  cursor: pointer !important;
  pointer-events: auto !important;
  background: transparent !important;
}

#accessibility-toggle:hover {
  opacity: 0.8;
  background: transparent !important;
}

#accessibility-toggle i {
  pointer-events: none !important;
}

/* Default: Blue in normal view and when scrolled (fixed) */
#accessibility-toggle i {
  color: #3f78e0 !important;
}

/* Red when navbar is transparent or sticky (invisible header) */
body:not(.a11y-contrast-high) .navbar.transparent #accessibility-toggle i,
body:not(.a11y-contrast-high) .navbar.sticky #accessibility-toggle i {
  color: #e74c3c !important;
}

/* Yellow when high contrast mode is active (overrides everything) */
body.a11y-contrast-high #accessibility-toggle i {
  color: #ff0 !important;
}

/* Text color - use navbar CSS variables for consistency with menu items */
#accessibility-toggle span {
  color: var(--bs-navbar-color) !important;
}

/* Text color - yellow when high contrast mode is active (overrides navbar colors) */
body.a11y-contrast-high #accessibility-toggle span {
  color: #ff0 !important;
}

/* Ensure navbar items are clickable */
.navbar button,
.navbar a {
  pointer-events: auto !important;
}

/* Accessibility Controls Panel */
.accessibility-controls {
  background-color: #000 !important;
  color: #fff !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  animation: slideDown 0.3s ease-in-out !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

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

.accessibility-heading {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.accessibility-desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.accessibility-controls .form-check {
  margin-bottom: 0.75rem;
}

.accessibility-controls .form-check-input {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.accessibility-controls .form-check-input:checked {
  background-color: #ffd700;
  border-color: #ffd700;
}

.accessibility-controls .form-check-input:focus {
  border-color: #ffd700;
  box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
}

.accessibility-controls .form-check-label {
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}

.accessibility-controls .form-group {
  margin-bottom: 0;
}

.accessibility-controls .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Preview classes for accessibility labels */
.accessibility-controls .fs-20 {
  font-size: 20px !important;
}

.accessibility-controls .fs-30 {
  font-size: 30px !important;
}

.accessibility-controls .word-spacing-big {
  word-spacing: 0.3em;
}

.accessibility-controls .letter-spacing-big {
  letter-spacing: 0.2em;
}

#accessibility-close {
  transition: color 0.2s ease;
}

#accessibility-close:hover {
  color: #ffd700 !important;
}

/* ========================================
   Accessibility Font Size Classes
   ======================================== */
/* Large (Suur): 1.25x = 125% */
/* Very Large (Väga suur): 1.5x = 150% */

body.a11y-font-large {
  --font-scale: 1.25;
}

body.a11y-font-xlarge {
  --font-scale: 1.5;
}

body.a11y-font-large p,
body.a11y-font-large li:not(.nav-item),
body.a11y-font-large span:not(.badge):not([class*="text-"]),
body.a11y-font-large a:not(.nav-link),
body.a11y-font-large label,
body.a11y-font-large button:not(.hamburger),
body.a11y-font-large input,
body.a11y-font-large textarea {
  font-size: calc(1em * 1.25) !important;
  line-height: 1.6 !important;
}

body.a11y-font-xlarge p,
body.a11y-font-xlarge li:not(.nav-item),
body.a11y-font-xlarge span:not(.badge):not([class*="text-"]),
body.a11y-font-xlarge a:not(.nav-link),
body.a11y-font-xlarge label,
body.a11y-font-xlarge button:not(.hamburger),
body.a11y-font-xlarge input,
body.a11y-font-xlarge textarea {
  font-size: calc(1em * 1.5) !important;
  line-height: 1.6 !important;
}

/* Keep navigation items at reasonable size */
body.a11y-font-large .nav-link,
body.a11y-font-large .navbar-nav a {
  font-size: calc(1em * 1.1) !important;
}

body.a11y-font-xlarge .nav-link,
body.a11y-font-xlarge .navbar-nav a {
  font-size: calc(1em * 1.15) !important;
}

/* Headings */
body.a11y-font-large h1,
body.a11y-font-large .h1 {
  font-size: calc(2.5rem * 1.25) !important;
}

body.a11y-font-xlarge h1,
body.a11y-font-xlarge .h1 {
  font-size: calc(2.5rem * 1.5) !important;
}

body.a11y-font-large h2,
body.a11y-font-large .h2 {
  font-size: calc(2rem * 1.25) !important;
}

body.a11y-font-xlarge h2,
body.a11y-font-xlarge .h2 {
  font-size: calc(2rem * 1.5) !important;
}

body.a11y-font-large h3,
body.a11y-font-large .h3 {
  font-size: calc(1.75rem * 1.25) !important;
}

body.a11y-font-xlarge h3,
body.a11y-font-xlarge .h3 {
  font-size: calc(1.75rem * 1.5) !important;
}

body.a11y-font-large h4,
body.a11y-font-large .h4 {
  font-size: calc(1.5rem * 1.25) !important;
}

body.a11y-font-xlarge h4,
body.a11y-font-xlarge .h4 {
  font-size: calc(1.5rem * 1.5) !important;
}

body.a11y-font-large h5,
body.a11y-font-large .h5 {
  font-size: calc(1.25rem * 1.25) !important;
}

body.a11y-font-xlarge h5,
body.a11y-font-xlarge .h5 {
  font-size: calc(1.25rem * 1.5) !important;
}

body.a11y-font-large h6,
body.a11y-font-large .h6 {
  font-size: calc(1rem * 1.25) !important;
}

body.a11y-font-xlarge h6,
body.a11y-font-xlarge .h6 {
  font-size: calc(1rem * 1.5) !important;
}

/* Make child elements within headings inherit the scaled heading size */
body.a11y-font-large h1 *,
body.a11y-font-large h2 *,
body.a11y-font-large h3 *,
body.a11y-font-large h4 *,
body.a11y-font-large h5 *,
body.a11y-font-large h6 * {
  font-size: inherit !important;
}

body.a11y-font-xlarge h1 *,
body.a11y-font-xlarge h2 *,
body.a11y-font-xlarge h3 *,
body.a11y-font-xlarge h4 *,
body.a11y-font-xlarge h5 *,
body.a11y-font-xlarge h6 * {
  font-size: inherit !important;
}

/* Bootstrap Display Classes */
body.a11y-font-large .display-1 {
  font-size: calc(5rem * 1.25) !important;
}

body.a11y-font-xlarge .display-1 {
  font-size: calc(5rem * 1.5) !important;
}

body.a11y-font-large .display-2 {
  font-size: calc(4.5rem * 1.25) !important;
}

body.a11y-font-xlarge .display-2 {
  font-size: calc(4.5rem * 1.5) !important;
}

body.a11y-font-large .display-3 {
  font-size: calc(4rem * 1.25) !important;
}

body.a11y-font-xlarge .display-3 {
  font-size: calc(4rem * 1.5) !important;
}

body.a11y-font-large .display-4 {
  font-size: calc(3.5rem * 1.25) !important;
}

body.a11y-font-xlarge .display-4 {
  font-size: calc(3.5rem * 1.5) !important;
}

body.a11y-font-large .display-5 {
  font-size: calc(3rem * 1.25) !important;
}

body.a11y-font-xlarge .display-5 {
  font-size: calc(3rem * 1.5) !important;
}

body.a11y-font-large .display-6 {
  font-size: calc(2.5rem * 1.25) !important;
}

body.a11y-font-xlarge .display-6 {
  font-size: calc(2.5rem * 1.5) !important;
}

/* Make child elements within display classes inherit the scaled size */
body.a11y-font-large .display-1 *,
body.a11y-font-large .display-2 *,
body.a11y-font-large .display-3 *,
body.a11y-font-large .display-4 *,
body.a11y-font-large .display-5 *,
body.a11y-font-large .display-6 * {
  font-size: inherit !important;
}

body.a11y-font-xlarge .display-1 *,
body.a11y-font-xlarge .display-2 *,
body.a11y-font-xlarge .display-3 *,
body.a11y-font-xlarge .display-4 *,
body.a11y-font-xlarge .display-5 *,
body.a11y-font-xlarge .display-6 * {
  font-size: inherit !important;
}

/* ========================================
   Accessibility Spacing Classes
   ======================================== */

/* Paragraph Spacing */
body.a11y-paragraph-spacing p,
body.a11y-paragraph-spacing li,
body.a11y-paragraph-spacing div {
  line-height: 2 !important;
  margin-bottom: 1.5rem !important;
}

/* Word Spacing */
body.a11y-word-spacing * {
  word-spacing: 0.3em !important;
}

/* Letter Spacing */
body.a11y-letter-spacing * {
  letter-spacing: 0.1em !important;
}

/* ========================================
   Accessibility High Contrast Mode
   ======================================== */

body.a11y-contrast-high,
body.a11y-contrast-high .body,
body.a11y-contrast-high .main {
  background-color: #000 !important;
}

body.a11y-contrast-high a,
body.a11y-contrast-high button,
body.a11y-contrast-high .btn,
body.a11y-contrast-high h1,
body.a11y-contrast-high h2,
body.a11y-contrast-high h3,
body.a11y-contrast-high h4,
body.a11y-contrast-high h5,
body.a11y-contrast-high h6,
body.a11y-contrast-high p,
body.a11y-contrast-high span,
body.a11y-contrast-high div,
body.a11y-contrast-high li,
body.a11y-contrast-high label,
body.a11y-contrast-high strong,
body.a11y-contrast-high em,
body.a11y-contrast-high i:not(.fa):not([class*="icon"]),
body.a11y-contrast-high b,
body.a11y-contrast-high input,
body.a11y-contrast-high textarea,
body.a11y-contrast-high select {
  color: #ff0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.a11y-contrast-high .dropdown-menu {
  background-color: #000 !important;
  border-color: #ff0 !important;
}

body.a11y-contrast-high .dropdown-item {
  color: #ff0 !important;
  background-color: transparent !important;
}

body.a11y-contrast-high .dropdown-item:hover,
body.a11y-contrast-high .dropdown-item:focus,
body.a11y-contrast-high .dropdown-item.active {
  background-color: #333 !important;
  color: #ff0 !important;
}

body.a11y-contrast-high a,
body.a11y-contrast-high button {
  text-decoration: underline;
}

body.a11y-contrast-high a:hover,
body.a11y-contrast-high button:hover {
  color: #fff !important;
}

body.a11y-contrast-high img {
  filter: grayscale(100%) contrast(120%) brightness(1.2);
  opacity: 0.8;
}

body.a11y-contrast-high svg {
  filter: none;
  opacity: 1;
}

body.a11y-contrast-high input,
body.a11y-contrast-high textarea,
body.a11y-contrast-high select,
body.a11y-contrast-high button,
body.a11y-contrast-high .btn {
  border: 2px solid #ff0 !important;
  background-color: #000 !important;
}

body.a11y-contrast-high .form-check-input {
  background-color: #000 !important;
  border-color: #ff0 !important;
}

body.a11y-contrast-high .form-check-input:checked {
  background-color: #000 !important;
  border-color: #ff0 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffff00' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

body.a11y-contrast-high .form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffff00'/%3e%3c/svg%3e") !important;
}

body.a11y-contrast-high .form-check-label {
  color: #ff0 !important;
}

/* Override theme-specific backgrounds */
body.a11y-contrast-high .bg-primary,
body.a11y-contrast-high .bg-secondary,
body.a11y-contrast-high .bg-tertiary,
body.a11y-contrast-high .bg-light,
body.a11y-contrast-high .bg-dark,
body.a11y-contrast-high [class*="bg-"],
body.a11y-contrast-high section,
body.a11y-contrast-high header,
body.a11y-contrast-high footer,
body.a11y-contrast-high nav,
body.a11y-contrast-high .container,
body.a11y-contrast-high .row,
body.a11y-contrast-high [class*="col-"],
body.a11y-contrast-high .card,
body.a11y-contrast-high .card-body,
body.a11y-contrast-high .card-header,
body.a11y-contrast-high .card-footer {
  background-color: #000 !important;
  background-image: none !important;
}

/* Override SVG fills */
body.a11y-contrast-high svg path[fill]:not([fill="none"]) {
  fill: #ff0 !important;
}

body.a11y-contrast-high svg text {
  fill: #ff0 !important;
  color: #ff0 !important;
}

/* Ensure borders are visible */
body.a11y-contrast-high .card,
body.a11y-contrast-high .border,
body.a11y-contrast-high [class*="border"] {
  border-color: #ff0 !important;
}
