/**
 * Site header styles
 *
 * 1. Topbar (announcement + social icons)
 * 2. Header main (logo, contact, utility icons)
 * 3. Header nav (primary menu)
 * 4. Responsive
 */

/* The design's header content runs noticeably wider than Bootstrap's default
   xxl container (1660px vs. 1320px on a 1920px canvas) — matched here so the
   logo/contact/nav rows sit at the same inset as the Figma file. Only takes
   effect above ~1660px viewports; Bootstrap's own responsive width still
   governs every narrower breakpoint. */
.topbar .container,
.header-main .container {
	max-width: 1660px;
}
.header-nav .container {
	max-width: 1180px;
}
.topbar,
.header-main,
.header-nav {
	font-family: var(--font-header-footer);
}

/* ============================ TOPBAR ============================ */
.topbar {
	background: var(--color-brand-red);
	padding: 15px 0;
}
.topbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gap-md);
}
.topbar__announcement {
	color: #fff;
	font-size: .95rem;
	font-weight: 500;
}
.topbar__social {
	display: none;
	align-items: center;
	gap: var(--gap-md);
}
.topbar__social-label {
	color: #fff;
	font-size: .95rem;
	font-weight: 500;
}
.topbar__social-list {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}
.topbar__social-link {
	display: inline-flex;
	color: #fff;
}
.topbar__social-icon svg,
.topbar__social-link svg {
	width: 17px;
	height: 17px;
}
.topbar__social-icon {
	width: 17px;
	height: 17px;
	object-fit: contain;
}

/* ============================ HEADER MAIN ============================ */
.header-main {
	background: var(--color-header-bg);
	padding: 1.75rem 0;
}
.header-main__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--gap-lg);
}
.header-main__brand {
	display: inline-flex;
}
.header-main__brand .brand-logo {
	max-height: 96px;
	width: auto;
}
.header-main__brand .brand-name {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
}
.header-main__aside {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	margin-left: auto;
	flex-wrap: wrap;
}
.header-main__contact {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}
.header-main__contact-item {
	display: flex;
	align-items: center;
	gap: 14px;
}
.header-main__contact-icon svg {
	display: block;
	width: 32px;
	height: 32px;
}
.header-main__contact-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.header-main__contact-label {
	color: #fff;
	font-size: .9rem;
}
.header-main__contact-value {
	color: var(--color-accent-red);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	word-break: break-word;
}
.header-main__utility {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.header-main__utility-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	color: #fff;
	width: 24px;
	height: 24px;
}
.header-main__utility-btn svg {
	width: 24px;
	height: 24px;
	display: block;
}
.header-main__toggler {
	/* Bootstrap's toggler icon reads --bs-navbar-toggler-icon-bg from an
	   ancestor .navbar; this button sits in a plain header row instead, so
	   the icon and border colours are supplied directly here. */
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	border-color: rgba(255, 255, 255, .3);
	margin-left: 1rem;
}

/* ============================ HEADER NAV ============================ */
.header-nav {
	background: var(--color-nav-bg);
}
.header-nav .nav-link {
	color: #fff;
	font-weight: 500;
	padding: 1rem 0;
	display: inline-flex;
	align-items: center;
}
.header-nav .nav-link:hover,
.header-nav .nav-link:focus {
	color: var(--color-accent-red);
}
.header-nav .nav-link__caret {
	display: inline-flex;
	margin-left: 6px;
}
.header-nav .nav-link__caret svg {
	width: 12px;
	height: 7px;
}
.header-nav .dropdown-toggle::after {
	/* The design's own chevron (nav-link__caret, above) replaces Bootstrap's
	   default triangle — without this, both render side by side. */
	content: none;
}
.header-nav .nav-link__caret svg {
	transition: transform var(--transition-fast);
}
.header-nav .nav-link__caret svg path {
	/* The seeded caret carries fill="white" inline, so it ignored the link's
	   hover colour and stayed white while the label went red. */
	fill: currentColor;
}
.header-nav .dropdown-toggle[aria-expanded="true"] .nav-link__caret svg {
	transform: rotate(180deg);
}
.header-nav .dropdown-menu {
	background: #171717;
	border: 0;
	border-top: 3px solid var(--color-accent-red);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	box-shadow: var(--shadow-md);
	margin-top: 0;
	padding: .25rem 0;
	min-width: 15rem;
	overflow: hidden; /* keeps the last item's hover fill inside the rounded corners */
}
.header-nav .dropdown-menu .nav-link {
	display: block;
	padding: .65rem 1.25rem;
	border-left: 3px solid transparent;
	white-space: nowrap;
	transition: background var(--transition-fast), border-color var(--transition-fast),
		color var(--transition-fast), padding-left var(--transition-fast);
}
.header-nav .dropdown-menu .nav-link:hover,
.header-nav .dropdown-menu .nav-link:focus {
	background: #202020;
	border-left-color: var(--color-accent-red);
	padding-left: 1.5rem;
}

/* --- Open state ----------------------------------------------------------
   `.show` is set by global.js on the first click and stays until an outside
   click or Esc, so it survives the pointer leaving. */
.header-nav .dropdown-toggle[aria-expanded="true"] {
	color: var(--color-accent-red);
}

/* --- Desktop / laptop: the panel is a positioned flyout ------------------
   Bootstrap only places .dropdown-menu once Popper has opened it (top/left
   sit behind [data-bs-popper]), so a CSS-driven open has to position the
   panel itself. It stays in flow with visibility/opacity rather than
   display, so opening can animate. */
