/*!
 * Getlink Customs Services - UI: knop-states, focus, formulieren, footer, icoontjes.
 * Onderdeel van de plugin glg-site-enhancements.
 * Icoontjes: Phosphor Icons (MIT), https://phosphoricons.com
 */

:root {
  --glg-navy: var(--gcid-secondary-color, #000050);
  --glg-orange: var(--gcid-primary-color, #ff8b00);
  --glg-navy-deep: #00002e;
  --glg-orange-deep: #e07700;
  --glg-ease: cubic-bezier(.2, .7, .2, 1);
  --glg-ph-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E");
  --glg-ph-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   1. Knoppen: hover, focus en indrukken
   Divi-knoppen, het Gravity Forms verzendknopje en de header-CTA delen
   hetzelfde gedrag: hover (alleen met muis), :active (ook op touch),
   en een tweelaagse focusring die op licht en donker zichtbaar is.
   --------------------------------------------------------------- */
.et_pb_button,
.gform_wrapper .gform_button,
.gform_wrapper .gform_footer .button,
.hoofd-menu .menu_cta > a {
  transition:
    background-color .22s var(--glg-ease),
    color .22s var(--glg-ease),
    border-color .22s var(--glg-ease),
    box-shadow .22s var(--glg-ease),
    transform .16s var(--glg-ease),
    filter .16s var(--glg-ease) !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (hover: hover) {
  .et_pb_button:hover,
  .gform_wrapper .gform_button:hover,
  .gform_wrapper .gform_footer .button:hover,
  .hoofd-menu .menu_cta > a:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(0, 0, 80, .45);
  }

  /* Oranje knop op een navy vlak (bv. de hero): navy hover verdwijnt in de achtergrond.
     De klasse glg-on-dark zet glg-ui.js op knoppen in een donkere sectie.
     De selector kopieert de #page-container van Divi om zijn !important te overstemmen. */
  body #page-container .et_pb_section .et_pb_button.glg-on-dark:hover {
    background-color: #fff !important;
    color: var(--glg-navy) !important;
    border-color: #fff !important;
  }

  /* Gravity Forms verzendknop: dezelfde hover als de andere knoppen (navy met wit) */
  .gform_wrapper .gform_button:hover,
  .gform_wrapper .gform_footer .button:hover {
    background-color: var(--glg-navy) !important;
    color: #fff !important;
  }
}

.et_pb_button:active,
.gform_wrapper .gform_button:active,
.gform_wrapper .gform_footer .button:active,
.hoofd-menu .menu_cta > a:active {
  transform: translateY(0) scale(.97) !important;
  box-shadow: none !important;
  filter: brightness(.9);
  transition-duration: .06s !important;
}

.et_pb_button:focus-visible,
.gform_wrapper .gform_button:focus-visible,
.gform_wrapper .gform_footer .button:focus-visible,
.hoofd-menu .menu_cta > a:focus-visible {
  outline: 2px solid transparent !important; /* zichtbaar in Windows hoog contrast */
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--glg-navy) !important;
}

/* Divi pijltje in de knoppen: Phosphor arrow-right in plaats van het ETmodules glyph.
   Divi plaatst het pijltje met top 50% en translateY(-50%); dat houden we vast. */
body #page-container .et_pb_section .et_pb_button::after,
body #page-container .et_pb_section .et_pb_button:hover::after {
  content: "" !important;
  font-family: inherit !important;
  width: 17px;
  height: 17px;
  top: 50% !important;
  margin-top: 0 !important;
  line-height: 1 !important;
  color: inherit !important;
  background-color: currentColor;
  -webkit-mask: var(--glg-ph-arrow) center / 17px 17px no-repeat;
  mask: var(--glg-ph-arrow) center / 17px 17px no-repeat;
  transform: translateY(-50%) !important;
  transition: transform .22s var(--glg-ease), margin-left .22s var(--glg-ease);
}
@media (hover: hover) {
  body #page-container .et_pb_section .et_pb_button:hover::after {
    transform: translate(3px, -50%) !important;
  }
}

/* ---------------------------------------------------------------
   2. Focus voor links, knoppen en velden (WCAG 2.4.7 en 1.4.11)
   --------------------------------------------------------------- */
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--glg-navy);
  outline-offset: 3px;
  border-radius: 4px;
}
.et-l--footer :where(a, button):focus-visible,
.glg-on-dark :where(a, button):focus-visible {
  outline-color: #fff;
}

