/*
Theme Name: Sproet
Theme URI: https://www.etsy.com/shop/SproetPlants
Description: Childthema van Twenty Twenty-Five in de Sproet-huisstijl. Kleuren, lokale lettertypen (geen Google Fonts), kop en voet, een paginasjabloon zonder dubbele titel en een blogoverzicht per thema.
Author: Sproet
Template: twentytwentyfive
Version: 2.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sproet
*/

/* ==========================================================================
   Sproet · huisstijl voor WordPress (childthema van Twenty Twenty-Five)
   Kleuren en lettertypen staan in theme.json; hier alleen de opmaak van de
   Sproet-klassen (sp-...). Pas tekst en beelden gewoon aan in de editor.
   ========================================================================== */

:root {
	--sp-groen: #183D2E; --sp-salie: #78927F; --sp-lsalie: #B7C1A9; --sp-terra: #C87957;
	--sp-terra-ink: #98552F; --sp-zand: #D6B89B; --sp-creme: #F1EBDD; --sp-surface: #F8F4EA;
	--sp-fg: #24302A; --sp-muted: #566259; --sp-line: #DCD3BF;
	--sp-mono: var(--wp--preset--font-family--plex-mono);
	--sp-display: var(--wp--preset--font-family--bricolage);
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { text-wrap: balance; }
:where(.wp-site-blocks) :focus-visible { outline: 3px solid var(--sp-terra); outline-offset: 3px; border-radius: 4px; }

/* ---------- pagina-opbouw: secties zonder tussenruimte, eigen ritme ---------- */
.sp-main { margin-block-start: 0 !important; }
.sp-main > .wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks > footer { margin-block-start: 0; }
.sp-sect { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--sp-line); }
.sp-sect.sp-crumbs-wrap { padding-block: 1.4rem 0; border-top: 0; }
.sp-sect.sp-hero, .sp-sect.sp-home-hero { border-top: 0; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem); }
.sp-sect.sp-last { border-top: 0; }
.sp-sect > h2 { margin-block-start: .6rem; }
.sp-sect > .sp-intro { margin-block-start: .8rem; }
.sp-sect > .wp-block-columns { margin-block-start: 1.75rem; }

/* ---------- kleine typografie ---------- */
.sp-eyebrow, .sp-n, .sp-bl-t, .sp-soon {
	font-family: var(--sp-mono); font-weight: 500; font-size: .75rem; line-height: 1.2;
	text-transform: uppercase; letter-spacing: .12em; color: var(--sp-terra-ink); margin: 0;
}
.sp-soon { font-size: .9rem; letter-spacing: .08em; }
.sp-n { font-size: .8rem; letter-spacing: .04em; text-transform: none; }
.sp-intro { color: var(--sp-muted); max-width: 52ch; }
/* smalle tekstblokken links uitlijnen met de kolom, niet centreren (WordPress centreert kinderen van een 'constrained' groep) */
.sp-sect > .sp-intro, .sp-sect > .sp-lede { margin-left: max(0px, calc((100% - 1184px) / 2)) !important; margin-right: auto !important; }
.wp-block-post-content > .sp-lede { margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 760px)) / 2)) !important; margin-right: auto !important; }
.sp-lede { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 40ch; }
.sp-crumbs { font-family: var(--sp-mono); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sp-muted); margin: 0; }
.sp-crumbs a { text-decoration: none; color: inherit; }
.sp-crumbs a:hover { color: var(--sp-groen); text-decoration: underline; }
h1 .dot, h2 .dot { color: var(--sp-terra); }

.sp-tag {
	display: inline-block; width: fit-content; font-family: var(--sp-mono); font-weight: 500; font-size: .7rem; line-height: 1;
	text-transform: uppercase; letter-spacing: .1em; padding: .4rem .6rem; border-radius: 999px;
	border: 1px solid var(--sp-line); color: var(--sp-muted); margin: 0;
}
.sp-tag.is-new { background: var(--sp-terra-ink); border-color: var(--sp-terra-ink); color: var(--sp-creme); }

ul.sp-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
ul.sp-specs li { margin: 0; font-family: var(--sp-mono); font-weight: 500; font-size: .78rem; line-height: 1; padding: .45rem .6rem;
	border-radius: 6px; background: var(--sp-surface); color: var(--sp-muted); }

