/* =====================================================================
   media.css — responsive / breakpoint overrides only. No desktop styling.
   Bootstrap 5 breakpoints: xxl 1400 · xl 1200 · lg 992 · md 768 · sm 576
   ===================================================================== */

/* ---------------------------------------------------------------
   < 1500px — the header bar tightens.

   The desktop bar turns on at xl (1200px), but a scrollbar leaves ~1185px of
   usable width, so the brand lockup and both buttons are tightened to fit
   without a horizontal scrollbar. That step sits at 1500 rather than the
   design's 1400 because the design's full six-item nav needs ~1460px at full
   size — measured at 1400 with five items it overflowed by 60px.
   --------------------------------------------------------------- */
@media (max-width: 1699.98px) {
	/* Measured, not assumed: at full size the six-item bar needs ~1522px
	   (410px brand reservation + 650px items + 462px actions) but only
	   1476px is available at a 1500px viewport, so the menu wrapped to two
	   rows from 1699 down to 1500. The step therefore starts at 1700.
	   Brand width and the menu's left reservation are fluid now
	   (--brand-w, layout/header.css) so they need no per-step values. */
	.site-header .navbar-nav {
		gap: .875rem;
	}

	.site-header .nav-link {
		font-size: .875rem;
	}

	.header-actions {
		gap: .75rem;
	}

	.header-call,
	.header-quote {
		--bs-btn-padding-x: 1rem;
		font-size: .875rem;
	}

	.header-call svg {
		width: 1rem;
		height: 1rem;
	}
}

/* ---------------------------------------------------------------
   < 1500px - the footer brand column stops fitting a full-size badge.

   Measured on the brand column's content box: it holds 675px at 1700+,
   595px at 1500, then drops to 553px at 1400 and 451px from 1366 to 1200
   (Bootstrap's 1140px container cap). The default lockup + gap + badge
   needs 580px, so from 1500 down the three tighten to 424px and stay
   side by side. Below that the column is genuinely too narrow - 296px at
   992-1199 (col-lg-4) and 359px at 414 - and the badge wraps back under
   the socials on its own, which is the original stacked design.
   --------------------------------------------------------------- */
@media (max-width: 1499.98px) {
	.footer-brand-col {
		gap: 1.5rem;
	}

	.footer-brand-main {
		flex-basis: 15rem;
	}

	.footer-association-logo {
		width: 10rem;
	}
}

/* ---------------------------------------------------------------
   1200px - 1399px - the small-desktop bar.

   global.css only widens .container (max-width: 1678px) from 1400px up,
   so below that Bootstrap's default 1140px cap snaps back in and the bar
   loses up to 210px of usable width at a 1350px viewport - which is what
   pushed the actions past the viewport edge (measured 4-79px of real
   horizontal overflow from 1350 down to 1200) and wrapped the menu.

   Releasing the cap on the header container only reclaims that width
   without touching any section's content width, then the menu and
   buttons tighten one more step to keep everything on one line.
   --------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.site-header .container {
		max-width: none;
	}

	.site-header .navbar-nav {
		gap: .625rem;
	}

	.site-header .nav-link {
		font-size: .8125rem;
	}

	.header-actions {
		gap: .5rem;
	}

	.header-call,
	.header-quote {
		--bs-btn-padding-x: .875rem;
		font-size: .8125rem;
	}
}

/* ---------------------------------------------------------------
   < 1400px — scale the display type down from the 1920px design
   --------------------------------------------------------------- */
@media (max-width: 1399.98px) {
	:root {
		--section-spacing: 4rem;
	}

	.estimator__pitch,
	.quote-card__intro {
		padding: 3rem;
	}

	.estimator__wizard,
	.quote-card__form-wrap {
		padding: 2.5rem 3rem 3rem;
	}

	/* Below the design width the container fills the viewport, so the badge
	   tucks back inside the image rather than overhanging it. */
	.why-choose__badge {
		right: 0;
	}

	/* About — the story/commitment badge cards tuck inside the image too. */
	.media-badge__card {
		right: 0;
	}

	.media-badge--start .media-badge__card {
		left: 0;
	}

	/* Service pages — the page-scoped rhythm follows :root down. The
	   cross-links re-flow on their own; see components/service-page.css. */
	.single-solar_service,
	.single-electrical_service {
		--section-spacing: 3rem;
	}

	.service-detail--single {
		padding-block: 4.5rem 5rem;
	}

	.more-services-section {
		padding-bottom: 7rem;
	}

	/* Electrical listing — the split intro/grid bands scale together. */
	.services-grid-section {
		padding-block: 3.5rem;
	}

}

