/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

* {
    box-sizing: border-box;
 }
a {
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}

:where(.wp-site-blocks *:focus) {
    outline: none; /* Remove default focus */
}

:where(.wp-site-blocks *:focus-visible) {
    outline: 2px solid #000; /* Or use your preferred color/style */
}


/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */

/* The default margins below are wrapped in :where() on purpose. It keeps their
 * specificity at 0, so a single class in a block stylesheet — .block-x__title
 * { margin: 0 } — overrides them. Without it, ":root h3" scores (0,1,1) and
 * silently beats any plain class. */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}


:where(:root p, p, .is-layout-constrained > p) {
    margin-top: 0;
    margin-bottom: 1rem;
}


:where(:root h1, :root .wp-block-heading h1, .is-layout-constrained > h1) {
    margin-top: 2em;
    margin-bottom: 0.75em;
    margin-left: 0;
    margin-right: 0;
}

:where(:root h2, :root .wp-block-heading h2, .is-layout-constrained > h2) {
    margin-top: 1.75em;
    margin-bottom: 0.65em;
    margin-left: 0;
    margin-right: 0;
}

:where(:root h3, :root .wp-block-heading h3, .is-layout-constrained > h3) {
    margin-top: 1.5em;
    margin-bottom: 0.6em;
    margin-left: 0;
    margin-right: 0;
}

:where(:root h4, :root .wp-block-heading h4, .is-layout-constrained > h4) {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
}

:where(:root h5, :root .wp-block-heading h5, .is-layout-constrained > h5) {
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
}

:where(:root h6, :root .wp-block-heading h6, .is-layout-constrained > h6) {
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
	text-transform: uppercase;
}

