/*
Theme Name: Start2Skate Child
Theme URI: https://start2skate.be
Description: Child theme voor Start2Skate — leren schaatsen bij SkateWorld (ijsbaan Leuven). Zelfde structuur als SkateWorld, met een frissere en toegankelijkere huisstijl voor absolute beginners. Gebouwd op Hello Elementor.
Author: Diginess
Template: hello-elementor
Version: 1.0.0
Text Domain: start2skate-child
*/

:root{
  /* Huisstijl-tokens — frisser/vriendelijker dan SkateWorld, zelfde familie.
     Alle combinaties hieronder zijn gecontroleerd op WCAG AA-contrast. */
  --s2s-blue:        #0B6AB4;  /* primair — knoppen & links (5.6:1 op wit) */
  --s2s-blue-bright: #0E9AE8;  /* helder accent — hover, decoratie */
  --s2s-ink:         #12304D;  /* koppen & donkere vlakken (13.5:1 op wit) */
  --s2s-body:        #3A4A5C;  /* bodytekst (9.1:1 op wit) */
  --s2s-sky:         #EAF6FF;  /* licht ijsblauw vlak */
  --s2s-cream:       #FFF7F0;  /* warm vlak — zorgt voor de zachtere toon */
  --s2s-coral:       #FF7A59;  /* speels accent — vulling, met inkt-tekst */
  --s2s-coral-ink:   #C4441F;  /* coral als tekst op wit (5.0:1) */
  --s2s-white:       #FFFFFF;
  --s2s-radius:      14px;     /* ronder dan SkateWorld = vriendelijker */
  --s2s-maxw:        1200px;
}

/* Toegankelijke, zichtbare focus-states (WCAG) */
a:focus-visible, button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--s2s-blue);
  outline-offset: 2px;
}

/* Vlottere afbeeldingen: nooit horizontaal scrollen op mobiel */
img{ max-width:100%; height:auto; }
html, body{ overflow-x:hidden; }

/* ==========================================================================
   Footer-rij: overschrijft Elementor's --width:100% op elke .e-con
   ========================================================================== */
#s2s-footer-row > .e-con-inner{
  display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:flex-start; gap:32px 40px;
}
#s2s-footer-row > .e-con-inner > .e-con{
  --width:auto; width:auto; flex:1 1 190px; min-width:0;
}
#s2s-footer-row > .e-con-inner > .e-con:first-child{ flex:1.7 1 240px; }
@media (max-width:767px){
  #s2s-footer-row > .e-con-inner > .e-con{ flex-basis:100%; }
}

/* ==========================================================================
   Rijen als CSS-grid (omzeilt Elementor's --width:100% netjes)
   ========================================================================== */
#s2s-grid-trust, #s2s-grid-doelgroep, #s2s-grid-steps,
#s2s-grid-drempel, [id^="s2s-g2-"], [id^="s2s-g3-"], [id^="s2s-g4-"]{ display:grid !important; gap:24px; }

#s2s-grid-trust    { grid-template-columns:repeat(4,1fr); align-items:start; }
#s2s-grid-doelgroep{ grid-template-columns:repeat(2,1fr); align-items:stretch; }
#s2s-grid-steps    { grid-template-columns:repeat(3,1fr); align-items:stretch; }
#s2s-grid-drempel  { grid-template-columns:repeat(3,1fr); align-items:stretch; }

/* kaarten vullen hun cel */
#s2s-grid-doelgroep > .e-con,
#s2s-grid-steps     > .e-con,
#s2s-grid-drempel   > .e-con{ --width:auto; width:auto; height:100%; }