/* ---------------------------------------------------------------
   < 1200px (below xl) — the nav bar collapses here, not at lg: with the
   design's six nav items, the 390px brand lockup and both header buttons a
   horizontal bar needs ~1200px.
   --------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	/* Header */
	.site-header .navbar {
		min-height: 0;
		padding-block: 1rem;
	}

	.site-brand {
		width: 10rem;
		/* 160px -> ~77px tall; was 200px -> 96px */
		max-width: 55%;
	}

	.site-header .primary-nav {
		padding-top: 1.5rem;
	}

	.site-header .navbar-nav {
		gap: .25rem;
	}

	.site-header .nav-link {
		padding-block: .625rem;
	}

	.site-header .navbar-nav .sub-menu {
		padding-left: 1rem;
		background: transparent;
		border: 0;
	}

	.site-header .navbar-nav .sub-menu a {
		display: block;
		padding-block: .5rem;
		color: var(--text-on-dark);
	}

	.header-actions {
		flex-wrap: wrap;
		margin-top: 1.5rem;
	}
}

/* ---------------------------------------------------------------
   992px – 1199px (lg)
   --------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	/*.hero-section {*/
	/*	min-height: 44rem;*/
	/*}*/

	.trust-bar__list {
		justify-content: center;
		gap: 0.5rem 0.5rem;
	}

	.trust-item {
		flex: 1 1 30%;
	}

	.how-works__list {
		gap: 2rem;
	}
}

/* ---------------------------------------------------------------
   < 992px (below lg) — brand returns to the flow, panels stack
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
	:root {
		--section-spacing: 3rem;
	}
.trust-bar__list {
		justify-content: center;
		gap: 0.5rem 0.5rem;
		flex-wrap: wrap;
	}

	/* Hero — the scrim becomes vertical, since the copy sits over the photo. */
	.hero-section {
		min-height: 0;
		padding-block: 4rem;
	}

	.hero-section__scrim {
		background: linear-gradient(180deg, rgba(6, 8, 10, .9) 0%, rgba(6, 8, 10, .78) 55%, rgba(6, 8, 10, .9) 100%);
	}

	.hero-content {
		max-width: none;
	}

	.hero-actions {
		margin-bottom: 2.5rem;
	}

	.hero-stats {
		gap: 2rem;
	}

	/* Estimator + contact panels stack */
	.estimator,
	.quote-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.estimator__progress {
		margin-bottom: 2.5rem;
	}

	.why-choose__features {
		margin-top: 2.5rem;
	}

	/* How solar works: diagram first, then both lists left-aligned */
	.how-works__list--end .how-step {
		flex-direction: row;
		text-align: left;
	}

	/* Testimonials: two per view */
	.testimonials__slide {
		flex: 0 0 calc((100% - 1.625rem) / 2);
	}

	.google-rating {
		margin-top: 1.5rem;
	}

	/* About */
	.page-hero {
		min-height: 0;
		padding-block: 3rem 3.5rem;
	}

	.page-hero__scrim {
		background: linear-gradient(180deg, rgba(6, 8, 10, .88) 0%, rgba(6, 8, 10, .74) 55%, rgba(6, 8, 10, .9) 100%);
	}

	.page-hero__content {
		max-width: none;
	}

	.page-hero__breadcrumb {
		margin-bottom: 1.75rem;
	}

	.commitment-section {
		padding-top: 0;
	}

	/* Keep the media above the copy in both story sections on small screens. */
	.commitment-section .order-lg-2 {
		order: -1;
	}

	.stats-band__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 2.5rem;
	}

	.stats-band__item:nth-child(odd) {
		border-left: 0;
	}

	/* Contact */
	.map-frame__embed {
		height: 26rem;
	}

	/* Service pages */
	.single-solar_service,
	.single-electrical_service {
		--section-spacing: 3rem;
	}

	.single-solar_service .page-hero,
	.single-electrical_service .page-hero {
		min-height: 0;
	}

	.service-detail--single {
		padding-block: 4rem;
	}

	/* Electrical listing — the split bands tighten with everything else. */
	.services-grid-section {
		padding-block: 2.5rem 3rem;
	}

	.service-detail--single .service-detail__frame {
		aspect-ratio: 16 / 10;
	}

	.more-services-section {
		padding-bottom: 5rem;
	}

}

