/*
Description: Accessibility patches for the website.
Version: 1.0
Author: Rane Bieker
Author URI: http://map.usc.edu
*/

/*Intended to override the master to change the colors with contrast problems, unless you wanted to do that in the main file?
Should I add the !important rule?*/
:root {
  --salmon: #eb002b;
  --teal: #1c827d;
  --black: #0d0c07;
  --white: #ffffff;
}

.highlight {
  background-color: var(--salmon);
}

.topnav a:hover,
.dropdown-nav:hover .dropbtn {
  background-color: var(--teal);
}

.dropdown-content a:hover {
  background-color: var(--teal);
}

.quote-txt-sm {
  background-color: var(--salmon);
}

.block {
  background-color: var(--salmon);
}

/*Classes for seizure safety*/
.seizure-safe {
  filter: saturate(50%);
  -webkit-filter: saturate(50%);
  -moz-filter: saturate(50%);
  -ms-filter: saturate(50%);
  -o-filter: saturate(50%);
}

/*Classes for cognitive disability*/
/*May need polyfill OR remove feature Zoom*/
.cognitive-disability {
  zoom: 1.041 !important;
}

.cognitive-important {
  outline: 2px solid rgb(0, 204, 10);
  outline-offset: 2px;
}

.cognitive-link {
  outline: 2px solid orange;
  outline-offset: 2px;
}

/*Classes for vision impaired*/
.vision-impaired {
  filter: saturate(200%);
  -webkit-filter: saturate(200%);
  -moz-filter: saturate(200%);
  -ms-filter: saturate(200%);
  -o-filter: saturate(200%);

  zoom: 1.161 !important;
}

/*This class is also used for ADHD friendly in Firefox since both neccessitate high saturation*/
.vision-firefox {
  filter: saturate(200%);
  -webkit-filter: saturate(200%);
  -moz-filter: saturate(200%);
  -ms-filter: saturate(200%);
  -o-filter: saturate(200%);
}

/*Classes for ADHD Friendly*/
.adhd-friendly {
  filter: saturate(200%);
  -webkit-filter: saturate(200%);
  -moz-filter: saturate(200%);
  -ms-filter: saturate(200%);
  -o-filter: saturate(200%);
  zoom: 1.041 !important;
}

.reading-mask {
  background-color: rgba(0, 0, 0, 0.5);
  margin: 0;
  width: 100vw;
  z-index: 100000;
  display: none;
  position: fixed;
}

#mask-top {
  top: 0px;
}

#mask-bottom {
  bottom: 0px;
}