/* Header height without the announcement bar (8NQENY). Values are main.css heights minus the bar. */
.main-header,
.faux-menu-block {
	height: 5.25rem;
}

@media (max-width: 1199.98px) {
	.main-header,
	.faux-menu-block {
		height: 6.3125rem;
	}
}

@media (max-width: 767.98px) {
	.main-header,
	.faux-menu-block {
		height: 5.5125rem;
	}
}

@media (max-width: 575.98px) {
	.main-header,
	.faux-menu-block {
		height: 5.2rem;
	}
}

/* Phone and tablet menu: show Products & Services, with its links listed open (8NQENY). */
.offcanvas .header-links > .menu-item-has-children {
	display: block !important;
}

.offcanvas .header-links .menu-item-has-children > a {
	pointer-events: none;
}

.offcanvas #navbar ul.header-links > li.dropdown a::after {
	display: none;
}

.offcanvas .header-links .dropdown-menu {
	background: transparent;
	border: 0;
	box-shadow: none;
	display: block !important;
	margin: 0;
	padding: 0 0 0 1rem;
	position: static !important;
	transform: none !important;
}

/* Home "Our Products" (45CGQC): continues the dark Services block; product names keep their own casing */
.services-wrapper.products-wrapper { padding-top: 0; }
.services-wrapper .services .service .product-name { text-transform: none; }
.services-wrapper.products-wrapper .services .service .read-more-section { position: static; }

/* Products & Services dropdown: the new Products column (45CGQC) sizes to its links instead of a fixed 50/50 split */
.main-header #navbar ul.header-links > li.has-columns > .dropdown-menu.show { grid-template-columns: max-content max-content; justify-content: center; column-gap: 3rem; padding-left: 2rem; padding-right: 2rem; }
.main-header #navbar ul.header-links > li.has-columns > .dropdown-menu.show .menu-column > .dropdown-menu { position: static; }

/* Great Clients slider (STW6PE): between 1200px and 1500px there is no room for the arrows 80px outside the slider,
   so they stuck out past the page (sideways scroll) and the left one was cut off. Keep them inside the slider there. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .clients-wrapper #clients-slider { padding: 0 3rem; }
    .clients-wrapper #clients-slider button.splide__arrow.splide__arrow--prev { left: 0; }
    .clients-wrapper #clients-slider button.splide__arrow.splide__arrow--next { right: 0; }
}
