/**
 * MSys Markdown Viewer — default stylesheet.
 *
 * Scoped port of TMdHtmlRenderer.DefaultCss (MSys.CompLib.Markdown.Html.pas):
 * the same MD_* rules, wrapped under .msmv-md so multiple widgets and the
 * surrounding theme stay unaffected. The Elementor style controls override
 * these rules via more specific {{WRAPPER}} selectors.
 */

.msmv-wrap {
	width: 100%;
}

.msmv-md {
	overflow-wrap: break-word;
}

/* --- Blocks ------------------------------------------------------------ */

.msmv-md .MD_h1 { font-size: 1.9em; margin: 1em 0 .4em; font-weight: 600; line-height: 1.25; }
.msmv-md .MD_h2 { font-size: 1.5em; margin: 1em 0 .4em; font-weight: 600; line-height: 1.25; border-bottom: 1px solid #d0d7de; padding-bottom: .2em; }
.msmv-md .MD_h3 { font-size: 1.25em; margin: 1em 0 .35em; font-weight: 600; }
.msmv-md .MD_h4 { font-size: 1.05em; margin: 1em 0 .3em; font-weight: 600; }
.msmv-md .MD_h5 { font-size: .95em; margin: 1em 0 .3em; font-weight: 600; }
.msmv-md .MD_h6 { font-size: .85em; margin: 1em 0 .3em; font-weight: 600; color: #6a737d; }

/* Intra-document anchor jumps ([text](#heading)) land a little below the
   viewport top so a sticky theme header / WP admin bar does not cover the
   targeted heading. Themes with their own offset can override this. */
.msmv-md .MD_h1,
.msmv-md .MD_h2,
.msmv-md .MD_h3,
.msmv-md .MD_h4,
.msmv-md .MD_h5,
.msmv-md .MD_h6 { scroll-margin-top: 2rem; }

.msmv-md .MD_p { margin: .6em 0; line-height: 1.6; }

.msmv-md .MD_ul,
.msmv-md .MD_ol { margin: .5em 0; padding-left: 1.6em; }
.msmv-md .MD_li { margin: .25em 0; }

.msmv-md .MD_blockquote { margin: .8em 0; padding: .4em .9em; border-left: 4px solid #d0d7de; color: #57606a; background: #f6f8fa; }

.msmv-md .MD_hr { border: 0; border-top: 1px solid #d0d7de; margin: 1.2em 0; }

.msmv-md .MD_pre { background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 6px; padding: .8em 1em; overflow: auto; margin: .7em 0; line-height: 1.45; }
.msmv-md .MD_codeblock { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.msmv-md .MD_code { background: rgba(175, 184, 193, .25); border-radius: 4px; padding: .12em .35em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

/* GitHub-style responsive tables: scroll inside their own box instead of
   blowing up narrow Elementor columns. */
.msmv-md .MD_table { border-collapse: collapse; margin: .7em 0; font-size: .95em; display: block; width: max-content; max-width: 100%; overflow-x: auto; }
.msmv-md .MD_th { border: 1px solid #d0d7de; padding: .4em .7em; background: #f6f8fa; font-weight: 600; }
.msmv-md .MD_td { border: 1px solid #d0d7de; padding: .4em .7em; }

.msmv-md .MD_htmlblock { white-space: pre-wrap; background: #fff8e1; border: 1px dashed #e0c060; padding: .4em .7em; margin: .6em 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.msmv-md .MD_footnotedef { font-size: .85em; color: #57606a; margin: .3em 0; }
.msmv-md .MD_footnotelabel { font-weight: 600; color: #6a737d; }

/* --- Inlines ----------------------------------------------------------- */

.msmv-md .MD_strong { font-weight: 600; }
.msmv-md .MD_em { font-style: italic; }
.msmv-md .MD_del { text-decoration: line-through; }
.msmv-md .MD_a { color: #0969da; text-decoration: none; }
.msmv-md .MD_img { max-width: 100%; height: auto; }
.msmv-md .MD_checkbox { margin: 0 .4em 0 0; }
.msmv-md .MD_footnoteref { font-size: .8em; }

.msmv-md .MD_align_left { text-align: left; }
.msmv-md .MD_align_center { text-align: center; }
.msmv-md .MD_align_right { text-align: right; }

/* --- Syntax highlighting (classic Delphi-IDE light palette) ------------ */

.msmv-md .MD_tok_keyword { color: #0000a0; font-weight: bold; }
.msmv-md .MD_tok_string { color: #a31515; }
.msmv-md .MD_tok_comment { color: #008000; font-style: italic; }
.msmv-md .MD_tok_number { color: #0070c1; }
.msmv-md .MD_tok_directive { color: #808000; }

/* --- Link decoration variants (widget control "Unterstreichung") ------- */

.msmv-links-none .msmv-md .MD_a { text-decoration: none; }
.msmv-links-underline .msmv-md .MD_a { text-decoration: underline; }
.msmv-links-hover .msmv-md .MD_a { text-decoration: none; }
.msmv-links-hover .msmv-md .MD_a:hover { text-decoration: underline; }

/* --- Button + modal popup (msys_md_button widget) ---------------------- */

.msmv-btnwrap { width: 100%; }

.msmv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	cursor: pointer;
	font: inherit;
	line-height: 1.2;
	padding: .6em 1.2em;
	color: #fff;
	background: #0969da;
	border: 1px solid transparent;
	border-radius: 6px;
	text-decoration: none;
}
/* Focus/active render as the NORMAL button (not hover): after the popup closes
   the button regains focus (a11y), and if it shared the hover style it would
   look stuck in hover (issue #3). These rules also override a theme's
   more-specific button:focus / button:active fill, so the button keeps its own
   colour instead of the theme's. Hover, declared last, still wins while the
   button is actually hovered. */
.msmv-btn:focus,
.msmv-btn:active { color: #fff; background: #0969da; }
.msmv-btn:hover { background: #0757b3; }
.msmv-btn__icon { display: inline-flex; }
.msmv-btn__icon svg { width: 1em; height: 1em; fill: currentColor; }

/* The modal lives inside the widget wrapper (so {{WRAPPER}} .msmv-md style
   controls apply). It is fixed-positioned to cover the viewport when open. */
.msmv-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
.msmv-modal[hidden] { display: none; }

.msmv-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	cursor: pointer;
}

.msmv-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 720px;
	max-height: 85vh;
	overflow: hidden;
	padding: 1.25rem 1.5rem;
	background: #fff;
	color: #1f2328;
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

/* Non-scrolling header row: keeps the close button (and optional title) OUT of
   the scrollable body, so the X can never sit on top of the body's scrollbar. */
.msmv-modal__header {
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-bottom: .5rem;
}

.msmv-modal__title {
	margin: 0;
	font-size: 1.15em;
	font-weight: 600;
}

.msmv-modal__close {
	margin-left: auto; /* pushes the X to the right, with or without a title */
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: #57606a;
	background: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}
.msmv-modal__close:hover,
.msmv-modal__close:focus { background: rgba(175, 184, 193, .25); }

/* The document itself scrolls; the header (title/close) stays put. */
.msmv-modal__body { overflow: auto; }

.msmv-modal__error { color: #b3261e; padding: .5em 0; }

/* Visually hidden but exposed to assistive tech (loading/status text). */
.msmv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.msmv-modal__loading {
	display: flex;
	justify-content: center;
	padding: 2rem 0;
}
.msmv-spinner {
	width: 1.6rem;
	height: 1.6rem;
	border: 3px solid rgba(9, 105, 218, .25);
	border-top-color: #0969da;
	border-radius: 50%;
	animation: msmv-spin .7s linear infinite;
}
@keyframes msmv-spin { to { transform: rotate(360deg); } }

/* Lock the page behind an open modal. */
body.msmv-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.msmv-spinner { animation-duration: 2s; }
}

/* --- Editor notices ----------------------------------------------------- */

.msmv-notice {
	background: #fff8e1;
	border: 1px dashed #e0c060;
	border-radius: 4px;
	color: #6a5300;
	font-size: .95em;
	padding: .7em 1em;
}