/* =====================================================================
   Top Grade Movers — global.css
   Design tokens + base styles. Loaded on every page (after Bootstrap).
   Add your project's reusable components and tokens here. The few rules
   below only support the bundled JS behaviours (nav toggle, scroll
   reveal, search overlay) — delete or restyle freely.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Design Tokens — define your palette / type scale here.
   --------------------------------------------------------------- */
:root {
	/* === COLORS === */
	--primary-color: #ff4d1f;
	--primary-hover: #e23c10;
	--primary-soft: #fb5225;
	--secondary-color: #2c1d1a;
	--accent-color: #ff4d1f;
	--heading-color: #121212;
	--text-color: #4a4a4a;
	--text-color-light: #ffffff;
	--muted-color: #8a8a8a;
	--border-color: #e5e5e5;
	--background-color: #ffffff;
	--light-bg: #f5f5f5;
	--dark-bg: #0f0f0f;
	--dark-bg-2: #0a0a0a;
	--dark-bg-3: #000000;
	--dark-text: #b9b9b9;
	--dark-border: rgba(var(--white-rgb), .1);
	--black: #111111;

	/* Secondary accent used by the mission/vision divider + node. Close to
	   --primary-color but not identical (#ff4d00 vs #ff4d1f) — kept separate
	   so the divider gradient renders exactly as designed. */
	--accent-color-2: #ff4d00;

	/* Text colour variants observed in the design */
	--text-muted-soft: #6b6b6b;
	--text-placeholder: #757575;
	--text-input: #3c3c3c;
	--text-muted-on-dark: #b3b3b3;

	/* Form / status colours */
	--state-error: #d33;
	--state-error-text: #a11;
	--state-error-bg: #fff5f5;
	--state-success: #28a745;
	--state-success-text: #155724;
	--state-success-bg: #f0fff4;
	--state-badge-bg: #16a34a;
	--primary-tint-bg: #fff3f0;

	/* Channel triplets — let rgba() alpha variants reuse the palette instead
	   of re-typing channel values. Keep each in sync with the colour above it
	   (same pattern as Bootstrap's own --bs-*-rgb tokens). */
	--primary-rgb: 255, 77, 31;
	--state-error-rgb: 221, 51, 51;
	--accent-2-rgb: 255, 77, 0;
	--secondary-rgb: 44, 29, 26;
	--secondary-deep-rgb: 28, 18, 15;
	--dark-rgb: 15, 15, 15;
	--white-rgb: 255, 255, 255;
	--black-rgb: 0, 0, 0;

	/* === TYPOGRAPHY === */
	--font-primary: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-secondary: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--h1-size: clamp(2.75rem, 5vw, 4.25rem);
	--h2-size: clamp(2.25rem, 4vw, 3.5rem);
	--h3-size: clamp(1.5rem, 2vw, 2rem);
	--h4-size: 1.5rem;
	--h5-size: 1.25rem;
	--h6-size: 1rem;
	--body-size: 1rem;
	/* Small-text steps used by labels, eyebrows, meta and button text */
	--body-size-sm: .9375rem;
	--body-size-xs: .875rem;
	--body-size-2xs: .8125rem;
	--body-line-height: 1.7;
	--heading-line-height: 1.1;
	--heading-letter-spacing: -.01em;

	/* === SPACING === */
	--section-spacing: clamp(4rem, 7vw, 7rem);
	--container-spacing: 60px;
	--card-spacing: 2rem;
	--gap-xs: .25rem;
	--gap-sm: .5rem;
	--gap-md: 1rem;
	--gap-lg: 2rem;
	--gap-xl: 3rem;

	/* === BORDER RADIUS === */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 50%;
	/* Value-named radii for the in-between corner sizes the design uses.
	   Deliberately not folded into the t-shirt scale above — each is a
	   distinct measured value, and renaming would change rendering. */
	--radius-2: 2px;
	--radius-3: 3px;
	--radius-4: 4px;
	--radius-5: 5px;
	--radius-8: 8px;
	--radius-12: 12px;
	--radius-14: 14px;
	--radius-30: 30px;

	/* === BOX SHADOW === */
	--shadow-sm: 0 2px 8px rgba(var(--black-rgb), .06);
	--shadow-md: 0 12px 30px rgba(var(--black-rgb), .10);
	--shadow-lg: 0 30px 70px rgba(var(--black-rgb), .18);
	/* Card lift shadows shared by the Offers and Resources grids */
	--shadow-card: 0 30px 60px -28px rgba(var(--black-rgb), .4);
	--shadow-card-sm: 0 26px 50px -28px rgba(var(--black-rgb), .4);

	/* === TRANSITIONS === */
	--transition-fast: .15s ease;
	--transition-base: .25s ease;
	--transition-slow: .4s ease;

	/* === HEADER TOKENS (zip import) === */
	--header-bg: #2c1d1a;
	--header-link-color: #ffffff;
	--header-search-border: #e5e5e5;

	/* === FOOTER TOKENS (zip import) === */
	--footer-bg: #0a0a0a;
	--footer-text: rgba(var(--white-rgb), .6);
	--footer-link: rgba(var(--white-rgb), .65);
	--footer-contact-text: rgba(var(--white-rgb), .7);
	--footer-meta-text: rgba(var(--white-rgb), .5);
	--footer-border: rgba(var(--white-rgb), .08);
	--footer-icon-border: rgba(var(--white-rgb), .15);

	/* === LAYOUT (zip import) === */
	--container-max: 1550px;
	--overlay-scrim: rgba(17, 24, 39, .6);

	/* === EXTRA RADII / SHADOWS (zip import) === */
	--radius-pill: 19px;
	--shadow-cta: 0 8px 20px -8px rgba(var(--primary-rgb), .55);
}

