/*
 * Witgoed-Gids centraal layoutcontract.
 * Dit bestand bepaalt uitsluitend de gedeelde buitenmaat, breadcrumbs,
 * overzichtshero en typografische uitlijning van normale websitepagina's.
 * De keuzehulp is bewust volledig uitgesloten.
 */

/* Eén buitenmaat voor alle normale pagina's, header en footer. */
.wg-container,
.wg-apparaten-container,
.wg-problem-page__container,
.wg-problem__container,
.wg-koopgids-shell,
.wg-page__container,
.wg-header__container,
.wg-footer__container,
.wg-footer__bottom-container,
.wg-home-section__container,
.wg-home-hero__container,
.wg-home-cta__container {
	width: min(var(--wg-container-width), calc(100% - (2 * var(--wg-page-gutter))));
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

/* Eén breadcrumbcomponent voor alle normale pagina's. */
.wg-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	margin: 0 0 var(--wg-page-breadcrumb-gap);
	padding: 0;
	color: var(--wg-color-text-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

.wg-breadcrumbs a,
.wg-breadcrumbs span {
	color: inherit;
}

.wg-breadcrumbs a {
	text-decoration: none;
}

.wg-breadcrumbs a:hover,
.wg-breadcrumbs a:focus-visible {
	color: var(--wg-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wg-breadcrumbs [aria-current="page"] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* De breadcrumb van apparaatdetails staat buiten de eigen producthero. */
.wg-apparaat-page > .wg-container:first-child {
	padding-top: var(--wg-page-hero-top);
}

/* Eén verticale hero-opbouw voor alle normale overzichtspagina's. */
.wg-hub-hero,
.wg-apparaten-hero,
.wg-problem-page__hero,
.wg-guides-hub__hero {
	box-sizing: border-box;
	min-height: var(--wg-overview-hero-min-height);
	padding-top: var(--wg-page-hero-top);
	padding-bottom: var(--wg-page-hero-bottom);
}

.wg-hub-hero h1,
.wg-apparaten-hero h1,
.wg-problem-page__title,
.wg-guides-hub__hero h1,
.wg-problem__title,
.wg-koopgids-hero__title,
.wg-page__title {
	margin: 0;
	color: var(--wg-color-heading);
	font-size: var(--wg-font-size-hero);
	font-weight: 800;
	line-height: var(--wg-line-height-heading);
	letter-spacing: -0.035em;
}

.wg-hub-eyebrow,
.wg-apparaten-eyebrow,
.wg-guides-hub__eyebrow,
.wg-section-heading__eyebrow,
.wg-koopgids-editorial__eyebrow,
.wg-koopgids-faq__eyebrow,
.wg-koopgids-related__eyebrow {
	display: block;
	margin: 0 0 10px;
	color: var(--wg-color-primary);
	font-size: var(--wg-font-size-eyebrow);
	font-weight: 750;
	line-height: 1.3;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.wg-hub-hero h1,
.wg-apparaten-hero h1,
.wg-guides-hub__hero h1 {
	margin-bottom: var(--wg-hero-title-gap);
}

.wg-hub-hero__content > p,
.wg-apparaten-intro,
.wg-problem-page__intro,
.wg-problem__intro,
.wg-guides-hub__hero-content > p,
.wg-koopgids-hero__intro {
	max-width: 720px;
	color: var(--wg-color-text-muted);
	font-size: var(--wg-font-size-intro);
	line-height: var(--wg-line-height-body);
}

.wg-problem-page__intro,
.wg-problem__intro,
.wg-koopgids-hero__intro {
	margin-top: var(--wg-hero-intro-gap);
}

.wg-apparaten-section-header h2,
.wg-section-heading__title,
.wg-guides-hub__section-heading h2,
.wg-guides-hub__structure h2,
.wg-koopgids__section-title {
	color: var(--wg-color-heading);
	font-size: var(--wg-font-size-section);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.03em;
}

@media (max-width: 720px) {
	.wg-container,
	.wg-apparaten-container,
	.wg-problem-page__container,
	.wg-problem__container,
	.wg-koopgids-shell,
	.wg-page__container,
	.wg-header__container,
	.wg-footer__container,
	.wg-footer__bottom-container,
	.wg-home-section__container,
	.wg-home-hero__container,
	.wg-home-cta__container {
		width: min(var(--wg-container-width), calc(100% - (2 * var(--wg-page-gutter-mobile))));
	}

	.wg-breadcrumbs {
		gap: 7px;
		margin-bottom: var(--wg-page-breadcrumb-gap-mobile);
		font-size: 13px;
	}

	.wg-apparaat-page > .wg-container:first-child {
		padding-top: var(--wg-page-hero-top-mobile);
	}

	.wg-hub-hero,
	.wg-apparaten-hero,
	.wg-problem-page__hero,
	.wg-guides-hub__hero {
		min-height: 0;
		padding-top: var(--wg-page-hero-top-mobile);
	}
}

/*
 * Globaal breadcrumbcontract.
 *
 * Dit contract staat in het bestaande centrale design-systembestand.
 * De selectors zijn bewust specifieker dan de paginaspecifieke breadcrumbregels.
 * Daardoor blijft het responsive gedrag ook gelden wanneer een paginastylesheet
 * later wordt geladen, terwijl de eigen verticale positionering intact blijft.
 */

body .wg-breadcrumbs[aria-label],
body .wg-choice-breadcrumbs[aria-label] {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	min-width: 0;
	max-width: 100%;
	color: var(--wg-color-text-subtle, #7a8598);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

body .wg-breadcrumbs[aria-label] > *,
body .wg-choice-breadcrumbs[aria-label] > * {
	flex: 0 0 auto;
}

body .wg-breadcrumbs[aria-label] a,
body .wg-choice-breadcrumbs[aria-label] a {
	color: #536176;
	text-decoration: none;
}

body .wg-breadcrumbs[aria-label] a:hover,
body .wg-breadcrumbs[aria-label] a:focus-visible,
body .wg-choice-breadcrumbs[aria-label] a:hover,
body .wg-choice-breadcrumbs[aria-label] a:focus-visible {
	color: var(--wg-color-primary, #3568df);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .wg-breadcrumbs[aria-label] [aria-current="page"],
body .wg-choice-breadcrumbs[aria-label] [aria-current="page"] {
	color: var(--wg-color-text-muted, #647084);
}

/*
 * Op mobiel en tablet blijft de volledige breadcrumb op één rustige regel.
 * De browser verzorgt touch- en trackpadscrolling zonder JavaScript.
 */
@media (max-width: 1024px) {
	body .wg-breadcrumbs[aria-label],
	body .wg-choice-breadcrumbs[aria-label] {
		width: 100%;
		flex-flow: row nowrap;
		gap: 7px;
		overflow-x: auto;
		overflow-y: hidden;
		font-size: 12px;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
	}

	body .wg-breadcrumbs[aria-label]::-webkit-scrollbar,
	body .wg-choice-breadcrumbs[aria-label]::-webkit-scrollbar {
		display: none;
	}

	body .wg-breadcrumbs[aria-label] > *,
	body .wg-choice-breadcrumbs[aria-label] > * {
		flex: 0 0 auto;
		max-width: none;
		white-space: nowrap;
	}

	body .wg-breadcrumbs[aria-label] a,
	body .wg-breadcrumbs[aria-label] span,
	body .wg-choice-breadcrumbs[aria-label] a,
	body .wg-choice-breadcrumbs[aria-label] span {
		white-space: nowrap;
	}

	body .wg-breadcrumbs[aria-label] [aria-current="page"],
	body .wg-choice-breadcrumbs[aria-label] [aria-current="page"] {
		overflow: visible;
		text-overflow: clip;
		white-space: nowrap;
	}
}