/* =============================================================
   WPBakery-element zo_hero_links  (Aannemersbedrijf Noordhout)
   Balk onder de Zeelandkaart in de hero: links naar de diensten,
   gescheiden door verticale lijnen. Linkerrand schuin (\) onder
   --zo-hero-links-tan; de achtergrond is een geskewde ::before, dus
   de hoek blijft gelijk als de balk hoger wordt.

   Met --bleed loopt de balk via --zo-bleed-right (assets/zo-bleed/
   zo-bleed.js) door tot de schermrand; de links verdelen zich dan
   over de hele balk, zoals in het ontwerp.
   ============================================================= */

.zo-hero-links{
  --zo-hero-links-bg:    var(--color-primary, #332d80);
  --zo-hero-links-color: #fff;
  --zo-hero-links-tan:   .364;   /* tan(20deg), gelijk aan .primary_button-skew */
  --zo-hero-links-h:     clamp(3.5rem, 2.75rem + 1.5vw, 4.75rem);

  position: relative;
  z-index: 2;   /* boven de volgende sectie als de balk eroverheen hangt */
  isolation: isolate;
  color: var(--zo-hero-links-color);
}

/* Over de onderrand van de sectie: negatieve marge, zodat de inhoud
   erboven (de kaart) op de onderrand van de sectie uitkomt. */
.zo-hero-links--hang-half{ margin-bottom: calc(var(--zo-hero-links-h) / -2); }
.zo-hero-links--hang-full{ margin-bottom: calc(-1 * var(--zo-hero-links-h)); }

.zo-hero-links::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--zo-hero-links-bg);
  transform: skewX(20deg);
  transform-origin: 0 0;
}

/* clip: de geskewde achtergrond steekt rechtsonder uit; zonder clip
   wordt de pagina breder dan het scherm. */
.zo-hero-links--bleed{
  margin-right: calc(-1 * var(--zo-bleed-right, 0px));
  overflow: hidden;
  overflow: clip;
}

.zo-hero-links__list{
  display: flex;
  flex-wrap: wrap;
  min-height: var(--zo-hero-links-h);
  margin: 0;
  padding: 0 0 0 calc(var(--zo-hero-links-h) * var(--zo-hero-links-tan));
  list-style: none;
}

.zo-hero-links__item{
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 6.5rem;
  margin: 0;
}

.zo-hero-links__item + .zo-hero-links__item::before{
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  left: 0;
  width: 1px;
  background: currentColor;
}

.zo-hero-links__link,
.zo-hero-links__link:hover,
.zo-hero-links__link:focus{
  color: inherit;
}

.zo-hero-links__link{
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: .75rem 1rem;
  line-height: 1.2;   /* lettertype en grootte: Hub-body */
  text-align: center;
  text-decoration: none;
}

a.zo-hero-links__link:hover{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

a.zo-hero-links__link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: -.5rem;
}