/**
 * Topic pages — the answers appended below a cluster's intro.
 *
 * Scoped under .mp-aod-cluster-answers so nothing touches the theme's own
 * rendering of the intro above it.
 */

.mp-aod-cluster-answers {
	--mp-berry: var(--wp--preset--color--berry, #8E2C4E);
	--mp-ink: #1A1A1A;
	--mp-muted: #645A60;
	--mp-line: #F1E0E6;
	--mp-wash: #FBF1F3;
	margin-top: 8px;
}

.mp-aod-answer-block {
	padding: 28px 0;
	border-top: 1px solid var(--mp-line);
	/*
	 * Anchor targets land under any sticky header rather than jammed against
	 * the top of the viewport.
	 */
	scroll-margin-top: 100px;
}

.mp-aod-answer-block:target {
	/*
	 * A brief, quiet highlight when deep-linked from search. The radius makes
	 * the wash a soft rounded card, and the 6px halo (the shadow follows the
	 * radius) keeps it hugging just this answer rather than slabbing wide.
	 */
	border-radius: 14px;
	animation: mp-aod-flash 1.6s ease-out;
}

@keyframes mp-aod-flash {
	0%, 30% {
		background: var(--mp-wash);
		box-shadow: 0 0 0 6px var(--mp-wash);
	}
	100% {
		background: transparent;
		box-shadow: 0 0 0 6px transparent;
	}
}

.mp-aod-answer-q {
	font-size: 1.1rem;
	line-height: 1.3;
	color: #000;
	margin: 0 0 12px;
	font-weight: 800;
	gap: 12px;
	letter-spacing: -.01em;
}

.mp-aod-answer-a {
	font-size: inherit; /* the theme's own paragraph size */
	line-height: 1.75;
	color: var(--mp-ink);
}

.mp-aod-answer-a p {
	margin: 0 0 1em;
}

.mp-aod-answer-a p:last-child {
	margin-bottom: 0;
}

.mp-aod-answer-a ul,
.mp-aod-answer-a ol {
	margin: 0 0 1em 1.2em;
}

.mp-aod-answer-a a {
	color: var(--mp-berry);
	text-decoration: none;
	transition: color .15s ease;
}

.mp-aod-answer-a a:hover {
	color: var(--mp-berry-hover);
}

/* The signpost, if a doctor used one inside the answer. */
.mp-aod-answer-a .mp-signpost {
	background: var(--mp-wash);
	border-left: 3px solid var(--mp-berry);
	border-radius: 0 12px 12px 0;
	padding: 16px 18px;
	margin: 20px 0;
}

.mp-aod-answer-by {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin: 16px 0 0;
	font-size: .85rem;
	color: var(--mp-muted);
}

.mp-aod-answer-by a,
.mp-aod-answer-doc {
	color: var(--mp-berry);
	font-weight: 700;
	text-decoration: none;
}

.mp-aod-answer-by a:hover {
	color: var(--mp-berry-hover);
}

.mp-aod-answer-date {
	color: var(--mp-muted);
	font-weight: 600;
}

/* Byline now sits between question and answer — tighten it to the heading. */
.mp-aod-answer-block .mp-aod-answer-by {
	margin: 4px 0 16px;
}

/* Standalone answer page — the byline sits under the body. */
.mp-aod-standalone-by {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--mp-line, #F1E0E6);
}

.mp-aod-standalone-by .mp-aod-answer-by {
	margin: 0;
}

/* The freshness line above the answers: count and last-updated date. */
.mp-aod-cluster-meta {
	font-size: .85rem;
	font-weight: 600;
	color: var(--mp-muted, #645A60);
	margin: 26px 0 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mp-line, #F1E0E6);
}

/* =========================================================================
 * Automatic table of contents — a visual twin of the MP Content Blocks TOC
 * (same values), self-contained here so cluster pages carry their own copy.
 * ====================================================================== */

.mp-aod-toc {
	--mp-berry: #8E2C4E;
	--mp-ink: #1A1A1A;
	--mp-black: #000;
	--mp-line: #F1E0E6;
	--mp-white: #fff;

	background: var(--mp-white);
	border: 1px solid var(--mp-line);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 24px;
}

.mp-aod-toc[open] {
	padding-bottom: 16px;
}

.mp-aod-toc-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	list-style: none;
	cursor: pointer;
	font-weight: 700;
	color: var(--mp-black);
}

.mp-aod-toc-summary::-webkit-details-marker {
	display: none;
}

.mp-aod-toc-label {
	font-weight: 700;
}

.mp-aod-toc-chev {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-right: 2px solid var(--mp-berry);
	border-bottom: 2px solid var(--mp-berry);
	transform: rotate(45deg);
	transition: transform .25s ease;
	margin-top: -4px;
}

.mp-aod-toc[open] .mp-aod-toc-chev {
	transform: rotate(-135deg);
	margin-top: 2px;
}

.mp-aod-toc-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mp-aod-toc-item {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

/* The berry bullet — same as the block plugin's bullets variant. */
.mp-aod-toc-item::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mp-berry);
	transform: translateY(-0.15em);
}

.mp-aod-toc-link {
	color: var(--mp-ink);
	text-decoration: none;
	font-size: .92rem;
	line-height: 1.5;
	font-weight: 600;
	transition: color .15s ease;
}

.mp-aod-toc-link:hover {
	color: var(--mp-berry);
}

/* Mobile: the question heading on topic pages, per page-CSS spec. */
@media (max-width: 600px) {
	.mp-aod-answer-q {
		font-size: 1rem;
		font-weight: 700;
		gap: 12px;
	}
}