/*
Theme Name: Toetwonen Botanisch
Theme URI: https://toetwonen.nl
Description: Zelfstandig, botanisch-redactioneel blogthema voor toetwonen.nl. Magazine-indeling met grote foto's, diepgroen en cremekleurig canvas, terracotta accenten — volledig in het Inter-lettertype. Eigen header en footer, leesvriendelijke artikelweergave met leesbalk, leestijd, auteursblok en verwante artikelen.
Author: toetwonen
Version: 1.0.3
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: toetwonen-botanisch
*/

:root{
  --g-deep:#1f3d2b;
  --g-deeper:#16291d;
  --cream:#f6f3ea;
  --surface:#fffdf8;
  --ink:#24302a;
  --ink-soft:#4f594a;
  --muted:#8a917f;
  --line:#e6e0d2;
  --line-soft:#efeae0;
  --terra:#c9714e;
  --terra-ink:#a8512e;
  --terra-soft:#f3e2d8;
  --sage:#cdddbf;
  --leaf:#e7f0e4;
  --leaf-ink:#3f6e3a;
  --radius:16px;
  --radius-sm:10px;
  --maxread:720px;
  --maxwide:1140px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.tw-wrap{max-width:var(--maxwide);margin:0 auto;padding:0 24px}
.tw-read{max-width:var(--maxread);margin:0 auto}

/* ============ Reading progress ============ */
#tw-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--terra);z-index:9999;transition:width .08s linear}

/* ============ Header ============ */
.tw-header{background:var(--g-deep);color:#eef3e7}
.tw-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;max-width:var(--maxwide);margin:0 auto}
.tw-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:22px;letter-spacing:-.02em;color:#fff}
.tw-brand .leaf{width:30px;height:30px;border-radius:8px;background:#2c5039;display:inline-flex;align-items:center;justify-content:center;color:#bcd3a6;font-size:18px}
.tw-brand img{max-height:40px;width:auto}
.tw-nav{display:flex;gap:26px;flex-wrap:wrap}
.tw-nav a{font-size:14.5px;color:#d6e0cd;font-weight:500}
.tw-nav a:hover,.tw-nav .current-menu-item a,.tw-nav .current_page_item a{color:#fff}
.tw-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.tw-burger{display:none;background:none;border:0;color:#eef3e7;font-size:24px;cursor:pointer}
@media(max-width:860px){
  .tw-nav{display:none;width:100%;flex-direction:column;gap:6px;padding:6px 0 4px}
  .tw-nav ul{flex-direction:column;gap:6px}
  .tw-nav.open{display:flex}
  .tw-burger{display:block}
  .tw-header .bar{flex-wrap:wrap}
}

/* ============ Section header ============ */
.tw-kicker{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.tw-kicker span.l{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#5d6b58;font-weight:600;white-space:nowrap}
.tw-kicker span.rule{flex:1;height:1px;background:var(--line)}
.tw-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
.tw-sec-head h2{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--g-deep)}
.tw-sec-head a{font-size:13.5px;color:var(--terra-ink);font-weight:600}

/* ============ Tag / pill ============ */
.tw-tag{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--terra-ink);background:var(--terra-soft);padding:5px 11px;border-radius:999px}

/* ============ Hero / featured ============ */
.tw-hero{padding:34px 0 8px}
.tw-feat{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:stretch}
.tw-feat .img{border-radius:var(--radius);overflow:hidden;background:var(--sage);min-height:330px;position:relative}
.tw-feat .img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.tw-feat .img .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#7fa074;font-size:60px}
.tw-feat .txt{display:flex;flex-direction:column;justify-content:center}
.tw-feat h1{font-size:clamp(28px,3.4vw,38px);line-height:1.1;font-weight:700;letter-spacing:-.025em;margin:14px 0 12px;color:var(--g-deep)}
.tw-feat h1 a:hover{color:var(--terra-ink)}
.tw-feat p{font-size:16px;color:var(--ink-soft);margin:0 0 18px}
@media(max-width:780px){.tw-feat{grid-template-columns:1fr}.tw-feat .img{min-height:230px}}

.tw-byline{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.tw-byline .av{width:30px;height:30px;border-radius:999px;object-fit:cover;background:var(--leaf)}
.tw-byline .nm{color:var(--ink);font-weight:500}
.tw-byline .dot{width:3px;height:3px;border-radius:999px;background:currentColor;display:inline-block}

/* ============ Card grid ============ */
.tw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:8px 0 0}
@media(max-width:980px){.tw-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tw-grid{grid-template-columns:1fr}}
.tw-card{display:flex;flex-direction:column}
.tw-card .thumb{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--leaf);position:relative}
.tw-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.tw-card .thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#82a075;font-size:38px}
.tw-card:hover .thumb img{transform:scale(1.04)}
.tw-card h3{font-size:18.5px;line-height:1.28;font-weight:600;letter-spacing:-.01em;margin:11px 0 6px;color:var(--ink)}
.tw-card h3 a:hover{color:var(--terra-ink)}
.tw-card .meta{font-size:12.5px;color:var(--muted);margin-top:auto}
.tw-card .tw-tag{margin:12px 0 0}

/* ============ Plantengids strip ============ */
.tw-strip{margin:40px 0 8px;padding:28px 30px;background:var(--g-deep);border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:20px}
.tw-strip h2{font-size:23px;font-weight:700;color:#fff;margin:0 0 5px}
.tw-strip p{font-size:14.5px;color:#bcc9b3;margin:0}
.tw-btn{display:inline-block;background:var(--terra);color:#fff;font-size:14.5px;font-weight:600;padding:12px 20px;border-radius:var(--radius-sm);white-space:nowrap}
.tw-btn:hover{background:#b5613f}
.tw-btn.ghost{background:transparent;border:1px solid var(--g-deep);color:var(--g-deep)}
@media(max-width:680px){.tw-strip{flex-direction:column;align-items:flex-start}}

/* ============ Listing head ============ */
.tw-listhead{padding:40px 0 4px}
.tw-listhead h1{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.025em;margin:0 0 8px;color:var(--g-deep)}
.tw-listhead p{font-size:16px;color:var(--muted);margin:0;max-width:640px}

/* ============ Pagination ============ */
.tw-pag{display:flex;justify-content:center;gap:8px;padding:34px 0 60px;flex-wrap:wrap}
.tw-pag .page-numbers{display:inline-flex;min-width:42px;height:42px;align-items:center;justify-content:center;padding:0 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:14px;font-weight:500}
.tw-pag .page-numbers.current{background:var(--g-deep);border-color:var(--g-deep);color:#fff}
.tw-pag a.page-numbers:hover{border-color:var(--terra);color:var(--terra-ink)}

/* ============ Single article ============ */
.tw-article{padding:30px 0 56px}
.tw-eyebrow{margin-bottom:12px}
.tw-eyebrow a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-ink);font-weight:600}
.tw-article h1.tw-title{font-size:clamp(30px,4.2vw,46px);line-height:1.1;letter-spacing:-.03em;font-weight:700;margin:0 0 16px;color:var(--g-deep)}
.tw-article .tw-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;font-size:14px;color:var(--muted);margin-bottom:26px}
.tw-article .tw-meta .nm{color:var(--ink);font-weight:500}
.tw-bighero{margin:0 0 30px}
.tw-bighero img{width:100%;max-height:540px;object-fit:cover;border-radius:var(--radius)}
.tw-bighero figcaption{font-size:12px;color:var(--muted);margin-top:8px;text-align:center}

.tw-content{font-size:18px;line-height:1.78;color:var(--ink-soft)}
.tw-content > *{margin:0 0 1.25em}
.tw-content h2{font-size:27px;line-height:1.25;font-weight:700;letter-spacing:-.02em;color:var(--g-deep);margin:1.9em 0 .5em}
.tw-content h3{font-size:21px;font-weight:600;color:var(--ink);margin:1.6em 0 .4em}
.tw-content a{color:var(--terra-ink);text-decoration:underline;text-underline-offset:2px}
.tw-content img,.tw-content figure img{border-radius:12px}
.tw-content figure{margin:1.6em 0}
.tw-content figcaption{font-size:13px;color:var(--muted);margin-top:7px;text-align:center}
.tw-content blockquote{margin:1.7em 0;padding:8px 0 8px 24px;border-left:3px solid var(--terra);font-size:22px;line-height:1.5;color:var(--g-deep);font-weight:500}
.tw-content ul,.tw-content ol{padding-left:1.3em}
.tw-content li{margin:.4em 0}
.tw-content hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.tw-content code{background:var(--terra-soft);padding:.12em .4em;border-radius:6px;font-size:.9em}

.tw-tags{margin:30px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.tw-tags a{font-size:13px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.tw-tags a:hover{border-color:var(--terra);color:var(--terra-ink)}

.tw-authorbox{display:flex;gap:16px;align-items:flex-start;margin:38px 0 0;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.tw-authorbox img{width:58px;height:58px;border-radius:999px;object-fit:cover;flex:0 0 auto}
.tw-authorbox .n{font-weight:600;font-size:16px;color:var(--ink)}
.tw-authorbox .b{font-size:14.5px;color:var(--ink-soft);margin-top:3px}

.tw-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px 0 0}
.tw-pn a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tw-pn a:hover{border-color:var(--terra)}
.tw-pn .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.tw-pn .t{font-weight:600;font-size:15px;line-height:1.35;color:var(--ink)}
.tw-pn .nx{text-align:right}
@media(max-width:600px){.tw-pn{grid-template-columns:1fr}}

.tw-related{padding:46px 0 8px}
.tw-related h2{font-size:23px;font-weight:700;letter-spacing:-.01em;margin:0 0 18px;color:var(--g-deep)}

/* ============ Page (static) ============ */
.tw-page{padding:40px 0 56px}
.tw-page h1.tw-title{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.025em;color:var(--g-deep);margin:0 0 24px}

/* ============ Footer ============ */
.tw-footer{background:var(--g-deeper);color:#aebfa3;margin-top:48px}
.tw-footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding:46px 24px 30px;max-width:var(--maxwide);margin:0 auto}
.tw-footer h4{color:#eef3e7;font-size:14px;font-weight:600;margin:0 0 12px;letter-spacing:.02em}
.tw-footer .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:22px;color:#fff;margin-bottom:10px}
.tw-footer p{font-size:14px;line-height:1.7;margin:0;color:#9fb295}
.tw-footer ul{list-style:none;margin:0;padding:0}
.tw-footer li{margin:0 0 8px}
.tw-footer a{font-size:14px;color:#bcc9b3}
.tw-footer a:hover{color:#fff}
.tw-footer .bottom{border-top:1px solid #24402e;padding:18px 24px;font-size:12.5px;color:#8a9c80;text-align:center}
@media(max-width:760px){.tw-footer .top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tw-footer .top{grid-template-columns:1fr}}

/* ============ Search form ============ */
.tw-search{display:flex;gap:8px;max-width:420px}
.tw-search input[type=search]{flex:1;padding:11px 15px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-family:inherit;background:var(--surface);color:var(--ink)}
.tw-search button{border:0;background:var(--g-deep);color:#fff;border-radius:999px;padding:0 18px;font-weight:600;cursor:pointer}

/* ============ Force Inter on headings (beats Elementor/global !important font rules) ============ */
.tw-feat h1, .tw-feat h1 a,
.tw-article h1.tw-title,
.tw-listhead h1,
.tw-page h1.tw-title,
.tw-sec-head h2,
.tw-related h2,
.tw-strip h2,
.tw-content h2, .tw-content h3,
.tw-card h3, .tw-card h3 a,
.tw-authorbox .n,
.tw-footer h4, .tw-footer .brand,
.tw-brand,
.tw-pn .t{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  font-style:normal !important;
  text-transform:none !important;
}
.tw-feat h1, .tw-feat h1 a, .tw-article h1.tw-title, .tw-listhead h1,
.tw-page h1.tw-title, .tw-sec-head h2, .tw-related h2, .tw-content h2{
  color:var(--g-deep) !important;
}
.tw-card h3, .tw-card h3 a, .tw-content h3, .tw-pn .t{ color:var(--ink) !important; }
.tw-strip h2, .tw-footer h4, .tw-footer .brand{ color:#fff !important; }