/* =========================================
   C4SM Mobile Menu – Base Layout v1.1.3
   Off-canvas panel + overlay
   ========================================= */

/* Overlay */
.c4sm-mm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s;
	z-index: 999998 !important;
}

/* Panel container */
.c4sm-mm-panel {
	position: fixed;
	top: 0;
	right: 0;

	/* Use classic viewport first, then dynamic where supported */
	height: 100vh;
	height: 100dvh;

	width: 80%;
	max-width: 360px;

	transform: translateX(100%);
	transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
	z-index: 999999 !important;

	display: flex;
	flex-direction: column;

	box-sizing: border-box;

	/* Only account for safe area, no big manual padding here */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Open state */
.c4sm-mm-overlay.is-open {
	opacity: 1;
	visibility: visible;
}
.c4sm-mm-panel.is-open {
	transform: translateX(0);
}

/* Closing state (iOS-ish feel) */
.c4sm-mm-panel.is-closing {
	transition: transform 260ms cubic-bezier(0.4, 0.0, 0.2, 1) 80ms !important;
}
.c4sm-mm-overlay.is-closing {
	transition:
		opacity 200ms cubic-bezier(0.4, 0.0, 0.2, 1),
		visibility 0s linear 200ms;
}

/* Lock body scroll when open */
body.c4sm-mm-open {
	overflow: hidden;
}

/* Header row */
.c4sm-mm-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px 14px;
	border-bottom: 0;
	font-family: 'DM Sans', sans-serif;
	position: relative;
}

/* NAV + LEVELS ---------------------------------- */

.c4sm-mm-nav {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 8px 0 16px;

	/* Extra breathing room at the bottom so
	   sticky cart + CTA sit above mobile browser chrome */
	padding-bottom: 80px;
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
}

/* Each level is a <ul> */
.c4sm-mm-level {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
}
.c4sm-mm-level.is-active {
	display: block;
}

/* Base list items */
.c4sm-mm-level > li {
	border-bottom: 1px solid #f0f0f0;
}
.c4sm-mm-level > li:last-child {
	border-bottom: none;
}

/* Wrap LI contents so we can position the drill button */
.c4sm-mm-item-inner {
	position: relative;
	display: block;
}

/* Drill button for items with children */
.c4sm-mm-drill {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: none;
	padding: 4px 6px;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
}

/* Submenus (initially hidden; JS re-parents them) */
.c4sm-mm-level li ul.sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Only on small screens */
@media (min-width: 981px) {
	.c4sm-mm-overlay,
	.c4sm-mm-panel {
		display: none;
	}
}

/* ==========================================
   Accessibility Helpers
   ========================================== */

/* Visually hidden but screen-reader accessible */
.c4sm-mm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus ring for keyboard users only */
.c4sm-mm-panel button:focus-visible,
.c4sm-mm-panel a:focus-visible {
	outline: 2px solid #f6d85b;         /* light gold */
	outline-offset: 3px;
}

/* ==========================================
   Theme Variables (Dark Panel)
   ========================================== */

:root {
	--c4sm-mm-bg: #000000;              /* panel background */
	--c4sm-mm-text-heading: #ffffff;
	--c4sm-mm-text-item: #e8c234;       /* gold */
	--c4sm-mm-text-item-hover: #f6d85b;
	--c4sm-mm-border-divider: #2a2a2a;  /* subtle divider */
	--c4sm-mm-close: #e8c234;           /* close X */
	--c4sm-mm-arrow: #e8c234;           /* drill arrow */
	--c4sm-mm-back: #ffffff;            /* back text */
	--c4sm-mm-back-icon: #e8c234;       /* back arrow icon */
	--c4sm-mm-panel-border: #ffffff;    /* left border on panel */

	--c4sm-mm-icon-size: 24px;          /* top-level SVG icon size */
}

/* Apply dark theme to panel */
.c4sm-mm-panel {
	background: var(--c4sm-mm-bg) !important;
	border-left: 2px solid var(--c4sm-mm-panel-border);
}

/* Global font for panel */
#c4sm-mm-panel,
#c4sm-mm-panel * {
	font-family: 'DM Sans', sans-serif !important;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
}

/* ==========================================
   Header Typography & Gradient Accent
   ========================================== */

/* Title */
.c4sm-mm-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--c4sm-mm-text-heading) !important;
	line-height: 1.3;
	text-transform: none;
}

/* Back button */
.c4sm-mm-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: none;
	padding: 6px 8px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	color: var(--c4sm-mm-back) !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.c4sm-mm-back.is-visible {
	opacity: 1;
	pointer-events: auto;
}
.c4sm-mm-back[disabled] {
	cursor: default;
}

