/* ==========================================================================
   FAQ: global "Questions? We have answers" (heading left, accordion right,
   Movers reference) and inline FAQ runs inside articles. Questions stay real
   headings; site.js turns them into accordion buttons (content in HTML for SEO).
   ========================================================================== */
.mm-faq__layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.mm-faq__layout > * { margin: 0 !important; }
.mm-faq__aside { position: sticky; top: calc(var(--wp--custom--header--compact) + 32px); display: grid; gap: 1.5rem; justify-items: start; }
.mm-faq__aside > * { margin: 0 !important; }
.mm-faq__list { border-top: 1px solid var(--mm-line); }
.mm-faq__item { border-bottom: 1px solid var(--mm-line); padding: 6px 0; }
.mm-faq__item > * { margin: 0 !important; }
.mm-faq__q {
	font-family: var(--mm-cond) !important;
	font-weight: 700 !important;
	font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important;
	letter-spacing: .03em !important;
	line-height: 1.3 !important;
	text-transform: uppercase;
	color: var(--mm-navy) !important;
	padding: 18px 0;
}
p.mm-faq__q { font-size: 1.0625rem !important; }
.mm-faq__a { display: grid; gap: .75rem; padding: 0 56px 22px 0; color: var(--mm-ink); }
.mm-faq__a > * { margin: 0 !important; }
.mm-faq__short { font-family: var(--mm-display); font-size: 1.5rem; line-height: 1; text-transform: uppercase; color: var(--mm-orange); }

/* JS accordion */
.mm-faq__btn {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	cursor: pointer;
}
.mm-faq__btn::after {
	content: "";
	flex: 0 0 44px;
	height: 44px;
	border: 1.5px solid var(--mm-line);
	background: var(--mm-navy);
	-webkit-mask: var(--mm-i-plus) center / 16px no-repeat, linear-gradient(#000 0 0);
	mask: var(--mm-i-plus) center / 16px no-repeat, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	transition: transform .45s var(--mm-ease), background-color .3s;
}
.mm-faq__btn:hover::after { background: var(--mm-orange); }
.mm-faq__legacy { display: none; }
.mm-faq__btn:focus-visible { outline: 2px solid var(--mm-orange); outline-offset: 4px; }
.mm-faq__item.is-collapsible .mm-faq__a { overflow: hidden; height: 0; padding-bottom: 0; opacity: 0; transition: height .5s var(--mm-ease), opacity .4s, padding .5s var(--mm-ease); }
.mm-faq__item.is-collapsible.is-open .mm-faq__a { height: auto; padding-bottom: 22px; opacity: 1; }
.mm-faq__item.is-open .mm-faq__btn::after { background: var(--mm-orange); -webkit-mask-image: var(--mm-i-minus), linear-gradient(#000 0 0); mask-image: var(--mm-i-minus), linear-gradient(#000 0 0); }
@supports not (interpolate-size: allow-keywords) {
	.mm-faq__item.is-collapsible .mm-faq__a { display: none; height: auto; }
	.mm-faq__item.is-collapsible.is-open .mm-faq__a { display: grid; }
}

/* Inline FAQ inside an article */
.mm-faq--inline { margin-top: 2.4em !important; padding: clamp(24px, 3vw, 40px); background: var(--mm-sand); }
.mm-faq--inline > .mm-faq__title { font-size: var(--wp--preset--font-size--heading-md) !important; margin-bottom: .6em !important; }
.mm-faq--inline .mm-faq__item:first-of-type { border-top: 1px solid var(--mm-line); }
.mm-faq--inline .mm-faq__a { padding-right: 0; }

@media (max-width: 900px) {
	.mm-faq__layout { grid-template-columns: 1fr; }
	.mm-faq__aside { position: static; }
}
