/* ==========================================================================
   Sint-Michielschool — beweging, hover en overgangen
   Kleuren verwijzen naar Elementor's globale kleuren, zodat de site
   volledig herbrandeerbaar blijft vanuit Site Settings.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Knoppen — de "bouncy" knop met harde onderschaduw
   -------------------------------------------------------------------------- */

.stms-btn-teal .elementor-button,
.stms-btn-outline .elementor-button,
.stms-btn-coral .elementor-button {
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  will-change: transform;
}

.stms-btn-teal .elementor-button {
  box-shadow: 0 5px 0 var(--e-global-color-stmstealbrgt),
              0 8px 20px rgba(107, 196, 202, .45);
}
.stms-btn-teal .elementor-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 9px 0 var(--e-global-color-stmstealbrgt),
              0 14px 30px rgba(107, 196, 202, .5);
}
.stms-btn-teal .elementor-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 0 var(--e-global-color-stmstealbrgt);
}

.stms-btn-coral .elementor-button {
  box-shadow: 0 4px 0 var(--e-global-color-stmscoraldeep);
}
.stms-btn-coral .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 var(--e-global-color-stmscoraldeep);
}
.stms-btn-coral .elementor-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 0 var(--e-global-color-stmscoraldeep);
}

.stms-btn-outline .elementor-button {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}
.stms-btn-outline .elementor-button:hover {
  transform: translateY(-3px);
  border-color: var(--e-global-color-stmsteal) !important;
  color: var(--e-global-color-stmstealdeep) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
}

/* --------------------------------------------------------------------------
   2. Hero — wiebelend labeltje en inzoomende foto
   -------------------------------------------------------------------------- */

@keyframes stms-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2deg); }
  75%      { transform: rotate(2deg); }
}

#stms-hero-tag {
  animation: stms-wiggle 3s ease-in-out infinite;
}

@keyframes stms-pop-in {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

.stms-pop, .stms-pop2 {
  display: inline-block;
}
.stms-pop  { color: var(--e-global-color-stmsteal);  animation: stms-pop-in 1s ease .3s both; }
.stms-pop2 { color: var(--e-global-color-stmscoral); animation: stms-pop-in 1s ease .5s both; }

/* Foto in de herokaart — bijgesneden, zoomt bij hover.
   Let op: géén height:100% hier, anders overschrijft die de hoogte die op
   het afbeeldingswidget zelf staat en groeit de visual niet mee. */
#stms-hero-foto,
#stms-hero-foto .elementor-widget-image,
#stms-hero-foto .elementor-widget-container,
#stms-hero-foto figure,
#stms-hero-foto a {
  width: 100%;
  display: block;
}
#stms-hero-foto img {
  width: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
#stms-hero-foto:hover img {
  transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   3. De vier visievakjes in de hero
   -------------------------------------------------------------------------- */

/* De vier vakjes zijn even hoog, ook als een label over twee regels loopt.
   De rij heet bewust NIET stms-vm-*, anders zou de hover hieronder ook op de
   hele rij slaan en gingen alle vier de vakjes tegelijk omhoog. */
#stms-puzzelrij { align-items: stretch !important; }
#stms-puzzelrij > .e-con { align-items: stretch !important; }

