/*----------------------------------------*/
/*  Treatment / sub-service page refinements
/*  Loaded after the template CSS (see inc/links.php) so these rules win
/*  without editing the vendor stylesheets.
/*
/*  Covers: title bar (H1 size, overlay, colour, font), content alignment
/*  and hero image sizing on the 12 treatment pages.
/*----------------------------------------*/

/* ---- 1. Title bar ---------------------------------------------------- */

/*
 * The stock bar is a 500px-tall block over a bright, washed-out photo with
 * no overlay, so the navy heading sits on near-white and reads weakly.
 * Replace the photo with the brand light tint and add a soft navy-to-
 * transparent wash: enough contrast for the heading, still light and
 * clinical rather than a heavy dark band.
 */
.pbmit-title-bar-wrapper {
	background-image: none;
	background-color: var(--pbmit-light-color);
}

.pbmit-title-bar-wrapper::before {
	background-image: linear-gradient(
		135deg,
		rgba(var(--pbmit-global-color-rgb), 0.10) 0%,
		rgba(var(--pbmit-global-color-rgb), 0.02) 45%,
		rgba(255, 255, 255, 0) 100%
	) !important;
}

/* Shorter, calmer bar — the old 500px pushed the real content far down. */
.pbmit-title-bar-wrapper,
.pbmit-title-bar-content {
	min-height: 300px;
}

.pbmit-title-bar-content {
	padding: 56px 0;
}

/*
 * H1: the stock 60px/60px is oversized for a page title and forces long
 * treatment names onto three lines. 40px with a 1.25 line-height keeps
 * every heading to one or two lines and matches the Sora heading scale
 * used by the rest of the site.
 */
.pbmit-tbar-title {
	font-family: var(--pbmit-heading-typography-font-family);
	font-weight: 600;
	font-size: 40px;
	line-height: 50px;
	letter-spacing: -0.2px;
	color: var(--pbmit-blackish-color);
	margin-bottom: 0;
}

/* Breadcrumb: body font, muted, tighter under the new H1. */
.pbmit-title-bar-wrapper .pbmit-breadcrumb,
.pbmit-title-bar-wrapper .pbmit-breadcrumb a {
	font-family: var(--pbmit-body-typography-font-family);
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: var(--pbmit-body-typography-color);
}

.pbmit-title-bar-wrapper .pbmit-breadcrumb a {
	color: var(--pbmit-blackish-color);
	text-decoration: none;
}

.pbmit-title-bar-wrapper .pbmit-breadcrumb a:hover {
	color: var(--pbmit-global-color);
}

/* Separator chevrons inherit the muted tone instead of ink. */
.pbmit-title-bar-wrapper .pbmit-breadcrumb .sep {
	color: var(--pbmit-global-color);
}

/* ---- 2. Content alignment -------------------------------------------- */

/*
 * The stock row relies on Bootstrap's default 24px gutter, but the cards
 * inside each column carry their own 30px radius + padding, so the text
 * column and the sidebar never line up on a shared baseline. Widen the
 * gutter and give every card identical padding so both columns share one
 * vertical rhythm.
 */
.page-content .section-xl .row {
	--bs-gutter-x: 40px;
	row-gap: 24px;
}

/* One card treatment for every panel on the page. */
.page-content .section-xl .pbmit-bg-color-light {
	border-radius: 30px;
	padding: 32px;
}

/* Hero image card: no double padding, the image owns the radius. */
.page-content .section-xl .pbmit-bg-color-light.p-4 {
	padding: 0;
	overflow: hidden;
}

/* Section headings inside the body: consistent Sora scale + spacing. */
.page-content .section-xl .pbmit-heading-subheading .pbmit-title {
	font-size: 34px;
	line-height: 44px;
}

.page-content .section-xl .pbmit-heading-subheading h3,
.page-content .section-xl h3 {
	font-family: var(--pbmit-heading-typography-font-family);
	font-weight: 600;
	font-size: 22px;
	line-height: 32px;
	color: var(--pbmit-heading-color);
	margin-top: 32px;
	margin-bottom: 12px;
}

