/*
 * SiteNav — port of SiteNav.dc.html.
 * Inline styles live in the markup (verbatim); this file holds the helmet
 * keyframes, the style-hover rules (runtime → `!important` classes) and the
 * wide/narrow switch that the original computed from innerWidth >= 1000.
 */

/* Helmet <style> */
@keyframes vmMenuIn { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes vmVeilIn { from { clip-path: circle(0% at 100% 0%); } to { clip-path: circle(150% at 100% 0%); } }

/* style-hover */
.vmn-link:hover { background: rgba(255, 255, 255, .08) !important; color: #ffffff !important; }
.vmn-all:hover { color: #c1ed00 !important; }
/* "More services" chips (service pages added after the design's three). */
.vmn-more:hover, .vmn-more:focus-visible { border-color: #c1ed00 !important; color: #edf0ea !important; }
.vmn-alt:hover { border-color: #c1ed00 !important; color: #c1ed00 !important; }
.vmn-quote:hover { box-shadow: 0 10px 44px rgba(193, 237, 0, .55) !important; }

/* wide = innerWidth >= 1000 → pill nav; narrow → hamburger (+ overlay). */
@media (max-width: 999.98px) {
	.vmn .vmn-pill { display: none !important; }
}
@media (min-width: 1000px) {
	.vmn .vmn-burger,
	.vmn .vmn-menu { display: none !important; }
}

/* <sc-if value="{{ menu }}"> — the overlay's inline display:flex must not beat [hidden]. */
.vmn .vmn-menu[hidden] { display: none !important; }

/*
 * Not in the design: a short window (landscape phone) or a WordPress menu with
 * sub-items can make the overlay taller than the viewport — let its content
 * scroll instead of clipping the last links. Only .vmn-menu-scroll (the nav +
 * contact row) scrolls: it starts below the overlay's 110px top padding, so
 * scrolled links clip there and never pass under the fixed header (logo, moon,
 * quote, menu button — the design's header is transparent over the overlay).
 * The box reaches into the overlay's side and bottom padding (and pads itself
 * by the same amounts), so at rest the layout is the design's, pixel for pixel,
 * and the contact row still slides up from below the viewport (vmMenuIn).
 * Nothing scrolls while it fits; the scrollbar stays hidden so it doesn't
 * flash while the links slide up.
 */
.vmn .vmn-menu { overflow: hidden; }
.vmn .vmn-menu-scroll {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0 calc(-1 * clamp(20px, 6vw, 48px)) -40px;
	padding: 0 clamp(20px, 6vw, 48px) 40px;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
}
.vmn .vmn-menu-scroll::-webkit-scrollbar { display: none; }

/*
 * WordPress admin bar (not part of the design): keep the fixed header below it
 * (32px, 46px below 783px) and push the overlay's content down by the same
 * amount so it keeps the design's spacing under the header. Below 601px core
 * makes the bar position:absolute (it scrolls away); site-nav.js then sets
 * --vmn-ab on the host to the bar's visible height so the header follows it.
 */
body.admin-bar .vmn { --vmn-ab: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .vmn { --vmn-ab: 46px; }
}
body.admin-bar .vmn .vmn-bar { top: var(--vmn-ab) !important; }
body.admin-bar .vmn .vmn-menu { padding-top: calc(110px + var(--vmn-ab)) !important; }

/* The host only carries fixed-position children (like the runtime's .sc-host). */
.vmn { display: block; }

/*
 * Deliberate fix of a design overflow (not in the original): on phone widths the
 * original pushes the menu button past the right edge (EN pages < ~421px,
 * FR without the switch < ~470px, EN with the EN/FR switch < ~477px, FR with
 * the switch < ~524px — the landing pages are not redirected to the app, so
 * real phones see this). Only below the width at which the design's controls
 * stop fitting, the quote pill collapses to its arrow circle (label kept for
 * screen readers); where even that is not enough, the scroll-progress moon is
 * hidden too. Wherever the original fits, nothing changes.
 */
@media (max-width: 420.98px) {
	.vmn .vmn-quote { padding: 6px !important; gap: 0 !important; }
	.vmn .vmn-quote-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 469.98px) {
	.vmn--fr .vmn-quote { padding: 6px !important; gap: 0 !important; }
	.vmn--fr .vmn-quote-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 479.98px) {
	.vmn--has-alt .vmn-quote { padding: 6px !important; gap: 0 !important; }
	.vmn--has-alt .vmn-quote-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 519.98px) {
	.vmn--has-alt.vmn--fr .vmn-quote { padding: 6px !important; gap: 0 !important; }
	.vmn--has-alt.vmn--fr .vmn-quote-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 393.98px) {
	.vmn--has-alt [data-ref="top"] { display: none !important; }
}
@media (max-width: 337.98px) {
	.vmn [data-ref="top"] { display: none !important; }
}