@media (max-width:1024px){
  #s2s-grid-steps, #s2s-grid-trust, #s2s-grid-drempel{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  #s2s-grid-doelgroep, #s2s-grid-steps, #s2s-grid-drempel{ grid-template-columns:1fr; }
  #s2s-grid-trust{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   Herbruikbare rijen voor subpagina's.

   LET OP — waarom ID-prefixen en geen CSS-klassen:
   Elementor rendert "CSS Classes" wél op widgets, maar NIET op containers.
   Een container-ID wordt wél uitgeschreven. Daarom krijgt elke rij een uniek
   ID met een vaste prefix (s2s-g3-1, s2s-g3-2, …) en selecteren we op prefix.
   Zo kan dezelfde rijsoort meermaals op één pagina voorkomen.
   ========================================================================== */
[id^="s2s-g2-"], [id^="s2s-g3-"], [id^="s2s-g4-"]{ display:grid !important; gap:24px; }
[id^="s2s-g2-"]{ grid-template-columns:repeat(2,1fr); align-items:stretch; }
[id^="s2s-g3-"]{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
[id^="s2s-g4-"]{ grid-template-columns:repeat(4,1fr); align-items:start; }
[id^="s2s-g2-"] > .e-con, [id^="s2s-g3-"] > .e-con, [id^="s2s-g4-"] > .e-con{
  --width:auto; width:auto; height:100%;
  overflow:hidden; transition: transform .25s ease, box-shadow .25s ease;
}
[id^="s2s-g2-"] > .e-con:hover, [id^="s2s-g3-"] > .e-con:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(18,48,77,.16) !important;
}
@media (max-width:1024px){ [id^="s2s-g3-"], [id^="s2s-g4-"]{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){
  [id^="s2s-g2-"], [id^="s2s-g3-"]{ grid-template-columns:1fr; }
  [id^="s2s-g4-"]{ grid-template-columns:repeat(2,1fr); }
}

/* Knoprijen: knoppen naast elkaar en gecentreerd i.p.v. volle breedte */
[id^="s2s-btnrow-"]{ justify-content:center !important; }
[id^="s2s-btnrow-"] > .e-con{ --width:auto; width:auto; flex:0 0 auto; }
@media (max-width:767px){ [id^="s2s-btnrow-"] > .e-con{ flex:1 1 100% !important; } }

/* Knop-groepen gecentreerd als groep i.p.v. uit elkaar geduwd */
#s2s-hero-btns{ justify-content:center; }
#s2s-hero-btns > .e-con{ --width:auto; width:auto; flex:0 0 auto; }

/* ==========================================================================
   Sectie-achtergronden — meer wit, warme vlakken als rustpunt
   Elke sectie heeft een BUITENSTE (#s2s-sec-x) en BINNENSTE (> .e-con)
   container; we stylen beide zodat de kleur altijd pakt.
   ========================================================================== */
#s2s-sec-hero > .e-con{ background-color:transparent !important; background-image:none !important; }

#s2s-sec-hero{
  background-image:
    linear-gradient(180deg, rgba(18,48,77,.72) 0%, rgba(18,48,77,.60) 55%, rgba(18,48,77,.78) 100%),
    url("/wp-content/uploads/2026/07/hero-ijsbaan-desktop.webp") !important;
  background-size: cover !important;
  background-position: center 42% !important;
  background-repeat: no-repeat !important;
}
@media (max-width:767px){
  #s2s-sec-hero{
    background-image:
      linear-gradient(180deg, rgba(18,48,77,.72) 0%, rgba(18,48,77,.60) 55%, rgba(18,48,77,.80) 100%),
      url("/wp-content/uploads/2026/07/hero-ijsbaan-mobiel.webp") !important;
  }
}

#s2s-sec-trust,     #s2s-sec-trust     > .e-con{ background-color:var(--s2s-white) !important; background-image:none !important; }
#s2s-sec-drempel,   #s2s-sec-drempel   > .e-con{ background-color:var(--s2s-cream) !important; background-image:none !important; }
#s2s-sec-doelgroep, #s2s-sec-doelgroep > .e-con{ background-color:var(--s2s-white) !important; background-image:none !important; }
#s2s-sec-steps,     #s2s-sec-steps     > .e-con{ background-color:var(--s2s-sky) !important; background-image:none !important; }
#s2s-sec-prijs,     #s2s-sec-prijs     > .e-con{ background-color:var(--s2s-white) !important; background-image:none !important; }
#s2s-sec-praktisch, #s2s-sec-praktisch > .e-con{ background-color:var(--s2s-cream) !important; background-image:none !important; }
#s2s-sec-faq,       #s2s-sec-faq       > .e-con{ background-color:var(--s2s-white) !important; background-image:none !important; }
#s2s-sec-cta,       #s2s-sec-cta       > .e-con{
  background-color:var(--s2s-ink) !important;
  background-image:linear-gradient(135deg,#12304D 0%,#0B6AB4 100%) !important;
}
/* Subpagina-hero: rustig, licht — geen zware fotokop op elke pagina */
#s2s-sec-pagehero, #s2s-sec-pagehero > .e-con{
  background-color:var(--s2s-sky) !important;
  background-image:linear-gradient(160deg,#EAF6FF 0%,#FFFFFF 100%) !important;
}

