/* .site-header { background-color: blue; width: var(--content); margin-inline: auto; } */

nav { width: var(--content); margin-inline: auto; position: relative; display: flex; align-items: center; justify-content: space-between; }

.logo { color: var(--text); font-size: 1.6rem; font-weight: 900; letter-spacing: -.05em; text-decoration: none; margin-top: 20px;}

.menu { display: flex; align-items: center; gap: var(--gap);  }

.menu > a,
.dropdown-toggle { display: flex; align-items: center; color: var(--text); font-size: var(--small); font-weight: 500; text-decoration: none; padding: var(--gap) 0; }

.menu > a[aria-current="page"],
.dropdown.is-current > .dropdown-toggle { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .35em; }

.dropdown { position: relative; }

.dropdown-toggle { gap: var(--gap-small); background: none; border: 0; cursor: pointer; }

.dropdown-menu { position: absolute; z-index: 10; top: 100%; display: none; min-width: 250px; padding: var(--gap-small); background: var(--surface); border: 1px solid var(--border-muted); }

.dropdown.is-open .dropdown-menu { display: grid; }
	@media (min-width: 1001px) { .dropdown:focus-within .dropdown-menu { display: grid; } }
	@media (min-width: 1001px) and (hover: hover) { .dropdown:hover .dropdown-menu { display: grid; }
}

.dropdown-menu a { padding: var(--gap-small); color: var(--text); font-size: var(--small); text-decoration: none; text-wrap: pretty; }

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible,
.dropdown-menu a[aria-current="page"] { color: var(--accent); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ========================================
   BURGER
======================================== */

.burger { display: none; width: 38px; padding: 7px; background: none; border: 0; cursor: pointer;  }

.burger span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: currentColor;}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 1000px) {
	
	nav {padding: calc(var(--gap-small) + 5px) 0; }
	.logo {font-size: 1.4rem; }
	.burger { display: block; }

	.menu { position: absolute; z-index: 20; top: 100%; right: 0; left: 0; padding: var(--gap); display: none; align-items: stretch; gap: 0;  border-top: 1px solid var(--border-muted);  box-shadow: 0 35px 40px rgba(0, 0, 0, .2); background-color: var(--surface);}
	.menu.is-open { display: grid; }
	.menu > a, 	.dropdown-toggle {  width: 100%; min-height: 3rem; padding: .75rem 0; font-size: 1rem; text-align: left; }
	.dropdown-menu { position: static; min-width: 0; min-height: 3rem; padding: .75rem 0; border: 0; box-shadow: none; }
}