@media (min-width: 992px) {
	.header-nav .dropdown-menu {
		top: 100%;
		left: 0;
		display: block;
		visibility: hidden;
		opacity: 0;
		transform: translateY(8px);
		/* --transition-base, not --fast: at .15s the panel read as a snap
		   rather than a reveal. */
		transition: opacity var(--transition-base), transform var(--transition-base),
			visibility var(--transition-base);
	}
	@media (prefers-reduced-motion: reduce) {
		.header-nav .dropdown-menu {
			transition: none;
		}
	}
	.header-nav .dropdown-menu.show,
	.header-nav .dropdown:focus-within > .dropdown-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}
	.header-nav .dropdown:focus-within > .nav-link {
		color: var(--color-accent-red);
	}
	/* The nav row's own padding is the only gap between link and panel;
	   without this the pointer crosses dead space and hover flickers. */
	.header-nav .dropdown > .nav-link {
		margin-bottom: -1px;
		padding-bottom: calc(1rem + 1px);
	}
}

/* --- Mouse / trackpad: preview the panel on hover too --------------------
   Presentation only — hovering never sets `.show`, so the two-step click
   (open, then follow the link) behaves the same whether the pointer hovered
   first or not. Gated on (hover: hover) so a tap on a touch tablet can't
   leave the panel stuck open via emulated hover. */
@media (min-width: 992px) and (hover: hover) {
	.header-nav .dropdown:hover > .dropdown-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}
	/* The caret's fill is currentColor, so colouring the link recolours it. */
	.header-nav .dropdown:hover > .nav-link {
		color: var(--color-accent-red);
	}
	.header-nav .dropdown:hover > .nav-link .nav-link__caret svg {
		transform: rotate(180deg);
	}
}

/* ============================ RESPONSIVE ============================ */

/* --- lg: 992–1199 --- */
@media (max-width: 1199.98px) {
	.header-main__aside {
		gap: 1.5rem;
	}
	.header-main__contact {
		gap: 1.25rem;
	}
	/* Logo + both contact blocks + the icons no longer fit one row here, and
	   the aside was wrapping below the logo leaving a dead gap beside it.
	   Trimming the icon and value sizes keeps the row intact down to 992. */
	.header-main__contact-icon svg {
		width: 26px;
		height: 26px;
	}
	.header-main__contact-value {
		font-size: .875rem;
	}
	.header-main__contact-label {
		font-size: .8rem;
	}
}

/* --- md: 768–991 --- */
@media (max-width: 991.98px) {
	.header-main__row {
		flex-wrap: wrap;
	}
	.header-main__aside {
		/* Dissolve the wrapper so contact and utility become direct flex items
		   of the header row: the search/cart pair can then sit up beside the
		   logo and toggler instead of claiming an otherwise empty third row
		   (~60px of header height back on phones). */
		display: contents;
	}
	.header-main__contact {
		order: 3;
		width: 100%;
	}
	.header-main__utility {
		order: 2;
		margin-left: auto;
	}
	.header-main__toggler {
		order: 2;
		margin-left: 1rem;
	}
	.header-nav .navbar-nav {
		gap: 0;
	}
	.header-nav .nav-link {
		padding: .75rem 0;
	}
	.header-nav .dropdown-menu {
		/* Inside the collapsed menu the panel is just an indented list, so the
		   desktop panel chrome (accent rule, shadow, min-width) comes back off. */
		background: transparent;
		border-top: 0;
		border-radius: 0;
		box-shadow: none;
		min-width: 0;
		padding: 0 0 .25rem;
	}
	/* Slides open instead of snapping the way Bootstrap's display:none →
	   block does. The animated track lives on the parent <li>, not the panel:
	   grid-template-rows needs one child per track and the panel's <li>s are
	   direct children, so the row that collapses is the panel itself as the
	   second child of its parent. That keeps the height exact — a max-height
	   cap clipped the 11-item Services menu. */
	.header-nav .dropdown {
		display: grid;
		grid-template-rows: auto 0fr;
		transition: grid-template-rows .3s ease;
	}
	.header-nav .dropdown:has(> .dropdown-menu.show) {
		grid-template-rows: auto 1fr;
	}
	.header-nav .dropdown-menu {
		display: block;
		overflow: hidden;
		min-height: 0;
		visibility: hidden;
		opacity: 0;
		transition: opacity .3s ease, visibility .3s ease;
	}
	.header-nav .dropdown-menu.show {
		visibility: visible;
		opacity: 1;
	}
	@media (prefers-reduced-motion: reduce) {
		.header-nav .dropdown,
		.header-nav .dropdown-menu {
			transition: none;
		}
	}
	.header-nav .dropdown-menu .nav-link {
		padding: .5rem 0 .5rem 1rem;
	}
	.header-nav .dropdown-menu .nav-link:hover,
	.header-nav .dropdown-menu .nav-link:focus {
		background: transparent;
		padding-left: 1rem;
	}
}

/* --- sm: 576–767 --- */
@media (max-width: 767.98px) {
	.topbar__row {
		justify-content: center;
		text-align: center;
	}
	.header-main__contact {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem;
	}
}

/* --- xs: 0–575 --- */
@media (max-width: 575.98px) {
	.topbar__announcement {
		font-size: .8rem;
	}
	.header-main__row {
		/* Logo, icons and toggler share one line here, so the row gap comes
		   down to what the icons need and the logo is allowed to shrink. */
		gap: .75rem;
	}
	.header-main__brand {
		/* Capped so the logo's own width can never push the icons onto a
		   second line; the contact block below still wraps as before. */
		min-width: 0;
		max-width: calc(100% - 9rem);
	}
	.header-main__brand .brand-logo {
		max-height: 48px;
		max-width: 100%;
		object-fit: contain;
	}
	.header-main__utility {
		gap: .75rem;
		flex: none;
	}
	.header-main__toggler {
		margin-left: 0;
		flex: none;
		padding: .25rem .5rem;
	}
}