/* ==========================================================================
   Knoppen — knopstandaard v3

   GEDEELD BESTAND — dit hoort op alle Groundsailer-branches identiek te zijn.
   Kleuren en maten komen uit de --gs-* tokens (gs_theme_block_tokens in
   functions.php, per site aan te passen in site-config.php).

   Eén standaard voor elke knopsoort op de site:
     - radius 4px, rand 2px, padding 14px 30px
     - Barlow Condensed 1.02rem, 700, hoofdletters, letter-spacing .06em
     - de beeldmerkpijl in de kleur van het label, absoluut in de rechter padding
       (padding-right 54px, pijl 16px van de rand), verticaal gecentreerd
     - hover: een gevulde knop wordt leeg met een lijntje, een open knop wordt
       gevuld. De maat verandert bij hover nooit.

   Hoe het werkt
   Elke knop leest zijn kleuren uit custom properties (--gs-btn-*). Een rol zet
   alleen die properties. Omdat custom properties overerven, werkt een rolklasse
   op de knop zelf én op een element eromheen. In de admin kies je de rol met de
   keuzelijst "Knoprol" op Elementor-knoppen, containers en Gravity Forms
   (groundsailer-site-plugin/inc/button-roles.php); die zet deze klassen.

     rol                   rust                        hover
     (geen, standaard)     accent vlak, primary label   leeg, primary rand + label
     .gs-button--primary   primary vlak, wit label      leeg, primary rand + label
     .gs-button--accent    = standaard
     .gs-button--outline   primary rand + label         primary vlak, wit label
     .gs-button--light     wit vlak, primary label      primary vlak, witte rand + label
     .gs-button--sm        kleine maat (6px 14px, 15px, 600)

   Context: .gs-on-dark op een donkere band maakt rand en label bij hover wit,
   en draait de outline-knop om (witte rand, bij hover wit vlak).

   Indeling:
     1. Rollen en context
     2. gs-button (blokken)
     3. .btn in de rj-templates
     4. Gravity Forms
     5. Elementor-widgets
     6. Focusring
   ========================================================================== */

/* 1. Rollen en context
   ========================================================================== */

body {
  --gs-btn-font: "Barlow Condensed", "Barlow", sans-serif;
  --gs-btn-ease: 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
  /* Ruimte rechts voor de pijl, en de afstand van de pijl tot de rand. */
  --gs-btn-arrow-space: 54px;
  --gs-btn-arrow-right: 16px;
  /* Het beeldmerk zonder de linkerruit (Huisstijlmanual). Als mask op ::after met
     background-color: currentColor, zodat hij meekleurt met het label. */
  --gs-btn-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017.86%2023.75'%3E%3Cpath%20d='M5.98%2010.47L11.95%204.5C10.27%202.91%208.41%201.49%206.39%20.25L5.98%200%205.56%20.25C3.54%201.49%201.7%202.92%20.01%204.51ZM5.98%2013.27L0%2019.25C1.68%2020.83%203.55%2022.26%205.56%2023.49L5.98%2023.75%206.39%2023.49C8.41%2022.26%2010.25%2020.83%2011.94%2019.24ZM13.35%2017.84C14.94%2016.15%2016.37%2014.3%2017.6%2012.29L17.86%2011.88%2017.6%2011.46C16.37%209.44%2014.94%207.57%2013.36%205.89L7.38%2011.88Z'/%3E%3C/svg%3E");
}

/* Donkere banden. --gs-btn-ink is de kleur van rand en label bij hover,
   --gs-btn-paper de labelkleur van een gevulde outline-knop. De page-hero en de
   primary-sectie van de blokken zijn altijd donker en krijgen dit automatisch.

   --gs-btn-hover-dark houdt de hover van een gevulde knop hier doorzichtig, ook als
   een site --gs-btn-hover-fill (token btn-hover-fill) op wit zet: een wit label op
   een wit vlak zou onleesbaar zijn. */
.gs-on-dark,
.gs-block-page-hero,
.gs-block-section--bg-primary {
  --gs-btn-ink: #fff;
  --gs-btn-paper: var(--gs-color-primary);
  --gs-btn-hover-dark: transparent;
}

