/* Abhi Arya — Compact Page Header
 * Applies only to pages that carry an Abhi Arya tool shortcode (body class "aach").
 * Restyles the theme's own page intro (breadcrumbs, H1, lead) to the compact Developer Tools look
 * and lines it up with the tool below. No markup is changed. */

.aach .intro { padding-top: 20px !important; padding-bottom: 18px !important; }
/* Most tools: a 1180px box with the same side padding as the theme, so the heading lines up with the tool's text */
.aach .intro .wrap { max-width: 1180px !important; }
/* Tools that are 1240px wide */
.aach.aach--w1240 .intro .wrap,
.aach:has(.entry__content > .aarc, .entry__content > .adc, .entry__content > .aatl) .intro .wrap { max-width: calc(1240px + 2 * var(--gutter, 48px)) !important; }

.aach .intro .crumbs { margin-bottom: 10px !important; }
.aach .intro .intro__title {
	font-size: clamp(1.65rem, 1.05rem + 1.55vw, 2.3rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -.015em !important;
	font-weight: 600 !important;
	max-width: none !important;
	margin: 0 !important;
}
.aach .intro .intro__lead {
	font-size: 1rem !important;
	line-height: 1.55 !important;
	max-width: 72ch !important;
	margin-top: .4rem !important;
	margin-bottom: 0 !important;
}

/* Selector Finder sat in the narrow text column: give it the full tool width */
.aach .entry__content.wrap--text:has(> .aasf) { max-width: 1180px !important; }

/* Full-bleed tools use 100vw, which counts the scrollbar and caused a few pixels of sideways scroll */
.aach #main { overflow-x: clip; }

@media (max-width: 600px) {
	.aach .intro { padding-top: 14px !important; padding-bottom: 12px !important; }
	.aach .intro .crumbs { margin-bottom: 8px !important; }
	.aach .intro .intro__lead { font-size: .95rem !important; }
}