/* ----------------------------------------------------
   DEBUG: REDUCE MOTION INDICATOR
---------------------------------------------------- */
/*@media (prefers-reduced-motion: reduce) {
  body::before {
    content: "REDUCE MOTION ACTIEF";
    position: fixed;
    top: 10px;
    left: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
    z-index: 99999;
  }
}*/

/* ----------------------------------------------------
   BASIS
---------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: 'Work Sans', sans-serif;
  overflow-x: hidden;
  color: #000;
}

/* ----------------------------------------------------
   TYPOGRAFIE
---------------------------------------------------- */
h1, h2 {
  color: #E6391E;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
}

/* ----------------------------------------------------
   TOPBAR
---------------------------------------------------- */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 95px;
  background: rgba(255, 255, 255, 0.95);
  z-index: 4000;
  display: flex;
  align-items: center;
}

.top-bar .container {
/*  padding-left: 40px;
  padding-right: 40px;*/
}

@media (min-width: 992px) {
  .top-bar .container {
/*    padding-left: 80px;
    padding-right: 80px;*/
  }
}

/* ----------------------------------------------------
   WCAG HAMBURGER
---------------------------------------------------- */
.wcag-hamburger {
  box-sizing: border-box;
  width: 35px;
  height: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  z-index: 3000;
}

.wcag-hamburger span {
  display: block;
  width: 100%;
  height: 4px;
  background: #000;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}

.wcag-hamburger.active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

.wcag-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.wcag-hamburger.active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

.wcag-hamburger:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 4px;
}
/* =========================
   WCAG TEXT SCALING (CORRECT MODEL)
   ========================= */

:root {
  --text-scale: 1;
}

/* basis */
html {
  font-size: 16px;
}

body {
  font-size: 1rem;
  line-height: 1.6;
  font-family: 'Outfit', sans-serif;
}

/* =========================
   TYPOGRAPHY
   ========================= */

p {
  font-size: calc(20px * var(--text-scale));
}

h1 {
  font-size: calc(42px * var(--text-scale));
}

h2 {
  font-size: calc(31px * var(--text-scale));
}

h3 {
  font-size: calc(22px * var(--text-scale));
}

/* =========================
   UI ELEMENTS NIET MEESCHALEN
   ========================= */

.text-size-controls,
.text-size-controls * {
  font-size: 1rem !important;
}

/* EXCEPTIONS */
.no-text-resize,
.no-text-resize * {
  font-size: 0.6rem !important;
}

/* ----------------------------------------------------
   SMOOTH SCROLL WRAPPERS
---------------------------------------------------- */
#smooth-wrapper {
  overflow: hidden;
}

#smooth-content {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------
   VIDEO HEADER WRAPPER — MOBILE FIRST
---------------------------------------------------- */

.inner-wrapper {
  position: relative;
  height: auto;
  min-height: 600px;
  margin: 40px 20px 40px;
  padding-top: 40px;
  background: #111;
  overflow: hidden;
}

/* Mobiele gradient (onder → boven) */
.inner-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.00) 60%
  );

  opacity: 0;
  animation: overlayFade 1.2s forwards ease-out;
}

/* Fade‑in animatie */
@keyframes overlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ----------------------------------------------------
   VIDEO HEADER WRAPPER — MOBILE FIRST
---------------------------------------------------- */

.inner-wrapper {
  position: relative;
  height: auto;
  min-height: 600px;
  margin: 40px 20px 40px;
  padding-top: 40px;
  background: #111;
  overflow: hidden;
}

/* Mobiele gradient (onder → boven) */
.inner-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.00) 60%
  );

  opacity: 0;
  animation: overlayFade 1.2s forwards ease-out;
}

@keyframes overlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ----------------------------------------------------
   HEADLINE — MOBILE FIRST
---------------------------------------------------- */


