/* =========================================================================
   Dashfix gedeelde opmaaklaag
   -------------------------------------------------------------------------
   Kleine, site-brede correcties die op élke pagina gelden — ongeacht welke
   van de twee headers (oud template of SEO-pagina's) gebruikt wordt. De
   bestaande stylesheets blijven onaangeroerd; dit bestand komt als laatste
   zodat het bewust kan bijschaven zonder de templates te breken.
   ========================================================================= */

/* --- Toetsenbord: altijd een duidelijke focusring ------------------------ */
:focus-visible {
  outline: 3px solid #c62026;
  outline-offset: 2px;
  border-radius: 3px;
}
/* Alleen rand tonen bij toetsenbordgebruik; muis houdt de bestaande vorm. */
:focus:not(:focus-visible) {
  outline: none;
}

/* --- Skip-link: onzichtbaar tot hij gefocust wordt ----------------------- */
.df-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 3000;
  padding: 12px 18px;
  background: #c62026;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: top .18s ease;
}
.df-skip:focus,
.df-skip:focus-visible {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: -3px;
}
/* Het focusdoel zelf mag geen kader tekenen. */
#main-content:focus {
  outline: none;
}

/* --- Vaste header: ankers en focusroutines moeten er niet onder verdwijnen -- */
:target {
  scroll-margin-top: 140px;
}
html {
  scroll-padding-top: 140px;
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 991px) {
  :target { scroll-margin-top: 90px; }
  html { scroll-padding-top: 90px; }
}

/* Alleen soepel scrollen als de bezoeker daar niet om vraagt. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Kleine consistente verbeteringen ----------------------------------- */
::selection {
  background: #c62026;
  color: #fff;
}

/* Lange woorden en URL's mogen geen bestaande kolom of kaart uit duwen. */
p,
li,
dd,
dt,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Afbeeldingen met expliciete HTML-maten moeten niet buiten hun container
   steken op smalle schermen. */
img {
  max-width: 100%;
}
.logo-header img,
.logo-footer img,
.df-brand img {
  max-width: none;
}

/* Formulieren: geen zoomopdracht op iOS bij focus in invoervelden. */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* Uitklapbare mobiele navigatie: voldoende tikoppervlak. */
.navbar-nav > li > a,
.df-menu > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* --- SEO-header: navigatie inklappen vóórdat deze buiten beeld loopt ------
   seo-pages.css klapt pas bij 680px, maar met een volledige menuzet
   (6 kernlinks + account + CTA) is de balk vanaf ±1140px te breed voor de
   container. Tussen de bestaande breakpoints in klappen we hier al naar de
   hamburger, zodat er op tablet en kleine laptop nooit een scrollbar of
   afgeknipt menu ontstaat. Het venster is bewust 681px+ zodat de regels van
   seo-pages.css onder 680px ongewijzigd winnen. */
@media (min-width: 681px) and (max-width: 1140px) {
  .df-mobile-toggle {
    display: block;
  }
  .df-menu {
    position: absolute;
    top: 84px;
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow, 0 18px 55px rgba(18, 29, 40, .1));
  }
  .df-menu.is-open {
    display: flex;
  }
  .df-menu a {
    padding: 12px 14px;
    justify-content: flex-start;
  }
  .df-menu .df-nav-cta {
    margin: 4px 0 0;
    text-align: center;
    justify-content: center;
  }
}

/* Footer-uitlogknop moet eruitzien als de links eromheen. */
.df-footer-linkbtn,
.df-footer .df-footer-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Nette focus- en hoverstaat voor de vaste WhatsApp-knop. */
.float:focus-visible,
.df-whatsapp:focus-visible {
  outline: 3px solid #0b50c8;
  outline-offset: 3px;
}

/* Drukbare pagina's: geen vaste header, geen knoppen, geen achtergronden. */
@media print {
  .site-header,
  .top-bar,
  .sticky-header,
  .df-whatsapp,
  .float,
  .scroltop,
  .df-skip,
  #loading-area {
    display: none !important;
  }
  body {
    padding-top: 0 !important;
  }
  .page-wraper {
    padding-bottom: 0 !important;
  }
}