/*
 * Site-brede fixes — overgezet uit Customizer > Additional CSS (DB).
 *
 * Stond eerder als losse custom_css in de database (per omgeving handmatig).
 * Nu version-controlled in het child theme zodat een deploy geen handmatige
 * Customizer-stap meer nodig heeft.
 */

/* ---------- Site-brede self-hosted fonts ----------
 *
 * Alle Google-font-families die de site op gepubliceerde content echt gebruikt
 * staan hier in het child theme, gebundeld met RELATIEVE URLs. Daardoor hangen ze
 * niet af van Elementors per-omgeving Google-Fonts-levering en breken ze nooit bij
 * een kopie/migratie (geen absolute URLs, geen externe gstatic — AVG-proof):
 *
 *   - Familjen Grotesk (Elementor global default) — variabel, 1 woff2/subset
 *   - DM Sans (portal- + merk-font)               — variabel, 1 woff2/subset
 *   - Inter (marketing-body, site-breed)          — variabel, 1 woff2/subset
 *   - Khand (condensed headings)                  — static, weights 300–700
 *   - Abel (marketing-tekst)                      — static, weight 400
 *   - Special Elite (accent/typewriter)           — static, weight 400
 *   - IBM Plex Sans (1 los element)               — static, weight 500
 *
 * Elementors eigen Google Fonts zijn losgekoppeld via de tgc-tweaks-module
 * "Elementor Google Fonts uit" (forceert elementor_google_fonts = 0), zodat er
 * geen dubbele/CDN-load meer is en niks meer per-omgeving hoeft te helen.
 * Barlow + Archivo Narrow zijn Elementor Custom Fonts (lokaal geüpload, geen
 * Google) en blijven via Elementor laden.
 *
 * Subsets: latin + latin-ext. Geladen op de hele site (dit bestand laadt overal).
 */
@font-face {
	font-family: "Familjen Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/familjengrotesk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Familjen Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/familjengrotesk-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/dmsans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/dmsans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Inter (variabel, self-hosted) — marketing-body site-breed ===== */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Khand (static 300-700, self-hosted) — condensed headings ===== */
@font-face {
	font-family: "Khand";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/khand-300-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Khand";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/khand-300-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Khand";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/khand-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Khand";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/khand-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Khand";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/khand-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Khand";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/khand-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Khand";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/khand-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Khand";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/khand-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Khand";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/khand-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Khand";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/khand-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Abel / Special Elite / IBM Plex Sans (self-hosted) ===== */
@font-face {
	font-family: "Abel";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/abel-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Special Elite";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/specialelite-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Special Elite";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/specialelite-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibmplexsans-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibmplexsans-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Taalswitcher dropdown niet afknippen (TranslatePress in Elementor nav). */
.e-n-menu-wrapper {
	overflow: visible !important;
}
.elementor-shortcode .trp-ls-shortcode-current-language,
.elementor-shortcode .trp-ls-shortcode-language,
.trp-language-switcher {
	width: auto !important;
}

/* Derde-niveau submenu correct uitklappen (desktop). */
@media screen and (min-width: 1024px) {
	.elementor-nav-menu .sub-menu .sub-menu {
		top: 0 !important;
		left: 100% !important;
		margin-left: 0 !important;
		position: absolute !important;
		background-color: #fff !important;
		z-index: 9999 !important;
	}
}

/* My Account: tabelkoppen links uitlijnen + ademruimte. */
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce thead:first-child tr:first-child th {
	text-align: left;
	padding-top: 20px;
}

/* Wordfence login-security melding verbergen op WooCommerce-pagina's. */
.woocommerce-page .wfls-login-message {
	display: none !important;
}

/*
 * Lege mini-cart: alleen het icoon (::before) + styling in CSS. De boodschap-tekst
 * zelf is de NATIVE WooCommerce-string ("No products in the cart." /
 * "Geen producten in je winkelwagen"), die als echte DOM-tekst rendert en dus door
 * TranslatePress te vertalen/aan te passen is. Voorheen werd die tekst verborgen
 * (font-size:0) en overschreven door een CSS ::after content — onvertaalbaar voor
 * TranslatePress. Custom bewoording? Pas de string aan in TranslatePress (beide
 * talen). Klik-naar-plans gedrag in assets/js/mini-cart.js.
 */
.woocommerce-mini-cart__empty-message,
.widget_shopping_cart .woocommerce-mini-cart__empty-message,
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
	position: relative !important;
	font-size: 22px !important;
	line-height: 1.4 !important;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.6);
	text-align: center !important;
	margin: 72px auto !important;
	max-width: 260px;
	letter-spacing: 0.01em;
	cursor: pointer;
}
.woocommerce-mini-cart__empty-message::before,
.widget_shopping_cart .woocommerce-mini-cart__empty-message::before,
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message::before {
	content: "🛒";
	display: block;
	font-size: 34px;
	line-height: 1;
	margin: 0 auto 16px auto;
	color: rgba(0, 0, 0, 0.38);
	text-align: center;
}
.woocommerce-mini-cart__empty-message:hover {
	color: rgba(0, 0, 0, 0.82);
}
.woocommerce-mini-cart__empty-message:hover::before,
.widget_shopping_cart .woocommerce-mini-cart__empty-message:hover::before,
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message:hover::before {
	color: rgba(0, 0, 0, 0.5);
}

/*
 * WooCommerce-meldingen (success / info / error) — site-breed in TGC-stijl.
 * Vervangt de standaard WC-notice (scherpe top-border, grijs vlak) door een
 * zachte card met gekleurde accent-rand links: groen=ok, rood=fout, olijf=info.
 * Tokens komen uit tokens.css (laadt site-breed). Geldt overal: cart, checkout,
 * shop én de account-portal.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	margin: 0 0 var(--tgc-space-3);
	padding: 1rem 1.25rem 1rem 3rem;
	background: var(--tgc-color-surface);
	color: var(--tgc-color-text);
	border: 1px solid var(--tgc-color-border);
	border-left: 4px solid var(--tgc-color-text-muted);
	border-top: 1px solid var(--tgc-color-border);
	border-radius: var(--tgc-radius);
	box-shadow: var(--tgc-shadow-card);
	list-style: none;
	font-family: var(--tgc-font-sans);
	font-size: var(--tgc-text-sm);
	line-height: 1.6;
}

.woocommerce-message {
	border-left-color: var(--tgc-color-success);
}

.woocommerce-info {
	border-left-color: var(--tgc-color-primary);
}

.woocommerce-error {
	border-left-color: var(--tgc-color-danger);
}

/* WC-icoon (::before) blijft absoluut links staan (block-flow), alleen herkleurd
   + uitgelijnd op de nieuwe padding. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	left: 1rem;
	top: 1rem;
	margin: 0;
	font-size: 1.05em;
	line-height: 1.4;
}

.woocommerce-message::before {
	color: var(--tgc-color-success);
}

.woocommerce-info::before {
	color: var(--tgc-color-primary);
}

.woocommerce-error::before {
	color: var(--tgc-color-danger);
}

/* Actieknop (Continue shopping / View cart) houdt WC's float:right — werkt in
   block-flow, dus tekst loopt links, knop rechts. */
.woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Notice krijgt van WC een tabindex=-1 + programmatische focus (a11y) → browser
   tekent een focus-outline bovenop onze rand ("dubbele lijn"). De notice is geen
   toetsenbord-navigeerbaar element, dus de outline kan weg. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
	outline: none;
}

