/* =============================================================
   Skydent — Modern layer
   ------------------------------------------------------------
   Light, SAFE modernisation on top of the faithful 1:1 capture.
   Keeps the original layout & content; refines spacing, type,
   buttons, shadows, hovers. Scoped under .skydent-fs so it only
   touches the captured page content, never wp-admin / Elementor
   chrome. Loaded AFTER flatsome-compat.css so it can refine it.

   Section-by-section. Each block is labelled; easy to revert.
   ============================================================= */

/* -------------------------------------------------------------
   1) HERO  (#section_1645693300)
   Original: full-bleed building photo, white H2+H3, text hugging
   the left edge, small type, not vertically centred.
   Modernised: readability gradient, larger confident type,
   vertical centring, comfortable left padding, subtle text shadow.
   ------------------------------------------------------------- */
.skydent-fs #section_1645693300 {
  min-height: 560px;
  display: flex;
  align-items: center;
}
.skydent-fs #section_1645693300 .section-content {
  width: 100%;
}
/* Readability scrim so white text is crisp over any part of the photo */
.skydent-fs #section_1645693300 .section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,62,77,.72) 0%, rgba(4,62,77,.38) 38%, rgba(4,62,77,0) 70%);
}
.skydent-fs #section_1645693300 .col,
.skydent-fs #section_1645693300 .col-inner {
  padding-left: clamp(8px, 4vw, 56px);
}
.skydent-fs #section_1645693300 h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
  max-width: 16ch;
  text-shadow: 0 2px 18px rgba(4,40,50,.35);
}
.skydent-fs #section_1645693300 h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 500;
  opacity: .96;
  margin: 0;
  text-shadow: 0 1px 10px rgba(4,40,50,.3);
}
@media (max-width: 640px) {
  .skydent-fs #section_1645693300 { min-height: 420px; }
  /* on mobile the scrim covers more so text stays legible */
  .skydent-fs #section_1645693300 .section-bg::after {
    background: linear-gradient(180deg, rgba(4,62,77,.30) 0%, rgba(4,62,77,.65) 100%);
  }
}

/* -------------------------------------------------------------
   2) INTRO  (#section_56211181)  "Welkom bij Skydent /
   Tandartsenpraktijk in Leiden" — text left, photo right.
   Modernised: confident heading, kicker accent, comfy paragraph
   measure, softer image card, tidy "Geen wachtlijst" badge row.
   ------------------------------------------------------------- */
.skydent-fs #section_56211181 h3.thin-font [data-text-color="primary"],
.skydent-fs #section_56211181 h3.thin-font {
  color: var(--sk-primary);
  font-weight: 600;
  letter-spacing: .01em;
}
.skydent-fs #section_56211181 h1 {
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin-top: .15em;
}
.skydent-fs #section_56211181 p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--sk-text-soft);
  max-width: 56ch;
}
/* the practice photo on the right: rounded, soft shadow, subtle lift */
.skydent-fs #section_56211181 .col:last-child img {
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow-lg);
}
/* "Geen wachtlijst, direct inschrijven!" badge row — only the icon-box-LEFT
   one (the small badge), NOT the icon-box-top one (the whole intro block). */
.skydent-fs #section_56211181 .icon-box.icon-box-left {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.1rem;
  padding: .55rem 1.05rem;
  background: var(--sk-primary-50);
  border-radius: var(--sk-radius-full);
}
.skydent-fs #section_56211181 .icon-box.icon-box-left .icon-box-img { width: 22px; }
.skydent-fs #section_56211181 .icon-box.icon-box-left .icon-box-text :is(p,span,h3,h4) {
  margin: 0; color: var(--sk-primary-dark); font-weight: 600; font-size: .95rem;
}

/* -------------------------------------------------------------
   3) BEHANDELINGEN cards  (#section_230148264)
   6 treatment cards on a light surface. Modernised: airier section
   heading, consistent card titles that never clip, smooth hover.
   ------------------------------------------------------------- */
