/**
 * MemberPress Mega Menu (v1).
 *
 * Mobile-first; desktop from 1024px. Values follow the design-team#132 prototype.
 */

/* ===== Tokens ===== */
.mpmm-active {
	--mpmm-primary: #06429e;
	--mpmm-primary-darker: #053580;
	--mpmm-primary-5: #f3f6fa;
	--mpmm-primary-10: #e6ecf5;
	--mpmm-cyan: #01a9b2;
	--mpmm-turquoise: #03aba3;
	--mpmm-turquoise-darker: #03968f;
	--mpmm-turquoise-10: #e5f6f5;
	--mpmm-green: #31a27a;
	--mpmm-gradient: linear-gradient(90deg, #06429e 0%, #01a9b2 100%);
	--mpmm-white: #fff;
	--mpmm-neutral: #111;
	--mpmm-neutral-80: #333;
	--mpmm-neutral-60: #666;
	--mpmm-neutral-40: #999;
	--mpmm-neutral-20: #ddd;
	--mpmm-neutral-10: #f4f4f4;
	--mpmm-neutral-5: #fafafa;
	--mpmm-radius-card: 6px;
	--mpmm-radius-pill: 300px;
	--mpmm-font-body: "Sofia Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--mpmm-font-heading: "Minion Pro", Georgia, "Times New Roman", serif;
	--mpmm-header-h: 64px;
}

/* ===== Theme header overrides =====
 * custom.css makes every .wrap child flex: 1 and style.css forces .title-area to 55% width below
 * 1300px; both squash the bar. */
.mpmm-active .site-header {
	position: relative;
	z-index: 1000;
	height: var(--mpmm-header-h);
	padding: 0 12px 0 20px;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--mpmm-neutral-20);
}

/* min-height keeps the bar its full height where Customizer CSS sets .site-header { height: auto
 * !important } (1280-1300px); 100% of an auto height is auto. The 1px is the header's border. */
.mpmm-active .site-header > .wrap {
	height: 100%;
	min-height: calc(var(--mpmm-header-h) - 1px);
	max-width: none;
	flex-wrap: nowrap;
}

.mpmm-active .site-header .title-area {
	flex: 0 0 auto;
	width: auto !important;
	max-width: none;
	min-width: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	float: none;
}

.mpmm-active .site-header .custom-logo-link {
	display: block;
	max-height: none;
}

.mpmm-active .site-header .custom-logo {
	display: block;
	width: 140px;
	height: auto;
}