/* ==========================================================================
   Kaarten — zachte schaduw, ronde hoeken, hover-lift
   ========================================================================== */
#s2s-grid-doelgroep > .e-con,
#s2s-grid-steps > .e-con,
#s2s-grid-drempel > .e-con,
[id^="s2s-g2-"] > .e-con, [id^="s2s-g3-"] > .e-con{
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
#s2s-grid-doelgroep > .e-con:hover,
[id^="s2s-g2-"] > .e-con:hover, [id^="s2s-g3-"] > .e-con:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(18,48,77,.16) !important;
}

/* Foto-kaarten: beeld bovenaan (bijgesneden), tekst eronder */
#s2s-grid-doelgroep .elementor-widget-image img,
[id^="s2s-g2-"] .elementor-widget-image img,
[id^="s2s-g3-"] .elementor-widget-image img{
  width:100% !important; height:215px; object-fit:cover; display:block; border-radius:0;
}
#s2s-grid-doelgroep .elementor-widget-image,
[id^="s2s-g2-"] .elementor-widget-image,
[id^="s2s-g3-"] .elementor-widget-image{ line-height:0; }
/* wrappers block-level: anders heeft width:100% op de <img> geen referentie */
#s2s-grid-doelgroep .elementor-widget-image a, #s2s-grid-doelgroep .elementor-widget-image figure,
[id^="s2s-g2-"] .elementor-widget-image a, [id^="s2s-g2-"] .elementor-widget-image figure,
[id^="s2s-g3-"] .elementor-widget-image a, [id^="s2s-g3-"] .elementor-widget-image figure,
#s2s-grid-doelgroep .elementor-widget-image .elementor-widget-container,
[id^="s2s-g2-"] .elementor-widget-image .elementor-widget-container,
[id^="s2s-g3-"] .elementor-widget-image .elementor-widget-container{
  display:block !important; width:100% !important; margin:0 !important;
}
@media (max-width:767px){
  #s2s-grid-doelgroep .elementor-widget-image img,
  [id^="s2s-g2-"] .elementor-widget-image img,
  [id^="s2s-g3-"] .elementor-widget-image img{ height:190px; }
}

/* ==========================================================================
   Stapnummers — speels coral rondje i.p.v. een kaal cijfer
   ========================================================================== */
.s2s-step-num .elementor-heading-title{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--s2s-coral); color:var(--s2s-ink) !important;
  font-size:22px !important; line-height:1 !important;
}

/* Eyebrow-labels boven koppen */
.s2s-eyebrow .elementor-heading-title{
  display:inline-block; letter-spacing:1.2px; text-transform:uppercase;
}

/* ==========================================================================
   Wordmark — echte tekst i.p.v. een afbeelding: altijd scherp, schaalt mee,
   leesbaar voor screenreaders en zoekmachines. De "2" is het speelse accent.
   ========================================================================== */
.s2s-logo .elementor-heading-title{
  font-family:Poppins, sans-serif; font-weight:700; letter-spacing:-.5px;
  line-height:1; margin:0;
}
.s2s-logo .elementor-heading-title a{ color:inherit; text-decoration:none; }
.s2s-logo-2{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.15em; height:1.15em; margin:0 .06em; border-radius:50%;
  background:var(--s2s-coral); color:var(--s2s-ink);
  font-size:.82em; transform:translateY(.04em);
}

/* ==========================================================================
   Prijstabellen (HTML-tabellen in tekstwidgets)
   ========================================================================== */
