/*
Theme Name: PWH LIVE
Theme URI: https://prowrestlingholland.nl
Author: Pro Wrestling Holland
Description: Maatwerkthema voor Pro Wrestling Holland, gebouwd op de officiele brand guide.
Version: 2.5
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: pwh
*/

/* ============================================================
   PWH® — DESIGN TOKENS
   Rechtstreeks uit de Brand Guide (pagina 04).
   Zwarte basis, gecontroleerde neonaccenten, grote typografie.
   ============================================================ */
:root{
  /* Color palette — brand guide */
  --black:#000000;
  --white:#FFFFFF;
  --magenta:#FF2BC2;
  --cyan:#29E7FF;
  --green:#72FF4A;
  --violet:#5B2DFF;

  /* Werkvarianten */
  --panel:#0B0B0D;
  --panel-2:#141417;
  --line:#26262B;
  --grey:#9B9BA3;
  --grey-2:#D5D5DA;

  /* Typography — brand guide */
  --display:'Anton',Impact,sans-serif;      /* DISPLAY / POSTER */
  --head:'Oswald',sans-serif;               /* HEADERS */
  --body:'Inter',Helvetica,Arial,sans-serif;/* BODY */

  --gut:clamp(16px,4vw,56px);
  --maxw:1440px;
  --navh:136px;
  --navh-sm:76px;
  --hatch:repeating-linear-gradient(115deg,var(--green) 0 3px,transparent 3px 9px);
  --hatch-m:repeating-linear-gradient(115deg,var(--magenta) 0 3px,transparent 3px 9px);
}
@media(max-width:640px){:root{--navh:104px;--navh-sm:68px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
p{max-width:70ch}

/* ---- type ---- */
.d{font-family:var(--display);text-transform:uppercase;line-height:.9;letter-spacing:.005em;font-weight:400}
.d-xl{font-size:clamp(46px,10vw,150px)}
.d-l{font-size:clamp(34px,6vw,86px)}
.d-m{font-size:clamp(26px,3.8vw,50px)}
.d-s{font-size:clamp(19px,2.2vw,30px)}
.h{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.lbl{font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.green{color:var(--green)} .mag{color:var(--magenta)} .cy{color:var(--cyan)} .grey{color:var(--grey)}
.lead{font-size:clamp(17px,1.7vw,20px);line-height:1.55;max-width:62ch;color:var(--grey-2)}

/* skew-accent voor het woord LIVE (brush-script vervangen door de echte logo-asset) */


/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section.block{padding-block:clamp(46px,7vw,100px);border-top:1px solid var(--line)}
.grid{display:grid;gap:1px;background:var(--line)}

/* ---- HUD-frame: de hoekhaken uit de brand guide ---- */
.hud{position:relative;background:var(--panel);border:1px solid var(--line)}
.hud::before,.hud::after{content:"";position:absolute;width:20px;height:20px;pointer-events:none}
.hud::before{top:-1px;left:-1px;border-top:2px solid var(--green);border-left:2px solid var(--green)}
.hud::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--magenta);border-right:2px solid var(--magenta)}

/* ---- hatch-balk ---- */
.hatchbar{height:10px;background:var(--hatch);opacity:.8}

/* ---- knoppen ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:15px 26px;
  border:2px solid var(--green);background:var(--green);color:#000;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.btn:hover{box-shadow:0 0 0 2px #000,0 0 22px rgba(114,255,74,.55);transform:translateY(-2px)}
.btn.mag{background:var(--magenta);border-color:var(--magenta);color:#000}
.btn.mag:hover{box-shadow:0 0 0 2px #000,0 0 22px rgba(255,43,194,.55)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--white)}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:none}
.btn.small{padding:11px 18px;font-size:11px;border-width:2px}
.btn[aria-disabled="true"]{background:transparent;border-color:var(--line);color:var(--grey);pointer-events:none}

/* ---- sectiekop ---- */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.eyebrow .bar{height:8px;flex:1;background:var(--hatch);opacity:.55}
.eyebrow .lbl{color:var(--green);white-space:nowrap}
.eyebrow .idx{font-family:var(--display);font-size:13px;color:var(--magenta)}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{background:var(--green);color:#000;overflow:hidden;white-space:nowrap;border-bottom:2px solid #000}
.ticker__track{display:inline-flex;animation:slide 40s linear infinite}
.ticker span{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:9px 0}
.ticker span::after{content:"////";margin:0 20px;opacity:.45}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:background .3s ease,border-color .3s ease}
/* transparant zolang je bovenaan de homepage staat: de video loopt door achter de balk */
.nav.clear{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.nav.clear .nav__in{text-shadow:0 2px 12px rgba(0,0,0,.6)}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:26px;
  height:var(--navh);transition:height .3s ease}
.nav.solid .nav__in{height:var(--navh-sm)}
/* Het volledige PWH® LIVE beeldmerk. Bovenaan op volle grootte (150 px breed,
   ruim boven het minimum van 140 px uit de brand guide); na het scrollen
   verkleint hij mee met de balk, maar blijft de lockup compleet. */
.logo{display:flex;align-items:center;line-height:1}
.logo img{width:150px;height:auto;display:block;transition:width .3s ease,filter .25s ease}
.nav.solid .logo img{width:94px}
.logo:hover img{filter:drop-shadow(0 0 14px rgba(114,255,74,.5))}
.logo--foot img{width:230px}
@media(max-width:640px){
  .logo img{width:116px}
  .nav.solid .logo img{width:82px}
  .logo--foot img{width:190px}
}
.nav__links{display:flex;gap:24px;margin-left:auto}
.nav__cta{display:flex;gap:8px;margin-left:8px}
.nav__links a.mob{display:none}
.nav__links a{font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.nav__links a:hover{color:var(--white)}
.nav__links a.on{color:var(--white);border-color:var(--green)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:#fff;padding:10px 14px;font-family:var(--head);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:1080px){
  .nav__links{position:fixed;inset:calc(var(--navh-sm) + 36px) 0 auto 0;flex-direction:column;gap:0;background:var(--black);border-bottom:2px solid var(--green);padding:8px var(--gut) 24px;display:none}
  .nav__links.open{display:flex}
  .nav__links a{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
  .burger{display:block}
  .nav__cta{display:none}
  .nav__links a.mob{display:block;color:var(--green)}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:min(94vh,900px);display:flex;align-items:flex-end;overflow:hidden;
  border-bottom:1px solid var(--line);
  margin-top:calc(-1 * var(--navh));padding-top:var(--navh)}
/* valt terug op een neonverloop als de video (nog) niet geladen is */
.hero__media{position:absolute;inset:0;background:
  radial-gradient(80% 60% at 20% 10%,rgba(114,255,74,.13),transparent 60%),
  radial-gradient(70% 60% at 85% 30%,rgba(255,43,194,.16),transparent 62%),#000}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.25) saturate(.9)}
.hero__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.25) 30%,#000 94%),
  radial-gradient(70% 55% at 12% 85%,rgba(114,255,74,.18),transparent 65%),
  radial-gradient(60% 50% at 88% 25%,rgba(255,43,194,.20),transparent 62%)}
.hero__in{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(30px,5vw,62px)}
.flag{display:inline-flex;align-items:center;gap:10px;background:var(--magenta);color:#000;font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:8px 14px;margin-bottom:18px}
.flag .dot{width:7px;height:7px;background:#000;border-radius:50%;animation:pulse 1.5s infinite}
@keyframes pulse{50%{opacity:.2}}
.hero h1{margin:0}
.hero h1 .l1{display:block;color:var(--green);text-shadow:4px 4px 0 var(--magenta)}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin:24px 0 26px;font-family:var(--head);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.hero__meta b{color:var(--white);font-weight:600}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

/* countdown — het STORY COUNTDOWN format uit de guide */
.cd{display:flex;flex-wrap:wrap;gap:1px;margin-top:32px;background:var(--line);border:1px solid var(--line);max-width:560px}
.cd div{background:rgba(0,0,0,.72);padding:14px 20px;min-width:96px;flex:1}
.cd .n{font-family:var(--display);font-size:clamp(30px,4.4vw,48px);line-height:1;color:var(--cyan)}
.cd .l{font-family:var(--head);font-weight:500;font-size:10px;letter-spacing:.2em;color:var(--grey);text-transform:uppercase;margin-top:6px}

/* ============================================================
   SIGNATURE: TICKETSTROOK
   ============================================================ */
.stub{position:relative;display:grid;grid-template-columns:38px 148px 1fr auto;gap:clamp(14px,2.4vw,34px);align-items:center;
  background:var(--panel);padding:clamp(18px,2.6vw,28px) clamp(16px,3vw,32px);transition:background .25s}
.stub:hover{background:var(--panel-2)}
.stub__no{font-family:var(--display);font-size:15px;color:var(--magenta)}
.stub::before{content:"";position:absolute;left:calc(38px + 148px + clamp(6px,1.2vw,16px));top:14px;bottom:14px;width:1px;
  background:repeating-linear-gradient(180deg,var(--line) 0 6px,transparent 6px 12px)}
.stub__date .dd{font-family:var(--display);font-size:clamp(42px,5.2vw,64px);line-height:.84;display:block}
.stub__date .mm{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--green);display:block;margin-top:8px}
.stub__venue{font-family:var(--head);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:8px}
.badge{display:inline-block;font-family:var(--head);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--line);color:var(--grey);margin-bottom:10px}
.badge.hot{border-color:var(--magenta);color:var(--magenta)}
.badge.out{border-color:var(--violet);color:#9c8bff}
@media(max-width:820px){
  .stub{grid-template-columns:1fr;gap:12px}
  .stub::before{display:none}
  .stub__no{display:none}
  .stub__date{display:flex;align-items:baseline;gap:12px}
  .stub__date .mm{margin-top:0}
}

/* ============================================================
   ROSTER
   ============================================================ */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{position:relative;background:var(--panel);aspect-ratio:3/4;overflow:hidden;display:block}
.tile img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:contrast(1.04) saturate(1.05);transition:transform .5s ease}
.tile:hover img{transform:scale(1.06)}
.tile__ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(150deg,#141417,#000);
  color:#2C2C33;font-family:var(--display);font-size:58px}
.tile__grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.96) 92%)}
.tile__name{position:absolute;left:0;right:0;bottom:0;padding:16px 14px}
.tile__name .n{font-family:var(--display);font-size:20px;text-transform:uppercase;line-height:1;transition:color .25s,text-shadow .25s}
.tile:hover .tile__name .n{color:var(--green);text-shadow:2px 2px 0 var(--magenta)}
.tile__name .r{font-family:var(--head);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:6px}
.tile__belt{position:absolute;top:0;left:0;background:var(--cyan);color:#000;font-family:var(--head);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px}
.tile__wipe{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--hatch-m);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.tile:hover .tile__wipe{transform:scaleX(1)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filters button{background:transparent;border:1px solid var(--line);color:var(--grey);font-family:var(--head);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:11px 17px;transition:.2s}
.filters button:hover{color:var(--white);border-color:var(--cyan)}
.filters button.on{background:var(--green);border-color:var(--green);color:#000;font-weight:700}

/* ============================================================
   NIEUWS
   ============================================================ */
.news{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.news article{background:var(--panel);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:12px;transition:background .25s}
.news article:hover{background:var(--panel-2)}
.news .cat{font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.news h3{font-family:var(--display);text-transform:uppercase;font-size:22px;line-height:1.02;margin:0;font-weight:400}
.news time{font-family:var(--head);font-weight:500;font-size:10px;letter-spacing:.16em;color:var(--grey);margin-top:auto}

/* RESULTS CARD — social format uit de guide, hier als webcomponent */
.results{border:1px solid var(--line);background:var(--panel)}
.results h3{font-family:var(--display);font-size:26px;margin:0;padding:18px 22px;border-bottom:1px solid var(--line);color:var(--green);text-transform:uppercase;font-weight:400}
.results .row{display:flex;justify-content:space-between;gap:20px;padding:14px 22px;border-bottom:1px solid var(--line);font-family:var(--head);font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.results .row b{color:var(--magenta);font-weight:700}
.results .row:last-child{border-bottom:none}

/* ============================================================
   TITELS
   ============================================================ */
.titles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.belt{background:var(--panel);padding:30px 24px;position:relative;overflow:hidden}
.belt::after{content:"";position:absolute;right:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(41,231,255,.16),transparent 70%)}
.belt .t{font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.belt .who{font-family:var(--display);text-transform:uppercase;font-size:30px;line-height:1;margin:14px 0 10px}
.belt .since{font-family:var(--head);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* ============================================================
   SPLIT / PROFIEL / MATCH
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.split>div{background:var(--panel);padding:clamp(26px,4vw,52px)}
.split .violet{background:var(--violet)}
@media(max-width:860px){.split{grid-template-columns:1fr}}

.profile{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.profile>div{background:var(--panel)}
.profile__img{aspect-ratio:3/4;overflow:hidden;position:relative}
.profile__img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.profile__body{padding:clamp(24px,3.4vw,44px)}
.tape{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:26px 0}
.tape div{background:var(--panel-2);padding:16px}
.tape .k{font-family:var(--head);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.tape .v{font-family:var(--display);font-size:21px;text-transform:uppercase;margin-top:8px;line-height:1;color:var(--cyan)}
@media(max-width:860px){.profile{grid-template-columns:1fr}}

/* MATCH CARD — social format uit de guide */
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:var(--panel);padding:24px clamp(16px,3vw,30px);text-align:center}
.match .side{font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,2.1vw,26px);line-height:1.02;font-weight:400}
.match .vs{font-family:var(--display);font-style:italic;font-size:22px;color:var(--magenta);transform:skewX(-9deg)}
.match .stip{grid-column:1/-1;font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}

/* formulier */
.field{display:block;margin-bottom:16px}
.field .k{font-family:var(--head);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--white);padding:13px 14px;font-family:var(--body);font-size:15px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green);outline:none}

details{border-bottom:1px solid var(--line);padding:18px 0}
details summary{cursor:pointer;font-family:var(--head);font-weight:600;text-transform:uppercase;font-size:17px;letter-spacing:.04em;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--green);font-family:var(--display)}
details[open] summary::after{content:"–";color:var(--magenta)}
details p{color:var(--grey);margin:12px 0 0}


/* ---- merch / webshop ---- */
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.prod{background:var(--panel);display:flex;flex-direction:column}
.prod__img{aspect-ratio:1;position:relative;overflow:hidden;background:linear-gradient(150deg,#141417,#000);display:grid;place-items:center}
.prod__img::after{content:"";position:absolute;inset:0;background:var(--hatch);opacity:.07}
.prod__img span{font-family:var(--display);font-size:clamp(26px,4vw,40px);color:#26262C;text-transform:uppercase;text-align:center;padding:12px;position:relative}
.prod__body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod__body .n{font-family:var(--display);font-size:19px;text-transform:uppercase;line-height:1.05}
.prod__body .pr{font-family:var(--head);font-weight:700;font-size:15px;color:var(--cyan);letter-spacing:.06em}
.prod__body .btn{margin-top:auto;justify-content:center}


/* ---- titelgeschiedenis ---- */
.reigns{border:1px solid var(--line);background:var(--line);display:grid;gap:1px}
.reign{display:grid;grid-template-columns:44px 1.6fr 104px 104px 1fr;gap:12px;align-items:center;
  background:var(--panel);padding:12px 16px;font-size:14px}
.reign .nr{font-family:var(--display);color:var(--magenta);font-size:15px}
.reign .w{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.reign .pl{color:var(--grey);font-size:13px}
.reign.kop{background:var(--panel-2);font-family:var(--head);font-weight:600;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.reign.nu{background:#0E1409;border-left:3px solid var(--green)}
.reign.nu .w{color:var(--green)}
.reign.vacant{opacity:.45}
@media(max-width:760px){
  .reign{grid-template-columns:36px 1fr;row-gap:2px}
  .reign .pl{display:none}
  .reign.kop{display:none}
  .reign span:nth-child(3),.reign span:nth-child(4){grid-column:2;font-size:12px;color:var(--grey)}
}


/* ---- showarchief ---- */
.reign.arch{grid-template-columns:64px 1.5fr 120px 1.4fr}
.reign.arch .ti{display:flex;flex-direction:column;gap:3px}
.reign.arch .ti em{font-style:normal;font-family:var(--head);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cyan)}
@media(max-width:760px){
  .reign.arch{grid-template-columns:60px 1fr}
  .reign.arch .pl{display:block;grid-column:2;font-size:12px}
  .reign.arch .ti{grid-column:2}
}


/* ---- accordeon ---- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__kop{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;color:var(--white);text-align:left;padding:20px 2px;
  font-family:var(--head);font-weight:600;font-size:17px;letter-spacing:.03em;text-transform:uppercase;
  transition:color .25s ease}
.acc__kop:hover{color:var(--green)}
.acc__item.open .acc__kop{color:var(--green)}
.acc__ico{position:relative;width:16px;height:16px;flex:none}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;background:var(--magenta);
  transition:transform .38s cubic-bezier(.4,0,.2,1),background .25s ease}
.acc__ico::before{top:7px;left:0;width:16px;height:2px}
.acc__ico::after{left:7px;top:0;width:2px;height:16px}
.acc__item.open .acc__ico::after{transform:rotate(90deg) scaleX(0)}
.acc__item.open .acc__ico::before{transform:rotate(180deg);background:var(--green)}
.acc__paneel{height:0;overflow:hidden;opacity:0;
  transition:height .38s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.acc__item.open .acc__paneel{opacity:1}
.acc__inner{padding:0 2px 22px}
.acc__inner p{color:var(--grey);margin:0}
@media(prefers-reduced-motion:reduce){
  .acc__paneel,.acc__ico::before,.acc__ico::after{transition:none}
}


/* ---- PWH TV ---- */
.tv{display:grid;grid-template-columns:1.35fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.tv__thumb{position:relative;display:block;background:var(--panel);overflow:hidden;aspect-ratio:16/9}
.tv__thumb img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.1);transition:filter .35s ease,transform .5s ease}
.tv__thumb:hover img{filter:none;transform:scale(1.04)}
.tv__thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.7))}
.tv__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:78px;height:78px;border:2px solid var(--green);background:rgba(0,0,0,.55);
  display:grid;place-items:center;transition:background .25s ease,box-shadow .25s ease,transform .25s ease}
.tv__play::before{content:"";border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent var(--green);margin-left:5px}
.tv__thumb:hover .tv__play{background:var(--green);transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 0 26px rgba(114,255,74,.45)}
.tv__thumb:hover .tv__play::before{border-left-color:#000}
.tv__badge{position:absolute;top:0;left:0;z-index:2;background:var(--magenta);color:#000;
  font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:6px 11px}
.tv__tekst{background:var(--panel);padding:clamp(24px,3.2vw,40px);display:flex;flex-direction:column;justify-content:center}
@media(max-width:860px){.tv{grid-template-columns:1fr}}


/* ---- fotoraster ---- */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.ft{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--panel);
  border:0;padding:0;display:block;cursor:pointer}
.ft img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) contrast(1.1);
  transition:filter .3s ease,transform .5s ease}
.ft:hover img{filter:none;transform:scale(1.06)}
.ft::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--hatch-m);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.ft:hover::after{transform:scaleX(1)}
.ft--leeg{display:grid;place-items:center;cursor:default;
  background:linear-gradient(150deg,var(--panel-2),#000)}
.ft--leeg::before{content:"";position:absolute;inset:0;background:var(--hatch);opacity:.06}
.ft--leeg span{position:relative;font-family:var(--display);font-size:22px;color:#2C2C33}

/* ---- galerij-overzicht ---- */
.galgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.gal{display:block;background:var(--panel);transition:background .25s ease}
.gal:hover{background:var(--panel-2)}
.gal__beeld{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(150deg,var(--panel-2),#000)}
.gal__beeld::before{content:"";position:absolute;inset:0;background:var(--hatch);opacity:.08}
.gal__aantal{position:absolute;left:0;bottom:0;background:var(--green);color:#000;
  font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:6px 11px}
.gal__tekst{padding:20px}
.gal:hover .d{color:var(--green)}

/* ---- lichtbak ---- */
.lb{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(0,0,0,.94);padding:clamp(16px,4vw,56px)}
.lb.aan{display:grid}
.lb__fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:14px}
.lb__fig img{max-width:100%;max-height:78vh;width:auto;height:auto;
  border:1px solid var(--line);display:block}
.lb__tel{font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey)}
.lb__sluit{position:absolute;top:14px;right:18px;background:none;border:0;color:var(--white);
  font-size:34px;line-height:1;padding:8px;transition:color .2s ease}
.lb__sluit:hover{color:var(--magenta)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);
  border:1px solid var(--line);color:var(--white);font-size:30px;line-height:1;
  width:52px;height:52px;transition:border-color .2s ease,color .2s ease}
.lb__nav:hover{border-color:var(--green);color:var(--green)}
.lb__vorige{left:12px}
.lb__volgende{right:12px}
@media(max-width:640px){
  .lb__nav{width:44px;height:44px;font-size:24px}
  .raster{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}


/* ---- resultatenkaart met drie shows ---- */
.res{border-bottom:1px solid var(--line)}
.res:last-of-type{border-bottom:0}
.res__kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:14px 22px 8px}
.res__d{font-family:var(--display);font-size:14px;color:var(--magenta)}
.res__t{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase}
.res__p{font-family:var(--head);font-weight:400;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey)}
.res .row{border-bottom:0;padding:6px 22px 10px;font-size:13px;align-items:baseline}
.res .row b{text-align:right}


/* ---- beeld in een nieuwskaart ---- */
/* Binnenmarge van een nieuwskaart. De kaart heeft padding, en de
   afbeelding breekt daar met een negatieve marge weer uit. Zo kan een
   losse margin op een alinea de uitlijning niet meer verpesten. */
.news{--kaartpad:clamp(26px,2.2vw,34px)}
.news article{padding:var(--kaartpad)}
.news__beeld{margin:calc(var(--kaartpad) * -1) calc(var(--kaartpad) * -1) 4px}
.news article h3{margin-block:2px 4px}
.news__beeld{aspect-ratio:16/9;overflow:hidden;background:#000;border-bottom:1px solid var(--line)}
.news__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.news article:hover .news__beeld img{transform:scale(1.04)}


/* ---- in de media ---- */
.reign.media{grid-template-columns:56px 1.6fr 1fr 120px}
.reign.media .nr{font-size:13px}
.reign.media .ti em{font-style:normal;font-family:var(--head);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan)}
.reign.media a{border-bottom:1px solid var(--line)}
.reign.media a:hover{color:var(--green);border-color:var(--green)}
@media(max-width:760px){
  .reign.media{grid-template-columns:56px 1fr}
  .reign.media .pl{display:block;grid-column:2}
  .reign.media .ti{grid-column:2}
}

/* ---- logomuur ---- */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.logo-tegel{background:var(--panel);aspect-ratio:16/9;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:14px;text-align:center;
  transition:background .25s ease}
.logo-tegel:hover{background:var(--panel-2)}
.logo-tegel__n{font-family:var(--display);font-size:17px;text-transform:uppercase;line-height:1.05;
  color:var(--grey-2)}
.logo-tegel:hover .logo-tegel__n{color:var(--white)}
.logo-tegel__s{font-family:var(--head);font-weight:500;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey)}


/* ---- PWH in cijfers ---- */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.cijfer{background:var(--panel);padding:clamp(22px,2.6vw,30px);transition:background .25s ease}
.cijfer:hover{background:var(--panel-2)}
.cijfer__n{font-family:var(--display);font-size:clamp(38px,4.6vw,58px);line-height:.95;
  color:var(--green);text-shadow:3px 3px 0 var(--magenta)}
.cijfer__k{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);margin-top:14px}
.cijfer__x{color:var(--grey);font-size:14px;margin:10px 0 0;max-width:34ch}

/* ---- profiel: foto met fotostrook eronder in dezelfde kolom ---- */
.profile__links{display:flex;flex-direction:column}
.profile__img{aspect-ratio:3/4;flex:none}
.profile__strip{border-top:1px solid var(--line);flex:1}
.profile__strip .raster{border:0;grid-template-columns:repeat(3,1fr)}
.profile__strip .ft{aspect-ratio:1}
@media(max-width:860px){
  .profile__strip .raster{grid-template-columns:repeat(4,1fr)}
}

/* ---- logo's in de partnertegels ---- */
.logo-tegel img{max-width:74%;max-height:64px;width:auto;height:auto;object-fit:contain;
  /* alle logo's worden wit gemaakt, zodat de muur rustig blijft */
  filter:brightness(0) invert(1);opacity:.72;transition:opacity .25s ease,filter .25s ease}
.logo-tegel:hover img{opacity:1}
/* zet deze klasse op een tegel om het logo in de eigen kleuren te laten staan */
.logo-tegel--kleur img{filter:none;opacity:.9}
.logo-tegel--kleur:hover img{opacity:1}

/* de uitslagenkaart blijft in beeld terwijl je langs het nieuws scrollt */
@media(min-width:901px){
  .home-nieuws .results{position:sticky;top:calc(var(--navh-sm) + 20px)}
}

/* ------------------------------------------------------------
   PAGINA'S: tekst leest op comfortabele breedte, maar blokken
   zoals split, cijfers en logomuren gebruiken de volle breedte.
   ------------------------------------------------------------ */
.paginatekst > p,
.paginatekst > ul,
.paginatekst > ol,
.paginatekst > blockquote{max-width:70ch;color:var(--grey);margin:0 0 16px}
.paginatekst > p.lead{font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:var(--grey-2);max-width:62ch}
.paginatekst > h2{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(24px,3.4vw,40px);line-height:1;margin:44px 0 14px}
.paginatekst > h3{font-family:var(--head);font-weight:600;text-transform:uppercase;
  font-size:20px;letter-spacing:.03em;margin:30px 0 10px}
.paginatekst a{color:var(--cyan);border-bottom:1px solid var(--line)}
.paginatekst a:hover{color:var(--green);border-color:var(--green)}
.paginatekst a.btn{border-bottom:0;color:#000}
.paginatekst a.btn.ghost{color:var(--white)}

/* blokken op volle breedte, met lucht eromheen */
.paginatekst > .split,
.paginatekst > .cijfers,
.paginatekst > .logos,
.paginatekst > .reigns,
.paginatekst > .news,
.paginatekst > .raster,
.paginatekst > .galgrid,
.paginatekst > .acc,
.paginatekst > .titles{max-width:none;margin:34px 0}
.paginatekst > .eyebrow{margin:56px 0 22px}

/* binnen een split leest de tekst gewoon door tot de kolomrand */
.split p,.split h2,.split h3,.split ul{max-width:none}
.split h2{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(22px,2.8vw,34px);line-height:1;margin:0 0 14px}
.split h3{font-family:var(--head);font-weight:600;text-transform:uppercase;
  font-size:19px;letter-spacing:.03em;margin:26px 0 8px}
.split h3:first-child,.split h2:first-child{margin-top:0}
.split p{color:var(--grey);margin:0 0 14px}
.split .violet p{color:rgba(255,255,255,.9)}
.split .violet h2,.split .violet h3{color:#fff}
/* een kolom die alleen beeld bevat heeft geen binnenmarge nodig */
.split > .beeldkolom{padding:0}

/* ---- laatste wedstrijden op een profiel ---- */
.reign.match-rij{grid-template-columns:52px 1fr 96px 90px;font-size:13px}
.reign.match-rij .w{font-family:var(--body);font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--grey-2);line-height:1.35}
.reign.match-rij .uitslag{font-family:var(--head);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}
.reign.match-rij .uitslag.win{color:var(--green)}
.reign.match-rij .uitslag.verlies{color:var(--grey)}
@media(max-width:860px){
  .reign.match-rij{grid-template-columns:52px 1fr}
  .reign.match-rij .uitslag,.reign.match-rij .pl{grid-column:2}
}

/* ---- PWH TV overzicht ---- */
.tvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.tvkaart{display:block;background:var(--panel);transition:background .25s ease}
.tvkaart:hover{background:var(--panel-2)}
.tvkaart__beeld{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.tvkaart__beeld img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.3) contrast(1.05);transition:filter .3s ease,transform .5s ease}
.tvkaart:hover .tvkaart__beeld img{filter:none;transform:scale(1.04)}
.tvkaart__beeld .tv__play{width:58px;height:58px}
.tvkaart__beeld .tv__play::before{border-width:10px 0 10px 16px}
.tvkaart__tekst{padding:20px}
.tvkaart:hover .d{color:var(--green)}

/* footer */
footer{border-top:1px solid var(--line);background:#050506}
.foot{display:grid;grid-template-columns:2fr repeat(auto-fit,minmax(150px,1fr));gap:36px;padding-block:56px}
.foot h4{font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.2em;color:var(--green);margin:0 0 16px;text-transform:uppercase}
.foot a{display:block;color:var(--grey);font-size:14px;padding:5px 0}
.foot a:hover{color:var(--white)}
.foot__bottom{border-top:1px solid var(--line);padding-block:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--head);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#55555E}
@media(max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot{grid-template-columns:1fr}}

/* claim-blok */
.claim{border:2px solid var(--green);padding:clamp(22px,3.4vw,40px);position:relative;background:var(--panel)}
.claim p{font-family:var(--display);font-size:clamp(22px,3.4vw,44px);line-height:1.02;margin:0;text-transform:uppercase;max-width:none}

.rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .ticker__track,.flag .dot{animation:none}
  *{scroll-behavior:auto!important}
}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--green);color:#000;padding:10px 16px}

