/**
 * BRO Electrical — Header / Navigation
 */

.bro-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--bro-charcoal);
	border-bottom: 1px solid var(--bro-border-on-dark);
}

.bro-header__inner {
	max-width: var(--bro-max-width);
	margin: 0 auto;
	padding: 0 var(--bro-gutter);
	height: var(--bro-header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.bro-header__logo {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-lg);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bro-white);
	text-decoration: none;
	flex: 0 0 auto;
}

.bro-header__logo-img {
	display: block;
	height: 66px;
	width: auto;
}

/* Click-to-call */
.bro-call-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--bro-text-muted-on-dark);
	text-decoration: none;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: color var(--bro-transition-base);
}

.bro-call-link:hover,
.bro-call-link:focus-visible {
	color: var(--bro-orange);
}

/* Desktop phone number: slightly larger and solid white for readability,
   kept secondary in scale to the "Get a Quote" CTA. Icon stays paired via
   the existing inline-flex + align-items:center on .bro-call-link. Scoped
   to .bro-header__actions specifically so the mobile slide-out menu's own
   phone link (which reuses .bro-call-link--full) is left untouched. */
.bro-header__actions .bro-call-link--full .bro-call-link__text {
	font-size: var(--bro-text-sm);
	color: var(--bro-white);
}

.bro-icon-phone {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.bro-call-link--icon {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bro-border-on-dark);
	border-radius: var(--bro-radius-sm);
	color: var(--bro-text-on-dark);
}

.bro-call-link--icon .bro-icon-phone {
	width: 18px;
	height: 18px;
}

.bro-header__divider {
	width: 1px;
	height: 22px;
	background: var(--bro-border-on-dark);
}

/* Desktop nav */
.bro-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.bro-nav__list {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bro-nav__list a {
	display: inline-flex;
	align-items: center;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-xs);
	font-weight: 600;
	letter-spacing: var(--bro-tracking-label);
	text-transform: uppercase;
	color: var(--bro-text-on-dark);
	text-decoration: none;
	padding: 0.4em 0.1em;
	position: relative;
	transition: color var(--bro-transition-base);
}

.bro-nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 1px;
	background: var(--bro-orange);
	transition: right var(--bro-transition-base);
}

.bro-nav__list a:hover,
.bro-nav__list a:focus-visible {
	color: var(--bro-white);
}

.bro-nav__list a:hover::after,
.bro-nav__list a:focus-visible::after {
	right: 0;
}

.bro-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* NICEIC Domestic Installer logo — supplied on a white background, so it
   sits on a small white plaque rather than showing a stray white box
   against the dark header. Image itself is never recoloured/cropped. */
.bro-header__niceic-logo {
	height: 60px;
	width: auto;
	flex: 0 0 auto;
	background: var(--bro-white);
	padding: 6px 10px;
	border-radius: var(--bro-radius-sm);
}

/* Mobile nav toggle */
.bro-nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--bro-border-on-dark);
	border-radius: var(--bro-radius-sm);
	cursor: pointer;
}

.bro-nav-toggle__bars,
.bro-nav-toggle__bars::before,
.bro-nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 1px;
	background: var(--bro-white);
	transition: transform var(--bro-transition-base), opacity var(--bro-transition-base);
}

.bro-nav-toggle__bars {
	position: relative;
}

.bro-nav-toggle__bars::before,
.bro-nav-toggle__bars::after {
	content: '';
	position: absolute;
	left: 0;
}

.bro-nav-toggle__bars::before {
	top: -6px;
}

.bro-nav-toggle__bars::after {
	top: 6px;
}

.bro-nav-toggle[aria-expanded="true"] .bro-nav-toggle__bars {
	background: transparent;
}

.bro-nav-toggle[aria-expanded="true"] .bro-nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.bro-nav-toggle[aria-expanded="true"] .bro-nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

.bro-nav-toggle__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Mobile nav panel */
.bro-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: var(--bro-charcoal);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--bro-transition-base), transform var(--bro-transition-base);
}

.bro-mobile-nav.is-open {
	opacity: 1;
	transform: translateY(0);
}

.bro-mobile-nav__inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	padding: var(--bro-gutter);
}

