/* =========================================================
   Brini — huisstijl (brand tokens + webfonts)
   Overschrijft de defaults van sellabees-core met de Brini-merkwaarden.
   Fonts & kleuren afgeleid uit de live site brini.nl (computed styles):
   - Koppen/display : Cormorant Unicase (500/600/700)
   - Bodytekst      : Open Sans (#666)
   - Knoppen/labels  : Montserrat (600, uppercase)
   - Primair groen  : #2d572c   ·  Accent goud: #fcc72d
   ========================================================= */

/* ---------------- Webfonts (lokaal gehost, géén Google Fonts) ---------------- */
@font-face {
	font-family: "Cormorant Unicase";
	src: url("../fonts/CormorantUnicase-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Cormorant Unicase";
	src: url("../fonts/CormorantUnicase-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Cormorant Unicase";
	src: url("../fonts/CormorantUnicase-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	/* Variabel font: dekt het hele gewichtsbereik in één bestand */
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/OpenSans-Variable.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ---- Huisstijlkleuren (computed uit brini.nl) ---- */
	--sellabees-green:       #2d572c;   /* primair groen — topbalk, secties, koppen, footer */
	--sellabees-green-dark:  #1f3d1e;   /* hover/donkerder */
	--sellabees-gold:        #fcc72d;   /* accent goudgeel */
	--sellabees-ink:         #2b2b2b;   /* donkere neutrale tekst/koppen op licht */
	--sellabees-text:        #666666;   /* lopende bodytekst */
	--sellabees-muted:       #999999;
	--sellabees-border:      #e5e5e5;
	--sellabees-search-bg:   #f4f4f4;
	--sellabees-placeholder: #a0a0a0;
	--sellabees-white:       #ffffff;
	--sellabees-black:       #1a1a1a;

	/* Legacy-aliassen: de uit Brini gekopieerde CSS gebruikt nog --sellabees-red
	   als primaire accentkleur. We wijzen die naar het groen zodat de tussenstand
	   on-brand blijft; per sectie migreren we naar --sellabees-green. */
	--sellabees-red:      var(--sellabees-green);
	--sellabees-red-dark: var(--sellabees-green-dark);
	--sellabees-yellow:   var(--sellabees-gold);

	/* ---- Typografie ---- */
	--sellabees-font-heading: "Cormorant Unicase", Georgia, "Times New Roman", serif;
	--sellabees-font-body:    "Open Sans", "Segoe UI", system-ui, sans-serif;
	--sellabees-font-ui:      "Montserrat", "Helvetica Neue", Arial, sans-serif;

	/* ---- Layout ---- */
	--sellabees-gutter:        24px;
	--sellabees-container-max: 1080px;  /* Divi-content op brini.nl; verfijnen tijdens layout-bouw */
}

/* ---- Basis-typografie ---- */
body { font-family: var(--sellabees-font-body); color: var(--sellabees-text); }

/* Koppen in Cormorant Unicase, in het huisstijlgroen op lichte achtergrond */
h1, h2, h3, h4 { font-family: var(--sellabees-font-heading); font-weight: 600; color: var(--sellabees-green); }
h1 { font-weight: 700; }

/* ---- Info-/tekstpagina's (page.php → .sellabees-entry) — leesbare typografie ----
   Gescoped op body:not(.woocommerce-page): WooCommerce-pagina's (winkelwagen,
   afrekenen, mijn account, bestelling-ontvangen) renderen óók via the_content() in
   .sellabees-entry__content, maar hebben hun eigen layout/knoppen — die mag deze
   leestypografie (max-width + linkkleur) niet overschrijven. */
body:not(.woocommerce-page) .sellabees-entry__title {
	font-family: var(--sellabees-font-heading);
	font-size: 40px;
	line-height: 1.1;
	color: var(--sellabees-green);
	margin: 0 0 22px;
}
body:not(.woocommerce-page) .sellabees-entry__content {
	font-family: var(--sellabees-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--sellabees-text);
}
body:not(.woocommerce-page) .sellabees-entry__content > *:first-child { margin-top: 0; }
body:not(.woocommerce-page) .sellabees-entry__content p { margin: 0 0 1em; }
body:not(.woocommerce-page) .sellabees-entry__content ul,
body:not(.woocommerce-page) .sellabees-entry__content ol { margin: 0 0 1em; padding-left: 1.4em; }
body:not(.woocommerce-page) .sellabees-entry__content li { margin: 0 0 .4em; }
/* In-body subkoppen leesbaar (niet de zware Cormorant-caps van de globale h-regel) */
body:not(.woocommerce-page) .sellabees-entry__content h2,
body:not(.woocommerce-page) .sellabees-entry__content h3,
body:not(.woocommerce-page) .sellabees-entry__content h4 {
	font-family: var(--sellabees-font-ui);
	color: var(--sellabees-ink);
	text-transform: none;
	margin: 1.6em 0 .5em;
}
body:not(.woocommerce-page) .sellabees-entry__content h2 { font-size: 22px; }
body:not(.woocommerce-page) .sellabees-entry__content h3 { font-size: 18px; }
/* Inline links binnen content herkenbaar (de globale a{color:inherit;...} maakt ze anders onzichtbaar) */
body:not(.woocommerce-page) .sellabees-entry__content a {
	color: var(--sellabees-green);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body:not(.woocommerce-page) .sellabees-entry__content a:hover { color: var(--sellabees-green-dark); }

/* Knoppen / CTA's / labels in Montserrat (uppercase, zoals de live site) */
.button, button, .sellabees-btn, [type="submit"] {
	font-family: var(--sellabees-font-ui);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* Navigatie in Montserrat */
.sellabees-nav__menu > li > a,
.sellabees-nav__highlight { font-family: var(--sellabees-font-ui); font-weight: 600; letter-spacing: .02em; }

/* Algemene content-opmaak */
.sellabees-content { padding-block: 48px; }
.sellabees-entry__title { margin-top: 0; }
.sellabees-page-title { font-size: 40px; }