/**
 * DMF Article Export — printable document styles.
 *
 * Loaded in three contexts, always producing the same look:
 *   1. The admin template builder's preview iframe.
 *   2. The front-end Preview modal (wrapped in .dmf-article-export-page).
 *   3. The print iframe / native print takeover.
 *
 * Colors, font, and base size come from CSS variables set inline on the
 * .dmf-article-export node by the shared builder (article-export.js), so the
 * template settings drive everything without per-template stylesheets.
 */

.dmf-article-export {
	font-family: var(--dmf-export-font, Georgia, "Times New Roman", serif);
	font-size: var(--dmf-export-size, 12pt);
	color: var(--dmf-export-text, #1a1a1a);
	line-height: 1.6;
	background: #ffffff;
	-webkit-text-size-adjust: 100%;
}

/* --- Header --- */

.dmf-article-export__header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 12px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--dmf-export-accent, #1a6e63);
}

.dmf-article-export__logo {
	display: block;
	max-height: 48px;
	max-width: 180px;
	width: auto;
	height: auto;
}

.dmf-article-export__site-title {
	font-weight: 700;
	font-size: 1.05em;
	color: var(--dmf-export-heading, #003057);
}

.dmf-article-export__header-line {
	font-size: 0.85em;
	color: var(--dmf-export-text, #1a1a1a);
	opacity: 0.75;
}

/* --- Title / byline / featured image --- */

.dmf-article-export__title {
	margin: 0 0 8px;
	font-size: 1.9em;
	font-weight: 800;
	line-height: 1.2;
	color: var(--dmf-export-heading, #003057);
}

.dmf-article-export__byline {
	margin: 0 0 16px;
	font-size: 0.85em;
	opacity: 0.75;
}

.dmf-article-export__featured {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 20px;
	border-radius: 4px;
}

/* --- Body (cloned post content) --- */

.dmf-article-export__body h1,
.dmf-article-export__body h2,
.dmf-article-export__body h3,
.dmf-article-export__body h4,
.dmf-article-export__body h5,
.dmf-article-export__body h6 {
	color: var(--dmf-export-heading, #003057);
	line-height: 1.3;
	margin: 1.2em 0 0.5em;
	break-after: avoid-page;
}

.dmf-article-export__body p {
	margin: 0 0 1em;
	orphans: 3;
	widows: 3;
}

.dmf-article-export__body a {
	color: var(--dmf-export-accent, #1a6e63);
	text-decoration: underline;
	word-break: break-word;
}

.dmf-article-export__body img {
	max-width: 100% !important;
	height: auto !important;
	break-inside: avoid-page;
}

.dmf-article-export__body figure {
	margin: 1em 0;
	break-inside: avoid-page;
}

.dmf-article-export__body figcaption {
	font-size: 0.85em;
	opacity: 0.75;
}

.dmf-article-export__body blockquote {
	margin: 1em 0;
	padding: 0.25em 0 0.25em 1em;
	border-left: 3px solid var(--dmf-export-accent, #1a6e63);
	font-style: italic;
	break-inside: avoid-page;
}

.dmf-article-export__body ul,
.dmf-article-export__body ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}

.dmf-article-export__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
	font-size: 0.9em;
}

.dmf-article-export__body th,
.dmf-article-export__body td {
	padding: 6px 10px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	text-align: left;
}

.dmf-article-export__body th {
	background: rgba(0, 0, 0, 0.05);
	color: var(--dmf-export-heading, #003057);
}

/* Neutralize theme/Elementor animation states inside the export. */
.dmf-article-export__body .elementor-invisible,
.dmf-article-export__body [data-settings*="_animation"] {
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

/*
 * Neutralize Elementor layout widths inside the export. The cloned content
 * keeps its on-screen wrappers (sections/containers/columns), whose widths
 * and flex layouts otherwise squeeze the text into a narrow on-screen column
 * instead of filling the printable page width.
 */
.dmf-article-export__body .elementor-section,
.dmf-article-export__body .elementor-container,
.dmf-article-export__body .elementor-column,
.dmf-article-export__body .elementor-column-wrap,
.dmf-article-export__body .elementor-widget-wrap,
.dmf-article-export__body .e-con,
.dmf-article-export__body .e-con-inner {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --- Footer (end-of-document block) --- */

.dmf-article-export__footer {
	margin-top: 28px;
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.25);
	font-size: 0.8em;
	opacity: 0.75;
}

.dmf-article-export__footer-line {
	margin: 0 0 2px;
}

/* Footer URL: clickable in saved PDFs but styled like the rest of the footer. */
.dmf-article-export__footer a {
	color: inherit;
	text-decoration: none;
	word-break: break-word;
}

/* --- Print-only / no-print helper classes --- */

/* Hidden on the live page, shown inside exports. */
.dmf-print-only {
	display: none;
}

.dmf-article-export .dmf-print-only {
	display: block;
}

/* --- On-screen "sheet of paper" preview wrapper --- */

.dmf-article-export-page {
	background: #ffffff;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
	margin: 0 auto;
	box-sizing: border-box;
	max-width: 100%;
}

/*
 * --- Native print takeover (Ctrl+P / Cmd+P / File > Print) ---
 *
 * article-tools.js pre-builds the export document into #dmf-native-print-root
 * (a direct child of <body>, hidden on screen) and adds .dmf-native-print to
 * <body>. When ANY print happens, the normal page is hidden and only the
 * export document prints. Pages without the widget are unaffected.
 */

#dmf-native-print-root {
	display: none;
}

@media print {
	body.dmf-native-print > *:not(#dmf-native-print-root) {
		display: none !important;
	}

	body.dmf-native-print #dmf-native-print-root {
		display: block;
	}

	.dmf-article-tools {
		display: none !important;
	}
}