[id^="stms-vm-"] {
  height: 100%;
  justify-content: center;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s ease,
              background-color .35s ease,
              border-color .35s ease;
}
[id^="stms-vm-"]:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
}
[id^="stms-vm-"] img {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
[id^="stms-vm-"]:hover img {
  transform: rotate(-8deg) scale(1.14);
}

#stms-vm-zorgzaam:hover    { background-color: var(--e-global-color-stmstealpale);  border-color: var(--e-global-color-stmsteal); }
#stms-vm-goedinjevel:hover { background-color: var(--e-global-color-stmssunnypale); border-color: var(--e-global-color-stmssunny); }
#stms-vm-ontmoeten:hover   { background-color: var(--e-global-color-stmscoralpale); border-color: var(--e-global-color-stmscoral); }
#stms-vm-kwaliteit:hover   { background-color: var(--e-global-color-stmsgrapepale); border-color: var(--e-global-color-stmsgrape); }

#stms-vm-zorgzaam:hover    .elementor-heading-title { color: var(--e-global-color-stmstealdeep); }
#stms-vm-goedinjevel:hover .elementor-heading-title { color: var(--e-global-color-stmssunnydeep); }
#stms-vm-ontmoeten:hover   .elementor-heading-title { color: var(--e-global-color-stmscoraldeep); }
#stms-vm-kwaliteit:hover   .elementor-heading-title { color: var(--e-global-color-stmsgrapedeep); }

/* --------------------------------------------------------------------------
   4. Marquee-balk — doorlopende lus
   De reeks staat twee keer in de HTML; één reeks is precies 50% van het
   spoor, dus -50% verschuiven levert een naadloze herhaling op.
   -------------------------------------------------------------------------- */

@keyframes stms-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

#stms-marquee {
  overflow: hidden !important;
  height: 56px;
  min-height: 56px !important;
  padding: 0 !important;
}

/* Het spoor mag niet krimpen: als flex-item zou het anders terugvallen naar
   de breedte van de balk en worden alle items platgedrukt. */
#stms-marquee-track {
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  animation: stms-marquee 20s linear infinite;
}

/* Elk item houdt zijn eigen breedte en blijft op één regel. */
#stms-marquee-track > .elementor-widget {
  flex: 0 0 auto !important;
  width: auto !important;
}
#stms-marquee-track .elementor-heading-title {
  white-space: nowrap;
  line-height: 1.2;
}
#stms-marquee:hover #stms-marquee-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  #stms-marquee-track { animation: none; }
}

/* --------------------------------------------------------------------------
   5. Kaarten — optillen en schaduw bij hover
   -------------------------------------------------------------------------- */

[id^="stms-kijker-"],
[id^="stms-zig-"],
[id^="stms-contact-"] {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s ease,
              border-color .35s ease;
}
[id^="stms-kijker-"]:hover,
[id^="stms-zig-"]:hover,
[id^="stms-contact-"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .08);
}

#stms-kijker-1:hover { border-color: var(--e-global-color-stmsteal); }
#stms-kijker-2:hover { border-color: var(--e-global-color-stmscoral); }
#stms-kijker-3:hover { border-color: var(--e-global-color-stmssunny); }
#stms-kijker-4:hover { border-color: var(--e-global-color-stmsgrape); }

/* Pijltje in de kaartlink schuift mee */
[id^="stms-kijker-"] .elementor-button-icon {
  transition: transform .25s ease;
}
[id^="stms-kijker-"]:hover .elementor-button-icon {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. Collage — schuine "polaroids" die rechttrekken bij hover
   -------------------------------------------------------------------------- */

[id^="stms-collage-"] {
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
[id^="stms-collage-"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#stms-collage-1 { transform: rotate(-4deg); }
#stms-collage-2 { transform: rotate(3deg); }
#stms-collage-3 { transform: rotate(-2deg); }
#stms-collage-1:hover,
#stms-collage-2:hover,
#stms-collage-3:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.03);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .08);
}

/* --------------------------------------------------------------------------
   7. Onderstreepte "doodle" onder een woord
   -------------------------------------------------------------------------- */

/* De handgetekende onderstreping komt uit de originele stylesheet
   (.doodle-underline in stms-origineel.css). Hier staat niets meer. */

/* --------------------------------------------------------------------------
   8. Navigatie (Xpro-header) — merkkleuren in plaats van standaardblauw
   -------------------------------------------------------------------------- */

/* De menu-opmaak zelf staat ingesteld op het Xpro-widget (via globale kleuren
   en lettertypes). Hier alleen de dingen die het widget niet kan regelen. */

.stms-nav .xpro-elementor-nav-link {
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
  white-space: nowrap;
}

/* Het menu mag nooit over twee regels vallen */
.stms-nav .xpro-elementor-horizontal-navbar-nav {
  flex-wrap: nowrap !important;
  align-items: center;
}

/* Ankerlinks (Pijlers, Schooldag, Contact) wijzen allemaal naar de homepage,
   waardoor WordPress ze op de homepage àlle drie als "huidige pagina" markeert.
   Alleen echte paginalinks mogen de actieve markering krijgen. */
.stms-nav .menu-item-type-custom.current-menu-item > .xpro-elementor-nav-link {
  background-color: transparent !important;
  color: var(--e-global-color-text) !important;
}
.stms-nav .menu-item-type-custom.current-menu-item > .xpro-elementor-nav-link:hover {
  background-color: var(--e-global-color-stmstealpale) !important;
  color: var(--e-global-color-stmstealdeep) !important;
}

/* Submenu-items schuiven licht op bij hover, net als op de statische site */
.stms-nav .xpro-elementor-horizontal-navbar-nav ul .xpro-elementor-nav-link:hover {
  transform: translateX(3px);
}

/* --- Header-indeling: logo links, menu rechts, altijd op één regel --- */
#stms-logo {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Astra geeft SVG-logo's een vaste breedte; die moet hier wijken zodat het
   logo zijn eigen verhouding houdt op 64px hoogte. */
#stms-logo img,
#stms-logo img.astra-logo-svg {
  width: auto !important;
  height: 64px !important;
  max-width: none !important;
  object-fit: contain;
}

/* Logo kantelt licht bij hover, net als op de statische site */
#stms-logo img {
  transition: transform .3s ease;
}
#stms-logo:hover img {
  transform: rotate(-3deg) scale(1.04);
}