/* ===== Base ===== */
.mpmm {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	min-width: 0;
	font-family: var(--mpmm-font-body);
	color: var(--mpmm-neutral-80);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.mpmm a,
.mpmm a:hover,
.mpmm a:focus {
	color: inherit;
	text-decoration: none;
}

.mpmm ul,
.mpmm li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpmm p,
.mpmm h3,
.mpmm figure,
.mpmm blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.mpmm p {
	font-family: inherit;
}

/* Theme blockquote: 20–24px, weight 600, a decorative quote glyph and uppercase cite styles. */
.mpmm blockquote {
	font-size: inherit;
	font-weight: inherit;
	font-style: normal;
	line-height: inherit;
}

.mpmm blockquote::before {
	content: none;
}

.mpmm figcaption {
	margin: 0;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
}

.mpmm :focus-visible,
.mpmm .mpmm-tab:focus-visible,
.mpmm .mpmm-menu-button:focus-visible,
.mpmm .mpmm-drawer__close:focus-visible,
.mpmm .mpmm-accordion__button:focus-visible {
	outline: 2px solid var(--mpmm-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* No ring on mouse focus; the theme draws a black one on button:focus. */
.mpmm button:focus:not(:focus-visible) {
	outline: none;
}

/* Panels, accordion bodies and the drawer close with [hidden]; no theme rule may override it. */
.mpmm [hidden] {
	display: none !important;
}

/* ===== Theme button reset =====
 * custom.css:865 gives every <button> the orange CTA style (gradient, flex, auto margins,
 * z-index 999, pill radius) plus :hover and :active variants. Class selectors here (0,2,0 / 0,3,0)
 * beat the theme's (0,1,1 / 0,2,1) regardless of load order. */
.mpmm .mpmm-tab,
.mpmm .mpmm-menu-button,
.mpmm .mpmm-drawer__close,
.mpmm .mpmm-accordion__button {
	display: flex;
	align-items: center;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	line-height: inherit;
	text-transform: none;
	transform: none;
	z-index: auto;
	cursor: pointer;
}

/* The theme's :hover and :active only change background and color. Resetting the box here too
 * would beat each button's own padding/size rules (0,2,0) and make it jump on hover or tap. */
.mpmm .mpmm-tab:hover,
.mpmm .mpmm-menu-button:hover,
.mpmm .mpmm-drawer__close:hover,
.mpmm .mpmm-accordion__button:hover,
.mpmm .mpmm-tab:active,
.mpmm .mpmm-menu-button:active,
.mpmm .mpmm-drawer__close:active,
.mpmm .mpmm-accordion__button:active {
	background: none;
	color: inherit;
}

/* ===== Icons ===== */
.mpmm-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	vertical-align: middle;
}

.mpmm-icon--sm {
	width: 16px;
	height: 16px;
}

/* ===== Actions (cart, account, CTA, menu button) ===== */
.mpmm-actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
}

.mpmm-actions__account,
.mpmm-actions__cta {
	display: none;
}

.mpmm-account-link {
	padding: 10px 18px;
	border-radius: var(--mpmm-radius-card);
	font-size: 15px;
	font-weight: 600;
	transition: background 0.15s;
}

.mpmm a.mpmm-account-link:hover {
	background: var(--mpmm-primary-5);
}

.mpmm .mpmm-cta,
.mpmm .mpmm-cta:hover,
.mpmm .mpmm-cta:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	border-radius: var(--mpmm-radius-pill);
	background: var(--mpmm-gradient);
	color: var(--mpmm-white);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.mpmm .mpmm-cta:hover {
	background: linear-gradient(90deg, #006fac 0%, #05bcd6 100%), #0282c9;
}

.mpmm .mpmm-menu-button,
.mpmm .mpmm-drawer__close {
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	color: var(--mpmm-neutral-80);
}

.mpmm .mpmm-menu-button:hover,
.mpmm .mpmm-drawer__close:hover {
	background: var(--mpmm-primary-5);
	color: var(--mpmm-primary);
}

.mpmm-menu-button .mpmm-icon,
.mpmm-drawer__close .mpmm-icon {
	width: 24px;
	height: 24px;
}

/* ===== Cart =====
 * The theme's script only adds .active to the link and shows .mp-cart-count; it never touches the
 * <li>. So hide the link, never the <li>, or the cart would stay hidden for good. */
.mpmm #menu-item-cart {
	display: flex;
	align-items: center;
	width: auto;
	margin: 0;
	padding: 0;
}

.mpmm #menu-item-cart a:not(.active) {
	display: none;
}

/* ===== Link items (panels + accordions) ===== */
.mpmm-panel__subtitle {
	margin-bottom: 24px !important;
	color: var(--mpmm-neutral-40);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.mpmm .mpmm-section__label {
	margin-bottom: 14px;
	color: var(--mpmm-primary);
	font-family: var(--mpmm-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.5;
	text-transform: uppercase;
}

.mpmm .mpmm-section__subtitle {
	margin: -10px 0 14px;
	color: var(--mpmm-neutral-60);
	font-size: 12px;
}

.mpmm-section + .mpmm-section {
	margin-top: 24px;
}

.mpmm .mpmm-section__note {
	padding: 8px 12px;
	color: var(--mpmm-neutral-40);
	font-size: 12px;
	font-weight: 600;
}

.mpmm .mpmm-link {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 10px 12px;
	border-radius: var(--mpmm-radius-card);
	transition: background 0.15s;
}

.mpmm .mpmm-link:hover {
	background: var(--mpmm-primary-5);
}

.mpmm-link__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 10px;
	background: var(--mpmm-neutral-10);
	transition: background 0.15s, color 0.15s;
}

.mpmm-tone--primary {
	color: var(--mpmm-primary);
}

.mpmm-tone--turquoise {
	color: var(--mpmm-turquoise);
}

.mpmm-link:hover .mpmm-link__icon {
	background: var(--mpmm-primary-10);
}

.mpmm-link:hover .mpmm-tone--turquoise {
	color: var(--mpmm-turquoise-darker);
}

.mpmm-link__text {
	display: block;
	flex: 1;
	min-width: 0;
}

.mpmm-link__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--mpmm-neutral);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.mpmm-link__desc {
	display: block;
	margin-top: 2px;
	color: var(--mpmm-neutral-60);
	font-size: 13px;
	line-height: 1.4;
}