/* Elke rol zet alle zes de properties, zodat een knop met een eigen rol niets
   erft van een rolklasse op een element eromheen.
   .rj-wrap-footer: de "View all"-knoppen onder de nieuws- en videoblokken. */
.gs-button--primary,
.gs-button--accent,
.rj-wrap-footer {
  --gs-btn-bg: var(--gs-color-primary);
  --gs-btn-color: #fff;
  --gs-btn-border-color: transparent;
  --gs-btn-hover-bg: var(--gs-btn-hover-dark, var(--gs-btn-hover-fill));
  --gs-btn-hover-color: var(--gs-btn-ink, var(--gs-color-primary));
  --gs-btn-hover-border-color: var(--gs-btn-ink, var(--gs-color-primary));
}

.gs-button--accent {
  --gs-btn-bg: var(--gs-color-accent);
  --gs-btn-color: var(--gs-btn-accent-label);
}

.gs-button--outline {
  --gs-btn-bg: transparent;
  --gs-btn-color: var(--gs-btn-ink, var(--gs-color-primary));
  --gs-btn-border-color: var(--gs-btn-ink, var(--gs-color-primary));
  --gs-btn-hover-bg: var(--gs-btn-ink, var(--gs-color-primary));
  --gs-btn-hover-color: var(--gs-btn-paper, #fff);
  --gs-btn-hover-border-color: var(--gs-btn-ink, var(--gs-color-primary));
}

/* De verzendknop van het Elementor-formulier (nieuwsbriefband in de footer, op een
   accentvlak) is standaard primary. Via :where() zonder specificiteit, zodat een
   gekozen knoprol op hetzelfde widget altijd wint. */
:where(.elementor-widget-form) {
  --gs-btn-bg: var(--gs-color-primary);
  --gs-btn-color: #fff;
  --gs-btn-border-color: transparent;
  --gs-btn-hover-bg: var(--gs-btn-hover-dark, var(--gs-btn-hover-fill));
  --gs-btn-hover-color: var(--gs-btn-ink, var(--gs-color-primary));
  --gs-btn-hover-border-color: var(--gs-btn-ink, var(--gs-color-primary));
}

/* Voor gekleurde en donkere vlakken, waar een accent- of primary-knop wegvalt. */
.gs-button--light {
  --gs-btn-bg: #fff;
  --gs-btn-color: var(--gs-color-primary);
  --gs-btn-border-color: transparent;
  --gs-btn-hover-bg: var(--gs-color-primary);
  --gs-btn-hover-color: #fff;
  --gs-btn-hover-border-color: #fff;
}

/* .read-more is de klasse op de kleine knoppen in de Elementor-artikellijsten.
   Zelfde letter als de tekstlinks ernaast (Barlow Condensed 600, 15px, geen extra
   spatiëring); 700 met .05em oogt op deze maat ingedikt. */
.gs-button--sm,
.elementor-widget-button.read-more {
  --gs-btn-padding: 6px 14px;
  --gs-btn-font-size: 0.9375rem;
  --gs-btn-font-weight: 600;
  --gs-btn-letter-spacing: 0.02em;
  --gs-btn-gap: 8px;
  --gs-btn-arrow-space: 36px;
  --gs-btn-arrow-right: 12px;
}

/* 2. gs-button (blokken)

   gs_block_button() geeft altijd een rolklasse mee. De Elementor Kit zet
   `.elementor-kit-{id} a` (0,1,1) en `a:hover` (0,2,1); knop + rol is (0,2,0) en
   de hover (0,3,0), dus dit wint zonder !important.
   ========================================================================== */

.gs-button:is(.gs-button--primary, .gs-button--accent, .gs-button--outline, .gs-button--light) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gs-btn-gap, 9px);
  padding: var(--gs-btn-padding);
  border: var(--gs-btn-border-width) solid var(--gs-btn-border-color, transparent);
  border-radius: var(--gs-btn-radius);
  background-color: var(--gs-btn-bg, var(--gs-color-accent));
  color: var(--gs-btn-color, var(--gs-btn-accent-label));
  font-family: var(--gs-btn-font);
  font-size: var(--gs-btn-font-size);
  font-weight: var(--gs-btn-font-weight, 700);
  line-height: 1.2;
  letter-spacing: var(--gs-btn-letter-spacing, 0.06em);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--gs-btn-ease),
    color var(--gs-btn-ease),
    border-color var(--gs-btn-ease);
}

