/* Blog "Tuinadvies" (zie inc/blog.php en build/12-blog.php). Kleuren en lettertypes komen uit bsh.css. */

/* ---------- Artikel: kop ---------- */
.bsh-blogmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--bsh-grijs); font: 400 14px/1.4 var(--bsh-tekst); }
.bsh-blogmeta__item { display: inline-flex; align-items: center; gap: 6px; }
.bsh-blogpil { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--bsh-perzik); color: var(--bsh-oranje-donker); font: 700 13px/1 var(--bsh-kop); text-decoration: none; }
.bsh-blogpil:hover { background: var(--bsh-oranje); color: var(--bsh-zwart); }
.bsh-blogtitel h1, h1.bsh-blogtitel { font: 700 clamp(28px, 4vw, 44px)/1.12 var(--bsh-kop); color: var(--bsh-zwart); margin: 0; letter-spacing: -.01em; }
.bsh-blogbeeld img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bsh-r-module); display: block; }

/* ---------- Artikel: lopende tekst ---------- */
.bsh-blogtekst { color: var(--bsh-antraciet); font: 400 17px/1.7 var(--bsh-tekst); max-width: 780px; }
.bsh-blogtekst > * + * { margin-top: 1.1em; }
.bsh-blogtekst p { margin: 0 0 1.1em; }
.bsh-blogtekst h2 { font: 700 clamp(24px, 2.6vw, 30px)/1.2 var(--bsh-kop); color: var(--bsh-zwart); margin: 1.8em 0 .55em; scroll-margin-top: 110px; }
.bsh-blogtekst h3 { font: 700 21px/1.3 var(--bsh-kop); color: var(--bsh-zwart); margin: 1.5em 0 .45em; scroll-margin-top: 110px; }
.bsh-blogtekst h4 { font: 700 18px/1.35 var(--bsh-kop); margin: 1.3em 0 .4em; }
.bsh-blogtekst ul, .bsh-blogtekst ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.bsh-blogtekst li { margin: .35em 0; }
.bsh-blogtekst li::marker { color: var(--bsh-oranje-donker); }
.bsh-blogtekst a { color: var(--bsh-oranje-donker); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bsh-blogtekst a:hover { color: var(--bsh-zwart); }
.bsh-blogtekst strong { color: var(--bsh-zwart); }
.bsh-blogtekst figure { margin: 1.6em 0; }
.bsh-blogtekst figure img { border-radius: var(--bsh-r-kaart); height: auto; max-width: 100%; }
.bsh-blogtekst figcaption { margin-top: 8px; color: var(--bsh-grijs); font-size: 14px; line-height: 1.5; text-align: left; }
.bsh-blogtekst blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--bsh-oranje); font-style: italic; }
.bsh-tekstprijs { white-space: nowrap; font-weight: 700; color: var(--bsh-zwart); }

/* Kort antwoord (BLUF) */
.bsh-blogtekst .bsh-bluf { background: var(--bsh-perzik); border-left: 5px solid var(--bsh-oranje); border-radius: var(--bsh-r-kaart); padding: 20px 24px; margin: 1.4em 0 1.6em; }
.bsh-blogtekst .bsh-bluf p { margin: 0; }
.bsh-blogtekst .bsh-bluf p + p { margin-top: .7em; }