/* Navigatie in de header (desktop) */
.hoofd-menu .et_pb_menu__menu > nav > ul > li > a {
  transition: color .2s var(--glg-ease);
}
.hoofd-menu .et_pb_menu__menu > nav > ul > li:not(.menu_cta) > a:active {
  color: var(--glg-orange-deep);
}

/* ---------------------------------------------------------------
   3. Gravity Forms velden: dezelfde afronding als de knoppen, 16px tegen
      iOS-inzoomen, zichtbare focus en foutstatus
   --------------------------------------------------------------- */
.gform_wrapper .gfield input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]),
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
  font-size: 16px !important;
  min-height: 48px;
  padding: 12px 16px !important;
  border: 1.5px solid rgba(0, 0, 80, .4) !important;
  border-radius: 12px !important;
  background-color: #fff;
  color: var(--glg-navy);
  box-shadow: none;
  transition: border-color .2s var(--glg-ease), box-shadow .2s var(--glg-ease);
}
.gform_wrapper .gfield textarea { min-height: 150px; }

@media (hover: hover) {
  .gform_wrapper .gfield input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):hover,
  .gform_wrapper .gfield select:hover,
  .gform_wrapper .gfield textarea:hover {
    border-color: var(--glg-navy) !important;
  }
}

.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus {
  border-color: var(--glg-orange) !important;
  box-shadow: 0 0 0 4px rgba(255, 139, 0, .3) !important;
  outline: 2px solid transparent !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
  border-color: #b3261e !important;
}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors h2 {
  color: #b3261e !important;
}

.gform_wrapper .gform_button,
.gform_wrapper .gform_footer .button {
  min-height: 48px;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* ---------------------------------------------------------------
   4. Kopregel (eyebrow) boven een H1: een <p> met de stijl van de oude kleine H1
   --------------------------------------------------------------- */
.et_pb_text p.glg-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.et_pb_text p.glg-eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ---------------------------------------------------------------
   5. Icoontjes: Phosphor (inline SVG) in plaats van de Divi icon font
   --------------------------------------------------------------- */
.et-pb-icon.glg-ph {
  font-family: inherit !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.et-pb-icon.glg-ph > svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Dropdown-pijltje in het desktopmenu en het taalmenu */
.hoofd-menu .menu-item-has-children > a:first-child::after,
.hoofd-menu .menu-item-has-children > a::after {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  position: static !important;
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: var(--glg-ph-caret) center / contain no-repeat;
  mask: var(--glg-ph-caret) center / contain no-repeat;
  opacity: 1 !important;
}

/* Divi reserveert rechts 20px voor het oorspronkelijke, absoluut gepositioneerde pijltje.
   Het pijltje staat nu gewoon achter de tekst, dus die ruimte weghalen. Anders is de afstand
   tussen "Diensten" en "Over ons" groter dan tussen de andere menu-items. */
.hoofd-menu .menu-item-has-children > a {
  padding-right: 0 !important;
}

/* ---------------------------------------------------------------
   5b. Hero van de home
   - De H1 staat op twee regels. De kop is breder dan de tekstkolom naast de foto, dus een iets
     kleiner lettertype (schaalt mee met het scherm) en een vaste breedte in em, waardoor de regel
     altijd na "voor" (NL) of "your" (EN) breekt. Zo blijft alles links van de foto.
   - Strakker ritme: kopregel, kop, intro en knoppen staan dicht op elkaar in plaats van
     50 tot 60px uit elkaar.
   - De knoppen staan naast elkaar (de kolom is een rij die mag omslaan).
   - Tweede knop (Offerte aanvragen) als omlijnde knop, zodat de oranje knop de hoofdactie blijft.
   - Foto met afgeronde hoeken en een zachte schaduw.
   --------------------------------------------------------------- */
@media (min-width: 981px) {
  body.home .et_pb_section_0 .et_pb_row_0 .et_pb_text_0 h1 {
    font-size: min(48px, 3.75vw) !important;
    width: 12em;
    max-width: none;
    text-wrap: balance;
    overflow-wrap: normal;
    line-height: 1.1;
    letter-spacing: -.01em;
  }
}
body.home .et_pb_section_0 .et_pb_row_0 .et_pb_text_0 h1 {
  padding-bottom: 0;
}
/* Telefoon: "Maatwerkspecialist" is op 40px net te breed voor een scherm van 390px. */
@media (max-width: 480px) {
  body.home .et_pb_section_0 .et_pb_row_0 .et_pb_text_0 h1 {
    font-size: min(40px, 9.2vw) !important;
  }
}

body.home .et_pb_section_0 .et_pb_row_0 .et_pb_column_0 {
  flex-flow: row wrap;
  align-items: center;
  align-content: flex-start;
  gap: 14px;
}
body.home .et_pb_section_0 .et_pb_row_0 .et_pb_column_0 > .et_pb_text {
  flex: 0 0 100%;
}
body.home #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_0 {
  margin-bottom: 0 !important;
}
body.home #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_1 {
  margin: 6px 0 18px !important;
}
body.home .et_pb_section_0 .et_pb_row_0 .et_pb_text_1 p {
  max-width: 24em;
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
}
body.home .et_pb_section_0 .et_pb_row_0 .et_pb_column_0 > .et_pb_button_module_wrapper {
  flex: 0 0 auto;
}

