/* =====================================================================
   Top Grade Movers — media.css
   Responsive / breakpoint overrides, aligned to the theme's standard
   breakpoint set (1200 / 992 / 768 / 576) wherever the content allows it:
     1200px+   xl   (default / no override needed)
     992–1199  lg
     768–991   md
     576–767   sm
     0–575     xs
   The header nav is the one exception: the primary nav (7 links, including
   the long "Terms & Conditions" label) plus search + CTA button measure
   ~1344px wide and cannot wrap or shrink below that (nowrap link text), so
   it is collapsed to a hamburger through 1399.98px instead of the standard
   991.98px — collapsing only at the standard lg breakpoint left the nav
   overflowing the viewport between 992px and ~1350px. See header.css.
   SCOPE — read before adding a rule here.
   This file is enqueued after the globally-loaded stylesheets (global.css,
   components/sections.css, layout/header.css, layout/footer.css) but BEFORE
   any pages/*.css, because page stylesheets are registered later in
   AssetsService. So it can only override selectors whose base rule lives in
   one of those global files.

   A breakpoint rule added here for a selector whose base rule lives in a
   pages/*.css file is DEAD ON ARRIVAL: the page stylesheet loads afterwards
   and, at equal specificity, wins at every width. Put page-specific
   breakpoints in that page's own stylesheet instead.
   ===================================================================== */

/* ---- lg and down (≤ 1199.98px) — tighten gutters ---- */
@media (max-width: 1199.98px) {
	:root {
		--container-spacing: 40px;
	}

	.site-footer__grid {
		gap: 40px;
	}

	/* Mission/vision: the divider's fixed 60px side margin plus each
	   column's own text leaves no room at the lg tier (992-1199px) —
	   the heading clips against the viewport edge. Tighten it here;
	   full 60px margin is restored above 1200px. */
	.mv-divider { margin-inline: 24px; }
}

/* ---- collapsed header nav (≤ 1399.98px) — see note above ---- */
@media (max-width: 1399.98px) {
	.site-header__inner {
		flex-wrap: wrap;
		min-height: 0;
		padding-block: 14px;
	}

	.site-header__brand .brand-logo,
	.site-header__brand img {
		width: 160px;
		height: 70px;
	}

	.site-nav-toggle {
		display: inline-flex;
		margin-left: auto;
	}

	/* Mobile drawer. Bootstrap's Collapse JS owns the open/close motion, and
	   its own `.collapse:not(.show){display:none}` outranks any single-class
	   rule here — so the drawer is driven by JS swapping `.collapse` for
	   `.collapsing` (height:0 + overflow:hidden), animating an inline height
	   up to scrollHeight, and only then landing `.show`.
	   `.show` therefore arrives AFTER the animation has already finished, so
	   anything the open state needs in order to be *visible* (width here)
	   must sit on the base class — gating it behind `.show` ran the whole
	   slide at zero width and made the menu appear to pop in with no motion.
	   The gap above the drawer is `margin-top`, not `padding-top`: padding
	   sits inside the border box Bootstrap animates down to height:0, which
	   would leave an 18px sliver that snaps away at the end of the close. */
	/* `order` drops the drawer onto its own row *below* the complete header
	   row instead of splitting it. The panel sits between the toggler and
	   .site-header__actions in DOM order, so without this, opening it pushed
	   search + quote off the navbar onto a third row. Search + quote have
	   room beside the logo and toggler at every collapsed width down to
	   576px, so they stay put here and only drop at xs — see that block. */
	.site-nav-panel {
		flex-basis: 100%;
		margin-top: 18px;
		order: 1;
	}

	/* `.collapsing` is Bootstrap's own transient state class — qualified with
	   our class (never redefined bare) purely to soften its flat `ease` into a
	   symmetric in-out curve. The global prefers-reduced-motion block in
	   global.css still overrides this, via `!important`. */
	.site-nav-panel.collapsing {
		transition: height .36s cubic-bezier(.65, 0, .35, 1);
	}

	.site-nav,
	.site-nav .tg-navbar-nav {
		width: 100%;
	}

	.site-nav .tg-navbar-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.site-nav .tg-nav-link {
		padding: 10px 0;
	}

	.site-nav .tg-nav-link::after {
		bottom: 4px;
	}

	.site-nav .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0 16px;
		border: 0;
		background: transparent;
		opacity: 0;
		visibility: hidden;
		max-height: 0;
		overflow: hidden;
		transform: none;
		transition: max-height .24s ease, opacity .2s ease, visibility 0s linear .24s;
	}

	/* `.is-open` is the class global.js toggles on the parent <li> (matching
	   the desktop rule in header.css). This previously read `..show` — an
	   invalid selector, so the whole rule was dropped by the CSS parser and
	   tapping a parent item like "Services" in the drawer expanded nothing. */
	.site-nav .tg-nav-item.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		max-height: 260px;
		transition: max-height .24s ease, opacity .2s ease, visibility 0s;
	}

	.site-nav .sub-menu .tg-nav-link {
		padding: 8px 0;
	}
}

