/* =============================================================
   Skydent — Flatsome compatibility shim
   ------------------------------------------------------------
   The pages were originally built with Flatsome's UX Builder. We
   captured the RENDERED HTML (which keeps Flatsome's class names)
   and dropped it into Elementor HTML widgets. This stylesheet
   re-implements ONLY the Flatsome classes the Skydent site
   actually uses, so the original layout renders 1:1 WITHOUT the
   paid Flatsome theme/stylesheet.

   Scoped under .skydent-fs to avoid clashing with Elementor/theme.
   ============================================================= */

.skydent-fs,
.skydent-fs * { box-sizing: border-box; }

/* Flatsome visibility helpers.
   NOTE: we deliberately do NOT blanket-hide .hidden. On the reference site
   Flatsome's JS toggled ".text hidden" blocks open (e.g. the "Lees meer"
   vacancy bodies). Without that JS, hiding them would permanently swallow
   real content. So .hidden blocks render OPEN — showing content beats hiding
   it. (The only fake .hidden data, the placeholder BIG-nummer, was removed
   from the DB instead.) Screen-reader-only helpers stay visually hidden. */
.skydent-fs .show-for-sr,
.skydent-fs .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ---------- Section ---------- */
.skydent-fs .section { position: relative; padding: 30px 0; }
.skydent-fs .section-bg { position: absolute; inset: 0; overflow: hidden; }
.skydent-fs .section-bg.fill,
.skydent-fs .fill { position: absolute; inset: 0; }
.skydent-fs .section-bg img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.skydent-fs .section-content { position: relative; z-index: 1; }
.skydent-fs .section-content.relative { position: relative; }

