/* ==========================================================================
   Aver Logistics — Design System
   --------------------------------------------------------------------------
   Shared tokens and components for the public marketing site.
   Every class is prefixed .aver- so this file never overrides the Enfold theme.
   Brand tokens are extracted from the live theme styling.
   ========================================================================== */

:root {
	/* Brand */
	--aver-red:        #db0011;
	--aver-red-bright: #ec1122;
	--aver-red-dark:   #b90000;
	--aver-red-soft:   rgba(219, 0, 17, 0.08);

	/* Neutrals */
	--aver-ink:    #1a1d21;
	--aver-body:   #5b6168;
	--aver-muted:  #8b9097;
	--aver-line:   #e6e8eb;
	--aver-bg:     #ffffff;
	--aver-bg-alt: #f6f7f9;
	--aver-bg-ink: #14171a;

	/* Typography */
	--aver-font: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Shape, depth & motion */
	--aver-radius:    12px;
	--aver-radius-sm: 7px;
	--aver-shadow:    0 22px 48px -22px rgba(20, 23, 26, 0.28);
	--aver-shadow-sm: 0 8px 22px -12px rgba(20, 23, 26, 0.30);
	--aver-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Layout rhythm */
	--aver-container: 1310px;
	--aver-section-y: clamp(52px, 7vw, 108px);
	--aver-gap:       clamp(22px, 2.4vw, 34px);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.aver-section {
	font-family: var(--aver-font);
	padding-top: var(--aver-section-y);
	padding-bottom: var(--aver-section-y);
	color: var(--aver-body);
}

.aver-section--alt { background: var(--aver-bg-alt); }

.aver-section--ink {
	background: var(--aver-bg-ink);
	color: rgba(255, 255, 255, 0.74);
}

.aver-wrap {
	width: 100%;
	max-width: var(--aver-container);
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.aver-grid { display: grid; gap: var(--aver-gap); }

@media (min-width: 768px) {
	.aver-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.aver-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.aver-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 990px) {
	.aver-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.aver-head { max-width: 680px; margin-bottom: clamp(32px, 4vw, 56px); }
.aver-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.aver-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aver-red);
	margin-bottom: 14px;
}

.aver-eyebrow::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 2px;
	background: var(--aver-red);
	vertical-align: middle;
	margin-right: 10px;
	margin-bottom: 3px;
}

.aver-title {
	font-family: var(--aver-font);
	font-weight: 800;
	line-height: 1.14;
	color: var(--aver-ink);
	font-size: clamp(1.7rem, 1rem + 2.1vw, 2.7rem);
	margin: 0 0 16px;
}

.aver-lead {
	font-size: clamp(1rem, 0.96rem + 0.3vw, 1.15rem);
	line-height: 1.7;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

/* The !important flags defend the button component against the host theme's
   aggressive link styling, which otherwise overrides the text colour. */
.aver-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--aver-font);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	padding: 16px 28px;
	border-radius: var(--aver-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none !important;
	transition: transform 0.25s var(--aver-ease), background-color 0.25s var(--aver-ease),
		color 0.25s var(--aver-ease), box-shadow 0.25s var(--aver-ease);
}

.aver-btn:hover { transform: translateY(-2px); }

.aver-btn--primary {
	background: var(--aver-red);
	border-color: var(--aver-red);
	color: #fff !important;
	box-shadow: 0 12px 24px -12px rgba(219, 0, 17, 0.7);
}
.aver-btn--primary:hover { background: var(--aver-red-dark); border-color: var(--aver-red-dark); color: #fff !important; }

.aver-btn--ghost {
	background: transparent;
	border-color: var(--aver-line);
	color: var(--aver-ink) !important;
}
.aver-btn--ghost:hover { border-color: var(--aver-red); color: var(--aver-red) !important; }

.aver-btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--aver-ink) !important;
}
.aver-btn--light:hover { background: var(--aver-red); border-color: var(--aver-red); color: #fff !important; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.aver-card {
	background: #fff;
	border: 1px solid var(--aver-line);
	border-radius: var(--aver-radius);
	padding: clamp(24px, 2.6vw, 36px);
	transition: transform 0.3s var(--aver-ease), box-shadow 0.3s var(--aver-ease),
		border-color 0.3s var(--aver-ease);
}

.aver-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--aver-shadow);
	border-color: transparent;
}

.aver-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 14px;
	background: var(--aver-red-soft);
	color: var(--aver-red);
	font-size: 26px;
	margin-bottom: 20px;
}

.aver-card__title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--aver-ink);
	margin: 0 0 10px;
}

.aver-card__text { font-size: 0.97rem; line-height: 1.65; margin: 0; }

/* --------------------------------------------------------------------------
   Stat counters
   -------------------------------------------------------------------------- */

.aver-stats { display: grid; gap: var(--aver-gap); }

@media (min-width: 600px) {
	.aver-stats { grid-template-columns: repeat(4, 1fr); }
}

.aver-stat { text-align: center; }

