/**
 * Out-N-Out Page Header widget.
 * Structural + token-driven defaults only; Elementor Style controls override
 * per-instance. Loaded only where used (handle: oon-widget-page-header). The
 * breadcrumb markup is styled by the shared breadcrumbs stylesheet.
 */

.oon-page-header {
	padding-block: clamp(20px, 3.5vw, 44px);
}

/* Alignment (title text + breadcrumb row) driven by a single modifier. */
.oon-page-header--center {
	text-align: center;
}
.oon-page-header--center .oon-breadcrumbs__list {
	justify-content: center;
}
.oon-page-header--left {
	text-align: left;
}
.oon-page-header--left .oon-breadcrumbs__list {
	justify-content: flex-start;
}
.oon-page-header--right {
	text-align: right;
}
.oon-page-header--right .oon-breadcrumbs__list {
	justify-content: flex-end;
}

.oon-page-header__title {
	margin: 0 0 16px;
	font-family: var(--oon-font-heading);
	font-weight: var(--oon-fw-heading, 500);
	/* Live .h1 ≈ 48px desktop → ~32px mobile. */
	font-size: clamp(2rem, 1rem + 2.6vw, 3rem);
	line-height: 1.15;
	letter-spacing: var(--oon-heading-letter-spacing, 0);
	color: var(--oon-color-heading, #332d55);
}

.oon-page-header__breadcrumb {
	line-height: 1;
}