/* First heading in any container shouldn't have top margin */
div > :is(h1, h2, h3, h4, h5, h6):first-child,
.entry-content > :is(h1, h2, h3, h4, h5, h6):first-child,
.wp-block-post-content > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* Headings that come after lower-level headings should have no top margin */
h6 + h1,
h6 + h2,
h6 + h3,
h6 + h4,
h6 + h5,
h5 + h1,
h5 + h2,
h5 + h3,
h5 + h4,
h4 + h1,
h4 + h2,
h4 + h3,
h3 + h1,
h3 + h2,
h2 + h1 {
    margin-top: 0.65em !important;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.has-inter-font-family {
  /* Inter is variable, so 475 is a real weight rather than a rounded one */
  font-weight: 475;
  letter-spacing: -0.0275em;
}
.has-xxx-large-font-size .has-inter-font-family {
  letter-spacing: -0.0325em;
}

.has-medium-font-size {
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 500;
}
.has-large-font-size {
  line-height: 1.1;
}


.has-medium-font-weight {
  font-weight: 500;
}

.has-bold-font-weight {
  font-weight: 700;
}

/* 400 is the lightest weight Owners ships — anything below it would be
   synthesized by the browser.
   !important on purpose: "p.has-owners-font-family" further down sets 700 at
   (0,1,1), which outranks this single class. A weight utility should win
   wherever it is applied. */
.has-light-font-weight {
  font-weight: 400 !important;
}

h1.wp-block-heading.has-xxx-large-font-size {
    font-size: clamp(110px, 20vw, 340px) !important;
    line-height: 80%;
    margin-top: calc(120px + 4rem) !important;
    margin-bottom: 4rem !important;
    max-width: unset;
  }

/* Alignment */
:root {
    /* A step wider than wideSize (1600px), for blocks that need more room
       without going full bleed. */
    --widest-size: 1920px;
}

.alignwide {
    width: 83%;
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
}

.alignwidest {
    width: 100%;
    max-width: var(--widest-size) !important;
    margin-left: auto;
    margin-right: auto;
}

/* Below the wide breakpoint there is no room to inset — the side padding of the
   layout is the only margin these need. */
@media (max-width: 1049px) {
    .alignwide {
        width: 100%;
    }
}

/* Section spacing between top level blocks. Text elements are excluded — they
   carry their own heading and paragraph margins, and a section sized gap under
   a heading reads as a broken layout rather than a section break. */
:root :where(.is-layout-constrained) > *:not(:is(
    h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, table, pre, details,
    .wp-block-heading, .wp-block-paragraph, .wp-block-list, .wp-block-quote,
    .wp-block-table, .wp-block-preformatted, .wp-block-code, .wp-block-verse,
    .wp-block-details, .wp-block-image, .wp-block-separator
)) {
    margin-block-start: 1rem;
    /* 96px at 390px wide, ramping to 192px by 1440px */
    margin-block-end: clamp(96px, 9.1vw + 60px, 192px);
}

/* Two more section sizes, put on a block from the editor's Additional CSS
   class field. They come after the rule above, which they tie with on
   specificity, so keep them below it. */
:root :where(.is-layout-constrained) > .margin-block-large {
    margin-block-end: clamp(120px, 11.4vw + 75px, 240px);
}

:root :where(.is-layout-constrained) > .margin-block-small {
    margin-block-end: clamp(40px, 2.3vw + 31px, 64px);
}

/* No section break at all: the next block sits straight underneath */
:root :where(.is-layout-constrained) > .margin-block-null {
    margin-block-end: 0;
}

/* The post content wrapper is not a section of its own — the blocks inside it
   carry their own spacing. */
.entry-content {
    margin-block-end: 0 !important;
}

/* On a post or a content page the article ends here, so the space before what
   follows is padding on the content rather than a margin on the wrapper. */
.single-post .entry-content.alignfull,
.page-template-content-page .entry-content.alignfull {
    padding-bottom: clamp(40px, 2.3vw + 31px, 64px);
}

/* Core's constrained layout sets "margin-block-end: 0" on every child, which
   collapses the space under text blocks now that they sit outside the section
   rule above. This puts their normal rhythm back. */
:root :where(.is-layout-constrained) > :is(p, ul, ol, dl, blockquote, figure, table, pre, details,
    .wp-block-paragraph, .wp-block-list, .wp-block-quote, .wp-block-table,
    .wp-block-preformatted, .wp-block-code, .wp-block-verse, .wp-block-details,
    .wp-block-image, .wp-block-separator) {
    margin-block-end: 40px;
}

:root :where(.is-layout-constrained) > :is(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
    margin-block-end: 16px;
}

/* The padded group a template wraps its content in: the section spacing below
   each block already carries the space at the bottom. */
main > .wp-block-group.has-global-padding {
    padding-top: 80px !important;
    padding-bottom: 0 !important;
    margin-block-end: 0 !important;
}

/* Content pages are long-form text, so their headings step down from the
   display sizes the rest of the site uses. Only within main, so the footer
   and other template parts keep their own. A size set in the editor still
   wins, since the preset classes carry !important. */
.page-template-content-page main :is(h2, h3, h4) {
    font-size: var(--wp--preset--font-size--x-large);
    /* 2.5% of the font size — letter-spacing takes no percentages */
    letter-spacing: 0.025em;
}

/* Content page: space around the white content panel. !important beats the
   section spacing rule above, which the template's groups otherwise pick up. */
.page-template-content-page main > .wp-block-group {
    margin-bottom: clamp(120px, 11.4vw + 75px, 240px) !important;
}

/* Bold text in a paragraph switches to Owners. strong as well as b: the
   editor's bold button writes strong. */
p.wp-block-paragraph :is(b, strong) {
    font-family: var(--wp--preset--font-family--owners);
    /* 2.5% of the font size — letter-spacing takes no percentages */
    letter-spacing: 0.025em;
}

/* Core list blocks carry the same square marker as the USPs block: 20px of
   helder blauw, centred on the first line of the item. */
ul.wp-block-list {
    margin-block-start: 0;
    border-left: var(--border-01) solid;
    list-style: none;
    padding: 20px;
}

@media (min-width: 782px) {
    ul.wp-block-list {
        padding: 40px;
    }
}

ul.wp-block-list > li {
    position: relative;
    padding-left: 32px;
    font-family: var(--wp--preset--font-family--owners);
    font-size: var(--wp--preset--font-size--normal);
    font-weight: 700;
}

ul.wp-block-list > li::before {
    content: "";
    position: absolute;
    top: calc((1.4em - 20px) / 2);
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-02);
    background-color: var(--wp--preset--color--helder-blauw);
}