@media (max-width: 1199px) {
.inner-wrapper h1 {
  position: absolute;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.0;
  opacity: 0;
  animation: fadeInH1mobile 1s forwards ease-out;
  animation-delay: 1.0s;
  z-index: 20;
  width: 85%;
  text-align: center;
}

@keyframes fadeInH1mobile {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.inner-wrapper br {
display: none;

}

.inner-wrapper h2 {
  position: absolute;
  bottom: 23%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.0rem;
  font-weight: 300;
  line-height: 1.1;
  opacity: 0;
  animation: fadeInH2Mobile 1s forwards ease-out;
  animation-delay: 1.2s;
  z-index: 20;
  width: 100%;
  text-align: center;
}

@keyframes fadeInH2Mobile {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.inner-wrapper a.btn {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  color: #d60000;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.05;
  border-radius: 0;
  opacity: 0;
  animation: fadeInBtnMobile 1s forwards ease-out;
  animation-delay: 1.5s;
  z-index: 20;
}

@keyframes fadeInBtnMobile {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* MOBILE ANIMATION */
/*@keyframes slideInMobile {
  from { transform: translateX(-150%); opacity: 0; }
  to   { transform: translateX(-50%); opacity: 1; }
}*/

}

/* ----------------------------------------------------
   DESKTOP UITBREIDING
---------------------------------------------------- */

@media (min-width: 1200px) {


  .inner-wrapper {
  height: calc(100vh - 150px);
  min-height: 800px;
  margin: 95px 70px 70px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-left: 35px;
  z-index: 20;
}


.inner-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;

  /* De gradient zelf */
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.80) 0%,   /* links donker */
    rgba(0, 0, 0, 0.00) 40%   /* snel transparant */
  );

  /* Fade‑in animatie */
  opacity: 0; /* start onzichtbaar */
  animation: overlayFade 1.2s forwards ease-out;

}



/* H1 */
.inner-wrapper h1 {
  margin: 10vh 0 20px 0;
  color: #fff;
  font-size: clamp(2.1rem, 5vw, 8rem);
  font-weight: 600;
  line-height: 1;
  transform: translateX(0px);
  opacity: 0;
  animation: slideInH1Desktop 1s forwards ease-out;
  animation-delay: 0.2s;
  text-align: left;
  width: unset;
  z-index: 99;
}

/* H2 */
.inner-wrapper h2 {
  margin: 0 0 0 0;
  transform: translateX(0px);
  color: #fff;
  font-size: clamp(1rem, 2.3vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  opacity: 0;
  animation: fadeInH2Desktop 1s forwards ease-out;
  animation-delay: 1.2s;
  width: unset;
  text-align: left;
  z-index: 99;
}


@keyframes slideInH1Desktop {
  from { transform: translateX(-100%) translateX(0px); opacity: 0; }
  to   { transform: translateX(0px); opacity: 1; }
}


@keyframes fadeInH2Desktop {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.inner-wrapper a.btn {

  color: #d60000;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.05;
  border-radius: 0;
  bottom: unset;
  width: 175px;

  opacity: 0;
  animation: fadeInBtnDesktop 1s forwards ease-out;
  animation-delay: 1.5s;
  margin: 40px 0 0 10%;
  z-index: 99;
}

@keyframes fadeInBtnDesktop {
  from { opacity: 0; }
  to   { opacity: 1; }
}

  .inner-wrapper br {
    display: inline;
  }
}



/* ----------------------------------------------------
   VIDEO / BORDER ANIM
---------------------------------------------------- */

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 0;
}

.border-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: borderGrow 1.2s forwards ease-out;
  z-index: 10;
}