.aver-stat__num {
	display: block;
	font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
	color: var(--aver-red);
}

.aver-stat__label {
	display: block;
	margin-top: 10px;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--aver-muted);
}

.aver-section--ink .aver-stat__num { color: #fff; }

/* --------------------------------------------------------------------------
   Reveal: a short fade-up on page load, in CSS only.
   It used to wait for aver-site.js to add .is-visible, but WP Rocket delays
   that script until the visitor's first tap, so on mobile the content stayed
   invisible (PageSpeed LCP 6.9s, 2026-10-08). Never make content depend on
   JavaScript to become visible. The hero shows at first paint: it is the LCP.
   -------------------------------------------------------------------------- */

@keyframes aver-reveal-in {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: none; }
}

.aver-reveal { animation: aver-reveal-in 0.7s var(--aver-ease) both; }

.aver-reveal[data-delay="1"] { animation-delay: 0.10s; }
.aver-reveal[data-delay="2"] { animation-delay: 0.20s; }
.aver-reveal[data-delay="3"] { animation-delay: 0.30s; }
.aver-reveal[data-delay="4"] { animation-delay: 0.40s; }
.aver-reveal[data-delay="5"] { animation-delay: 0.50s; }

.aver-hero .aver-reveal { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.aver-reveal { animation: none; }
	.aver-btn:hover, .aver-card:hover { transform: none; }
}

/* ==========================================================================
   Header / navigation polish
   Targeted enhancements to the existing Enfold header.
   ========================================================================== */

/* Crisper sticky header */
#top #header {
	box-shadow: 0 1px 0 rgba(20, 23, 26, 0.06), 0 10px 30px -20px rgba(20, 23, 26, 0.6);
}

/* Red accent text + tab-style underline on hover and on the current page.
   The underline uses an inset box-shadow so it renders reliably inside the
   Enfold header with no layout shift. */
#top #header #avia-menu > li > a {
	position: relative;
	box-shadow: inset 0 -3px 0 transparent;
	transition: color 0.2s ease, box-shadow 0.25s ease;
}

#top #header #avia-menu > li:hover > a,
#top #header #avia-menu > li.current-menu-item > a,
#top #header #avia-menu > li.current-menu-ancestor > a,
#top #header #avia-menu > li.current-menu-parent > a,
#top #header #avia-menu > li.current_page_item > a {
	color: var(--aver-red) !important;
	box-shadow: inset 0 -3px 0 var(--aver-red);
}

/* Modern dropdown panels */
#top #header #avia-menu ul.sub-menu {
	border-radius: 10px;
	box-shadow: 0 24px 48px -22px rgba(20, 23, 26, 0.4);
	overflow: hidden;
}

#top #header #avia-menu ul.sub-menu > li > a {
	transition: background-color 0.18s ease, color 0.18s ease;
}

#top #header #avia-menu ul.sub-menu > li:hover > a {
	background: var(--aver-red-soft);
	color: var(--aver-red) !important;
}

@media (prefers-reduced-motion: reduce) {
	#top #header #avia-menu > li > a { transition: color 0.2s ease; }
}

/* ==========================================================================
   Mobile & tablet safety net
   --------------------------------------------------------------------------
   Final-line-of-defence rules applied site-wide. These keep the layout
   sane even if a section's own styles forget a fallback — no horizontal
   scrolling, no oversized images, no header CTAs muscling the bar.
   ========================================================================== */

/* Media never bursts its container */
.aver-section img,
.aver-section video,
.aver-section iframe,
.aver-section svg:not(.aver-icon),
.aver-prose img,
.aver-prose video,
.aver-prose iframe { max-width: 100%; height: auto; }

/* Stop unbreakable strings (long URLs, port codes) from pushing the layout */
.aver-section,
.aver-prose,
.aver-section p,
.aver-card,
.aver-cs-block p,
.aver-glossary__def { word-wrap: break-word; overflow-wrap: anywhere; }

/* Tables get a horizontal scroll on narrow viewports instead of overflowing */
.aver-prose table,
.aver-section table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Mobile — phones (≤ 600px) */
@media (max-width: 600px) {
	/* Stat counters: keep numbers readable but not screen-eating */
	.aver-stat__num { font-size: clamp(1.85rem, 8.5vw, 2.6rem); }

	/* Hide the Enfold portal-CTA menu so it doesn't crowd the header bar.
	   The links remain reachable via the in-page Contact / footer CTAs. */
	#top .revamp_menu_items { display: none !important; }

	/* Stack calculator CTA + breakdown rows on very narrow phones */
	.aver-calc__breakdown-row { flex-wrap: wrap; }
	.aver-calc__breakdown-row strong { white-space: normal; }

	/* Tighten section gutters on phones so content gets real estate */
	.aver-wrap { padding: 0 18px; }
}

/* Tablet portrait (601–989px) — keep most layouts but ease padding/typography */
@media (min-width: 601px) and (max-width: 989px) {
	.aver-wrap { padding: 0 22px; }
}