/* =========================================================================
   Goed. — custom.css
   Eigenheidjes die niet in theme.json passen: de etiket-componenten,
   vertaald naar het web. Alle kleuren komen uit de theme.json-presets,
   dus één wijziging in het palet werkt overal door.
   ========================================================================= */

:root {
	/* Snelkoppelingen op de presets, voor leesbaarheid hieronder */
	--goed-olive:      var(--wp--preset--color--olive);
	--goed-olive-deep: var(--wp--preset--color--olive-deep);
	--goed-olive-soft: var(--wp--preset--color--olive-soft);
	--goed-cream:      var(--wp--preset--color--cream);
	--goed-paper:      var(--wp--preset--color--paper);
	--goed-ink:        var(--wp--preset--color--ink);
	--goed-ink-soft:   var(--wp--preset--color--ink-soft);

	--goed-radius-card: 14px;
	--goed-radius-pill: 999px;
	--goed-shadow:      0 1px 0 rgba(31, 27, 22, 0.06), 0 8px 24px -16px rgba(31, 27, 22, 0.35);
}

/* -------------------------------------------------------------------------
   1. De goed.-sticker  (de olijfgroene cirkel — als badge herbruikbaar)
   Gebruik:  <span class="goed-sticker">goed.</span>
   Variant:  <span class="goed-sticker goed-sticker--sm">goed.</span>
   ------------------------------------------------------------------------- */
.goed-sticker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5.5rem;
	height: 5.5rem;
	padding: 0.4em;
	border-radius: 50%;
	background: var(--goed-olive);
	color: #fff;
	font-family: var(--wp--preset--font-family--work-sans);
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.02em;
	text-align: center;
	text-decoration: none;
}

.goed-sticker--sm { width: 3.25rem; height: 3.25rem; font-size: 0.95rem; }
.goed-sticker--lg { width: 8rem;    height: 8rem;    font-size: 2.25rem; }

/* Olijf-cirkel als losse decoratie (bv. hoek van een sectie) */
.goed-dot {
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: var(--goed-olive);
	vertical-align: middle;
}

/* -------------------------------------------------------------------------
   2. Productkaart  (de halve-cirkel-layout van de confituur-etiketten)
   __head = papier + condensed naam, rechts uitgelijnd + ingrediënten
   __body = kleurvlak (per categorie) + witte goed.-wordmark
   Gebruik:
   <article class="goed-card goed-card--confituur">
     <div class="goed-card__head">
       <h3 class="goed-card__name">Muil peer</h3>
       <p class="goed-card__ingredients">Peer · walnoot · rietsuiker</p>
     </div>
     <div class="goed-card__body" style="background-image:url(...)">
       <span class="goed-card__wordmark">goed.</span>
     </div>
   </article>
   ------------------------------------------------------------------------- */
.goed-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--goed-paper);
	border: 1px solid var(--goed-olive-soft);
	border-radius: var(--goed-radius-card);
	box-shadow: var(--goed-shadow);
	height: 100%;
}

.goed-card__head {
	padding: 1.25rem 1.25rem 1rem;
	background: var(--goed-cream);
	text-align: right;
}

.goed-card__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 800;
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--goed-ink);
}

.goed-card__ingredients {
	margin: 0.45rem 0 0;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--goed-ink-soft);
}

.goed-card__body {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 1 / 1;
	padding: 1rem 1.1rem;
	/* valt terug op de categorie-accentkleur als er geen foto is */
	background-color: var(--goed-card-accent, var(--goed-olive));
	background-size: cover;
	background-position: center;
}

.goed-card__wordmark {
	font-family: var(--wp--preset--font-family--work-sans);
	font-weight: 900;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 1px 8px rgba(31, 27, 22, 0.25);
}

/* Categorie-accenten — de productnaam ís een kleurcode (analyse §1) */
.goed-card--olie      { --goed-card-accent: var(--wp--preset--color--peach); }
.goed-card--azijn     { --goed-card-accent: var(--wp--preset--color--leaf);  }
.goed-card--pesto     { --goed-card-accent: var(--wp--preset--color--leaf);  }
.goed-card--likeur    { --goed-card-accent: var(--wp--preset--color--amber); }
.goed-card--siroop    { --goed-card-accent: var(--wp--preset--color--clay);  }
.goed-card--confituur { --goed-card-accent: var(--wp--preset--color--amber); }

/* -------------------------------------------------------------------------
   3. Categorie-pills  (filterchips op het webshop-overzicht)
   Gebruik:  <a class="goed-pill" href="...">Confituren</a>
             <a class="goed-pill is-active" href="...">Alles</a>
   ------------------------------------------------------------------------- */
.goed-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.45em 1.05em;
	border: 1.5px solid var(--goed-olive-soft);
	border-radius: var(--goed-radius-pill);
	background: var(--goed-paper);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--goed-ink);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.goed-pill:hover { border-color: var(--goed-olive); background: var(--goed-cream); }
.goed-pill.is-active {
	background: var(--goed-olive-deep);
	border-color: var(--goed-olive-deep);
	color: var(--goed-cream);
}

/* -------------------------------------------------------------------------
   4. Ingrediënten-typografie  (etiket-detail → web)
   Klasse voor losse labels; H6 doet dit al via theme.json.
   ------------------------------------------------------------------------- */
.goed-label {
	font-family: var(--wp--preset--font-family--work-sans);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--goed-olive-deep);
}

/* Handgeletterde captions — verwijst naar de aquarel-etiketten */
figcaption,
.wp-block-image figcaption,
.goed-caption {
	font-family: var(--wp--preset--font-family--caveat);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--goed-ink-soft);
}

/* -------------------------------------------------------------------------
   5. CTA-knopvariant (amber) — registreren in functions.php als blokstijl
   ------------------------------------------------------------------------- */
.wp-block-button.is-style-goed-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--amber);
	color: var(--goed-ink);
}
.wp-block-button.is-style-goed-cta .wp-block-button__link:hover,
.wp-block-button.is-style-goed-cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--clay);
	color: #fff;
}

/* -------------------------------------------------------------------------
   6. Toegankelijkheid — zichtbare focus op het hele merk
   ------------------------------------------------------------------------- */
:where(a, button, .wp-element-button, input, select, textarea):focus-visible {
	outline: 3px solid var(--goed-olive);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   7. WooCommerce — lichte afstemming op de huisstijl (alleen het nodige)
   ------------------------------------------------------------------------- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--goed-olive-deep);
	font-weight: 700;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.add_to_cart_button,
.woocommerce #respond input#submit {
	background: var(--goed-olive-deep);
	color: var(--goed-cream);
	border-radius: var(--goed-radius-pill);
	font-family: var(--wp--preset--font-family--work-sans);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.7em 1.6em;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.add_to_cart_button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--goed-olive);
	color: var(--goed-ink);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	border-top-color: var(--goed-olive);
}

/* "Seizoen"-badge op productpagina's (veld uit het invuldocument) */
.goed-season {
	display: inline-flex;
	gap: 0.4em;
	align-items: center;
	padding: 0.3em 0.8em;
	border-radius: var(--goed-radius-pill);
	background: var(--goed-olive-soft);
	color: var(--goed-olive-deep);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}