/* --------------------------------------------------------------------------
   9. Voettekst — links in merkkleur
   -------------------------------------------------------------------------- */

.stms-footer-links a {
  color: rgba(255, 255, 255, .72);
  transition: color .25s ease, transform .25s ease;
  display: inline-block;
}
.stms-footer-links a:hover {
  color: var(--e-global-color-stmsteal);
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   10. WPForms — in de huisstijl trekken
   -------------------------------------------------------------------------- */

.stms-form .wpforms-field-label {
  font-family: 'Baloo 2', cursive !important;
  font-weight: 700 !important;
  font-size: .92rem !important;
  color: var(--e-global-color-text) !important;
  margin-bottom: .4rem !important;
}

.stms-form input[type="text"],
.stms-form input[type="email"],
.stms-form textarea {
  font-family: 'Nunito', sans-serif !important;
  font-size: 1rem !important;
  color: var(--e-global-color-text) !important;
  background: var(--e-global-color-stmssnow) !important;
  border: 2px solid var(--e-global-color-stmscloud) !important;
  border-radius: 16px !important;
  padding: .85rem 1.1rem !important;
  box-shadow: none !important;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.stms-form input[type="text"]:focus,
.stms-form input[type="email"]:focus,
.stms-form textarea:focus {
  outline: none !important;
  background: #fff !important;
  border-color: var(--e-global-color-stmsteal) !important;
  box-shadow: 0 0 0 4px var(--e-global-color-stmstealpale) !important;
}

.stms-form input::placeholder,
.stms-form textarea::placeholder {
  color: var(--e-global-color-stmstextlight) !important;
  opacity: 1;
}

.stms-form textarea { min-height: 140px !important; }

.stms-form button[type="submit"],
.stms-form .wpforms-submit {
  width: 100% !important;
  font-family: 'Baloo 2', cursive !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--e-global-color-stmsnavy) !important;
  background: var(--e-global-color-stmsteal) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 1rem 2rem !important;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--e-global-color-stmstealbrgt),
              0 8px 20px rgba(107, 196, 202, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stms-form button[type="submit"]:hover,
.stms-form .wpforms-submit:hover {
  transform: translateY(-4px);
  box-shadow: 0 9px 0 var(--e-global-color-stmstealbrgt),
              0 14px 30px rgba(107, 196, 202, .5);
}
.stms-form button[type="submit"]:active,
.stms-form .wpforms-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 0 var(--e-global-color-stmstealbrgt);
}

.stms-form .wpforms-required-label { color: var(--e-global-color-stmscoraldeep) !important; }

/* --------------------------------------------------------------------------
   11. Visie-tabbladen — puzzelstip voor elke tab
   -------------------------------------------------------------------------- */

#stms-visie-tabs .e-n-tab-title {
  font-family: 'Baloo 2', cursive !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* --------------------------------------------------------------------------
   12. Navigatie: de "Inschrijven!"-knop als koraalpil met harde onderschaduw
   -------------------------------------------------------------------------- */

.stms-nav .stms-nav-cta > a {
  background-color: var(--e-global-color-stmscoral) !important;
  color: var(--e-global-color-stmsnavy) !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 0 var(--e-global-color-stmscoraldeep);
  margin-left: .7rem;
  font-weight: 700 !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.stms-nav .stms-nav-cta > a:hover {
  transform: translateY(-3px);
  background-color: var(--e-global-color-stmscoral) !important;
  color: var(--e-global-color-stmsnavy) !important;
  box-shadow: 0 7px 0 var(--e-global-color-stmscoraldeep);
}
.stms-nav .stms-nav-cta > a:active {
  transform: translateY(0);
  box-shadow: 0 2px 0 var(--e-global-color-stmscoraldeep);
}

/* De navbar zweeft boven de pagina, net als de .nav van de statische site.
   Daardoor kan de hero de volle schermhoogte innemen. */
#stms-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--e-global-color-stmswhite) !important;
  border-bottom: 1px solid var(--e-global-color-stmscloud);
  transition: box-shadow .4s ease;
}

/* --------------------------------------------------------------------------
   Topbalk boven de navigatie
   -------------------------------------------------------------------------- */

.stms-topbar {
  /* Turquoise diep in plaats van marine — wil je een andere merkkleur,
     wissel dan alleen deze variabele (stmscoraldeep / stmsgrapedeep / stmsnavy). */
  background: var(--e-global-color-stmstealdeep);
  color: rgba(255, 255, 255, .85);
  font-family: 'Baloo 2', cursive;
  font-size: .82rem;
  font-weight: 600;
}

/* De balk zelf loopt van rand tot rand, maar de inhoud houdt zich aan het
   contentraster — zo staan "Volg ons" en het logo eronder op dezelfde lijn. */
.stms-topbar-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: .38rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.stms-topbar-social {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.stms-topbar-label {
  letter-spacing: .02em;
  margin-right: .15rem;
}

.stms-topbar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.stms-topbar-social a:hover {
  background: #ffffff;
  color: var(--e-global-color-stmstealdeep);
  transform: translateY(-1px);
}
.stms-topbar-social svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.stms-topbar-links {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.stms-topbar-links a {
  color: rgba(255, 255, 255, .88);
  transition: color .25s ease;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* De icoontjes bij Aanmelden en Gimme */
.stms-topbar-links a svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}
.stms-topbar-links a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stms-topbar-sep {
  color: rgba(255, 255, 255, .4);
}

@media (max-width: 600px) {
  .stms-topbar-label { display: none; }
  .stms-topbar-inner { font-size: .78rem; }
}
.admin-bar #stms-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar #stms-header { top: 46px; }
}

#stms-header .nav {
  position: static !important;
  inset: auto !important;
  padding: 1.1rem 0;
  transition: padding .4s cubic-bezier(.22, 1, .36, 1);
}

/* Bij het scrollen wordt de balk compacter en krijgt hij diepte */
#stms-header .nav.scrolled { padding: .85rem 0; }
#stms-header:has(.nav.scrolled) {
  box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
  border-bottom-color: transparent;
}