/* Core gives <main> a block-gap margin as a child of .wp-site-blocks, which
   leaves a gap between the header and the first block. !important because that
   rule is generated inline by WordPress, after this stylesheet. */
main {
    margin: 0 !important;
}

/* Same for the footer template part, so the footer sits flush under the page */
footer.wp-block-template-part {
    margin-block-start: 0 !important;
}

/* And for the featured image, which the constrained layout otherwise pushes
   away from the block above it. */
.wp-block-post-featured-image {
    position: relative;
    margin: 0 auto !important;
}

/* A hero that opens the page gets room under the header. !important because
   the layout's block-gap margin is generated inline, after this stylesheet. */
.entry-content > :is(.block-hero-collage, .block-hero-contact, .block-hero-simple):first-child {
    margin-block-start: clamp(20px, 4vw, 80px) !important;
}





/* Utilities */

/* Visible to screen readers only. Core ships this with classic themes, so a
   block theme has to declare it — without it the labels render as plain text. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  z-index: 100000;
  display: block;
  top: 5px;
  left: 5px;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  border-radius: var(--radius-04);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small);
  line-height: normal;
  text-decoration: none;
  clip-path: none;
}


/* Radius, border and shadow tokens */

:root {
  --radius-02: 2px;
  --radius-04: 4px;
  --radius-05: 5px;
  --radius-06: 6px;
  --border-01: 1px;
  --border-02: 2px;
  --border-color-01: var(--wp--preset--color--warm-grijs-02);
  --border-color-02: var(--wp--preset--color--helder-blauw);
  --shadow-card: 0px 0px 48px rgba(0, 0, 0, 0.04);
}

.radius-02 { border-radius: var(--radius-02); }
.radius-04 { border-radius: var(--radius-04); }
.radius-05 { border-radius: var(--radius-05); }
.radius-06 { border-radius: var(--radius-06); }

.border-01 { border: var(--border-01) solid var(--border-color-01); }
.border-02 { border: var(--border-02) solid var(--border-color-02); }

.shadow-card { box-shadow: var(--shadow-card); }





/* Owners letter spacing, tightening as the type gets bigger. The design gives
   these as percentages, which letter-spacing does not take — 1em is the font
   size, so 3.5% is 0.035em. */
.has-owners-font-family {
  letter-spacing: 0.035em;
}

.has-owners-font-family.has-x-large-font-size,
.has-owners-font-family.has-xx-large-font-size,
.has-owners-font-family.has-xxx-large-font-size {
  letter-spacing: 0.025em;
}

.has-owners-font-family.has-xxxx-large-font-size {
  letter-spacing: 0.01em;
}

/* Owners weights
   Headings h1–h5 are 400 and h6 is 700, set in theme.json. A paragraph in
   Owners is 700 by default — but one carrying a heading-scale size preset is
   standing in for a heading, so it drops back to 400. */
p.has-owners-font-family {
  font-weight: 700;
}

p.wp-block-post-excerpt__excerpt {
  font-weight: inherit;
}

p.has-owners-font-family.has-large-font-size,
p.has-owners-font-family.has-x-large-font-size,
p.has-owners-font-family.has-xx-large-font-size,
p.has-owners-font-family.has-xxx-large-font-size,
p.has-owners-font-family.has-xxx-large-font-size {
  font-weight: 400;
}


/* Card placeholder
   Centred icon on a card with no featured image. The icon and the card label
   both take the text tint of whichever fallback background was assigned. */

/* Sits above the gradient the cards paint over their photo */
p.card-label {
  margin: 0;
  z-index: 1;
  border-bottom: 2px solid;
  border-right: 2px solid;
  padding-right: 6px;
  padding-bottom: 9px;
  line-height: 3px;
}