/* Tip, let op */
.bsh-blogtekst .bsh-tip, .bsh-blogtekst .bsh-letop { border-radius: var(--bsh-r-kaart); padding: 16px 20px; margin: 1.4em 0; }
.bsh-blogtekst .bsh-tip { background: #EAF4EA; border-left: 5px solid var(--bsh-groen); }
.bsh-blogtekst .bsh-letop { background: #FCEDEC; border-left: 5px solid var(--bsh-rood); }
.bsh-blogtekst .bsh-tip p, .bsh-blogtekst .bsh-letop p { margin: 0; }

/* Plus- en minpunten */
.bsh-blogtekst .bsh-plusmin { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.2em 0 1.6em; }
.bsh-blogtekst .bsh-plusmin > * { margin: 0; background: var(--bsh-grond); border-radius: var(--bsh-r-kaart); padding: 16px 18px; }
.bsh-blogtekst .bsh-plusmin ul { list-style: none; padding: 0; margin: 0; }
.bsh-blogtekst .bsh-plusmin li { position: relative; padding-left: 26px; }
.bsh-blogtekst .bsh-plus li::before, .bsh-blogtekst .bsh-min li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.bsh-blogtekst .bsh-plus li::before { content: "+"; color: var(--bsh-groen); }
.bsh-blogtekst .bsh-min li::before { content: "\2212"; color: var(--bsh-rood); }
.bsh-blogtekst .bsh-plusmin p { margin: 0 0 .4em; font: 700 16px/1.3 var(--bsh-kop); color: var(--bsh-zwart); }

/* Call to action */
.bsh-blogtekst .bsh-cta { background: var(--bsh-zwart); color: var(--bsh-wit); border-radius: var(--bsh-r-module); padding: 24px 28px; margin: 2em 0; }
.bsh-blogtekst .bsh-cta p { margin: 0 0 14px; color: var(--bsh-wit); }
.bsh-blogtekst .bsh-cta strong { color: var(--bsh-wit); }
.bsh-blogtekst .bsh-cta .wp-block-buttons { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bsh-blogtekst .bsh-cta .wp-block-button__link, .bsh-blogtekst .wp-block-button__link { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: var(--bsh-r-knop); background: var(--bsh-oranje); color: var(--bsh-zwart); font: 700 15px/1 var(--bsh-kop); text-decoration: none; }
.bsh-blogtekst .wp-block-button__link:hover { background: var(--bsh-oranje-donker); color: var(--bsh-wit); }

/* Tabellen */
.bsh-blogtekst .wp-block-table { overflow-x: auto; margin: 1.4em 0 1.8em; -webkit-overflow-scrolling: touch; }
.bsh-blogtekst table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; min-width: 520px; }
.bsh-blogtekst th { background: var(--bsh-zwart); color: var(--bsh-wit); font: 700 14px/1.3 var(--bsh-kop); text-align: left; padding: 12px 14px; }
.bsh-blogtekst th:first-child { border-top-left-radius: 10px; }
.bsh-blogtekst th:last-child { border-top-right-radius: 10px; }
.bsh-blogtekst td { padding: 11px 14px; border-bottom: 1px solid var(--bsh-rand-licht); vertical-align: top; }
.bsh-blogtekst tbody tr:nth-child(even) td { background: var(--bsh-grond); }
.bsh-blogtekst .wp-block-table figcaption { margin-top: 8px; }

/* Inhoudsopgave (Rank Math) */
.bsh-blogtekst .wp-block-rank-math-toc-block { background: var(--bsh-grond); border-radius: var(--bsh-r-kaart); padding: 20px 24px; margin: 1.6em 0 2em; }
.bsh-blogtekst .wp-block-rank-math-toc-block h2 { font: 700 18px/1.3 var(--bsh-kop); margin: 0 0 10px; }
.bsh-blogtekst .wp-block-rank-math-toc-block nav > ul { counter-reset: toc; list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 28px; }
.bsh-blogtekst .wp-block-rank-math-toc-block nav > ul > li { counter-increment: toc; break-inside: avoid; position: relative; padding-left: 28px; margin: 0 0 6px; font-size: 15px; line-height: 1.45; }
.bsh-blogtekst .wp-block-rank-math-toc-block nav > ul > li::before { content: counter(toc) "."; position: absolute; left: 0; color: var(--bsh-oranje-donker); font-weight: 700; }
.bsh-blogtekst .wp-block-rank-math-toc-block ul ul { list-style: none; padding: 4px 0 0 0; margin: 0; }
.bsh-blogtekst .wp-block-rank-math-toc-block ul ul li { font-size: 14px; margin: 2px 0; }
.bsh-blogtekst .wp-block-rank-math-toc-block a { text-decoration: none; color: var(--bsh-antraciet); }
.bsh-blogtekst .wp-block-rank-math-toc-block a:hover { color: var(--bsh-oranje-donker); text-decoration: underline; }

/* Veelgestelde vragen (Rank Math) */
.bsh-blogtekst .wp-block-rank-math-faq-block { display: grid; gap: 10px; margin: 1em 0 1.6em; }
.bsh-blogtekst .rank-math-faq-item { border: 1px solid var(--bsh-rand); border-radius: var(--bsh-r-kaart); padding: 16px 20px; background: var(--bsh-wit); }
.bsh-blogtekst .rank-math-question { font: 700 18px/1.35 var(--bsh-kop); margin: 0 0 6px; }
.bsh-blogtekst .rank-math-answer { font-size: 16px; line-height: 1.65; }

/* Productkaarten in de tekst (seo-teksten.php vervangt de lijst door kaarten) */
.bsh-blogtekst .bsh-tekstkaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.4em 0 1.8em; }
.bsh-blogtekst .bsh-tekstkaarten a { text-decoration: none; }
.bsh-blogtekst ul.bsh-combineer { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bsh-blogtekst ul.bsh-combineer img { aspect-ratio: 1; object-fit: contain; background: var(--bsh-fotovlak); }

/* Bronnen */
.bsh-blogtekst .bsh-bronnen { font-size: 15px; color: var(--bsh-grijs); }
.bsh-blogtekst .bsh-bronnen a { color: var(--bsh-grijs); word-break: break-word; }

/* ---------- Artikel: zijbalk en onderkant ---------- */
.bsh-cluster__titel { font: 700 18px/1.3 var(--bsh-kop); color: var(--bsh-zwart); margin: 0 0 10px; }
.bsh-cluster ol { list-style: none; counter-reset: cl; margin: 0; padding: 0; }
.bsh-cluster li { counter-increment: cl; position: relative; padding: 9px 0 9px 34px; border-top: 1px solid var(--bsh-rand-licht); font: 400 15px/1.4 var(--bsh-tekst); }
.bsh-cluster li:first-child { border-top: 0; }
.bsh-cluster li::before { content: counter(cl); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--bsh-grond); color: var(--bsh-grijs); font: 700 12px/24px var(--bsh-kop); text-align: center; }
.bsh-cluster li.is-pillar::before { content: "\2605"; background: var(--bsh-oranje); color: var(--bsh-zwart); }
.bsh-cluster a { color: var(--bsh-antraciet); text-decoration: none; }
.bsh-cluster a:hover { color: var(--bsh-oranje-donker); text-decoration: underline; }
.bsh-cluster .is-huidig span { font-weight: 700; color: var(--bsh-zwart); }
.bsh-cluster .is-huidig::before { background: var(--bsh-zwart); color: var(--bsh-wit); }

.bsh-shoplink { background: var(--bsh-perzik); border-radius: var(--bsh-r-module); padding: 20px; display: grid; gap: 8px; }
.bsh-shoplink p { margin: 0; font-size: 15px; }
.bsh-shoplink__titel { font: 700 18px/1.3 var(--bsh-kop); color: var(--bsh-zwart); }
.bsh-shoplink .bsh-knop { margin-top: 6px; justify-self: start; }

.bsh-auteur { display: flex; gap: 18px; align-items: flex-start; background: var(--bsh-grond); border-radius: var(--bsh-r-module); padding: 22px 24px; }
.bsh-auteur__beeld { flex: 0 0 56px; height: 56px; border-radius: 50%; background: var(--bsh-oranje); color: var(--bsh-zwart); display: grid; place-items: center; }
.bsh-auteur p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--bsh-antraciet); }
.bsh-auteur__naam { font: 700 17px/1.3 var(--bsh-kop) !important; color: var(--bsh-zwart) !important; margin-bottom: 4px !important; }