.bro-mobile-nav__close {
	position: absolute;
	top: 20px;
	right: var(--bro-gutter);
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--bro-border-on-dark);
	border-radius: var(--bro-radius-sm);
	color: var(--bro-white);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.bro-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.bro-mobile-nav__list a {
	font-family: var(--bro-font-display);
	font-size: clamp(1.5rem, 6vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--bro-white);
	text-decoration: none;
}

.bro-mobile-nav__list a:hover,
.bro-mobile-nav__list a:focus-visible {
	color: var(--bro-orange);
}

body.bro-nav-open {
	overflow: hidden;
}

.bro-mobile-nav__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.bro-mobile-nav__call {
	font-size: var(--bro-text-base);
	color: var(--bro-text-on-dark);
}

.bro-mobile-nav__call .bro-icon-phone {
	width: 18px;
	height: 18px;
}

@media (max-width: 1023px) {
	.bro-nav {
		display: none;
	}

	.bro-header__actions .bro-btn--sm,
	.bro-call-link--full,
	.bro-header__divider,
	.bro-header__niceic-logo {
		display: none;
	}

	.bro-call-link--icon {
		display: flex;
	}

	.bro-nav-toggle {
		display: flex;
	}
}

/* Narrow/phone widths only: the NICEIC badge is an important trust signal
   and must stay visible alongside the logo, phone icon and hamburger
   (never hidden to make room) -- but the tablet/hamburger band above
   spans all the way down to very narrow phones, where the desktop-sized
   logo + full-size badge + two 44px icon buttons genuinely don't fit
   without crowding. Scoped to <=599px only, well below any tablet width,
   so the >=600px tablet portion of the shared hamburger-nav band above
   keeps its current (badge-hidden) behaviour completely unchanged --
   this block only re-shows the badge (overriding the hide above via
   normal cascade order, since both rules share the same specificity)
   once the viewport is narrow enough that it's unambiguously a phone.
   Shrinks the logo and badge modestly (both stay clearly legible/
   recognisable, proportions untouched -- height set, width:auto) and
   tightens the header's own gaps slightly; nothing is
   hidden and the header's overall height (--bro-header-height) is
   unchanged. */
@media (max-width: 599px) {
	.bro-header__inner {
		gap: 0.75rem;
	}

	.bro-header__logo-img {
		height: 48px;
	}

	.bro-header__actions {
		gap: 0.5rem;
	}

	.bro-header__niceic-logo {
		display: block;
		height: 30px;
		padding: 3px 5px;
	}
}

@media (min-width: 1024px) {
	.bro-mobile-nav {
		display: none;
	}
}

/* Small-laptop band: the desktop nav (6 items + logo + full actions row,
   including the NICEIC badge) is tight enough here to overflow the
   header horizontally -- previously measured at ~62px overflow at
   exactly 1280px. Every element stays present; this only trims the
   gaps between them and shaves a little size off the two largest
   fixed-width actions-row items (the NICEIC badge and the phone-number
   text) so everything fits without hiding or removing anything. Scoped
   tightly to this band so nothing above 1350px (already clean) or in
   mobile/tablet mode (a completely different, hamburger-nav layout)
   is affected at all. */
@media (min-width: 1024px) and (max-width: 1349px) {
	.bro-header__inner {
		gap: 0.75rem;
		padding: 0 clamp(1rem, 2.5vw, 1.5rem);
	}

	.bro-nav__list {
		gap: 0.6rem;
	}

	/* The nav labels' own letter-spacing (0.14em site-wide, a deliberate
	   tracked-caps look) is the single biggest recoverable width in this
	   band -- at 6 items it adds up to roughly 100px+ on its own. Sizing
	   it down here is a spacing change, not a wording/font-size one. */
	.bro-nav__list a {
		letter-spacing: 0.04em;
	}

	.bro-header__actions {
		gap: 0.6rem;
	}

	.bro-header__niceic-logo {
		height: 40px;
		padding: 4px 7px;
	}

	.bro-header__actions .bro-call-link--full .bro-call-link__text {
		font-size: var(--bro-text-xs);
	}

	.bro-btn--sm {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}