/* Accessibility: skip link, panel, focus, modes for visually impaired users */

.a11y-skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 100000;
  padding: 12px 20px;
  background: #000;
  color: #fff;
  font-size: 16px;
  text-decoration: underline; }
.a11y-skip-link:focus { top: 8px; color: #fff; }

.a11y-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  cursor: pointer; }
.a11y-toggle:hover { text-decoration: underline; }

.a11y-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  padding: 16px;
  background: #fff;
  color: #000;
  font-size: 16px;
  line-height: 1.4;
  border-top: 3px solid #0080ff;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .35); }
.a11y-panel[hidden] { display: none; }
.a11y-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: #fff;
  color: #000;
  border: 2px solid #0080ff;
  border-radius: 4px;
  font-size: 0;
  cursor: pointer; }
/* the cross is drawn with two lines so it stays centered in any font */
.a11y-close::before, .a11y-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: currentColor; }
.a11y-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.a11y-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.a11y-group {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center; }
.a11y-group legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 4px;
  font-size: inherit;
  font-weight: 700; }
.a11y-option, .a11y-reset {
  padding: 6px 12px;
  background: #fff;
  color: #000;
  border: 2px solid #0080ff;
  border-radius: 4px;
  font: inherit;
  cursor: pointer; }
.a11y-option[aria-pressed="true"] {
  background: #0080ff;
  color: #fff; }
.a11y-reset {
  align-self: flex-end;
  margin-left: auto; }

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #000; }
#dle-content:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important; } }

/* Font size: the site uses rem/em, so scale the root */
html.a11y-font-1 { font-size: 125%; }
html.a11y-font-2 { font-size: 150%; }

/* Spacing and font family */
html.a11y-spacing body,
html.a11y-spacing body * {
  letter-spacing: 0.08em !important;
  word-spacing: 0.16em !important;
  line-height: 1.8 !important; }
html.a11y-family body,
html.a11y-family body * {
  font-family: Arial, Helvetica, sans-serif !important; }

/* Images */
html.a11y-images-gray img,
html.a11y-images-gray video,
html.a11y-images-gray [style*="url("] { filter: grayscale(1); }
html.a11y-images-off img,
html.a11y-images-off video { visibility: hidden; }
html.a11y-images-off body * { background-image: none !important; }

/* Color schemes; elements with photo backgrounds keep their image */
html[class*="a11y-scheme-"] body *:not([style*="url("]) {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important; }

html.a11y-scheme-bw body,
html.a11y-scheme-bw body *:not(img):not(video):not(svg):not(path):not([style*="url("]) {
  background-color: #fff !important; color: #000 !important; border-color: #000 !important; }
html.a11y-scheme-wb body,
html.a11y-scheme-wb body *:not(img):not(video):not(svg):not(path):not([style*="url("]) {
  background-color: #000 !important; color: #fff !important; border-color: #fff !important; }
html.a11y-scheme-yb body,
html.a11y-scheme-yb body *:not(img):not(video):not(svg):not(path):not([style*="url("]) {
  background-color: #000 !important; color: #ffeb3b !important; border-color: #ffeb3b !important; }
html.a11y-scheme-bb body,
html.a11y-scheme-bb body *:not(img):not(video):not(svg):not(path):not([style*="url("]) {
  background-color: #9dd1ff !important; color: #063462 !important; border-color: #063462 !important; }

html[class*="a11y-scheme-"] a { text-decoration: underline !important; }
html.a11y-scheme-bw svg, html.a11y-scheme-bw svg * { stroke: #000 !important; }
html.a11y-scheme-wb svg, html.a11y-scheme-wb svg * { stroke: #fff !important; }
html.a11y-scheme-yb svg, html.a11y-scheme-yb svg * { stroke: #ffeb3b !important; }
html.a11y-scheme-bb svg, html.a11y-scheme-bb svg * { stroke: #063462 !important; }
html[class*="a11y-scheme-"] .a11y-option[aria-pressed="true"] { outline: 3px solid currentColor; }

/* Overlays on top of photo backgrounds must stay transparent, otherwise they hide the photo */
html[class*="a11y-scheme-"] body .news-card-overlay:not(#a11y) {
  background-color: transparent !important; }
html[class*="a11y-scheme-"] body .news-card:hover .news-card-overlay:not(#a11y) {
  background-color: rgba(0, 0, 0, 0.4) !important; }
html[class*="a11y-scheme-"] body .news-card-overlay-text:not(#a11y) {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: #fff !important; }

/* Header slider: the text backing fits its content instead of spanning the whole slide */
html[class*="a11y-scheme-"] body .slider-card-body:not(#a11y) {
  width: fit-content !important;
  max-width: 100%;
  padding: 12px 24px;
  border-radius: 12px;
  box-sizing: border-box; }

/* toggle in the header, right-aligned under the language switcher */
.header-tools .a11y-toggle {
  margin-top: 2px;
  padding-right: .5rem;
  font-size: 14px;
  white-space: nowrap; }