/* Group item (comparisons): the row itself isn't a link, so no row hover; its inline links are. */
.mpmm .mpmm-link--group:hover {
	background: none;
}

.mpmm-link--group:hover .mpmm-link__icon {
	background: var(--mpmm-neutral-10);
}

.mpmm-link--group:hover .mpmm-tone--turquoise {
	color: var(--mpmm-turquoise);
}

.mpmm .mpmm-link__links {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.7;
}

/* The dot trails each link, so a wrapped line starts flush, never with a dot. */
.mpmm .mpmm-link__links li:not(:last-child)::after {
	content: "·";
	margin: 0 6px;
	color: var(--mpmm-neutral-40);
}

.mpmm .mpmm-link__links a {
	color: var(--mpmm-neutral-60);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mpmm .mpmm-link__links a:hover {
	color: var(--mpmm-primary);
}

/* ===== Badges ===== */
.mpmm-badge {
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
}

.mpmm-badge--popular {
	background: var(--mpmm-primary-10);
	color: var(--mpmm-primary);
}

.mpmm-badge--new {
	background: var(--mpmm-turquoise-10);
	color: var(--mpmm-turquoise-darker);
}

.mpmm-badge--growth {
	background: #fef3cd;
	color: #9f580a;
}

/* ===== Panel footer link ===== */
.mpmm .mpmm-footer-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mpmm-primary);
	font-size: 14px;
	font-weight: 700;
	transition: color 0.15s;
}

.mpmm .mpmm-footer-link:hover {
	color: var(--mpmm-primary-darker);
}

.mpmm-footer-link .mpmm-icon {
	transition: transform 0.15s;
}

.mpmm-footer-link:hover .mpmm-icon {
	transform: translateX(3px);
}

/* ===== Mobile (< 1024px): header bar + drawer ===== */
.mpmm-nav,
.mpmm-backdrop {
	display: none;
}

.mpmm-drawer {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 0 0;
	z-index: 1100;
	display: flex;
	flex-direction: column;
	background: var(--mpmm-white);
}

.mpmm-drawer__header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 12px 0 20px;
	border-bottom: 1px solid var(--mpmm-neutral-20);
}

.mpmm-drawer__header .custom-logo {
	display: block;
	width: 140px;
	height: auto;
}

