/*
 * UNIGRID phone menu (below 1024px, where the theme shows the hamburger). Modeled on
 * pixelismo.it's menu, per Aaron (2026-10-05):
 * - a rounded dark card that drops just below the floating nav, aligned to its edges, growing out of
 *   the top-right corner where the hamburger is (instead of the theme's full-screen panel);
 * - big Archivo Bold links in normal case, the current page in green #00B03C, the others white;
 * - Order Samples as a solid green pill with white text (the contact Submit's hovered look);
 * - a footer row: copyright · Privacy · LinkedIn icon (added to the menu by unigrid-site.php).
 * The theme's X close icon is unchanged. mobile-menu.js adds .ug-closing to play the close animation.
 */

/* The footer row exists only for the phone menu. */
@media (min-width: 1024px) {
	header.header #menu-main-menu > li.ug-mobile-footer {
		display: none;
	}
}

@media (max-width: 1023.98px) {
	/* The card: below the nav bar, same left/right edges and corner radius as the bar. */
	header.header #primary-menu.is-open {
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 0;
		right: 0;
		width: auto;
		transform: none;
		background-color: #002B2E;
		border-radius: 0.75rem;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
		overflow: hidden;
		transform-origin: top right;
		animation: ug-menu-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	header.header #primary-menu.is-open.ug-closing {
		animation: ug-menu-out 0.22s ease-in both;
	}

	header.header #primary-menu.is-open > div {
		width: 100%;
		min-width: 0;
		min-height: 0;
	}

	/* The list: stacked, left-aligned, no divider lines, no forced full-screen height. */
	header.header #primary-menu.is-open #menu-main-menu {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		min-height: 0;
		padding: 1.5rem 1.5rem 1.25rem;
	}

	header.header #primary-menu.is-open #menu-main-menu > li {
		border: 0;
		padding: 0;
		margin: 0;
		width: auto;
		animation: ug-link-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	/* Page links: big Archivo Bold, white; the current page green. */
	header.header #primary-menu.is-open #menu-main-menu > li:not(.is-button):not(.ug-mobile-footer) > a {
		display: block;
		padding-block: 0.125rem;
		font-family: "Archivo", sans-serif;
		font-weight: 700;
		font-size: 2.5rem;
		line-height: 1.1;
		letter-spacing: -0.01em;
		color: #FFFFFF;
		text-decoration: none;
		transition: color 0.2s ease;
	}

	/* Same :not() chain as the white-link rule above plus the current-page class, so this one wins. */
	header.header #primary-menu.is-open #menu-main-menu > li.current-menu-item:not(.is-button):not(.ug-mobile-footer) > a,
	header.header #primary-menu.is-open #menu-main-menu > li.current-menu-ancestor:not(.is-button):not(.ug-mobile-footer) > a {
		color: #00B03C;
	}

	/* Order Samples: solid green pill, white text (the contact form Submit's hovered look). */
	header.header #primary-menu.is-open #menu-main-menu > li.is-button {
		margin-top: 2rem;
		padding: 0.5rem 2.875rem;
		font-family: "Exo 2", sans-serif;
		font-weight: 600;
		font-size: 1rem;
		line-height: 1.375;
		color: #FFFFFF;
		background-color: #00B03C;
		border-radius: 100px;
		white-space: nowrap;
	}

	header.header #primary-menu.is-open #menu-main-menu > li.is-button > a {
		color: inherit;
		font: inherit;
		text-decoration: none;
	}

	/* Footer row: copyright · Privacy · LinkedIn. */
	header.header #primary-menu.is-open #menu-main-menu > li.ug-mobile-footer {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.5rem 1.25rem;
		margin-top: 1.5rem;
		font-family: "Lato", sans-serif;
		font-size: 0.8125rem;
		line-height: 1.4;
		color: rgba(255, 255, 255, 0.75);
	}

	header.header #primary-menu.is-open #menu-main-menu > li.ug-mobile-footer a {
		color: inherit;
		text-decoration: none;
	}

	header.header #primary-menu.is-open .ug-mobile-footer__linkedin {
		display: inline-block;
		width: 1.125rem;
		height: 1.1875rem;
		/* The same LinkedIn icon as the site footer (theme: .site-footer #menu-footer .is-linkedin). */
		background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='19' fill='none' viewBox='0 0 18 19'%3E%3Cpath fill='%23fff' d='M16.25.864c.664 0 1.25.586 1.25 1.29v14.96c0 .703-.586 1.25-1.25 1.25H1.21c-.663 0-1.21-.547-1.21-1.25V2.154C0 1.45.547.863 1.21.863zm-10.977 15v-8.32H2.695v8.32zM3.984 6.372c.82 0 1.485-.664 1.485-1.484s-.664-1.524-1.485-1.524c-.859 0-1.523.703-1.523 1.524 0 .82.664 1.484 1.523 1.484M15 15.864v-4.57c0-2.227-.508-3.984-3.125-3.984-1.25 0-2.11.703-2.46 1.367h-.04V7.544h-2.46v8.32h2.577v-4.101c0-1.094.195-2.149 1.563-2.149 1.328 0 1.328 1.25 1.328 2.188v4.062z'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Staggered entrance for the items. */
	header.header #primary-menu.is-open #menu-main-menu > li:nth-child(1) { animation-delay: 0.04s; }
	header.header #primary-menu.is-open #menu-main-menu > li:nth-child(2) { animation-delay: 0.08s; }
	header.header #primary-menu.is-open #menu-main-menu > li:nth-child(3) { animation-delay: 0.12s; }
	header.header #primary-menu.is-open #menu-main-menu > li:nth-child(4) { animation-delay: 0.16s; }
	header.header #primary-menu.is-open #menu-main-menu > li:nth-child(5) { animation-delay: 0.2s; }
	header.header #primary-menu.is-open #menu-main-menu > li:nth-child(6) { animation-delay: 0.24s; }
	header.header #primary-menu.is-open #menu-main-menu > li:nth-child(7) { animation-delay: 0.28s; }
}