.placeholder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 15%;
  height: auto;
  opacity: .5;
  max-width: 85px;
}

.has-helder-blauw-licht-background-color .placeholder-icon,
.has-helder-blauw-licht-background-color .placeholder-title,
.has-helder-blauw-licht-background-color .card-label {
  color: var(--wp--preset--color--helder-blauw-text);
}

.has-helder-groen-licht-background-color .placeholder-icon,
.has-helder-groen-licht-background-color .placeholder-title,
.has-helder-groen-licht-background-color .card-label {
  color: var(--wp--preset--color--helder-groen-text);
}

.has-helder-geel-licht-background-color .placeholder-icon,
.has-helder-geel-licht-background-color .placeholder-title,
.has-helder-geel-licht-background-color .card-label {
  color: var(--wp--preset--color--helder-geel-text);
}

.has-helder-oranje-licht-background-color .placeholder-icon,
.has-helder-oranje-licht-background-color .placeholder-title,
.has-helder-oranje-licht-background-color .card-label {
  color: var(--wp--preset--color--helder-oranje-text);
}

.has-helder-magenta-licht-background-color .placeholder-icon,
.has-helder-magenta-licht-background-color .placeholder-title,
.has-helder-magenta-licht-background-color .card-label {
  color: var(--wp--preset--color--helder-magenta-text);
}


/* ==========================================================================
   Slider — Osmo Supply "Basic GSAP Slider (Watch CSS)"
   Global: any block can output this markup. Driven by js/slider.js.
   Slides per view is set per block via --slider-spv-desktop / -tablet /
   -mobile, written inline on [data-gsap-slider-init] by the block template.
   ========================================================================== */

.gsap-slider {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
}

.gsap-slider__collection {
  width: var(--slider-measure, 83%);
  max-width: var(--wp--style--global--wide-size);
}

.gsap-slider__list {
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
  touch-action: pan-y;
  backface-visibility: hidden;
  display: flex;
}

.gsap-slider__item {
  width: calc(((100% - 1px)  - (var(--slider-spv)  - 1) * var(--slider-gap)) / var(--slider-spv));
  margin-right: var(--slider-gap);
  flex: none;
}

/* Setup */

[data-gsap-slider-init] {
  --slider-status: on; /* Turn slider on/off */
  --slider-spv: var(--slider-spv-desktop, 2.5); /* Slides per view */
  --slider-gap: 20px; /* Slides Gap */
}

@media screen and (max-width: 991px) {
   [data-gsap-slider-init] {
    --slider-status: on;
    --slider-spv: var(--slider-spv-tablet, 2.25);
  }
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-init] {
    --slider-status: on;
    --slider-spv: var(--slider-spv-mobile, 1.15);
  }
}

[data-gsap-slider-item]:last-child {
  margin-right: 0;
}

[data-gsap-slider-list-status="grab"] {
  cursor: grab;
}

[data-gsap-slider-list-status="grabbing"] {
  cursor: grabbing;
}

/* Header — title left, controls right */

.gsap-slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-left: auto;
  margin-right: auto;
}

/* Same breakpoint as the alignwide utility: below it the layout padding is the
   only inset these need. A slider in a column sets --slider-measure to 100%
   instead, and then this changes nothing for it. */
@media (max-width: 1049px) {
  .gsap-slider {
    --slider-measure: 100%;
  }
}

.gsap-slider__heading {
  margin: 0;
}

/* Controls */

.gsap-slider__controls {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-shrink: 0;
}

.gsap-slider__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-04);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--warm-zwart);
  cursor: pointer;
}

.gsap-slider__control svg {
  display: block;
}

.gsap-slider__control--prev svg {
  transform: scaleX(-1);
}

[data-gsap-slider-status="not-active"] [data-gsap-slider-controls] {
  display: none;
}

