/**
 * Header nav link appearance. Structure — the flex row, the brand, the
 * container — stays in layout.css.
 *
 * Links read as body text, not as links: on a page where the car photography
 * is the only colour, a row of blue nav items is the loudest thing above the
 * fold. Blue is what hover and the current page are for — colour alone, with
 * no underline anywhere in the row.
 */

@layer components {
	.hauto-site-header__link {
		display: inline-flex;
		gap: var(--wp--preset--spacing--20);
		align-items: center;
		color: var(--wp--preset--color--contrast);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 600;
		text-transform: uppercase;
		text-decoration: none;
		transition: color 140ms ease-out;

		&:hover {
			color: var(--wp--preset--color--primary);
		}
	}

	/* The page you are on is marked, and stays marked without a hover. */
	.current-menu-item > .hauto-site-header__link,
	.current-menu-ancestor > .hauto-site-header__link {
		color: var(--wp--preset--color--primary);
	}

	/* The phone number: an ordinary nav link that carries a handset. */
	.hauto-site-header__link--call .hauto-icon {
		opacity: 1;
	}

	/* It tilts as if being picked up — the one flourish in the header. */
	.hauto-site-header__link--call:hover .hauto-icon {
		animation: hauto-handset-tilt 600ms ease-in-out;
	}

	@keyframes hauto-handset-tilt {
		0%,
		100% {
			rotate: 0deg;
		}

		25% {
			rotate: -12deg;
		}

		60% {
			rotate: 9deg;
		}
	}

	/* A parent item is a button, so it carries none of a button's chrome. */
	.hauto-site-header__disclosure {
		border: 0;
		background: none;
		cursor: pointer;
		padding: 0;
	}

	.hauto-site-header__disclosure .hauto-icon {
		transition: rotate 180ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.hauto-site-header__disclosure[aria-expanded='true'] .hauto-icon {
		rotate: 180deg;
	}

	/* An open parent stays marked while its panel is open, so the marking does
	   not vanish as the pointer moves down into the panel. */
	.hauto-site-header__disclosure[aria-expanded='true'] {
		color: var(--wp--preset--color--primary);
	}

	/* Dropdown links read as links: sentence case, full size, no underline
	   animation. The uppercase row above them is the navigation; these are its
	   contents. */
	.hauto-site-header__sublink {
		display: block;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		border-radius: var(--hauto-radius-sm);
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
		text-decoration: none;
		transition:
			color 140ms ease-out,
			background-color 140ms ease-out;

		&:hover,
		&:focus-visible {
			background-color: rgba(0, 0, 0, 0.025);
			color: var(--wp--preset--color--primary);
		}
	}

	.current-menu-item > .hauto-site-header__sublink {
		color: var(--wp--preset--color--primary);
	}

	/* In the narrow panel the list's gap does the spacing; see layout.css. */
	@media (width < 64rem) {
		.hauto-site-header__sublink {
			padding: 0;
		}
	}

	/* The burger: hidden on wide screens by layout.css, so it only ever needs
	   to look like the icon it is. The two icons are the open and closed
	   states, in source order. */
	.hauto-site-header__burger {
		border: 0;
		border-radius: var(--hauto-radius-sm);
		background: none;
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
		font-size: var(--wp--preset--font-size--x-large);

		&:hover {
			color: var(--wp--preset--color--primary);
		}
	}

	.hauto-site-header__burger[aria-expanded='false'] .hauto-icon:last-child,
	.hauto-site-header__burger[aria-expanded='true'] .hauto-icon:first-child {
		display: none;
	}

	/* The narrow-screen panel is a sheet under the header, not a floating card:
	   it spans the full width, so it needs an edge at the bottom and nothing
	   else. */
	.hauto-site-header__nav {
		border-block-end: 1px solid var(--wp--preset--color--border);
		background-color: var(--wp--preset--color--base);
		box-shadow: var(--wp--preset--shadow--raised);
	}

	@media (width >= 64rem) {
		.hauto-site-header__nav {
			border: 0;
			background: none;
			box-shadow: none;
		}

		/* Laid out but inert until its button says otherwise; visibility is what
		   keeps the links out of the tab order while it is closed. */
		.hauto-site-header__submenu {
			visibility: hidden;
			opacity: 0;
			translate: 0 -0.35rem;
			border: 1px solid var(--wp--preset--color--border);
			border-radius: var(--hauto-radius-md);
			background-color: var(--wp--preset--color--base);
			box-shadow: var(--wp--preset--shadow--raised);
			transition:
				opacity 160ms ease-out,
				translate 160ms ease-out,
				visibility 0s linear 160ms;
		}

		.hauto-site-header__disclosure[aria-expanded='true'] + .hauto-site-header__submenu {
			visibility: visible;
			opacity: 1;
			translate: none;
			transition-delay: 0s;
		}
	}

	/*
	 * Without scripting neither button can do anything, so the menu becomes
	 * what it is underneath: one list with every link in it, always open.
	 */
	@media (scripting: none) {
		.hauto-site-header__burger {
			display: none;
		}

		.hauto-site-header__nav,
		.hauto-site-header__submenu {
			display: block;
			position: static;
			visibility: visible;
			opacity: 1;
			translate: none;
			border: 0;
			background: none;
			box-shadow: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hauto-site-header__link,
		.hauto-site-header__sublink,
		.hauto-site-header__submenu,
		.hauto-site-header__disclosure .hauto-icon {
			transition: none;
		}

		.hauto-site-header__link--call:hover .hauto-icon {
			animation: none;
		}
	}
}