/* Elementor's globale linkkleur kleurt alle <a> turquoise en wint van de
   eigen .nav-link-regel. De navigatie hoort zwart te zijn. */
#stms-header .nav-menu .nav-link,
#stms-header .nav-menu .nav-link-drop {
  color: var(--e-global-color-stmsnavy) !important;
}

/* Bij hover en op de actieve pagina blijft de merkaccentuering staan,
   zoals in het originele ontwerp. */
#stms-header .nav-menu .nav-link:hover,
#stms-header .nav-menu .nav-link.active {
  color: var(--e-global-color-stmstealdeep) !important;
}

/* De "Inschrijven!"-knop in de navigatie krijgt witte tekst */
#stms-header .nav-cta,
#stms-header .nav-cta:hover,
#stms-header .nav-cta:focus {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Hero op volledige schermhoogte
   -------------------------------------------------------------------------- */

#stms-hero {
  min-height: 100vh;
  justify-content: center;
}
#stms-hero > .e-con {
  padding-top: 7rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 900px) {
  #stms-hero { min-height: auto; }
}

/* De titel blijft op twee regels staan zoals in het ontwerp */
#stms-hero h1.elementor-heading-title { white-space: nowrap; }
@media (max-width: 1200px) {
  #stms-hero h1.elementor-heading-title { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Visiesectie: het logo mag ruim buiten de tekstkolom komen
   -------------------------------------------------------------------------- */

#pijlers .logo-puzzel {
  width: 85%;
  max-width: none;
  margin-left: 0;
}
@media (max-width: 1100px) {
  #pijlers .logo-puzzel { width: 100%; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Afwerking: ankers, focus en tekstselectie
   -------------------------------------------------------------------------- */

/* Sprong naar een sectie laat de titel niet onder de vaste balk verdwijnen */
#about, #pijlers, #dag, #kijker, #contact, #aanmelden {
  scroll-margin-top: 150px;
}