.gs-button:is(.gs-button--primary, .gs-button--accent, .gs-button--outline, .gs-button--light):is(:hover, :focus) {
  border-color: var(--gs-btn-hover-border-color, var(--gs-btn-ink, var(--gs-color-primary)));
  background-color: var(--gs-btn-hover-bg, var(--gs-btn-hover-dark, var(--gs-btn-hover-fill)));
  color: var(--gs-btn-hover-color, var(--gs-btn-ink, var(--gs-color-primary)));
  font-weight: var(--gs-btn-font-weight, 700);
}

.gs-button .gs-button__label {
  font: inherit;
  letter-spacing: inherit;
}

.gs-button:is(.gs-button--primary, .gs-button--accent, .gs-button--outline, .gs-button--light) {
  position: relative;
  padding-right: var(--gs-btn-arrow-space);
}

.gs-button .gs-button__arrow {
  position: absolute;
  top: 50%;
  right: var(--gs-btn-arrow-right);
  width: 0.79em;
  height: 1.05em;
  transform: translateY(-50%);
  fill: currentColor;
}

/* 3. .btn in de rj-templates (nieuws, video, events, "View all")

   style.css zet `.rj-wrap .btn` (0,2,0) met een absoluut geplaatste pijl; dit
   bestand laadt erna en overschrijft op dezelfde specificiteit.
   ========================================================================== */

.rj-wrap .btn,
.rj-custom-content .btn a {
  display: inline-flex;
  align-items: center;
  gap: var(--gs-btn-gap, 9px);
  padding: var(--gs-btn-padding);
  border: var(--gs-btn-border-width) solid var(--gs-btn-border-color, transparent);
  border-radius: var(--gs-btn-radius);
  background-color: var(--gs-btn-bg, var(--gs-color-accent));
  color: var(--gs-btn-color, var(--gs-btn-accent-label));
  font-family: var(--gs-btn-font);
  font-size: var(--gs-btn-font-size);
  font-weight: var(--gs-btn-font-weight, 700);
  line-height: 1.2;
  letter-spacing: var(--gs-btn-letter-spacing, 0.06em);
  text-transform: uppercase;
  transition:
    background-color var(--gs-btn-ease),
    color var(--gs-btn-ease),
    border-color var(--gs-btn-ease);
}

.rj-wrap .btn:is(:hover, :focus),
.rj-custom-content .btn a:is(:hover, :focus) {
  border-color: var(--gs-btn-hover-border-color, var(--gs-btn-ink, var(--gs-color-primary)));
  background-color: var(--gs-btn-hover-bg, var(--gs-btn-hover-dark, var(--gs-btn-hover-fill)));
  color: var(--gs-btn-hover-color, var(--gs-btn-ink, var(--gs-color-primary)));
  font-weight: var(--gs-btn-font-weight, 700);
}

.rj-wrap .btn,
.rj-custom-content .btn a {
  position: relative;
  padding-right: var(--gs-btn-arrow-space);
}

.rj-wrap .btn svg,
.rj-wrap .btn:hover svg {
  position: absolute;
  top: 50%;
  right: var(--gs-btn-arrow-right);
  width: 0.79em;
  height: 1.05em;
  transform: translateY(-50%);
  fill: currentColor;
}

.rj-custom-content .btn a::after,
.rj-custom-content .btn a:is(:hover, :focus)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--gs-btn-arrow-right);
  width: 0.79em;
  height: 1.05em;
  transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: var(--gs-btn-arrow) center / contain no-repeat;
  mask: var(--gs-btn-arrow) center / contain no-repeat;
}