/* Dark sections (Flatsome 'dark' => light text) */
.skydent-fs .dark,
.skydent-fs .dark :is(h1,h2,h3,h4,h5,h6,p,span,li,a) { color: #fff; }

/* ---------- Row / Col grid (Flatsome 12-col flex) ---------- */
.skydent-fs .row {
  display: flex; flex-wrap: wrap;
  margin: 0 -15px; max-width: var(--sk-container, 1200px);
  margin-inline: auto; padding-inline: 15px;
}
.skydent-fs .row-large { margin-bottom: 1.5rem; }
.skydent-fs .row-collapse { margin-inline: 0; padding-inline: 0; }
.skydent-fs .row-inner { width: 100%; }
.skydent-fs .col {
  position: relative; flex: 0 0 100%; max-width: 100%;
  padding: 0 15px 30px;
}
.skydent-fs .col-inner { position: relative; height: 100%; }

/* Flatsome "columns-N" rows: the row sets a default column count, and child
   .col elements without an explicit large-* span inherit that width.
   large-columns-N => each col is 100/N % on desktop. */
.skydent-fs .row.large-columns-1 > .col { flex-basis: 100%;    max-width: 100%; }
.skydent-fs .row.large-columns-2 > .col { flex-basis: 50%;     max-width: 50%; }
.skydent-fs .row.large-columns-3 > .col { flex-basis: 33.333%; max-width: 33.333%; }
.skydent-fs .row.large-columns-4 > .col { flex-basis: 25%;     max-width: 25%; }
.skydent-fs .row.large-columns-5 > .col { flex-basis: 20%;     max-width: 20%; }
.skydent-fs .row.large-columns-6 > .col { flex-basis: 16.666%; max-width: 16.666%; }
/* An explicit large-* span on the col still wins over the row default. */
.skydent-fs .row[class*="large-columns-"] > .col[class*="large-"]:not(.large-12) { /* handled by .large-N rules below */ }

@media (max-width: 1024px) {
  .skydent-fs .row.medium-columns-1 > .col { flex-basis: 100%;    max-width: 100%; }
  .skydent-fs .row.medium-columns-2 > .col { flex-basis: 50%;     max-width: 50%; }
  .skydent-fs .row.medium-columns-3 > .col { flex-basis: 33.333%; max-width: 33.333%; }
  .skydent-fs .row.medium-columns-4 > .col { flex-basis: 50%;     max-width: 50%; }
}
@media (max-width: 640px) {
  .skydent-fs .row.small-columns-1 > .col { flex-basis: 100%; max-width: 100%; }
  .skydent-fs .row.small-columns-2 > .col { flex-basis: 50%;  max-width: 50%; }
}

/* Column spans — desktop (large-*) */
.skydent-fs .large-1  { flex-basis: 8.333%;  max-width: 8.333%; }
.skydent-fs .large-2  { flex-basis: 16.666%; max-width: 16.666%; }
.skydent-fs .large-3  { flex-basis: 25%;     max-width: 25%; }
.skydent-fs .large-4  { flex-basis: 33.333%; max-width: 33.333%; }
.skydent-fs .large-5  { flex-basis: 41.666%; max-width: 41.666%; }
.skydent-fs .large-6  { flex-basis: 50%;     max-width: 50%; }
.skydent-fs .large-7  { flex-basis: 58.333%; max-width: 58.333%; }
.skydent-fs .large-8  { flex-basis: 66.666%; max-width: 66.666%; }
.skydent-fs .large-9  { flex-basis: 75%;     max-width: 75%; }
.skydent-fs .large-10 { flex-basis: 83.333%; max-width: 83.333%; }
.skydent-fs .large-11 { flex-basis: 91.666%; max-width: 91.666%; }
.skydent-fs .large-12 { flex-basis: 100%;    max-width: 100%; }

/* Tablet (medium-*) */
@media (max-width: 1024px) {
  .skydent-fs .medium-1  { flex-basis: 8.333%;  max-width: 8.333%; }
  .skydent-fs .medium-2  { flex-basis: 16.666%; max-width: 16.666%; }
  .skydent-fs .medium-3  { flex-basis: 25%;     max-width: 25%; }
  .skydent-fs .medium-4  { flex-basis: 33.333%; max-width: 33.333%; }
  .skydent-fs .medium-5  { flex-basis: 41.666%; max-width: 41.666%; }
  .skydent-fs .medium-6  { flex-basis: 50%;     max-width: 50%; }
  .skydent-fs .medium-7  { flex-basis: 58.333%; max-width: 58.333%; }
  .skydent-fs .medium-8  { flex-basis: 66.666%; max-width: 66.666%; }
  .skydent-fs .medium-9  { flex-basis: 75%;     max-width: 75%; }
  .skydent-fs .medium-10 { flex-basis: 83.333%; max-width: 83.333%; }
  .skydent-fs .medium-11 { flex-basis: 91.666%; max-width: 91.666%; }
  .skydent-fs .medium-12,
  .skydent-fs [class*="large-"] { flex-basis: 100%; max-width: 100%; }
  .skydent-fs .medium-4  { flex-basis: 33.333%; max-width: 33.333%; }
}

/* Mobile (small-*) */
@media (max-width: 640px) {
  .skydent-fs .small-12,
  .skydent-fs [class*="medium-"],
  .skydent-fs [class*="large-"] { flex-basis: 100%; max-width: 100%; }
  .skydent-fs .small-6 { flex-basis: 50%; max-width: 50%; }
  .skydent-fs .section { padding: 24px 0; }
}

/* ---------- Text alignment / utilities ---------- */
.skydent-fs .text-center { text-align: center; }
.skydent-fs .text-left   { text-align: left; }
.skydent-fs .text-right  { text-align: right; }
.skydent-fs .uppercase   { text-transform: uppercase; letter-spacing: .04em; }
.skydent-fs .thin-font   { font-weight: 300; }
.skydent-fs .op-6        { opacity: .7; }
.skydent-fs .relative    { position: relative; }
.skydent-fs .hide        { display: none; }

/* ---------- Buttons ---------- */
.skydent-fs .button {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .7em 1.4em; margin: 0 .3em .5em 0;
  font-weight: 600; line-height: 1.2; border-radius: var(--sk-radius-full, 999px);
  background: var(--sk-primary, #076d84); color: #fff !important;
  border: 2px solid var(--sk-primary, #076d84);
  transition: transform .2s, background .2s, box-shadow .2s;
}
.skydent-fs .button:hover { background: var(--sk-primary-dark, #05566a); border-color: var(--sk-primary-dark, #05566a); transform: translateY(-2px); box-shadow: var(--sk-shadow, 0 4px 12px rgba(0,0,0,.1)); }
.skydent-fs .button.white { background: #fff; color: var(--sk-primary, #076d84) !important; border-color: #fff; }
.skydent-fs .button.primary { background: var(--sk-primary, #076d84); }
.skydent-fs .button.success { background: var(--sk-whatsapp, #25d366); border-color: var(--sk-whatsapp, #25d366); }
.skydent-fs .button.is-outline { background: transparent; color: var(--sk-primary, #076d84) !important; }
.skydent-fs .button.is-outline:hover { background: var(--sk-primary, #076d84); color: #fff !important; }

/* ---------- Featured / icon boxes ---------- */
.skydent-fs .box { position: relative; margin-bottom: 1rem; }
.skydent-fs .box-image { position: relative; overflow: hidden; border-radius: var(--sk-radius, 12px); }
.skydent-fs .box-image img { width: 100%; display: block; }
.skydent-fs .box-text { padding-top: .6rem; }
.skydent-fs .box-text-inner { }
.skydent-fs .featured-box, .skydent-fs .box-default { text-align: center; }

/* ---------- Portfolio / image boxes (treatment cards) ----------
   Flatsome markup:
     a.plain > .portfolio-box.box.box-overlay > .box-image[radius]
        > .image-cover[padding-top:80%]  (aspect-ratio spacer)
            > img  (must be absolutely filled)
            > .overlay  (tint)
     + .box-text (title below or over image)
*/
.skydent-fs a.plain { display: block; color: inherit; }
.skydent-fs .portfolio-box,
.skydent-fs .gallery-box,
.skydent-fs .box { position: relative; overflow: hidden; border-radius: var(--sk-radius, 12px); margin-bottom: 24px; box-shadow: var(--sk-shadow-sm, 0 1px 3px rgba(0,0,0,.1)); transition: transform .25s, box-shadow .25s; background:#fff; }
.skydent-fs .portfolio-box:hover,
.skydent-fs .box.has-hover:hover { transform: translateY(-4px); box-shadow: var(--sk-shadow-lg, 0 18px 40px rgba(7,109,132,.18)); }

/* Flatsome icon-box: icon + text. Default is icon above text; the
   "icon-box-left"/"icon-box-right" variants put them side by side. */
.skydent-fs .icon-box { display: flex; gap: .8rem; }
.skydent-fs .icon-box.icon-box-top { display: block; }            /* icon stacked above text */
.skydent-fs .icon-box.icon-box-left { flex-direction: row; align-items: flex-start; }
.skydent-fs .icon-box.icon-box-right { flex-direction: row-reverse; }
.skydent-fs .icon-box-img { flex: 0 0 auto; line-height: 0; }
.skydent-fs .icon-box-img img { display: inline-block; width: auto; }
.skydent-fs .icon-box .icon-box-text { flex: 1; min-width: 0; }
.skydent-fs .icon-box .icon-box-text > :last-child { margin-bottom: 0; }

.skydent-fs .box-image { position: relative; overflow: hidden; }

/* image-cover uses padding-top as an aspect-ratio spacer; the <img> fills it.
   IMPORTANT: only absolutely-fill images INSIDE an .image-cover spacer. A bare
   .box-image (e.g. logo galleries) must keep the image in normal flow, else it
   collapses to 0×0. */
.skydent-fs .image-cover { position: relative; width: 100%; overflow: hidden; }
.skydent-fs .image-cover > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s var(--sk-ease, ease);
}
/* plain box-image (no .image-cover spacer): image flows normally */
.skydent-fs .box-image > img {
  display: block; width: 100%; height: auto;
  transition: transform .4s var(--sk-ease, ease);
}
.skydent-fs .box:hover .image-cover > img,
.skydent-fs .portfolio-box:hover img { transform: scale(1.06); }

/* tint overlay over the image */
.skydent-fs .box-overlay .overlay,
.skydent-fs .image-cover .overlay,
.skydent-fs .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,109,132,.78) 0%, rgba(7,109,132,.12) 55%, transparent 100%);
  pointer-events: none;
}

/* title block (Flatsome puts the label in .box-text) */
.skydent-fs .box-text {
  position: relative; padding: .85rem 1rem;
  text-align: center; background: #fff;
}
.skydent-fs .box-text :is(h1,h2,h3,h4,h5,h6,p) { margin: 0; color: var(--sk-navy, #1f355f); font-size: 1.05rem; font-weight: 600; }
/* when the box is an overlay style, the text sits ON the image in white */
.skydent-fs .box-overlay .box-text {
  position: absolute; inset: auto 0 0 0; background: transparent; z-index: 2;
  text-align: left;
}
.skydent-fs .box-overlay .box-text :is(h1,h2,h3,h4,h5,h6,p) { color: #fff; }
.skydent-fs .portfolio-box-title { color: #fff; font-size: 1.15rem; font-weight: 700; margin: 0; }
.skydent-fs .portfolio-box-category { color: rgba(255,255,255,.85); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Sliders (no Flatsome JS) ----------
   Flatsome row-sliders are JS carousels; without flatsome.js the slides
   collapse to 0×0. We have no carousel runtime, so render the slider as a
   simple responsive wrapping grid — every logo/slide just shows. */
.skydent-fs .row.slider,
.skydent-fs .row.row-slider {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2rem;
  transform: none !important;   /* kill any inline carousel transform */
}
.skydent-fs .row.slider > .col,
.skydent-fs .row.row-slider > .col {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
}
/* slider chrome we can't drive without JS */
.skydent-fs .slider-nav-circle,
.skydent-fs .flickity-button,
.skydent-fs .slider-arrows,
.skydent-fs .flickity-page-dots { display: none !important; }
/* make sure logo images have an intrinsic size */
.skydent-fs .row.slider img,
.skydent-fs .row.row-slider img { width: auto !important; height: 44px !important; max-width: 160px; object-fit: contain; }
.skydent-fs .row.slider .box,
.skydent-fs .row.slider .box-image,
.skydent-fs .row.slider .gallery-box {
  overflow: visible !important; box-shadow: none !important; background: transparent !important; margin: 0 !important;
}
/* logo galleries have empty .box-text caption boxes — hide them */
.skydent-fs .row.slider .box-text,
.skydent-fs .row.slider .box-text-inner { display: none !important; }

/* Flatsome lazy-load: without flatsome.js these can stay hidden. Force visible. */
.skydent-fs img.lazy-load,
.skydent-fs img[class*="lazy"] { opacity: 1 !important; visibility: visible !important; }

/* ---------- Image helpers ---------- */
.skydent-fs .img { position: relative; }
.skydent-fs .img-inner img { display: block; width: 100%; }
.skydent-fs img { max-width: 100%; height: auto; }
.skydent-fs .gallery-col { padding: 0 10px 20px; }

/* ---------- Gaps / dividers ---------- */
.skydent-fs .divider, .skydent-fs hr { border: 0; border-top: 1px solid var(--sk-border, #e3e8ef); margin: 1.5rem 0; }

/* ---------- Accordion (Over ons FAQ etc.) ---------- */
.skydent-fs .accordion { margin: 1rem 0; }
.skydent-fs .accordion-item { border: 1px solid var(--sk-border, #e3e8ef); border-radius: var(--sk-radius-sm, 6px); margin-bottom: .6rem; background: #fff; overflow: hidden; }
.skydent-fs .accordion-title {
  position: relative; cursor: pointer; padding: .9rem 2.5rem .9rem 1.1rem;
  font-weight: 600; color: var(--sk-navy, #1f355f);
}
.skydent-fs .accordion-title.active { color: var(--sk-primary, #076d84); }
.skydent-fs .accordion-title::after {
  content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-size: 1.3em; color: var(--sk-primary, #076d84);
}
.skydent-fs .accordion-title.active::after { content: "\2212"; }
.skydent-fs .accordion-inner { padding: 0 1.1rem 1rem; color: var(--sk-text-soft, #41505f); }

/* ---------- Team members ---------- */
.skydent-fs .team-member { text-align: center; margin-bottom: 1.5rem; }
.skydent-fs .team-member img { border-radius: var(--sk-radius, 12px); margin-bottom: .6rem; }

/* ---------- Headings inside captured content ---------- */
.skydent-fs h1 span, .skydent-fs h2 span, .skydent-fs h3 span { color: inherit; }
.skydent-fs .section { color: var(--sk-text, #15212e); }
.skydent-fs .section h2 { color: var(--sk-navy, #1f355f); }
.skydent-fs .dark .section-content :is(h1,h2,h3) { color: #fff; }