/*
Theme Name: Berekenen BTW
Theme URI: https://www.berekenenbtw.net/
Author: First Concepts
Description: Snel, licht thema voor berekenenbtw.net. Rustig frame, luide tool. Bevat een btw-calculator via de shortcode [btw_calculator], paginatemplates voor tarief-, product- en landenpagina's, een blog en een donkere zee-footer. Geen page builder nodig, gebouwd op Core Web Vitals.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: berekenenbtw
*/

/* ============ Tokens ============ */
:root{
  --ink:#10262e; --muted:#5c737b; --line:#dce5e4; --mist:#e8eeed; --card:#fff;
  --teal:#0c7a85; --teal-d:#0a5b63; --sea:#0e353d; --sea-2:#123f48;
  --sun:#e7a23c; --sun-soft:#f3c887; --sea-txt:#c9dedf; --sea-lbl:#8fb1b4;
  --radius:16px; --radius-sm:11px;
}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);line-height:1.6;
  background:radial-gradient(120% 60% at 15% -5%, #f3f7f6 0%, rgba(243,247,246,0) 55%), var(--mist);
}
img{max-width:100%;height:auto;}
a{color:var(--teal);}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px;}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;}

/* ============ Merkstreep + header ============ */
.topline{height:4px;background:var(--teal);}
.topline::before{content:"";display:block;width:72px;height:4px;background:var(--sun);}
.site-header{background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;}
.nav{display:flex;align-items:center;gap:26px;min-height:66px;}
.brand{display:flex;align-items:center;gap:9px;font-size:1.22rem;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--ink);}
.brand svg{width:26px;height:26px;color:var(--teal);}
.brand b{color:var(--teal);font-weight:800;}
.brand img{max-height:42px;width:auto;}