.sp-from { font-family: var(--sp-mono); font-weight: 500; font-size: .9rem; color: var(--sp-muted); }
.sp-from strong { font-family: var(--sp-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1; color: var(--sp-groen);
	letter-spacing: -.02em; margin-left: .35rem; }

/* ---------- knoppen ---------- */
.wp-block-button__link { transition: transform .15s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link { padding: .85rem 1.4rem; }
.sp-btns-light .wp-block-button__link { background: var(--sp-creme) !important; color: var(--sp-groen) !important; border-color: var(--sp-creme) !important; }
@media (prefers-reduced-motion: reduce) { .wp-block-button__link { transition: none; } .wp-block-button__link:hover { transform: none; } }

/* ---------- productpagina: hero ---------- */
.sp-hero-cols { gap: clamp(1.75rem, 5vw, 4rem); }
.sp-art { aspect-ratio: 1; border-radius: 28px; background: var(--sp-surface); border: 1px solid var(--sp-line);
	display: grid !important; place-items: center; max-width: 100%; }
.sp-art > * { margin: 0 !important; }
.sp-art .sp-art-img { width: 100%; justify-self: stretch; display: flex; justify-content: center; }
.sp-art .sp-art-img img { width: 70%; height: auto; }
.sp-hero-cols .wp-block-column:last-child > * + * { margin-block-start: 1rem; }
@media (max-width: 781px) { .sp-art { max-width: 15rem; } }

/* ---------- kaders, vinkjes, specificaties ---------- */
.sp-box { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 18px; padding: clamp(1.25rem, 3vw, 1.75rem); }
.sp-box > h3 { margin: 0; }
.sp-box > * + * { margin-block-start: 1rem; }
.sp-two .wp-block-column > .sp-box + .sp-box { margin-block-start: 1rem; }
ul.sp-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
ul.sp-ticks li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; margin: 0; }
ul.sp-ticks li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sp-terra); margin-top: .55rem; }
.sp-spec { margin: 0; }
.sp-spec table, .sp-spec table.has-fixed-layout { border: 0; table-layout: auto !important; width: 100%; border-collapse: collapse; }
.sp-spec td { border: 0; padding: .3rem 1.25rem .3rem 0; vertical-align: top; font-variant-numeric: tabular-nums; }
.sp-spec td:first-child { font-family: var(--sp-mono); font-weight: 500; font-size: .75rem; line-height: 1.9; text-transform: uppercase;
	letter-spacing: .08em; color: var(--sp-muted); white-space: nowrap; width: 1%; }

