/* pyred-extra.css — bovenop de stylesheets van de oude skin (skin.css e.a. blijven ongewijzigd, zodat het uitzicht identiek is).
   Enkel toegankelijkheid en wat de nieuwe opbouw vraagt. Zie pyred-site/LEESMIJ.md § Toegankelijkheid. */

/* Naar de inhoud springen — enkel zichtbaar als je met Tab begint (WCAG 2.4.1) */
.pyred-skip {
  position: absolute; left: 1.6rem; top: -10rem; z-index: 1000;
  padding: 1.2rem 2rem; background: #c40000; color: #fff; font: 700 1.6rem/1 Poppins, Arial, sans-serif; text-decoration: none; border-radius: 0.8rem;
}
.pyred-skip:focus { top: 1.6rem; outline: 0.3rem solid #fff; outline-offset: 0.2rem; }
#inhoud:focus { outline: none; }

/* Testversie (elk adres behalve pyred.com): duidelijke balk, niet te missen */
.pyred-testbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; padding: 0.6rem 1.6rem;
  background: #c40000; color: #fff; font: 600 1.3rem/1.4 Poppins, Arial, sans-serif; text-align: center; pointer-events: none;
}

/* Het logo is nu een echte link (was een <button> met JavaScript): middelklik, "openen in nieuw tabblad" en toetsenbord werken. */
a.dtx-header__logo, a.dtx-footer__logo { color: inherit; }

/* Zichtbare focus voor toetsenbordgebruikers overal waar de skin er geen had (WCAG 2.4.7) */
a:focus-visible, button:focus-visible {
  outline: 0.3rem solid currentColor;
  outline-offset: 0.4rem;
  border-radius: 0.4rem;
}
.dtx-btn-primary:focus-visible { outline-color: #fff; }

/* Voetlinks en sociale iconen: ruimere aanraakzone op gsm (min. 44×44 px, WCAG 2.5.8 / Apple HIG) */
@media (pointer: coarse) {
  .dtx-socials__item a { display: inline-flex; align-items: center; justify-content: center; min-width: 4.4rem; min-height: 4.4rem; }
  .dtx-footer-small a, .dtx-footer-contact a { display: inline-block; padding-block: 0.8rem; }
}

/* Minder beweging gevraagd in het besturingssysteem: geen overgangen en geen lopende band (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .dtx-keywords-list { flex-wrap: wrap; row-gap: 1.6rem; }
}

/* Taalkeuze (nieuw: de oude site had enkel Engels). In het menu onder de items, in de voet rechts. */
.pyred-talen { display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.pyred-talen a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px;
  font: 700 1.4rem/1 Poppins, Arial, sans-serif; letter-spacing: 0.05em; text-decoration: none; color: inherit; border-radius: 0.8rem; opacity: 0.7;
}
.pyred-talen a:hover { opacity: 1; }
.pyred-talen a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 0.4rem; text-decoration-thickness: 0.2rem; }
.pyred-talen--menu { margin-top: 3.2rem; color: #fff; justify-content: center; }
.pyred-talen--menu a { font-size: 1.8rem; }
.dtx-footer-right { display: flex; align-items: center; justify-content: flex-end; gap: 1.6rem; }
.dtx-footer-right .dtx-footer-small { width: auto; }
.pyred-talen--voet { color: #fff; }
.pyred-talen--voet a { min-height: 24px; min-width: 32px; font-size: 1.2rem; }
@media only screen and (max-width: 744px) {
  /* Op gsm is de rechterkolom van de voet verborgen door de skin — dan staat de taalkeuze in het menu én onder de voet. */
  .dtx-footer-right { display: flex !important; justify-content: flex-start; }
  .dtx-footer-right .dtx-footer-small { display: none; }
}

/* Klikdoelen van minstens 24×24 px (WCAG 2.5.8) voor links die alleen op een regel staan: contactgegevens, lijstjes met links */
main li > a:only-child { display: inline-block; min-height: 24px; line-height: 24px; }
.dtx-contact-item__info a { min-height: 24px; line-height: 24px; }   /* blijft display:block zoals in contact.css */

/* Voetlinks (Voorwaarden, Privacy, Aanmelden) zijn op gsm maar 15 px hoog — minstens 24 px klikzone */
.dtx-footer-small a { display: inline-block; min-height: 24px; line-height: 24px; }
/* /redsfx: witte mini-links op #FE0000 halen 4,0:1 — op die rode achtergrond zwart (5,2:1) */
#page-red .dtx-footer-small a { color: #0a0a0a; }

/* Soort telefoonnummer (Dubai: kantoor en gsm) — kleiner en iets zachter naast het nummer */
.pyred-tel-soort { font-size: 0.85em; opacity: 0.75; margin-left: 0.4em; }

/* Alinea na een lijst in een tekstblok (effectpagina's: "Liever zelf bedienen? … HYRED") */
.dtx-block-text--content ul + p { margin-top: 1.6rem; }

/* Diepte-effect op foto's (pyred-site 1.2.2, Xavier 30/09: "3d zoals de iPhone-achtergronden"): skin.js (initDiepte) legt een
   WebGL-canvas over de foto dat voor- en achtergrond apart laat verschuiven. De foto zelf blijft eronder staan (geen WebGL =
   gewone foto); de pixelhoekjes (.dtx-visual, z-index 1) blijven erboven. Niet op de projectpagina's. */
.pyred-diepte { position: relative; overflow: hidden; }
.pyred-diepte__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.pyred-diepte--klaar .pyred-diepte__canvas { opacity: 1; }