@keyframes borderGrow {
  from { border: 0 solid #E6391E; }
  to   { border: clamp(10px, 5vw, 70px) solid #E6391E; }
}

/* Focus state */
body.user-is-tabbing a.btn:focus {
  outline: 3px solid #005FCC;
  outline-offset: 2px;
}



/* ----------------------------------------------------
   FULLSCREEN SIDE MENU — MOBILE FIRST
---------------------------------------------------- */

.side-menu {
  position: fixed;
  inset: 0;
  background: #E6391E;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*gap: 20px*/;
  z-index: 3500;
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
  transition: opacity .35s ease-out, transform .35s ease-out;
}

.side-menu.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* MOBILE FIRST MENU LINKS */
.side-menu a {
  color: #fff;
   font-size: clamp(1.2rem, 2.5vw, 2rem);       /* mobiel */
  font-weight: 700;
  text-decoration: none;
  opacity: 0.85;
  transition: transform .35s cubic-bezier(.25, .8, .25, 1), opacity .25s ease;
  outline: none;
}

/* Hover */
.side-menu a:hover {
  transform: scale(1.25);
  opacity: 1;
}

/* Keyboard focus */
body.user-is-tabbing .side-menu a:focus {
  outline: 4px solid #ffffff;
  outline-offset: 2px;
  padding: 5px;
}

/* ----------------------------------------------------
   DESKTOP UITBREIDING
---------------------------------------------------- */
@media (min-width: 768px) {
  .side-menu a {
     font-size: clamp(1.2rem, 2.5vw, 2.2rem);    /* desktop */
  }

  .side-menu a:hover {
    transform: scale(1.35);
  }
}


/* ----------------------------------------------------
   EXTRA CONTENT
---------------------------------------------------- */
.content {
  padding: 80px 0;
  font-size: 1.2rem;
  line-height: 1.6;
}

.section-below-video {
/*  margin: 0 70px;
  background: #DCFFFD;
  padding: 80px 60px;*/
}

/* ----------------------------------------------------
   WCAG THEMA
---------------------------------------------------- */
.high-contrast {
  --bg: #000;
  --fg: #fff;
  --accent: #ff0;
}

body {
  background-color: var(--bg);
  color: var(--fg);
}

a, .btn {
  color: var(--accent);
}

/* ----------------------------------------------------
   SWIPER SLIDER
---------------------------------------------------- */


/* Play overlay */
.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1); /* Altijd exact in het midden */
  z-index: 50;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}


.play-icon {
  transition: transform 0.3s ease;
}

.play-icon i {
  font-size: 80px;
  color: #fff !important;
  text-shadow: 0 0 12px rgba(0,0,0,0.4);
}

/* Alleen playbutton vergroten bij hover */
.video-card:hover .play-icon {
  transform: scale(1.5);
}

/* Verberg playbutton tijdens afspelen */
.video-card.playing .play-overlay {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6); /* Zelfde middenpositie */
}

/* Playbutton terug als video stopt */
.video-card:not(.playing) .play-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1); /* Altijd gecentreerd */
}


/* Swiper container */
.swiper {
  position: relative;
}

/* Navigatieknoppen wrapper */
.swiper-nav-wrapper {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: start;
  margin-top: 20px;
}

/* Override Swiper positioning */
.swiper-button-next,
.swiper-button-prev {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}

/* Rode vierkante knoppen */
.custom-btn {
  width: 48px;
  height: 48px;
  background-color: #d60000;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 22px;
  cursor: pointer;
  transition: 0.2s ease;
  border: none;       /* verwijder native browser rand */
  outline: none;      /* geen focus bij muis */
}

/* Hover-effect */
.custom-btn:hover {
  background-color: #b30000;
}

/* Voor pseudo-elementen */
.custom-btn::after {
  font-size: 22px;
  font-weight: bold;
}

/* --------- Keyboard focus alleen bij Tab --------- */


/* VIDEO-CARD: geen focusstijl bij muis */
body:not(.user-is-tabbing) .video-card:focus {
  outline: none;
  border-color: transparent;
}

/* VIDEO-CARD: border-focus bij toetsenbord */
body.user-is-tabbing .video-card:focus {
  border: 5px solid #005FCC;
  border-radius: 0px;
}

/* CUSTOM-BTN:  */
body:not(.user-is-tabbing) .custom-btn:focus {
  outline: none;
}

body.user-is-tabbing .custom-btn:focus {
  outline: 3px solid #005FCC;
  outline-offset: 2px;
}


/* ----------------------------------------------------
   VIDEO SLIDE + BORDER ANIMATIE
---------------------------------------------------- */
.video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

/* Media vullen de container */
.video-card video,
.video-card .video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.video-card video {
  z-index: 2;
}

/* Border animatie bovenop alles */
.video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid #E6391E;
  pointer-events: none;
  border-radius: inherit;
  z-index: 3;
}

/* Hover animatie */
.video-card:hover::after {
  animation: borderGrowSmall 0.3s forwards ease-out;
}

/* Na eerste hover */
.video-card.hovered-once:not(:hover)::after {
  animation: borderShrinkSmall 0.2s forwards ease-out;
}