/* Tweede knop: omlijnd. De rand is een inset schaduw, zodat de knop even groot blijft als de oranje. */
body.home #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_button_module_wrapper ~ .et_pb_button_module_wrapper .et_pb_button {
  background-color: transparent !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}
@media (hover: hover) {
  body.home #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_button_module_wrapper ~ .et_pb_button_module_wrapper .et_pb_button:hover {
    background-color: #fff !important;
    color: var(--glg-navy) !important;
    box-shadow: inset 0 0 0 2px #fff, 0 10px 22px -8px rgba(0, 0, 20, .6);
  }
}

body.home .et_pb_section_0 .et_pb_row_0 .et_pb_image_0 img {
  border-radius: 16px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 20, .7);
}

/* ---------------------------------------------------------------
   6. Footer
   --------------------------------------------------------------- */
/* Vier kolommen: logo en intro | Menu | Diensten | Contact. Het grid staat hier,
   zodat de indeling niet afhangt van de flex-klassen die Divi per scherm toevoegt. */
.et-l--footer .et_pb_section_0_tb_footer > .et_pb_row_0_tb_footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
  column-gap: clamp(32px, 4vw, 64px) !important;
  row-gap: 40px;
  align-items: start;
}
.et-l--footer .et_pb_section_0_tb_footer > .et_pb_row_0_tb_footer > .et_pb_column {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: none !important;
}

/* Tablet en telefoon: logo bovenaan over de volle breedte, daaronder Menu en Diensten
   naast elkaar, dan Contact. Pas onder 340px komt alles onder elkaar. */
@media (max-width: 980px) {
  .et-l--footer .et_pb_section_0_tb_footer > .et_pb_row_0_tb_footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
  .et-l--footer .et_pb_row_0_tb_footer > .et_pb_column:first-child,
  .et-l--footer .et_pb_row_0_tb_footer > .et_pb_column:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 339px) {
  .et-l--footer .et_pb_section_0_tb_footer > .et_pb_row_0_tb_footer {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Intro onder het logo */
.et-l--footer .et_pb_text_inner p.glg-footer-intro {
  margin: 20px 0 0;
  padding: 0;
  max-width: 30ch;
  font-size: 16px;
  line-height: 1.5;
}

/* Links: grotere raakvlakken, rustige hover, duidelijke active-state */
.et-l--footer .et_pb_text_inner p {
  margin: 0;
  padding-bottom: 0;
}
.et-l--footer .footer-link,
.et-l--footer .et_pb_blurb .et_pb_module_header a,
.et-l--footer .et_pb_row_1_tb_footer a {
  display: inline-block;
  padding: 7px 0;
  text-decoration: none;
  transition: color .2s var(--glg-ease);
}
.et-l--footer .footer-link:active,
.et-l--footer .et_pb_blurb .et_pb_module_header a:active,
.et-l--footer .et_pb_row_1_tb_footer a:active {
  color: var(--glg-orange-deep) !important;
}
@media (hover: hover) {
  .et-l--footer .footer-link:hover,
  .et-l--footer .et_pb_blurb .et_pb_module_header a:hover,
  .et-l--footer .et_pb_row_1_tb_footer a:hover {
    color: var(--glg-orange) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
  }
}
@media (max-width: 980px), (pointer: coarse) {
  .et-l--footer .footer-link,
  .et-l--footer .et_pb_blurb .et_pb_module_header a,
  .et-l--footer .et_pb_row_1_tb_footer a {
    padding: 10px 0;
  }
}
.et-l--footer .et_pb_blurb .et-pb-icon {
  color: var(--glg-orange);
}

/* ---------------------------------------------------------------
   7. Bewegingsvoorkeur
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .et_pb_button,
  .et_pb_button::after,
  .gform_wrapper .gform_button,
  .hoofd-menu .menu_cta > a {
    transition-duration: .01ms !important;
    transform: none !important;
  }
}