/**
 * MDH Divi Modules — front-end styles.
 *
 * Deliberately minimal and brand-neutral: colours inherit (currentColor) or use
 * soft neutrals, so a module picks up whatever the Divi decoration / brand sets on
 * it rather than fighting it. No build step — plain CSS enqueued by the plugin.
 */

/* Shared: visually-hidden text (WP ships .screen-reader-text on most themes, but
   a custom module must not depend on that). */
.mdh-faq .screen-reader-text,
.mdh-compare .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── mdh/faq ─────────────────────────────────────────────────────────────── */

.mdh-faq__heading {
	margin: 0 0 0.5em;
}

.mdh-faq__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mdh-faq__item:last-child {
	border-bottom: 0;
}

.mdh-faq__question {
	cursor: pointer;
	padding: 0.9em 0;
	font-weight: 600;
	list-style: none;          /* hide the default marker; we draw our own */
	display: flex;
	align-items: center;
	gap: 0.6em;
}

/* Safari/Chrome default disclosure triangle */
.mdh-faq__question::-webkit-details-marker {
	display: none;
}

/* Our own marker — rotates when open. */
.mdh-faq__question::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.mdh-faq__item[open] > .mdh-faq__question::before {
	transform: rotate(45deg);
}

.mdh-faq__question:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mdh-faq__answer {
	padding: 0 0 1.1em;
	opacity: 0.9;
}

.mdh-faq__answer > :first-child { margin-top: 0; }
.mdh-faq__answer > :last-child  { margin-bottom: 0; }

/* ── mdh/compare ─────────────────────────────────────────────────────────── */

/* The table scrolls INSIDE its own container so a wide matrix never forces the
   page body to scroll horizontally (the responsive-overflow rule this repo gates
   builds on). */
.mdh-compare__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mdh-compare__table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.mdh-compare__caption {
	caption-side: top;
	text-align: left;
	padding-bottom: 0.75em;
	opacity: 0.75;
	font-size: 0.9em;
}

.mdh-compare__table th,
.mdh-compare__table td {
	padding: 0.75em 1em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	vertical-align: middle;
}

.mdh-compare__col {
	font-weight: 700;
	white-space: nowrap;
}

.mdh-compare__feature {
	font-weight: 500;
	text-align: left;
}

.mdh-compare__cell {
	text-align: center;
}

/* The recommended/highlighted plan column. */
.mdh-compare__col.is-highlight,
.mdh-compare__cell.is-highlight {
	background: rgba(0, 0, 0, 0.035);
}

.mdh-compare__yes {
	font-weight: 700;
}

.mdh-compare__no {
	opacity: 0.45;
}