/* Zichtbare, merkeigen focusring voor wie met het toetsenbord navigeert */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--e-global-color-stmsteal);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--e-global-color-stmstealpale);
  color: var(--e-global-color-stmstealdeep);
}

/* Afbeeldingen nooit uitgerekt laten ogen */
#stms-hero-foto img,
[id^="stms-collage-"] img {
  background: var(--e-global-color-stmscloud);
}

/* Astra's 'img { height: auto }' wint hier in de praktijk van .nav-logo,
   dus het logo krijgt zijn maat via een sterkere selector. */
#stms-header .nav-brand .nav-logo {
  height: var(--logo-h);
  width: auto;
  max-width: none;
}
#stms-header .nav.scrolled .nav-brand .nav-logo {
  height: calc(var(--logo-h) * .82);
}

/* De krimpstand komt van het originele script (.nav.scrolled) */
#stms-header .nav.scrolled {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Cijferbollen — draaiende stippelring en kanteling bij hover,
   overgenomen uit .stat-bubble van de statische site.
   -------------------------------------------------------------------------- */

@keyframes stms-spin-slow {
  to { transform: rotate(360deg); }
}

[id^="stms-stat-"] {
  position: relative;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
[id^="stms-stat-"]::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px dashed;
  border-radius: 50%;
  opacity: .3;
  animation: stms-spin-slow 25s linear infinite;
  pointer-events: none;
}
#stms-stat-1::before { border-color: var(--e-global-color-stmsteal); }
#stms-stat-2::before { border-color: var(--e-global-color-stmscoral); }
#stms-stat-3::before { border-color: var(--e-global-color-stmssunny); }
#stms-stat-4::before { border-color: var(--e-global-color-stmsgrape); }

[id^="stms-stat-"].visible:hover {
  transform: scale(1.12) rotate(-5deg);
}

@media (prefers-reduced-motion: reduce) {
  [id^="stms-stat-"]::before { animation: none; }
}
.admin-bar #stms-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar #stms-header { top: 46px; }
}

/* --------------------------------------------------------------------------
   13. Voettekst — gekleurde streep bovenaan en wit logo
   -------------------------------------------------------------------------- */

#stms-footer {
  position: relative;
}
#stms-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg,
    var(--e-global-color-stmsteal)  0,   var(--e-global-color-stmsteal)  25%,
    var(--e-global-color-stmsgrape) 25%, var(--e-global-color-stmsgrape) 50%,
    var(--e-global-color-stmscoral) 50%, var(--e-global-color-stmscoral) 75%,
    var(--e-global-color-stmssunny) 75%, var(--e-global-color-stmssunny) 100%);
}

/* Het logo is donker; op de donkere voettekst maken we het wit */
.stms-footer-logo img {
  filter: brightness(0) invert(1) !important;
  opacity: .92;
}

