/*
 * Theme additions on top of the ported screen.css. Keep this file small: every rule here is a
 * deliberate deviation or a WordPress-only need, and each one is documented.
 */

/* WordPress admin bar pushes the fixed header down (logged-in users only). */
body.admin-bar header.header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar header.header { top: 46px; } }

/* ---------------------------------------------------------------- changes after the recreation, 2026-09-17 */

/* Upper bar: the original leaves it white below 768px; dark on every width now, for one consistent header. */
header.header .upperbar {
  background-color: #212b3a;
  border-bottom: rgba(33, 43, 58, .25) solid 1px;
  color: #fff;
}

/* Footer logos: the original left-aligns the two rows on mobile; centred on every width now. */
.footer__blue .footer__logos { justify-content: center; text-align: center; }
.footer__blue .footer__logos p { width: 100%; text-align: center; }
@media print, screen and (min-width: 48em) {
  .footer__blue .footer__logos p { width: auto; }
}

/* Home hero: the page heading (h1) to the left of the configurator box, over the photo. */
.block_configurator .hero-intro {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .35);
}
/* The heading sits in a column of about 500px, so at the old maximum of 46px it broke onto four
   lines. Capped at 38px and given back the room the right hand padding was taking, it reads on two
   lines from a tablet upwards, which is where it looks best next to the configurator box. */
.block_configurator .hero-intro__title {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.3;
  margin: 0 0 16px;
  text-wrap: balance;
}

/* The photo behind the heading is a bright sky, measured at 43 to 45 percent near white pixels, so
   white text on it was hard to read whatever the text shadow did. The picture is already behind the
   content at z-index -1, so a gradient on the picture darkens the photo and never the text. Weighted
   to the top, because the heading sits at the top of the photo on every width. */
.block_configurator picture.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .42) 38%, rgba(0, 0, 0, .14) 68%, rgba(0, 0, 0, 0) 92%);
}
.block_configurator .hero-intro__title span.sun:after {
  background-size: 24px 24px;
  width: 24px;
  height: 24px;
  transform: translateX(4px) translateY(-10px);
}
.block_configurator .hero-intro__text {
  font-size: 17px;
  line-height: 1.5;
  max-width: 34em;
  margin: 0;
}
@media print, screen and (min-width: 48em) {
  /* The heading sits beside the form again. The 48px it originally had on the right pushed it into
     a fourth line, so it is 24px now: enough air between the heading and the form card, not a whole
     line's worth of room given away. */
  .block_configurator .hero-intro {
    flex: 1 1 0;
    align-self: flex-start;
    padding: 8px 24px 32px 0;
    max-width: 720px;
  }
}
@media print, screen and (min-width: 90em) {
  .block_configurator .hero-intro__title span.sun:after {
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
    transform: translateX(4px) translateY(-14px);
  }
}
@media print, screen and (max-width: 47.99875em) {
  .block_configurator { position: relative; }
  .block_configurator .hero-intro {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    z-index: 1;
  }
  .block_configurator .hero-intro__title { font-size: 26px; margin-bottom: 10px; }
  /* op een telefoon staat de kop bovenaan over de foto, dus daar van boven verdonkeren */
  .block_configurator picture.bg::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .35) 32%, rgba(0, 0, 0, .05) 58%, rgba(0, 0, 0, 0) 80%);
  }
  .block_configurator .hero-intro__title span.sun:after {
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    transform: translateX(3px) translateY(-8px);
  }
  .block_configurator .hero-intro__text { display: none; }
}
/* keep the sun on the same line as its word */
.block_configurator .hero-intro__title span.sun { white-space: nowrap; }

