/**
 * Paripoorn Page Title widget.
 *
 * A page-header band: optional breadcrumb, title, and subtitle. Uses
 * theme design tokens (--pp-*) so it follows the active Paripoorn
 * Settings brand colors/fonts; Elementor style controls (see
 * PageTitle.php) override these per-instance.
 */

.pp-pt {
	position: relative;
	background-color: #FBF3E4;
	padding: 64px 24px;
	box-sizing: border-box;
	/* Centres the inner block when a max-width is set, and lets the
	   min-height control produce a vertically centred hero band. */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/*
 * Overlay for background images. Always present but fully transparent
 * until the Overlay control sets a colour — declaring it here avoids a
 * layout shift when one is applied, and keeps the stacking context
 * predictable.
 */
.pp-pt::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: transparent;
	opacity: 0;
	pointer-events: none;
}

/* The block itself stays centred (margin auto) while its text follows the
   Alignment control — the two are independent. */
.pp-pt__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ---------- Prefix ---------- */

.pp-pt__prefix {
	font-family: var(--pp-font-body, "Manrope", sans-serif);
	font-size: var(--pp-fs-eyebrow, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pp-primary, #F20D16);
	margin-bottom: 10px;
}

/* ---------- Title ---------- */

.pp-pt__title {
	font-family: var(--pp-font-heading, "Libre Caslon Text", Georgia, serif);
	font-weight: 400;
	font-size: var(--pp-fs-h1, clamp(2.25rem, 1.4rem + 3.2vw, 4rem));
	line-height: 1.12;
	color: var(--pp-heading, #1B1B1B);
	margin: 0;
	/* Long single-word titles (product SKUs, search terms) must not push
	   the band wider than the viewport. */
	overflow-wrap: break-word;
}

/* ---------- Subtitle ---------- */

.pp-pt__subtitle {
	font-family: var(--pp-font-body, "Manrope", sans-serif);
	font-size: var(--pp-fs-body, 1rem);
	line-height: 1.6;
	color: #6B6B6B;
	margin: 14px 0 0;
}

/* ---------- Breadcrumb ---------- */

/*
 * The trail markup comes from the site's SEO plugin or WooCommerce, so
 * its internal tags are unknown. Style generically — set type on the
 * wrapper and let links inherit — rather than targeting any one
 * plugin's classes, which would break when the provider changes.
 */
.pp-pt__breadcrumb {
	font-family: var(--pp-font-body, "Manrope", sans-serif);
	font-size: var(--pp-fs-small, 0.875rem);
	line-height: 1.5;
	color: #8A8A8A;
}

.pp-pt__breadcrumb--above {
	margin-bottom: 16px;
}

.pp-pt__breadcrumb--below {
	margin-top: 16px;
}

/* WooCommerce's breadcrumb ships with its own container classes and
   margins; neutralise those so spacing comes from the controls above. */
.pp-pt__breadcrumb .pp-breadcrumb,
.pp-pt__breadcrumb .woocommerce-breadcrumb,
.pp-pt__breadcrumb nav,
.pp-pt__breadcrumb p {
	margin: 0;
	padding: 0;
	max-width: none;
	width: auto;
	color: inherit;
	font: inherit;
}

.pp-pt__breadcrumb a {
	color: #6B6B6B;
	text-decoration: none;
	transition: color 0.18s ease;
}

.pp-pt__breadcrumb a:hover {
	color: var(--pp-primary, #F20D16);
}

/* Separators are usually bare text nodes or spans between links. */
.pp-pt__breadcrumb span:not([class]) {
	opacity: 0.7;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	.pp-pt {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.pp-pt__subtitle {
		font-size: var(--pp-fs-small, 0.875rem);
	}
}