/*
	Header and footer social links.

	Desktop: white bar (logo, contact, Check Prices) over the blue menu bar,
	collapsing to one compact white row once the page scrolls (.is-scrolled).
	Mobile: white bar with call + menu buttons, Check Prices strip, off-canvas menu.

	Open states come from aria-expanded on the toggle buttons.
*/

:root {
	--color-blue: #1c75bc;
	--color-blue-dark: #0a4c81;
	--color-green: #477f14; /* deeper brand green: white on #7cb82d fails contrast */
	--color-green-dark: #3f7512;
	--color-green-light: #7cb82d;
	--color-yellow: #ffbf00;
	--color-mist: #e6ecf0;
	--color-ink: #1d2a33;
	--color-ink-soft: #3d4f5c;
	--color-muted: #5a6b77;
}

.header {
	--gutter: max(1rem, (100% - 1110px) / 2);
	--bar-height: 104px;
	--logo-height: 68px;
	--nav-height: 56px;
	--shadow: color-mix(in srgb, var(--color-blue-dark) 12%, transparent);

	position: fixed;
	inset: var(--admin-bar, 0px) 0 auto;
	z-index: 1030;
	display: grid;
	grid-template-columns: var(--gutter) max-content 1fr max-content var(--gutter);
	grid-template-areas:
		".   logo .   actions ."
		"nav nav  nav nav     nav";
	align-items: center;
	background: #fff;
	box-shadow: 0 2px 10px var(--shadow);

	.admin-bar & {
		--admin-bar: 32px;

		/* WordPress makes the admin bar taller at this width */
		@media (width <= 782px) {
			--admin-bar: 46px;
		}
	}

	& a {
		text-decoration: none;
	}

	& svg {
		display: block;
		flex-shrink: 0;
	}

	& :is(a, button):focus-visible {
		outline: 3px solid var(--color-blue-dark);
		outline-offset: 2px;
	}

	/* Bootstrap's reboot rings buttons on mouse click too */
	& button:focus:not(:focus-visible) {
		outline: none;
	}

	/* Logo */
	.header-logo {
		grid-area: logo;
		display: flex;
		align-items: center;
		block-size: var(--bar-height);

		& img {
			display: block;
			block-size: var(--logo-height);
			inline-size: auto;
		}
	}

	/* Contact + Check Prices */
	.header-actions {
		grid-area: actions;
		display: flex;
		align-items: center;
		gap: 32px;

		& > * {
			flex-shrink: 0;
		}
	}

	.header-email {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 15px;
		color: var(--color-ink-soft);

		& svg {
			color: var(--color-blue);
		}

		&:is(:hover, :focus-visible) {
			color: var(--color-blue);
		}
	}

	.header-call {
		display: flex;
		align-items: center;
		gap: 12px;
		color: var(--color-blue);

		&:is(:hover, :focus-visible) {
			color: var(--color-blue-dark);

			.call-icon {
				background: var(--color-blue);
				color: #fff;
			}
		}
	}

	.call-icon {
		display: grid;
		place-items: center;
		inline-size: 44px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-mist);
	}

	.call-text {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.call-label {
		font-size: 12px;
		font-weight: 500;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.call-number {
		font-size: 22px;
		font-weight: 700;
		line-height: 1.1;
	}

	.check-prices-btn {
		grid-area: cta;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		block-size: 52px;
		padding-inline: 28px;
		border-radius: 3px;
		background: var(--color-green);
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;

		&:is(:hover, :focus-visible) {
			background: var(--color-green-dark);
			color: #fff;
		}
	}

	.menu-toggle,
	.mobile-cta {
		display: none;
	}

	.main-nav :is(.menu, .sub-menu) {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/*
		Desktop
	*/
	@media (width >= 992px) {
		.main-nav {
			grid-area: nav;

			.menu {
				display: flex;
				block-size: var(--nav-height);

				& > .menu-item {
					position: relative;
					display: flex;
					flex-shrink: 0;
				}

				& > .menu-item > a {
					display: flex;
					align-items: center;
					font-size: 15px;
					font-weight: 500;
				}
			}

			.submenu-toggle {
				display: flex;
				align-items: center;
				padding: 0;
				border: 0;
				background: none;
				color: inherit;
				cursor: pointer;

				&[aria-expanded="true"] svg {
					rotate: 180deg;
				}
			}

			/* Dropdown */
			.sub-menu {
				position: absolute;
				inset-block-start: 100%;
				inset-inline-start: 0;
				min-inline-size: 280px;
				padding-block: 10px;
				border-block-start: 4px solid var(--color-yellow);
				background: #fff;
				box-shadow: 0 12px 28px color-mix(in srgb, var(--color-blue-dark) 22%, transparent);
				opacity: 0;
				visibility: hidden;
				translate: 0 6px;

				& a {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 16px;
					padding: 12px 22px;
					color: var(--color-ink);
					font-size: 15px;
					font-weight: 500;

					&::after {
						content: "";
						inline-size: 7px;
						aspect-ratio: 1;
						border-block-start: 2.5px solid var(--color-green-light);
						border-inline-end: 2.5px solid var(--color-green-light);
						rotate: 45deg;
					}

					&:is(:hover, :focus-visible, [aria-current="page"]) {
						background: var(--color-mist);
						color: var(--color-blue);
					}
				}
			}

			.menu-item:is(:has(:focus-visible), :has(> [aria-expanded="true"])) > .sub-menu {
				opacity: 1;
				visibility: visible;
				translate: none;
			}

			@media (hover: hover) {
				.menu-item:hover > .sub-menu {
					opacity: 1;
					visibility: visible;
					translate: none;
				}
			}
		}

		/* Full header: blue menu bar */
		&:not(.is-scrolled) .main-nav {
			padding-inline: var(--gutter);
			background: var(--color-blue);

			.menu > .menu-item {
				border-block: 4px solid transparent;
				color: #fff;

				& > a {
					padding-inline: 22px;
					color: inherit;
					letter-spacing: .03em;
					text-transform: uppercase;
				}

				&:is(.current-menu-item, .current-menu-ancestor) {
					border-block-end-color: var(--color-yellow);
				}

				&:is(:has(:focus-visible), :has(> [aria-expanded="true"])) {
					border-block-end-color: var(--color-yellow);
					background: var(--color-blue-dark);
				}

				@media (hover: hover) {
					&:hover {
						border-block-end-color: var(--color-yellow);
						background: var(--color-blue-dark);
					}
				}

				& > :focus-visible {
					outline-color: var(--color-yellow);
				}
			}

			.menu > .menu-item-has-children > a {
				padding-inline-end: 6px;
			}

			.menu > .contact-us-item {
				margin-inline-start: auto;
			}

			.submenu-toggle {
				padding-inline: 4px 18px;
			}

			/* Dropdown sits below the item's 4px bottom border */
			.sub-menu {
				inset-block-start: calc(100% + 4px);
			}
		}

		/* Compact bar once scrolled */
		&.is-scrolled {
			--bar-height: 72px;
			--logo-height: 44px;
			--nav-height: 72px;

			grid-template-columns: var(--gutter) max-content minmax(0, 1fr) max-content var(--gutter);
			grid-template-areas: ". logo nav actions .";
			border-block-end: 4px solid var(--color-blue);
			box-shadow: 0 4px 14px color-mix(in srgb, var(--color-blue-dark) 16%, transparent);

			.main-nav {
				padding-inline: 24px;

				.menu > .menu-item {
					color: var(--color-blue);

					& > a {
						padding-inline: 10px;
						color: inherit;
						text-decoration-color: var(--color-yellow);
						text-decoration-thickness: 3px;
						text-underline-offset: 8px;
					}

					&:is(.current-menu-item, .current-menu-ancestor, :has(:focus-visible), :has(> [aria-expanded="true"])) > a {
						color: var(--color-blue-dark);
						text-decoration-line: underline;
					}

					@media (hover: hover) {
						&:hover > a {
							color: var(--color-blue-dark);
							text-decoration-line: underline;
						}
					}
				}

				.menu > .menu-item-has-children > a {
					padding-inline-end: 2px;
				}

				.submenu-toggle {
					padding-inline: 2px 10px;
				}
			}

			.header-actions {
				gap: 20px;
			}

			:is(.header-email, .call-label) {
				display: none;
			}

			.header-call {
				gap: 8px;
			}

			.call-icon {
				inline-size: auto;
				background: none;
			}

			.call-number {
				font-size: 17px;
				color: var(--color-blue-dark);
			}

			.check-prices-btn {
				block-size: 44px;
				padding-inline: 22px;
				font-size: 15px;

				& svg {
					display: none;
				}
			}
		}
	}

	/* Small laptops: tighter full header */
	@media (992px <= width < 1200px) {
		&:not(.is-scrolled) {
			.header-email {
				display: none;
			}

			.main-nav .menu > .menu-item > a {
				padding-inline: 14px;
				font-size: 14px;
			}

			.main-nav .menu > .menu-item-has-children > a {
				padding-inline-end: 6px;
			}

			.main-nav .submenu-toggle {
				padding-inline-end: 12px;
			}
		}
	}

	/* Compact bar is tight below 1280px: phone becomes an icon button */
	@media (992px <= width < 1280px) {
		&.is-scrolled {
			.call-text {
				display: none;
			}

			.call-icon {
				inline-size: 44px;
				background: var(--color-mist);
			}

			.main-nav .menu > .menu-item > a {
				padding-inline: 8px;
				font-size: 14px;
			}

			.main-nav .menu > .menu-item-has-children > a {
				padding-inline-end: 2px;
			}
		}
	}

	/*
		Mobile and tablet
	*/
	@media (width < 992px) {
		--bar-height: 72px;
		--logo-height: 42px;

		grid-template-columns: var(--gutter) 1fr max-content max-content var(--gutter);
		grid-template-areas:
			". logo phone toggle ."
			". cta  cta   cta    .";

		/* blue strip behind the Check Prices row */
		&::before {
			content: "";
			grid-area: 2 / 1 / 3 / -1;
			align-self: stretch;
			background: var(--color-blue);
		}

		.header-actions {
			display: contents;
		}

		.header-email {
			display: none;
		}

		.header-call {
			grid-area: phone;
		}

		.call-text {
			display: none;
		}

		.call-icon {
			inline-size: 48px;
		}

		.check-prices-btn {
			block-size: 40px;
			margin-block: 8px;
			font-size: 15px;
		}

		.menu-toggle {
			grid-area: toggle;
			display: grid;
			place-items: center;
			inline-size: 48px;
			aspect-ratio: 1;
			margin-inline-start: 8px;
			padding: 0;
			border: 0;
			border-radius: 50%;
			background: var(--color-blue);
			color: #fff;
			cursor: pointer;

			.icon-close {
				display: none;
			}

			&[aria-expanded="true"] {
				background: var(--color-blue-dark);

				.icon-open {
					display: none;
				}

				.icon-close {
					display: block;
				}
			}
		}

		/* Off-canvas menu */
		.main-nav {
			position: absolute;
			inset: 100% 0 auto;
			display: none;
			flex-direction: column;
			block-size: calc(100dvh - var(--admin-bar, 0px) - var(--bar-height));
			overflow-y: auto;
			overscroll-behavior: contain;
			background: var(--color-blue);

			& :focus-visible {
				outline-color: var(--color-yellow);
			}

			.menu {
				padding-block: 8px;

				& > .menu-item {
					display: flex;
					flex-wrap: wrap;
					border-block-end: 1px solid color-mix(in srgb, #fff 18%, transparent);
				}

				& > .menu-item > a {
					flex: 1;
					display: flex;
					align-items: center;
					min-block-size: 60px;
					padding-inline: 20px;
					color: #fff;
					font-size: 18px;
					font-weight: 500;
				}
			}

			.submenu-toggle {
				display: grid;
				place-items: center;
				inline-size: 60px;
				padding: 0;
				border: 0;
				background: none;
				color: #fff;
				cursor: pointer;

				/* round chip behind the chevron */
				&::before {
					content: "";
					grid-area: 1 / 1;
					inline-size: 32px;
					aspect-ratio: 1;
					border-radius: 50%;
					background: color-mix(in srgb, #fff 16%, transparent);
				}

				& svg {
					grid-area: 1 / 1;
				}

				&[aria-expanded="true"] {
					color: var(--color-blue-dark);

					&::before {
						background: var(--color-yellow);
					}

					& svg {
						rotate: 180deg;
					}
				}
			}

			.sub-menu {
				display: none;
				flex-basis: 100%;
				padding-block: 6px;
				background: var(--color-blue-dark);

				& a {
					display: flex;
					align-items: center;
					min-block-size: 48px;
					padding-inline: 36px 20px;
					color: #fff;
					font-size: 16px;
					font-weight: 500;

					&:is(:hover, :focus-visible, [aria-current="page"]) {
						background: color-mix(in srgb, #fff 10%, transparent);
					}
				}
			}

			.menu-item:has(> [aria-expanded="true"]) > .sub-menu {
				display: block;
			}
		}

		.mobile-cta {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-block-start: auto;
			padding: 16px 20px 24px;

			& a {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10px;
				block-size: 52px;
				border-radius: 3px;
				color: #fff;
				font-weight: 700;
			}
		}

		.mobile-call {
			border: 2px solid #fff;
			font-size: 17px;
		}

		.mobile-check-prices {
			background: var(--color-green);
			font-size: 16px;
			letter-spacing: .04em;
			text-transform: uppercase;
		}

		/* Menu open */
		&:has(.menu-toggle[aria-expanded="true"]) {
			&::before,
			.check-prices-btn {
				display: none;
			}

			.main-nav {
				display: flex;
			}
		}

		/* stop the page scrolling behind the open menu */
		:root:has(& .menu-toggle[aria-expanded="true"]) {
			overflow: hidden;
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		& :is(.header-logo, .header-logo img, .check-prices-btn) {
			transition: block-size .2s ease, background-color .15s ease;
		}

		& :is(.call-icon, .main-nav .menu > .menu-item) {
			transition: background-color .15s ease, color .15s ease;
		}

		.submenu-toggle svg {
			transition: rotate .2s ease;
		}

		@media (width >= 992px) {
			.main-nav .sub-menu {
				transition: opacity .15s ease, translate .15s ease, visibility .15s;
			}
		}
	}
}

/*
	Footer social links (moved from the old top bar)
*/
.footer-social {
	margin-block: 24px 8px;

	.content-header {
		margin-block-end: 12px;
	}
}

.footer-social-links {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;

	& a {
		display: grid;
		place-items: center;
		inline-size: 44px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: #fff;
		color: var(--color-blue);
		font-size: 20px;

		&:is(:hover, :focus-visible) {
			background: var(--color-yellow);
			color: var(--color-blue-dark);
		}

		&:focus-visible {
			outline: 3px solid #fff;
			outline-offset: 2px;
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		& a {
			transition: background-color .15s ease, color .15s ease;
		}
	}
}