/* H E A D E R ---------------------------------------------------------------------------------- ✓ */

header .quick-access {
	transition: background-color 300ms;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	height: var(--height header button);
	margin-left: 1rem;
	background: center center no-repeat var(--bg 11);
	border-radius: 50%;
}

header .quick-access:focus, header .quick-access:hover { background-color: var(--bg 13); }

/* H O M E -------------------------------------------------------------------------------------- ✓ */

header #home { flex-shrink: 0; display: flex; justify-content: flex-end; width: 5rem; }

header #home svg { width: 3.6em; margin: .15rem .15rem 0 0; fill: var(--col 2); }

header #home svg path:last-of-type { transition: opacity 300ms; opacity: .8; }

header #home:is(:focus, :hover) > svg path:last-of-type { opacity: .6; }

/* N A V ---------------------------------------------------------------------------------------- ✓ */

header nav { display: flex; height: 100%; }

header nav ul, header nav li { display: flex; }

header nav a {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 1.125rem;
	font-family: var(--font 2);
	font-size: 1.025rem;
	letter-spacing: .09em;
}

header nav a:focus, header nav a:hover { color: var(--col 3); }

/* S E A R C H ---------------------------------------------------------------------------------- ✓ */

header .search { display: flex; justify-content: flex-end; width: 100%; position: relative; }

header .search button {
	background-image: url("/images/header/quick-access/search.svg");
	background-position: calc(100% - .64rem ) calc(100% - .64rem );
	background-size: 1.25rem;
	z-index: 1;
}

@media only screen and (min-width: 720px) {

	header .search button:focus + form input,

	header .search button:hover + form input, 
	
	header .search button.on { background-color: var(--bg 13); }

}

header .search input {
	height: var(--height header button);
	position: absolute;
	right: calc(var(--height header button) / 2);
	border-radius: 3.125rem 0 0 3.125rem;
	text-align: right;
	font-size: .9rem;
	letter-spacing: .15em;
}

header .search label[aria-hidden="false"] input {
	transition:
		width 500ms ease,
		padding 500ms ease,
		background 300ms,
		color 300ms 500ms ease;
	visibility: visible;
	width: calc(100% - calc(var(--height header button) / 2));
	padding: 0 1.6325rem 0 .875rem;
}

header .search label[aria-hidden="true"] input {
	transition:
		visibility 0ms 800ms,
		width 500ms 300ms ease,
		padding 500ms 300ms ease,
		background 300ms,
		color 300ms ease;
	visibility: hidden;
	width: 0;
	padding: 0;
	color: hsl(0 0% 93% /0);
}

header .search label[aria-hidden="false"] input::-webkit-input-placeholder { transition: color 300ms 500ms ease; }

header .search label[aria-hidden="true"] input::-webkit-input-placeholder { transition: color 300ms ease; color: hsl(0 0% 93% /0); }

/* U S E R -------------------------------------------------------------------------------------- ✓ */

#user a.quick-access { display: block; }

#user .quick-access { position: relative; background-image: url("/images/header/quick-access/user.svg"); background-size: 1.2125rem; }

#user .quick-access.on::after {
	content: "";
	width: .85rem;
	height: .85rem;
	position: absolute;
	right: .5px;
	bottom: 0;
	background: var(--col 2);
	border: .125rem solid var(--bg 02);
	border-radius: 50%;
}

/* M O D E -------------------------------------------------------------------------------------- ✓ */

#mode { background-image: url("/images/header/quick-access/sun.svg"); background-size: 1.5rem; }

#mode.moon { background-image: url("/images/header/quick-access/moon.svg"); background-size: 1.225rem; }

/* N A V - B U T T O N -------------------------------------------------------------------------- ✓ */



































/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* N A V - B U T T O N -------------------------------------------------------------------------- */

button#nav { display: none; align-items: center; justify-content: center; }

button#nav .bars { position: relative; transition: all 0ms 300ms; }

button#nav .bars, button#nav .bars::before, button#nav .bars::after

{ width: 1.35rem; height: .215rem; background: var(--col 2); border-radius: 50px; }

button#nav .bars::before, button#nav .bars::after { content: ""; position: absolute; left: 0; }

button#nav .bars::before { 
	transition:
		bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
		transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
	bottom: .475rem;
}

button#nav .bars::after {
	transition:
		top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
		transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
	top: .475rem;
}

button#nav[aria-expanded="true"] .bars { background: rgba(238, 238, 238, 0); }

button#nav[aria-expanded="true"] .bars::before {
	transition:
		bottom 300ms cubic-bezier(0.23, 1, 0.32, 1),
		transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
	bottom: 0;
	transform: rotate(-45deg);
}

button#nav[aria-expanded="true"] .bars::after { 
	transition:
		top 300ms cubic-bezier(0.23, 1, 0.32, 1), 
		transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); 
	top: 0;
	transform: rotate(45deg); 
}