/* Javanti Sweetness – opmaak van de Elementor-teaser, volgens Huisstijlgids 2026.
   Geldt alleen voor elementen met een js-class, en via :has() voor de pagina met de teaser. */
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

/* Twenty Twenty zet de basismaat op 62,5%; op deze pagina gaan we terug naar 100% */
html:has(.js-hero) { font-size: 100%; }
body:has(.js-hero) {
  margin: 0; background: #000; color: #FEEDD7;
  font: 400 clamp(1.05rem, .35vw + 1rem, 1.2rem)/1.6 "Nunito", system-ui, sans-serif; letter-spacing: normal;
  --js-magenta: #C73589; --js-magenta-donker: #B0267C; --js-mango: #F7A715; --js-creme: #FEEDD7;
  --js-marge: clamp(1.5rem, 6.5vw, 6rem);
}

/* ---------- Basis ----------
   !important: anders winnen de globale kleuren en lettertypes van Elementor (blauwe koppen, groene knoppen). */
.elementor .js-kop .elementor-heading-title {
  margin: 0; font-family: "Fredoka", system-ui, sans-serif !important; font-weight: 700 !important; font-style: normal !important; line-height: 1.04 !important;
  letter-spacing: -.005em !important; text-transform: none !important; color: inherit !important; text-wrap: balance;
}
.elementor .js-h1 .elementor-heading-title { font-size: clamp(3rem, 8.2vw, 7.4rem) !important; }
.elementor .js-h2 .elementor-heading-title { font-size: clamp(2.2rem, 5vw, 4.4rem) !important; }
.elementor .js-label .elementor-heading-title {
  margin: 0; font: 600 clamp(.78rem, .2vw + .75rem, .92rem)/1.3 "Fredoka", system-ui, sans-serif !important;
  letter-spacing: .15em !important; text-transform: uppercase !important; color: var(--js-mango) !important;
}
.elementor .js-tekst, .elementor .js-tekst p { color: inherit !important; font-family: "Nunito", system-ui, sans-serif !important; font-size: inherit !important; line-height: 1.6 !important; letter-spacing: normal !important; }
.elementor .js-tekst p { margin: 0; max-width: 36em; text-wrap: pretty; }
.elementor .js-tekst a { color: inherit !important; text-decoration: underline; text-underline-offset: .18em; }

.elementor .js-knoppen.e-con { display: flex; flex-flow: row wrap; gap: .8rem; width: auto; max-width: 100%; padding: 0; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; --width: auto; }
.elementor .js-knoppen > .elementor-element { width: auto; flex: 0 0 auto; }
.elementor .js-knop .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: .6rem 1.9rem;
  border: 2px solid transparent; border-radius: 99px; font: 600 1.08rem/1.1 "Fredoka", system-ui, sans-serif !important;
  letter-spacing: normal !important; text-transform: none !important; text-decoration: none; box-shadow: none;
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background-color .18s, color .18s;
}
.elementor .js-knop .elementor-button:hover { transform: translateY(-2px); }
.elementor .js-knop-hoofd .elementor-button { background: var(--js-magenta-donker) !important; color: var(--js-creme) !important; }
.elementor .js-knop-hoofd .elementor-button:hover { background: var(--js-magenta) !important; color: var(--js-creme) !important; }
.elementor .js-knop-lijn .elementor-button { background: none !important; border-color: currentColor !important; color: var(--js-creme) !important; }
.elementor .js-knop-lijn .elementor-button:hover { background: var(--js-creme) !important; border-color: var(--js-creme) !important; color: #000 !important; }
.elementor a:focus-visible { outline: 3px solid var(--js-mango); outline-offset: 3px; }

/* ---------- Hero ---------- */
.elementor .js-hero.e-con { position: relative; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; min-height: 100vh; min-height: 100svh; padding: clamp(2rem, 4vw, 3.5rem) var(--js-marge); overflow: hidden; background: #000; color: var(--js-creme); gap: 0; }
.elementor .js-hero-tekst.e-con { position: relative; z-index: 1; display: block; width: min(100%, 44rem); max-width: 44rem; padding: 0; margin: 0; --width: min(100%, 44rem); }
.elementor .js-hero-tekst > .elementor-element { width: 100%; }
.elementor .js-hero-tekst.e-con > .js-hero-logo.elementor-widget { margin: 0 0 clamp(2rem, 5vh, 3.6rem) -.4rem; }
.elementor .js-hero-logo img { display: block; width: clamp(15rem, 27vw, 25rem); max-width: 100%; height: auto; }
.elementor .js-hero-tekst.e-con > .js-label.elementor-widget, .elementor .js-magenta-kop.e-con > .js-label.elementor-widget, .elementor .js-creme.e-con > .js-label.elementor-widget { margin: 0 0 .9em; }
.elementor .js-hero-tekst > .js-kop, .elementor .js-magenta-kop > .js-kop, .elementor .js-creme > .js-kop { margin: 0; }
.elementor .js-hero-tekst.e-con > .js-tekst.elementor-widget { margin: clamp(1.2rem, 2.4vw, 1.8rem) 0 0; }

.elementor .js-hero.e-con > .js-hero-foto.elementor-element { position: absolute; inset: 0 0 0 30%; width: auto; max-width: none; margin: 0; }
.elementor .js-hero-foto .elementor-widget-container, .elementor .js-hero-foto picture { display: block; height: 100%; }
.elementor .js-hero-foto img {
  display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 40% 60%; border-radius: 0; filter: brightness(.74) saturate(.92);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .12) 24%, rgba(0, 0, 0, .55) 42%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .12) 24%, rgba(0, 0, 0, .55) 42%, #000 62%);
}