/* ---- md and down (≤ 991.98px) — 2-col footer, hero/about tweaks ---- */
@media (max-width: 991.98px) {
	:root {
		--container-spacing: 24px;
	}

	.hero__actions .tg-btn { flex: 1 1 auto; text-align: center; }
	.quote-card { margin-top: 2.5rem; }

	.mv-divider { display: none; }
	.mv-col + .mv-col { margin-top: 3rem; }

	.process-connector { display: none; }
	.process-step { flex: 1 1 45%; margin-bottom: 2.5rem; }

	/* Stats bar — tablet: 4 cols, tighter numbers */
	.stats-bar .stat-item__num { font-size: 2.5rem; }

	/* NOTE: the matching `.hero-banner__overlay` tablet override that used to
	   sit here was dead code — its base rule lived in pages/about-us.css and
	   pages/contact.css, both of which load after this file and set the same
	   property unconditionally, so it never applied at any width. It was
	   removed rather than moved when the banner was extracted into
	   components/sections.css, because activating it now would change the
	   tablet gradient. Re-add it here if that tighter two-stop gradient was
	   the intent — it is a visual change. */
	.page-hero__overlay {
		background: linear-gradient(90deg, rgba(var(--dark-rgb), .97) 0%, rgba(var(--dark-rgb), .88) 100%);
	}
	.about-story__media { margin-bottom: 3rem; }
	.about-wcu__heading { margin-bottom: 1rem; }

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
		padding-top: 60px;
		padding-bottom: 40px;
	}

	.footer-col--brand,
	.footer-col--support,
	.footer-col--services,
	.footer-col--contact {
		padding-bottom: 0;
	}

	.footer-brand .brand-logo,
	.footer-brand img {
		width: 180px;
		height: 80px;
	}

	/* Bootstrap's col-lg-8/col-lg-4 stack here, so the centered/full-width
	   button treatment must kick in at the same breakpoint — not at the
	   767.98px tier below — or the button sits small and left-aligned
	   through the 768-991px tablet range. */
	.cta-band { text-align: center; }
	.cta-band__actions { margin-top: 1.5rem; text-align: center; }
	.cta-band .tg-btn { width: 100%; white-space: normal; }
}

/* ---- sm and down (≤ 767.98px) ---- */
@media (max-width: 767.98px) {
	.services__intro { margin-top: 1rem; }

	.services__actions .tg-btn { flex: 1 1 100%; }

	.process-step { flex: 1 1 100%; max-width: 100%; }

	/* Stats bar — tighten numbers and labels on small screens */
	.stats-bar .stat-item__num { font-size: 2rem; }
	.stats-bar .stat-item__label { font-size: .8rem; }
}

/* ---- xs and down (≤ 575.98px) ---- */
@media (max-width: 575.98px) {
	.site-header__brand .brand-logo,
	.site-header__brand img {
		width: 140px;
		height: 61px;
	}

	.site-header__actions {
		flex-wrap: wrap;
	}

	/* xs is the one tier with no room for search + quote beside the logo and
	   toggler, so here they drop to their own centred row once the drawer
	   opens. `order: 2` puts them back below the drawer (the panel is
	   `order: 1`), preserving the stacking used above 576px, and matching
	   `.collapsing` as well as `.show` moves the row with the drawer instead
	   of jumping when the animation lands. */
	.site-nav-panel.collapsing ~ .site-header__actions,
	.site-nav-panel.show ~ .site-header__actions {
		order: 2;
		width: 100%;
		justify-content: center;
		padding-top: 4px;
	}

	.btn-quote {
		flex: 1 1 auto;
		padding: 14px 24px;
	}

	.svc-list { padding-inline: 1.25rem; }

	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.site-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}