/* ---------------------------------------------------------------
   Base typography
   --------------------------------------------------------------- */
/* Site-wide horizontal-scroll guard: several shared components rely on
   Bootstrap's negative-margin gutter technique (e.g. `.row.g-5` nested
   directly in `.container`, whose fixed padding is narrower than a g-5
   gutter) or on absolutely-positioned decorative/utility elements (CF7's
   `.wpcf7-spinner`, section "blob" accents) that sit just outside their
   own box by design. None of that is meant to be reachable by scrolling,
   so clip it here instead of chasing every offset individually. */
html,
body {
	overflow-x: hidden;
}

body {
	font-family: var(--font-secondary);
	font-size: var(--body-size);
	color: var(--text-color);
	line-height: var(--body-line-height);
	background-color: var(--background-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-primary);
	color: var(--heading-color);
	font-weight: var(--font-weight-bold);
	line-height: var(--heading-line-height);
}

a {
	color: var(--primary-color);
	text-decoration: none;
}

a:hover {
	color: var(--primary-color);
}

/* Project container. Applied alongside Bootstrap's `.container`
   (`class="container tg-container"`) or on its own for non-grid wrappers —
   Bootstrap's own `.container` is never restyled. */
.tg-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-spacing);
}

/* ---------------------------------------------------------------
   Reusable primitives
   --------------------------------------------------------------- */
.section-description {
	color: var(--text-color);
	font-size: var(--body-size);
	line-height: var(--body-line-height);
}

.section-dark .section-description {
	color: var(--dark-text);
}

.eyebrow {
	display: inline-block;
	font-size: var(--body-size-2xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: var(--gap-md);
}



.eyebrow--line::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 2px;
	background: var(--primary-color);
	vertical-align: middle;
	margin-right: .65rem;
}

/* Generic inline accent color for a highlighted word/phrase inside copy */
.is-accent {
	color: var(--primary-color);
}

/* Outlined display text ("Choose Us?", "We Offer") */
.text-outline {
	-webkit-text-stroke: 2px currentColor;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.section-heading {
	font-size: var(--h2-size);
	font-weight: var(--font-weight-extrabold);
	letter-spacing: var(--heading-letter-spacing);
}

/* --- Undeline utility --- */
.has-underline {
	position: relative;
	display: inline-block;
}

.has-underline::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: var(--radius-sm);
}

.has-underline--brand::after {
	background: var(--primary-color);
}

.has-underline--dark::after {
	background: var(--heading-color);
}

.has-underline--light::after {
	background: var(--text-color-light);
}

/* --- Buttons ---
   Project button skin. Applied alongside Bootstrap's button classes
   (`class="btn btn-primary tg-btn tg-btn--primary"`) so Bootstrap's `.btn`,
   `.btn-primary`, `.btn-dark` and `.btn-outline-light` are never restyled
   globally. The `--bs-btn-*` custom properties are Bootstrap's own theming
   API: because both class names sit on the same element, the values set here
   are what Bootstrap's `.btn` declarations resolve against. */
