/*
Theme Name: BW Roeiapparaatkopen
Theme URI: https://roeiapparaatkopen.nl
Author: Samautomation
Description: Sportief, eerlijk block-thema voor roeiapparaatkopen.nl — energiek teal/marine, koopgids-componenten (aanrader-kaart, vergelijkingstabel, type-uitleg, prijsklasse, HowTo, FAQ, disclosure).
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: bw-roeiapparaatkopen
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --rk-teal:#1E8FA8;
  --rk-teal-dark:#15768c;
  --rk-marine:#13293D;
  --rk-marine-2:#1d3a55;
  --rk-white:#FFFFFF;
  --rk-grey:#F1F4F6;
  --rk-grey-2:#e2e8ec;
  --rk-line:#d8e0e6;
  --rk-ink:#13293D;
  --rk-ink-soft:#43586b;
  --rk-orange:#E8643C;
  --rk-green:#2FA866;
  --rk-green-soft:#e7f6ee;
  --rk-shadow:0 6px 24px rgba(19,41,61,.08);
  --rk-shadow-lg:0 14px 40px rgba(19,41,61,.14);
  --rk-radius:16px;
  --rk-radius-sm:10px;
  --rk-font-head:"Saira","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --rk-font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* =========================================================
   BASE
   ========================================================= */
body{font-family:var(--rk-font-body);color:var(--rk-ink);background:var(--rk-white);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5{font-family:var(--rk-font-head);color:var(--rk-marine);line-height:1.15;font-weight:700;letter-spacing:-.01em;}
h1{font-size:clamp(2rem,5vw,3.25rem);}
h2{font-size:clamp(1.5rem,3.4vw,2.25rem);margin-top:1.6em;}
h3{font-size:clamp(1.2rem,2.4vw,1.5rem);margin-top:1.4em;}
a{color:var(--rk-teal-dark);}
a:hover{color:var(--rk-orange);}
.rk-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px);}
.rk-narrow{max-width:820px;margin-inline:auto;}

/* =========================================================
   HEADER
   ========================================================= */