/* Ads landing pages (/lp-*/): review cards and the privacy line at the bottom. */
.block_packages .package .lp-review-source { font-size: 13px; opacity: .7; margin-bottom: 0; }
.lp-privacy { font-size: 13px; line-height: 1.5; color: #555; }

/* Upper bar USPs: all five render and general.js keeps one (mobile) or three (desktop). Until it runs
   the list wrapped onto two lines and the whole header dropped 24px when it collapsed: the one
   layout shift every page had. One line, clipped, so the bar has its final height from the start. */
header.header .upperbar .upper-usps .usps { flex-wrap: nowrap; overflow: hidden; max-height: 12px; }
@media print, screen and (min-width: 48em) {
  header.header .upperbar .upper-usps .usps { max-height: 17px; }
}

/* ---------------------------------------------------------------- site search (header), 2026-09-18 */
/* Two copies of the form: .site-search--topbar (magnifier before the rating, desktop, field drops
   down on click) and .site-search--menu (field at the top of the mobile menu panel). */
.site-search__toggle,
.site-search__submit {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-search__form { display: flex; flex-direction: row; align-items: center; }
.site-search__input {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(33, 43, 58, .25);
  border-radius: 4px 0 0 4px;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  color: #212b3a;
  background: #fff;
  box-shadow: none;
}
.site-search__input:focus { outline: none; border-color: #212b3a; box-shadow: none; }
.site-search__submit {
  order: 2;
  height: 44px;
  width: 48px;
  border-radius: 0 4px 4px 0;
  background: #ee7203;
  color: #fff;
}
.site-search__submit:hover { background: #d66600; }

/* upper bar copy: desktop only, white magnifier at the right end of the dark strip, flush with the
   orange button's edge (the button hangs 64/128px outside the container, like the old job link did) */
.site-search--upperbar { display: none; }
@media screen and (min-width: 64em) {
  .site-search--upperbar {
    display: flex;
    align-items: center;
    position: relative;
    color: #fff;
  }
  .site-search--upperbar .site-search__toggle { width: 30px; height: 30px; border-radius: 50%; color: #fff; }
  .site-search--upperbar .site-search__toggle:hover,
  .site-search--upperbar .site-search__toggle:focus-visible,
  .site-search--upperbar.is-open .site-search__toggle { color: #ee7203; }
  .site-search--upperbar .site-search__form {
    display: none;
    position: absolute;
    top: 40px;
    right: -6px;
    width: 340px;
    padding: 12px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(33, 43, 58, .25);
    z-index: 30;
  }
  .site-search--upperbar.is-open .site-search__form { display: flex; }
}

/* menu copy: mobile only, above the menu list inside the dark panel */
.site-search--menu { display: none; }
@media print, screen and (max-width: 63.99875em) {
  .site-search--menu .site-search__toggle { display: none; }
  .site-search--menu { padding: 0 16px 8px; }
  header.header.menu-open nav.navigation .grid-container { display: flex; flex-direction: column; }
  header.header.menu-open nav.navigation .site-search--menu { display: block; order: -1; }
  .site-search--menu .site-search__input { border-color: transparent; }
}

/* The <main> landmark sits between the header and the first section and between the last section
   and the footer, so two adjacency rules of the original need a second spelling. */
@media screen and (min-width: 64em) {
  header.header + main > :first-child { margin-top: 186px; }
}
main:has(> section.block_overview-hero-image:last-child) + footer { margin-top: 0; }
@media print, screen and (min-width: 48em) and (max-width: 63.99875em) {
  main:has(> section.block_overview-hero-image:last-child) + footer { margin-top: 175px; }
}

/* ---------------------------------------------------------------- language switcher, 2026-09-24 */
/* The dark upper bar carries the tools at its right end: the search magnifier (desktop) and the
   flag of the other language (every width), the flag flush with the orange button's edge. */
.upper-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
@media screen and (min-width: 75em) { .upper-tools { margin-right: -64px; } }
@media screen and (min-width: 90em) { .upper-tools { margin-right: -128px; } }

.lang-switch {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
  transition: box-shadow .15s linear, transform .15s linear;
}
.lang-switch:hover,
.lang-switch:focus-visible { box-shadow: 0 0 0 2px #ee7203; transform: translateY(-1px); }
.lang-switch__flag { display: block; width: 24px; height: 16px; }
@media print, screen and (max-width: 47.99875em) {
  .lang-switch__flag { width: 21px; height: 14px; }
}
/* The magnifier is a 30px hit target but must not make the dark bar taller than it was: the header
   height is what the fixed-header offset (186px) is built on. */
@media screen and (min-width: 64em) {
  .site-search--upperbar .site-search__toggle { margin-top: -7px; margin-bottom: -7px; }
}

/* Form confirmation: replaces the form after sending (?form_sent=N#form-N lands on it). The fixed
   header is 186px high on desktop, so the anchor stops below it. */
.form-success {
  scroll-margin-top: 200px;
  margin: 1.5rem 0;
  padding: 1.5rem 1.75rem;
  border: 2px solid #3c8c40;
  border-radius: 8px;
  background: #eef7ee;
  color: #1f4d22;
  font-size: 1.125rem;
}
.form-success p:last-child { margin-bottom: 0; }
@media screen and (max-width: 63.9375em) {
  .form-success { scroll-margin-top: 100px; }
}

/* Thank-you popup after a form was sent (blocks/form/render.php). */
.form-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(33, 43, 58, .6);
  animation: form-popup-in .25s ease-out;
}
.form-popup.is-closed { display: none; }
.form-popup__box {
  position: relative;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  border-radius: 12px;
  background: #fefefe;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  text-align: center;
}
.form-popup__img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center 30%;
  border-bottom: 6px solid #f4732d;
}
.form-popup__body { padding: 28px 28px 32px; }
.form-popup__title { margin: 0 0 10px; color: #212b3a; }
.form-popup__body p { margin-bottom: 0; }
.form-popup__ok { margin-top: 24px; min-width: 200px; }
.form-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #212b3a;
  font-size: 28px;
  line-height: 40px;
  cursor: pointer;
}
.form-popup__close:hover { background: #fff; color: #f4732d; }
@keyframes form-popup-in { from { opacity: 0; } to { opacity: 1; } }
@media screen and (max-width: 39.9375em) {
  .form-popup__img { height: 170px; }
  .form-popup__body { padding: 22px 20px 26px; }
}