.tg-btn {
	--bs-btn-border-radius: var(--radius-sm);
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: var(--body-size-xs);
	padding: .95rem 1.9rem;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.tg-btn--primary {
	--bs-btn-bg: var(--primary-color);
	--bs-btn-border-color: var(--primary-color);
	--bs-btn-hover-bg: var(--primary-hover);
	--bs-btn-hover-border-color: var(--primary-hover);
	--bs-btn-active-bg: var(--primary-hover);
	--bs-btn-color: var(--text-color-light);
	--bs-btn-hover-color: var(--text-color-light);
}

.tg-btn--primary:hover {
	--bs-btn-hover-bg: var(--background-color);
	--bs-btn-hover-border-color: var(--black);
	color:#000000;
}

.tg-btn--dark {
	--bs-btn-bg: var(--black);
	--bs-btn-border-color: var(--black);
	--bs-btn-hover-bg: var(--text-color-light);
	--bs-btn-hover-color: var(--black);
	--bs-btn-hover-border-color: var(--text-color-light);
}

.tg-btn--outline-light {
	--bs-btn-border-color: rgba(var(--white-rgb), .55);
	--bs-btn-color: var(--text-color-light);
	--bs-btn-hover-bg: var(--text-color-light);
	--bs-btn-hover-color: var(--black);
	--bs-btn-hover-border-color: var(--text-color-light);
}

/* Not a Bootstrap class — a project variant used with `.btn`. */
.tg-btn--white {
	--bs-btn-bg: var(--background-color);
	--bs-btn-color: var(--primary-color);
	--bs-btn-border-color: var(--background-color);
	--bs-btn-hover-bg: var(--black);
	--bs-btn-hover-color: var(--text-color-light);
	--bs-btn-hover-border-color: var(--black);
}

/* ---------------------------------------------------------------
   2. Mobile navigation ([data-sp-toggle] toggles `.is-open`) is
   handled by .site-header__collapse rules in media.css (the
   collapse breakpoint is 1399.98px there, not the standard 991.98px
   — see the note at the top of that file).
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   3. Scroll-reveal animations ([data-animate])
   --------------------------------------------------------------- */
.aos-ready [data-animate] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}

.aos-ready [data-animate="fade-left"] {
	transform: translateX(-24px);
}

.aos-ready [data-animate="fade-right"] {
	transform: translateX(24px);
}

.aos-ready [data-animate="zoom"] {
	transform: scale(.94);
}

.aos-ready [data-animate="fade"] {
	transform: none;
}

.aos-ready [data-animate].is-visible {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------
   3b. Reduced motion
   Honours the OS "reduce motion" setting: scroll-reveal elements are
   shown immediately in their final position and all transitions /
   animations collapse to an imperceptible duration (rather than 0s, so
   `transitionend`/`animationend` listeners still fire).

   `!important` is required and justified here: this block must beat
   Bootstrap's own utility and component transitions plus the inline
   per-element transitions above, and it applies only when the user has
   explicitly asked for less motion. It is the one documented exception
   to the project's no-`!important` rule.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.aos-ready [data-animate],
	.aos-ready [data-animate="fade-left"],
	.aos-ready [data-animate="fade-right"],
	.aos-ready [data-animate="zoom"] {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------
   4. Header live-search overlay (rendered by SearchService)
   --------------------------------------------------------------- */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1080;
	background: var(--overlay-scrim);
	opacity: 0;
	transition: opacity var(--transition-base);
}

.search-overlay.is-open {
	opacity: 1;
}

.search-overlay[hidden] {
	display: none;
}

.search-panel {
	background: var(--background-color);
	padding: var(--card-spacing) 0;
	box-shadow: var(--shadow-lg);
}

.search-form {
	display: flex;
	gap: var(--gap-sm);
}

.search-results {
	margin-top: var(--gap-md);
}

.search-result {
	padding: var(--gap-sm) 0;
	border-bottom: 1px solid var(--border-color);
	text-decoration: none;
}

.search-result__type {
	font-size: .8rem;
	color: var(--text-color);
}

body.search-open {
	overflow: hidden;
}

/* WordPress core class: visually hidden, still read by screen readers
   (emitted by the_posts_pagination(), comment forms, skip links…). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}