/**
 * Custom HTML location pages (.jss-* in page content).
 *
 * Does NOT set colours. Strips theme prose / link / heading colours so each
 * page’s embedded <style> block controls design. Specificity is kept at 0,2,x
 * so embedded .jss-* rules in the page body still win (they load later).
 *
 * Horizontal inset: parent Appscodify sets
 *   --container: min(1120px, 100% - 2.5rem)  → ~1.25rem (~20px) each side.
 * Below we widen the page shell for .jss-* pages and use a single 12px gutter.
 */

/* -------------------------------------------------------------------------
   Block theme colours from reaching custom HTML blocks
   ------------------------------------------------------------------------- */

.prose .entry-content:has([class*="jss-"]) {
	color: unset;
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

.entry-content:has([class*="jss-"]) :is(
	h1, h2, h3, h4, h5, h6,
	p, li, a, span, summary, blockquote, small, label, dt, dd, b, strong
) {
	color: unset;
	font-family: unset;
}

.entry-content:has([class*="jss-"]) a:hover {
	color: unset;
}

/* -------------------------------------------------------------------------
   Layout — full-width shell on JSS location pages
   ------------------------------------------------------------------------- */

.entry-content [class*="jss-"] {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	box-sizing: border-box;
	isolation: isolate;
}

/* Override parent .container inset (100% - 2.5rem) for default + hero page templates */
body.has-jss-location .section--page > .container,
body.has-jss-location .jumpstart-hero-page-body > .container {
	width: 100%;
	max-width: none;
	padding-inline: 12px;
	box-sizing: border-box;
}

.has-jss-location .jumpstart-page__header,
.jumpstart-page:has(.entry-content [class*="jss-"]) .jumpstart-page__header,
body.has-jss-location .jumpstart-hero-page-article > .section-title {
	display: none !important;
}

/* Tighter top spacing once the duplicate theme H1 is removed */
body.has-jss-location .section--page,
body.has-jss-location .jumpstart-hero-page-body {
	padding-top: clamp(1.25rem, 4vw, 2.5rem);
}

@media (max-width: 820px) {
	body.has-jss-location .section--page > .container,
	body.has-jss-location .jumpstart-hero-page-body > .container {
		padding-inline: 10px;
	}

	body.has-jss-location .entry-content [class*="jss-"] .wrap {
		margin-inline: 0;
		width: 100%;
		max-width: none;
		padding-inline: 0;
	}

	body.has-jss-location .entry-content [class*="jss-"] .crumb {
		text-align: center;
		padding: 6px 4px 10px;
	}

	/* Hero title, tag and CTAs centred on small screens */
	body.has-jss-location .entry-content [class*="jss-"] .hero,
	body.has-jss-location .entry-content [class*="jss-"] .block:first-of-type {
		text-align: center;
		padding: 22px 14px 20px;
	}

	body.has-jss-location .entry-content [class*="jss-"] .hero .tag,
	body.has-jss-location .entry-content [class*="jss-"] .hero .badge {
		display: inline-block;
	}

	body.has-jss-location .entry-content [class*="jss-"] .hero h1,
	body.has-jss-location .entry-content [class*="jss-"] .hero .lede,
	body.has-jss-location .entry-content [class*="jss-"] .hero .open {
		margin-inline: auto;
		max-width: none;
	}

	body.has-jss-location .entry-content [class*="jss-"] .hero .btns {
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
   Blog posts with embedded .jss-* advisory blocks
   (Featured image crop lives in jumpstart.css for all single posts.)
   ------------------------------------------------------------------------- */

body.has-jss-blog .post-single:has([class*="jss-"]) .post-single__header {
	margin-bottom: 1rem;
}

body.has-jss-blog .entry-content:has([class*="jss-adv"]),
body.has-jss-blog .entry-content:has([class*="jss-rain"]) {
	margin-top: 0;
}