/* 4. Gravity Forms

   (0,3,0) en bij hover (0,4,0): wint van de Kit (`button:hover` (0,2,1),
   `input[type="submit"]:hover` (0,3,1)) en van `.gform_button.button` in style.css.
   Een afwijkende rol per formulier: de rolklasse in Formulierinstellingen →
   CSS-klasse zetten; Gravity Forms zet die op het <form>.
   ========================================================================== */

.gform_wrapper :is(.gform_footer, .gform_page_footer) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(.gform_button, input[type="submit"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gs-btn-gap, 9px);
  width: auto;
  height: auto;
  min-height: 0;
  padding: var(--gs-btn-padding);
  border: var(--gs-btn-border-width) solid var(--gs-btn-border-color, transparent);
  border-radius: var(--gs-btn-radius);
  background: var(--gs-btn-bg, var(--gs-color-accent));
  color: var(--gs-btn-color, var(--gs-btn-accent-label));
  font-family: var(--gs-btn-font);
  font-size: var(--gs-btn-font-size);
  font-weight: var(--gs-btn-font-weight, 700);
  line-height: 1.2;
  letter-spacing: var(--gs-btn-letter-spacing, 0.06em);
  text-transform: uppercase;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color var(--gs-btn-ease),
    color var(--gs-btn-ease),
    border-color var(--gs-btn-ease);
}

.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(.gform_button, input[type="submit"]):is(:hover, :focus, :active) {
  border-color: var(--gs-btn-hover-border-color, var(--gs-btn-ink, var(--gs-color-primary)));
  border-radius: var(--gs-btn-radius);
  background: var(--gs-btn-hover-bg, var(--gs-btn-hover-dark, var(--gs-btn-hover-fill)));
  color: var(--gs-btn-hover-color, var(--gs-btn-ink, var(--gs-color-primary)));
  transform: none;
}

.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(.gform_button, input[type="submit"]):is(:disabled, [aria-disabled="true"]) {
  opacity: 0.9;
  cursor: wait;
}

/* Een <input> kan geen ::after hebben; de pijl (en de ruimte ervoor) staat alleen
   op <button>. */
.gform_wrapper :is(.gform_footer, .gform_page_footer) button.gform_button {
  position: relative;
  padding-right: var(--gs-btn-arrow-space);
}

.gform_wrapper :is(.gform_footer, .gform_page_footer) button.gform_button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--gs-btn-arrow-right);
  width: 0.79em;
  height: 1.05em;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: var(--gs-btn-arrow) center / contain no-repeat;
  mask: var(--gs-btn-arrow) center / contain no-repeat;
}

/* 5. Elementor-widgets

   Elementor schrijft de stijl van elke widget weg als
   `.elementor-{post} .elementor-element.elementor-element-{id} …` (0,4,0+), inline
   en ná dit bestand. Daar wint alleen !important van. Bewust beperkt tot deze sectie,
   en tijdelijk: zodra de JetButtons en Elementor-knoppen verdwijnen, gaat deze
   sectie eruit.
   ========================================================================== */

/* 5a. JetButton. Rand op de buitenste laag, vlakken zonder rand: precies één
       omrand element per knop, anders ontstaat bij hover een dubbele rand. */
.elementor-widget-jet-button :is(.jet-button__instance, .jet-button__state) {
  height: auto !important;
  min-height: 0 !important;
}

.elementor-widget-jet-button .jet-button__instance {
  border: var(--gs-btn-border-width) solid var(--gs-btn-border-color, transparent) !important;
  border-radius: var(--gs-btn-radius) !important;
  box-shadow: none !important;
  transition: border-color var(--gs-btn-ease);
}

.elementor-widget-jet-button .jet-button__instance:is(:hover, :focus-visible) {
  border-color: var(--gs-btn-hover-border-color, var(--gs-btn-ink, var(--gs-color-primary))) !important;
}

.elementor-widget-jet-button :is(.jet-button__plane-normal, .jet-button__plane-hover) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.elementor-widget-jet-button .jet-button__plane-normal {
  background: var(--gs-btn-bg, var(--gs-color-accent)) !important;
}

.elementor-widget-jet-button .jet-button__plane-hover {
  background: var(--gs-btn-hover-bg, var(--gs-btn-hover-dark, var(--gs-btn-hover-fill))) !important;
}

