/**
 * Nav overlay -- fullscreen on mobile (a half-width panel would be too
 * cramped to be usable on a phone), a half-page slide-in panel on wider
 * screens. Originally full-screen at every width, matching production --
 * changed to half-page per the client's explicit request ("so it doesn't
 * cover the whole screen"), not a correction. See MIGRATION.md.
 */

.cwf-nav-menu {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: var(--color-black);
	overflow-y: auto;
	padding: 54px 0; /* vertical only -- horizontal spacing lives on .cwf-nav-menu__inner instead, see below */
	display: flex;
	flex-direction: column;
	align-items: center; /* centers .cwf-nav-menu__inner as a block; content *inside* it is left-aligned, see below */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

@media (min-width: 768px) {
	.cwf-nav-menu {
		inset: 0 0 0 auto; /* top/right/bottom 0, left auto -- pins it to
		                       the right edge instead of stretching full
		                       width, matching the hamburger toggle's own
		                       side in the header */
		left: auto;
		width: 50%;
		align-items: flex-start; /* .cwf-nav-menu__inner fills this half-
		                             width panel instead of centering
		                             within a wider phantom column */
		box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); /* separates the
		                             panel from the still-visible page
		                             behind it -- there's no dedicated
		                             backdrop element, the shadow is the
		                             only visual cue of the edge */
		transform: translateX(100%); /* slides in from the right instead
		                                 of just fading, now that it's not
		                                 full-screen -- a plain opacity
		                                 fade left the panel oddly static
		                                 against the now-visible page */
	}
	.cwf-nav-menu.is-open {
		transform: translateX(0);
	}
}

/**
 * The logo used to share a left edge with the grid (production's own
 * layout, measured directly: logo left === first column title left,
 * both 180px at a 1440px viewport) -- superseded by a client request to
 * instead center the logo over column 1 specifically (see
 * .cwf-nav-menu__logo-row below, which mirrors .cwf-nav-menu__grid's own
 * grid-template-columns at each breakpoint so column 1 resolves to the
 * same width in both places). Kept the original production numbers out
 * of this comment since they no longer describe current behavior; see
 * MIGRATION.md for both changes' history.
 */
.cwf-nav-menu__inner {
	width: 100%;
	max-width: 1200px; /* measured from production -- specific to this component, not the same as --container-width */
	padding: 0 60px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	container-type: inline-size; /* lets .cwf-nav-menu__grid below react to
	                                 THIS element's own resolved width
	                                 (container query units/@container)
	                                 instead of the viewport -- now that
	                                 the panel is only 50% of the viewport
	                                 on desktop, a viewport-width media
	                                 query would still apply the full
	                                 3-column desktop layout sized for the
	                                 old fullscreen version's ~1080px
	                                 inner width, cramming it into a panel
	                                 roughly half that -- same reasoning
	                                 as split-section.css's heading fix
	                                 this session. See MIGRATION.md. */
}

@media (min-width: 768px) {
	.cwf-nav-menu__inner {
		max-width: none; /* the panel itself (50vw) is the real
		                     constraint now, not this 1200px figure
		                     measured for the old fullscreen version --
		                     letting it stay would just add unreachable
		                     dead space on wide monitors */
		padding: 0 40px; /* tightened from 60px -- more of a half-width
		                     panel's limited horizontal room goes to
		                     content instead of padding */
	}
}

.cwf-nav-menu.is-open {
	opacity: 1;
	visibility: visible;
}

/**
 * Scoped as `.cwf-nav-menu .cwf-nav-menu__close` (two classes) to beat
 * Elementor's kit-wide `.elementor-kit-13 button { background-color: ...;
 * padding: 15px 30px; ... }` rule -- see header.css for the full
 * explanation, same collision, same fix.
 */
.cwf-nav-menu .cwf-nav-menu__close {
	position: absolute;
	top: 24px;
	right: 32px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--color-white);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	border-radius: 0;
	font-family: inherit;
}
/* Same bug/fix as .cwf-header__nav-toggle in header.css: nav-menu.js
   calls `closeBtn.focus()` every time the menu OPENS, a programmatic
   focus that matches plain `:focus` but not `:focus-visible` -- the
   parent theme's bare `button:focus{background-color:#c36}` painted
   this button pink on every open with only a `:focus-visible`
   override. See MIGRATION.md. */
