/* 50PlusGids — toegankelijkheidsbalk + skip-link (bouwt op tokens.css) */

/* Skip-link: verschijnt bij focus (toetsenbord) */
.bwgids-skip-link {
  position: absolute; left: var(--space-sm); top: -100px; z-index: 1000;
  background: var(--color-accent-ink); color: #fff;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-md); text-decoration: none; font-weight: 700;
  transition: top var(--dur-fast) var(--ease-out);
}
.bwgids-skip-link:focus { top: var(--space-sm); }

/* De balk */
.bwgids-a11y-bar {
  background: var(--color-paper-2);
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-body);
}
.bwgids-a11y-bar__inner {
  max-width: 72rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-2xs) var(--space-md);
}
.bwgids-a11y-bar__label { font-size: var(--text-sm); color: var(--color-ink-2); font-weight: 700; }
.bwgids-a11y-group { display: inline-flex; gap: 4px; }

.bwgids-a11y-btn {
  min-height: 40px; min-width: 44px; padding: 6px 14px;
  background: var(--color-paper); color: var(--color-accent-strong);
  border: 2px solid var(--color-accent); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
  cursor: pointer; line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bwgids-a11y-btn:hover { background: var(--color-accent-soft); }
.bwgids-a11y-btn[aria-pressed="true"] { background: var(--color-accent-strong); color: #fff; border-color: var(--color-accent-strong); }
.bwgids-a11y-btn--toggle { display: inline-flex; align-items: center; gap: 6px; }

/* Eerste A-knop kleiner label, A++ groter — visuele hint */
.bwgids-a11y-btn[data-text-size="1"] { font-size: 0.95rem; }
.bwgids-a11y-btn[data-text-size="1.15"] { font-size: 1.1rem; }
.bwgids-a11y-btn[data-text-size="1.3"] { font-size: 1.25rem; }

/* Markering van voorgelezen tekst */
.bwgids-reading-highlight { background: var(--color-accent-soft); box-shadow: 0 0 0 3px var(--color-accent-soft); border-radius: 3px; }

@media (max-width: 600px) {
  .bwgids-a11y-bar__label { width: 100%; }
}