/*
 * Site Concepts: phone and tablet sizing.
 * astra/style.css forces h1 40px, h2 35px and p 18px (all !important) at every
 * screen size, and removes the padding of inner Elementor containers, so on
 * phones headings are oversized and text runs to the screen edge. These rules
 * scale type down and keep text off the edges. Images and carousels stay
 * edge to edge.
 */

@media (max-width: 1024px) {
	html body #content h1,
	html body #content .elementor-widget-heading h1.elementor-heading-title {
		font-size: 34px !important;
		line-height: 1.2 !important;
	}

	html body #content h2,
	html body #content .elementor-widget-heading h2.elementor-heading-title {
		font-size: 28px !important;
		line-height: 1.25 !important;
	}
}

@media (max-width: 767px) {
	/* Type scale */
	html body #content h1,
	html body #content .elementor-widget-heading h1.elementor-heading-title {
		font-size: 28px !important;
		line-height: 1.2 !important;
	}

	html body #content h2,
	html body #content .elementor-widget-heading h2.elementor-heading-title {
		font-size: 23px !important;
		line-height: 1.25 !important;
	}

	html body #content h3,
	html body #content .elementor-widget-heading h3.elementor-heading-title {
		font-size: 20px !important;
		line-height: 1.3 !important;
	}

	html body #content h4,
	html body #content h5,
	html body #content h6 {
		font-size: 17px !important;
		line-height: 1.35 !important;
	}

	html body #content p {
		font-size: 16px !important;
		line-height: 1.6 !important;
	}

	html body #content .elementor-widget-text-editor,
	html body #content .elementor-icon-list-text,
	html body #content li {
		font-size: 16px;
		line-height: 1.6;
	}

	/* Keep text off the screen edges (images and carousels are not padded). */
	#content .elementor-widget-heading,
	#content .elementor-widget-text-editor,
	#content .elementor-widget-icon-list,
	#content .elementor-widget-icon-box,
	#content .elementor-widget-image-box,
	#content .elementor-widget-button,
	#content .e-heading-base,
	#content .e-paragraph-base,
	#content .entry-header {
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box;
	}

	/*
	 * Desktop-only side margins (e.g. 250px on the Regional Offices addresses)
	 * push content off a phone screen. Clear them on phones.
	 */
	#content .elementor-widget,
	#content .elementor-widget > .elementor-widget-container {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100%;
	}

	/* Text widgets already padded above: avoid doubling the theme's 10px on paragraphs. */
	#content .elementor-widget-text-editor p {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Buttons: breathing room above and below so they never sit on the next photo or text. */
	#content .elementor-widget-button {
		margin-top: 8px !important;
		margin-bottom: 28px !important;
	}

	/* Standalone photos get the same side space as text (carousels and banners stay edge to edge). */
	#content .elementor-widget-image {
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box;
	}

	/* Key Team Members (page 16): framed, evenly sized portraits with space between people. */
	.page-id-16 #content .elementor-widget-image {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.page-id-16 #content .elementor-widget-image img {
		display: block;
		width: 100%;
		max-width: 320px;
		aspect-ratio: 400 / 470;
		height: auto;
		margin: 0 auto;
		object-fit: cover;
		object-position: center top;
	}

	.page-id-16 #content .e-con.e-child:has(> .elementor-widget-image) {
		margin-bottom: 32px !important;
	}

	/* Illustrations (page 11): section headings. */
	html body #content .elementor-11 .elementor-widget-heading h2.elementor-heading-title {
		font-size: 18px !important;
	}

	/* Carousel captions over images: a little more breathing room. */
	html body .carousel-slider .carousel-slider__caption .caption,
	html body #content figcaption {
		padding: 4px 8px !important;
		font-size: 13px !important;
	}

	/* Extra spacing between stacked sections. */
	#content .e-con.e-parent {
		--row-gap: 16px;
	}
}