.mpmm-drawer__nav {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mpmm-accordion__item {
	border-bottom: 1px solid var(--mpmm-neutral-20);
}

.mpmm .mpmm-accordion__button {
	justify-content: space-between;
	width: 100%;
	min-height: 56px;
	padding: 16px 20px;
	color: var(--mpmm-neutral-80);
	font-size: 17px;
	font-weight: 600;
	text-align: left;
}

/* A plain link (Pricing), laid out like the accordion buttons. */
.mpmm .mpmm-accordion__link {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 16px 20px;
	color: var(--mpmm-neutral-80);
	font-size: 17px;
	font-weight: 600;
	line-height: inherit;
}

.mpmm .mpmm-accordion__button[aria-expanded="true"] {
	color: var(--mpmm-primary);
}

.mpmm-accordion__chevron {
	color: var(--mpmm-neutral-40);
	transition: transform 0.25s, color 0.15s;
}

[aria-expanded="true"] > .mpmm-accordion__chevron {
	color: var(--mpmm-primary);
	transform: rotate(180deg);
}

.mpmm-accordion__panel {
	padding: 4px 20px 24px;
	background: var(--mpmm-neutral-5);
}

.mpmm-accordion__panel .mpmm-panel__subtitle {
	margin: 12px 0 16px !important;
	font-size: 11px;
	letter-spacing: 0.8px;
	line-height: 1.45;
}

.mpmm-accordion__panel .mpmm-section + .mpmm-section {
	margin-top: 20px;
}

.mpmm-accordion__panel .mpmm-section__label {
	margin-bottom: 6px;
	letter-spacing: 0.8px;
}

.mpmm-accordion__panel .mpmm-section__subtitle {
	margin: 0 0 8px;
}

.mpmm-accordion__panel .mpmm-link {
	gap: 12px;
	padding: 8px 0;
}

.mpmm-accordion__panel .mpmm-link:hover {
	background: transparent;
}

.mpmm-accordion__panel .mpmm-link__title {
	font-size: 15px;
	font-weight: 600;
}

.mpmm-accordion__panel .mpmm-footer-link {
	margin-top: 20px;
	padding: 4px 0;
}

/* The prototype's drawer leaves the "+ More industries" note out. */
.mpmm-drawer .mpmm-section__note {
	display: none;
}

.mpmm-drawer__footer {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	align-items: center;
	gap: 12px;
	padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--mpmm-neutral-20);
	background: var(--mpmm-white);
}

.mpmm .mpmm-cta--block {
	order: -1;
	width: 100%;
	padding: 14px 28px;
}

html.mpmm-drawer-open,
html.mpmm-drawer-open body {
	overflow: hidden;
}

/* Pins the page while the drawer is open; JS sets body's top to minus the scroll position. */
html.mpmm-drawer-open body {
	position: fixed;
	right: 0;
	left: 0;
	width: 100%;
}

/* The drawer can't stack above its header's z-index: 1000, so the header is lifted while the drawer
 * is open: over the WPConsent banner (900000) and the DocsBot widget (up to 1000001), which are inert
 * behind it, but under Popup Maker (1999999999), so a popup that opens meanwhile still shows. */
html.mpmm-drawer-open .mpmm-active .site-header {
	z-index: 1500000;
}