.elementor-widget-jet-button .jet-button__state {
  align-items: center;
  gap: var(--gs-btn-gap, 9px);
  padding: var(--gs-btn-padding) !important;
}

/* Een andere tekst bij hover (bijv. "Subscribe now" → "Join 36.000+ readers"):
   JetElements legt de hoverlaag absoluut over de knop, dus de knop is zo breed als
   de rusttekst en een langere hovertekst breekt af of valt weg. Beide lagen in
   dezelfde rastercel: de knop wordt zo breed als de langste tekst, op één regel.
   Relatief in plaats van absoluut, zodat de schuif-effecten (top/left) blijven
   werken. */
.elementor-widget-jet-button .jet-button__instance {
  display: inline-grid !important;
}

.elementor-widget-jet-button :is(.jet-button__state-normal, .jet-button__state-hover) {
  grid-area: 1 / 1;
}

.elementor-widget-jet-button .jet-button__state-hover {
  position: relative !important;
}

.elementor-widget-jet-button .jet-button__label {
  white-space: nowrap;
}

.elementor-widget-jet-button .jet-button__label {
  font-family: var(--gs-btn-font) !important;
  font-size: var(--gs-btn-font-size) !important;
  font-weight: var(--gs-btn-font-weight, 700) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--gs-btn-letter-spacing, 0.06em) !important;
  text-transform: uppercase !important;
}

.elementor-widget-jet-button .jet-button__state-normal :is(.jet-button__label, .jet-button__icon) {
  color: var(--gs-btn-color, var(--gs-btn-accent-label)) !important;
}

.elementor-widget-jet-button .jet-button__state-hover :is(.jet-button__label, .jet-button__icon) {
  color: var(--gs-btn-hover-color, var(--gs-btn-ink, var(--gs-color-primary))) !important;
}

/* Het icoon staat in de rechter padding, net als bij de andere knopsoorten. De
   state-lagen zijn zelf gepositioneerd (JetElements), dus daarbinnen absoluut. */
.elementor-widget-jet-button .jet-button__state:has(.jet-button__icon) {
  padding-right: var(--gs-btn-arrow-space) !important;
}

.elementor-widget-jet-button .jet-button__icon {
  position: absolute !important;
  top: 50% !important;
  right: var(--gs-btn-arrow-right) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: translateY(-50%);
  font-size: var(--gs-btn-font-size) !important;
  line-height: 1 !important;
}

.elementor-widget-jet-button .jet-button__icon svg {
  width: 0.79em !important;
  height: 1.05em !important;
  fill: currentColor !important;
}

/* 5b. Elementor Button-widget en de verzendknop van het Elementor-formulier. De pijl
       komt erbij als de knop zelf geen icoon heeft. */
:is(.elementor-widget-button, .elementor-widget-form) .elementor-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--gs-btn-gap, 9px);
  padding: var(--gs-btn-padding) !important;
  border: var(--gs-btn-border-width) solid var(--gs-btn-border-color, transparent) !important;
  border-radius: var(--gs-btn-radius) !important;
  background: var(--gs-btn-bg, var(--gs-color-accent)) !important;
  color: var(--gs-btn-color, var(--gs-btn-accent-label)) !important;
  font-family: var(--gs-btn-font) !important;
  font-size: var(--gs-btn-font-size) !important;
  font-weight: var(--gs-btn-font-weight, 700) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--gs-btn-letter-spacing, 0.06em) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition:
    background-color var(--gs-btn-ease),
    color var(--gs-btn-ease),
    border-color var(--gs-btn-ease);
}

:is(.elementor-widget-button, .elementor-widget-form) .elementor-button:is(:hover, :focus) {
  border-color: var(--gs-btn-hover-border-color, var(--gs-btn-ink, var(--gs-color-primary))) !important;
  background: var(--gs-btn-hover-bg, var(--gs-btn-hover-dark, var(--gs-btn-hover-fill))) !important;
  color: var(--gs-btn-hover-color, var(--gs-btn-ink, var(--gs-color-primary))) !important;
}