.c4sm-mm-back__icon {
	font-size: 18px;
	font-weight: 600;
	margin-right: 4px;
	color: var(--c4sm-mm-back-icon) !important;
}

/* Premium centre-bright gradient line under header */
.c4sm-mm-panel__header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(
		to right,
		rgba(0,0,0,0) 0%,
		#c7a82b 25%,
		#e8c234 50%,
		#c7a82b 75%,
		rgba(0,0,0,0) 100%
	);
}

/* ==========================================
   Menu Item Typography & Colours
   ========================================== */

/* Base styling for ALL menu items (all levels) */
.c4sm-mm-level > li > a,
.c4sm-mm-item-inner > a {
	display: block;
	padding: 14px 18px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;

	color: var(--c4sm-mm-text-item) !important;
	background: transparent !important;
}

/* Larger font for top-level items (root level only) */
#c4sm-mm-panel .c4sm-mm-level.is-root > li > a,
#c4sm-mm-panel .c4sm-mm-level.is-root > li > .c4sm-mm-item-inner > a {
	font-size: 20px !important;
}

/* Hover / focus for ALL levels */
.c4sm-mm-level > li > a:hover,
.c4sm-mm-level > li > a:focus,
.c4sm-mm-item-inner > a:hover,
.c4sm-mm-item-inner > a:focus {
	background: rgba(255,255,255,0.08) !important;
	color: var(--c4sm-mm-text-item-hover) !important;
}

/* Visited links keep gold */
.c4sm-mm-level > li > a:visited {
	color: var(--c4sm-mm-text-item) !important;
}

/* List item separators use dark theme colour */
.c4sm-mm-level > li {
	border-bottom: 1px solid var(--c4sm-mm-border-divider) !important;
}
.c4sm-mm-level > li:last-child {
	border-bottom: none !important;
}

/* Drill arrow colour */
.c4sm-mm-drill {
	font-size: 20px;
	font-weight: 600;
	color: var(--c4sm-mm-arrow) !important;
	padding: 0 18px;
}
.c4sm-mm-item-inner:hover .c4sm-mm-drill {
	color: var(--c4sm-mm-text-item-hover) !important;
}

/* ==========================================
   Sub-Level Indentation & Gold Left Accent
   ========================================== */

/* Indent second+ levels */
.c4sm-mm-level:not(.is-root) > li > a {
	position: relative;
	padding-left: 32px !important; /* indent */
}

/* Gold accent bar on left for sub-level items */
.c4sm-mm-level:not(.is-root) > li > a::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 60%;
	background-color: #e8c234;
	border-radius: 2px;
	opacity: 0.8;
	pointer-events: none;
}

/* Hover state for gold accent */
.c4sm-mm-level:not(.is-root) > li > a:hover::before {
	opacity: 1;
	height: 75%;
	background-color: #f6d85b;
}

/* Slight tweak to drill on sub-levels */
.c4sm-mm-level:not(.is-root) .c4sm-mm-drill {
	margin-right: 6px;
}

/* ==========================================
   Top-Level SVG Icons
   Items with classes: c4sm-mm-icon-about, etc.
   ========================================== */

/* Top-level items with icon class: extra left padding for icon gap */
#c4sm-mm-panel .c4sm-mm-level.is-root > li[class*="c4sm-mm-icon-"] > a,
#c4sm-mm-panel .c4sm-mm-level.is-root > li[class*="c4sm-mm-icon-"] > .c4sm-mm-item-inner > a {
	position: relative;
	padding-left: calc(16px + var(--c4sm-mm-icon-size) + 10px) !important;
	/* 16px offset + icon width + ~10px gap */
}

/* Common icon slot (root level only) */
#c4sm-mm-panel .c4sm-mm-level.is-root > li[class*="c4sm-mm-icon-"] > a::before,
#c4sm-mm-panel .c4sm-mm-level.is-root > li[class*="c4sm-mm-icon-"] > .c4sm-mm-item-inner > a::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: var(--c4sm-mm-icon-size);
	height: var(--c4sm-mm-icon-size);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* Icon mappings */

/* ABOUT */
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-about > a::before,
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-about > .c4sm-mm-item-inner > a::before {
	background-image: url("/wp-content/uploads/c4sm-mobilemenu-icons/about.svg");
}

/* EDUCATION */
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-education > a::before,
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-education > .c4sm-mm-item-inner > a::before {
	background-image: url("/wp-content/uploads/c4sm-mobilemenu-icons/education.svg");
}

