/*
Theme Name: FREECLOTHES
Theme URI: https://freeclothes.be
Author: FREECLOTHES
Description: Zwart-wit, speels neo-brutalist thema voor FREECLOTHES — een tweedehands kledingplatform met Tinder-style swipe-drops. WooCommerce-compatibel. Werkt samen met de FREECLOTHES Drops plugin.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: freeclothes
Tags: e-commerce, custom-colors, custom-menu, featured-images, threaded-comments
*/

:root{
	--ink:#0a0a0a; --paper:#fff; --paper-2:#f4f4f2;
	--accent:#d6ff3f; --accent-ink:#0a0a0a; --muted:#6b6b68; --line:#0a0a0a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0; font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
	color:var(--ink); background:var(--paper);
	background-image:radial-gradient(var(--paper-2) 1.4px,transparent 1.4px); background-size:18px 18px;
	line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--ink)}
img{max-width:100%; height:auto}

h1,h2,h3,h4{font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.5px; line-height:1.05; margin:0 0 .5em}
h1{font-size:clamp(34px,6vw,64px)}
h2{font-size:clamp(26px,4vw,40px)}
h3{font-size:22px}
p{margin:0 0 1em}

.fc-container{max-width:1100px; margin:0 auto; padding:0 24px}
.fc-narrow{max-width:760px}

/* Buttons */
.fc-btn{display:inline-block; font-family:'Archivo'; font-weight:900; font-size:15px; letter-spacing:.5px; text-transform:uppercase; background:var(--accent); color:var(--ink); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:14px 28px; cursor:pointer; text-decoration:none; transition:transform .1s}
.fc-btn:active{transform:translate(5px,5px); box-shadow:0 0 0}
.fc-btn.ghost{background:var(--paper)}
.fc-btn.dark{background:var(--ink); color:var(--paper)}

/* Header */
.fc-header{background:var(--paper); border-bottom:3px solid var(--ink); position:sticky; top:0; z-index:100}
.fc-header-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 24px; max-width:1100px; margin:0 auto}
.fc-logo{font-family:'Archivo'; font-weight:900; font-size:24px; letter-spacing:-1px; display:flex; align-items:center; text-decoration:none}
.fc-logo .free{background:var(--ink); color:var(--paper); padding:2px 8px}
.fc-logo .clothes{padding:2px 5px; color:var(--ink)}
.fc-nav{display:flex; align-items:center; gap:28px}
.fc-nav a{font-family:'Archivo',sans-serif; font-weight:700; font-size:16px; letter-spacing:.2px; text-decoration:none; padding-bottom:2px; border-bottom:3px solid transparent; transition:border-color .12s}
.fc-nav a:hover{border-bottom-color:var(--accent)}
.fc-menu-toggle{display:none; background:none; border:none; cursor:pointer; font-size:24px}

/* Hero */
.fc-hero{padding:64px 0 56px; text-align:center}
.fc-hero .free-block{background:var(--ink); color:var(--paper); padding:0 12px}
.fc-hero p.lead{font-size:18px; color:var(--muted); max-width:560px; margin:0 auto 28px}
.fc-hero .fc-cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* Steps */
.fc-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:3px solid var(--ink); margin:40px 0; background:var(--paper)}
.fc-step{padding:28px 24px; border-right:3px solid var(--ink)}
.fc-step:last-child{border-right:none}
.fc-step .num{font-family:'Archivo'; font-weight:900; font-size:13px; color:var(--ink); background:var(--accent); border:2.5px solid var(--ink); width:34px; height:34px; display:flex; align-items:center; justify-content:center; margin-bottom:12px}
.fc-step h3{font-size:18px; margin-bottom:6px}
.fc-step p{font-size:14px; color:var(--muted); margin:0}