/* ============================================================
   AANVULLINGEN VOOR WORDPRESS
   Klassen die in het prototype nog niet nodig waren.
   ============================================================ */

/* filters die links zijn in plaats van knoppen */
.btn-filter{display:inline-block;background:transparent;border:1px solid var(--line);color:var(--grey);
  font-family:var(--head);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 17px;transition:.2s}
.btn-filter:hover{color:var(--white);border-color:var(--cyan)}
.btn-filter.on{background:var(--green);border-color:var(--green);color:#000;font-weight:700}

/* door de redacteur ingevoerde tekst */
.profiel-tekst p{color:var(--grey);margin:0 0 16px}
.profiel-tekst p:first-child{font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:var(--grey-2);max-width:62ch}
.profiel-tekst a{color:var(--cyan);border-bottom:1px solid var(--line)}
.profiel-tekst a:hover{color:var(--green);border-color:var(--green)}
.profiel-tekst h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3.4vw,40px);
  line-height:1;margin:36px 0 14px}
.profiel-tekst h3{font-family:var(--head);font-weight:600;text-transform:uppercase;font-size:20px;
  letter-spacing:.03em;margin:28px 0 10px}
.profiel-tekst ul{color:var(--grey);padding-left:20px;margin:0 0 16px}
.profiel-tekst li{margin-bottom:6px}
.profiel-tekst blockquote{border-left:3px solid var(--green);padding-left:20px;margin:24px 0}
.artikel{max-width:70ch}
.artikel-beeld{border:1px solid var(--line);margin-bottom:34px}
.artikel-beeld img{width:100%;height:auto;display:block}

/* paginering */
.pagination{display:flex;gap:8px;flex-wrap:wrap}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  border:1px solid var(--line);color:var(--grey);font-family:var(--head);font-weight:600;font-size:13px;
  padding:0 12px;transition:.2s}
.page-numbers:hover{border-color:var(--cyan);color:var(--cyan)}
.page-numbers.current{background:var(--green);border-color:var(--green);color:#000}

/* nieuwsraster naast de resultatenkaart */
.home-nieuws{display:grid;grid-template-columns:2fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
@media(max-width:900px){.home-nieuws{grid-template-columns:1fr}}

/* logo in de beheerbalk niet meeschalen */
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}