/* ---------- Overzicht en categorieën ---------- */
.bsh-blogkop h1 { font: 700 clamp(30px, 4vw, 46px)/1.1 var(--bsh-kop); color: var(--bsh-zwart); margin: 10px 0 10px; }
.bsh-blogkop__intro { max-width: 820px; color: var(--bsh-antraciet); font: 400 17px/1.65 var(--bsh-tekst); }
.bsh-blogkop__intro p { margin: 0 0 .8em; }
.bsh-blogkop__intro a { color: var(--bsh-oranje-donker); }

.bsh-onderwerpen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.bsh-onderwerp a { display: grid; gap: 4px; background: var(--bsh-wit); border-radius: var(--bsh-r-kaart); padding: 10px 10px 14px; text-decoration: none; color: var(--bsh-zwart); height: 100%; transition: box-shadow var(--bsh-snel); }
.bsh-onderwerp a:hover { box-shadow: 0 0 0 2px var(--bsh-oranje); }
.bsh-onderwerp__beeld { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--bsh-fotovlak); margin-bottom: 6px; }
.bsh-onderwerp__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsh-onderwerp__naam { font: 700 17px/1.25 var(--bsh-kop); padding: 0 4px; }
.bsh-onderwerp__aantal { font-size: 14px; color: var(--bsh-grijs); padding: 0 4px; }

