/*
 * Bats & Birds maatwerk – basisstijlen voor de shortcodes.
 *
 * De utility-klassen hieronder werden al door de shortcodes gebruikt (prijsblok, vacatures),
 * maar het oude stylesheet werd nooit geladen. Ze zijn gescoped onder .bb-ui zodat ze geen
 * andere elementen met dezelfde generieke klassenamen raken.
 * Kaart-/gridstijlen voor producten staan in Divi > Thema-opties > Custom CSS.
 */

.bb-ui.font-secondary, .bb-ui .font-secondary { font-family: 'Merriweather', Georgia, serif; }
.bb-ui.font-bold, .bb-ui .font-bold { font-weight: 700; }
.bb-ui.flex, .bb-ui .flex { display: flex; }
.bb-ui.flex-col, .bb-ui .flex-col { flex-direction: column; }
.bb-ui.gap-10, .bb-ui .gap-10 { gap: 10px; }
.bb-ui.gap-36, .bb-ui .gap-36 { gap: 36px; }
.bb-ui .text-lg { font-size: 44px; }
.bb-ui .text-md { font-size: 24px; }
.bb-ui .text-sm { font-size: 18px; }
.bb-ui .text-xs { font-size: 14px; }
.bb-ui .text-dark-green { color: #1D3C34; }
.bb-ui .text-light-green { color: #39892F; }
.bb-ui .text-grey { color: #5D5D5D; }
.bb-ui .text-light-grey { color: #858585; }
.bb-ui .strike { text-decoration: line-through; }
.bb-ui #light-green-titles h3 { color: #39892F; }

@media screen and (max-width: 980px) {
	.bb-ui .text-lg { font-size: 32px; }
}
@media screen and (max-width: 768px) {
	.bb-ui .text-lg { font-size: 26px; }
	.bb-ui .text-md { font-size: 20px; }
	.bb-ui .text-sm { font-size: 16px; }
}

/* Categorienamen in productkaarten (was een link binnen een link; nu tekst). */
.bb-product-cat span { color: #78A469; }

/*
 * Categoriegrid ([bb_category_products]): de hele kaart is een link. Voorheen stond er een link
 * binnen die link; de browser "repareerde" dat door .bb-product-item direct in het grid te zetten.
 * Nu de HTML geldig is, is de link het grid-item en krijgt die de kolombreedtes uit Divi's custom CSS.
 */
.bb-category-archive .bb-product-grid > a {
	display: block;
	width: 23%;
	margin: 1%;
	color: inherit;
	text-decoration: none;
}
.bb-category-archive .bb-product-grid > a > .bb-product-item {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
}
@media (max-width: 992px) {
	.bb-category-archive .bb-product-grid > a { width: 31%; }
}
@media (max-width: 768px) {
	.bb-category-archive .bb-product-grid > a { width: 48%; }
}
@media (max-width: 576px) {
	.bb-category-archive .bb-product-grid > a { width: 100%; }
}

/*
 * Footer (Theme Builder): de foto in de call-to-action steekt op mobiel ~140px buiten beeld,
 * waardoor elke pagina horizontaal kon scrollen. clip snijdt alleen horizontaal af, zonder
 * een scrollcontainer te maken (de foto mag verticaal wel buiten de sectie uitsteken).
 * Zelfde vangnet voor de body-layout: decoraties zoals de donkergroene cirkel achter "Recent
 * bekeken" (::before op de codemodule, 556px breed) staken op een telefoon ~165px buiten beeld.
 * En voor gewone pagina's (.et-l--post): op de homepage stak de ::before-afbeelding van een rij uit.
 */
footer.et-l--footer,
.et-l--body,
.et-l--post {
	overflow-x: clip;
}

/*
 * Footer, tablet en telefoon (≤980px, waar Divi de kolommen stapelt): de foto van Theo stond
 * absoluut gepositioneerd over de tekst "Niet gevonden wat u zoekt? / Wij denken graag met u mee…"
 * (telefoon: 50% + 100px naar rechts, tablet: groot over de kop). Nu onder de tekst, gecentreerd,
 * boven de gele balk met "Theo Blaak, eigenaar Bats & Birds".
 */
@media (max-width: 980px) {
	/* De fotokolom heeft in Divi margin-top: -120px; -36px laat 24px ruimte onder de telefoonknop
	   (de tekstkolom heeft 60px padding onder). */
	body.et-db #et-boc .et-l--footer .et_pb_row .et_pb_column_1_tb_footer.et_pb_column { margin-top: -36px !important; }
	body.et-db #et-boc .et-l--footer .et_pb_image_0_tb_footer {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: min(260px, 70%) !important;
		margin: 0 auto !important;
		transform: none !important;
	}
}
/* Bovenbalk op smalle telefoons (≤400px): telefoon en e-mail naast elkaar in plaats van onder elkaar. */
@media (max-width: 400px) {
	body.et-db #et-boc .et-l--header .et_pb_row_0_tb_header .et_pb_blurb { margin-right: 12px !important; }
	body.et-db #et-boc .et-l--header .et_pb_row_0_tb_header .et_pb_blurb .et_pb_module_header { font-size: 13px; }
	body.et-db #et-boc .et-l--header .et_pb_row_0_tb_header .et_pb_blurb .et-pb-icon { font-size: 16px !important; }
}

/*
 * Header, 981–1199px: logo (270px), menu en "3 artikelen" pasten niet op één regel (de winkelwagen
 * zakte eronder, rond 1000px ook een menu-item), en "Volg ons" schoof in de bovenbalk naar een
 * tweede regel onder de witte balk. Onder 981px neemt Divi's mobiele menu het over.
 * Specifieker dan Divi's .et-db #et-boc .et-l .et_pb_…_tb_header-regels.
 */
@media (min-width: 981px) and (max-width: 1199px) {
	body.et-db #et-boc .et-l--header .et_pb_row_0_tb_header .et_pb_blurb { margin-right: 16px !important; }
	body.et-db #et-boc .et-l--header .et_pb_row_0_tb_header .et_pb_blurb .et_pb_module_header { font-size: 16px; }
	body.et-db #et-boc .et-l--header .et_pb_menu_0_tb_header .et_pb_menu__logo-wrap,
	body.et-db #et-boc .et-l--header .et_pb_menu_0_tb_header .et_pb_menu__logo { flex: 0 0 auto; width: 200px; max-width: 200px; }
	body.et-db #et-boc .et-l--header .et_pb_menu_0_tb_header .et_pb_menu__logo { margin-right: 20px; }
	body.et-db #et-boc .et-l--header .et_pb_menu_0_tb_header .et-menu > li { padding-left: 8px; padding-right: 8px; }
}
@media (min-width: 981px) and (max-width: 1099px) {
	body.et-db #et-boc .et-l--header .et_pb_menu_0_tb_header .et-menu > li { padding-left: 6px; padding-right: 6px; }
	body.et-db #et-boc .et-l--header .et_pb_menu_0_tb_header.et_pb_menu ul li a { font-size: 15px; }
	/* Alleen het winkelwagenicoon; het aantal staat in de lade. */
	body.et-db #et-boc .et-l--header .et_pb_menu_0_tb_header .et_pb_menu__cart-count { display: none; }
}