/* Orbyte Mother v1.1 — opt-in component styles. */

/* ==========================================================
   Card grid
   Apply .card-grid to the Layout Builder section.
   ========================================================== */

.card-grid
.block-inline-blocktitle-text-url,
.card-grid
.block-inline-blocktitle-text-url
.views-row,
.card-grid
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner {
  height: 100%;
}

.card-grid
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.card-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.card-grid
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.image {
  overflow: hidden;
  border-radius: var(--orbyte-radius-xl);
}

.card-grid
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.image img {
  display: block;
  width: 100%;
  border-radius: var(--orbyte-radius-xl);
}

.card-grid
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.title-arrow {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.card-grid
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.title-arrow
.title {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 15px;
}

.card-grid
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.title-arrow
.title
:is(h2, h3, h4, h5, h6) {
  margin: 0;
}

.card-grid
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.title-arrow
.arrow {
  flex: 0 0 45px;
  align-self: flex-start;
  margin-left: auto;
}

.card-grid
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.title-arrow
.arrow a {
  position: relative;
  display: block;
  width: 45px;
  min-width: 45px;
  height: 45px;
  padding: 0 !important;
  border-radius: var(--orbyte-radius-xl) !important;
  background-image: none !important;
  font-size: 0;
}

.card-grid
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.title-arrow
.arrow a::before {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  content: "";
  -webkit-mask-image: url("../images/card-arrow.svg");
  mask-image: url("../images/card-arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 28%;
  mask-size: 28%;
}

.card-grid
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.title
:is(h2, h3, h4, h5, h6):empty {
  display: none;
  margin: 0;
}

/* Feature card: lower, consistently cropped image. */

.card-grid--feature
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.image {
  height: clamp(280px, 32vw, 440px);
  overflow: hidden;
  border-radius: var(--orbyte-radius-xl);
}

.card-grid--feature
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.card-grid--feature
.block-inline-blocktitle-text-url
  .views-row
.news-item-inner
.image img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* Optional narrower card text on desktop. */

@media (min-width: 992px) {
  .card-grid--text-narrow
  .block-inline-blocktitle-text-url
  .views-row
  .news-item-inner
  .text {
    width: 75%;
    max-width: 75%;
  }
}
/* Feature card: Drupal media wrappers fill the image container. */

.card-grid--feature
.block-inline-blocktitle-text-url
.views-row
.news-item-inner
.image
.media,
.card-grid--feature
.block-inline-blocktitle-text-url
.views-row
.news-item-inner
.image
.field--name-field-media-image {
  height: 100%;
}
/* ==========================================================
   Advantages grid: four columns
   Apply .advantages-grid--four to the Advantages block.
   ========================================================== */

@media (min-width: 992px) {
  .advantages-grid--four
  .field--name-field-add-advantage-item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advantages-grid--four
  .field--name-field-add-advantage-item > .field__item {
    width: auto;
    min-width: 0;
  }
}

@media (min-width: 1200px) {
  .advantages-grid--four
  .field--name-field-add-advantage-item {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ==========================================================
   Responsive typography
   Apply .type-scale--responsive to an individual section/block.
   Do not apply to counter sections.
   ========================================================== */

.type-scale--responsive h1 {
  font-size: clamp(36px, calc(30px + 1.625vw), 56px) !important;
}

.type-scale--responsive h2 {
  font-size: clamp(30px, calc(26px + 1.125vw), 44px) !important;
}

.type-scale--responsive h3 {
  font-size: clamp(24px, calc(22px + 0.25vw), 26px) !important;
}

.type-scale--responsive h4 {
  font-size: clamp(22px, calc(20px + 0.25vw), 24px) !important;
}

.type-scale--responsive h5 {
  font-size: clamp(20px, calc(18.5px + 0.2vw), 22px) !important;
}
/* ==========================================================
   Detailpagina: compacte inleidende tekst
   ========================================================== */

.news-img-content-wrap
.block-field-blocknodeservicebody p,
.news-img-content-wrap
.block-field-blocknodenieuwsbody p {
  font-size: clamp(
    18px,
    calc(16.5px + 0.25vw),
    20px
  );
}
/* ==========================================================
   Dienstenoverzicht: optionele vierkolomsweergave
   Apply .services-grid--four to .services-section-wrap.
   ========================================================== */

@media (min-width: 1200px) {
  .services-section-wrap.services-grid--four
  .view .view-content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .services-section-wrap.services-grid--four
  .view .view-content > .views-row {
    width: auto;
    min-width: 0;
  }
}
/* ==========================================================
   Advantages grid: configurable 2 / 3 columns
   ========================================================== */

@media (min-width: 992px) {

  .advantages-grid--2
  .field--name-field-add-advantage-item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advantages-grid--3
  .field--name-field-add-advantage-item {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .advantages-grid--2
  .field--name-field-add-advantage-item > .field__item,
  .advantages-grid--3
  .field--name-field-add-advantage-item > .field__item {
    width: auto;
    min-width: 0;
  }
}
.content-form-col-2 form .form-actions::before {
  width: 18px;
  height: 18px;
  right: 20px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* ==========================================================
   HEADER LOGO SWITCH - OUDE WERKENDE VARIANT
   Directe switch via display none/block
   ========================================================== */


body.header-fixed.scrolled-up
.header-wrap
.header-logo-item
.white-logo {
  display: none;
}

body.header-fixed.scrolled-up
.header-wrap
.header-logo-item
.black-logo {
  display: block;
}

/* Ensure card arrow pseudo-element is positioned inside its own button. */
.news-card-section .view .views-row .news-item-inner .title-arrow .arrow a {
  position: relative;
}

/* Card arrows must not inherit the secondary-button vertical transform. */
.card-grid
.block-inline-blocktitle-text-url
.views-row
.news-item-inner
.title-arrow
.arrow a::before {
  transform: none;
}

/* News list cards already use their own arrow via ::after.
   Disable the generic type-secondary arrow to avoid double/broken arrows. */
.list-img-content
.view
.view-content
.views-row
.news-item-inner
.card-content
.links.type-secondary
a::before {
  display: none !important;
  content: none !important;
}


/* Normalize secondary CTA arrow across all desktop breakpoints. */
.type-secondary:not(.arrow) a::before {
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Primary CTA arrow: keep the icon centered inside its pseudo-element. */
.type-primary a::before {
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* ==========================================================
   Header style settings
   ========================================================== */

/* Default header: glass */
/* Sticky header: light */
body.header-fixed.sticky-header-style-light .header-wrap::after {
  background: var(--c-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Sticky light logo switch */
body.header-fixed.sticky-header-style-light
.header-wrap
.header-logo-item
.white-logo {
  display: none;
}

body.header-fixed.sticky-header-style-light
.header-wrap
.header-logo-item
.black-logo {
  display: block;
}

/* Default header: transparent */
body.header-style-transparent .header-wrap::after {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Default header: light */
body.header-style-light .header-wrap::after {
  background: var(--c-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Default header: dark */
body.header-style-dark .header-wrap::after {
  background: var(--c-black-dark);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Sticky header: dark */
body.header-fixed.sticky-header-style-dark .header-wrap::after {
  background: var(--c-black-dark);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Sticky dark logo */
body.header-fixed.sticky-header-style-dark
.header-wrap
.header-logo-item
.white-logo {
  display: block;
}

body.header-fixed.sticky-header-style-dark
.header-wrap
.header-logo-item
.black-logo {
  display: none;
}

/* Sticky header: glass */
/* Sticky glass uses dark logo */
body.header-fixed.sticky-header-style-glass
.header-wrap
.header-logo-item
.white-logo {
  display: none;
}

body.header-fixed.sticky-header-style-glass
.header-wrap
.header-logo-item
.black-logo {
  display: block;
}

/* ==========================================================
   Header style settings: navigation and controls
   ========================================================== */

@media screen and (min-width: 992px) {

  /* Default light / glass: dark navigation */
  body.header-style-light
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 > .sf-depth-1,
  body.header-style-glass
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 > .sf-depth-1 {
    color: var(--c-black-dark) !important;
  }

  /* Default dark: light navigation */
  body.header-style-dark
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 > .sf-depth-1 {
    color: var(--c-white-light) !important;
  }

  /* Sticky light / glass: dark navigation */
  body.header-fixed.sticky-header-style-light
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 > .sf-depth-1,
  body.header-fixed.sticky-header-style-glass
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 > .sf-depth-1 {
    color: var(--c-black-dark) !important;
  }

  /* Sticky dark: light navigation */
  body.header-fixed.sticky-header-style-dark
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 > .sf-depth-1 {
    color: var(--c-white-light) !important;
  }
}

/* Search control: light / glass */
body.header-style-light:not(.search-open)
.header-wrap .region-header .form-switcher-wrap .form-srch-icon,
body.header-style-glass:not(.search-open)
.header-wrap .region-header .form-switcher-wrap .form-srch-icon {
  background-color: var(--c-white-light) !important;
  background-image: url("img/menu-search.svg") !important;
}

/* Search control: dark */
body.header-style-dark:not(.search-open)
.header-wrap .region-header .form-switcher-wrap .form-srch-icon {
  background-color: var(--c-black-dark) !important;
  background-image: url("img/search-dark.svg") !important;
}

/* Sticky search: light / glass */
body.header-fixed.sticky-header-style-light:not(.search-open)
.header-wrap .region-header .form-switcher-wrap .form-srch-icon,
body.header-fixed.sticky-header-style-glass:not(.search-open)
.header-wrap .region-header .form-switcher-wrap .form-srch-icon {
  background-color: var(--c-white-light) !important;
  background-image: url("img/menu-search.svg") !important;
}

/* Sticky search: dark */
body.header-fixed.sticky-header-style-dark:not(.search-open)
.header-wrap .region-header .form-switcher-wrap .form-srch-icon {
  background-color: var(--c-black-dark) !important;
  background-image: url("img/search-dark.svg") !important;
}

/* Language control: light / glass */
body.header-style-light
.header-wrap .language-select-wrapper .selected-lang,
body.header-style-glass
.header-wrap .language-select-wrapper .selected-lang {
  background-color: var(--c-white-light) !important;
}

body.header-style-light
.header-wrap .language-select-wrapper .selected-lang .active-lang,
body.header-style-glass
.header-wrap .language-select-wrapper .selected-lang .active-lang {
  color: var(--c-black-dark) !important;
}

/* Language control: dark */
body.header-style-dark
.header-wrap .language-select-wrapper .selected-lang {
  background-color: var(--c-black-dark) !important;
}

body.header-style-dark
.header-wrap .language-select-wrapper .selected-lang .active-lang {
  color: var(--c-white-light) !important;
}

/* Sticky language: light / glass */
body.header-fixed.sticky-header-style-light
.header-wrap .language-select-wrapper .selected-lang,
body.header-fixed.sticky-header-style-glass
.header-wrap .language-select-wrapper .selected-lang {
  background-color: var(--c-white-light) !important;
}

body.header-fixed.sticky-header-style-light
.header-wrap .language-select-wrapper .selected-lang .active-lang,
body.header-fixed.sticky-header-style-glass
.header-wrap .language-select-wrapper .selected-lang .active-lang {
  color: var(--c-black-dark) !important;
}

/* Sticky language: dark */
body.header-fixed.sticky-header-style-dark
.header-wrap .language-select-wrapper .selected-lang {
  background-color: var(--c-black-dark) !important;
}

body.header-fixed.sticky-header-style-dark
.header-wrap .language-select-wrapper .selected-lang .active-lang {
  color: var(--c-white-light) !important;
}


/* Theme-controlled glass header */
body.header-style-glass .header-wrap::after {
  background: var(--header-glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--header-glass-blur)) saturate(120%) !important;
  backdrop-filter: blur(var(--header-glass-blur)) saturate(120%) !important;
}

/* Theme-controlled sticky glass header */
body.header-fixed.sticky-header-style-glass .header-wrap::after {
  background: var(--header-glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--header-glass-blur)) saturate(120%) !important;
  backdrop-filter: blur(var(--header-glass-blur)) saturate(120%) !important;
}

/* Glass effect on desktop dropdown menus */
@media screen and (min-width: 992px) {

  body.header-style-glass
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 ul {
    background: var(--header-glass-bg) !important;
    -webkit-backdrop-filter: blur(var(--header-glass-blur)) saturate(120%) !important;
    backdrop-filter: blur(var(--header-glass-blur)) saturate(120%) !important;
  }

  body.header-fixed.sticky-header-style-glass
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 ul {
    background: var(--header-glass-bg) !important;
    -webkit-backdrop-filter: blur(var(--header-glass-blur)) saturate(120%) !important;
    backdrop-filter: blur(var(--header-glass-blur)) saturate(120%) !important;
  }

}

/* Theme-controlled glass dropdown opacity */
@media screen and (min-width: 992px) {

  body.header-style-glass
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 ul {
    background: var(--header-glass-dropdown-bg) !important;
  }

  body.header-fixed.sticky-header-style-glass
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 ul {
    background: var(--header-glass-dropdown-bg) !important;
  }

}

/* Glass dropdown: remove legacy dark overlay */
@media screen and (min-width: 992px) {

  body.header-style-glass
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 ul::after {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.header-fixed.sticky-header-style-glass
  .header-wrap .region-header .block-superfish
  .sf-menu > .sf-depth-1 ul::after {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

}








/* Related news arrow */
.news-card-section .view .views-row .news-item-inner .title-arrow .arrow {
  flex: 0 0 36px;
}

.news-card-section .view .views-row .news-item-inner .title-arrow .arrow a {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: var(--orbyte-radius-sm) !important;
  background-color: transparent !important;
  border: 1px solid var(--data-btn-secondary-btn-enabled-border-color) !important;
}

.news-card-section .view .views-row .news-item-inner .title-arrow .arrow a::before {
  width: 100%;
  height: 100%;
  -webkit-mask-size: 12px !important;
  mask-size: 12px !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  background-color: var(--data-btn-secondary-btn-enabled-border-color) !important;
  transform: none !important;
  -webkit-transform: none !important;
}

.news-card-section .view .views-row .news-item-inner .title-arrow .title {
  width: calc(100% - 36px);
}

.news-card-section .view .views-row .news-item-inner .title-arrow .arrow a:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--data-btn-secondary-btn-enabled-border-color) 22%, transparent) !important;
}

.relatednewsSwiper {
  overflow: visible !important;
}