/* Dezelfde streep bovenaan de visiesectie, net als op de statische site */
#pijlers { position: relative; }
#pijlers::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg,
    var(--e-global-color-stmsteal)  0,   var(--e-global-color-stmsteal)  25%,
    var(--e-global-color-stmsgrape) 25%, var(--e-global-color-stmsgrape) 50%,
    var(--e-global-color-stmscoral) 50%, var(--e-global-color-stmscoral) 75%,
    var(--e-global-color-stmssunny) 75%, var(--e-global-color-stmssunny) 100%);
}

/* --------------------------------------------------------------------------
   14. Collage — de drie foto's overlappen elkaar, net als de originele
   absoluut geplaatste "polaroids". Plakband als pseudo-element.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  #stms-collage {
    position: relative;
    display: block !important;
  }
  #stms-collage > .e-con-inner,
  #stms-collage > .e-con {
    position: static;
  }
  [id^="stms-collage-"] {
    position: absolute !important;
  }
  #stms-collage-1 { width: 280px; top: 0;     left: 2%;  z-index: 3; }
  #stms-collage-2 { width: 250px; top: 55px;  right: 0;  z-index: 2; }
  #stms-collage-3 { width: 305px; bottom: 0;  left: 14%; z-index: 4; }
  [id^="stms-collage-"]:hover { z-index: 10 !important; }
}

/* Plakband bovenaan elke foto */
[id^="stms-collage-"]::before {
  content: '';
  position: absolute;
  z-index: 5;
  width: 60px;
  height: 22px;
  background: rgba(248, 209, 116, .8);
  border-radius: 2px;
}
#stms-collage-1::before { top: -8px; left: 30%; transform: rotate(-35deg); }
#stms-collage-2::before { top: -8px; right: 15%; transform: rotate(25deg); }
#stms-collage-3::before { top: -5px; left: 40%; transform: rotate(-20deg); }

/* --------------------------------------------------------------------------
   15. Herokaart — foto netjes bijgesneden binnen afgeronde hoeken
   -------------------------------------------------------------------------- */

#stms-hero-foto {
  overflow: hidden;
  border-radius: 20px;
}

/* Het labeltje wiebelt; de animatie hoort op de pil zelf, niet op de wrapper */
#stms-hero-tag {
  animation: stms-wiggle 3s ease-in-out infinite;
  display: inline-flex;
}

/* --------------------------------------------------------------------------
   16. Stappenplan inschrijvingen — verticale tijdlijn
   Het Xpro-widget tekent zijn eigen lijn horizontaal; die staat uit en
   hier trekken we een verticale stippellijn tussen de stapcirkels door.
   -------------------------------------------------------------------------- */

.stms-stap {
  position: relative;
}

/* De verbindingslijn loopt van de ene cirkel naar de volgende */
.stms-stap-1::after,
.stms-stap-2::after {
  content: '';
  position: absolute;
  left: 29px;
  top: 62px;
  bottom: -14px;
  width: 0;
  border-left: 2px dashed var(--e-global-color-stmscloud);
  z-index: 0;
}

.stms-stap .xpro-step-flow-icon {
  position: relative;
  z-index: 1;
  /* Het widget rekent zijn cirkel veel groter uit dan ingesteld; hier vastgezet
     op de maat die bij het ontwerp past. */
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.stms-stap .xpro-step-flow-icon svg {
  width: 22px;
  height: 22px;
}

/* Icoon, titel en tekst links uitlijnen onder elkaar */
.stms-stap .xpro-step-flow-wrapper {
  text-align: left;
}

/* Links binnen de stapbeschrijving in merkkleur */
.stms-stap .xpro-step-flow-description a {
  color: var(--e-global-color-stmstealdeep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s ease;
}
.stms-stap .xpro-step-flow-description a:hover {
  color: var(--e-global-color-stmscoraldeep);
}

/* --------------------------------------------------------------------------
   17. Responsief — kolommen onder elkaar op tablet en telefoon
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  #stms-collage {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  [id^="stms-collage-"] {
    position: relative !important;
    width: 48% !important;
    margin: 0 1% 16px !important;
    transform: none !important;
  }
}


@media (max-width: 1024px) {
  #stms-marquee-track { animation-duration: 26s; }
}