/*
Theme Name: Syndethó (Static-to-WP)
Theme URI: https://syndetho.com
Author: Syndethó
Author URI: https://syndetho.com
Description: WordPress theme gebaseerd op de aangeleverde single-page HTML (home). Inclusief sticky header, secties en logo-ticker.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: syndetho
Tags: one-column, custom-logo, custom-menu, accessibility-ready
*/

/* Fonts
   - Poppins wordt via Google Fonts geladen (enqueue in functions.php)
   - Funnel Display: plaats je webfonts in /assets/fonts en pas de @font-face bronnen aan.
*/
@font-face{
  font-family:"Funnel Display Bold";
  src:
    url("assets/fonts/FunnelDisplay-Bold.woff2") format("woff2"),
    url("assets/fonts/FunnelDisplay-Bold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
   /* Huisstijlkleuren (handboek) */
   --c-black:#000000;
   --c-blue:#1742AD;
   --c-cta:#A0E06E;
   --c-bg:#F2F5F9;

   /* Typografie */
   --font-heading: "Funnel Display Bold", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   --font-body: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

   /* Layout */
   --radius: 18px;
   --shadow: 0 18px 60px rgba(0,0,0,.10);
   --shadow-soft: 0 10px 30px rgba(0,0,0,.08);
   --max: 1120px;
    }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--c-black);
  background: linear-gradient(180deg, #fff 0%, var(--c-bg) 65%, #fff 100%);
  line-height:1.55;
}
a{ color:inherit; text-decoration:none; }
a:focus, button:focus, input:focus, textarea:focus{
  outline:3px solid rgba(160,224,110,.55);
  outline-offset:2px;
}

.container{ max-width:var(--max); margin:0 auto; padding:0 22px; }

.pill{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px; border-radius:999px;
  background:rgba(23,66,173,.08);
  color:var(--c-blue); font-weight:500; font-size:13px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px; border:1px solid transparent;
  font-weight:600; cursor:pointer;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  user-select:none;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background:var(--c-cta);
  color:var(--c-black);
  box-shadow: 0 10px 24px rgba(160,224,110,.35);
}
.btn-primary:hover{ box-shadow: 0 14px 30px rgba(160,224,110,.45); }
.btn-ghost{
  background:transparent;
  border-color: rgba(0,0,0,.14);
}
.btn-ghost:hover{ background: rgba(0,0,0,.03); }



.wp-block-button btn btn-ghost .wp-block-button__link:hover{
  background: rgba(0,0,0,.03) !important;
}

.wp-block-button.btn-primary .wp-block-button__link{
  background: var(--c-cta) !important;
  color: var(--c-black) !important;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 10px 24px rgba(160,224,110,.35);
}


/* Gelijke hoogte cards in Gutenberg columns */
.wp-block-columns.grid-2 { align-items: stretch; }
.wp-block-columns.grid-2 > .wp-block-column { display: flex; }
.wp-block-columns.grid-2 > .wp-block-column > .card { width: 100%; }


/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:18px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:700;
  letter-spacing:.2px;
}
.brand img{ width:34px; height:34px; }
.brand img.custom-logo{
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain;
}
.brand span{ font-size:16px; text-transform:lowercase; }
.menu{
  display:flex; gap:18px; align-items:center;
  font-size:14px;
}

/* Header logo (WordPress custom logo) kleiner maken */
/* Block theme: Site Logo block */
.wp-block-site-logo img {
  width: 160px;   /* pas aan */
  height: auto;
}

/* Klassiek thema: custom logo */
.custom-logo {
  max-height: 48px;  /* pas aan */
  width: auto;
}


.menu a{ padding:8px 10px; border-radius:10px; }
.menu a:hover{ background: rgba(23,66,173,.06); }
.nav-cta{ display:flex; gap:10px; align-items:center; }




/* Hero */
.hero{
  position:relative;
  padding:52px 0 30px;
  overflow:scroll;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:26px;
  align-items:stretch;
}
.hero h1{
  font-family:var(--font-heading);
  color:var(--c-blue);
  font-size: clamp(34px, 4.2vw, 54px);
  line-height:1.05;
  margin:14px 0 14px;
  letter-spacing:-.6px;
}
.hero p{
  font-size:16px;
  margin:0 0 18px;
  max-width: 62ch;
}
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.hero-card{
  background: radial-gradient(100% 120% at 30% 10%, rgba(23,66,173,.15) 0%, rgba(255,255,255,1) 45%, rgba(242,245,249,1) 100%);
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding:18px;
  position:relative;
  overflow:scroll;
  min-height: 240px;
}
.hero-card .stat{
  display:grid;
  gap:10px;
  margin-top: 8px;
}

/* 1) Maak de hero-card een flex container met een maximale hoogte */
.hero .hero-card{
  display: flex;
  flex-direction: column;
  /* kies een hoogte die past; 70vh is vaak prettig */
  max-height: 80vh;
  overflow: hidden; /* voorkomt dat inhoud buiten de kaart groeit */
}

/* 2) Laat alleen de lijst met items scrollen */
.hero .hero-card .stat{
  overflow-y: auto;
  min-height: 0;          /* cruciaal bij flex, anders werkt scroll soms niet */
  padding-right: 10px;    /* ruimte voor scrollbar */
  overscroll-behavior: contain;
}

