/* WordPress-kernblokke in die gekose styl: net --tb-*-tokens, geen per-styl waardes. */
:where(.wp-block-post-content, .entry-content) :is(h1, h2, h3, h4, h5, h6),
.wp-block-post-title, .wp-block-query-title {
	text-transform: var(--tb-opskrif-kas, none);
	font-weight: var(--tb-opskrif-gewig, 700);
	letter-spacing: var(--tb-opskrif-spasiering, 0);
	line-height: 1.15;
}
.wp-block-button__link,
.wp-block-search__button,
.wp-block-post-comments-form input[type="submit"],
.wp-block-file__button {
	border: 2px solid var(--tb-knoppie, var(--wp--preset--color--primary, #1e6fd9));
	border-radius: var(--tb-radius-knoppie, 0.375rem);
	box-shadow: var(--tb-skaduwee-knoppie, var(--tb-skaduwee, none));
	background: var(--tb-knoppie, var(--wp--preset--color--primary, #1e6fd9));
	color: var(--tb-op-knoppie, var(--tb-op-primary, #fff));
	font-weight: var(--tb-knoppie-gewig, 600);
	text-transform: var(--tb-knoppie-kas, none);
	letter-spacing: var(--tb-knoppie-spasiering, 0);
	text-decoration: none;
	padding: 0.8em 1.6em;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--tb-t-skakel); box-shadow: none;
}
.wp-block-button__link:hover { filter: brightness(1.1); }
/* Kernomslag (held): buitelyn-knoppie volg die ligte teks; 'onder' hou die inhoud op die wye kolom. */
.wp-block-cover:not(.is-light) .is-style-outline .wp-block-button__link { color: var(--tb-t-paragraaf); border-color: currentColor; }
.wp-block-cover.is-position-bottom-center > .wp-block-cover__inner-container { width: 100%; }
/* Fokus in die seksie se teks-kleur (nie die knoppie se eie teks nie, wat op sy agtergrond kan verdwyn): 3:1 teen die seksie. */
.wp-block-button__link:focus-visible, .tb-vorm__knoppie:focus-visible { outline: 3px solid var(--tb-t-opskrif, currentColor); outline-offset: 3px; }
.wp-block-quote, .wp-block-pullquote {
	background: var(--wp--preset--color--surface, #f3f4f6);
	border: var(--tb-rand, 0) var(--tb-rand-styl, solid) var(--wp--preset--color--contrast, #111827);
	border-left-width: max(var(--tb-rand, 0px), 6px);
	border-radius: var(--tb-radius-kaart, 0.75rem);
	box-shadow: var(--tb-skaduwee, none);
	padding: 1.5rem 1.75rem;
	margin-inline: 0;
}
.wp-block-quote cite, .wp-block-pullquote cite { font-style: normal; font-size: 0.9em; opacity: 0.8; }
.wp-block-separator { border: 0; border-top: max(var(--tb-rand, 0px), 2px) var(--tb-rand-styl, solid) var(--wp--preset--color--contrast, #111827); opacity: 1; }
.wp-block-image img, .wp-block-cover, .wp-block-media-text__media img, .wp-block-gallery img {
	border-radius: var(--tb-radius-kaart, 0.75rem);
}
.wp-block-cover.alignfull, .wp-block-media-text.alignfull .wp-block-media-text__media img { border-radius: 0; } /* rand tot rand: 'n ronde hoek sit teen die skerm se rand */
/* Gestapelde media-teks (held gesplit, blurb) op 'n foon: dieselfde kantlyn en seksie-spasie as die res van die werf, nie WordPress se 0 / 8% nie. */
/* Held (media-teks oor die volle breedte): die teks bepaal die hoogte en die foto vul dit (cover), sodat geen foto die held rek nie.
   Foon: die foto bo in 'n vaste 4:3-raam. */
.wp-block-media-text.alignfull > .wp-block-media-text__content { padding-block: var(--wp--preset--spacing--70); }
.wp-block-media-text.alignfull > .wp-block-media-text__media img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
@media (min-width: 601px) {
	.wp-block-media-text.alignfull > .wp-block-media-text__media { position: relative; align-self: stretch; min-height: min(70vh, 32rem); }
	.wp-block-media-text.alignfull > .wp-block-media-text__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 600px) { .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); } }
.wp-block-image img { border: var(--tb-rand, 0) var(--tb-rand-styl, solid) var(--wp--preset--color--contrast, #111827); box-shadow: var(--tb-skaduwee, none); }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th, .wp-block-table td { border: max(var(--tb-rand, 0px), 1px) var(--tb-rand-styl, solid) var(--wp--preset--color--contrast, #111827); padding: 0.6em 0.8em; }
.wp-block-table thead th { background: var(--wp--preset--color--surface); text-transform: var(--tb-opskrif-kas, none); }
/* :where: hover-effekte (animasie.css, struktuur {C:hover}) moet die skaduwee kan oorskryf. */
:where(.wp-block-group.has-background:not(.alignfull), .wp-block-column.has-background) {
	border: var(--tb-rand, 0) var(--tb-rand-styl, solid) var(--wp--preset--color--contrast, #111827);
	border-radius: var(--tb-radius-kaart, 0.75rem);
	box-shadow: var(--tb-skaduwee, none);
}
.wp-block-details {
	border: max(var(--tb-rand, 0px), 1px) var(--tb-rand-styl, solid) var(--wp--preset--color--contrast, #111827);
	border-radius: var(--tb-radius-kaart, 0.75rem); padding: 0.9rem 1.2rem;
}
.wp-block-details summary { font-weight: var(--tb-opskrif-gewig, 700); text-transform: var(--tb-opskrif-kas, none); cursor: pointer; }
:where(.wp-block-post-content, .entry-content) :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], textarea, select) {
	border: max(var(--tb-rand, 0px), 1px) var(--tb-rand-styl, solid) currentColor;
	border-radius: var(--tb-radius-knoppie, 0.375rem);
	background: var(--wp--preset--color--base); padding: 0.6em 0.8em; /* tekskleur: veld-reël in includes/kleur.php */
}
.wp-block-search__input { border: max(var(--tb-rand, 0px), 1px) var(--tb-rand-styl, solid) var(--wp--preset--color--contrast); border-radius: var(--tb-radius-knoppie, 0.375rem); padding: 0.6em 0.8em; }
:where(.wp-block-post-content, .entry-content) :is(pre, code) { background: var(--wp--preset--color--surface); border-radius: calc(var(--tb-radius-kaart, 0.75rem) * 0.5); }
:where(.wp-block-post-content, .entry-content) pre { padding: 1rem; overflow-x: auto; border: var(--tb-rand, 0) var(--tb-rand-styl, solid) var(--wp--preset--color--contrast); }
:where(.wp-block-post-content, .entry-content) :where(li)::marker { color: var(--tb-t-skakel); }
.wp-block-latest-posts__list li, .wp-block-post-template > li { overflow-wrap: anywhere; }
/* Lang Afrikaanse samestellings in groot opskrifte breek eerder as om op 'n foon oor die rand te loop. */
:where(h1, h2) { overflow-wrap: anywhere; }
/* Seksie-rand (attribuut rand): 'n strook bo die seksie in sy eie agtergrond, wat in die vorige seksie inbyt. */
.tb-rand-perforasie, .tb-rand-skuins { position: relative; }
.tb-rand-perforasie::before, .tb-rand-skuins::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); background-color: inherit; pointer-events: none; }
.tb-rand-perforasie::before { height: 10px; -webkit-mask: linear-gradient(90deg, #000 50%, #0000 0) 0 0 / 20px 100%; mask: linear-gradient(90deg, #000 50%, #0000 0) 0 0 / 20px 100%; }
.tb-rand-skuins::before { height: clamp(1.25rem, 3vw, 3rem); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
/* Ingebedde kaart (kaart.inbed). */
.tb-kaart { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--tb-radius-kaart, 0.75rem); }
/* Vertoon-opskrif (held net-teks): styf, anders lees die reëls as aparte opskrifte. */
.has-vertoon-font-size { line-height: 1; }
.wp-block-post-template.is-layout-grid > li, .wp-block-latest-posts.is-grid li {
	background: var(--wp--preset--color--surface);
	border: var(--tb-rand, 0) var(--tb-rand-styl, solid) var(--wp--preset--color--contrast);
	border-radius: var(--tb-radius-kaart, 0.75rem); box-shadow: var(--tb-skaduwee, none); padding: 1.25rem;
}

/* Leesbreedte en ritme vir blokke direk in die bladsy-inhoud (ook Woo-blokke soos klantrekening of kategorieë).
   :not() i.p.v. :where(), sodat kernreëls soos ol.wp-block-latest-comments { margin-left: 0 } nie die sentrering breek nie. */
.wp-block-post-content > :not(.alignfull, .alignwide) {
	width: calc(100% - 2 * clamp(1rem, 5vw, 4rem));
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
}
/* Inline-blokke ignoreer margin: auto en sou teen die rand sit: bereken die kolom se linkerkant. */
.wp-block-post-content > :is(p.is-style-etiket, .wp-block-woocommerce-mini-cart) { margin-inline: max(clamp(1rem, 5vw, 4rem), (100% - var(--wp--style--global--content-size, 720px)) / 2); }
.wp-block-post-content > .alignwide {
	width: calc(100% - 2 * clamp(1rem, 5vw, 4rem));
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}
.wp-block-post-content > p.is-style-etiket { width: auto; }
/* Sonder :where(): WP se blockGap-reël (:root :where(.is-layout-constrained) > * { margin-block-start: 0 }) laai later en sou wen. */
.wp-block-post-content > :not(.alignfull) + :not(.alignfull) { margin-top: 1.5rem; }
/* Blokke direk in die inhoud: asemruimte teen die bladsy se rand en teen vol-breedte seksies. */
.wp-block-post-content > :not(.alignfull):is(:first-child, .alignfull + *) { margin-top: 2.5rem; }
.wp-block-post-content > :not(.alignfull):is(:last-child, :has(+ .alignfull)) { margin-bottom: 3rem; }
.wp-block-columns { gap: 1.5rem; }
.wp-block-column.has-background { padding: 1.25rem; }
.wp-block-buttons { gap: 0.75rem; }


/* Blokstyle vir kernblokke (includes/kern.php): dieselfde tokens as die eie blokke. */
/* Tint van die eie teks: leesbaar op elke agtergrond (lig, donker, surface, omslag); die kontrastoets meet etiket teen die seksie-agtergrond. */
p.is-style-etiket { display: inline-block; margin: 0; padding: 0.3rem 0.85rem; background: color-mix(in srgb, currentColor 14%, transparent); color: var(--tb-t-etiket, var(--tb-t-paragraaf)); border: var(--tb-rand, 0) var(--tb-rand-styl, solid) var(--wp--preset--color--contrast, #111827); border-radius: var(--tb-radius-knoppie, 999px); font-size: 0.9rem; }
p.is-style-nommer { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: 0; border-radius: var(--tb-radius-knoppie, 999px); background: var(--wp--preset--color--primary, #1e6fd9); color: var(--tb-op-primary, #fff); font-weight: 700; }
p.is-style-syfer { margin: 0; font-family: var(--wp--preset--font-family--tb-opskrif, inherit); font-size: clamp(1.5rem, 3.2vw, 3rem); line-height: 1.05; overflow-wrap: anywhere; font-weight: var(--tb-opskrif-gewig, 700); color: var(--tb-t-skakel); }
ul.is-style-regmerk { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
ul.is-style-regmerk li { padding-left: 1.5rem; position: relative; }
ul.is-style-regmerk li::before { content: "✓"; position: absolute; left: 0; color: var(--tb-t-skakel); font-weight: 700; }
.wp-block-icon { color: var(--tb-t-skakel); }
/* Ons ikone is net paaie (includes/kern.php tb_ikoon_paaie): die stel se styl kom hiervandaan. */
.wp-block-icon svg.tb-ikoon--lyn { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wp-block-icon svg.tb-ikoon--vol { fill: currentColor; }
.wp-block-site-title { font-family: var(--wp--preset--font-family--tb-opskrif, inherit); font-weight: var(--tb-opskrif-gewig, 700); }
.wp-block-site-title a { color: inherit; text-decoration: none; }
/* 'n Skeiding in 'n stapel (vertikale flex, items links) het geen inhoud nie en krimp tot 0 breedte: onsigbaar. */
.is-layout-flex.is-vertical > .wp-block-separator { align-self: stretch; }
/* Oortjies: die paneel sit anders teen die oortjielys (blockGap 0px). */
.wp-block-tab-panels { margin-top: 1rem; }
/* Kopstuk "winkel": die soekbalk groei tussen logo en aksies en kry op 'n foon 'n eie ry onder; die departementstrook skuif sywaarts. */
.tb-kop-soek { flex: 1 1 18rem; margin-inline: 1rem; }
.tb-kop-soek .wp-block-search__inside-wrapper { width: 100%; }
.tb-kop-departemente { min-width: 0; max-width: 100%; } /* 'n flex-kind krimp anders nie onder sy inhoud nie: die hele bladsy sou sywaarts skuif */
.tb-kop-departemente .wp-block-navigation__container { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tb-kop-departemente .wp-block-navigation-item { white-space: nowrap; }
@media (max-width: 700px) { .tb-kop-soek { order: 3; flex-basis: 100%; margin-inline: 0; } }
/* Kopstuk "vas": 'n sticky blok kleef net binne sy ouer, en die sjabloondeel <header> is net so hoog soos die kopstuk.
   display: contents laat die kopstuk binne die hele bladsy kleef; die aankondigingstrook en departementstrook rol weg.
   ponytail: ou Safari (< 17) het landmerk-rolle by display: contents verloor; die <header> self bly in die DOM. */
header.wp-block-template-part:has(> .is-position-sticky) { display: contents; }
header.wp-block-template-part > .is-position-sticky { z-index: 50; }
/* Aksent-knoppie (held.knoppieAksent): die hoofaksie in die aksentkleur, ook op 'n primêre agtergrond. */
.wp-block-button.is-style-aksent > .wp-block-button__link { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--tb-op-accent, #111); }
/* Mobiele kieslys (kern-oorleg): werf se kleure, opskrif-lettertipe, groot raakteikens, links op die werf se rand. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { padding: var(--wp--preset--spacing--50); background-color: var(--wp--preset--color--base) !important; color: var(--tb-t-opskrif) !important; }
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-close { top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--tb-radius-knoppie, 0.375rem); background: var(--wp--preset--color--surface); }
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content { padding-top: calc(44px + var(--wp--preset--spacing--40)); align-items: stretch; }
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container { align-items: stretch; gap: 0; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item { border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content { display: block; width: 100%; padding: 0.9rem 0 !important; font-family: var(--wp--preset--font-family--tb-opskrif, inherit); font-weight: var(--tb-opskrif-gewig, 700); font-size: var(--wp--preset--font-size--x-large, 1.75rem); line-height: 1.15; text-decoration: none; }
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content[aria-current="page"] { color: var(--tb-t-skakel, var(--wp--preset--color--primary)); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
/* Kopstuk op foon en tablet (< 900px, waar logo, kieslys, nommer en knoppie nie op een ry pas nie): een ry.
   Die foonnommer word 'n ikoonknoppie (die nommer bly vir skermlesers), en met 'n foon is die CTA-knoppie weg:
   dit staan reg onder in die held, en die foon is die hoofaksie. */
@media (max-width: 899px) {
	header.wp-block-template-part .wp-block-group { flex-wrap: nowrap; gap: var(--wp--preset--spacing--40); }
	header.wp-block-template-part .wp-block-site-title { white-space: nowrap; }
	header.wp-block-template-part .wp-block-group:has(a[href^="tel:"]) .wp-block-buttons { display: none; }
	header.wp-block-template-part p:has(> a[href^="tel:"]) { margin: 0; }
	header.wp-block-template-part a[href^="tel:"] { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 0; border-radius: var(--tb-radius-knoppie, 0.375rem); background: var(--tb-knoppie, var(--wp--preset--color--primary)); color: var(--tb-op-knoppie, var(--tb-op-primary, #fff)); }
	header.wp-block-template-part a[href^="tel:"]::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%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' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat; }
}