/* Coriam Mega Menu - Frontend Styles */

.cmm-has-mega {
	position: relative;
}

/* The <a> needs position:relative so the badge (position:absolute)
   anchors to the link itself, not some distant positioned ancestor.
   This works regardless of whether the theme renders the link as
   inline, block, or flex — the badge floats on top either way. */
.cmm-has-mega > a {
	position: relative;
}

/* Active-state underline: a thin line under just the link's own
   text, shown while the mega menu is open (hover, or the
   .cmm-panel-open / .cmm-mobile-open class on touch devices). This
   is a real <span> inserted by JS right after the link text — not a
   ::after pseudo-element — because pseudo-elements inherit the
   parent <a>'s full content-box width in many theme layouts (flex,
   full-width clickable nav items), which made the line either the
   wrong width or invisible depending on the theme's own CSS. A real
   inline span sized to its own text content is unambiguous.

   CRITICAL: position:absolute takes the underline OUT of normal
   document flow. An earlier version used display:block with
   margin-top, which added the line's height (plus margin) to
   .cmm-text-wrap's own height — and since .cmm-text-wrap sizes the
   <a>, that inflated the whole <li>, pushing the entire navbar
   taller. Being absolutely positioned, the underline now overlays
   below the text without affecting any element's box size. */
.cmm-active-underline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: var(--cmm-underline-thickness, 2px);
	background: var(--cmm-accent, #D8A24A);
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.cmm-has-mega:hover .cmm-active-underline,
.cmm-has-mega.cmm-panel-open .cmm-active-underline,
.cmm-has-mega.cmm-mobile-open .cmm-active-underline {
	opacity: 1;
}

.cmm-has-mega:hover > a,
.cmm-has-mega.cmm-panel-open > a,
.cmm-has-mega.cmm-mobile-open > a {
	color: var(--cmm-accent, #D8A24A);
}

.cmm-text-wrap {
	position: relative;
	display: inline-block;
}

/* Inline SVG chevron after the link text. vertical-align:middle
   keeps it level with the text baseline; margin-left gives a small
   gap so it doesn't crowd the last letter. stroke="currentColor" in
   the SVG means it automatically picks up the link's text color
   (including on hover/active, when the underline color also kicks in). */
.cmm-dropdown-arrow {
	display: inline-block;
	vertical-align: middle;
	margin-left: 4px;
	flex-shrink: 0;
}

/* The badge anchor is moved (by JS) inside .cmm-text-wrap, which is
   already position:relative and sized to exactly the text's own
   box. That makes "top-right corner of this box" unambiguous —
   unlike the earlier zero-size-span trick, whose position depended
   on font metrics and line-height and could land mid-word. */
.cmm-badge-anchor {
	position: absolute;
	top: 0;
	right: 0;
}

.cmm-badge-menu {
	position: absolute;
	top: -6px;
	right: 0;
	margin: 9px -2px 0 0px;
	transform: translate(40%, -100%);
	z-index: 2;
	pointer-events: none;
}

.cmm-panel {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	width: 100vw;
	max-width: 1200px;
	background: var(--cmm-box-bg, #fff);
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 12px 28px rgba(0,0,0,0.08);
	z-index: 999;
	padding: 28px;
	box-sizing: border-box;
	visibility: hidden;
}

.cmm-has-mega:hover .cmm-panel,
.cmm-has-mega.cmm-panel-open .cmm-panel {
	display: block;
	visibility: visible;
}

/* When an item has mega menu enabled AND isn't one of the leading
   "leave alone" items (see flag_enabled_items() in PHP), hide the
   theme's own native dropdown so only our .cmm-panel shows — having
   both visible at once was the duplicate-dropdown problem. This
   targets the common WordPress/theme submenu class names; if a
   theme uses something unusual, .cmm-panel is excluded via :not()
   so this rule never hides itself.
   Scoped to 481px and up only: below that, the plugin disables
   itself entirely (see the 480px media query further down), and if
   this rule weren't excluded there too, it would hide the theme's
   native dropdown on phones with nothing to replace it — leaving
   mega-menu-enabled items with no dropdown at all on small screens. */
@media (min-width: 481px) {
	.cmm-hide-native-dropdown > .sub-menu:not(.cmm-panel),
	.cmm-hide-native-dropdown > .dropdown-menu:not(.cmm-panel),
	.cmm-hide-native-dropdown > .children:not(.cmm-panel),
	.cmm-hide-native-dropdown > ul:not(.cmm-panel) {
		display: none !important;
	}
}

.cmm-panel.cmm-positioned {
	visibility: visible;
}

.cmm-panel-inner {
	display: grid;
	gap: 32px;
	align-items: start;
}

.cmm-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cmm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmm-cols-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cmm-col {
	display: flex;
	flex-direction: column;
}

.cmm-col-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.cmm-col-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--cmm-icon-bg, #F3E8D6);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cmm-col-icon i {
	font-size: 16px;
	color: var(--cmm-icon-color, #8A6D3B);
}

.cmm-col-title {
	font-size: var(--cmm-heading-font-size, 14px);
	font-weight: var(--cmm-heading-font-weight, 600);
	font-family: var(--cmm-heading-font-family, inherit);
	color: var(--cmm-heading, #2C2C2A);
}

.cmm-featured-heading {
	font-size: var(--cmm-featured-font-size, 14px);
	font-weight: var(--cmm-featured-font-weight, 600);
	font-family: var(--cmm-featured-font-family, inherit);
	color: var(--cmm-featured-text-color, #2C2C2A);
}

.cmm-divider {
	border-bottom: var(--cmm-divider-width, 1px) solid var(--cmm-divider-color, #E5E2D8);
	margin: 8px 0;
}

.cmm-col-links {
	display: flex;
	flex-direction: column;
	margin-bottom: 14px;
}

.cmm-link {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--cmm-link, #5F5E5A);
	font-size: var(--cmm-link-font-size, 13px);
	font-weight: var(--cmm-link-font-weight, 400);
	font-family: var(--cmm-link-font-family, inherit);
	padding: 7px 0;
	line-height: 1.4;
}

.cmm-link:hover {
	color: var(--cmm-accent, #D8A24A);
}

.cmm-link-text {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cmm-link-icon {
	flex-shrink: 0;
	display: inline-block;
}

body.cmm-icon-style-dot .cmm-link-icon {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cmm-link-icon-color, #D85A30);
}

body.cmm-icon-style-chevron .cmm-link-icon {
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--cmm-link-icon-color, #D85A30);
	border-right: 2px solid var(--cmm-link-icon-color, #D85A30);
	transform: rotate(45deg);
	margin-right: 2px;
}

body.cmm-icon-style-dash .cmm-link-icon {
	width: 8px;
	height: 1.5px;
	background: var(--cmm-link-icon-color, #D85A30);
}

body.cmm-icon-style-arrow .cmm-link-icon {
	width: 10px;
	height: 8px;
	background: var(--cmm-link-icon-color, #D85A30);
	clip-path: polygon(0 35%, 60% 35%, 60% 15%, 100% 50%, 60% 85%, 60% 65%, 0 65%);
}

body.cmm-icon-style-plus .cmm-link-icon {
	width: 9px;
	height: 9px;
	position: relative;
}
body.cmm-icon-style-plus .cmm-link-icon::before,
body.cmm-icon-style-plus .cmm-link-icon::after {
	content: "";
	position: absolute;
	background: var(--cmm-link-icon-color, #D85A30);
}
body.cmm-icon-style-plus .cmm-link-icon::before {
	left: 4px; top: 0; width: 1.5px; height: 9px;
}
body.cmm-icon-style-plus .cmm-link-icon::after {
	top: 4px; left: 0; height: 1.5px; width: 9px;
}

body.cmm-icon-style-square .cmm-link-icon {
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--cmm-link-icon-color, #D85A30);
}

body.cmm-icon-style-circle-outline .cmm-link-icon {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1.5px solid var(--cmm-link-icon-color, #D85A30);
	background: transparent;
}

body.cmm-icon-style-none .cmm-link-icon {
	display: none;
}

.cmm-badge {
	display: inline-block;
	flex-shrink: 0;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--cmm-badge-bg, #EF9F27);
	color: var(--cmm-badge-text, #412402);
	line-height: 1.4;
	white-space: nowrap;
	vertical-align: middle;
}

.cmm-browse-btn {
	display: inline-block;
	margin-top: auto;
	background: var(--cmm-btn-bg, #D8A24A);
	color: var(--cmm-btn-text, #4A2E0C);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	padding: var(--cmm-btn-pad-y, 8px) var(--cmm-btn-pad-x, 10px);
	border-radius: var(--cmm-btn-radius, 6px);
	text-align: center;
	width: fit-content;
}

.cmm-browse-btn:hover {
	background: var(--cmm-btn-hover-bg, #B8862F);
	color: var(--cmm-btn-hover-text, #FFFFFF);
	opacity: 1;
}

.cmm-featured-img-link {
	display: block;
}

.cmm-featured-img {
	width: 100%;
	aspect-ratio: var(--cmm-featured-ratio, 2/3);
	object-fit: cover;
	border-radius: 8px;
	display: block;
	margin-bottom: 10px;
}

.cmm-featured-img-placeholder {
	background: #f0efe9;
}

.cmm-featured-title-link {
	text-decoration: none;
}

.cmm-featured-title {
	font-size: var(--cmm-featured-title-font-size, 13px);
	font-weight: var(--cmm-featured-title-font-weight, 600);
	font-family: var(--cmm-featured-title-font-family, inherit);
	color: var(--cmm-featured-title-color, #2C2C2A);
	margin: 0 0 12px;
	line-height: 1.4;
}

@media (max-width: 1024px) {
	.cmm-cols-3, .cmm-cols-4, .cmm-cols-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tablet range (481px–782px): keep the accordion-style mobile panel,
   since the theme's own desktop hover menu typically doesn't fit
   this width either. */
@media (max-width: 782px) and (min-width: 481px) {
	.cmm-panel {
		position: static;
		width: 100%;
		max-width: none;
		box-shadow: none;
		border: none;
		padding: 16px;
		display: none;
	}
	.cmm-has-mega.cmm-mobile-open .cmm-panel {
		display: block;
	}
	.cmm-panel-inner {
		grid-template-columns: 1fr !important;
		gap: 20px;
	}
	.cmm-col {
		border-bottom: 1px solid var(--cmm-divider-color, #E5E2D8);
		padding-bottom: 16px;
	}
}

/* Phone range (480px and below): the plugin is fully disabled here.
   No injected panel, no badge, no underline, no chevron — the menu
   link behaves like a completely normal <a> and the theme's own
   mobile navigation (hamburger menu, off-canvas drawer, etc.) is
   left entirely in control. This avoids two competing "mobile menu"
   systems trying to handle the same tap. */
@media (max-width: 480px) {
	.cmm-panel,
	.cmm-badge-anchor,
	.cmm-badge-menu,
	.cmm-active-underline,
	.cmm-dropdown-arrow {
		display: none !important;
	}
}