/* Madrose Media — Fairlington Dental blog FAQ accordion
   Palette pulled from fairlingtondental.com:
     navy   #1C244B  (H1 color)
     slate  #405464  (existing post-title banner background — reused here
                       on purpose so the FAQ section feels native to the
                       site rather than a bolted-on component)
     green  #47A248  (button / logo / leaf accent color)
   Headings use Montserrat, matching the rest of the site (already enqueued
   by the theme — not loaded again here). */

.mm-faq {
	--mm-bg: #405464;
	--mm-bg-soft: #4B6173;
	--mm-text: #FFFFFF;
	--mm-text-dim: #D3DAE0;
	--mm-accent: #5FBB60;
	--mm-rule: rgba(255, 255, 255, 0.16);
	--mm-radius: 6px;

	background: var(--mm-bg);
	color: var(--mm-text);
	padding: 64px 24px;
	margin: 56px 0;
	border-radius: var(--mm-radius);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mm-faq__inner { max-width: 720px; margin: 0 auto; }

.mm-faq__eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-accent);
	font-weight: 600;
	margin-bottom: 14px;
}

.mm-faq__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: clamp(26px, 4vw, 34px);
	line-height: 1.2;
	margin: 0 0 12px;
	color: var(--mm-text);
}

.mm-faq__subtitle {
	font-size: 16px;
	line-height: 1.6;
	color: var(--mm-text-dim);
	margin: 0 0 40px;
	max-width: 52ch;
}

.mm-faq__list { border-top: 1px solid var(--mm-rule); }

.mm-faq__item { border-bottom: 1px solid var(--mm-rule) !important; }

/* !important throughout — the theme's global Kit CSS applies broad
   rounded/filled styling to any bare <button> (same issue hit earlier
   with headings and links), which otherwise wins the cascade regardless
   of load order and turns this into a green pill button. */
.mm-faq__question {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	text-align: left !important;
	padding: 22px 4px !important;
	margin: 0 !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 600 !important;
	font-size: 17px !important;
	line-height: 1.4 !important;
	color: var(--mm-text) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: color 0.2s ease !important;
}
.mm-faq__question:hover { color: var(--mm-accent) !important; background: none !important; }
.mm-faq__question:focus-visible {
	outline: 2px solid var(--mm-accent);
	outline-offset: 4px;
}

/* Chevron in a colored circle badge — the old leaf-shaped inline SVG is
   hidden here rather than removed from markup, so this fix applies
   retroactively to posts already converted (their post_content still
   has the old <svg> baked in) without needing to re-run the conversion. */
.mm-faq__icon {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mm-accent) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: transform 0.32s ease;
}
.mm-faq__icon svg { display: none !important; }
.mm-faq__icon::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: rotate(45deg) translate(-1px, -1px);
}
.mm-faq__item.is-open .mm-faq__icon { transform: rotate(180deg); }

.mm-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.32s ease;
}
.mm-faq__item.is-open .mm-faq__answer { grid-template-rows: 1fr; }

.mm-faq__answer-inner { overflow: hidden; }

.mm-faq__answer p {
	margin: 0 0 22px;
	padding-right: 42px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--mm-text-dim);
}

.mm-faq__answer a,
.mm-faq__answer a:visited {
	color: #5FBB60 !important;
	text-decoration: underline !important;
}
.mm-faq__answer a:hover { color: #ffffff !important; }

@media (prefers-reduced-motion: reduce) {
	.mm-faq__answer,
	.mm-faq__icon,
	.mm-faq__question { transition: none; }
}

@media (max-width: 560px) {
	.mm-faq { padding: 44px 18px; }
	.mm-faq__question { font-size: 16.5px; padding: 18px 2px; }
}