.elementor-widget-text-editor table{
  width:100%; border-collapse:collapse; margin:6px 0 4px; background:#fff;
  border-radius:var(--s2s-radius); overflow:hidden; box-shadow:0 4px 18px rgba(18,48,77,.07);
}
.elementor-widget-text-editor th,
.elementor-widget-text-editor td{
  padding:13px 16px; border-bottom:1px solid #E6EEF8; text-align:left;
  font-size:16px; line-height:1.45; vertical-align:top;
}
.elementor-widget-text-editor th{
  background:var(--s2s-ink); color:#fff; font-weight:700;
  font-family:Poppins, sans-serif; font-size:15px;
}
.elementor-widget-text-editor tr:last-child td{ border-bottom:none; }
.elementor-widget-text-editor td:last-child{
  text-align:right; white-space:nowrap; font-weight:700; color:var(--s2s-ink);
}
.elementor-widget-text-editor tbody tr:nth-child(even) td{ background:#F7FBFF; }
@media (max-width:600px){
  .elementor-widget-text-editor th, .elementor-widget-text-editor td{ padding:10px 12px; font-size:15px; }
}

/* ==========================================================================
   Knoppen — zachte lift op hover
   ========================================================================== */
.elementor-button{ transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease !important; }
.elementor-button:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(11,106,180,.32); }

/* Trust-iconen: lichte hover-zoom */
#s2s-grid-trust .elementor-icon-box-icon{ transition: transform .25s ease; }
#s2s-grid-trust .elementor-widget:hover .elementor-icon-box-icon{ transform: translateY(-4px) scale(1.08); }

/* ==========================================================================
   MOBIEL (<768px) — compacte header, leesbare koppen, volle-breedte knoppen
   ========================================================================== */
@media (max-width:767px){

  /* Header op één rij: logo links, hamburger rechts */
  .elementor-location-header .e-con > .e-con-inner{
    flex-direction:row !important; flex-wrap:nowrap !important;
    justify-content:space-between !important; align-items:center !important;
    gap:8px !important; padding-top:8px !important; padding-bottom:8px !important;
  }
  .elementor-location-header .elementor-widget-theme-site-logo,
  .elementor-location-header .elementor-widget-image{ order:1; flex:0 0 auto !important; width:auto !important; }
  .elementor-location-header .elementor-widget-image img{ width:150px !important; max-width:none !important; }
  /* CTA staat op mobiel in de vaste balk onderaan, niet in de header */
  .elementor-location-header .elementor-widget-button{ display:none !important; }
  .elementor-location-header .elementor-widget-nav-menu{ order:3; flex:0 0 auto; margin-left:auto !important; }
  .elementor-location-header .elementor-menu-toggle{
    display:flex !important; padding:8px !important; font-size:26px !important; color:#fff !important;
  }

  /* eyebrow niet over 2 regels breken */
  .e-con .elementor-widget-heading div{ letter-spacing:.6px !important; font-size:14px !important; }

  /* Koppen schalen naar het scherm */
  .elementor-widget-heading h1{ font-size:29px !important; line-height:1.2 !important; }
  .elementor-widget-heading h2{ font-size:24px !important; line-height:1.25 !important; }
  .elementor-widget-heading h3{ font-size:19px !important; }
  .elementor-widget-text-editor{ font-size:16px !important; }

  /* Knoppen: onder elkaar, volle breedte, groot genoeg om te tikken */
  .elementor-widget-button .elementor-button{
    width:100%; justify-content:center; padding-top:14px !important; padding-bottom:14px !important;
  }
  #s2s-hero-btns{ flex-wrap:wrap !important; }
  #s2s-hero-btns > .e-con{ flex:1 1 100% !important; }

  /* Minder loze ruimte in secties */
  .e-con.e-con-boxed > .e-con-inner{ padding-left:18px !important; padding-right:18px !important; }

  /* Tabellen: meer ruimte voor de omschrijving, smalle prijskolom */
  .elementor-widget-text-editor table{ table-layout:fixed; width:100%; }
  .elementor-widget-text-editor td, .elementor-widget-text-editor th{ word-break:break-word; hyphens:auto; }
  .elementor-widget-text-editor th:first-child,
  .elementor-widget-text-editor td:first-child{ width:64%; }
  .elementor-widget-text-editor th:last-child,
  .elementor-widget-text-editor td:last-child{ width:36%; vertical-align:top; }

  /* Vaste inschrijfbalk onderaan */
  .s2s-mobile-cta{
    display:flex !important; position:fixed; left:12px; right:12px; bottom:12px; z-index:9999;
    align-items:center; justify-content:center;
    background:var(--s2s-blue); color:#fff !important; text-decoration:none;
    font-family:Inter, sans-serif; font-weight:700; font-size:16px;
    padding:15px 18px; border-radius:12px;
    box-shadow:0 10px 28px rgba(18,48,77,.38);
  }
  .s2s-mobile-cta:active{ background:var(--s2s-blue-bright); }
  body{ padding-bottom:80px; } /* zodat de balk niets afdekt */
}