.rk-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rk-line);}
.rk-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px;}
.rk-logo{display:flex;align-items:center;gap:10px;font-family:var(--rk-font-head);font-weight:800;font-size:1.2rem;color:var(--rk-marine);text-decoration:none;letter-spacing:-.02em;}
.rk-logo:hover{color:var(--rk-marine);}
.rk-logo svg{flex:0 0 auto;}
.rk-header .rk-wrap{max-width:1320px;}
.rk-nav{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;}
.rk-nav a{font-family:var(--rk-font-head);font-weight:600;font-size:.93rem;color:var(--rk-marine);text-decoration:none;padding:8px 10px;border-radius:8px;white-space:nowrap;}
.rk-nav a:hover{background:var(--rk-grey);color:var(--rk-teal-dark);}
.rk-nav .rk-btn{margin-left:6px;}
.rk-btn{display:inline-flex;align-items:center;gap:8px;background:var(--rk-teal);color:#fff;font-family:var(--rk-font-head);font-weight:700;font-size:.98rem;padding:11px 20px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;transition:transform .12s,background .12s;}
.rk-btn:hover{background:var(--rk-teal-dark);color:#fff;transform:translateY(-1px);}
.rk-btn--orange{background:var(--rk-orange);}
.rk-btn--orange:hover{background:#d2542f;}
.rk-btn--ghost{background:transparent;color:var(--rk-marine);border:2px solid var(--rk-line);}
.rk-btn--ghost:hover{background:var(--rk-grey);color:var(--rk-marine);}

/* =========================================================
   HERO
   ========================================================= */
.rk-hero{background:linear-gradient(135deg,var(--rk-marine) 0%,var(--rk-marine-2) 60%,#234a6b 100%);color:#fff;position:relative;overflow:hidden;}
.rk-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(30,143,168,.35),transparent 45%);pointer-events:none;}
.rk-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:clamp(48px,7vw,86px) 0;}
.rk-hero h1{color:#fff;margin:0 0 18px;}
.rk-hero p{font-size:1.18rem;color:#cfe0ea;max-width:34em;margin:0 0 28px;}
.rk-hero .rk-cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.rk-hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--rk-radius);padding:26px;backdrop-filter:blur(6px);}
.rk-hero-card h3{color:#fff;margin:0 0 14px;font-size:1.05rem;}
.rk-hero-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.rk-hero-card li{display:flex;gap:11px;align-items:flex-start;color:#e4eef4;font-size:1rem;}
.rk-hero-card li svg{flex:0 0 auto;margin-top:3px;color:var(--rk-green);}

/* =========================================================
   USP BAR
   ========================================================= */
.rk-usp{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rk-line);border:1px solid var(--rk-line);border-radius:var(--rk-radius);overflow:hidden;margin-top:-34px;position:relative;z-index:5;box-shadow:var(--rk-shadow);}
.rk-usp div{background:#fff;padding:20px 22px;display:flex;gap:12px;align-items:center;}
.rk-usp svg{flex:0 0 auto;color:var(--rk-teal);}
.rk-usp strong{display:block;font-family:var(--rk-font-head);font-size:.98rem;color:var(--rk-marine);}
.rk-usp span{font-size:.86rem;color:var(--rk-ink-soft);}

/* =========================================================
   SECTION HELPERS
   ========================================================= */
.rk-section{padding:clamp(44px,6vw,76px) 0;}
.rk-section--grey{background:var(--rk-grey);}
.rk-eyebrow{font-family:var(--rk-font-head);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:700;color:var(--rk-teal);margin:0 0 8px;}
.rk-lead{font-size:1.12rem;color:var(--rk-ink-soft);max-width:42em;}

/* =========================================================
   AANRADER-KAART
   ========================================================= */
.rk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.rk-card{background:#fff;border:1px solid var(--rk-line);border-radius:var(--rk-radius);padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--rk-shadow);position:relative;transition:transform .14s,box-shadow .14s;}
.rk-card:hover{transform:translateY(-3px);box-shadow:var(--rk-shadow-lg);}
.rk-card__badge{position:absolute;top:-12px;left:24px;background:var(--rk-green);color:#fff;font-family:var(--rk-font-head);font-weight:700;font-size:.78rem;padding:5px 12px;border-radius:999px;letter-spacing:.02em;}
.rk-card__badge--orange{background:var(--rk-orange);}
.rk-card__badge--teal{background:var(--rk-teal);}
.rk-card__type{font-family:var(--rk-font-head);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--rk-teal);}
.rk-card h3{margin:0;font-size:1.25rem;}
.rk-card__for{font-size:.92rem;color:var(--rk-ink-soft);}
.rk-card__pros,.rk-card__cons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.94rem;}
.rk-card__pros li,.rk-card__cons li{display:flex;gap:8px;align-items:flex-start;}
.rk-card__pros li::before{content:"";flex:0 0 16px;height:16px;margin-top:3px;background:var(--rk-green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;}
.rk-card__cons li::before{content:"";flex:0 0 16px;height:16px;margin-top:3px;background:var(--rk-orange);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 13H5v-2h14z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 13H5v-2h14z'/%3E%3C/svg%3E") center/contain no-repeat;}
.rk-card__price{font-family:var(--rk-font-head);font-weight:700;color:var(--rk-marine);font-size:1.05rem;margin-top:auto;}
.rk-card__price span{font-weight:400;font-size:.8rem;color:var(--rk-ink-soft);display:block;}
.rk-card .rk-btn{justify-content:center;}

/* =========================================================
   VERGELIJKINGSTABEL
   ========================================================= */
.rk-table-wrap{overflow-x:auto;border:1px solid var(--rk-line);border-radius:var(--rk-radius);box-shadow:var(--rk-shadow);}
table.rk-compare{width:100%;border-collapse:collapse;min-width:560px;background:#fff;}
.rk-compare th,.rk-compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--rk-line);font-size:.96rem;}
.rk-compare thead th{background:var(--rk-marine);color:#fff;font-family:var(--rk-font-head);font-weight:600;}
.rk-compare tbody th{font-family:var(--rk-font-head);color:var(--rk-marine);font-weight:600;background:var(--rk-grey);}
.rk-compare tr:last-child td,.rk-compare tr:last-child th{border-bottom:none;}
.rk-compare td.rk-yes{color:var(--rk-green);font-weight:600;}
.rk-compare td.rk-no{color:var(--rk-orange);}

/* =========================================================
   TYPE-UITLEGBLOK
   ========================================================= */
.rk-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;}
.rk-type{background:#fff;border:1px solid var(--rk-line);border-top:4px solid var(--rk-teal);border-radius:var(--rk-radius-sm);padding:22px;display:flex;flex-direction:column;gap:10px;}
.rk-type--water{border-top-color:var(--rk-teal);}
.rk-type--lucht{border-top-color:var(--rk-orange);}
.rk-type--magnetisch{border-top-color:var(--rk-green);}
.rk-type__icon{width:44px;height:44px;border-radius:12px;background:var(--rk-grey);display:flex;align-items:center;justify-content:center;color:var(--rk-teal);}
.rk-type h3{margin:0;font-size:1.15rem;}
.rk-type p{margin:0;font-size:.95rem;color:var(--rk-ink-soft);}
.rk-type__for{font-size:.86rem;font-family:var(--rk-font-head);font-weight:600;color:var(--rk-teal-dark);margin-top:auto;}

/* =========================================================
   PRIJSKLASSE-INDICATIE
   ========================================================= */
.rk-price-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.rk-tier{background:#fff;border:1px solid var(--rk-line);border-radius:var(--rk-radius);padding:24px;text-align:center;}
.rk-tier--mid{border:2px solid var(--rk-teal);position:relative;}
.rk-tier__label{font-family:var(--rk-font-head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--rk-teal);}
.rk-tier__range{font-family:var(--rk-font-head);font-size:1.5rem;font-weight:800;color:var(--rk-marine);margin:6px 0;}
.rk-tier p{font-size:.92rem;color:var(--rk-ink-soft);margin:0;}

/* =========================================================
   HOWTO-STAPPEN
   ========================================================= */
.rk-steps{counter-reset:step;display:flex;flex-direction:column;gap:16px;}
.rk-step{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--rk-line);border-radius:var(--rk-radius-sm);padding:20px;}
.rk-step::before{counter-increment:step;content:counter(step);flex:0 0 40px;height:40px;border-radius:50%;background:var(--rk-teal);color:#fff;font-family:var(--rk-font-head);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.rk-step h3{margin:0 0 4px;font-size:1.1rem;}
.rk-step p{margin:0;font-size:.95rem;color:var(--rk-ink-soft);}

/* =========================================================
   FAQ-ACCORDEON
   ========================================================= */
.rk-faq{display:flex;flex-direction:column;gap:12px;}
.rk-faq details{background:#fff;border:1px solid var(--rk-line);border-radius:var(--rk-radius-sm);overflow:hidden;}
.rk-faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:var(--rk-font-head);font-weight:600;color:var(--rk-marine);font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.rk-faq summary::-webkit-details-marker{display:none;}
.rk-faq summary::after{content:"+";font-size:1.5rem;color:var(--rk-teal);flex:0 0 auto;transition:transform .2s;}
.rk-faq details[open] summary::after{transform:rotate(45deg);}
.rk-faq details p{margin:0;padding:0 22px 20px;color:var(--rk-ink-soft);font-size:.98rem;}

/* =========================================================
   DISCLOSURE-BOX
   ========================================================= */
.rk-disclosure{background:var(--rk-grey);border:1px solid var(--rk-line);border-left:4px solid var(--rk-teal);border-radius:var(--rk-radius-sm);padding:16px 20px;font-size:.92rem;color:var(--rk-ink-soft);display:flex;gap:12px;align-items:flex-start;}
.rk-disclosure svg{flex:0 0 auto;margin-top:2px;color:var(--rk-teal);}
.rk-disclosure strong{color:var(--rk-marine);}

/* =========================================================
   CTA BAND
   ========================================================= */
.rk-ctaband{background:linear-gradient(120deg,var(--rk-teal),var(--rk-teal-dark));color:#fff;border-radius:var(--rk-radius);padding:clamp(28px,5vw,48px);text-align:center;}
.rk-ctaband h2{color:#fff;margin:0 0 10px;}
.rk-ctaband p{color:#e4f3f7;margin:0 0 22px;font-size:1.08rem;}

/* =========================================================
   LINK-HUB / TEGELS
   ========================================================= */
.rk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.rk-tile{display:block;background:#fff;border:1px solid var(--rk-line);border-radius:var(--rk-radius-sm);padding:20px;text-decoration:none;color:var(--rk-marine);transition:border-color .14s,transform .14s;}
.rk-tile:hover{border-color:var(--rk-teal);transform:translateY(-2px);color:var(--rk-marine);}
.rk-tile strong{font-family:var(--rk-font-head);display:block;font-size:1.05rem;margin-bottom:4px;}
.rk-tile span{font-size:.88rem;color:var(--rk-ink-soft);}

/* =========================================================
   FOOTER
   ========================================================= */
.rk-footer{background:var(--rk-marine);color:#b9c9d6;padding:54px 0 28px;font-size:.94rem;}
.rk-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px;}
.rk-footer h4{color:#fff;font-size:1rem;margin:0 0 14px;}
.rk-footer a{color:#b9c9d6;text-decoration:none;}
.rk-footer a:hover{color:#fff;}
.rk-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.rk-footer__brand{font-family:var(--rk-font-head);font-weight:800;color:#fff;font-size:1.2rem;margin:0 0 10px;}
.rk-footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.85rem;color:#8ba1b3;}

/* =========================================================
   CONTENT (page/single)
   ========================================================= */
.rk-content{padding:clamp(32px,5vw,56px) 0;}
.rk-content .rk-narrow>*{margin-bottom:1.1em;}
.rk-content ul,.rk-content ol{padding-left:1.3em;}
.rk-content li{margin-bottom:.4em;}
.rk-content blockquote{border-left:4px solid var(--rk-teal);background:var(--rk-grey);margin:1.5em 0;padding:16px 22px;border-radius:0 var(--rk-radius-sm) var(--rk-radius-sm) 0;color:var(--rk-ink-soft);}
.rk-page-hero{background:var(--rk-grey);border-bottom:1px solid var(--rk-line);padding:clamp(32px,5vw,56px) 0;}
.rk-page-hero .rk-breadcrumb{font-size:.85rem;color:var(--rk-ink-soft);margin-bottom:10px;}
.rk-page-hero h1{margin:0;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:900px){
  .rk-hero-inner{grid-template-columns:1fr;gap:32px;}
  .rk-usp{grid-template-columns:repeat(2,1fr);}
  .rk-price-tiers{grid-template-columns:1fr;}
  .rk-footer-grid{grid-template-columns:1fr;gap:28px;}
}
@media(max-width:1024px){
  .rk-nav a{display:none;}
}
@media(max-width:560px){
  .rk-nav .rk-btn{display:none;}
  .rk-usp{grid-template-columns:1fr;}
}