.bsh-artikels__titel { font: 700 26px/1.2 var(--bsh-kop); color: var(--bsh-zwart); margin: 0 0 16px; }
.bsh-artikels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bsh-artikel { background: var(--bsh-wit); border-radius: var(--bsh-r-module); overflow: hidden; transition: box-shadow var(--bsh-snel); }
.bsh-artikel:hover { box-shadow: 0 0 0 2px var(--bsh-oranje); }
.bsh-artikel__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.bsh-artikel__beeld { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bsh-fotovlak); overflow: hidden; }
.bsh-artikel__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsh-artikel__label { position: absolute; left: 12px; top: 12px; background: var(--bsh-oranje); color: var(--bsh-zwart); border-radius: 999px; padding: 6px 12px; font: 700 12px/1 var(--bsh-kop); }
.bsh-artikel__tekst { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; flex: 1; }
.bsh-artikel__onderwerp { font: 700 12px/1 var(--bsh-kop); text-transform: uppercase; letter-spacing: .06em; color: var(--bsh-oranje-donker); }
.bsh-artikel__titel { font: 700 19px/1.3 var(--bsh-kop); color: var(--bsh-zwart); }
.bsh-artikel__samenvatting { font-size: 15px; line-height: 1.55; color: var(--bsh-grijs); }
.bsh-artikel__leestijd { margin-top: auto; font-size: 13px; color: var(--bsh-grijs); }

.bsh-paginering ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: 24px 0 0; justify-content: center; flex-wrap: wrap; }
.bsh-paginering a, .bsh-paginering span { display: inline-flex; min-width: 42px; min-height: 42px; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--bsh-r-knop); background: var(--bsh-wit); color: var(--bsh-zwart); text-decoration: none; font: 700 15px/1 var(--bsh-kop); }
.bsh-paginering .current { background: var(--bsh-zwart); color: var(--bsh-wit); }

/* ---------- In de shop: verwijzingen naar de blog ---------- */
.bsh-gidslink { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font: 400 15px/1.4 var(--bsh-tekst); color: var(--bsh-antraciet); }
.bsh-gidslink a { font-weight: 700; color: var(--bsh-oranje-donker); }
.bsh-advies { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--bsh-rand-licht); }
.bsh-advies__titel { font: 700 22px/1.25 var(--bsh-kop); color: var(--bsh-zwart); margin: 0 0 12px; }
.bsh-advies ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.bsh-advies li { position: relative; padding-left: 22px; }
.bsh-advies li::before { content: "\203A"; position: absolute; left: 4px; top: -2px; color: var(--bsh-oranje-donker); font: 700 20px/1 var(--bsh-kop); }
.bsh-advies li.is-pillar { grid-column: 1 / -1; font-weight: 700; }
.bsh-advies a { color: var(--bsh-antraciet); }

/* ---------- Kleinere schermen ---------- */
@media (max-width: 1024px) {
	.bsh-artikels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsh-blogtekst .bsh-tekstkaarten, .bsh-blogtekst ul.bsh-combineer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.bsh-blogtekst { font-size: 16px; }
	.bsh-artikels { grid-template-columns: 1fr; }
	.bsh-blogtekst .wp-block-rank-math-toc-block nav > ul { columns: 1; }
	.bsh-blogtekst .bsh-plusmin { grid-template-columns: 1fr; }
	.bsh-advies ul { grid-template-columns: 1fr; }
	.bsh-auteur { flex-direction: column; }
	.bsh-onderwerpen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Zijbalk blijft in beeld tijdens het lezen (alleen op brede schermen) */
@media (min-width: 1025px) {
	.bsh-blogzij { position: sticky; top: 20px; }
}
.bsh-kruimel .rank-math-breadcrumb p { margin: 0; color: var(--bsh-grijs); font-size: 13px; }
.bsh-kruimel .rank-math-breadcrumb a { color: var(--bsh-grijs); text-decoration: underline; text-underline-offset: 3px; }
.bsh-kruimel .rank-math-breadcrumb .separator { margin: 0 6px; }

/* Veelgestelde vragen zoals Rank Math ze op de site rendert (dynamisch blok) */
.bsh-blogtekst #rank-math-faq .rank-math-list { display: grid; gap: 10px; margin: 1em 0 1.6em; }
.bsh-blogtekst #rank-math-faq .rank-math-list-item { border: 1px solid var(--bsh-rand); border-radius: var(--bsh-r-kaart); padding: 16px 20px; background: var(--bsh-wit); }
.bsh-blogtekst #rank-math-faq .rank-math-question { font: 700 18px/1.35 var(--bsh-kop); margin: 0 0 6px; color: var(--bsh-zwart); }
.bsh-blogtekst #rank-math-faq .rank-math-answer { font-size: 16px; line-height: 1.65; }
.bsh-blogtekst #rank-math-faq .rank-math-answer p { margin: 0; }

/* Lege clusternavigatie (nog maar één artikel live): het witte vak niet tonen */
.bsh-blogzij__cluster:not(:has(.bsh-cluster)) { display: none; }