/*
 * seamlessmd/content — frontend styles.
 *
 * BEM:
 *   .seamlessmd-content                        (block)
 *   .seamlessmd-content--width-narrow          (modifier — 680px max)
 *   .seamlessmd-content--width-normal          (modifier — 820px max)
 *   .seamlessmd-content--width-wide            (modifier — 1040px max)
 *   .seamlessmd-content--has-aside             (modifier — two-col on >=992px)
 *   .seamlessmd-content__inner                 (element — container)
 *   .seamlessmd-content__header                (element — eyebrow + h2 + meta)
 *   .seamlessmd-content__eyebrow               (element — small caps label)
 *   .seamlessmd-content__heading               (element — h2)
 *   .seamlessmd-content__meta                  (element — last-updated line)
 *   .seamlessmd-content__layout                (element — body + aside wrapper)
 *   .seamlessmd-content__body                  (element — prose column)
 *   .seamlessmd-content__aside                 (element — right rail)
 *   .seamlessmd-content__aside-body            (element — aside content wrapper)
 *   .seamlessmd-content__toc                   (element — table of contents)
 *   .seamlessmd-content__toc--mobile           (modifier — rendered above body)
 *   .seamlessmd-content__toc--desktop          (modifier — rendered in aside)
 *   .seamlessmd-content__toc-title             (element — TOC label)
 *   .seamlessmd-content__toc-list              (element — <ul>)
 *   .seamlessmd-content__toc-item              (element — <li>)
 *   .seamlessmd-content__toc-link              (element — anchor)
 */

.seamlessmd-content {
	width: 100%;
	/* Padding edges are independently overridable via the
	 * `paddingTop` / `paddingBottom` block attrs, which arrive as
	 * `--seamlessmd-content-pad-top` / `-bottom` on the section.
	 * Fallback keeps the theme's section-pad rhythm unchanged for
	 * existing content blocks. */
	padding-top: var(--seamlessmd-content-pad-top, var(--seamlessmd-section-pad));
	padding-bottom: var(--seamlessmd-content-pad-bottom, var(--seamlessmd-section-pad));
	color: var(--seamlessmd-text);
	background: var(--seamlessmd-surface);
}

.seamlessmd-content__inner {
	margin: 0 auto;
	max-width: 820px; /* default — overridden by width modifiers below. */
}

.seamlessmd-content--width-narrow .seamlessmd-content__inner { max-width: 680px; }
.seamlessmd-content--width-normal .seamlessmd-content__inner { max-width: 820px; }
.seamlessmd-content--width-wide   .seamlessmd-content__inner { max-width: 1040px; }

/* Aside variant widens the container so the body still reads comfortably. */
.seamlessmd-content--has-aside.seamlessmd-content--width-narrow .seamlessmd-content__inner { max-width: 960px; }
.seamlessmd-content--has-aside.seamlessmd-content--width-normal .seamlessmd-content__inner { max-width: 1120px; }
.seamlessmd-content--has-aside.seamlessmd-content--width-wide   .seamlessmd-content__inner { max-width: 1280px; }

/* ---- Text alignment (optional, physical) ----
 * Driven by the `textAlign` attr → `--seamlessmd-content-text-align` style
 * var + a `.seamlessmd-content--text-{left|center|right}` modifier. Empty
 * attr = no class, no var → falls back to logical start (the browser
 * default), which auto-flips under RTL.
 * Used for page intros that pair prose with a centered decorative icon
 * (e.g. About-us mission paragraph). Note: physical — does NOT flip RTL.
 */
.seamlessmd-content--text-left   .seamlessmd-content__header,
.seamlessmd-content--text-left   .seamlessmd-content__body   { text-align: left; }
.seamlessmd-content--text-center .seamlessmd-content__header,
.seamlessmd-content--text-center .seamlessmd-content__body   { text-align: center; }
.seamlessmd-content--text-right  .seamlessmd-content__header,
.seamlessmd-content--text-right  .seamlessmd-content__body   { text-align: right; }