/* Tiers */
.fc-tiers{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:40px 0}
.fc-tier{border:3px solid var(--ink); background:var(--paper); padding:26px; box-shadow:6px 6px 0 var(--ink)}
.fc-tier.premium{background:var(--ink); color:var(--paper); box-shadow:6px 6px 0 var(--accent)}
.fc-tier .name{font-family:'Archivo'; font-weight:900; font-size:20px; text-transform:uppercase}
.fc-tier .price{font-family:'Archivo'; font-weight:900; font-size:40px; margin:8px 0}
.fc-tier .price span{font-size:15px; font-weight:600; color:var(--muted)}
.fc-tier.premium .price span{color:#bbb}
.fc-tier ul{list-style:none; padding:0; margin:16px 0 22px}
.fc-tier li{padding:7px 0; font-size:14px; border-bottom:2px solid var(--paper-2); display:flex; gap:8px}
.fc-tier.premium li{border-bottom-color:#333}
.fc-tier li::before{content:"→"; font-weight:900}

/* Section helpers */
.fc-section{padding:48px 0}
.fc-section.alt{background:var(--ink); color:var(--paper)}
.fc-section.alt .muted{color:#bbb}
.fc-eyebrow{font-family:'Archivo'; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:8px}

/* WooCommerce light touches */
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{border:3px solid var(--ink); padding:12px; box-shadow:5px 5px 0 var(--ink); background:var(--paper)}
.woocommerce span.price,.woocommerce-Price-amount{font-weight:700}
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
	background:var(--accent) !important; color:var(--ink) !important; border:3px solid var(--ink) !important;
	font-family:'Archivo'; font-weight:900 !important; text-transform:uppercase; border-radius:0 !important; box-shadow:4px 4px 0 var(--ink)}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{transform:translate(4px,4px); box-shadow:0 0 0 !important}

/* Footer */
.fc-footer{background:var(--ink); color:#999; padding:40px 24px; margin-top:60px}
/* Geen witruimte als de laatste sectie al donker eindigt (bv. de verhaalpagina).
   De footer staat ná </main>; we kijken of main eindigt op een donkere sectie. */
#fc-main:has(> .fc-section.alt:last-child) + .fc-footer{margin-top:0}
.fc-footer-inner{max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px}
.fc-footer a{color:#ddd; text-decoration:none; font-size:14px; display:block; margin-bottom:6px}
.fc-footer a:hover{color:var(--accent)}
.fc-footer .fc-logo .clothes{color:var(--paper)}

/* Generic content (posts/pages) */
.fc-content{padding:40px 0}
.fc-content .entry{max-width:760px; margin:0 auto}

@media (max-width:820px){
	.fc-steps{grid-template-columns:1fr}
	.fc-step{border-right:none; border-bottom:3px solid var(--ink)}
	.fc-step:last-child{border-bottom:none}
	.fc-tiers{grid-template-columns:1fr}
	.fc-nav{
		position:fixed; inset:0; z-index:200;
		display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
		gap:6px; padding:90px 28px 28px;
		background:var(--accent);
		transform:translateX(100%); transition:transform .32s cubic-bezier(.7,0,.2,1);
		visibility:hidden;
	}
	.fc-nav.open{transform:translateX(0); visibility:visible}
	.fc-nav a{
		font-family:'Archivo',sans-serif; font-weight:900; font-size:30px; line-height:1.1;
		letter-spacing:-.5px; border-bottom:none; padding:10px 0; color:var(--ink);
		opacity:0; transform:translateX(24px);
	}
	.fc-nav.open a{opacity:1; transform:translateX(0); transition:opacity .3s ease, transform .3s ease}
	.fc-nav.open a:nth-child(1){transition-delay:.10s}
	.fc-nav.open a:nth-child(2){transition-delay:.15s}
	.fc-nav.open a:nth-child(3){transition-delay:.20s}
	.fc-nav.open a:nth-child(4){transition-delay:.25s}
	.fc-nav.open a:nth-child(5){transition-delay:.30s}
	.fc-nav.open a:nth-child(6){transition-delay:.35s}
	.fc-nav.open a:nth-child(7){transition-delay:.40s}
	.fc-nav a:active{transform:translateX(4px)}
	.fc-nav a:hover{border-bottom:none; -webkit-text-stroke:0}
	.fc-menu-toggle{display:flex; z-index:210; position:relative}

	/* Mobiele header-volgorde: logo links, dan account-widget, dan hamburger uiterst rechts. */
	.fc-header-inner{justify-content:flex-start; gap:12px}
	.fc-logo{order:0; margin-right:auto}
	.fc-acct,.fc-acct-login{order:1}
	.fc-menu-toggle{order:2}
	.fc-acct-login{font-size:14px; padding:8px 12px; white-space:nowrap}
}

/* Founders / missie — lichte sectie, transparante PNG vrij op de achtergrond */
.fc-founders-grid{
	display:grid;
	grid-template-columns:300px 1fr;   /* foto links; tekst rechts */
	gap:36px;
	align-items:center;
	max-width:920px;
	margin:0 auto;
}
.fc-founders-photo{
	display:flex;
	align-items:flex-end;               /* foto rust op de onderlijn, naast de tekst */
	justify-content:center;
}
.fc-founders-photo img{
	max-width:100%;
	max-height:380px;                   /* begrenst de hoogte zodat hij niet domineert */
	width:auto;height:auto;
	display:block;
	/* geen kader, geen achtergrond — de transparante PNG zweeft vrij */
}
.fc-founders-text{
	border:3px solid var(--ink);
	box-shadow:6px 6px 0 var(--accent); /* lime slagschaduw, zoals de rest van de site */
	padding:26px 28px;
	background:var(--paper);
}
.fc-founders-text .fc-eyebrow{color:var(--muted)}
.fc-founders-text h2{color:var(--ink);margin:6px 0 12px;font-size:clamp(22px,3vw,30px)}
.fc-founders-text p{font-size:15px;line-height:1.6;color:#1c1c1a;margin-bottom:12px}
.fc-founders-text p:last-child{margin-bottom:0}
@media(max-width:760px){
	.fc-founders-grid{grid-template-columns:1fr;gap:18px;max-width:460px}
	.fc-founders-photo img{max-height:320px;margin:0 auto}
}
/* =========================================================================
 * "Ons verhaal"-pagina (page-ons-verhaal.php)
 * ========================================================================= */
.fc-story-hero{padding:64px 0 16px; text-align:center}
.fc-story-hero .fc-eyebrow{justify-content:center}
.fc-story-hero h1{max-width:760px; margin-left:auto; margin-right:auto}
.fc-story-hero p.lead{font-size:18px; color:var(--muted); max-width:600px; margin:14px auto 0}
.fc-story-hero .fc-story-cta{justify-content:center}

/* Impact-cijfers in de missie-sectie */
.fc-story-impact{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px}
.fc-story-stat{border:3px solid var(--paper); background:transparent; padding:22px 20px}
.fc-story-stat-num{font-family:'Archivo'; font-weight:900; font-size:clamp(30px,5vw,48px); line-height:1; color:var(--accent)}
.fc-story-stat-label{font-size:14px; color:#cfcfcf; margin-top:10px}

/* CTA-rij binnen verhaalsecties */
.fc-story-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}

/* Oprichtersblok op de verhaalpagina (donkere sectie) */
.fc-story-founders{display:grid; grid-template-columns:320px 1fr; gap:40px; align-items:center; max-width:960px; margin:0 auto}
.fc-story-founders-photo{display:flex; align-items:center; justify-content:center}
.fc-story-founders-photo img{max-width:100%; max-height:400px; width:auto; height:auto; display:block}
.fc-story-founders-text .fc-eyebrow{color:#9a9a9a}
.fc-story-founders-text h2{color:var(--paper); margin:6px 0 14px}
.fc-story-founders-text p{color:#dcdcdc; font-size:15px; margin-bottom:12px}
.fc-story-founders-text p:last-of-type{margin-bottom:0}

@media(max-width:760px){
	.fc-story-impact{grid-template-columns:1fr}
	.fc-story-founders{grid-template-columns:1fr; gap:20px; max-width:460px}
	.fc-story-founders-photo img{max-height:320px; margin:0 auto}
}

/* Beeld-logo (Customizer → Site-identiteit → Logo) — rond, netjes in de header */
.fc-header{overflow:visible}
.fc-logo-img{display:inline-flex; align-items:center; line-height:0; position:relative; z-index:2}
.fc-logo-img img{
	height:88px !important;
	width:88px !important;
	max-width:88px;
	object-fit:contain;
	display:block;
	border-radius:50%;
	border:none;
	box-shadow:none;
	position:relative; z-index:3;
}
.fc-footer
/* =========================================================================
 * TikTok social proof — "Zoals gezien op TikTok"
 * Blijft binnen de huisstijl (zwart / paper / lime); enkel het icoon verwijst
 * naar TikTok. Geen roze/cyaan, zodat het bij de neo-brutalist look past.
 * ========================================================================= */
.fc-tt-icon{vertical-align:-.15em; flex:none}

/* Compacte vertrouwens-chip */
.fc-tt-pill{
	display:inline-flex; align-items:center; gap:8px;
	font-family:'Archivo'; font-weight:900; font-size:13px; letter-spacing:.3px;
	text-transform:uppercase; text-decoration:none;
	background:var(--ink); color:var(--paper);
	border:3px solid var(--ink); box-shadow:4px 4px 0 var(--accent);
	padding:9px 16px; transition:transform .1s, box-shadow .1s;
}
.fc-tt-pill:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--accent)}
.fc-tt-pill.on-dark{background:var(--paper); color:var(--ink); box-shadow:4px 4px 0 var(--accent)}

/* Homepage-banner (volle breedte tussen secties) */
.fc-tt-banner-row{background:var(--accent); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink)}
.fc-tt-banner{
	display:flex; align-items:center; gap:18px; flex-wrap:wrap;
	padding:16px 0; text-decoration:none; color:var(--ink);
}
.fc-tt-banner-badge{
	display:inline-flex; align-items:center; gap:8px;
	font-family:'Archivo'; font-weight:900; font-size:14px; letter-spacing:.4px;
	text-transform:uppercase;
	background:var(--ink); color:var(--paper);
	border:3px solid var(--ink); padding:8px 14px; white-space:nowrap;
}
.fc-tt-banner-text{font-size:15px; font-weight:600; color:var(--ink); flex:1 1 auto; min-width:200px}
.fc-tt-banner-text strong{font-weight:900}
.fc-tt-banner-cta{
	font-family:'Archivo'; font-weight:900; font-size:14px; text-transform:uppercase;
	border-bottom:3px solid var(--ink); white-space:nowrap;
}
.fc-tt-banner:hover .fc-tt-banner-cta{background:var(--ink); color:var(--paper); border-bottom-color:var(--ink)}

/* Live embed-sectie */
.fc-tt-section{background:var(--paper-2); border-top:3px solid var(--ink)}
.fc-tt-embed-wrap{display:flex; flex-direction:column; align-items:center; gap:18px}
.fc-tt-embed{margin:0 auto !important}
.fc-tt-embed-fallback{display:inline-flex; align-items:center; gap:6px}

/* Social proof boven de inschrijfknop (word-lid pagina) */
.fc-tt-joinproof{
	display:flex; align-items:center; gap:14px; flex-wrap:wrap;
	margin:0 0 24px; padding:14px 16px;
	border:3px solid var(--ink); background:var(--paper); box-shadow:5px 5px 0 var(--accent);
}
.fc-tt-joinproof-text{font-size:14px; font-weight:600; color:var(--ink)}

/* Regel boven de inline-badge in het oprichtersblok */
.fc-story-tiktok-line{margin-top:14px; margin-bottom:10px}
.fc-story-founders-text .fc-tt-pill{margin:0 0 6px}

@media(max-width:560px){
	.fc-tt-banner{gap:10px}
	.fc-tt-banner-text{min-width:100%}
}

/* =========================================================================
 * Bedrijven-pagina (page-bedrijven.php)
 * ========================================================================= */
.fc-biz-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:30px}
@media(max-width:760px){.fc-biz-grid{grid-template-columns:1fr}}
.fc-biz-card{border:3px solid var(--ink); background:var(--paper); box-shadow:6px 6px 0 var(--ink); padding:22px 22px}
.fc-biz-emoji{font-size:34px; line-height:1; margin-bottom:10px}
.fc-biz-card h3{font-size:18px; margin:0 0 6px}
.fc-biz-card p{font-size:14px; color:var(--muted); margin:0}

.fc-biz-tiers{grid-template-columns:1fr 1fr}
@media(max-width:760px){.fc-biz-tiers{grid-template-columns:1fr}}
.fc-biz-tier-sub{font-size:13px; color:var(--muted); margin:2px 0 14px; font-weight:600}
.fc-tier.premium .fc-biz-tier-sub{color:#bbb}
.fc-biz-note{margin-top:18px; font-size:14px; color:var(--muted)}

/* =========================================================================
 * Countdown naar de volgende drop
 * ========================================================================= */
.fc-countdown{text-align:center; padding:8px 0}
.fc-cd-title{font-family:'Archivo'; font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:14px}
.fc-cd-clock{display:inline-flex; align-items:flex-start; gap:10px; justify-content:center}
.fc-cd-unit{display:flex; flex-direction:column; align-items:center; min-width:74px}
.fc-cd-num{
	font-family:'Archivo','Arial Black',sans-serif; font-weight:900; font-size:clamp(34px,7vw,56px); line-height:1;
	background:var(--ink); color:var(--paper); border:3px solid var(--ink);
	box-shadow:5px 5px 0 var(--accent);
	padding:14px 10px; min-width:74px; font-variant-numeric:tabular-nums; display:block;
}
.fc-cd-lbl{font-family:'Archivo'; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-top:8px}
.fc-cd-sep{font-family:'Archivo','Arial Black',sans-serif; font-weight:900; font-size:clamp(30px,6vw,48px); line-height:1; color:var(--ink); padding-top:14px}
/* Pulserende seconden */
.fc-cd-secs .fc-cd-num{background:var(--accent); color:var(--ink); box-shadow:5px 5px 0 var(--ink)}
.fc-cd-secs.pulse .fc-cd-num{animation:fc-cd-pulse .5s ease}
@keyframes fc-cd-pulse{0%{transform:scale(1)}35%{transform:scale(1.09)}100%{transform:scale(1)}}
/* Live-staat */
.fc-cd-live{font-family:'Archivo','Arial Black',sans-serif; font-weight:900; font-size:clamp(22px,4vw,34px); color:var(--ink)}
.fc-cd-live a{display:inline-block; margin-top:8px; font-size:15px; background:var(--accent); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:8px 16px; text-decoration:none; text-transform:uppercase}
/* Op de donkere (alt) sectie: labels/sep leesbaar maken */
.fc-section.alt .fc-cd-title,.fc-section.alt .fc-cd-lbl{color:#cfcfcf}
.fc-section.alt .fc-cd-sep,.fc-section.alt .fc-cd-live{color:var(--paper)}
/* Homepage-banner-rij rond de countdown */
.fc-cd-row{background:var(--paper-2); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); padding:26px 0}
@media(max-width:560px){
	.fc-cd-clock{gap:5px}
	.fc-cd-unit{min-width:58px}
	.fc-cd-num{min-width:58px; padding:10px 6px}
	.fc-cd-sep{display:none}
}

/* =========================================================================
 * Sneak peek — doorlopende slider met teasers van de volgende drop
 * ========================================================================= */
.fc-peek{padding:44px 0 8px; overflow:hidden}
.fc-peek-head{max-width:1100px; margin:0 auto 22px; padding:0 24px; text-align:center}
.fc-peek-head .fc-eyebrow{justify-content:center}
.fc-peek-sub{font-size:15px; color:var(--muted); max-width:520px; margin:8px auto 0}

/* Viewport + track (marquee) */
.fc-peek-viewport{
	overflow-x:auto;            /* mobiel: handmatig swipen mogelijk */
	scrollbar-width:none; -ms-overflow-style:none;
	-webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.fc-peek-viewport::-webkit-scrollbar{display:none}
.fc-peek-track{
	display:flex; gap:18px; width:max-content; padding:6px 24px 14px;
	animation:fc-peek-scroll 38s linear infinite;
}
@keyframes fc-peek-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.fc-peek-track{animation:none}}

/* Kaart */
.fc-peek-card{flex:none; width:190px; border:3px solid var(--ink); background:var(--paper); box-shadow:6px 6px 0 var(--ink)}
.fc-peek-thumb{position:relative; height:200px; display:flex; align-items:center; justify-content:center; border-bottom:3px solid var(--ink); overflow:hidden}
.fc-peek-emoji{font-size:74px; line-height:1; filter:blur(5px); opacity:.85; transition:filter .25s, opacity .25s}
.fc-peek-card:hover .fc-peek-emoji{filter:blur(2px); opacity:1}
.fc-peek-lock{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:30px;
	background:var(--paper); border:3px solid var(--ink); width:54px; height:54px; border-radius:50%;
	display:flex; align-items:center; justify-content:center; box-shadow:3px 3px 0 var(--ink)}
.fc-peek-card.is-dark .fc-peek-lock{background:var(--accent)}
.fc-peek-meta{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px}
.fc-peek-label{font-family:'Archivo'; font-weight:900; font-size:13px}
.fc-peek-soon{font-family:'Archivo'; font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.5px;
	background:var(--accent); border:2px solid var(--ink); padding:2px 6px; white-space:nowrap}

.fc-peek-cta{text-align:center; margin-top:18px}
@media(max-width:560px){
	.fc-peek-card{width:150px}
	.fc-peek-thumb{height:160px}
	.fc-peek-emoji{font-size:58px}
}

/* Eén lidmaatschap (premium afgeschaft) — centreer de enkele tier-kaart */
/* Eén lidmaatschap — alles netjes gecentreerd, niet links scheef */
.fc-tiers-single{grid-template-columns:minmax(0,440px); justify-content:center; margin-top:28px}
.fc-section:has(.fc-tiers-single){text-align:center}
.fc-section:has(.fc-tiers-single) .fc-eyebrow{justify-content:center}
.fc-section:has(.fc-tiers-single) .fc-tier{text-align:left}

/* =========================================================================
 * Word-lid pagina (page-word-lid.php)
 * ========================================================================= */
/* Het inschrijfkaartje van de memberships-plugin netjes gecentreerd tonen */
.fc-join-wrap{display:flex; justify-content:center}
.fc-join-wrap .fcm-join{margin:0 auto; text-align:left}
/* Op de donkere sectie: zorg dat het kaartje zelf licht blijft */
.fc-section.alt .fc-join-wrap .fcm-plan{background:var(--paper); color:var(--ink)}

/* FAQ (details/summary) in neo-brutalist stijl */
.fc-faq{max-width:680px; margin:18px auto 0; text-align:left}
.fc-faq-item{border:3px solid var(--paper); background:transparent; margin-bottom:12px}
.fc-section.alt .fc-faq-item{border-color:var(--paper)}
.fc-faq-item summary{cursor:pointer; list-style:none; padding:14px 18px; font-family:'Archivo'; font-weight:900; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:12px}
.fc-faq-item summary::-webkit-details-marker{display:none}
.fc-faq-item summary::after{content:"+"; font-family:'Archivo'; font-weight:900; font-size:22px; line-height:1}
.fc-faq-item[open] summary::after{content:"–"}
.fc-faq-item p{margin:0; padding:0 18px 16px; font-size:14px; color:#cfcfcf}
/* Op lichte sectie zou FAQ ook werken: */
.fc-section:not(.alt) .fc-faq-item{border-color:var(--ink)}
.fc-section:not(.alt) .fc-faq-item p{color:var(--muted)}

/* =========================================================================
 * Homepage — lidmaatschap-CTA (opvallend twee-koloms blok)
 * ========================================================================= */
.fc-join-cta{padding-top:30px}
.fc-joinbox{display:grid; grid-template-columns:1fr 1fr; border:4px solid var(--ink); box-shadow:10px 10px 0 var(--ink); background:var(--paper); overflow:hidden}
@media(max-width:760px){.fc-joinbox{grid-template-columns:1fr}}

/* Linkerkolom: donker, prijs prominent */
.fc-joinbox-left{background:var(--ink); color:var(--paper); padding:34px 32px; display:flex; flex-direction:column; justify-content:center}
.fc-joinbox-left .fc-eyebrow{color:var(--accent)}
.fc-joinbox-left h2{color:var(--paper); font-size:clamp(24px,3.4vw,34px); margin:4px 0 14px}
.fc-joinbox-price{font-family:'Archivo'; font-weight:900; font-size:clamp(48px,8vw,72px); line-height:1; color:var(--accent)}
.fc-joinbox-price span{font-size:18px; font-weight:600; color:#bbb; -webkit-text-fill-color:#bbb}
.fc-joinbox-sub{font-size:15px; color:#cfcfcf; margin:14px 0 22px; max-width:340px}
.fc-joinbox-btn{align-self:flex-start; background:var(--accent) !important; color:var(--ink) !important; box-shadow:5px 5px 0 var(--accent)}
.fc-joinbox-btn:active{box-shadow:0 0 0}

/* Rechterkolom: voordelen */
.fc-joinbox-right{padding:28px 30px; display:flex; flex-direction:column; gap:6px; justify-content:center}
.fc-joinfeat{display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-bottom:2px solid var(--paper-2)}
.fc-joinbox-right .fc-joinfeat:last-child{border-bottom:none}
.fc-joinfeat-ic{flex:none; width:38px; height:38px; background:var(--ink); border:3px solid var(--ink); display:flex; align-items:center; justify-content:center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23d6ff3f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:24px 24px}
.fc-joinfeat b{font-family:'Archivo'; font-weight:900; font-size:15px; display:block; margin-bottom:2px}
.fc-joinfeat span{font-size:13.5px; color:var(--muted)}

/* =========================================================================
 * Hero met achtergrondfoto (Customizer → Hero-achtergrond)
 * ========================================================================= */
.fc-hero.has-bg{
	background-size:cover; background-position:center; background-repeat:no-repeat;
	padding:96px 0 88px;
	border-bottom:3px solid var(--ink);
}
.fc-hero.has-bg h1,
.fc-hero.has-bg p.lead{color:var(--paper)}
.fc-hero.has-bg p.lead{color:#eaeaea}
/* Het 'Gratis'-blokje blijft lime-op-zwart? Nee — op foto liever omgekeerd voor contrast */
.fc-hero.has-bg .free-block{background:var(--accent); color:var(--ink)}
/* Ghost-knoppen op de foto: lichte rand i.p.v. wit vlak dat wegvalt */
.fc-hero.has-bg .fc-btn.ghost{background:transparent; color:var(--paper); border-color:var(--paper); box-shadow:5px 5px 0 rgba(0,0,0,.4)}
.fc-hero.has-bg .fc-btn.ghost:active{box-shadow:0 0 0}
@media(max-width:560px){
	.fc-hero.has-bg{padding:64px 0 56px}
}

/* =========================================================================
 * Header: vlak links achter het logo (kleur/breedte via Customizer → Header-vlak)
 * ========================================================================= */
.fc-header{position:sticky; overflow:visible}
.fc-header-inner{position:relative}
.fc-logo,.fc-logo-img{position:relative; z-index:2}
/* Zwart vlak: een pseudo-element op de FULL-WIDTH header-balk (left:0 = schermrand),
   dat doorloopt tot net voorbij het logo. Geen uitloop buiten beeld → geen
   horizontale scrollbar, en de header mag overflow:visible houden zodat de
   account-dropdown vrij kan uitklappen. Breedte schaalt mee met de container. */
.fc-has-headerblock .fc-header::before{
	content:""; position:absolute; top:0; bottom:0; left:0; z-index:0;
	width:calc( max(0px, (100% - 1100px) / 2) + 24px + 120px + var(--fc-hb-extend, 26px) );
	background:var(--fc-hb-color, #0a0a0a);
}
.fc-has-headerblock .fc-header-inner{z-index:1}


/* Hamburger-knop (drie streepjes → kruis) */
.fc-menu-toggle{background:none; border:3px solid var(--ink); width:46px; height:42px; align-items:center; justify-content:center; cursor:pointer; padding:0; box-shadow:3px 3px 0 var(--ink); transition:transform .1s}
.fc-menu-toggle:active{transform:translate(3px,3px); box-shadow:0 0 0}
.fc-burger{position:relative; width:22px; height:16px; display:block}
.fc-burger span{position:absolute; left:0; width:100%; height:3px; background:var(--ink); border-radius:2px; transition:transform .28s ease, opacity .2s ease, top .28s ease}
.fc-burger span:nth-child(1){top:0}
.fc-burger span:nth-child(2){top:6.5px}
.fc-burger span:nth-child(3){top:13px}
/* Open: streepjes → kruis */
.fc-menu-toggle.is-open .fc-burger span:nth-child(1){top:6.5px; transform:rotate(45deg)}
.fc-menu-toggle.is-open .fc-burger span:nth-child(2){opacity:0}
.fc-menu-toggle.is-open .fc-burger span:nth-child(3){top:6.5px; transform:rotate(-45deg)}
/* Voorkom achtergrond-scroll als het menu open is */
body.fc-menu-open{overflow:hidden}

/* Header boven het overlay houden zodat de kruis-knop klikbaar blijft */
body.fc-menu-open .fc-header{z-index:300}

/* =========================================================================
 * Hoe-werkt-het pagina: swipe-demo + uitlegblokken
 * ========================================================================= */
.fc-howto-demo{max-width:340px; margin:24px auto 0}
.fc-demo-counter{font-family:'Archivo'; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:#cfcfcf; margin-bottom:12px}
.fc-demo-counter b{color:var(--accent)}
.fc-demo-deck{position:relative; z-index:0; width:100%; height:380px; margin:0 auto; touch-action:pan-y; isolation:isolate}
.fc-demo-card{position:absolute; inset:0; background:var(--paper); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); overflow:hidden; transition:transform .28s ease, opacity .28s ease; cursor:grab; display:flex; flex-direction:column}
.fc-demo-card.fly-right{transform:translateX(140%) rotate(18deg) !important; opacity:0}
.fc-demo-card.fly-left{transform:translateX(-140%) rotate(-18deg) !important; opacity:0}
.fc-demo-photo{flex:1; display:flex; align-items:center; justify-content:center; font-size:90px; background:var(--paper-2); border-bottom:3px solid var(--ink)}
.fc-demo-meta{padding:12px 14px; text-align:left; background:var(--paper)}
.fc-demo-name{font-family:'Archivo'; font-weight:900; font-size:16px; color:var(--ink)}
.fc-demo-tags{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap}
.fc-demo-tag{font-size:11px; font-weight:700; border:2px solid var(--ink); padding:2px 8px; text-transform:uppercase; letter-spacing:.3px; color:var(--ink); background:var(--paper)}
.fc-demo-tag.accent{background:var(--accent)}
.fc-demo-tag.grade-A{background:var(--ink); color:var(--accent)}
.fc-demo-tag.grade-B{background:#fff; color:var(--ink)}
.fc-demo-flag{position:absolute; top:12px; left:12px; z-index:4; font-family:'Archivo'; font-weight:900; font-size:12px; letter-spacing:.5px; text-transform:uppercase; background:var(--accent); color:var(--ink); border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:5px 9px; display:flex; flex-direction:column; align-items:flex-start; line-height:1.05}
.fc-demo-flag span{font-size:8px; font-weight:700; letter-spacing:.2px; text-transform:none; opacity:.85; margin-top:2px}
.fc-demo-stamp{position:absolute; top:24px; font-family:'Archivo'; font-weight:900; font-size:26px; padding:4px 12px; border:4px solid; opacity:0; transition:opacity .15s; z-index:5}
.fc-demo-stamp.like{right:18px; transform:rotate(14deg); color:#1c7a3a; border-color:#1c7a3a}
.fc-demo-stamp.nope{left:18px; transform:rotate(-14deg); color:#a32d2d; border-color:#a32d2d}
.fc-demo-card.show-like .fc-demo-stamp.like{opacity:1}
.fc-demo-card.show-nope .fc-demo-stamp.nope{opacity:1}
.fc-demo-done{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--paper); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); font-family:'Archivo'; font-weight:900; font-size:22px; color:var(--ink); line-height:1.3}
.fc-demo-done span{font-size:14px; font-weight:600; color:var(--muted)}
.fc-demo-controls{display:flex; gap:18px; justify-content:center; margin-top:18px}
.fc-demo-btn{width:58px; height:58px; border-radius:50%; border:3px solid var(--ink); background:var(--paper); font-size:24px; cursor:pointer; box-shadow:4px 4px 0 var(--ink); transition:transform .1s}
.fc-demo-btn:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--ink)}
.fc-demo-btn.like{background:var(--accent)}
.fc-demo-hint{font-size:13px; color:#cfcfcf; margin:14px 0 0}
.fc-demo-reset{margin-top:8px; font-family:'Space Grotesk'; font-weight:700; font-size:12px; background:none; border:2px solid var(--paper); color:var(--paper); padding:5px 12px; cursor:pointer}

/* Uitlegblokken (grading / outlet) */
.fc-howto-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px}
@media(max-width:560px){.fc-howto-grid{grid-template-columns:1fr}}
.fc-howto-card{border:3px solid var(--paper); padding:18px; text-align:left}
.fc-howto-pill{display:inline-block; font-family:'Archivo'; font-weight:900; font-size:13px; text-transform:uppercase; border:2px solid var(--ink); padding:4px 10px; margin-bottom:10px}
.fc-howto-pill.grade-A{background:var(--accent); color:var(--ink)}
.fc-howto-pill.grade-B{background:var(--paper); color:var(--ink)}
.fc-howto-card p{font-size:14px; color:#dcdcdc; margin:0}
.fc-howto-list{list-style:none; padding:0; margin:14px 0 0; text-align:left}
.fc-howto-list li{padding:9px 0 9px 26px; position:relative; font-size:15px; border-bottom:2px solid rgba(255,255,255,.12)}
.fc-section:not(.alt) .fc-howto-list li{border-bottom-color:var(--paper-2); color:var(--ink)}
.fc-howto-list li:before{content:"→"; position:absolute; left:0; font-family:'Archivo'; font-weight:900; color:var(--accent)}
.fc-howto-list li b{font-family:'Archivo'}

/* =========================================================================
 * Account-widget rechtsboven (avatar + dropdown)
 * ========================================================================= */
.fc-acct{position:relative; flex:none; margin-left:8px}
.fc-acct-btn{padding:0; background:none; border:none; cursor:pointer; line-height:0}
.fc-acct-img{width:42px; height:42px; border:3px solid var(--ink); object-fit:cover; box-shadow:2px 2px 0 var(--ink); background:var(--paper-2); display:block}
.fc-acct-btn:hover .fc-acct-img{box-shadow:2px 2px 0 var(--accent)}
.fc-acct-menu{position:absolute; right:0; top:calc(100% + 10px); min-width:200px; background:var(--paper); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); display:none; z-index:300}
.fc-acct.open .fc-acct-menu{display:block}
.fc-header:has(.fc-acct.open){z-index:400}
.fc-acct-menu a{display:block; padding:11px 16px; font-family:'Archivo'; font-weight:700; font-size:14px; text-decoration:none; color:var(--ink); border-bottom:2px solid var(--paper-2)}
.fc-acct-menu a:last-child{border-bottom:none}
.fc-acct-menu a:hover{background:var(--accent)}
.fc-acct-login{font-family:'Archivo'; font-weight:900; font-size:14px; text-transform:uppercase; text-decoration:none; border:3px solid var(--ink); padding:8px 14px; box-shadow:3px 3px 0 var(--ink); background:var(--paper); white-space:nowrap; margin-left:8px}
.fc-acct-login:hover{background:var(--accent)}
/* Op mobiel: avatar/inlogknop links van de hamburger zichtbaar houden */
@media(max-width:820px){
	.fc-acct-menu{right:0}
}