/* ==========================================================================
   header-footer.css -- site header (utility bar + main bar) and footer.
   Generated by build/header_footer.py. Colours via kit variables only.
   ========================================================================== */

/* --- Logo ----------------------------------------------------------------
   Figma's logo frame is 203x46 with the artwork inset (7.4 top, 10 left);
   the SVG is the artwork alone (180x31.4) and uses preserveAspectRatio=none,
   so only ever size it by width. */
.ac-logo { display: block; line-height: 0; padding: 7px 13px 8px 10px; }
.ac-logo img { display: block; width: 180px; height: auto; }

/* --- Utility bar ----------------------------------------------------------- */
.ac-utility__items { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 2px; }
.ac-utility a { color: inherit; }
.ac-utility a:hover { color: inherit; text-decoration: underline; }
.ac-utility__phone { font-weight: 600; }

/* --- Main bar: nav ----------------------------------------------------------- */
/* "Track a pallet" is a menu item so it appears in the mobile dropdown; on the
   desktop bar it is the outline button instead. */
.ac-nav .elementor-nav-menu--main .ac-nav-mobile-only { display: none; }

/* Elementor's main-menu links carry a 1px focus/hover border from Hello's reset
   on some states; keep the item box exactly text + 10px + 2px underline. */
.ac-nav .elementor-nav-menu--main .elementor-item { line-height: 1.5; }

/* 1025-1279: the desktop nav plus both buttons need ~935px; with 104px gutters
   that overflows below ~1180. Tighten the gutters and the nav gap instead of
   collapsing to the burger early. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.ac-header, .ac-utility, .ac-footer { padding-left: 32px !important; padding-right: 32px !important; }
	/* set on a descendant: Elementor sets it on the wrapper at (0,3,0) */
	.ac-nav .elementor-nav-menu--main { --e-nav-menu-horizontal-menu-item-margin: 11px; }   /* 22px gap */
}

/* --- Tablet + mobile (burger) ------------------------------------------------ */
@media (max-width: 1024px) {
	.ac-utility__extra { display: none; }

	/* logo | [Get a quote] [burger]; the dropdown spans the whole header. */
	.ac-header { position: relative; }
	.ac-header__row, .ac-header .ac-nav, .ac-header .ac-nav > .elementor-widget-container { position: static; }
	.ac-header .ac-nav { order: 3; }
	.ac-header .ac-header__actions { margin-left: auto; }

	.ac-nav .elementor-menu-toggle { width: 44px; height: 44px; border-radius: 6px; }

	.ac-nav nav.elementor-nav-menu--dropdown {
		position: absolute;
		left: 0 !important;
		right: 0;
		top: 100% !important;
		width: auto !important;
		margin-top: 1px;               /* sit under the header's hairline */
		border-bottom: 1px solid var(--e-global-color-line200);
		box-shadow: 0 18px 30px rgba(10, 14, 40, .12);
		z-index: 9999;
	}
	.ac-nav .elementor-nav-menu--dropdown a { padding-left: 40px !important; padding-right: 40px !important; }
	.ac-nav .elementor-nav-menu--dropdown a.elementor-item-active { box-shadow: inset 3px 0 0 var(--e-global-color-primary); }
}

@media (max-width: 767px) {
	.ac-utility__left { display: none; }
	.ac-utility__row { justify-content: center !important; }

	.ac-logo { padding: 5px 0 5px 6px; }
	.ac-logo img { width: 140px; }
	.ac-nav .elementor-nav-menu--dropdown a { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 380px) {
	.ac-logo { padding-left: 0; }
	.ac-logo img { width: 124px; }
	.ac-header .ac-header__row { column-gap: 10px !important; }
}

/* --- Footer --------------------------------------------------------------------- */
.ac-footer .ac-logo { padding-left: 10px; }
.ac-footer a { color: inherit; }
.ac-footer a:hover { color: var(--e-global-color-white); }
.ac-footer__phone a { color: inherit; }
.ac-footer__legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ac-footer__legal-links a { text-decoration: underline; text-underline-position: from-font; }
/* Icon-list items without an icon still reserve the icon gap -- drop it. */
.ac-footer__links .elementor-icon-list-icon { display: none; }
.ac-footer__links .elementor-icon-list-text { padding-inline-start: 0 !important; }

/* --- Touch tap targets (<=1024) ----------------------------------------------
   Real 44px boxes, no negative-margin tricks (those read as content spilling its
   box): the utility bar becomes 44px tall on touch (40 in the design), the legal
   row ~12px taller, footer links 44px rows (icon-list space_between 0 at tablet). */
@media (max-width: 1024px) {
	.ac-utility { padding-top: 0 !important; padding-bottom: 0 !important; }
	.ac-utility__items { align-items: center; }
	.ac-utility__items a { display: inline-block; padding: 12px 0; }
	.ac-footer__links .elementor-icon-list-item > a,
	.ac-footer__phone a { display: inline-block; padding: 11px 0; }
	.ac-footer__phone { margin: -11px 0 !important; }
	.ac-footer__legal-links { row-gap: 0; }
	.ac-footer__legal-links a { display: inline-block; padding: 12px 0; }
}
@media (max-width: 1024px) {
	/* logos are links: 44px tall hit box, artwork vertically centred */
	.ac-logo { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
}