/* Body copy: Roboto at the token size, comfortable measure. */
.page-content .section-xl .pbmit-heading-desc {
	font-family: var(--pbmit-body-typography-font-family);
	font-size: var(--pbmit-body-typography-font-size);
	line-height: 1.75;
	color: var(--pbmit-body-typography-color);
}

.page-content .section-xl .pbmit-heading-desc p {
	margin-bottom: 20px;
}

/* Sidebar widget titles share the body-heading scale. */
.page-content .section-xl .widget-title {
	font-family: var(--pbmit-heading-typography-font-family);
	font-weight: 600;
	font-size: 18px;
	line-height: 26px;
	color: var(--pbmit-heading-color);
	margin-bottom: 16px;
}

/* ---- 3. Hero image sizing -------------------------------------------- */

/*
 * The service thumbnails are only ~275x183, but the template stretches
 * them to w-100 across an 8-column block — roughly 700px wide, so a 2.5x
 * upscale that looks soft and blurry. Cap the width and hold a 3:2 frame
 * (the images' native ratio) with object-fit so they stay crisp.
 *
 * Bootstrap's .w-100 is `width: 100% !important`, so the cap has to be
 * !important too or it is ignored.
 */
.page-content .section-xl .pbmit-bg-color-light img.img-fluid {
	display: block;
	width: 100%;
	max-width: 520px !important;
	margin-inline: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 22px;
}

/* ---- 4. Responsive --------------------------------------------------- */

@media (max-width: 991px) {
	.pbmit-title-bar-wrapper,
	.pbmit-title-bar-content {
		min-height: 240px;
	}

	.pbmit-title-bar-content {
		padding: 44px 0;
	}

	.pbmit-tbar-title {
		font-size: 32px;
		line-height: 42px;
	}

	.page-content .section-xl .row {
		--bs-gutter-x: 24px;
	}

	.page-content .section-xl .pbmit-bg-color-light {
		padding: 24px;
	}

	.page-content .section-xl .pbmit-bg-color-light img.img-fluid {
		max-width: 100%;
	}
}

@media (max-width: 575px) {
	.pbmit-title-bar-wrapper,
	.pbmit-title-bar-content {
		min-height: 200px;
	}

	.pbmit-title-bar-content {
		padding: 36px 0;
	}

	.pbmit-tbar-title {
		font-size: 27px;
		line-height: 36px;
	}

	.page-content .section-xl .pbmit-bg-color-light {
		padding: 20px;
		border-radius: 22px;
	}
}

/* ---- 5. Header nav: keep it on one row in the narrow desktop band ----- */

/*
 * The desktop nav switches on at 1201px, but at that width the six items
 * need ~698px (459px of labels + 240px of `margin: 0 20px`) while the
 * flex row only offers ~655px — so the last item ("General FAQ's") wrapped
 * to a second line and the bar grew to 160px tall.
 *
 * Tighten the item margins and the logo's trailing padding just inside the
 * desktop band so the row always fits. Below 1200px the off-canvas menu
 * takes over and these values are irrelevant.
 */
@media (min-width: 1201px) and (max-width: 1399px) {
	.header-style-14 .site-navigation ul.navigation > li > a {
		margin: 0 13px;
	}

	.header-style-14 .site-branding {
		padding-right: 30px;
	}

	.header-style-14 .pbmit-header-content .pbmit-logo-btnarea,
	.header-style-14 .pbmit-right-box {
		flex: 0 1 auto;
	}
}

/* Still tighter just above the breakpoint, where the shortfall is worst. */
@media (min-width: 1201px) and (max-width: 1279px) {
	.header-style-14 .site-navigation ul.navigation > li > a {
		margin: 0 9px;
	}

	.header-style-14 .site-branding {
		padding-right: 20px;
	}
}