.cwf-nav-menu .cwf-nav-menu__close:hover,
.cwf-nav-menu .cwf-nav-menu__close:focus,
.cwf-nav-menu .cwf-nav-menu__close:focus-visible {
	background: none !important;
	border: 0 !important;
	color: var(--color-primary) !important;
}

/**
 * Wraps just the logo <a> in the SAME column widths as .cwf-nav-menu__grid
 * below, at every breakpoint, so .cwf-nav-menu__logo can center itself
 * over column 1's actual resolved width instead of a guessed fixed
 * offset -- client asked for the logo centered over the first column
 * specifically (Event Coverage/Drone/Podcast), superseding the earlier
 * "smaller, into the corner" version of this same element. See
 * MIGRATION.md for both.
 *
 * NOTE: a shared CSS custom property (set on .cwf-nav-menu__inner,
 * overridden per @container breakpoint, read by both this and
 * .cwf-nav-menu__grid) was tried first and DOESN'T work -- a @container
 * query cannot restyle custom properties (or anything else) on the
 * querying container element itself, only its descendants, so the
 * override silently never applied and the grid stayed 3-column at every
 * width. Caught by measuring getBoundingClientRect/computed styles
 * directly, not just eyeballing a screenshot. Fixed by keeping the
 * three grid-template-columns values in exactly two places instead
 * (here and .cwf-nav-menu__grid below) -- if one changes, change the
 * other to match.
 */
.cwf-nav-menu__logo-row {
	display: grid;
	grid-template-columns: 1fr 1.43fr 1.51fr; /* must match .cwf-nav-menu__grid's own default, see note above */
	gap: 10px;
	width: 100%;
	margin-bottom: 20px;
}
.cwf-nav-menu__logo {
	display: block;
	grid-column: 1;
	justify-self: center; /* centers within column 1's own grid track, not the row */
	width: 44px; /* was 64px (which itself was smaller than the header's 80px logo, measured from production) -- client asked for the nav menu's logo smaller still. Deliberate deviation from production, not a correction. */
}
.cwf-nav-menu__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/**
 * Column widths and gap measured directly from production's actual column
 * containers (elementor-element-7a5cd3d5/2817a60e/378f96c/b2c13b2), not
 * guessed: 195.6px / 279.5px / 295.5px / 279.5px, 10px gaps between them.
 * Column 1 (short labels: Home, Our Work, About Us...) is the *narrowest*,
 * not the widest -- the original 1.4fr on column 1 had this backwards.
 */
.cwf-nav-menu__grid {
	width: 100%; /* fills .cwf-nav-menu__inner, which already carries the max-width */
	display: grid;
	/* 3 columns, not the originally-measured 4 -- the 4th (photo + "Email
	   Us" button) was removed per the client's request, see
	   site-nav-menu.php. Kept these 3 columns' original relative ratios
	   as-is rather than re-guessing new ones now that there's more room.
	   This is the WIDE-container case now -- see the @container rules
	   below, which replaced the old viewport-width @media breakpoints.
	   A plain @media breakpoint can't tell the difference between "a
	   1024px BROWSER WINDOW" and "a 1024px browser window with this
	   menu now living in a 512px-wide half-page panel" -- @container,
	   keyed to .cwf-nav-menu__inner's own resolved width (see its
	   container-type above), reacts to the actual available space
	   correctly in both the full-screen (mobile) and half-page
	   (desktop) cases with one shared set of rules, instead of
	   maintaining two parallel responsive systems. See MIGRATION.md. */
	grid-template-columns: 1fr 1.43fr 1.51fr;
	gap: 10px;
}
@container (max-width: 750px) {
	.cwf-nav-menu__grid,
	.cwf-nav-menu__logo-row {
		grid-template-columns: 1fr 1fr;
	}
	.cwf-nav-menu__grid {
		row-gap: 40px;
	}
	/* With only 2 columns and 3 .cwf-nav-menu__col items, default grid
	   auto-placement wraps the 3rd (About Us/Contact Us/Our Partners)
	   into row 2's FIRST column -- i.e. directly under column 1
	   (Event Coverage/Drone), regardless of how much taller column 2
	   (Podcast/Social Media Content/Production Services) is. Visually
	   that put About Us mid-way up the menu, to the left of Production
	   Services' still-continuing list, instead of at the very end.
	   Forcing it to span both columns pushes it onto its own row below
	   BOTH columns, keeping it last. Client-reported. Also applies at
	   the <450px single-column breakpoint below (harmless there --
	   spanning 1/-1 in a 1-column grid is a no-op, it was already
	   last), but must NOT apply at the ≥750px 3-column width, where
	   all 3 columns already sit side by side in one row correctly. */
	.cwf-nav-menu__col--last {
		grid-column: 1 / -1;
	}
}
@container (max-width: 450px) {
	.cwf-nav-menu__grid,
	.cwf-nav-menu__logo-row {
		grid-template-columns: 1fr;
	}
	.cwf-nav-menu__grid {
		row-gap: 24px; /* single-column stacked view: the 40px row-gap above
		                   was tuned for the 2-column tablet layout's row
		                   separation -- at 1 column every section (Drone,
		                   Podcast, Production...) stacks directly on top of
		                   the previous one, and 40px read as an oversized
		                   gap between e.g. Drone's last submenu item and
		                   the Podcast title. Client-reported, no production
		                   equivalent to measure (this stacked layout is
		                   rebuild-only, production's popup was never
		                   responsive like this). */
	}
}