:is(.elementor-widget-button, .elementor-widget-form) .elementor-button :is(.elementor-button-text, .elementor-button-content-wrapper) {
  text-decoration: none !important;
}

/* Icoon of pijl staat in de rechter padding; de knop is het ankerpunt. */
:is(.elementor-widget-button, .elementor-widget-form) .elementor-button {
  position: relative;
  padding-right: var(--gs-btn-arrow-space) !important;
}

:is(.elementor-widget-button, .elementor-widget-form) .elementor-button-icon {
  position: absolute;
  top: 50%;
  right: var(--gs-btn-arrow-right);
  display: inline-flex;
  margin: 0 !important;
  transform: translateY(-50%);
}

:is(.elementor-widget-button, .elementor-widget-form) .elementor-button-icon svg {
  display: block;
  width: 0.79em;
  height: 1.05em;
}

:is(.elementor-widget-button, .elementor-widget-form) .elementor-button-icon :is(svg, path) {
  fill: currentColor !important;
}

:is(.elementor-widget-button, .elementor-widget-form) .elementor-button:not(:has(.elementor-button-icon))::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--gs-btn-arrow-right);
  width: 0.79em;
  height: 1.05em;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: var(--gs-btn-arrow) center / contain no-repeat;
  mask: var(--gs-btn-arrow) center / contain no-repeat;
  transition: transform var(--gs-btn-ease);
}

/* Knop die een inklapbaar formulier opent (klassen expand-form en
   collapse-request-form in Elementor): de pijl draait mee als het formulier open is. */
.collapse-request-form:has(.form-collapse:not(.collapsed)) .expand-form .elementor-button::after {
  transform: translateY(-50%) rotate(90deg);
}

/* 5c. "Read more" van de uitgelichte post in een JetBlog Smart Listing (megamenu News). */
.jet-smart-listing__more.featured-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--gs-btn-gap, 9px) !important;
  padding: var(--gs-btn-padding) !important;
  border: var(--gs-btn-border-width) solid var(--gs-btn-border-color, transparent) !important;
  border-radius: var(--gs-btn-radius) !important;
  background: var(--gs-btn-bg, var(--gs-color-accent)) !important;
  color: var(--gs-btn-color, var(--gs-btn-accent-label)) !important;
  font-family: var(--gs-btn-font) !important;
  font-size: var(--gs-btn-font-size) !important;
  font-weight: var(--gs-btn-font-weight, 700) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--gs-btn-letter-spacing, 0.06em) !important;
  text-transform: uppercase !important;
}

.jet-smart-listing__more.featured-more:is(:hover, :focus-visible) {
  border-color: var(--gs-btn-hover-border-color, var(--gs-btn-ink, var(--gs-color-primary))) !important;
  background: var(--gs-btn-hover-bg, var(--gs-btn-hover-dark, var(--gs-btn-hover-fill))) !important;
  color: var(--gs-btn-hover-color, var(--gs-btn-ink, var(--gs-color-primary))) !important;
}

.jet-smart-listing__more.featured-more {
  position: relative !important;
  padding-right: var(--gs-btn-arrow-space) !important;
}

.jet-smart-listing__more.featured-more::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--gs-btn-arrow-right);
  width: 0.79em;
  height: 1.05em;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: var(--gs-btn-arrow) center / contain no-repeat;
  mask: var(--gs-btn-arrow) center / contain no-repeat;
}

/* 5d. Zoekknop: het icoon in primary op het accentvlak uit de Kit. */
.elementor-search-form .elementor-search-form__submit,
.elementor-search-form .elementor-search-form__submit:is(:hover, :focus) {
  color: var(--gs-color-primary) !important;
}

/* 6. Focusring

   hello-elementor/reset.css zet `a:focus-visible` e.d. (0,1,1). Via :is() telt hier
   het zwaarste argument ([tabindex]:not(...), (0,2,0)), dus (0,3,0) voor alle
   elementen: wint zonder !important.
   ========================================================================== */

:is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--gs-color-primary);
  outline-offset: 2px;
}

:is(.gs-on-dark, .gs-block-page-hero, .gs-block-section--bg-primary) :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: #fff;
}