/* Mango-golf onder de kop: hoort bij de vormgeving, dus niet los bewerkbaar */
.elementor .js-golf .elementor-heading-title::after {
  content: ""; display: block; width: min(52%, 26rem); aspect-ratio: 900 / 71; margin-top: clamp(.8rem, 1.6vw, 1.4rem);
  background: url("img/golf-mango.webp") left center / 100% 100% no-repeat;
}

/* ---------- Secties ---------- */
.elementor .js-sectie.e-con { display: block; padding: clamp(4rem, 9vw, 8.5rem) var(--js-marge); }
.elementor .js-magenta.e-con { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); align-items: center; background: var(--js-magenta); color: var(--js-creme); }
.elementor .js-magenta > .elementor-element { width: 100%; max-width: none; }
.elementor .js-magenta-kop.e-con { display: block; width: 100%; padding: 0; --width: 100%; }
.elementor .js-magenta .js-label .elementor-heading-title { color: #000 !important; }
.elementor .js-magenta .js-tekst p { font-weight: 700 !important; font-size: clamp(1.2rem, 1.5vw, 1.5rem) !important; line-height: 1.45 !important; }
.elementor .js-creme.e-con { background: var(--js-creme); color: #000; }
.elementor .js-creme .js-label .elementor-heading-title { color: var(--js-magenta-donker) !important; }
.elementor .js-creme.e-con > .js-tekst.elementor-widget { margin: 1.2rem 0 0; }
.elementor .js-footer > .elementor-element, .elementor .js-magenta > .elementor-element { margin: 0; }
.elementor .js-creme .js-knop-lijn .elementor-button { color: #000 !important; }
.elementor .js-creme .js-knop-lijn .elementor-button:hover { background: #000 !important; border-color: #000 !important; color: var(--js-creme) !important; }

.elementor .js-footer.e-con { display: flex; flex-flow: row wrap; align-items: center; gap: 1.2rem 2.4rem; padding: 2.4rem var(--js-marge); background: #000; color: var(--js-creme); border-top: 1px solid rgba(254, 237, 215, .35); font-size: .98rem; }
.elementor .js-footer > .elementor-element { width: auto; flex: 0 0 auto; }
.elementor .js-footer-logo img { display: block; width: 4.5rem; height: auto; }
.elementor .js-footer .js-rechts { margin-left: auto; }

/* ---------- Animatie, niet in de Elementor-editor ---------- */
.js-w { display: inline-block; animation: js-plop .55s cubic-bezier(.3, 1.55, .5, 1) both; animation-delay: calc(.45s + var(--i) * .11s); }
body:not(.elementor-editor-active) .js-hero-logo { animation: js-spring .8s cubic-bezier(.3, 1.5, .5, 1) both; }
body:not(.elementor-editor-active) .js-hero .js-label { animation: js-omhoog .5s ease-out .35s both; }
body:not(.elementor-editor-active) .js-golf .elementor-heading-title::after { animation: js-uittrekken .7s cubic-bezier(.2, .9, .3, 1) 1s both; }
body:not(.elementor-editor-active) .js-hero .js-tekst { animation: js-omhoog .55s ease-out 1.15s both; }
body:not(.elementor-editor-active) .js-hero .js-knoppen { animation: js-omhoog .55s ease-out 1.28s both; }

@keyframes js-plop { from { opacity: 0; transform: translateY(.55em); } to { opacity: 1; transform: none; } }
@keyframes js-omhoog { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes js-spring { from { opacity: 0; transform: scale(.82) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes js-uittrekken { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Mobiel ---------- */
@media (max-width: 860px) {
  .elementor .js-hero.e-con { flex-flow: column nowrap; align-items: flex-start; min-height: 0; padding-top: 1.6rem; padding-bottom: 3.2rem; }
  .elementor .js-hero-tekst.e-con { display: contents; }
  .elementor .js-hero-tekst.e-con > .js-hero-logo.elementor-widget { order: 1; position: relative; z-index: 2; margin: 0 0 -1.5rem -.3rem; }
  .elementor .js-hero-logo img { width: min(68vw, 19rem); }
  .elementor .js-hero.e-con > .js-hero-foto.elementor-element { order: 2; position: relative; inset: auto; width: calc(100% + 2 * var(--js-marge)); margin-inline: calc(-1 * var(--js-marge)); height: 62vw; max-height: 26rem; }
  .elementor .js-hero-foto img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 42%, #000 62%, transparent 100%); }
  .elementor .js-hero-tekst > .elementor-element:not(.js-hero-logo) { order: 3; position: relative; z-index: 1; width: 100%; }
  .elementor .js-h1 .elementor-heading-title { font-size: clamp(3rem, 15vw, 5rem) !important; }
  .elementor .js-magenta.e-con { grid-template-columns: minmax(0, 1fr); }
  .elementor .js-footer .js-rechts { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
  .elementor .js-knoppen > .elementor-element, .elementor .js-knop .elementor-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .js-w, body:not(.elementor-editor-active) .js-hero-logo, body:not(.elementor-editor-active) .js-hero .js-label, body:not(.elementor-editor-active) .js-golf .elementor-heading-title::after, body:not(.elementor-editor-active) .js-hero .js-tekst, body:not(.elementor-editor-active) .js-hero .js-knoppen { animation: none; }
  .elementor .js-knop .elementor-button { transition: none; }
}