/* ===== Desktop (>= 1024px) ===== */
@media (min-width: 1024px) {
	.mpmm-active {
		--mpmm-header-h: 80px;
	}

	.mpmm-active .site-header {
		padding: 0 24px;
	}

	.mpmm-active .site-header .custom-logo {
		width: 190px;
	}

	.mpmm {
		justify-content: space-between;
	}

	.mpmm-nav {
		display: block;
		flex: 1;
	}

	.mpmm-tabs {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
	}

	.mpmm .mpmm-tab {
		position: relative;
		gap: 6px;
		padding: 10px 14px;
		border-radius: var(--mpmm-radius-card);
		color: var(--mpmm-neutral-80);
		font-size: 15px;
		font-weight: 600;
		transition: background 0.15s, color 0.15s;
	}

	.mpmm .mpmm-tab:hover,
	.mpmm .mpmm-tab[aria-expanded="true"] {
		background: var(--mpmm-primary-5);
		color: var(--mpmm-primary);
	}

	.mpmm .mpmm-tab[aria-expanded="true"]::after {
		content: "";
		position: absolute;
		right: 14px;
		bottom: -1px;
		left: 14px;
		height: 2px;
		border-radius: 2px;
		background: var(--mpmm-gradient);
	}

	.mpmm-tab__chevron {
		width: 14px;
		height: 14px;
		color: var(--mpmm-neutral-40);
		transition: transform 0.2s, color 0.15s;
	}

	.mpmm-tab:hover .mpmm-tab__chevron,
	.mpmm-tab[aria-expanded="true"] .mpmm-tab__chevron {
		color: var(--mpmm-primary);
	}

	.mpmm-tab[aria-expanded="true"] .mpmm-tab__chevron {
		transform: rotate(180deg);
	}

	.mpmm-actions {
		gap: 15px;
	}

	.mpmm-actions__account,
	.mpmm-actions__cta {
		display: list-item;
	}

	.mpmm-actions__menu,
	.mpmm-drawer {
		display: none !important;
	}

	/* Backdrop covers the page below the header; JS sets its top to the header's bottom edge. */
	.mpmm-backdrop {
		position: fixed;
		top: var(--mpmm-backdrop-top, var(--mpmm-header-h));
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		display: block;
		background: rgba(0, 0, 0, 0.6);
	}

	.mpmm-panel {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 2;
		padding: 28px 32px 20px;
		border-radius: 0 0 12px 12px;
		background: var(--mpmm-white);
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
		animation: mpmm-panel-in 0.22s ease-out;
	}

	.mpmm-panel__cols {
		display: grid;
	}

	.mpmm-panel__cols--2 {
		grid-template-columns: 1fr 1fr;
	}

	.mpmm-panel__cols--3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.mpmm-panel__cols--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.mpmm-panel__cols--stories {
		grid-template-columns: 1fr 1fr 240px;
	}

	.mpmm-panel__col {
		min-width: 0;
		padding: 0 28px;
	}

	.mpmm-panel__col:first-child {
		padding-left: 0;
	}

	.mpmm-panel__col:last-child {
		padding-right: 0;
	}

	.mpmm-panel__col + .mpmm-panel__col {
		border-left: 1px solid var(--mpmm-neutral-20);
	}

	.mpmm-panel__footer {
		display: flex;
		align-items: center;
		margin-top: 24px;
		padding-top: 18px;
		border-top: 1px solid var(--mpmm-neutral-20);
	}

	/* Solutions: testimonial + stat */
	.mpmm .mpmm-testimonial {
		margin-bottom: 16px;
		padding: 20px;
		border: 1px solid var(--mpmm-neutral-20);
		border-radius: var(--mpmm-radius-card);
		background: var(--mpmm-neutral-10);
	}

	.mpmm .mpmm-testimonial__quote p {
		margin-bottom: 12px;
		font-weight: 400;
		color: var(--mpmm-neutral-80);
		font-family: var(--mpmm-font-heading);
		font-size: 14px;
		font-style: italic;
		line-height: 1.6;
	}

	.mpmm-testimonial__author {
		display: block;
		letter-spacing: normal;
		text-transform: none;
		color: var(--mpmm-neutral);
		font-size: 12px;
		font-weight: 700;
	}

	.mpmm-testimonial__role {
		display: block;
		letter-spacing: normal;
		text-transform: none;
		color: var(--mpmm-neutral-60);
		font-size: 11px;
	}

	.mpmm .mpmm-stat {
		padding: 24px 20px;
		border-radius: var(--mpmm-radius-card);
		background: var(--mpmm-gradient);
		color: var(--mpmm-white);
		text-align: center;
	}

	.mpmm-stat__number {
		display: block;
		margin-bottom: 6px;
		font-family: var(--mpmm-font-heading);
		font-size: 34px;
		font-weight: 700;
		line-height: 1.1;
	}

	.mpmm-stat__desc {
		display: block;
		font-size: 13px;
		opacity: 0.9;
	}
}

@media (min-width: 1241px) {
	.mpmm-active .site-header {
		padding: 0 40px;
	}

	.mpmm .mpmm-tab {
		padding: 10px 20px;
	}

	.mpmm .mpmm-tab[aria-expanded="true"]::after {
		right: 20px;
		left: 20px;
	}

	.mpmm-panel {
		padding: 32px 48px 24px;
	}

	.mpmm-panel__cols--stories {
		grid-template-columns: 1fr 1fr 280px;
	}
}

@keyframes mpmm-panel-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpmm *,
	.mpmm *::before,
	.mpmm *::after {
		transition: none !important;
		animation: none !important;
	}
}