.skydent-fs #section_230148264 { padding-top: 64px; padding-bottom: 64px; }
.skydent-fs #section_230148264 > .section-content > .row:first-child h3,
.skydent-fs #section_230148264 h3:first-of-type {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 800;
  color: var(--sk-navy);
  letter-spacing: -.01em;
  margin-bottom: 1.6rem;
}
/* treatment card titles: fit, no clipping, tidy weight.
   GLOBAL across all portfolio grids (home + Behandelingen page + related),
   not just the homepage section, so titles never clip anywhere. */
.skydent-fs .portfolio-box .box-text { padding: .9rem .8rem 1.1rem; }
.skydent-fs .portfolio-box-title {
  font-size: .98rem;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: none;          /* drop shouty all-caps for a cleaner look */
  word-break: normal;
  overflow-wrap: anywhere;       /* long single words wrap instead of clipping */
  hyphens: auto;
  color: var(--sk-navy);
}
.skydent-fs .portfolio-box .box-text-inner p.uppercase:empty { display: none; } /* hide empty caption line */
/* image radius + lift */
.skydent-fs .portfolio-box .box-image { border-radius: var(--sk-radius); }
.skydent-fs .portfolio-box { border-radius: var(--sk-radius); }
.skydent-fs .portfolio-box:hover { box-shadow: var(--sk-shadow-lg); transform: translateY(-5px); }

/* -------------------------------------------------------------
   4) PARTNER + ZORGVERZEKERAARS logo strips
   (#section_160037222 and the "Onze partners" section)
   Modernised: centred heading, evenly spaced logos, subtle
   greyscale that lifts to colour on hover.
   ------------------------------------------------------------- */
.skydent-fs #section_160037222 h3,
.skydent-fs #section_160037222 h2 { text-align: center; }
.skydent-fs .row.slider img {
  filter: grayscale(100%);
  opacity: .72;
  transition: filter .25s var(--sk-ease), opacity .25s var(--sk-ease);
}
.skydent-fs .row.slider img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* -------------------------------------------------------------
   5) COOKIE-CONSENT BANNER  (shipit-cookie-consent plugin)
   Re-point the plugin's design tokens at the Skydent site tokens so the
   consent banner matches the rest of the site (teal-deep primary, navy
   text, tint surfaces) instead of its default blue/teal.
   NB: intentionally NOT scoped under .skydent-fs — it targets the plugin's
   own #shipit-consent-root. The extra `html` + theme-class selectors raise
   specificity above the plugin's own light/dark theme rules, and !important
   on the derived --sc-* tokens matches the plugin's own !important.
   ------------------------------------------------------------- */
html #shipit-consent-root,
html #shipit-consent-root.shipit-consent--theme-light,
html #shipit-consent-root.shipit-consent--theme-auto,
html #shipit-consent-root.shipit-consent--theme-dark {
  /* upstream hooks — the banner border + 3px top accent read these directly */
  --shipit-cc-accent:      var(--sk-primary);
  --shipit-cc-accent-dark: var(--sk-primary-dark);
  --shipit-cc-accent-text: var(--sk-primary-dark);
  --shipit-cc-rule-strong: var(--sk-primary);
  --shipit-cc-ink:         var(--sk-navy);
  --shipit-cc-muted:       var(--sk-text-soft);
  --shipit-cc-rule:        var(--sk-border);
  --shipit-cc-chip:        var(--sk-surface);
  /* derived tokens (buttons / text / surfaces) — !important to beat plugin */
  --sc-fg:            var(--sk-navy) !important;
  --sc-muted:         var(--sk-text-soft) !important;
  --sc-border:        var(--sk-border) !important;
  --sc-bg-raised:     var(--sk-surface) !important;
  --sc-primary:       var(--sk-primary) !important;
  --sc-primary-hover: var(--sk-primary-dark) !important;
  --sc-primary-fg:    #fff !important;
  --sc-ghost-hover:   var(--sk-surface) !important;
}