/* Tijdens afspelen altijd border uit */
.video-card.playing::after {
  border-width: 0 !important;
  animation: none !important;
}

/* Tijdens afspelen + hover ook border uit — MOET ALS LAATSTE KOMEN */
.video-card.playing:hover::after {
  border-width: 0 !important;
  animation: none !important;
}

.video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

@keyframes borderGrowSmall {
  from { border-width: 0; }
  to   { border-width: clamp(6px, 1.8vw, 12px); }
}

@keyframes borderShrinkSmall {
  from { border-width: clamp(6px, 1.8vw, 12px); }
  to   { border-width: 0; }
}


/*.inline-video {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.video-card.playing .inline-video {
  opacity: 1;
  pointer-events: auto;
}*/


/* --- VIDEO LAYER FIX --- */
.video-card .video-thumb {
  z-index: 1;
}

.video-card video {
  z-index: 2;
}

/* Thumbnail volledig weg tijdens afspelen */
.video-card.playing .video-thumb {
  display: none !important;
}

/* --- MOBIEL: overlay mag NOOIT touches blokkeren --- */
.play-overlay {
  pointer-events: none !important;
  touch-action: none !important;
}

/* Tijdens afspelen overlay ook klikloos */
.video-card.playing .play-overlay {
  pointer-events: none !important;
}


/* ----------------------------------------------------
  LOGO GRID
---------------------------------------------------- */


.logo-grid {
  position: relative;
  margin-left: -10px;
  margin-right: -10px;
}

.grid-sizer,
.logo-item {
  width: 20%;
}

@media (max-width: 991px) {
  .grid-sizer,
  .logo-item {
    width: 33.333%;
  }
}

@media (max-width: 767px) {
  .grid-sizer,
  .logo-item {
    width: 50%;
  }
}


.logo-item {
  position: absolute;
}

.logo-inner {
  padding: 16px;
  box-sizing: border-box;
  position: relative;
}

.logo-grid img {
  width: 100%;
  opacity: 1;
  transition: transform .4s ease, filter .4s ease, opacity .4s ease;
  background-color: #fff;
  padding: 15px;
}

.logo-grid img:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
  opacity: 1;
}


/* --- OVERLAY --- */

.hover-text {
  position: absolute;
  inset: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  opacity: 0;
  background: #E6391E;
  pointer-events: none;


  transition: opacity .4s ease, transform .4s ease;


  transform: scale(1);
}

.logo-item:hover .hover-text {
  opacity: 1;
  transform: scale(1.1);
}



body.user-is-tabbing .logo-item:focus {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}


/* ----------------------------------------------------
  LOGO GRID FILTER & SEARCH
---------------------------------------------------- */

/* --------- Select Styling --------- */
.form-select.styled {
  background-color: #E6391E;
  color: white;
  border-radius: 0px;
  padding: 10px 14px;
  padding-right: 2.5rem;
  accent-color: white;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="16" viewBox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M5 7l5 5 5-5H5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 1rem;

  cursor: pointer;
  border: none;
  box-shadow: none;
  outline: none;
  transition: background-color 0.2s;
  font-size: 1rem;
}

.form-select.styled:hover {
  background-color: #d9361c;
}

/* Dropdown opties */
.form-select.styled option {
  background-color: white;
  color: black;
}

.form-select.styled option:checked,
.form-select.styled option:hover {
  background-color: black;
  color: white;
}

/* --------- Input Styling --------- */
#searchInput.form-control {
  background-color: #E6391E;
  color: white;
  border-radius: 0px;
  border: none;
  padding: 10px 14px;
  box-shadow: none;
  transition: background-color 0.2s;
  font-size: 1rem;
}

#searchInput.form-control::placeholder {
  color: rgba(255, 255, 255, 1);
}

/* --------- Keyboard focus alleen bij Tab --------- */
body:not(.user-is-tabbing) .form-select.styled:focus,
body:not(.user-is-tabbing) #searchInput.form-control:focus {
  outline: none;
}

body.user-is-tabbing .form-select.styled:focus,
body.user-is-tabbing #searchInput.form-control:focus {
  outline: 3px solid #005fcc;  /* blauw, duidelijk zichtbaar */
  outline-offset: 2px;
}




