/* Eigen aanvullingen op het thema */

/* Referenties: initiaal in plaats van een foto */
.testimonial-block .author-box .author-initials {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--theme-color1); color: #fff;
  border: 5px solid var(--theme-color-light);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  font-family: var(--headings-font, inherit); font-weight: 700; font-size: 36px; line-height: 1;
}
@media (max-width: 575.98px) {
  .testimonial-block .author-box .author-initials { width: 64px; height: 64px; font-size: 26px; }
}

/* Menu: Inloggen als knop achter Contact (header en sticky header; in het mobiele menu een gewone regel) */
.main-header .main-menu .navigation > li.nav-login:before { display: none; }
/* Negatieve marge = padding + rand, zodat de tekst op dezelfde lijn staat als de andere menu-items */
.main-header .main-menu .navigation > li.nav-login > a { padding: 4px 20px; margin: -5.5px 0; border: 1.5px solid currentColor; border-radius: 999px; }
.main-header .main-menu .navigation > li.nav-login > a:hover { background: var(--theme-color1); border-color: var(--theme-color1); color: #fff; }

/* Iconen: thema zet hier font-family: flaticon vast; Font Awesome light-iconen moeten hun eigen lettertype houden */
.feature-block-five .icon.fa-light { font-family: "Font Awesome 6 Pro"; font-weight: 300; }

/* Tellers: 10.000+ op één regel houden; in vier smalle kolommen (992-1199px) iets kleiner */
.counter-block .inner-box .count-box { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .counter-block .inner-box .count-box, .counter-block .inner-box .count-text { font-size: 40px; }
}

/* Hero: donkere achtergrond zolang de slider en foto nog laden (er is geen preloader meer) */
.main-slider, .main-slider .rev_slider_wrapper { background: #0b1f3f linear-gradient(135deg, #0d6efd 0%, #0b1f3f 55%, #1d2327 100%); }

/* Hero: label boven de grote kop */
.hero-eyebrow { display: inline-block; margin-bottom: 16px; padding: 7px 16px; border-radius: 999px; background: rgba(13,110,253,.9); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 575.98px) { .hero-eyebrow { font-size: 12px; padding: 6px 12px; margin-bottom: 12px; } }

/* Koppelt met: tekst in plaats van technologielogo's */
.koppelt { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px 22px; padding: 28px 0 8px; border-top: 1px solid rgba(0,0,0,.08); }
.koppelt-label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-color1); white-space: nowrap; padding-top: 10px; }
.koppelt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; flex: 1 1 520px; }
.koppelt-list li { font-weight: 600; color: #2d3436; background: #fff; border: 1px solid #e3e6ea; border-radius: 999px; padding: 8px 18px; font-size: 15px; }
.koppelt-list li.more { background: transparent; border-color: transparent; color: #636e72; font-weight: 400; padding-left: 4px; }
.koppelt-andersom { border-top: 0; padding-top: 10px; }
.koppelt-list li.api { background: #e7f0fe; border-color: #b9d3fd; color: #0b4fb3; font-weight: 700; }
@media (min-width: 576px) { .koppelt-label { min-width: 132px; } }
@media (max-width: 575.98px) {
  .koppelt-list { gap: 8px; }
  .koppelt-list li { font-size: 13px; padding: 5px 12px; }
}

/* FAQ: links in de antwoorden herkenbaar maken */
.accordion-box .acc-content .text a { color: var(--theme-color1); text-decoration: underline; text-underline-offset: 3px; }

/* FAQ: modulelijst in twee kolommen */
.faq-modules { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.faq-modules li { position: relative; padding-left: 16px; font-size: 15px; color: #2d3436; }
.faq-modules li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-color1); }
@media (max-width: 575.98px) { .faq-modules { grid-template-columns: 1fr; } }

/* Logo: nieuwe verhouding (3,7:1), hoogte vastzetten per plek */
.main-header .logo-box .logo img { max-height: 54px; width: auto; }
/* Thema maakt het headerlogo wit (filter); het nieuwe logo heeft een eigen blauw beeldmerk.
   Schaduw houdt het blauwe vierkant zichtbaar op de blauwe gloed van de hero. */
.main-header.header-style-three .header-lower .logo-box .logo { -webkit-filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); }
.sticky-header .logo img { max-height: 34px; width: auto; }
.mobile-menu .nav-logo img { max-height: 40px; width: auto; }
.main-footer .logo img { max-height: 52px; width: auto; }

/* ===== Mobiel ===== */

/* Hamburger: groter tikvlak (min. 44px) zonder dat het icoon verschuift; sluiten werkt ook op iOS */
.mobile-nav-toggler { padding: 12px; margin: -12px -12px -12px 8px; -webkit-tap-highlight-color: transparent; }
.mobile-menu .menu-backdrop, .mobile-menu .close-btn { cursor: pointer; }
.mobile-menu .close-btn { padding: 10px; margin: -10px; }
/* Menu opent sneller: geen 200ms vertraging, kortere animatie */
.mobile-menu-visible .mobile-menu .menu-backdrop { -webkit-transition: all .2s ease; transition: all .2s ease; }
.mobile-menu-visible .mobile-menu .menu-box { -webkit-transition: all .25s ease; transition: all .25s ease; }
.mobile-menu .navigation li.nav-login > a { color: #fff; }
/* Contactgegevens in het (zwarte) mobiele menu leesbaar maken */
.mobile-menu .contact-list-one .contact-info-box .title { color: rgba(255,255,255,.6); }
.mobile-menu .contact-list-one .contact-info-box a { color: #fff; }

/* Vacatures: knop om de details uit te klappen (alleen op mobiel zichtbaar) */
.vac-toggle { display: none; }

@media (max-width: 767.98px) {
  /* Lijsten: geen vaste regelhoogte van 40px, wel een hangend icoon */
  .list-style-two li { display: block; font-size: 15px; line-height: 1.55; padding: 6px 0; }
  .list-style-two li > i:first-child { position: absolute; left: 0; top: 9px; margin: 0; }
  .list-style-two li:has(> i:first-child) { padding-left: 28px; }
  .vacatures-card .list-style-two li { font-weight: 400; }
  .vacatures-card .section-label { margin-bottom: 4px; }

  /* Vacatures inklappen: kern zichtbaar, details na een tik */
  .vacatures-card.kan-inklappen:not(.is-open) > .row.gy-4,
  .vacatures-card.kan-inklappen:not(.is-open) .meta-row > div:last-child { display: none; }
  .vac-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; background: none;
                color: var(--theme-color1); font-weight: 600; font-size: 15px; cursor: pointer; }
  .vac-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                       transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
  .vacatures-card.is-open .vac-toggle::after { transform: rotate(-135deg) translateY(-2px); }
  .vacatures-card .mt-30 { margin-top: 18px !important; }
}

@media (max-width: 575.98px) {
  /* Hero: knoppen netjes onder elkaar */
  .main-slider .tp-caption .theme-btn.ms-3 { margin-left: 0 !important; margin-top: 12px; }

  /* Tellers: twee naast elkaar, compacter */
  .counter-block { margin-bottom: 14px; padding-left: 7px; padding-right: 7px; }
  .counter-block .inner-box { border-width: 6px; margin-top: 44px; padding: 50px 8px 18px; }
  .counter-block .inner-box .icon { width: 76px; height: 76px; font-size: 34px; top: -44px; }
  .counter-block .inner-box .count-box, .counter-block .inner-box .count-text { font-size: 30px; }
  .counter-block .inner-box .count-box { margin-bottom: 10px; }
  .counter-block .inner-box .counter-title { font-size: 14px; line-height: 1.3; margin-bottom: 0; }
  .counter-block .inner-box .icon-lines-5 { display: none; }

  /* Footer: modules in twee kolommen */
  .main-footer .links-widget .user-links { -webkit-columns: 2; columns: 2; -webkit-column-gap: 16px; column-gap: 16px; }
  .main-footer .links-widget .user-links li { -webkit-column-break-inside: avoid; break-inside: avoid; font-size: 14px; }
}