/*
Theme Name: Performance Point
Theme URI: https://www.performancepoint.nl/
Author: Performance Point
Description: Zakelijke block theme voor Performance Point (banden & velgen, CNC velgreparatie).
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: performance-point
*/
/* Header sticky & nette navigatie */
header.wp-block-template-part{position:sticky;top:0;z-index:50;background:#F8FAFC}
.wp-block-navigation .wp-block-navigation__container{gap:24px}
.wp-block-navigation a{padding:8px 6px}

/* Buttons */
.wp-block-button__link{padding:12px 18px;border-radius:999px;text-decoration:none}
.wp-block-button__link:hover{filter:brightness(.95)}

/* Cards */
.pp-card{background:#fff;border:1px solid #E5E7EB;border-radius:16px;box-shadow:0 6px 20px rgba(15,23,42,.06)}
.pp-hero p{max-width:780px}

/* Kleinere tweaks */
.alignwide{max-width:1280px}
.pp-header{
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid rgba(229,231,235,.8);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.pp-scrolled .pp-header{
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

.wp-block-navigation .wp-block-navigation__container{ gap: 20px }
.wp-block-navigation a{
  padding: 10px 8px; border-radius: 8px; text-decoration: none;
}
.wp-block-navigation a:hover{ background: #F8FAFC }

/* ===== Premium dark styling ===== */
:root { --pp-gold: #C9A227; }

body { font-family: Poppins, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

/* Header glas + sticky */
.pp-header{
  position: sticky; top:0; z-index:80;
  background: rgba(11,11,15,.78);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--wp--preset--color--border);
  transition: background .2s ease, box-shadow .2s ease;
}
body.pp-scrolled .pp-header{ box-shadow:0 12px 28px rgba(0,0,0,.25) }
.wp-block-navigation .wp-block-navigation__container{ gap:24px }
.wp-block-navigation a{ text-transform:uppercase; letter-spacing:.06em; padding:10px 8px; border-radius:6px; text-decoration:none }
.wp-block-navigation a:hover{ background:rgba(255,255,255,.06) }

/* Hero met video background en overlay */
.pp-hero{ position:relative; min-height:72vh; overflow:hidden; border-bottom:1px solid var(--wp--preset--color--border) }
.pp-hero-media, .pp-hero-media .pp-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.pp-hero:after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 100%),
    radial-gradient(600px 400px at 15% -10%, rgba(201,162,39,.20), transparent 60%);
  pointer-events:none;
}
.pp-hero-inner{ position:relative; padding:96px 0 56px; }
.pp-hero-inner h1{ margin-bottom:12px }
.pp-hero-inner p{ color: var(--wp--preset--color--muted); max-width:760px }

/* Cards */
.pp-card{
  background: var(--wp--preset--color--surface);
  border:1px solid var(--wp--preset--color--border);
  border-top:3px solid var(--pp-gold);
  border-radius:16px; box-shadow:0 12px 26px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pp-card:hover{ transform: translateY(-3px); box-shadow:0 18px 36px rgba(0,0,0,.35) }

/* Buttons */
.wp-block-button__link{ padding:12px 18px; border-radius:999px; font-weight:600 }
.is-style-outline .wp-block-button__link{
  color: var(--wp--preset--color--text) !important; border:1px solid var(--wp--preset--color--border) !important;
  background: transparent !important; box-shadow:none;
}

/* Footer */
.has-surface-background-color { color: var(--wp--preset--color--text); }
.has-surface-background-color a{ color: var(--wp--preset--color--text); }

/* WhatsApp floating */
.pp-whatsapp{
  position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px;
  border-radius: 50%; background:#25D366; color:#0B0B0F;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(0,0,0,.35); z-index:9999;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pp-whatsapp:hover{ transform: translateY(-2px); box-shadow:0 18px 36px rgba(0,0,0,.45) }

/* Breedteten */

/* Center & padding fix voor brede containers */
:where(.alignwide),
:where(.wp-block-group.alignwide),
:where(.wp-block-columns.alignwide){
  max-width: 1320px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 3vw, 24px);
  padding-right: clamp(16px, 3vw, 24px);
}

/* Zorg dat alle niet-full-width blokken netjes centreren onder een full-width sectie */
.wp-site-blocks > *:not(.alignfull){
  margin-left: auto;
  margin-right: auto;
}

/* Cosmetisch: mooiere kolomafstand en gelijke hoogte cards */
.wp-block-columns{ gap: clamp(18px, 2.5vw, 26px); }
.pp-card{ height: 100%; }


@media (prefers-reduced-motion: reduce){
  .pp-hero-video{ display:none !important; }
  .pp-hero{ 
    background: #0B0B0F url('/wp-content/themes/performance-point/assets/hero.jpg') center/cover no-repeat;
  }
}
/* ===== Brand logos strip ===== */
.pp-brands{ padding: 24px 0; border-top:1px solid var(--wp--preset--color--border); border-bottom:1px solid var(--wp--preset--color--border); }
.pp-brands h3{ margin-bottom: 14px; }

.pp-brands-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(6, minmax(120px,1fr));
  align-items: center; justify-items: center;
}
@media (max-width: 1024px){ .pp-brands-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px){ .pp-brands-grid{ grid-template-columns: repeat(3, 1fr); } }

.pp-brands-grid img{
  max-height: 42px; width: auto;
  filter: grayscale(100%) contrast(1.05) brightness(1.1); /* grijs op donker */
  opacity: .9;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
.pp-brands-grid img:hover{ filter:none; opacity:1; transform: translateY(-2px); }

}

/* ===== Brands — premium marquee ===== */
.pp-brands{ padding: 26px 0; border-top:1px solid var(--wp--preset--color--border); border-bottom:1px solid var(--wp--preset--color--border); }
.pp-brands-title{ margin-bottom: 14px; }

.pp-brands-marquee{ overflow:hidden; }
.pp-brands-marquee .pp-track{
  display:flex; align-items:center; gap:46px;
  /* snelheid aanpassen via duur (kleiner = sneller) */
  animation: pp-marquee 28s linear infinite;
  will-change: transform;
}
@keyframes pp-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* omdat Set A + Set B exact gelijk zijn */
}

/* Logo’s zelf */
.pp-brands-marquee img{
  max-height: 44px; width:auto;
  filter: grayscale(100%) contrast(1.05) brightness(1.08);
  opacity: .9; transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.pp-brands-marquee img:hover{ transform: translateY(-2px); filter:none; opacity:1; }

/* Pauzeer op hover */
.pp-brands-marquee:hover .pp-track{ animation-play-state: paused; }

/* Respecteer reduce motion → toon grid zonder animatie */
@media (prefers-reduced-motion: reduce){
  .pp-brands--marquee .pp-brands-marquee .pp-track{ animation:none; flex-wrap:wrap; gap:28px; }
}

/* Mobiel: iets meer ruimte */
@media (max-width: 640px){
  .pp-brands-marquee .pp-track{ gap: 28px; }
  .pp-brands-marquee img{ max-height: 36px; }
}

/* --- HERO: beter leesbaar --- */

/* video iets donkerder */
.pp-hero-video{
  filter: brightness(.55) saturate(.95);
}

/* zwaardere overlay over de video */
.pp-hero:after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.72) 100%),
    radial-gradient(680px 460px at 18% -8%, rgba(201,162,39,.18), transparent 60%);
}

/* “glass” plaat achter de kop + tekst */
.pp-hero-inner{
  position:relative; padding-top:110px; padding-bottom:56px;
  max-width: 1100px;
}
.pp-hero-inner::before{
  content:""; position:absolute; inset:-18px -22px;
  background: rgba(11,11,15,.42);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: -1;
}

/* extra contrast via schaduw op tekst */
.pp-hero-inner h1,
.pp-hero-inner p{
  text-shadow: 0 10px 28px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.55);
}