/* ---- Header ---- */

.seamlessmd-content__header {
	margin-bottom: var(--space-7);
}

.seamlessmd-content__eyebrow {
	margin: 0 0 var(--space-2);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--seamlessmd-primary);
}

.seamlessmd-content__heading {
	margin: 0 0 var(--space-3);
	font-family: var(--seamlessmd-font-heading);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--seamlessmd-dark-navy);
}

.seamlessmd-content__meta {
	margin: 0;
	font-size: 0.875rem;
	color: var(--seamlessmd-text-muted);
}

/* ---- Layout ---- */

.seamlessmd-content__layout {
	display: block;
}

/* ---- Body (prose) ---- */

.seamlessmd-content__body {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--seamlessmd-text);
}

.seamlessmd-content__body > * + * {
	margin-top: var(--space-5);
}

.seamlessmd-content__body p {
	margin-bottom: 0;
}

.seamlessmd-content__body h2 {
	margin: var(--space-8) 0 var(--space-4);
	font-family: var(--seamlessmd-font-heading);
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--seamlessmd-dark-navy);
	scroll-margin-top: calc(var(--seamlessmd-header-height, 72px) + 16px);
}

.seamlessmd-content__body h3 {
	margin: var(--space-7) 0 var(--space-3);
	font-family: var(--seamlessmd-font-heading);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.3;
	color: var(--seamlessmd-dark-navy);
	scroll-margin-top: calc(var(--seamlessmd-header-height, 72px) + 16px);
}

.seamlessmd-content__body h4 {
	margin: var(--space-6) 0 var(--space-3);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--seamlessmd-dark-navy);
}

.seamlessmd-content__body a {
	color: var(--seamlessmd-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.seamlessmd-content__body a:hover {
	color: var(--seamlessmd-primary-dark);
}

/* Standalone button row inside prose — opt-out of link underline / color so
 * the embedded `.seamlessmd-btn` classes style the anchor as a button. Used
 * by /patient-help/ for the mailto CTA. */
.seamlessmd-content__body .seamlessmd-content__cta-row {
	margin-top: var(--space-6);
	text-align: center;
}
.seamlessmd-content__body .seamlessmd-content__cta-row a.seamlessmd-btn {
	color: #fff;
	text-decoration: none;
}
.seamlessmd-content__body .seamlessmd-content__cta-row a.seamlessmd-btn:hover {
	color: #fff;
	text-decoration: none;
}

.seamlessmd-content__body ul,
.seamlessmd-content__body ol {
	margin: 0 0 var(--space-5);
	padding-inline-start: var(--space-6);
}

.seamlessmd-content__body li + li {
	margin-top: var(--space-2);
}

.seamlessmd-content__body li::marker {
	color: var(--seamlessmd-primary);
}

.seamlessmd-content__body blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-3) var(--space-5);
	border-inline-start: 4px solid var(--seamlessmd-primary);
	background: var(--seamlessmd-surface-alt);
	color: var(--seamlessmd-text);
	font-style: italic;
	/* Square on the accent side, rounded on the trailing side — logical
	 * corners mirror the visual under RTL without a dir override. */
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-start-end-radius: var(--seamlessmd-radius-sm);
	border-end-end-radius: var(--seamlessmd-radius-sm);
}

.seamlessmd-content__body blockquote p:last-child { margin-bottom: 0; }

.seamlessmd-content__body code {
	padding: 0.15em 0.4em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--seamlessmd-surface-alt);
	border: 1px solid var(--seamlessmd-border);
	border-radius: var(--seamlessmd-radius-sm);
}

