/* SD Blog – Article With Summary widget
 * Two-column layout: sticky summary + repeatable sections.
 */

.sd-toc {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 48px;
	position: sticky;
}

/* ---------- Summary (left) ---------- */
.sd-toc__summary {
	flex: 0 0 30%;
	max-width: 30%;
	/* Stretch the column to the full row height so the sticky inner box has
	 * vertical room to travel. Without this, align-items:flex-start collapses
	 * the column to the inner's height and sticky can never engage. */
	align-self: stretch;
}

.sd-toc__summary--sticky {
	position: sticky;
	top: 40px;
}

/* Sticky guard.
 * position: sticky is silently disabled by any ancestor whose overflow is not
 * `visible`. Many themes set `overflow-x: hidden` on html/body to stop
 * horizontal scrolling, but that forces overflow-y to compute as `auto`,
 * turning html/body into scroll containers and breaking the sticky summary.
 * `clip` gives the same horizontal-overflow protection WITHOUT creating a
 * scroll container, so sticky keeps working. Remove this block if you prefer
 * to handle it at the theme level. */
html,
body {
	overflow-x: clip !important;
}

.sd-toc__summary-title {
	margin: 0 0 16px;
}

.sd-toc__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-toc__nav li {
	margin: 0 0 16px;
}

.sd-toc__nav li:last-child {
	margin-bottom: 0;
}

.sd-toc__nav a {
	display: block;
	text-decoration: none;
	line-height: 1.4;
	transition: color 0.15s ease-in-out;
}

.sd-toc__nav a:hover,
.sd-toc__nav a.is-active {
	color: #1aa179;
}

/* ---------- Content (right) ---------- */
.sd-toc__content {
	flex: 1 1 auto;
	min-width: 0;
}

.sd-toc__intro {
	margin-bottom: 40px;
}

.sd-toc__section {
	scroll-margin-top: 100px;
}

.sd-toc__section:not(:last-child) {
	margin-bottom: 40px;
}

.sd-toc__section-title {
	margin: 0 0 16px;
}

/* ---------- FAQ ---------- */
.sd-toc__faq-item {
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	overflow: hidden;
}

.sd-toc__faq-item:not(:last-child) {
	margin-bottom: 12px;
}

.sd-toc__faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.4;
	list-style: none; /* hide the default disclosure triangle */
}

.sd-toc__faq-question::-webkit-details-marker {
	display: none;
}

.sd-toc__faq-question::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
}

.sd-toc__faq-item[open] > .sd-toc__faq-question::after {
	content: '\2212'; /* minus sign (−), same width as + */
}

.sd-toc__faq-answer {
	padding: 0 20px 16px;
}

.sd-toc__faq-answer > :first-child {
	margin-top: 0;
}

.sd-toc__faq-answer > :last-child {
	margin-bottom: 0;
}

/* ---------- Author box ---------- */
.sd-toc__author {
	margin-top: 40px;
	padding: 24px 28px;
	border-radius: 6px;
	background-color: #3f6997;
	color: #fff;
}

.sd-toc__author-name {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.sd-toc__author-role {
	margin: 0;
	font-size: 14px;
	color: #e4ecf5;
}

/* ---------- Disclaimer ---------- */
.sd-toc__disclaimer {
	margin-top: 32px;
	font-family: 'Merriweather', sans-serif;
	font-size: 12px;
	line-height: 1.7;
	color: #777;
}

.sd-toc__disclaimer p:last-child {
	margin-bottom: 0;
}

/* ---------- Responsive: stack the summary on top ---------- */
@media (max-width: 1024px) {
	.sd-toc:not(.sd-toc--stack-never) {
		flex-direction: column;
	}

	.sd-toc:not(.sd-toc--stack-never) .sd-toc__summary {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
	}

	.sd-toc:not(.sd-toc--stack-never) .sd-toc__summary--sticky {
		position: static;
	}
}

/* Mobile-only stacking keeps two columns on tablet. */
@media (min-width: 768px) and (max-width: 1024px) {
	.sd-toc--stack-mobile {
		flex-direction: row;
	}

	.sd-toc--stack-mobile .sd-toc__summary {
		flex: 0 0 30%;
		max-width: 30%;
		width: auto;
	}

	.sd-toc--stack-mobile .sd-toc__summary--sticky {
		position: sticky;
	}
}


html {
	overflow-x: clip !important;
}

html body.single { overflow: visible !important; }