/* Balk enkel op mobiel tonen */
.s2s-mobile-cta{ display:none; }

/* ==========================================================================
   Scroll-reveal — verbergt ALLEEN als JS actief is (html.s2s-js).
   Zonder JS blijft alles zichtbaar.
   ========================================================================== */
html.s2s-js #s2s-grid-trust     > .elementor-widget,
html.s2s-js #s2s-grid-doelgroep > .e-con,
html.s2s-js #s2s-grid-steps     > .e-con,
html.s2s-js #s2s-grid-drempel   > .e-con,
html.s2s-js [id^="s2s-g2-"] > .e-con,
html.s2s-js [id^="s2s-g3-"] > .e-con,
html.s2s-js [id^="s2s-g4-"] > .e-con{
  opacity:0; transform:translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
html.s2s-js #s2s-grid-trust     > .elementor-widget.s2s-in,
html.s2s-js #s2s-grid-doelgroep > .e-con.s2s-in,
html.s2s-js #s2s-grid-steps     > .e-con.s2s-in,
html.s2s-js #s2s-grid-drempel   > .e-con.s2s-in,
html.s2s-js [id^="s2s-g2-"] > .e-con.s2s-in,
html.s2s-js [id^="s2s-g3-"] > .e-con.s2s-in,
html.s2s-js [id^="s2s-g4-"] > .e-con.s2s-in{
  opacity:1; transform:none;
}
html.s2s-js [id^="s2s-g2-"] > .e-con:nth-child(2),
html.s2s-js [id^="s2s-g3-"] > .e-con:nth-child(2),
html.s2s-js [id^="s2s-g4-"] > .e-con:nth-child(2){ transition-delay:.10s; }
html.s2s-js [id^="s2s-g3-"] > .e-con:nth-child(3),
html.s2s-js [id^="s2s-g4-"] > .e-con:nth-child(3){ transition-delay:.20s; }
html.s2s-js [id^="s2s-g4-"] > .e-con:nth-child(4){ transition-delay:.30s; }
/* Zachte stagger binnen elke rij */
html.s2s-js #s2s-grid-trust     > .elementor-widget:nth-child(2),
html.s2s-js #s2s-grid-doelgroep > .e-con:nth-child(2),
html.s2s-js #s2s-grid-steps     > .e-con:nth-child(2),
html.s2s-js #s2s-grid-drempel   > .e-con:nth-child(2){ transition-delay:.10s; }
html.s2s-js #s2s-grid-trust   > .elementor-widget:nth-child(3),
html.s2s-js #s2s-grid-steps   > .e-con:nth-child(3),
html.s2s-js #s2s-grid-drempel > .e-con:nth-child(3){ transition-delay:.20s; }
html.s2s-js #s2s-grid-trust > .elementor-widget:nth-child(4){ transition-delay:.30s; }

/* Respecteer voorkeur voor minder beweging (toegankelijkheid) */
@media (prefers-reduced-motion: reduce){
  #s2s-grid-doelgroep > .e-con, [id^="s2s-g2-"] > .e-con, [id^="s2s-g3-"] > .e-con,
  .elementor-button, #s2s-grid-trust .elementor-icon-box-icon{ transition:none !important; }
  html.s2s-js #s2s-grid-trust > .elementor-widget,
  html.s2s-js #s2s-grid-doelgroep > .e-con,
  html.s2s-js #s2s-grid-steps > .e-con,
  html.s2s-js #s2s-grid-drempel > .e-con,
  html.s2s-js [id^="s2s-g2-"] > .e-con,
  html.s2s-js [id^="s2s-g3-"] > .e-con,
  html.s2s-js [id^="s2s-g4-"] > .e-con{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}