/*
 * Site header: the desktop menu bar, the compact bar with the menu button
 * (tablet and mobile), and the slide-in menu panel. Page heroes are in
 * hero.css.
 */

/* Menu bars */
.site-nav { position: relative; display: flex; margin-top: 10px; padding: 10px; border-bottom: 1px solid #505050; }
.site-nav__inner { position: relative; display: flex; }

.site-nav--desktop { justify-content: center; }
.site-nav--desktop .site-nav__inner { justify-content: center; align-items: flex-end; gap: 20px; width: 86%; padding: 10px; }

.site-nav--compact { border-bottom-color: var(--c-secondary); }
.site-nav--compact .site-nav__inner { flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 20px; width: 100%; padding: 0 0 0 10px; }

@media (max-width: 1024px) {
	.site-nav--desktop { display: none; }
}

@media (min-width: 1025px) {
	.site-nav--compact { display: none; }
}

@media (max-width: 767px) {
	.site-nav, .site-nav--compact .site-nav__inner { flex-wrap: wrap; }
}

/* Desktop menu */
.main-nav { position: relative; display: flex; align-self: flex-end; }
.main-nav ul { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; padding: 0; list-style: none; line-height: normal; }
.main-nav li { position: relative; display: flex; }
.main-nav li:not(:first-child) > a { margin-left: 25px; }
.main-nav li:not(:last-child) > a { margin-right: 25px; }

/* Shared by the desktop menu and the menu panel: colour change plus an
   underline that slides in from the right. */
.main-nav a,
.menu-popup__nav a {
	position: relative;
	font-family: "Oxygen", Sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	text-decoration: none;
	word-spacing: 0;
	color: var(--c-text);
	fill: var(--c-text);
	transition: .4s;
}

.main-nav a:hover, .main-nav a:focus, .main-nav .current-menu-item > a,
.menu-popup__nav a:hover, .menu-popup__nav a:focus, .menu-popup__nav .current-menu-item > a {
	color: var(--c-primary);
	fill: var(--c-primary);
}

.main-nav a:after,
.menu-popup__nav a:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 3px;
	background-color: var(--c-primary);
	transition: .3s;
	transition-timing-function: cubic-bezier(.58, .3, .005, 1);
}

.main-nav li:not(.current-menu-item) > a:not(:hover):not(:focus):after,
.menu-popup__nav li:not(.current-menu-item) > a:not(:hover):not(:focus):after { opacity: 0; left: 100%; width: 10px; }

.main-nav a { display: flex; align-items: center; flex-grow: 1; white-space: nowrap; padding: 5px 0; font-size: 18px; line-height: 1em; letter-spacing: .1px; }

/* Menu button */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	align-self: flex-end;
	padding: .25em;
	border: 0 solid;
	border-radius: 3px;
	background-color: transparent;
	color: var(--c-primary);
	font-size: 22px;
	line-height: 1.5;
	cursor: pointer;
	transition: none;
}

.menu-toggle__open, .menu-toggle__close { display: flex; }
.menu-toggle svg { width: 1em; height: auto; fill: currentColor; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open,
.menu-toggle:not([aria-expanded="true"]) .menu-toggle__close { display: none; }

@media (max-width: 767px) {
	.menu-toggle, .menu-toggle:hover, .menu-toggle:focus { font-size: 20px; }
}

/* Menu panel */
.menu-popup {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
}

.menu-popup[hidden] { display: none; }
.menu-popup:focus { outline: none; }

.menu-popup__panel {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	background-color: #fff;
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
	animation-duration: .5s;
	animation-name: lemonade-slide-in-right;
}

.menu-popup__panel.is-closing { animation-direction: reverse; animation-fill-mode: forwards; }

@keyframes lemonade-slide-in-right {
	from { transform: translate3d(100%, 0, 0); visibility: visible; }
	to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.menu-popup__panel { animation: none; }
}

.menu-popup__close,
.menu-popup__close:hover,
.menu-popup__close:focus {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 9999;
	display: flex;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #333;
	font-size: 44px;
	line-height: 1;
	cursor: pointer;
}

.menu-popup__close svg { width: 1em; height: 1em; fill: var(--c-primary); }

.menu-popup__body { display: flex; width: 640px; max-width: 100vw; max-height: 100vh; overflow: auto; line-height: 1.5; }

.menu-popup__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 100%;
	min-height: 100vh;
	padding: 10px;
}

.menu-popup__nav { position: relative; align-self: center; }
.menu-popup__nav ul { position: relative; z-index: 2; display: block; margin: 0; padding: 0; list-style: none; line-height: normal; }
.menu-popup__nav li { position: relative; display: block; }
.menu-popup__nav li:not(:last-child) { margin-bottom: 12px; }
.menu-popup__nav a { display: inline-block; padding: 15px 0; font-size: 27px; line-height: 20px; }

/* Dark pages (Animation, Art Licensing, single licensing portfolios). In the
   menu panel only hovered and current links turn green; focused links stay
   white, as before. */
.site-nav--filled { background-color: var(--c-dark); }
.is-dark .main-nav a,
.is-dark .menu-popup__nav a { color: var(--c-white); fill: var(--c-white); }
.is-dark .main-nav a:hover, .is-dark .main-nav a:focus, .is-dark .main-nav .current-menu-item > a,
.is-dark .menu-popup__nav a:hover, .is-dark .menu-popup__nav .current-menu-item > a { color: var(--c-primary); fill: var(--c-primary); }