/**
 * MedicallyPrepped Monograph – frontend accordion styles.
 *
 * Every rule is scoped to .mp-monograph so nothing else on the site is styled.
 * Colours and spacing are custom properties; a theme can override them by
 * redefining the variables on .mp-monograph.
 */

/* Poppins is loaded from Google Fonts by the plugin (see Frontend::register_assets). */

/* Wrapper ---------------------------------------------------------------- */

.mp-monograph {
	--mp-monograph-border: #e2e8f0;
	--mp-monograph-bg: #ffffff;
	--mp-monograph-text: #1f2937;
	--mp-monograph-muted: #64748b;
	--mp-monograph-accent: #0f766e;
	--mp-monograph-accent-soft: #e6f4f2;
	--mp-monograph-hover: #f8fafc;
	--mp-monograph-radius: 10px;
	--mp-monograph-speed: 0.3s;

	box-sizing: border-box;
	clear: both;
	width: 100%;
	max-width: 100%;
	margin: 2.5em 0;
	color: var(--mp-monograph-text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.mp-monograph--font-poppins,
.mp-monograph--font-poppins .mp-monograph-button {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

.mp-monograph *,
.mp-monograph *::before,
.mp-monograph *::after {
	box-sizing: border-box;
}

.mp-monograph-heading {
	margin: 0 0 0.85em;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.mp-monograph-items {
	overflow: hidden;
	background: var(--mp-monograph-bg);
	border: 1px solid var(--mp-monograph-border);
	border-radius: var(--mp-monograph-radius);
}

.mp-monograph-item + .mp-monograph-item {
	border-top: 1px solid var(--mp-monograph-border);
}

/* Title / button --------------------------------------------------------- */

.mp-monograph-title {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.mp-monograph-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 1em 1.25em;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: 1.0625em;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	user-select: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mp-monograph-button:hover,
.mp-monograph-button:focus,
.mp-monograph-button:active {
	background: var(--mp-monograph-hover);
	color: inherit;
	box-shadow: none;
	outline: none;
	text-decoration: none;
}

.mp-monograph-button:focus-visible {
	outline: 2px solid var(--mp-monograph-accent);
	outline-offset: -2px;
}

.mp-monograph-title-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.mp-monograph-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	color: var(--mp-monograph-muted);
	transition: transform var(--mp-monograph-speed) ease, color 0.2s ease, background-color 0.2s ease;
}

.mp-monograph-icon svg {
	display: block;
	width: 1.1em;
	height: 1.1em;
}

.mp-monograph-item.is-open .mp-monograph-button {
	color: var(--mp-monograph-accent);
}

.mp-monograph-item.is-open .mp-monograph-icon {
	color: var(--mp-monograph-accent);
	background: var(--mp-monograph-accent-soft);
	transform: rotate(180deg);
}

/* Content ---------------------------------------------------------------- */

/*
 * Panels are collapsed only once the script has taken control of the accordion
 * (.mp-monograph--ready). Without JavaScript every panel stays visible, so the
 * information is always reachable. The script animates by setting an explicit
 * height inline; this rule provides the transition and the closed state.
 */
.mp-monograph-content {
	overflow: hidden;
	transition: height var(--mp-monograph-speed) ease;
}

.mp-monograph--ready .mp-monograph-item:not(.is-open) .mp-monograph-content {
	height: 0;
}

.mp-monograph--ready .mp-monograph-item:not(.is-open) .mp-monograph-inner {
	visibility: hidden;
	transition: visibility 0s linear var(--mp-monograph-speed);
}

.mp-monograph-body {
	padding: 0.15em 1.25em 1.4em;
	font-size: 0.9375em;
	line-height: 1.75;
	overflow-wrap: break-word;
}

/* Content typography ----------------------------------------------------- */

.mp-monograph-body > :first-child {
	margin-top: 0;
}

.mp-monograph-body > :last-child {
	margin-bottom: 0;
}

.mp-monograph-body p {
	margin: 0 0 1em;
}

.mp-monograph-body h1,
.mp-monograph-body h2,
.mp-monograph-body h3,
.mp-monograph-body h4,
.mp-monograph-body h5,
.mp-monograph-body h6 {
	margin: 1.4em 0 0.5em;
	color: inherit;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.mp-monograph-body h1,
.mp-monograph-body h2 { font-size: 1.2em; }
.mp-monograph-body h3 { font-size: 1.1em; }
.mp-monograph-body h4,
.mp-monograph-body h5,
.mp-monograph-body h6 { font-size: 1em; }

.mp-monograph-body ul,
.mp-monograph-body ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.mp-monograph-body ul { list-style: disc; }
.mp-monograph-body ol { list-style: decimal; }

.mp-monograph-body li {
	margin: 0 0 0.4em;
}

.mp-monograph-body li > ul,
.mp-monograph-body li > ol {
	margin-top: 0.4em;
	margin-bottom: 0;
}

.mp-monograph-body strong,
.mp-monograph-body b {
	font-weight: 600;
}

.mp-monograph-body a {
	color: var(--mp-monograph-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.mp-monograph-body blockquote {
	margin: 0 0 1em;
	padding: 0.75em 1em;
	border-left: 3px solid var(--mp-monograph-accent);
	background: var(--mp-monograph-hover);
}

.mp-monograph-body table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1em;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.95em;
}

.mp-monograph-body th,
.mp-monograph-body td {
	padding: 0.55em 0.75em;
	border: 1px solid var(--mp-monograph-border);
	text-align: left;
	vertical-align: top;
}

.mp-monograph-body th {
	background: var(--mp-monograph-hover);
	font-weight: 600;
}

.mp-monograph-body img {
	max-width: 100%;
	height: auto;
}

/* FAQs: question / answer pairs ------------------------------------------ */

.mp-monograph-faqs {
	margin: 0;
	padding: 0;
}

.mp-monograph-faq-q {
	position: relative;
	margin: 0;
	padding: 0.85em 0 0.35em 2.4em;
	font-weight: 600;
	color: var(--mp-monograph-text);
	line-height: 1.45;
}

.mp-monograph-faq-a {
	position: relative;
	margin: 0;
	padding: 0 0 0.9em 2.4em;
	color: var(--mp-monograph-text);
}

.mp-monograph-faq-q + .mp-monograph-faq-a {
	border-bottom: 1px dashed var(--mp-monograph-border);
	margin-bottom: 0.25em;
}

.mp-monograph-faqs > .mp-monograph-faq-a:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0.25em;
}

.mp-monograph-faq-marker {
	position: absolute;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1;
}

.mp-monograph-faq-q .mp-monograph-faq-marker {
	top: 0.95em;
	background: var(--mp-monograph-accent);
	color: #ffffff;
}

.mp-monograph-faq-a .mp-monograph-faq-marker {
	top: 0.1em;
	background: var(--mp-monograph-accent-soft);
	color: var(--mp-monograph-accent);
}

.mp-monograph-faq-a > :last-child {
	margin-bottom: 0;
}

/* WooCommerce reviews inside the accordion ------------------------------- */

.mp-monograph .woocommerce-Reviews {
	padding-top: 0.5em;
}

.mp-monograph .woocommerce-Reviews-title,
.mp-monograph .comment-reply-title {
	margin-top: 0;
	font-size: 1.1em;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 782px) {
	.mp-monograph {
		font-size: 15.5px;
	}

	.mp-monograph-button {
		padding: 0.95em 1.1em;
	}

	.mp-monograph-body {
		padding: 0.15em 1.1em 1.25em;
	}
}

@media (max-width: 600px) {
	.mp-monograph {
		margin: 2em 0;
		font-size: 15px;
	}

	.mp-monograph-heading {
		font-size: 1.3em;
	}

	.mp-monograph-button {
		padding: 0.9em 1em;
		font-size: 1em;
	}

	.mp-monograph-body {
		padding: 0.15em 1em 1.15em;
	}

	.mp-monograph-faq-q,
	.mp-monograph-faq-a {
		padding-left: 2.2em;
	}
}

/* Reduced motion / print ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mp-monograph-content,
	.mp-monograph-inner,
	.mp-monograph-icon,
	.mp-monograph-button {
		transition-duration: 0s;
		transition-delay: 0s;
	}
}

@media print {
	/* !important needed here only to beat the inline height the script sets. */
	.mp-monograph--ready .mp-monograph-item:not(.is-open) .mp-monograph-content {
		height: auto !important;
	}

	.mp-monograph--ready .mp-monograph-item:not(.is-open) .mp-monograph-inner {
		visibility: visible;
	}

	.mp-monograph-icon {
		display: none;
	}
}