.menu-primary{display:flex;align-items:center;gap:4px;margin-left:6px;list-style:none;padding:0;}
.menu-primary li{position:relative;}
.menu-primary a{display:block;font-size:.93rem;font-weight:600;color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:8px;transition:color .15s,background .15s;}
.menu-primary a:hover,.menu-primary .current-menu-item > a{color:var(--ink);}
.menu-primary ul{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -22px rgba(16,38,46,.4);padding:8px;list-style:none;margin:6px 0 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .16s;}
.menu-primary li:hover > ul{opacity:1;visibility:visible;transform:translateY(0);}
.menu-primary ul a{color:var(--ink);font-weight:600;padding:9px 12px;}
.menu-primary ul a:hover{background:var(--mist);}
.nav-cta{margin-left:auto;font-size:.9rem;font-weight:700;color:#fff;background:var(--teal);padding:9px 18px;border-radius:999px;text-decoration:none;transition:background .15s;white-space:nowrap;}
.nav-cta:hover{background:var(--teal-d);color:#fff;}
.nav-toggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-size:1rem;cursor:pointer;color:var(--ink);}

/* ============ Hero ============ */
.hero{padding:44px 0 30px;}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);margin:0 0 10px;}
.hero h1{font-size:clamp(2rem,5vw,3rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 12px;font-weight:800;}
.hero .lead{font-size:1.12rem;color:var(--muted);max-width:52ch;margin:0 0 26px;}

/* ============ Calculator (.btwx) ============ */
.btwx{--radius:16px;--radius-sm:11px;}
.btwx__grid{display:grid;grid-template-columns:1.62fr 1fr;gap:20px;align-items:start;}
.btwx__grid--solo{grid-template-columns:1fr;max-width:620px;}
.btwx__calc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 1px 2px rgba(16,38,46,.04),0 20px 44px -30px rgba(16,38,46,.4);}
.btwx__eyebrow{margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);}
.btwx__title{margin:0 0 20px;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;}
.btwx__field{margin-bottom:16px;}
.btwx__label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:8px;}
.btwx__amount{position:relative;display:flex;align-items:center;}
.btwx__cur{position:absolute;left:16px;font-size:1.3rem;font-weight:600;color:var(--muted);pointer-events:none;}
.btwx__input{width:100%;font-size:1.55rem;font-weight:600;font-variant-numeric:tabular-nums;padding:13px 16px 13px 38px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fbfcfc;color:var(--ink);transition:border-color .15s,box-shadow .15s;}
.btwx__input::placeholder{color:#aebcbd;font-weight:500;}
.btwx__input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(12,122,133,.16);background:#fff;}
.btwx__seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--mist);border-radius:12px;padding:5px;}
.btwx__segbtn{font:inherit;font-size:.94rem;font-weight:600;color:var(--muted);cursor:pointer;border:none;background:transparent;padding:11px 10px;border-radius:9px;transition:all .15s;}
.btwx__segbtn:hover{color:var(--ink);}
.btwx__segbtn.is-active{background:var(--teal);color:#fff;box-shadow:0 2px 8px -2px rgba(10,91,99,.5);}
.btwx__chips,.btwx__extra{display:flex;flex-wrap:wrap;gap:8px;}
.btwx__extra{margin-top:8px;align-items:center;}
.btwx__chip{font:inherit;font-size:.94rem;font-weight:600;color:var(--ink);cursor:pointer;border:1.5px solid var(--line);background:#fff;padding:9px 15px;border-radius:999px;transition:all .15s;}
.btwx__chip:hover{border-color:var(--teal);color:var(--teal);}
.btwx__chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff;}
.btwx__more{font:inherit;font-size:.9rem;font-weight:600;color:var(--teal);cursor:pointer;border:none;background:transparent;padding:9px 6px;text-decoration:underline;text-underline-offset:3px;}
.btwx__customwrap{position:relative;display:inline-flex;align-items:center;}
.btwx__custom{font:inherit;font-size:.94rem;font-weight:600;width:92px;padding:9px 26px 9px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);}
.btwx__custom:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(12,122,133,.16);}
.btwx__pct{position:absolute;right:13px;color:var(--muted);font-weight:600;font-size:.9rem;pointer-events:none;}
.btwx__results{margin-top:20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border-radius:14px;overflow:hidden;}
.btwx__res{background:var(--sea);padding:15px 16px 13px;display:flex;flex-direction:column;gap:3px;position:relative;}
.btwx__res--hero{background:var(--sea-2);}
.btwx__reslabel{font-size:.7rem;font-weight:600;letter-spacing:.04em;color:var(--sea-lbl);text-transform:uppercase;}
.btwx__resval{font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:700;font-variant-numeric:tabular-nums;color:var(--sea-txt);letter-spacing:-.01em;}
.btwx__res--hero .btwx__resval{color:var(--sun);}
.btwx__copy{align-self:flex-start;margin-top:2px;font:inherit;font-size:.72rem;font-weight:600;color:var(--sea-lbl);background:transparent;border:none;padding:2px 0;cursor:pointer;opacity:0;transition:opacity .15s,color .15s;}
.btwx__res:hover .btwx__copy,.btwx__copy:focus-visible{opacity:1;}
.btwx__copy:hover{color:#fff;}
.btwx__copy.is-done{opacity:1;color:var(--sun-soft);}
.btwx__hint{margin:12px 2px 0;font-size:.85rem;color:var(--muted);}
.btwx__hint.is-hidden{display:none;}
.btwx__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line);}
.btwx__linkbtn{font:inherit;font-size:.85rem;font-weight:600;color:var(--teal);background:transparent;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(12,122,133,.35);}
.btwx__linkbtn:hover{text-decoration-color:var(--teal);}
.btwx__formula{margin:14px 0 0;font-size:.88rem;color:var(--muted);background:var(--mist);border-radius:10px;padding:12px 14px;font-variant-numeric:tabular-nums;}