/* ----------------------------------------------------
  SECTION SAMENWERKINGSPARTNERS
---------------------------------------------------- */
@media (min-width: 992px) {

.gridBreakOut  {
 width: 124%;
}
}




/* ----------------------------------------------------
  SECTION SAMENWERKINGSPARTNERS
---------------------------------------------------- */


.bg-image-section {
  position: relative;
  min-height: 70vh;
  background-image: url('../img/samenwerking.webp');
  background-size:  cover;
  background-position: top;
  background-repeat: no-repeat;
  padding: 80px 0;
  overflow: hidden;
}

/* Donker transparant overlay */
.bg-image-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.95) 20%,
    rgba(0, 0, 0, 0.00) 95%
  );
  z-index: 1;
}


.bg-image-section .container {
  position: relative;
  z-index: 2;
}

.samenwerkendePartijen a.btn {
  background:  #E6391E;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.05;
  border-radius: 0;
 }


/* ----------------------------------------------------
  FOOTER
---------------------------------------------------- */



.footer-logo {
  height: 140px;
  width: auto;
}

/*.footer-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #000;
}*/

.footer-nav .footer-link {
  color: #d60000;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}

.footer-nav .footer-link:hover,
.footer-nav .footer-link:focus {
  text-decoration: underline;
}

.footer-nav li {
  margin-bottom: 0px;
  line-height: 1.2;
}

.footer-nav .top-link {
  color: #E6391E;
  text-decoration: none;
  font-weight: 700;
}

/* Zwarte kleur voor de onderste twee */
.footer-nav .bottom-link {
  color: #000;
  text-decoration: none;
  font-weight: 500;
}

/* Extra ruimte tussen de groepen */
.footer-nav .footer-separator {
  margin: 20px 0;
}

/* Hover & focus consistent */
.footer-nav a:hover,
.footer-nav a:focus {
  text-decoration: underline;
}

/* WCAG focus */
body.user-is-tabbing .footer-nav a:focus {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}


/* WCAG focus hrefs */
body.user-is-tabbing a:focus {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}



/* ----------------------------------------------------
  ANCHOR OFFSET (REDUCE MOTION MODE)
---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .anchor-offset {
    position: relative;
    top: -120px;
    height: 0;
    margin: 0;
    padding: 0;
    display: block;
  }
}


/* ----------------------------------------------------
   PREFERS REDUCED MOTION — WCAG IMPLEMENTATIE
---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .wcag-hamburger span {
    transition: none !important;
  }

  .side-menu {
    transition: none !important;
    transform: none !important;
  }

  .side-menu a {
    transition: none !important;
    transform: none !important;
  }

  h1 {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .video-card::after {
    animation: none !important;
    border-width: 0 !important;
  }

  .video-card:hover .play-icon {
    transform: none !important;
  }

  /* overlay verdwijnt tijdens afspelen */
  .video-card.playing .play-overlay {
    transition: none !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0 !important;
  }

  .border-anim {
    animation: none !important;
    border: clamp(10px, 5vw, 70px) solid #E6391E !important;
  }

  html {
    scroll-behavior: auto !important;
  }

  #smooth-wrapper,
  #smooth-content {
    transform: none !important;
  }

  #smooth-wrapper {
    overflow: visible !important;
  }
}

/*
  SKIP LINK STYLING (WCAG 2.4.1)
  ------------------------------
  - Normaal verborgen buiten beeld
  - Wordt zichtbaar zodra hij focus krijgt (bij Tab)
  - Hoge contrastkleuren voor toegankelijkheid
  - Z-index hoog zodat hij altijd boven de layout staat
*/
.skip-link {
  position: absolute;
  top: -80px;              /* buiten beeld */
  left: 0;
  background: #fff;        /* hoge contrastkleur */
  color: #000;
  padding: 10px 16px;
  z-index: 9999;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid #000;
  transition: top 0.2s ease;
}

/*
  Wanneer de gebruiker Tab drukt:
  - Skip-link schuift in beeld
  - Wordt bruikbaar voor toetsenbordgebruikers
*/
.skip-link:focus {
  top: 0;
}


.onsVerhaal a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  color: #E6391E;
}