/* Section title component. See AUDIT.md §9.
   Replaces the Sunex-template .section-title AND the ~6 near-duplicate
   per-page reinventions (.contact-section-heading, .customers-section-title,
   .gas-price-section-title, .services-title, .about-modern-section-title,
   plus their matching "eyebrow" spans) with one component + modifiers. */

.section-title{
	margin-bottom: 2.5rem; /* 40px */
}

.section-title .section-sub-title{
	position: relative;
	display: inline-block;
	font-family: var(--default-font);
	font-size: 0.875rem; /* 14px */
	font-weight: 500;
	text-transform: capitalize;
	line-height: 1em;
	color: var(--primary-color);
	background: var(--secondary-color);
	border-radius: 6.25rem; /* 100px */
	padding: 0.5625rem 1rem 0.5625rem 1.9375rem; /* 9px 16px 9px 31px */
	margin-bottom: 0.9375rem; /* 15px */
}

.section-title .section-sub-title::before{
	content: '';
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	background: var(--accent-color);
	border-radius: 50%;
	width: 0.3125rem;
	height: 0.3125rem;
}

.section-title h1{
	font-size: 3.75rem; /* 60px */
	line-height: 1.1em;
	margin-bottom: 0;
}

.section-title h2{
	font-size: 3rem; /* 48px */
	line-height: 1.1em;
	margin-bottom: 0;
}

.section-title p{
	margin-top: 1.25rem; /* 20px */
	margin-bottom: 0;
}

.dark-section .section-title .section-sub-title{
	color: var(--white-color);
	background: var(--dark-divider-color);
	backdrop-filter: blur(3.125rem);
	-webkit-backdrop-filter: blur(3.125rem);
}

.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title p,
.dark-section .section-title-content p{
	color: var(--white-color);
}

.light-section .section-title .section-sub-title{
	background-color: var(--white-color);
}

/* Centered, max-width intro variant — replaces the per-page "section title"
   clones. Set --section-title-max-width per usage (defaults to 46.25rem/740px,
   the rough average of the old per-page max-widths). */
.section-title--center{
	max-width: var(--section-title-max-width, 46.25rem);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.section-title--left{
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

/* plain centered intro (no eyebrow pill) — customers/gas-prices/services/about-modern style */
.section-title--center h2{
	font-weight: 500;
	color: #000;
	line-height: 1.12;
}

.section-title--center p{
	color: #4d5763;
	font-size: 1.0625rem; /* 17px */
	font-weight: 500;
	line-height: 1.65;
}

/* plain uppercase label used directly as a child (services/about-modern style,
   as opposed to the pill-shaped .section-sub-title used by the Sunex template) */
.section-title > span{
	display: block;
	margin-bottom: 0.875rem; /* ~14px */
	color: var(--brand-blue);
	font-size: 0.6875rem; /* 11px */
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.section-title--light > span{
	color: var(--brand-yellow);
}

.section-title--light .section-sub-title{
	color: var(--white-color);
}

.section-title--light h1,
.section-title--light h2,
.section-title--light p{
	color: var(--white-color);
}

@media (max-width: 64rem){ /* tablet: 1024px */
	.section-title{
		margin-bottom: 1.875rem; /* 30px */
	}

	.section-title .section-sub-title{
		padding: 0.4375rem 0.75rem 0.4375rem 1.5625rem; /* 7px 12px 7px 25px */
		margin-bottom: 0.625rem; /* 10px */
	}

	.section-title .section-sub-title::before{
		left: 0.75rem;
	}

	.section-title h1{
		font-size: 2.75rem; /* 44px */
	}

	.section-title h2{
		font-size: 2.375rem; /* 38px */
	}

	.section-title p{
		margin-top: 0.625rem; /* 10px */
	}
}

@media (max-width: 35rem){ /* mobile: 560px */
	.section-title h1{
		font-size: 1.75rem; /* 28px */
	}

	.section-title h2{
		font-size: 1.625rem; /* 26px */
	}
}