/*
Theme Name: Immo Schepens
Author: Immo Schepens
Description: WordPress theme for Immo Schepens
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: immoschepens
*/

/* ────────────────────────────────────────────────────────────────────────────
   Custom overrides. Loaded after site.css / properties.css.
   Uses the CSS variables defined at the top of assets/css/site.css.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  --orange: #eb6707;
  --charcoal: #1d1d1d;
  /* Vaste pijl-icoon (rechts), als CSS-mask: volgt currentColor, geen los bestand nodig. */
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15.6308 8.32616H0.369221C0.187682 8.32616 0.0410156 8.1795 0.0410156 7.99796C0.0410156 7.81642 0.187682 7.66975 0.369221 7.66975H14.8379L12.8461 5.67796C12.7179 5.54975 12.7179 5.34155 12.8461 5.21334C12.9743 5.08514 13.1826 5.08514 13.3108 5.21334L15.8636 7.76616C15.9579 7.86052 15.9856 8.00103 15.9343 8.12411C15.8831 8.24616 15.7631 8.32616 15.6308 8.32616Z'/%3E%3Cpath d='M13.0748 10.882C12.9907 10.882 12.9066 10.8502 12.843 10.7856C12.7148 10.6574 12.7148 10.4492 12.843 10.321L15.3989 7.7651C15.5271 7.63689 15.7353 7.63689 15.8635 7.7651C15.9917 7.8933 15.9917 8.10151 15.8635 8.22972L13.3076 10.7856C13.243 10.8502 13.1589 10.882 13.0748 10.882Z'/%3E%3C/svg%3E");
  /* Carousel-pijlen (32px), zelfde principe: currentColor via mask. */
  --icon-arrow-right-32: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M31.2615 16.6523H0.738442C0.375365 16.6523 0.0820312 16.359 0.0820312 15.9959C0.0820312 15.6328 0.375365 15.3395 0.738442 15.3395H29.6759L25.6923 11.3559C25.4359 11.0995 25.4359 10.6831 25.6923 10.4267C25.9487 10.1703 26.3651 10.1703 26.6215 10.4267L31.7272 15.5323C31.9159 15.721 31.9713 16.0021 31.8687 16.2482C31.7661 16.4923 31.5261 16.6523 31.2615 16.6523Z'/%3E%3Cpath d='M26.1496 21.764C25.9813 21.764 25.8131 21.7005 25.686 21.5712C25.4295 21.3148 25.4295 20.8984 25.686 20.642L30.7978 15.5302C31.0542 15.2738 31.4706 15.2738 31.727 15.5302C31.9834 15.7866 31.9834 16.203 31.727 16.4594L26.6152 21.5712C26.486 21.7005 26.3178 21.764 26.1496 21.764Z'/%3E%3C/svg%3E");
  --icon-arrow-left-32: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M0.738484 15.3477L31.2616 15.3477C31.6246 15.3477 31.918 15.641 31.918 16.0041C31.918 16.3672 31.6246 16.6605 31.2616 16.6605L2.32413 16.6605L6.30771 20.6441C6.56412 20.9005 6.56412 21.3169 6.30771 21.5733C6.0513 21.8297 5.63489 21.8297 5.37848 21.5733L0.272843 16.4677C0.084124 16.279 0.0287403 15.9979 0.131304 15.7518C0.233868 15.5077 0.473868 15.3477 0.738484 15.3477Z'/%3E%3Cpath d='M5.85045 10.236C6.01866 10.236 6.18686 10.2995 6.31404 10.4288C6.57045 10.6852 6.57045 11.1016 6.31404 11.358L1.20225 16.4698C0.945836 16.7262 0.529427 16.7262 0.273017 16.4698C0.0166067 16.2134 0.0166067 15.797 0.273017 15.5406L5.38481 10.4288C5.51404 10.2995 5.68225 10.236 5.85045 10.236Z'/%3E%3C/svg%3E");
}

/* Link met wipe-underline: hover = links -> rechts in, muis weg = naar rechts uit */
@media (min-width: 1024px) {
.link-underline {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.link-underline::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.12em;
  left: 0;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
}

@media (prefers-reduced-motion: reduce) {
  .link-underline::after {
    transition: none;
  }
}

/* Elementor header: transparant bovenaan, zwart na scrollen (JS zet .is-scrolled).
   De header moet in Elementor op Positie: Vast (of Sticky) staan, anders scrolt
   hij weg en zie je de zwarte staat nooit. */
.elementor-location-header,
.elementor-location-header > .e-con {
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.elementor-location-header.is-scrolled,
.elementor-location-header.is-scrolled > .e-con {
  background-color: var(--charcoal);
}

.elementor-location-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Binnenpagina's zonder hero: meteen zwart */
body:not(.home):not(.elementor-page-front) .elementor-location-header,
body:not(.home):not(.elementor-page-front) .elementor-location-header > .e-con {
  background-color: var(--charcoal);
}

/* JetElements Timeline (pagina "Over ons", widget elementor-element-ae5e363):
   het jaartal (item_meta) standaard verschijnt in align-center-modus aan de
   overkant van de lijn, los van de kaart. Dat buitenste meta-veld is ook de
   flex-spacer die de kaart in balans houdt met de lijn (kaart 50% — lijn —
   meta 50%): verbergen ervan (display:none) trekt de lijn scheef. Daarom
   blijft het origineel staan (onzichtbaar, houdt zijn ruimte) en tonen we
   een duplicaat in de contentbox: het jaartal zweeft links vóór de titel
   (float), de beschrijving erna breekt af met clear. */
.elementor-element-ae5e363 .jet-timeline--align-center .timeline-item__card-content > .timeline-item__meta {
  display: inline-block;
  float: left;
  margin: 4px 12px 6px 0;
}

.elementor-element-ae5e363 .jet-timeline--align-center .timeline-item__card-content > .timeline-item__card-desc {
  clear: both;
}

.elementor-element-ae5e363 .jet-timeline--align-center .jet-timeline-item > .timeline-item__meta {
  visibility: hidden;
}

/* JetFormBuilder submit-knop ("Inschrijven"): pijl-icoon rechts, tekst links.
   De SVG wordt als CSS-mask toegevoegd (geen los bestand nodig) en volgt de
   tekstkleur van de knop via currentColor. width:100% is nodig, anders heeft
   justify-content:space-between geen ruimte om te verdelen. */
.jet-form-builder__action-button.jet-form-builder__submit {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 12px;
  width: 100%;
}

.jet-form-builder__action-button.jet-form-builder__submit::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-arrow-right);
  mask-image: var(--icon-arrow-right);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* .button (Niemo/thema-knoppen: "Alle verkochte panden →", "Contacteer ons →", ...):
   de losse tekstpijl (<span aria-hidden="true">→</span>) vervangen door hetzelfde
   pijl-icoon als de JetFormBuilder-knop, voor visuele consistentie. De span
   blijft aria-hidden, dus geen impact op toegankelijkheid. */
.button span[aria-hidden="true"] {
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-arrow-right);
  mask-image: var(--icon-arrow-right);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}