/* 3) Op mobiel (kolommen stapelen) meestal géén interne scroll */
@media (max-width: 781px){
  .hero .hero-card{ max-height: none; }
  .hero .hero-card .stat{ overflow: visible; }
}


/* Slider */
.slider{
  position:relative;
  padding:52px 0 30px;
 }
.slider-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:26px;
  align-items:stretch;
}
.slider h1{
  font-family:var(--font-heading);
  color:var(--c-blue);
  font-size: clamp(34px, 4.2vw, 54px);
  line-height:1.05;
  margin:14px 0 14px;
  letter-spacing:-.6px;
}
.slider p{
  font-size:16px;
  margin:0 0 18px;
  max-width: 62ch;
}
.slider-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.slider-card{
  background: radial-gradient(100% 120% at 30% 10%, rgba(23,66,173,.15) 0%, rgba(255,255,255,1) 45%, rgba(242,245,249,1) 100%);
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding:18px;
  position:relative;
  min-height: 240px;
}
.slider-card .stat{
  display:grid;
  gap:10px;
  margin-top: 8px;
}

/* 1) Maak de hero-card een flex container met een maximale hoogte */
.slider .slider-card{
  display: flex;
  flex-direction: column;
  /* kies een hoogte die past; 70vh is vaak prettig */
  max-height: 70vh;
  overflow: hidden; /* voorkomt dat inhoud buiten de kaart groeit */
}

/* 3) Op mobiel (kolommen stapelen) meestal géén interne scroll */
@media (max-width: 781px){
  .slider .slider-card{ max-height: none; }
  .slider .slider-card .stat{ overflow: visible; }
}


.stat-item{
  padding:12px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
}
.stat-item strong{ display:block; font-size:18px; color:var(--c-blue); }
.stat-item span{ font-size:13px; color:rgba(0,0,0,.7); }

/* Sections */
section{ padding:52px 0; }
.section-title{
  font-family:var(--font-heading);
  color:var(--c-blue);
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing:-.3px;
  margin:0 0 10px;
}
.section-lead{
  margin:0 0 22px;
  color:rgba(0,0,0,.78);
  max-width: 78ch;
}

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow-soft);
}
.card h3{
  margin:0 0 8px;
  font-family:var(--font-heading);
  color:var(--c-black);
  font-size:18px;
  letter-spacing:-.2px;
}
.card p{ margin:0; color:rgba(0,0,0,.76); font-size:14px; }

p.extra-space {
  margin-bottom: 1em;
}

.list{ margin:10px 0 0; padding:0 0 0 18px; }
.list li{ margin:6px 0; color:rgba(0,0,0,.78); font-size:14px; }


.quote{
  border-left:4px solid var(--c-blue);
  padding:12px 14px;
  background: rgba(23,66,173,.06);
  border-radius: 12px;
  margin-top: 14px;
}
.quote p{ margin:0; font-style:italic; }
.quote small{ display:block; margin-top:8px; color:rgba(0,0,0,.65); }

/* Process steps */
.steps{ display:grid; gap:12px; }
.step{
  display:grid;
  grid-template-columns: 54px 1fr;
  gap:14px;
  padding:14px;
  border-radius: 16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
}
.step .nr{
  width:54px; height:54px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff;
  background: var(--c-blue);
  box-shadow: 0 10px 24px rgba(23,66,173,.22);
}
.step h4{ margin:0 0 4px; font-size:16px; }
.step p{ margin:0; color:rgba(0,0,0,.76); font-size:14px; }

/* Contact */
.contact{
  background: linear-gradient(180deg, rgba(242,245,249,1) 0%, rgba(255,255,255,1) 100%);
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
form.syndetho-contact{ display:grid; gap:10px; }
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
label{ font-size:13px; color:rgba(0,0,0,.7); }
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  font-family:inherit;
  font-size:14px;
}
textarea{ min-height:120px; resize:vertical; }

/* Footer */
footer{ padding:28px 0; color:rgba(0,0,0,.68); font-size:13px; }
.footer-grid{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer-grid a{ text-decoration:underline; text-underline-offset: 3px; }

/* ======= Logo ticker (site-wide onderaan content) ======= */
.logo-ticker{
  background: linear-gradient(180deg, rgba(242,245,249,1) 0%, rgba(255,255,255,1) 100%);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 22px 0;
}
.logo-ticker__container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px;
}
.logo-ticker__title{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0,0,0,.70);
}
.logo-ticker__viewport{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 14px 0;
}
.logo-ticker__viewport::before,
.logo-ticker__viewport::after{
  content:"";
  position:absolute;
  top:0;
  width: 90px;
  height:100%;
  z-index: 2;
  pointer-events:none;
}
.logo-ticker__viewport::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.logo-ticker__viewport::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.logo-ticker__track{
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  will-change: transform;
  animation: logo-ticker-scroll var(--logo-ticker-duration, 26s) linear infinite;
  padding: 0 22px;
}
.logo-ticker__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.logo-ticker__item:hover,
.logo-ticker__item:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
.logo-ticker__item img{
  display:block;
  height: 34px;
  width: auto;
  max-width: 160px;
}
.logo-ticker__viewport:hover 
.logo-ticker__track,
.logo-ticker__viewport:focus-within 
.logo-ticker__track{
  animation-play-state: paused;
}
@keyframes logo-ticker-scroll{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .logo-ticker__track{ animation: none; }
}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .menu{ display:none; } /* MVP; later hamburger-menu */
}