/* ---------- varianten als prijslijst ---------- */
.sp-variants { border-top: 1px solid var(--sp-line); margin-block-start: 1.75rem; }
.sp-variants > .sp-variant { margin: 0; }
.sp-variant { display: grid !important; grid-template-columns: 1fr auto; gap: .2rem 1.5rem; padding-block: 1.1rem; border-bottom: 1px solid var(--sp-line); align-items: baseline; }
.sp-variant > * { margin: 0 !important; }
.sp-vn { font-family: var(--sp-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: var(--sp-groen); grid-column: 1; }
.sp-vd { grid-column: 1; color: var(--sp-muted); font-size: .95rem; }
.sp-vp { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-family: var(--sp-display); font-weight: 700;
	font-size: 1.35rem; line-height: 1; color: var(--sp-groen); font-variant-numeric: tabular-nums; }
.sp-vp.is-small { font-family: var(--sp-mono); font-weight: 500; font-size: 1rem; }
.sp-vp em { display: block; font-style: normal; font-family: var(--sp-mono); font-weight: 500; font-size: .68rem; line-height: 1.3; color: var(--sp-terra-ink);
	text-transform: uppercase; letter-spacing: .08em; margin-top: .3rem; }

/* ---------- stappen ---------- */
.sp-how { gap: 1.75rem; }
.sp-how > .wp-block-column { border-top: 2px solid var(--sp-groen); padding-top: 1rem; }
.sp-how > .wp-block-column > * { margin-block: 0; }
.sp-how h3 { font-size: 1.2rem; margin-block-start: .55rem !important; }
.sp-how p:last-child { color: var(--sp-muted); margin-block-start: .45rem !important; font-size: .97rem; }

/* ---------- verzorging / tips ---------- */
.sp-care { gap: 1rem; }
.sp-care-card { gap: .8rem; padding: 1.1rem; border: 1px solid var(--sp-line); border-radius: 14px; height: 100%; }
.sp-care-card .sp-ic { flex: none; margin: 0; }
.sp-care-txt > * { margin: 0; }
.sp-care-txt h3 { font-size: 1.02rem; }
.sp-care-txt p { font-size: .93rem; color: var(--sp-muted); margin-top: .2rem; }

/* ---------- veelgestelde vragen ---------- */
.sp-faq { border-top: 1px solid var(--sp-line); margin-block-start: 1.5rem; }
.sp-faq > .wp-block-details { margin: 0; border-bottom: 1px solid var(--sp-line); }
.sp-faq summary { cursor: pointer; list-style: none; padding-block: 1rem; font-family: var(--sp-display); font-weight: 700; font-size: 1.08rem;
	line-height: 1.35; color: var(--sp-groen); display: flex; justify-content: space-between; gap: 1rem; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; font-family: var(--sp-mono); font-weight: 500; font-size: 1.3rem; line-height: 1; color: var(--sp-terra-ink); }
.sp-faq details[open] summary::after { content: "\2212"; }
.sp-faq details > p { padding-bottom: 1.1rem; margin: 0; color: var(--sp-muted); max-width: 62ch; }

/* ---------- modulekaarten (mospaal-toppers) ---------- */
.sp-mods { gap: 1rem; }
.sp-mod { height: 100%; padding: 1.35rem; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 18px; display: flex; flex-direction: column; }
.sp-mod > * { margin-block: 0 !important; }
.sp-mod > * + * { margin-block-start: .55rem !important; }
.sp-mod h3 { font-size: 1.25rem; }
.sp-mod p { font-size: .96rem; color: var(--sp-muted); }
.sp-mod .sp-specs { margin-top: auto !important; padding-top: .5rem; }
.sp-mod .sp-specs li { background: var(--sp-creme); }

/* ---------- render / foto ---------- */
.wp-block-image.sp-shot { margin-block-start: 2rem; border-radius: 22px; overflow: hidden; border: 1px solid var(--sp-line); background: var(--sp-creme); }
.wp-block-image.sp-shot img { display: block; width: 100%; max-height: 46rem; object-fit: contain; }
.wp-block-image.sp-shot figcaption { margin: 0; padding: .8rem 1.1rem; font-size: .88rem; color: var(--sp-muted); background: var(--sp-surface);
	border-top: 1px solid var(--sp-line); text-align: left; }

/* ---------- groene bestelbalk ---------- */
.sp-sect.sp-order { background: var(--sp-groen); color: var(--sp-creme); border-top: 0; padding-block: clamp(2.5rem, 6vw, 3.75rem); }
.sp-order h2 { color: var(--sp-creme); font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0; }
.sp-order p { color: #D5DACB; max-width: 44ch; margin-block-start: .5rem; }
.sp-order-cols { margin-block: 0 !important; }
.sp-order-cols > .wp-block-column:last-child .wp-block-buttons { justify-content: flex-end; }
@media (max-width: 781px) { .sp-order-cols > .wp-block-column:last-child .wp-block-buttons { justify-content: flex-start; } }

/* ---------- 'past er goed bij' ---------- */
.sp-more { gap: 1rem; }
.sp-more-card { gap: 1rem; padding: 1rem; border: 1px solid var(--sp-line); border-radius: 16px; background: var(--sp-surface); }
.sp-more-card .sp-mart { flex: none; width: 4.5rem; height: 4.5rem; margin: 0; border-radius: 10px; background: var(--sp-creme); display: grid; place-items: center; }
.sp-more-card .sp-mart img { width: 80%; height: auto; }
.sp-more-txt { margin: 0; font-size: .9rem; color: var(--sp-muted); line-height: 1.4; }
.sp-more-txt a { text-decoration: none; }
.sp-more-txt strong { font-family: var(--sp-display); font-weight: 700; font-size: 1.1rem; color: var(--sp-groen); }
.sp-more-txt a::after { content: ""; position: absolute; inset: 0; }
.sp-more-card { position: relative; transition: transform .15s ease; }
.sp-more-card:hover { transform: translateY(-2px); }

/* ---------- homepage ---------- */
.sp-home-hero h1 { font-size: clamp(3rem, 9vw, 6.25rem); margin-block-start: 1rem !important; }
.sp-home-hero .sp-lede { max-width: 32ch; margin-block-start: 1.5rem; }
.sp-home-hero-cols .wp-block-buttons { margin-block-start: 2rem; }
.sp-disc { aspect-ratio: 1; border-radius: 50%; background: var(--sp-surface); display: grid !important; place-items: center; position: relative; max-width: 26rem; margin-inline: auto; }
.sp-disc::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1.5px dashed var(--sp-line); pointer-events: none; }
.sp-disc .sp-mark { margin: 0; width: 35%; position: relative; z-index: 1; }
.sp-disc .sp-mark img { width: 100%; height: auto; display: block; }
@media (max-width: 781px) { .sp-disc { max-width: 17rem; margin-inline: 0; } }

.sp-sect.sp-pillars { background: var(--sp-surface); padding-block: 0; border-bottom: 1px solid var(--sp-line); }
.sp-pillars-cols { gap: 0 !important; margin-block: 0 !important; }
.sp-pillars-cols > .wp-block-column { padding: 1.75rem 1.25rem; border-left: 1px solid var(--sp-line); }
.sp-pillars-cols > .wp-block-column:first-child { border-left: 0; padding-left: 0; }
.sp-pillar { gap: .9rem; }
.sp-pillar .sp-ic { flex: none; margin: 0; }
.sp-pillar-txt > * { margin: 0; }
.sp-pillar-txt h3 { font-size: 1.1rem; }
.sp-pillar-txt p { font-size: .92rem; color: var(--sp-muted); margin-top: .2rem; }
@media (max-width: 781px) {
	.sp-pillars-cols > .wp-block-column { border-left: 0; padding-left: 0; border-top: 1px solid var(--sp-line); }
	.sp-pillars-cols > .wp-block-column:first-child { border-top: 0; }
}

.sp-products { gap: 1.25rem; margin-block-start: 1.25rem !important; }
.sp-sect > .sp-products:first-of-type { margin-block-start: 2.5rem !important; }
.sp-product { height: 100%; display: grid !important; grid-template-columns: 9.5rem 1fr; gap: 1.25rem; padding: 1.5rem; background: var(--sp-surface);
	border: 1px solid var(--sp-line); border-radius: 18px; }
.sp-product > * { margin: 0 !important; }
.sp-product .sp-pimg { aspect-ratio: 1; border-radius: 12px; background: var(--sp-creme); display: grid; place-items: center; }
.sp-product .sp-pimg img { width: 78%; height: auto; }
.sp-pbody { display: flex; flex-direction: column; gap: .6rem; }
.sp-pbody > * { margin: 0 !important; }
.sp-pbody h3 { font-size: 1.45rem; }
.sp-pbody h3 a { text-decoration: none; }
.sp-pbody p { font-size: .98rem; }
.sp-pbody .sp-from { margin-top: auto !important; font-size: .85rem; }
.sp-pbody .sp-from a { color: var(--sp-terra-ink); font-weight: 600; }
@media (max-width: 460px) { .sp-product { grid-template-columns: 1fr; } .sp-product .sp-pimg { max-width: 9rem; } }

.wp-block-columns.sp-feature { background: var(--sp-groen); color: var(--sp-creme); border-radius: 24px; overflow: hidden; gap: 0;
	margin-block-start: 1.25rem !important; align-items: stretch !important; }
.sp-feature > .wp-block-column:first-child { padding: clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1rem; }
.sp-feature > .wp-block-column:first-child > * { margin: 0; }
.sp-feature > .wp-block-column:last-child { background: #1F4A39; display: grid; place-items: center; padding: 2rem; }
.sp-feature .sp-eyebrow { color: var(--sp-zand); }
.sp-feature h2 { color: var(--sp-creme); font-size: clamp(1.9rem, 4vw, 2.75rem); }
.sp-feature p { color: #D5DACB; max-width: 44ch; }
.sp-feature ul.sp-specs li { background: rgba(241, 235, 221, .1); color: var(--sp-creme); }
.sp-feature .sp-feature-img { margin: 0; width: 100%; max-width: 340px; }
.sp-feature .sp-feature-img img { width: 100%; height: auto; }

.sp-bl-grid { gap: 1.25rem; }
.sp-bl-card { height: 100%; padding: 1.5rem; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 18px; position: relative;
	transition: border-color .15s ease, transform .15s ease; }
.sp-bl-card:hover { border-color: var(--sp-groen); transform: translateY(-2px); }
.sp-bl-card > * { margin-block: 0 !important; }
.sp-bl-card > * + * { margin-block-start: .6rem !important; }
.sp-bl-head { gap: .5rem; }
.sp-bl-head .sp-ic { margin: 0; }
.sp-bl-card h3 { font-size: 1.35rem; }
.sp-bl-card h3 a { text-decoration: none; }
.sp-bl-card h3 a::after { content: ""; position: absolute; inset: 0; }
.sp-bl-card > p { color: var(--sp-muted); font-size: .96rem; }
.sp-sect > .wp-block-buttons { margin-block-start: 2rem; }

.sp-closing h2 { font-size: clamp(2.25rem, 6vw, 4.25rem); }
.sp-closing h2 em { font-style: normal; color: var(--sp-terra); }
.sp-closing-cols .wp-block-column:last-child p { color: var(--sp-muted); max-width: 38ch; }
.sp-closing-cols .wp-block-buttons { margin-block-start: 2rem; }

/* ---------- blog ---------- */
.sp-chips { gap: .5rem !important; margin-block-start: 1.5rem; }
.sp-chip { margin: 0; }
.sp-chip a { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--sp-line); border-radius: 999px; background: var(--sp-surface);
	text-decoration: none; font-weight: 500; font-size: .95rem; }
.sp-chip a:hover { border-color: var(--sp-groen); }
.sp-t-head { gap: .6rem; }
.sp-t-head .sp-ic { margin: 0; }
.sp-posts { margin-block-start: 1.75rem; }
.sp-posts .wp-block-post-template { gap: 1.25rem; }
.sp-post-card { height: 100%; padding: 1.5rem; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 18px; }
.sp-post-card > * { margin-block: 0; }
.sp-post-card .wp-block-post-title { font-size: 1.35rem; }
.sp-post-card .wp-block-post-title a { text-decoration: none; }
.sp-post-card .wp-block-post-excerpt { margin-block-start: .6rem; color: var(--sp-muted); font-size: .96rem; }
.sp-post-card .wp-block-post-excerpt__more-text { margin-top: .8rem; }
.sp-post-card .wp-block-post-excerpt__more-link { font-weight: 600; color: var(--sp-terra-ink); }
@media (max-width: 781px) { .sp-posts .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; } }

/* artikelen */
.sp-post-meta { font-family: var(--sp-mono); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sp-muted); }
.sp-post-meta a { color: var(--sp-terra-ink); }
.sp-tip { background: var(--sp-surface); border: 1px solid var(--sp-line); border-left: 4px solid var(--sp-salie); border-radius: 12px; padding: 1rem 1.2rem; }
.sp-tip > * { margin: 0; }
.sp-tip > * + * { margin-block-start: .3rem; }
.sp-tip-label { font-family: var(--sp-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sp-terra-ink); }