/* Advertenties */
.btwx__aside{display:flex;flex-direction:column;gap:14px;}
.promos{display:flex;flex-direction:column;gap:14px;}
.adlabel{margin:0 0 -2px 2px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#9db0b2;font-weight:600;}
.promo{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;transition:border-color .15s,box-shadow .15s,transform .15s;}
.promo:hover{border-color:#bcd0cf;box-shadow:0 14px 30px -22px rgba(16,38,46,.5);transform:translateY(-2px);}
.promo img{max-height:44px;max-width:170px;width:auto;object-fit:contain;}
.promo .promo__text{font-size:.9rem;color:var(--ink);line-height:1.45;}
.promo .promo__cta{font-size:.82rem;font-weight:700;color:#fff;background:var(--teal);padding:8px 14px;border-radius:999px;margin-top:2px;transition:background .15s;}
.promo:hover .promo__cta{background:var(--teal-d);}

/* ============ Trust bar ============ */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.5);margin-top:14px;}
.trust ul{display:flex;flex-wrap:wrap;gap:26px;list-style:none;margin:0;padding:16px 0;}
.trust li{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--ink);}
.tick{width:18px;height:18px;border-radius:50%;background:rgba(12,122,133,.12);color:var(--teal);display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex:0 0 auto;}

/* ============ Content ============ */
.main{padding:48px 0 40px;}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start;}
.layout--full{display:block;}
.col{max-width:760px;}
.breadcrumb{font-size:.85rem;color:var(--muted);margin:0 0 14px;}
.breadcrumb a{text-decoration:none;color:var(--muted);}
.breadcrumb a:hover{color:var(--teal);}
.entry-title{font-size:clamp(1.7rem,4vw,2.3rem);letter-spacing:-.02em;line-height:1.08;margin:0 0 18px;font-weight:800;}
.entry h2{font-size:1.55rem;letter-spacing:-.02em;margin:36px 0 8px;font-weight:700;}
.entry h3{font-size:1.15rem;margin:26px 0 6px;font-weight:700;}
.entry p,.entry ul,.entry ol{font-size:1.02rem;color:#28414a;}
.entry a{color:var(--teal);text-underline-offset:2px;}
.entry ul,.entry ol{padding-left:20px;}
.entry li{margin:6px 0;}
.entry img{border-radius:12px;}
.entry table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:18px 0;}
.entry th,.entry td{text-align:left;padding:13px 16px;font-size:.96rem;}
.entry thead th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--mist);}
.entry tbody tr + tr td{border-top:1px solid var(--line);}
blockquote{border-left:3px solid var(--sun);margin:20px 0;padding:6px 0 6px 18px;color:var(--muted);}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:12px 0 8px;}
.step .n{font-size:.8rem;font-weight:800;color:var(--sun);letter-spacing:.06em;}
.step h3{font-size:1.05rem;margin:6px 0 6px;font-weight:700;}
.step p{margin:0;font-size:.94rem;color:var(--muted);}

/* Update note */
.notecard{font-size:.92rem;color:var(--muted);background:rgba(231,162,60,.09);border:1px solid rgba(231,162,60,.35);border-radius:12px;padding:14px 16px;margin:20px 0;}
.notecard b{color:var(--ink);}

/* FAQ */
.faq details{border-top:1px solid var(--line);}
.faq details:last-of-type{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;padding:17px 2px;font-weight:700;font-size:1.02rem;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--teal);font-weight:700;font-size:1.3rem;line-height:1;}
.faq details[open] summary::after{content:"\2212";}
.faq details p{margin:0 2px 18px;color:var(--muted);font-size:.96rem;}