/* knoppen duidelijker op donker */
.pp-hero .wp-block-button.is-style-outline .wp-block-button__link{
  color: #EAEAF0 !important;
  border-color: rgba(255,255,255,.65) !important;
  background: rgba(255,255,255,.06) !important;
}
.pp-hero .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background: rgba(255,255,255,.12) !important;
}

/* mobiel iets compacter */
@media (max-width: 782px){
  .pp-hero-inner{ padding-top:84px; padding-bottom:40px; }
  .pp-hero-inner::before{ inset:-12px -14px; border-radius:16px; }
}
/* --- Header fix: donker bij scrollen + leesbare menu's --- */
.pp-header{
  background: rgba(11,11,15,.78);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
body.pp-scrolled .pp-header{                 /* was wit; nu ook donker */
  background: rgba(11,11,15,.88);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/* Menutekst altijd zichtbaar op de header */
.pp-header .wp-block-navigation a,
.pp-header .wp-block-site-title a,
.pp-header .wp-block-site-title{
  color: var(--wp--preset--color--text) !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* Mobiel overlaymenu ook donker */
.wp-block-navigation__responsive-container.is-menu-open{
  background: rgba(11,11,15,.98) !important;
}

/* CTA-knop in header goed contrast */
.pp-header .wp-block-button__link{ color:#0B0B0F; }
.pp-header .wp-block-button.is-style-outline .wp-block-button__link{
  color: var(--wp--preset--color--text) !important;
  border-color: rgba(255,255,255,.6) !important;
  background: rgba(255,255,255,.06) !important;
}
/* ===== WhatsApp FAB – premium ===== */
.pp-whatsapp{
  position: fixed;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 60px; height: 60px;
  border-radius: 20px;            /* iets ronder dan 50% → moderner */
  background: #25D366;            /* WhatsApp groen */
  color: #0B0B0F;                 /* iconkleur */
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 32px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.25);
  border: 1px solid rgba(0,0,0,.25);
  z-index: 9999;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.pp-whatsapp:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* Pulsende gloed (niet op reduce-motion) */
.pp-whatsapp::before{
  content: ""; position: absolute; inset: -10px;
  border-radius: 24px;
  background: radial-gradient(closest-side, rgba(37,211,102,.45), transparent 70%);
  animation: pp-wa-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes pp-wa-pulse{
  0% { transform: scale(.9); opacity: .55; }
  70%{ transform: scale(1.15); opacity: 0; }
  100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .pp-whatsapp::before{ display:none }
  .pp-whatsapp{ transition: none }
}

/* Tooltip op hover (desktop) */
.pp-whatsapp::after{
  content: "WhatsApp";
  position: absolute; right: 74px; bottom: 50%;
  transform: translateY(50%);
  background: rgba(11,11,15,.94);
  color: #EAEAF0; border: 1px solid var(--wp--preset--color--border, #1E2230);
  padding: 8px 10px; border-radius: 10px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.pp-whatsapp:hover::after{ opacity: 1; }
@media (max-width: 800px){ .pp-whatsapp::after{ display:none } } /* geen tooltip op mobiel */

/* Iets kleiner op kleine schermen */
@media (max-width: 420px){
  .pp-whatsapp{ width: 56px; height: 56px; border-radius: 18px; }
}