/* ---------- kop en voet ---------- */
.sp-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--sp-creme) 92%, transparent); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--sp-line); padding-block: .7rem; }
body.admin-bar .sp-header { top: var(--wp-admin--admin-bar--height, 32px); }
.sp-header-row { gap: 1rem; }
.sp-logo { margin: 0; }
.sp-nav { gap: 1.4rem; font-weight: 500; font-size: .95rem; }
.sp-nav .wp-block-navigation-item__content { color: var(--sp-muted); text-decoration: none; }
.sp-nav .wp-block-navigation-item__content:hover { color: var(--sp-groen); }
.sp-nav .sp-nav-cta .wp-block-navigation-item__content { background: var(--sp-groen); color: var(--sp-creme); padding: .45rem .95rem; border-radius: 999px; }
.sp-nav .sp-nav-cta .wp-block-navigation-item__content:hover { color: var(--sp-creme); opacity: .88; }

.sp-footer { border-top: 1px solid var(--sp-line); padding-block: 2rem; color: var(--sp-muted); font-size: .9rem; }
.sp-footer-row { gap: 1rem 2rem; }
.sp-lockup { margin: 0; }
.sp-footer-links { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.sp-footer-links a { text-decoration: none; color: inherit; }
.sp-footer-links a:hover { color: var(--sp-groen); text-decoration: underline; }

/* ---------- algemeen: kaarten in kolommen even hoog ---------- */
.wp-block-column > .sp-mod:only-child, .wp-block-column > .sp-care-card:only-child, .wp-block-column > .sp-product:only-child,
.wp-block-column > .sp-bl-card:only-child, .wp-block-column > .sp-more-card:only-child { height: 100%; }
.sp-care > .wp-block-column, .sp-mods > .wp-block-column, .sp-products > .wp-block-column, .sp-bl-grid > .wp-block-column, .sp-more > .wp-block-column { display: flex; flex-direction: column; }