/* =============================================================
   WPBakery-element zo_zeeland_map  (Aannemersbedrijf Noordhout)
   Kaart van Zeeland in drie stroken. Noord en zuid in de hoofdkleur
   (Hubs --color-primary), de middelste strook (Walcheren en de
   Bevelanden) dezelfde kleur met wit gemengd.

   De fill/stroke-attributen in zeeland.svg zijn de terugval voor als
   het bestand los als afbeelding wordt gebruikt; CSS gaat daarvoor.
   De stroke in dezelfde kleur dicht de haarlijnen tussen gemeenten.
   Kleuren uit het element staan inline op .zo-zeeland en gaan
   daarmee voor op de standaardwaarden hieronder.
   ============================================================= */

.zo-zeeland{
  --zo-zeeland-base:    var(--color-primary, #332d80);
  --zo-zeeland-lighten: 35%;
  --zo-zeeland-accent:  #7a76ac;   /* zonder color-mix: #332d80 + 35% wit */
  --zo-zeeland-ratio:   1.0385;    /* viewBox 35.92 / 34.59 */

  width: 100%;
  max-width: var(--zo-zeeland-width, 100%);
  line-height: 0;
}

/* Onderkant recht: viewBox stopt op y = 30 (zie zo-zeeland-map.php);
   wat eronder valt wordt afgeknipt, zodat de onderrand recht is. */
.zo-zeeland--flat{
  --zo-zeeland-ratio: 1.1973;      /* viewBox 35.92 / 30 */
}

.zo-zeeland--flat .zo-zeeland__svg{
  overflow: hidden;
}

@supports (color: color-mix(in srgb, red, white)){
  .zo-zeeland{
    --zo-zeeland-accent: color-mix(in srgb, var(--zo-zeeland-base), #fff var(--zo-zeeland-lighten));
  }
}

.zo-zeeland--left  { margin-right: auto; }
.zo-zeeland--center{ margin-inline: auto; }
.zo-zeeland--right { margin-left: auto; }

/* Breedte begrensd door de maximale hoogte (--zo-zeeland-max-h);
   --zo-zeeland-ratio = breedte / hoogte van de viewBox. */
.zo-zeeland__svg{
  display: block;
  width: min(100%, var(--zo-zeeland-max-h, 100000px) * var(--zo-zeeland-ratio));
  height: auto;
  overflow: visible;
}

.zo-zeeland--center .zo-zeeland__svg{ margin-inline: auto; }
.zo-zeeland--right  .zo-zeeland__svg{ margin-left: auto; }

/* Doorlopen tot de rechterrand: het element loopt via --zo-bleed-right
   (assets/zo-bleed/zo-bleed.js) door tot de schermrand. Uitlijning en
   breedte in % rekenen met dat hele vlak, dus "rechts" = tegen de
   schermrand. Breder dan 100% loopt van het scherm af en wordt afgesneden. */
.zo-zeeland--bleed{
  width: auto;
  max-width: none;
  margin-right: calc(-1 * var(--zo-bleed-right, 0px));
  overflow: hidden;
  overflow: clip;
}

.zo-zeeland--bleed .zo-zeeland__svg{
  width: min(var(--zo-zeeland-width, 100%), var(--zo-zeeland-max-h, 100000px) * var(--zo-zeeland-ratio));
  max-width: none;
}

/* Telefoon: binnen de kolom, niet afsnijden. */
@media (max-width: 767px){
  .zo-zeeland--bleed{ margin-right: 0; }
  .zo-zeeland--bleed .zo-zeeland__svg{
    width: min(100%, var(--zo-zeeland-max-h, 100000px) * var(--zo-zeeland-ratio));
  }
}

.zo-zeeland__strook{
  fill: var(--zo-zeeland-base);
  stroke: var(--zo-zeeland-base);
}

.zo-zeeland__strook--midden{
  fill: var(--zo-zeeland-accent);
  stroke: var(--zo-zeeland-accent);
}