/* LEGISLATION */
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-legislation > a::before,
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-legislation > .c4sm-mm-item-inner > a::before {
	background-image: url("/wp-content/uploads/c4sm-mobilemenu-icons/legislation.svg");
}

/* MEMBERS */
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-members > a::before,
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-members > .c4sm-mm-item-inner > a::before {
	background-image: url("/wp-content/uploads/c4sm-mobilemenu-icons/members.svg");
}

/* SHOP */
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-shop > a::before,
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-shop > .c4sm-mm-item-inner > a::before {
	background-image: url("/wp-content/uploads/c4sm-mobilemenu-icons/shop.svg");
}

/* NEWS */
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-news > a::before,
#c4sm-mm-panel .c4sm-mm-level.is-root > li.c4sm-mm-icon-news > .c4sm-mm-item-inner > a::before {
	background-image: url("/wp-content/uploads/c4sm-mobilemenu-icons/news.svg");
}

/* Hover: subtle brightness bump */
#c4sm-mm-panel .c4sm-mm-level.is-root > li[class*="c4sm-mm-icon-"] > a:hover::before,
#c4sm-mm-panel .c4sm-mm-level.is-root > li[class*="c4sm-mm-icon-"] > .c4sm-mm-item-inner > a:hover::before {
	filter: brightness(1.15);
}

/* ==========================================
   C4SM Mobile Menu – Cart Row
   (Row appears just above CTA)
   ========================================== */

.c4sm-mm-cart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;

	margin: 8px 16px 4px;
	padding: 10px 14px;

	text-decoration: none;
	border-radius: 8px;

	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--c4sm-mm-border-divider);

	color: var(--c4sm-mm-text-item) !important;
}

/* Ensure it’s visible on all mobile widths */
@media (max-width: 980px) {
	.c4sm-mm-cart {
		display: flex !important;
	}
}

/* Cart icon – SVG as background */
.c4sm-mm-cart-icon {
	width: 22px;
	height: 22px;

	background-image: url("/wp-content/uploads/c4sm-mobilemenu-icons/cart.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	flex-shrink: 0;
}

/* Cart label + count wrapper */
.c4sm-mm-cart-main {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
}

/* Text label */
.c4sm-mm-cart-label {
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Badge for item count */
.c4sm-mm-cart-count {
	min-width: 24px;
	height: 24px;
	padding: 0 6px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border-radius: 999px;
	background: var(--c4sm-mm-text-item);
	color: #000;
	font-size: 13px;
	font-weight: 700;
}

/* Cart row hover */
.c4sm-mm-cart:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--c4sm-mm-text-item-hover);
	color: var(--c4sm-mm-text-item-hover) !important;
}

/* ==========================================
   Bottom CTA (Become a Member)
   ========================================== */

.c4sm-mm-cta {
	position: sticky;

	/* Lift CTA further above bottom chrome + safe area */
	bottom: calc(env(safe-area-inset-bottom, 0px) + 0px);

	left: 0;
	right: 0;
	background: #000; /* match panel bg */
	padding: 16px;
	border-top: 1px solid var(--c4sm-mm-border-divider);
	z-index: 100;
}

.c4sm-mm-cta-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 14px 20px;
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;

	background: var(--c4sm-mm-close); /* C4SM gold */
	color: #000 !important;
	border-radius: 8px;

	text-decoration: none;
	transition: background 0.2s ease, box-shadow 0.15s ease;
}

.c4sm-mm-cta-btn:hover {
	background: var(--c4sm-mm-text-item-hover); /* lighter gold */
	box-shadow: 0 0 12px rgba(255, 215, 80, 0.25);
}

/* ==========================================
   Close Button – Final Override (no square)
   ========================================== */

/* Wipe ANY Divi / browser button styling on wrapper */
.c4sm-mm-close {
	all: unset !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	position: relative !important;
	width: 40px !important;
	height: 40px !important;

	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer !important;

	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Inner circular X */
.c4sm-mm-close__icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	height: 100% !important;

	font-size: 22px !important;
	font-weight: 600 !important;

	color: var(--c4sm-mm-close) !important;
	border: 2px solid var(--c4sm-mm-close) !important;
	border-radius: 50% !important;

	background: transparent !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover state */
.c4sm-mm-close:hover .c4sm-mm-close__icon {
	background: rgba(255,255,255,0.08) !important;
	color: var(--c4sm-mm-text-item-hover) !important;
	border-color: var(--c4sm-mm-text-item-hover) !important;
}