.seamlessmd-content__body pre {
	margin: var(--space-5) 0;
	padding: var(--space-4) var(--space-5);
	background: var(--seamlessmd-dark-navy);
	color: #e6edf3;
	border-radius: var(--seamlessmd-radius-md);
	overflow-x: auto;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.seamlessmd-content__body pre code {
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	font-size: inherit;
}

.seamlessmd-content__body img,
.seamlessmd-content__body figure {
	max-width: 100%;
	height: auto;
	border-radius: var(--seamlessmd-radius-md);
}

.seamlessmd-content__body hr {
	margin: var(--space-7) 0;
	border: 0;
	border-top: 1px solid var(--seamlessmd-border);
}

.seamlessmd-content__body table {
	width: 100%;
	margin: var(--space-5) 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.seamlessmd-content__body th,
.seamlessmd-content__body td {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--seamlessmd-border);
	text-align: start;
}

.seamlessmd-content__body th {
	background: var(--seamlessmd-surface-alt);
	font-weight: 600;
	color: var(--seamlessmd-dark-navy);
}

/* ---- Aside ---- */

.seamlessmd-content__aside {
	margin-top: var(--space-7);
	padding: var(--space-5);
	background: var(--seamlessmd-surface-alt);
	border: 1px solid var(--seamlessmd-border);
	border-radius: var(--seamlessmd-radius-md);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--seamlessmd-text);
}

.seamlessmd-content__aside-body > *:first-child { margin-top: 0; }
.seamlessmd-content__aside-body > *:last-child  { margin-bottom: 0; }

/* ---- TOC ---- */

.seamlessmd-content__toc {
	margin: 0 0 var(--space-6);
	padding: var(--space-4) var(--space-5);
	background: var(--seamlessmd-surface-alt);
	border: 1px solid var(--seamlessmd-border);
	border-radius: var(--seamlessmd-radius-md);
}

.seamlessmd-content__toc--desktop {
	margin: 0 0 var(--space-5);
	background: transparent;
	border: 0;
	padding: 0;
}

.seamlessmd-content__toc-title {
	margin: 0 0 var(--space-3);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--seamlessmd-text-muted);
}

.seamlessmd-content__toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.seamlessmd-content__toc-item + .seamlessmd-content__toc-item {
	margin-top: var(--space-2);
}

.seamlessmd-content__toc-link {
	display: block;
	padding: 2px 0;
	color: var(--seamlessmd-text);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.4;
	border-inline-start: 2px solid transparent;
	padding-inline-start: var(--space-3);
	margin-inline-start: calc(-1 * var(--space-3));
	transition: color 0.15s ease, border-color 0.15s ease;
}

.seamlessmd-content__toc-link:hover,
.seamlessmd-content__toc-link:focus-visible {
	color: var(--seamlessmd-primary);
	border-inline-start-color: var(--seamlessmd-primary);
	outline: none;
}

/* ---- Two-column layout (aside or desktop TOC) at >=992px ---- */

@media (min-width: 992px) {
	.seamlessmd-content--has-aside .seamlessmd-content__layout,
	.seamlessmd-content__layout:has(.seamlessmd-content__toc--desktop) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: var(--space-8);
		align-items: start;
	}

	.seamlessmd-content--has-aside .seamlessmd-content__toc--mobile {
		display: none;
	}

	.seamlessmd-content__layout:has(.seamlessmd-content__toc--desktop) .seamlessmd-content__toc--mobile {
		display: none;
	}

	.seamlessmd-content--has-aside .seamlessmd-content__aside,
	.seamlessmd-content__layout:has(.seamlessmd-content__toc--desktop) .seamlessmd-content__aside {
		position: sticky;
		top: 80px;
		margin-top: 0;
		max-height: calc(100vh - 96px);
		overflow-y: auto;
	}
}

/* On mobile the desktop-only TOC slot inside the aside collapses away so we
   don't duplicate headings; the mobile TOC above the body is the primary. */
@media (max-width: 991.98px) {
	.seamlessmd-content__toc--desktop {
		display: none;
	}

	/* When there's no aside and no desktop TOC, the aside wrapper shouldn't show. */
	.seamlessmd-content:not(.seamlessmd-content--has-aside) .seamlessmd-content__aside:empty {
		display: none;
	}
}