[data-gsap-slider-control-status="not-active"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Customization */

.gsap-slider__control {
  transition: opacity 0.3s ease;
}

/* Too few slides to drag: the script disables the slider, so lay the items out
   as a two column grid instead of a part-filled row. */
[data-gsap-slider-status="not-active"] .gsap-slider__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--slider-gap);
}

[data-gsap-slider-status="not-active"] .gsap-slider__item {
  width: auto;
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-status="not-active"] .gsap-slider__list {
    grid-template-columns: 1fr;
  }
}


/* Heading reveal
   Each line sits in its own clipping wrapper, so it can start below its box
   and rise into view rather than fading in place. */
.split-mask {
  display: block;
}

/* Clipping is on only while the line is moving — JS removes the class when the
   line lands, so descenders are never cut off in the resting state. */
.split-mask.is-masking {
  overflow: hidden;
}

.split-line {
  display: block;
}


/* Blocks  */
/* Quote */
.wp-block-quote {
  font-family: var(--wp--preset--font-family--owners);
  font-size: var(--wp--preset--font-size--x-large);
  text-align: center;
  line-height: 100%;
  letter-spacing: 0.01em;
}

/* The attribution reads as body text, not as part of the quote */
.wp-block-quote > cite {
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 400;
  letter-spacing: normal;
}

/* Post excerpt — reads as a lead paragraph, so it takes Owners and bold.
   This sits after the "font-weight: inherit" rule further up, which it is
   meant to supersede: both carry the same specificity, so order decides. */
.wp-block-post-excerpt {
  margin-block-end: var(--wp--preset--spacing--60) !important;
}

.wp-block-post-excerpt p {
  font-family: var(--wp--preset--font-family--owners);
  font-weight: 700;
  letter-spacing: 0.025em;
}

/* Buttons carry the same 2.5% tracking as the larger Owners sizes. :where()
   keeps this at zero specificity, so anything more specific still wins. */
:root :where(.wp-element-button, .wp-block-button__link) {
  letter-spacing: 0.025em;
}

/* Button — base
   Core ships these on the button block stylesheet, which only loads when a real
   core Button block is on the page. Our block templates write the markup
   themselves, so the essentials are declared here. */
.wp-block-button__link {
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
    font-weight: 700;
    text-align: center;
    word-break: break-word;
    overflow: hidden;
}

/* Hover fill, closing in from the edges — the same inset idea as the hero
   slide transition. An inset box-shadow grows a band inwards from all four
   sides, so the colour arrives at the centre last. */
.wp-block-button__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 0 var(--wp--preset--color--helder-blauw-licht);
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-button__link:hover::before,
.wp-block-button__link:focus-visible::before {
    box-shadow: inset 0 0 0 6rem var(--wp--preset--color--helder-blauw-licht);
}

/* The band does the colour change, so the background stays put underneath */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--helder-blauw);
}

/* Outline buttons have no fill to reveal */
.wp-block-button.is-style-outline > .wp-block-button__link::before,
.wp-block-button .wp-block-button__link.is-style-outline::before {
    content: none;
}

/* Button — outline style
   Core only ships this variation with the Gutenberg block stylesheet, which is
   not loaded for buttons rendered from our own block templates. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
    border: var(--border-01) solid var(--button-outline-color, var(--wp--preset--color--energiek-blauw));
    border-top: 0;
    border-left: 0;
    border-radius: 0 0 var(--radius-06) 0;
    /* Only the right and bottom edges carry a border, so only those two sides
       give up their width in padding — the box still matches the filled button. */
    padding: 14px calc(14px - var(--border-01)) calc(14px - var(--border-01)) 14px;
    background-color: transparent;
    color: var(--button-outline-color, var(--wp--preset--color--energiek-blauw));
    transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.wp-block-button .wp-block-button__link.is-style-outline:hover,
.wp-block-button .wp-block-button__link.is-style-outline:focus-visible {
    border-color: var(--button-outline-hover-color, var(--wp--preset--color--energiek-blauw-hover));
    background-color: transparent;
    color: var(--button-outline-hover-color, var(--wp--preset--color--energiek-blauw-hover));
}