/*
Theme Name: Fckarton
Theme URI: http://localhost:8080
Author: Fckarton
Description: One-page thema voor Fckarton – TCG-handel, livestreams, beurzen en community. Agenda, team, links en foto's beheer je via wp-admin (Agenda, Aanvragen en Weergave → Customizer).
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: fckarton
*/

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#0B0C14}
html{scroll-behavior:smooth}
a{color:#FFCB05}a:hover{color:#FFE27A}
a:focus-visible,button:focus-visible{outline:3px solid #FFCB05;outline-offset:3px}
::placeholder{color:#8A8FAD}
select option{background:#1C1F33;color:#F3F4FA}
img{max-width:100%}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed!important;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100;background:#FFCB05;color:#0B0C14;padding:10px 16px;border-radius:999px;font-weight:800}

/* Header staat onder de WordPress-adminbalk als je ingelogd bent */
.site-header{top:var(--wp-admin--admin-bar--height,0px)!important}
section[id]{scroll-margin-top:84px}
.site-logo img{display:block;height:64px;width:auto}
@media (max-width: 720px){.site-logo img{height:44px}}
/* Mobiel: compacte header (logo + WhatsApp); de secties staan in de footer-nav */
@media (max-width: 720px){
	.nav-text{display:none}
	.site-header > div{flex-wrap:nowrap!important;padding:10px 16px!important}
	.site-header .btn{white-space:nowrap;padding:0 16px!important}
}
@media (max-width: 400px){.hide-xs{display:none}}

/* Mobiel: rijen kaarten worden een horizontale swipe-slider met een stukje van de volgende kaart in beeld */
.slider-dots{display:none}
@media (max-width: 720px){
	.slider{display:flex!important;gap:14px!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -24px;padding:4px 24px 8px;scroll-padding:0 24px}
	.slider::-webkit-scrollbar{display:none}
	.slider > *{flex:0 0 78%;scroll-snap-align:start;min-width:0}
	.slider.slider-sm > *{flex-basis:72%}
	.slider .lift:hover{transform:none}
	.slider-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:-28px}
	.slider-sm + .slider-dots{margin-top:-8px}
	.slider-dots span{width:8px;height:8px;border-radius:999px;background:#3A3F62;transition:width .25s ease,background-color .25s ease}
	.slider-dots span.on{width:24px;background:#FFCB05}
	.swipe-hint{display:inline-flex!important}
}
.swipe-hint{display:none;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.08em;color:#8A8FAD}

.field{transition:border-color .2s ease,box-shadow .2s ease}
.field:focus{outline:none;border-color:#FFCB05;box-shadow:0 0 0 4px rgba(255,203,5,.18)}
.btn{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-3px)}
.btn-y:hover{box-shadow:0 14px 34px -10px rgba(255,203,5,.6)}
.btn-g:hover{box-shadow:0 14px 34px -10px rgba(37,211,102,.6)}
.btn-ghost:hover{border-color:#FFCB05;color:#F3F4FA}
.btn-dark:hover{box-shadow:0 14px 34px -10px rgba(11,12,20,.7);color:#FFFFFF}
.navlink{position:relative;text-decoration:none;color:#F3F4FA}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:#FFCB05;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.navlink:hover{color:#F3F4FA}.navlink:hover::after{transform:scaleX(1)}
.lift{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.lift:hover{transform:translateY(-6px);border-color:#FFCB05;box-shadow:0 26px 50px -26px rgba(255,203,5,.5)}
.zoom{overflow:hidden}
.zoom > .ph{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.lift:hover .zoom > .ph,.zoom:hover > .ph{transform:scale(1.06)}
.row{transition:transform .25s ease,border-color .25s ease,background-color .25s ease}
.row:hover{transform:translateX(6px);border-color:#FFCB05;background-color:#1A1D30}
.social{transition:transform .25s ease,border-color .25s ease}
.social:hover{transform:translateY(-4px);border-color:#5A5F82;color:#F3F4FA}
.ph{background-color:#1C1F33;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 12px,transparent 12px 24px)}
img.ph{display:block;width:100%;object-fit:cover;background-image:none;min-height:0}
.holo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.26) 42%,rgba(140,220,255,.2) 50%,rgba(255,160,230,.18) 58%,transparent 75%);background-size:250% 250%;mix-blend-mode:screen;animation:shimmer 4.5s ease-in-out infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.card-a{animation:floatA 7s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(-11deg)}50%{transform:translateY(-16px) rotate(-8deg)}}
.card-b{animation:floatB 8s ease-in-out infinite}
@keyframes floatB{0%,100%{transform:translateY(-6px) rotate(3deg)}50%{transform:translateY(12px) rotate(1deg)}}
.card-c{animation:floatC 6.5s ease-in-out infinite}
@keyframes floatC{0%,100%{transform:translateY(0) rotate(13deg)}50%{transform:translateY(-12px) rotate(16deg)}}
.blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(70px,-40px) scale(1.18)}}
.pulse{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,61,79,.75)}100%{box-shadow:0 0 0 11px rgba(255,61,79,0)}}
.pulse-w{animation:pulsew 1.6s ease-out infinite}
@keyframes pulsew{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}100%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
.marquee{display:flex;width:max-content;animation:marquee 26s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.22s}.d3{animation-delay:.36s}.d4{animation-delay:.5s}.d5{animation-delay:.64s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* Eenmalige fade-in zodra een blok in beeld komt (site.js zet .is-in). Zonder JS is alles gewoon zichtbaar. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal.lift.is-in{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.js .calm .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none}}
.bubble{animation:chat 9s ease-in-out infinite both}
.b1{animation-delay:0s}.b2{animation-delay:.9s}.b3{animation-delay:1.8s}.b4{animation-delay:2.7s}
@keyframes chat{0%,6%{opacity:0;transform:translateY(12px) scale(.97)}14%,88%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.dot{animation:blink 1.2s ease-in-out infinite}
.dot2{animation-delay:.2s}.dot3{animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.calm *,.calm *::before,.calm *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Segment-knoppen (agenda-filter en formulierkeuze) */
.seg{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:#B8BCD6;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.seg[aria-pressed="true"]{background:#FFCB05;color:#0B0C14;font-weight:800}
.choice{min-height:46px;padding:0 22px;border:1px solid #3A3F62;border-radius:999px;background:transparent;color:#F3F4FA;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer}
.choice[aria-pressed="true"]{border-color:#FFCB05;background:#FFCB05;color:#0B0C14;font-weight:800}
.event[hidden]{display:none!important}
.hp-field{position:absolute!important;left:-9999px!important}
.form-error{padding:14px 16px;border:1px solid #FF3D4F;border-radius:12px;background:rgba(255,61,79,.1);color:#FFB3BA;font-size:15px}

/* Eenvoudige pagina's (privacy, 404, ...) */
.page-wrap{max-width:760px;margin:0 auto;padding:88px 24px 112px;font-family:'Bricolage Grotesque',system-ui,sans-serif;color:#F3F4FA;font-size:18px;line-height:1.65}
.page-wrap h1{font-size:clamp(36px,5vw,58px);line-height:1;letter-spacing:-.035em;font-weight:800;margin:0 0 32px}
.page-wrap p,.page-wrap li{color:#B8BCD6}