/**
 * Buldog page header (titles printed by the theme, not by an Elementor widget).
 *
 * Hello Elementor prints `<div class="page-header"><h1 class="entry-title">` on every view
 * that no Elementor theme template covers (regular pages and posts, checkout, 404 …) and
 * centers the title in its OWN box — 1140px at >=1200px, 800px at >=992px, 600px at
 * >=768px, 500px at >=576px — which never lines up with the content. Re-align the header
 * to the page content container so the title and the breadcrumb sit on the same rails as
 * the content, exactly like the breadcrumb on product category pages.
 *
 * `--buldog-page-header-width` defaults to the Elementor kit container (1200px) and is
 * overridden inline by buldog_page_header() on pages whose own first section is narrower.
 * The tablet / mobile caps are Elementor's container widths at those breakpoints.
 */

:root {
	/* Elementor kit 655: `.e-con` and `.elementor-section-boxed > .elementor-container`. */
	--buldog-page-header-width: 1200px;
}

/* No `width`: pages that give the header their own side margins (some posts do) must keep
 * shrinking to fit, or the block overflows the viewport. */
.site-main .page-header {
	box-sizing: border-box;
	max-width: var(--buldog-page-header-width);
	margin-inline: auto;
}

@media (max-width: 1024px) {
	.site-main .page-header {
		max-width: min(1024px, var(--buldog-page-header-width));
	}
}

@media (max-width: 767px) {
	.site-main .page-header {
		max-width: min(767px, var(--buldog-page-header-width));
	}
}

/* Undo Hello's own centering box on the title (theme.css, 0,2,0 — this is 0,3,0). */
.site-main .page-header .entry-title,
.site-main .page-header .archive-description {
	max-width: none;
	width: auto;
	margin-inline: 0;
	padding-inline: 0;
}

/* Mobile: same 10px side padding the Elementor content containers use. */
@media (max-width: 767px) {
	.site-main .page-header .entry-title,
	.site-main .page-header .archive-description {
		padding-inline: 10px;
	}
}

/**
 * Breadcrumbs use the product-category markup and styling (`.buldog-electro-breadcrumb`
 * in style.css); this only adds the 30px top margin the breadcrumb widget carries on the
 * category archive template. The strip stays flush with the header box, which is what
 * makes the gray band run edge to edge on mobile there.
 */
.buldog-page-header .buldog-electro-breadcrumb {
	margin-top: 30px;
}