/*
 * Hamburger ⇄ X morph (Aaron, 2026-10-05; modeled on ray-ban.com's menu button). The theme swaps two
 * separate SVG icons instantly; instead, the toggle draws three lines itself and animates between
 * them: the top and bottom lines slide to the center and rotate ±45° into an X while the middle line
 * shrinks away, and the reverse on close. The sizes match the theme's icons: a 37×24px hamburger with
 * 2px lines; rotated, the 37px lines make a ~26px X like the theme's. 0.4s ease, like Ray-Ban.
 * mobile-menu.js adds .ug-icon-closing to the header the moment X is tapped, so the morph back starts
 * immediately instead of waiting for the card's fade-out.
 */
@media (max-width: 1023.98px) {
	header.header #primary-menu-toggle {
		position: relative;
		display: block;
		width: 2.3125rem;   /* 37px */
		height: 1.5rem;     /* 24px */
		min-height: 0;
		color: #FFFFFF;
		/* middle line */
		background: linear-gradient(currentColor, currentColor) center / 100% 0.125rem no-repeat;
		transition: background-size 0.4s ease;
	}

	header.header #primary-menu-toggle svg {
		display: none !important; /* the theme's two static icons */
	}

	/* top and bottom lines */
	header.header #primary-menu-toggle::before,
	header.header #primary-menu-toggle::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 0.125rem;   /* 2px */
		background-color: currentColor;
		transition: top 0.4s ease, transform 0.4s ease;
	}

	header.header #primary-menu-toggle::before {
		top: 0;
	}

	header.header #primary-menu-toggle::after {
		top: calc(100% - 0.125rem);
	}

	/* Open: X */
	header.header.has-open-mobile-nav:not(.ug-icon-closing) #primary-menu-toggle {
		background-size: 0 0.125rem;
	}

	header.header.has-open-mobile-nav:not(.ug-icon-closing) #primary-menu-toggle::before {
		top: calc(50% - 0.0625rem);
		transform: rotate(45deg);
	}

	header.header.has-open-mobile-nav:not(.ug-icon-closing) #primary-menu-toggle::after {
		top: calc(50% - 0.0625rem);
		transform: rotate(-45deg);
	}
}

@keyframes ug-menu-in {
	from { opacity: 0; transform: scale(0.9) translateY(-0.5rem); }
	to   { opacity: 1; transform: none; }
}

@keyframes ug-menu-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: scale(0.94) translateY(-0.375rem); }
}

@keyframes ug-link-in {
	from { opacity: 0; transform: translateY(0.75rem); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	header.header #primary-menu.is-open,
	header.header #primary-menu.is-open.ug-closing,
	header.header #primary-menu.is-open #menu-main-menu > li {
		animation: none;
	}

	header.header #primary-menu-toggle,
	header.header #primary-menu-toggle::before,
	header.header #primary-menu-toggle::after {
		transition: none;
	}
}