/* Actieknop in een notice (Continue shopping / View cart): nette compacte ghost-knop
   i.p.v. de kale standaard. Float:right werkt in de block-flow van de notice. */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: transparent;
	color: var(--tgc-color-text);
	border: 1px solid var(--tgc-color-border);
	border-radius: var(--tgc-radius);
	padding: 0.45rem 1rem;
	font-size: var(--tgc-text-sm);
	font-weight: var(--tgc-weight-bold);
	text-decoration: none;
	box-shadow: none;
	min-height: 0;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
	background: var(--tgc-color-surface-alt);
	color: var(--tgc-color-text);
	border-color: var(--tgc-color-border);
}

/* ============================================================
   Change payment method (order-pay) — gestylede, minimale card.
   Override-template: woocommerce/checkout/form-change-payment-method.php (toont
   alleen de gateway-keuze, geen product/totaal-tabel). De order-pay-pagina is geen
   account-pagina, dus portal.css laadt daar niet — vandaar hier (site-breed).
   ============================================================ */
.tgc-paychange {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--tgc-space-4) var(--tgc-space-4) var(--tgc-space-6);
	font-family: var(--tgc-font-sans);
}
.tgc-paychange__card {
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	padding: var(--tgc-space-6) var(--tgc-space-4);
	background: var(--tgc-color-surface);
	border: 1px solid var(--tgc-color-border);
	border-radius: var(--tgc-radius-card);
	box-shadow: var(--tgc-shadow-card);
}
.tgc-paychange__title {
	margin: 0 0 0.25rem;
	font-size: var(--tgc-text-h2);
	font-weight: var(--tgc-weight-bold);
	color: var(--tgc-color-text);
}
.tgc-paychange__sub {
	margin: 0 0 var(--tgc-space-4);
	font-size: var(--tgc-text-sm);
	color: var(--tgc-color-text-muted);
}
.tgc-paychange .payment_methods {
	list-style: none;
	margin: 0 0 var(--tgc-space-3);
	padding: 0;
}
.tgc-paychange .payment_methods li {
	padding: 0.85rem 1rem;
	border: 1px solid var(--tgc-color-border);
	border-radius: var(--tgc-radius);
	margin-bottom: var(--tgc-space-2);
	background: var(--tgc-color-surface);
}
.tgc-paychange .payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0 0.4rem;
	font-weight: var(--tgc-weight-medium);
}
.tgc-paychange .payment_box {
	margin-top: var(--tgc-space-2);
	font-size: var(--tgc-text-sm);
	color: var(--tgc-color-text-muted);
}
.tgc-paychange #place_order {
	width: 100%;
	margin-top: var(--tgc-space-2);
	background: var(--tgc-color-text);
	color: var(--tgc-color-on-primary);
	border: 0;
	border-radius: var(--tgc-radius);
	padding: 0.8rem 1.5rem;
	font-weight: var(--tgc-weight-bold);
	font-size: var(--tgc-text-sm);
	cursor: pointer;
}
.tgc-paychange #place_order:hover {
	opacity: 0.9;
}
.tgc-paychange .update-all-subscriptions-payment-method-wrap {
	display: block;
	margin-bottom: var(--tgc-space-2);
	font-size: var(--tgc-text-sm);
	color: var(--tgc-color-text-muted);
}
.tgc-paychange__back {
	margin: var(--tgc-space-4) 0 0;
	text-align: center;
}
.tgc-paychange__back a {
	color: var(--tgc-color-text-muted);
	text-decoration: none;
	font-size: var(--tgc-text-sm);
	font-weight: var(--tgc-weight-medium);
}
.tgc-paychange__back a:hover {
	color: var(--tgc-color-text);
}