/* ---- /patient-help/ page-scoped tweaks ----
 * Mirrors nabed.net's /patient-support typographic treatment: centered
 * italic warning heading above a centered body column, with the mailto CTA
 * rendered as a standalone pill button. Scoped via the slug-based body class
 * added by seamlessmd_body_classes(). */
body.page-slug-patient-help .seamlessmd-content {
	padding-top: 80px;
	padding-bottom: 80px;
}
body.page-slug-patient-help .seamlessmd-content__header {
	text-align: center;
	margin-bottom: var(--space-5);
}
body.page-slug-patient-help .seamlessmd-content__heading {
	font-style: italic;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
	line-height: 1.3;
}
/* RTL: the italic above is a Latin-script treatment. Arabic has no true
 * italic, so browsers synthesise one by slanting the glyphs, which distorts
 * the letterforms and their joining. Drop only the slant — the centring,
 * size and line-height above are direction-neutral and stay as-is. */
[dir="rtl"] body.page-slug-patient-help .seamlessmd-content__heading {
	font-style: normal;
}
body.page-slug-patient-help .seamlessmd-content__body {
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * Optional image slot — `imagePosition: left|right` pairs prose with
 * a screenshot / chart / mockup at ≥768px. Stacks at narrower widths.
 * The figure flows alongside the body within `__layout` (which the
 * original block already uses as a flex/grid container for the body
 * + optional aside). When `__media` is present we override the layout
 * to a 2-col grid: image / body.
 * ------------------------------------------------------------------ */
.seamlessmd-content--has-image .seamlessmd-content__layout {
	display: grid;
	gap: var(--seamlessmd-space-7, 2.5rem);
	align-items: center;
}

@media (min-width: 768px) {
	.seamlessmd-content--has-image.seamlessmd-content--image-right .seamlessmd-content__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.seamlessmd-content--has-image.seamlessmd-content--image-left .seamlessmd-content__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.seamlessmd-content--has-image.seamlessmd-content--image-left .seamlessmd-content__media {
		order: 0;
	}
	.seamlessmd-content--has-image.seamlessmd-content--image-left .seamlessmd-content__body {
		order: 1;
	}
	.seamlessmd-content--has-image.seamlessmd-content--image-right .seamlessmd-content__media {
		order: 1;
	}
	.seamlessmd-content--has-image.seamlessmd-content--image-right .seamlessmd-content__body {
		order: 0;
	}
}

.seamlessmd-content__media {
	margin: 0;
	width: 100%;
}

.seamlessmd-content__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--seamlessmd-radius-lg, 16px);
	box-shadow: var(--seamlessmd-shadow-lg, 0 10px 30px rgba(30, 42, 92, 0.12));
}

/* When an image is present, the `__inner` max-width cap (`narrow/normal/wide`)
 * shouldn't constrain the 2-col grid below the header — keep the header
 * centered but let the layout grid breathe to the full container width. */
.seamlessmd-content--has-image:not(.seamlessmd-content--image-below) .seamlessmd-content__inner {
	/* Follows the shared page-margin token (full-bleed site layout). */
	max-width: var(--seamlessmd-container-max, 1180px);
}

/* imagePosition: below — small decorative icon centered beneath the body,
 * single-column flow. Used for brand-mark "promo" icons (about-us mission
 * paragraph) where the image is decorative chrome, not a 2-col paired media.
 * The `__inner` keeps its narrow/normal/wide cap; the image sizes to 120px. */
.seamlessmd-content--has-image.seamlessmd-content--image-below .seamlessmd-content__layout {
	display: block;
}

.seamlessmd-content--has-image.seamlessmd-content--image-below .seamlessmd-content__media {
	margin-block-start: var(--seamlessmd-space-5, 1.5rem);
	display: flex;
	justify-content: center;
}

.seamlessmd-content--has-image.seamlessmd-content--image-below .seamlessmd-content__image {
	width: 120px;
	height: 120px;
	max-width: 120px;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
}