/*
 * Sensability — component + layout styles.
 * Semantic, token-driven, sb- prefix, native nesting (max 3 levels).
 * Pull exact values from the approved prototype D. Reference --sb-* only.
 */

/* ---- brand wordmark lockup (sensability + College of Ageless Wisdom) ---- */
.sb-brand{ display:flex; flex-direction:column; gap:2px; line-height:1; text-decoration:none; }
.sb-brand .sb-wm-main,
.sb-brand .sb-wm-sub{
	font-family:var(--sb-font-head); font-weight:700;
	background:var(--sb-brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
	display:inline-block; margin:0;
}
.sb-brand .sb-wm-main{ font-size:1.7rem; letter-spacing:-.01em; }
.sb-brand .sb-wm-sub{ font-size:.78rem; letter-spacing:.04em; }

/* ---- header ---- */
/* Sticky must sit on the template-part WRAPPER, not the inner .sb-header.
   The {"tagName":"header"} template-part wraps the part in <header class="wp-block-template-part">;
   that wrapper is the inner header's sticky containing block and is exactly as tall as it,
   so sticky on the inner element has no travel and scrolls away. Stick the wrapper instead. */
header.wp-block-template-part{ position:sticky; top:0; z-index:20; }
.sb-header{
	background:#fff;
	border-bottom:1px solid var(--sb-line);
}
.sb-header .wp-block-navigation{ font-family:var(--sb-font-head); font-weight:500; }
/* nav/text links only — never button links (those own the gradient + white text) */
.sb-header a:where(:not(.wp-block-button__link)){ color:var(--sb-ink); }
.sb-header a:where(:not(.wp-block-button__link)):hover{ color:var(--sb-green-dark); }

/* top utility bar (Ontdek) — half taller, regular weight */
.sb-topbar{ background:var(--sb-bg-soft); border-bottom:1px solid var(--sb-line); padding-block:.7rem; }
.sb-topbar .sb-topnav{ font-family:var(--sb-font-head); font-weight:400; font-size:.8rem; }
.sb-topbar .sb-topnav a{ color:var(--sb-muted); }
.sb-topbar .sb-topnav a:hover{ color:var(--sb-green-dark); }
/* last Ontdek item = Inloggen → bold + ink */
.sb-topbar .sb-topnav .wp-block-navigation-item:last-child a{ font-weight:700; color:var(--sb-ink); }
/* small contact button in the top bar */
.sb-topbar .sb-btn-sm .wp-block-button__link{ font-size:.8rem; padding:.45rem 1rem; }

/* main bar — half taller; bigger logo + uppercase nav */
.sb-mainbar{ padding-block:1.3rem; }
.sb-mainbar .wp-block-navigation{ font-size:1rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }

/* logo (always links home) */
.sb-logo{ margin:0; }
.sb-logo,
.sb-logo a{ display:block; }
.sb-logo img{ height:62px; width:auto; display:block; }
.sb-footer-logo{ display:inline-block; background:#fff; padding:10px 14px; border-radius:10px; }
.sb-footer-logo img{ height:42px; width:auto; display:block; }

/* ---- generic section heading ---- */
.sb-eyebrow{
	font-family:var(--sb-font-head); font-weight:600; letter-spacing:.12em;
	text-transform:uppercase; font-size:.8rem; color:var(--sb-green-dark);
}

/* ---- hero (cover block) ---- */
.sb-hero{ min-height:560px; }
.sb-hero .wp-block-cover__inner-container{ max-width:var(--sb-wrap); margin-inline:auto; width:100%; }
.sb-hero h1{ text-shadow:0 2px 18px rgba(0,0,0,.35); }

/* ---- topic hero (subject pages) ---- */
.sb-topic-hero{ min-height:420px; }

/* ---- sub-hero on content pages: same look as homepage hero, 1/3 shorter ---- */
/* green brand gradient shows as fallback when the page has no featured image */
.sb-subhero{ min-height:373px; background:linear-gradient(135deg,var(--sb-green-dark),var(--sb-green)); }
.sb-subhero .wp-block-cover__inner-container{ max-width:var(--sb-wrap); margin-inline:auto; width:100%; }
.sb-subhero h1,.sb-subhero .wp-block-post-title{ color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.35); }
.sb-subhero .sb-crumb,
.sb-subhero .sb-crumb .sb-crumb-current{ color:rgba(255,255,255,.85); }
.sb-subhero .sb-crumb a{ color:rgba(255,255,255,.92); text-decoration:underline; text-underline-offset:3px; }
.sb-subhero .sb-crumb a:hover{ color:#fff; }

/* ---- photo cards (cover blocks in a row) ---- */
.sb-card{ min-height:360px; border-radius:var(--sb-radius); overflow:hidden; }
.sb-card.is-feature{ min-height:300px; }
.sb-card .wp-block-cover__inner-container{ width:100%; }
.sb-card h2,.sb-card h3,.sb-card p{ color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.45); }

/* Aanbod trio: hand-built columns (shortcode) need their own gap + equal widths,
   since the markup lacks WordPress's generated is-layout-flex gap. */
.sb-aanbod-trio{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.sb-aanbod-trio > .wp-block-column{ flex:1 1 0; min-width:240px; display:flex; }

/* Align title + copy across the three cards and pin the button to the bottom,
   regardless of differing copy length (cards are bottom-anchored covers). */
.sb-aanbod-trio .sb-card{ height:100%; width:100%; }
.sb-aanbod-trio .sb-card .wp-block-cover__inner-container{
	display:flex; flex-direction:column; height:100%; padding-top:1.75rem;
}
.sb-aanbod-trio .sb-card h3{ margin-top:0; }
.sb-aanbod-trio .sb-card .wp-block-buttons{ margin-top:auto; }

/* ---- soft / panel sections ---- */
.sb-soft{ background:var(--sb-bg-soft); }
.sb-panel{ background:var(--sb-bg-soft); border-radius:var(--sb-radius); padding:clamp(1.5rem,4vw,2.75rem); }

/* ---- breadcrumb ---- */
.sb-crumb{ font-family:var(--sb-font-head); font-size:.8rem; color:var(--sb-muted); margin-bottom:.4rem; }
.sb-crumb a{ color:var(--sb-green-dark); }
.sb-crumb .sb-crumb-sep{ margin:0 .35rem; opacity:.7; }

/* ---- library / video grid (CPT archives + query loops) ---- */
.sb-lib{ }
.sb-lib .wp-block-post-template{
	display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; list-style:none; margin:0; padding:0;
}
/* WordPress block-gap adds margin-block-start to every item except the first;
   in a single grid row that shoves columns 2-3 down by the gap, so card 1 sits
   higher. Zero it (the grid `gap` already spaces columns) and let each card fill
   its row cell, for equal-height cards with aligned titles. */
.sb-lib .wp-block-post-template > li{ margin-top:0; margin-block-start:0; display:flex; flex-direction:column; }
.sb-lib .wp-block-post-template > li > .sb-libcard{ flex:1; }
.sb-libcard{
	border:1px solid var(--sb-line); border-radius:var(--sb-radius); background:#fff;
	overflow:hidden; display:flex; flex-direction:column; transition:.18s;
}
.sb-libcard:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.08); }
.sb-libcard .wp-block-post-featured-image img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.sb-libcard .sb-libcard-body{ padding:1.1rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.sb-libcard h3,.sb-libcard .wp-block-post-title{ font-size:1.1rem; margin:0; }
.sb-libcard .wp-block-post-excerpt__excerpt{ font-size:.9rem; color:var(--sb-muted); }

/* ---- tags / chips ---- */
.sb-chips .wp-block-post-terms,
.sb-chips{ display:flex; gap:.4rem; flex-wrap:wrap; }
.sb-chip,
.sb-chips .wp-block-post-terms a{
	font-size:.72rem; background:var(--sb-bg-soft); color:var(--sb-green-dark);
	padding:.25rem .6rem; border-radius:999px; font-family:var(--sb-font-head); font-weight:500; text-decoration:none;
}
.sb-chip:hover,.sb-chips a:hover{ background:var(--sb-green); color:#fff; }

/* ---- product / shop grid ---- */
.sb-shop .wp-block-post-template,
.sb-shop{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.sb-product{ border:1px solid var(--sb-line); border-radius:var(--sb-radius); overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.sb-product img{ aspect-ratio:3/4; object-fit:cover; width:100%; }
.sb-product .sb-product-body{ padding:1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.sb-price{ font-family:var(--sb-font-head); font-weight:700; color:var(--sb-green-dark); }
.sb-badge{ display:inline-block; align-self:flex-start; font-size:.68rem; font-family:var(--sb-font-head); font-weight:600; color:#fff; background:var(--sb-blue); padding:.18rem .6rem; border-radius:999px; }
.sb-badge.is-uniek{ background:var(--sb-green-dark); }

/* ---- quotes / testimonials ---- */
.sb-quote{ background:var(--sb-bg-soft); border-radius:var(--sb-radius); padding:1.6rem; border-left:4px solid var(--sb-green); }
.sb-quote cite{ font-family:var(--sb-font-head); font-weight:600; color:var(--sb-green-dark); font-style:normal; }

/* ---- footer ---- */
.sb-footer{ background:var(--sb-ink); color:#cfd6d2; }
.sb-footer a{ color:#cfd6d2; }
.sb-footer a:hover{ color:#fff; }
.sb-footer .sb-wm-main{ font-size:1.4rem; }

/* ---- buttons: site-wide gradient, white text, soft sliding hover ---- */
.wp-block-button__link,
.wp-element-button,
.sb-header .wp-block-button__link{
	background-image:var(--sb-btn-grad); background-color:transparent;
	background-size:200% 100%; background-position:100% 0; /* green → blue visible */
	color:#fff; border:0;
	transition:background-position .7s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.sb-header .wp-block-button__link:hover{
	background-position:0 0; /* slides to orange → green */
	color:#fff;
}

/* outline ("ghost") variant — secondary CTA on photos */
.wp-block-button.is-style-outline .wp-block-button__link{
	background:transparent; color:#fff; border:2px solid #fff;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{ background:rgba(255,255,255,.16); color:#fff; }

/* photo-card outline buttons: soft yellow → green gradient fades in on hover */
.sb-card .wp-block-button.is-style-outline .wp-block-button__link{
	position:relative; overflow:hidden; isolation:isolate;
	transition:border-color .4s ease;
}
.sb-card .wp-block-button.is-style-outline .wp-block-button__link::before{
	content:""; position:absolute; inset:0; z-index:-1;
	background-image:var(--sb-btn-grad-soft); opacity:0; transition:opacity .4s ease;
}
.sb-card .wp-block-button.is-style-outline .wp-block-button__link:hover{ background:transparent; border-color:transparent; color:#fff; }
.sb-card .wp-block-button.is-style-outline .wp-block-button__link:hover::before{ opacity:1; }

@media(max-width:781px){
	.sb-lib .wp-block-post-template{ grid-template-columns:1fr; }
	.sb-shop .wp-block-post-template,.sb-shop{ grid-template-columns:repeat(2,1fr); }
	.sb-hero{ min-height:460px; }
}