/* ---------------------------------------------------------------
   < 768px (below md)
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
	:root {
		--section-spacing: 2rem;
	}

	.btn {
		--bs-btn-padding-x: 1.5rem;
		font-size: 1rem;
	}

	.hero-actions .btn {
		width: 100%;
	}

	.hero-stats {
		gap: 1.5rem 2rem;
	}

	/* The trust band is what reads as "empty space" between the hero and the
	   first section: one item per row makes it 379px tall at 375px against
	   184px on desktop. Measured alternatives: two per row needs
	   min-width:0 and wraps each label onto three lines (item 49px -> 96px,
	   band 313px) for only 32px more than this - not worth the cramping.
	   Staying one-per-row and reclaiming the band's own padding/gap instead. */
	.trust-item {
		flex: 1 1 100%;
	}

	.trust-bar__list {
		gap: .875rem 1rem;
	}

	.trust-bar {
		padding-block: 1.25rem;
	}

	.estimator__pitch,
	.quote-card__intro {
		padding: 2rem 1.5rem;
	}

	.estimator__wizard,
	.quote-card__form-wrap {
		padding: 2rem 1.5rem 2.5rem;
	}

	.estimator__options,
	.estimator__results {
		grid-template-columns: minmax(0, 1fr);
	}

	.why-choose__features {
		grid-template-columns: minmax(0, 1fr);
	}

	.why-choose__badge {
		right: auto;
		left: 1rem;
		bottom: -1.5rem;
		padding: 1rem 1.25rem;
	}

	.why-choose__media {
		margin-bottom: 3rem;
	}

	.service-card__body {
		padding: 1.5rem;
	}

	.project-card {
		min-height: 17.5rem;
	}

	.quote-card__form-lead {
		font-size: 1rem;
	}

	/* Testimonials: one per view */
	.testimonials__slide {
		flex: 0 0 100%;
	}

	.testimonial-card {
		padding: 1.75rem;
	}

	.google-rating {
		padding: 1rem 1.25rem;
	}

	.footer-bottom {
		justify-content: flex-start;
	}

	/* About */
	.page-hero__actions .btn {
		width: 100%;
	}

	.media-badge__card {
		position: static;
		margin-top: 1rem;
		min-width: 0;
	}

	.stats-band {
		padding-block: 3rem;
	}

	.value-card {
		padding: 1.75rem;
	}

	.expertise-card {
		padding: 1.375rem;
	}

	.option-card {
		padding: 1.75rem;
	}


	.more-services-section {
		padding-bottom: 4rem;
	}

	.cta-band__actions .btn {
		width: 100%;
	}

	/* Contact */
	.touch-card {
		padding: 2rem 1.5rem 2.25rem;
	}

	.next-card {
		padding: 1.75rem;
	}

	.map-frame__embed {
		height: 20rem;
	}

	/* The badge moves below the map rather than covering it. */
	.map-frame {
		box-shadow: none;
	}

	.map-frame__badge {
		position: static;
		margin-top: 1rem;
		box-shadow: var(--shadow-sm);
	}

	/* =========================================
	   RESPONSIVE / MOBILE refinement pass
	   Values benchmarked against the reference build
	   (my-custom-theme) at the same breakpoint.
	   ========================================= */

	/* Type scale. The desktop clamp()s bottom out at 30.4/27.2/22.4px, which
	   leaves barely 3px between H1 and H2 on a phone. Fixed steps below md
	   restore the hierarchy; nothing above 768px is affected because the
	   clamp() minimum was already in force here. */
	:root {
		--h1-size: 1.75rem;
		/* 28px - reference hero sits at 1.8rem */
		--h2-size: 1.5rem;
		/* 24px */
		--h3-size: 1.25rem;
		/* 20px */
		--h4-size: 1.0625rem;
		/* 17px */
	}

	/* Side spacing. --container-spacing was declared in :root but never
	   applied anywhere, so the Bootstrap default left content 12px from the
	   viewport edge; the reference sits at ~23px. Rows cancel this back out
	   with their own negative gutter margin, so columns stay aligned. */
	.container {
		padding-inline: var(--container-spacing);
	}

	/* Logo. The 761x367 asset at the inherited 12.5rem renders ~96px tall.
	   9.375rem gives ~72px, matching the reference. Width-only change, so
	   the aspect ratio is untouched and the header stops over-tall. */
	.site-brand {
		width: 9.375rem;
	}

	/* Buttons kept the full desktop 1.3125rem (21px) vertical padding, making
	   CTAs ~61px tall. This lands ~46px - still above the 44px touch-target
	   floor. Radius, colours and styling untouched. */
	.btn {
		--bs-btn-padding-y: .875rem;
		--bs-btn-padding-x: 1.25rem;
		font-size: .9375rem;
	}

	/* Hero. The headline carries an intentional <br> for the design's
	   two-line desktop lockup. On a phone the first line already wraps, so
	   the forced break produced a ragged four-line block. Dropping it here
	   lets the heading wrap naturally - wording and markup unchanged. */
	.hero-title br {
		display: none;
	}

	/* Defensive: nothing in the theme sets these, so they are already at
	   their initial values - pinned so no future global rule hyphenates or
	   breaks the headline mid-word. */
	.hero-title,
	.hero-text {
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}

	.hero-title {
		margin-bottom: 1rem;
	}

	.hero-section {
		padding-block: 3rem 2.5rem;
	}

	.hero-text {
		margin-bottom: 1.75rem;
		font-size: 1rem;
		line-height: 1.6;
	}

	.hero-actions {
		margin-bottom: 2rem;
	}

	.section-title {
		margin-bottom: 1rem;
	}

	/* Heading-to-content gap. The markup uses Bootstrap's .mt-5 (3rem), which
	   ships as !important, so matching it is the only way to tighten the gap
	   without editing every template. */
	.section .row.mt-5 {
		margin-top: 2rem !important;
	}

	/* Why choose. Its typography was ported from the reference with hardcoded
	   px on a different breakpoint ladder (1600/1450/576), so on a phone its
	   heading landed at 1.6rem while sibling H2s were 1.7rem. Handing it back
	   to the shared token keeps the section consistent with its neighbours. */
	.why-choose-section .section-title {
		font-size: var(--h2-size);
	}

	.why-choose-section .section-intro {
		font-size: 1rem;
		line-height: 1.6;
	}

	/* This heading hardcodes its own clamp(), whose mobile floor (22px) lands
	   exactly on --h2-size and flattens the H2 -> H3 step. Point it at the
	   token so the hierarchy holds on small screens. */
	.estimator__question {
		font-size: var(--h3-size);
	}

	.why-choose__features {
		margin-top: 2rem;
	}

	.why-feature {
		padding-bottom: 1.25rem;
		margin-bottom: 1.25rem;
	}
}

/* ---------------------------------------------------------------
   < 576px (xs)
   --------------------------------------------------------------- */
@media (max-width: 575.98px) {
	.how-step {
		gap: 1rem;
	}

	.estimator__actions {
		flex-direction: column-reverse;
	}

	.estimator__prev {
		width: 100%;
	}

	/* --- RESPONSIVE / MOBILE: narrow-phone step (benchmarked to reference) --- */
	:root {
		--h1-size: 1.625rem;
		/* 26px */
		--h2-size: 1.375rem;
		/* 22px - reference uses 1.4rem here */
		--h3-size: 1.1875rem;
		/* 19px */
	}

	/* ~62px tall, matching the reference's narrow-phone logo. */
	.site-brand {
		width: 8rem;
	}

	/* Overrides the ported 1.4rem in pages/home.css (same specificity,
	   media.css is enqueued last) so the section tracks the token. */
	.why-choose-section .section-title {
		font-size: var(--h2-size);
	}
}