/**
 * Mobile nav drawer — numbered list panel (reference design)
 *
 * @package WebCircleZ_Pro
 */

/* ——— Desktop: inline nav + pill toggle in panel foot ——— */
@media (min-width: 769px) {
	.wcz-nav-backdrop,
	.wcz-nav-panel-extras,
	.wcz-nav-panel-toolbar {
		display: none !important;
	}

	.wcz-nav-panel {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		width: 100%;
	}

	.wcz-nav-panel-inner {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		width: 100%;
	}

	.wcz-nav-panel-foot {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		margin-left: 4px;
	}

	.wcz-nav-panel-foot-label {
		display: none;
	}

	.wcz-nav-list--drawer > li > a::before,
	.wcz-nav-list--drawer > li > a::after {
		display: none !important;
	}
}

/* ——— Mobile drawer ——— */
@media (max-width: 768px) {
	.wcz-nav {
		position: fixed;
		inset: 0;
		z-index: 10001;
		display: block;
		padding: 0;
		background: transparent !important;
		border: none !important;
		transform: translateX(100%);
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
		overflow: hidden;
		pointer-events: none;
	}

	.wcz-nav.open {
		transform: translateX(0);
		pointer-events: auto;
	}

	.wcz-nav-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(15, 23, 42, 0.4);
		opacity: 0;
		transition: opacity 0.4s ease;
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
	}

	html.wcz-dark-mode .wcz-nav-backdrop {
		background: rgba(2, 6, 23, 0.65);
	}

	.wcz-nav.open .wcz-nav-backdrop {
		opacity: 1;
	}

	.wcz-nav-panel {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		height: 100dvh;
		max-height: 100dvh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #f4f7fa;
		box-shadow: -8px 0 40px rgba(15, 23, 42, 0.08);
	}

	html.wcz-dark-mode .wcz-nav-panel {
		background: #0a1018;
		box-shadow: -8px 0 40px rgba(0, 0, 0, 0.35);
	}

	.wcz-nav-panel-inner {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 16px;
		flex: 1;
		min-height: 0;
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
		padding: 4px clamp(20px, 6vw, 36px) 16px;
		overflow: hidden;
	}

	.wcz-nav-panel-toolbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex-shrink: 0;
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
		padding: 14px clamp(20px, 6vw, 36px) 8px;
		z-index: 2;
		background: inherit;
	}

	html:not(.wcz-dark-mode) .wcz-nav-panel-toolbar {
		background: #f4f7fa;
	}

	html.wcz-dark-mode .wcz-nav-panel-toolbar {
		background: #0a1018;
	}

	.wcz-nav-panel-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid rgba(0, 194, 229, 0.35);
		border-radius: 50%;
		background: rgba(0, 194, 229, 0.08);
		color: #0f2744;
		cursor: pointer;
		transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
	}

	html.wcz-dark-mode .wcz-nav-panel-close {
		color: #f1f5f9;
		background: rgba(0, 194, 229, 0.12);
		border-color: rgba(0, 194, 229, 0.28);
	}

	.wcz-nav-panel-close:hover {
		background: #00c2e5;
		border-color: #00c2e5;
		color: #ffffff;
		transform: scale(1.04);
	}

	.wcz-nav-panel-close:focus-visible {
		outline: 2px solid #00c2e5;
		outline-offset: 3px;
	}

	.wcz-nav-panel-toolbar-theme {
		color: #0f2744;
	}

	html.wcz-dark-mode .wcz-nav-panel-toolbar-theme {
		color: #f1f5f9;
	}

	.wcz-nav-panel-toolbar .wcz-theme-toggle-track {
		width: 68px;
		height: 34px;
	}

	.wcz-nav-panel-foot {
		display: none !important;
	}

	/* Numbered menu list with vertical rail */
	.wcz-nav-panel .wcz-nav-list--drawer {
		counter-reset: wcz-drawer;
		flex-direction: column;
		align-items: stretch !important;
		justify-content: flex-start;
		gap: 0;
		flex: 0 0 auto;
		width: 100%;
		margin: 0;
		padding: 0 0 0 28px;
		list-style: none;
		position: relative;
		border-left: 2px solid rgba(0, 194, 229, 0.35);
	}

	html.wcz-dark-mode .wcz-nav-panel .wcz-nav-list--drawer {
		border-left-color: rgba(0, 194, 229, 0.28);
	}

	.wcz-nav-panel .wcz-nav-list--drawer > li {
		counter-increment: wcz-drawer;
		width: 100%;
		height: auto;
		display: block;
		position: relative;
		border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	}

	html.wcz-dark-mode .wcz-nav-panel .wcz-nav-list--drawer > li {
		border-bottom-color: rgba(255, 255, 255, 0.08);
	}

	.wcz-nav-panel .wcz-nav-list--drawer > li:last-child {
		border-bottom: none;
	}

	/* Active dot on rail */
	.wcz-nav-panel .wcz-nav-list--drawer > li.current-menu-item::after,
	.wcz-nav-panel .wcz-nav-list--drawer > li.current_page_item::after,
	.wcz-nav-panel .wcz-nav-list--drawer > li.current-menu-ancestor::after {
		content: '';
		position: absolute;
		left: -33px;
		top: 50%;
		width: 10px;
		height: 10px;
		margin-top: -5px;
		border-radius: 50%;
		background: #00c2e5;
		box-shadow: 0 0 0 4px rgba(0, 194, 229, 0.2);
		z-index: 1;
		pointer-events: none;
	}

	.wcz-nav-panel .wcz-nav-list--drawer > li > a {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		margin: 0;
		padding: 11px 4px 11px 0;
		font-family: var(--wcz-font-display, system-ui, sans-serif);
		font-size: clamp(0.88rem, 3.4vw, 1rem);
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-align: left;
		color: #5a6b82 !important;
		background: transparent !important;
		position: relative;
		opacity: 1 !important;
	}

	html.wcz-dark-mode .wcz-nav-panel .wcz-nav-list--drawer > li > a {
		color: rgba(203, 213, 225, 0.72) !important;
	}

	.wcz-nav-panel .wcz-nav-list--drawer > li > a::before {
		content: counter(wcz-drawer, decimal-leading-zero);
		flex: 0 0 44px;
		font-size: clamp(0.82rem, 3.2vw, 0.92rem);
		font-weight: 700;
		letter-spacing: 0.06em;
		color: #8b9cb0;
	}

	html.wcz-dark-mode .wcz-nav-panel .wcz-nav-list--drawer > li > a::before {
		color: rgba(148, 163, 184, 0.75);
	}

	.wcz-nav-panel .wcz-nav-list--drawer > li > a::after {
		content: '\2192';
		position: static !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: auto !important;
		height: auto !important;
		margin-left: auto;
		flex-shrink: 0;
		font-size: 1.15rem;
		font-weight: 400;
		color: #8b9cb0;
		background: none !important;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		transform: none !important;
		transition: color 0.25s ease, transform 0.25s ease;
	}

	html.wcz-dark-mode .wcz-nav-panel .wcz-nav-list--drawer > li > a::after {
		color: rgba(148, 163, 184, 0.75);
		background: none !important;
		box-shadow: none !important;
	}

	.wcz-nav-panel .wcz-nav-list--drawer > li > a:hover,
	.wcz-nav-panel .wcz-nav-list--drawer > li.current-menu-item > a,
	.wcz-nav-panel .wcz-nav-list--drawer > li.current_page_item > a,
	.wcz-nav-panel .wcz-nav-list--drawer > li.current-menu-ancestor > a {
		color: #0f2744 !important;
	}

	html.wcz-dark-mode .wcz-nav-panel .wcz-nav-list--drawer > li > a:hover,
	html.wcz-dark-mode .wcz-nav-panel .wcz-nav-list--drawer > li.current-menu-item > a,
	html.wcz-dark-mode .wcz-nav-panel .wcz-nav-list--drawer > li.current_page_item > a,
	html.wcz-dark-mode .wcz-nav-panel .wcz-nav-list--drawer > li.current-menu-ancestor > a {
		color: #f1f5f9 !important;
	}

	.wcz-nav-panel .wcz-nav-list--drawer > li > a:hover::before,
	.wcz-nav-panel .wcz-nav-list--drawer > li.current-menu-item > a::before,
	.wcz-nav-panel .wcz-nav-list--drawer > li.current_page_item > a::before,
	.wcz-nav-panel .wcz-nav-list--drawer > li.current-menu-ancestor > a::before,
	.wcz-nav-panel .wcz-nav-list--drawer > li > a:hover::after,
	.wcz-nav-panel .wcz-nav-list--drawer > li.current-menu-item > a::after,
	.wcz-nav-panel .wcz-nav-list--drawer > li.current_page_item > a::after,
	.wcz-nav-panel .wcz-nav-list--drawer > li.current-menu-ancestor > a::after {
		color: #00c2e5;
		background: none !important;
		box-shadow: none !important;
		transform: none !important;
	}

	.wcz-nav-panel .wcz-nav-list--drawer > li > a:hover::after {
		transform: translateX(3px) !important;
	}

	/* Sub-menus */
	.wcz-nav-panel .wcz-nav-list--drawer .sub-menu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 0 8px 44px;
		margin: 0;
		min-width: 0;
		counter-reset: none;
		border-left: none !important;
	}

	.wcz-nav-panel .wcz-nav-list--drawer .menu-item-has-children.open > .sub-menu {
		display: block;
	}

	.wcz-nav-panel .wcz-nav-list--drawer .sub-menu a {
		display: block;
		padding: 10px 0;
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: rgba(90, 107, 130, 0.85) !important;
	}

	html.wcz-dark-mode .wcz-nav-panel .wcz-nav-list--drawer .sub-menu a {
		color: rgba(203, 213, 225, 0.65) !important;
	}

	.wcz-nav-panel .wcz-nav-list--drawer .sub-menu a::before,
	.wcz-nav-panel .wcz-nav-list--drawer .sub-menu a::after {
		display: none !important;
	}

	/* Panel extras */
	.wcz-nav-panel-extras {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 0;
		padding-top: 4px;
		flex: 0 0 auto;
	}

	.wcz-nav-panel-quote {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		align-self: flex-start;
		padding: 11px 22px;
		border: 2px solid #00c2e5;
		border-radius: 999px;
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		text-decoration: none;
		color: #0f2744 !important;
		background: transparent;
		transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
	}

	html.wcz-dark-mode .wcz-nav-panel-quote {
		color: #f1f5f9 !important;
	}

	.wcz-nav-panel-quote svg {
		color: #00c2e5;
		flex-shrink: 0;
	}

	.wcz-nav-panel-quote:hover {
		background: rgba(0, 194, 229, 0.1);
		box-shadow: 0 6px 20px rgba(0, 194, 229, 0.2);
	}

	.wcz-nav-panel-contact {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 12px;
	}

	.wcz-nav-panel-contact-divider {
		width: 1px;
		height: 36px;
		background: rgba(15, 23, 42, 0.1);
	}

	html.wcz-dark-mode .wcz-nav-panel-contact-divider {
		background: rgba(255, 255, 255, 0.12);
	}

	.wcz-nav-panel-contact-item {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 0.72rem;
		font-weight: 600;
		line-height: 1.35;
		color: #0f2744 !important;
		text-decoration: none;
		word-break: break-word;
	}

	html.wcz-dark-mode .wcz-nav-panel-contact-item {
		color: rgba(241, 245, 249, 0.88) !important;
	}

	.wcz-nav-panel-contact-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #00c2e5;
		color: #ffffff;
	}

	.wcz-nav-panel-social {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.wcz-nav-panel-social-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: rgba(0, 194, 229, 0.12);
		color: #0f2744;
		transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
	}

	html.wcz-dark-mode .wcz-nav-panel-social-link {
		background: rgba(0, 194, 229, 0.14);
		color: #e2e8f0;
	}

	.wcz-nav-panel-social-link:hover {
		background: #00c2e5;
		color: #ffffff;
		transform: translateY(-2px);
	}

	.wcz-nav-panel-copy {
		margin: 0;
		padding-top: 12px;
		border-top: 1px solid rgba(15, 23, 42, 0.08);
		font-size: 0.65rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-align: center;
		color: #8b9cb0;
	}

	html.wcz-dark-mode .wcz-nav-panel-copy {
		border-top-color: rgba(255, 255, 255, 0.08);
		color: rgba(148, 163, 184, 0.75);
	}

	.wcz-nav-panel-copy-brand {
		color: #00c2e5;
	}

	body.wcz-header-scrolled .wcz-nav {
		top: 0;
	}

	body.menu-open .wcz-header {
		z-index: 10002;
	}

	html.wcz-dark-mode .wcz-nav.is-open,
	html:not(.wcz-dark-mode) .wcz-nav.is-open {
		background: transparent !important;
		border: none !important;
	}
}