/**
 * Styles for the Championworks Fullscreen Menu Elementor widget.
 *
 * Below 1000px, a trigger button (hamburger bars that morph into an X via
 * pure CSS transforms, no icon-swapping JS) toggles a fullscreen overlay
 * panel. At 1000px and above, the trigger is hidden and inline versions of
 * both the menu (cw-fm__inline-links) and the Buttons repeater
 * (cw-fm__inline-buttons) show instead — same content, each rendered a
 * second time in the PHP with its own wrapper class so it can be styled
 * independently of the panel's copy; the panel markup stays in the DOM
 * but is simply never opened at that width.
 * The panel is positioned with `top: var(--cw-fm-header-height)` instead
 * of `top:0` — set by fullscreen-menu.js to the live .main-header height
 * — so it never overlaps the header row at all. That sidesteps z-index
 * stacking fights with sibling header widgets (logo, CTA button)
 * entirely: there's simply no shared screen space to contend over.
 * Colors/typography/spacing come from Elementor's control CSS; this file
 * only handles structural layout and the open/close mechanics.
 */

.cw-fm {
	position: relative;
	display: inline-block;
}

/*
 * Responsive split: below 1000px only the trigger button shows, opening
 * the fullscreen panel (mobile behavior, unchanged). At 1000px and above
 * the trigger is hidden and the same menu appears instead as a plain
 * inline horizontal list, plus the same Buttons (Content tab) rendered a
 * second time next to it — no fullscreen panel involved on desktop at
 * all, it stays in the DOM (openable only via the now-hidden trigger)
 * but is simply never triggered.
 */
.cw-fm__inline,
.cw-fm__inline-buttons {
	display: none !important;
}

@media ( min-width: 1000.02px ) {
	.cw-fm {
		display: flex;
		align-items: center;
		gap: 28px;
	}

	.cw-fm__inline {
		display: block !important;
	}

	.cw-fm__inline-buttons {
		display: flex !important;
	}

	.cw-fm__trigger {
		display: none !important;
	}
}

@media ( max-width: 1000px ) {
	.cw-fm__trigger {
		display: inline-flex !important;
	}
}

.cw-fm__inline-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.cw-fm__inline-links li {
	margin: 0;
}

.cw-fm__inline-links a {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	text-decoration: none;
	opacity: .75;
	transition: opacity .3s ease, color .3s ease;
}

.cw-fm__inline-links a:hover {
	opacity: 1;
}

.cw-fm__inline-links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: currentColor;
	transform: scaleX( 0 );
	transform-origin: right;
	transition: transform .5s cubic-bezier( .16, 1, .3, 1 );
}

.cw-fm__inline-links a:hover::after {
	transform: scaleX( 1 );
	transform-origin: left;
}

/* wp_nav_menu() adds this class to the current page's <li> automatically. */
.cw-fm__inline-links li.current-menu-item > a {
	color: var( --cw-fm-inline-active-color, inherit );
	opacity: 1;
}

/* Sub-menus (if the selected WP menu has nested items) — kept simple:
   shown inline, indented, next to their parent. */
.cw-fm__inline-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cw-fm__inline-buttons {
	align-items: center;
	flex-wrap: wrap;
}

.cw-fm__inline-button {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	text-decoration: none;
	line-height: 1;
}

.cw-fm__trigger {
	display: inline-flex;
	align-items: center;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	font: inherit;
}

.cw-fm__trigger-icon {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
}

.cw-fm__bar {
	position: absolute;
	left: 0;
	right: 0;
	background: currentColor;
	transition: transform .3s ease, opacity .3s ease;
}

.cw-fm.is-open .cw-fm__bar:nth-child( 1 ) {
	transform: translateY( var( --cw-fm-bar-gap, 8px ) ) rotate( 45deg );
}

.cw-fm.is-open .cw-fm__bar:nth-child( 2 ) {
	opacity: 0;
}

.cw-fm.is-open .cw-fm__bar:nth-child( 3 ) {
	transform: translateY( calc( -1 * var( --cw-fm-bar-gap, 8px ) ) ) rotate( -45deg );
}

.cw-fm__trigger-label {
	display: inline-block;
}

.cw-fm__label-close {
	display: none;
}

.cw-fm.is-open .cw-fm__label-open {
	display: none;
}

.cw-fm.is-open .cw-fm__label-close {
	display: inline;
}

.cw-fm__panel {
	position: fixed;
	top: var( --cw-fm-header-height, 0px );
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var( --cw-fm-speed, 400ms ) ease, visibility var( --cw-fm-speed, 400ms ) ease;
}

.cw-fm.is-open .cw-fm__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.cw-fm__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.cw-fm__overlay {
	position: absolute;
	inset: 0;
}

.cw-fm__content {
	position: relative;
	z-index: 2;
	height: 100%;
	width: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.cw-fm__links {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.cw-fm__links li {
	margin: 0;
	width: 100%;
	text-align: center;
}

.cw-fm__links li:last-child {
	border-bottom: 0;
}

.cw-fm__links a {
	display: inline-block;
	text-decoration: none;
	transition: color .25s ease;
}

/* wp_nav_menu() adds this class to the current page's <li> automatically. */
.cw-fm__links li.current-menu-item > a {
	color: var( --cw-fm-active-color, inherit );
}

/* Sub-menus (if the selected WP menu has nested items) — kept simple:
   shown inline, indented, below their parent. */
.cw-fm__links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cw-fm__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.cw-fm__button {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	text-decoration: none;
	line-height: 1;
}

.cw-fm__button svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex-shrink: 0;
}