/* ============ Sidebar ============ */
.sidebar{position:sticky;top:86px;}
.widget{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px;}
.widget-title{font-size:.9rem;font-weight:700;margin:0 0 10px;}
.widget ul{list-style:none;margin:0;padding:0;}
.widget li a{display:block;padding:7px 0;font-size:.92rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
.widget li:last-child a{border-bottom:none;}
.widget li a:hover{color:var(--teal);}

/* ============ Blog ============ */
.postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;}
.postcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;}
.postcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(16,38,46,.5);}
.postcard .thumb{aspect-ratio:16/9;background:var(--mist);overflow:hidden;}
.postcard .thumb img{width:100%;height:100%;object-fit:cover;}
.postcard .body{padding:18px;}
.postcard .cat{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);}
.postcard h3{font-size:1.1rem;margin:6px 0 6px;letter-spacing:-.01em;}
.postcard .meta{font-size:.82rem;color:var(--muted);}

/* ============ Footer ============ */
.site-footer{background:var(--sea);color:var(--sea-txt);margin-top:24px;}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding:48px 0 34px;}
.fbrand .brand{color:#fff;}
.fbrand .brand b,.fbrand .brand svg{color:var(--sun-soft);}
.fbrand p{font-size:.9rem;color:var(--sea-lbl);max-width:32ch;margin:12px 0 0;}
.fcol h4{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sun);margin:0 0 12px;font-weight:700;}
.fcol ul{list-style:none;margin:0;padding:0;}
.fcol a{display:block;font-size:.92rem;color:var(--sea-txt);text-decoration:none;padding:5px 0;transition:color .15s;}
.fcol a:hover{color:#fff;}
.fbottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0 30px;font-size:.85rem;color:var(--sea-lbl);display:flex;flex-wrap:wrap;gap:6px 18px;}

/* ============ Toast + a11y ============ */
.btwx__toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);background:var(--ink);color:#fff;font-size:.85rem;font-weight:600;padding:10px 18px;border-radius:999px;box-shadow:0 12px 30px -10px rgba(16,38,46,.6);opacity:0;transition:opacity .2s,transform .2s;z-index:9999;}
.btwx__toast.is-show{opacity:1;transform:translateX(-50%) translateY(0);}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ============ Responsive ============ */
@media (max-width:860px){
  .menu-primary{display:none;}
  .nav-toggle{display:inline-flex;}
  .menu-primary.is-open{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 24px 18px;}
  .menu-primary.is-open li{position:static;}
  .menu-primary.is-open ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 12px;margin:0;}
  .nav-cta{margin-left:12px;}
  .btwx__grid{grid-template-columns:1fr;}
  .btwx__results{grid-template-columns:1fr;}
  .btwx__res{flex-direction:row;justify-content:space-between;align-items:baseline;}
  .btwx__reslabel{text-transform:none;}
  .btwx__copy{opacity:1;color:var(--sea-lbl);}
  .layout{grid-template-columns:1fr;gap:26px;}
  .sidebar{position:static;}
  .steps{grid-template-columns:1fr;gap:22px;}
  .fgrid{grid-template-columns:1fr 1fr;gap:26px;}
}

/* ------------------------------------------------------------------ *
 *  Calculator: volle breedte, advertentie boven en onder
 * ------------------------------------------------------------------ */
.btwx--stacked{max-width:none;margin-inline:0;display:flex;flex-direction:column;gap:16px;}
.hero .btwx--stacked{margin-top:26px;}
.btwx__ad{display:flex;flex-direction:column;gap:6px;}
.btwx__ad .promo{flex-direction:row;align-items:center;gap:16px;padding:16px 18px;}
.btwx__ad .promo img{max-height:52px;max-width:150px;flex:0 0 auto;}
.btwx__ad .promo .promo__text{flex:1;margin:0;}
.btwx__ad .promo .promo__cta{margin-top:0;white-space:nowrap;}
@media(max-width:520px){
  .btwx__ad .promo{flex-wrap:wrap;}
  .btwx__ad .promo img{max-height:40px;}
  .btwx__ad .promo .promo__cta{margin-left:auto;}
}

/* Pagina's zonder sidebar, inhoud gecentreerd */
.layout--full{display:block;}
.layout--full .col{max-width:760px;margin-inline:auto;}