.cwf-nav-menu__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* so children (e.g. the Email Us button) size to their own content instead of stretching to the column width -- see .cwf-nav-menu__email-btn */
	gap: 6px;
}

.cwf-nav-menu__col--indent {
	padding-left: 21.6px; /* the Podcast/Production/Drone column has its own left padding in production (2% of the ~1080px content width) -- not present on the other three columns */
}
@container (max-width: 450px) {
	.cwf-nav-menu__col--indent {
		padding-left: 0; /* production's 21.6px indent above only made sense
		                     distinguishing side-by-side columns; stacked in
		                     the single-column mobile layout it just left the
		                     Podcast/Social Media Content/Production Services
		                     titles out of alignment with Drone Cinematography
		                     above them. Client-reported. Left untouched at
		                     wider container widths, where columns are still
		                     side by side and the production-measured indent
		                     still applies. Must come after the base rule
		                     above -- same specificity, so source order (not
		                     just the @container match) decides the winner. */
	}
}

.cwf-nav-menu .cwf-nav-menu__title {
	display: block;
	font-family: var(--font-nav-title); /* Inter -- measured from production, not the site's Familjen Grotesk body font */
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--color-primary); /* yellow -- client request: primary page names (the "/ Section" links) yellow, subsections (.cwf-nav-menu__submenu) left white. Was #E7E7E7 (off-white), matching production; deliberate deviation now, not a correction. */
	text-decoration: none;
	margin-top: 12px;
}
.cwf-nav-menu .cwf-nav-menu__title:first-child { margin-top: 0; }
.cwf-nav-menu .cwf-nav-menu__title:hover,
.cwf-nav-menu .cwf-nav-menu__title:focus-visible {
	color: var(--color-white); /* was var(--color-primary) -- now that the title's default IS primary/yellow, hovering to the same color gave no visible feedback, so hover swaps to white instead (mirrors the old default/hover pair, just flipped) */
}

.cwf-nav-menu__submenu {
	list-style: none;
	margin: 4px 0 8px;
	padding: 0 0 0 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cwf-nav-menu .cwf-nav-menu__submenu a {
	font-family: var(--font-nav-submenu); /* Montserrat -- measured from production, not the site's Familjen Grotesk body font */
	font-size: 15px;
	font-weight: 400;
	text-transform: capitalize;
	color: #F0F0F0;
	text-decoration: none;
}
.cwf-nav-menu .cwf-nav-menu__submenu a:hover,
.cwf-nav-menu .cwf-nav-menu__submenu a:focus-visible {
	color: var(--color-primary);
}

/* .cwf-nav-menu__col--cta img / .cwf-nav-menu__email-btn rules removed --
   that 4th column (photo + "Email Us" button) was taken out of
   site-nav-menu.php per the client's request; this CSS has no matching
   markup left to style. See MIGRATION.md. */

/* The old @media (max-width: 1024px/767px) breakpoints for
   .cwf-nav-menu__grid are gone -- replaced by the @container rules
   above, which react to the actual panel width correctly on both
   mobile (full-screen) and desktop (half-page). See MIGRATION.md. */