/*
 * VMHNĐS — article body.
 * ---------------------------------------------------------------------------
 * This is the file that lets a colleague write a normal post in Gutenberg and
 * have it come out looking like the approved design. It styles the raw output
 * of the_content(), so it has to cope with everything already in the database.
 *
 * Written against an audit of all 78 existing posts, which contain:
 *   44 posts of core Gutenberg blocks       (2019, 2020, 2022, 2025)
 *   28 posts of plain classic-editor HTML   (2019)
 *    5 posts built with Elementor           (2020–2021)
 *   18 posts using UAGB image blocks        (2025)
 *    3 posts using classic [caption] markup (2020–2021)
 *
 * Every one of those is handled below, so old and new posts render the same.
 *
 * Contents
 *   1. The measure and the alignment widths
 *   2. Paragraphs and inline text
 *   3. Headings
 *   4. Lists, quotes, rules, tables, code
 *   5. Images, captions and galleries
 *   6. Embeds
 *   7. Legacy markup: Elementor, UAGB, classic captions
 *   8. Print
 */

/* ==========================================================================
   1. The measure and the alignment widths
   ==========================================================================
   Top-level blocks sit in a 720px column. Gutenberg's "wide" and "full"
   alignment buttons widen them to 1000px and to the container. These match
   theme.json's contentSize and wideSize, so the editor previews them correctly.
   ========================================================================== */

.vm-prose {
	--vm-measure: 720px;
	--vm-measure-wide: 1000px;

	font: var(--weight-regular) var(--text-lg) / var(--leading-body) var(--font-serif);
	color: var(--text-body);
	text-wrap: pretty;
	counter-reset: vm-heading;

	/* Older posts paste bare URLs into the text; without this they push the
	   page sideways on a phone. */
	overflow-wrap: break-word;
}

.vm-prose > * {
	max-width: var(--vm-measure);
	margin-inline: auto;
}

.vm-prose > .alignwide {
	max-width: var(--vm-measure-wide);
}

.vm-prose > .alignfull {
	max-width: 100%;
}

/* Floats need clearing or they escape the article. */
.vm-prose::after {
	content: "";
	display: table;
	clear: both;
}

/* ==========================================================================
   2. Paragraphs and inline text
   ========================================================================== */

.vm-prose p {
	/*
	 * margin-block, not the margin shorthand: `margin: 0 0 1.1em` would also
	 * reset the `margin-inline: auto` set in §1, which is what centres a
	 * top-level block in the column. Every rule below follows the same rule —
	 * touch the block axis only.
	 */
	margin-block: 0 1.1em;
}

/* The opening paragraph is set larger, as in the design's article lede. */
.vm-prose > p:first-child {
	font-size: var(--text-xl);          /* 22px */
	line-height: 1.6;
	color: var(--text-strong);
}

.vm-prose strong,
.vm-prose b {
	font-weight: var(--weight-semibold);
	color: var(--text-strong);
}

.vm-prose a[href] {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

.vm-prose a[href]:hover {
	color: var(--link-hover);
}

/* A link whose text is a full URL may have no space to break at. */
.vm-prose a[href] {
	overflow-wrap: anywhere;
}

/*
 * Older posts carry footnote markers written as <a><sup>[1]</sup></a> with no
 * href. Without this they would be painted like links the reader can click.
 */
.vm-prose a:not([href]) {
	color: inherit;
	text-decoration: none;
	cursor: text;
}

.vm-prose sup,
.vm-prose sub {
	font-size: .68em;
	line-height: 0;
}

.vm-prose sup {
	vertical-align: super;
	color: var(--text-accent);
}

.vm-prose .has-text-align-center { text-align: center; }
.vm-prose .has-text-align-right  { text-align: right; }
.vm-prose .has-text-align-left   { text-align: left; }

/* ==========================================================================
   3. Headings
   ========================================================================== */

.vm-prose h2,
.vm-prose h3,
.vm-prose h4 {
	color: var(--text-strong);
	text-wrap: balance;
}

.vm-prose h2 {
	margin-block: var(--space-10) var(--space-4);
	font: var(--weight-semibold) var(--text-2xl) / 1.2 var(--font-display);
	letter-spacing: var(--tracking-tightest);
}

.vm-prose h3 {
	margin-block: var(--space-9) var(--space-3);
	font: var(--weight-semibold) var(--text-xl) / 1.25 var(--font-display);
	letter-spacing: var(--tracking-tight);
}

.vm-prose h4 {
	margin-block: var(--space-7) var(--space-3);
	font: var(--weight-semibold) var(--text-lg) / 1.3 var(--font-sans);
}

/*
 * Editors have used h5 thirteen times on this site, and in every case it is a
 * photo credit sitting under an image ("Nguồn ảnh: Danviet.vn") rather than a
 * section heading. vmhnds_credit_lines_are_not_headings() in functions.php
 * rewrites exactly those into paragraphs, so screen readers stop announcing a
 * heading and the document no longer jumps h1 → h5. This styles the result.
 */
.vm-prose .vm-credit {
	margin-block: calc(var(--space-4) * -1) var(--space-7);
	font: var(--weight-medium) var(--text-xs) / 1.5 var(--font-sans);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
	text-wrap: pretty;
}

/* An h5 or h6 that is a genuine sub-heading keeps heading treatment, small. */
.vm-prose h5,
.vm-prose h6 {
	margin-block: var(--space-7) var(--space-3);
	font: var(--weight-semibold) var(--text-base) / 1.35 var(--font-sans);
	color: var(--text-strong);
}

/*
 * Optional numbered heading, matching the artboard's "01 / 02 / 03" sections.
 * Applied per-heading from the block editor's Styles panel, not automatically —
 * auto-numbering would put a number on things like "Nguồn tham khảo".
 */
.vm-prose h2.is-style-vmhnds-numbered {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
}

.vm-prose h2.is-style-vmhnds-numbered::before {
	counter-increment: vm-heading;
	content: counter(vm-heading, decimal-leading-zero);
	flex: 0 0 auto;
	font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-sans);
	letter-spacing: var(--tracking-widest);
	color: var(--accent-clay);
}

/* ==========================================================================
   4. Lists, quotes, rules, tables, code
   ========================================================================== */

.vm-prose ul,
.vm-prose ol {
	margin: 0 auto 1.2em;
	padding-left: 1.35em;
}

.vm-prose li {
	margin-bottom: .45em;
}

.vm-prose li::marker {
	color: var(--accent-clay);
}

.vm-prose blockquote {
	margin: var(--space-9) auto;
	padding-left: var(--space-6);
	border-left: var(--border-rule) solid var(--accent-clay);
	font: var(--weight-light) var(--text-2xl) / var(--leading-snug) var(--font-serif);
	font-style: italic;
	color: var(--text-strong);
	text-wrap: balance;
}

.vm-prose blockquote p {
	font: inherit;
	margin: 0 0 .4em;
}

.vm-prose blockquote p:last-child {
	margin-bottom: 0;
}

.vm-prose blockquote cite,
.vm-prose blockquote .wp-block-quote__citation {
	display: block;
	margin-top: var(--space-4);
	font: var(--type-meta);
	font-style: normal;
	letter-spacing: var(--tracking-wide);
	color: var(--text-muted);
}

.vm-prose hr,
.vm-prose .wp-block-separator {
	max-width: var(--vm-measure);
	margin: var(--space-9) auto;
	border: 0;
	border-top: var(--border-hairline) solid var(--border-subtle);
}

/*
 * Wide tables scroll inside themselves rather than pushing the page sideways.
 * There is exactly one table in the existing content, so this is insurance.
 */
.vm-prose table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-sans);
}

.vm-prose th,
.vm-prose td {
	padding: 10px 12px;
	border-bottom: var(--border-hairline) solid var(--border-subtle);
	text-align: left;
	vertical-align: top;
}

.vm-prose th {
	font-weight: var(--weight-semibold);
	color: var(--text-strong);
}

.vm-prose pre,
.vm-prose code {
	font-family: var(--font-mono);
	font-size: .88em;
}

.vm-prose pre {
	padding: var(--space-5);
	border-radius: var(--radius-card);
	background: var(--surface-sunken);
	overflow-x: auto;
}

/* ==========================================================================
   5. Images, captions and galleries
   ========================================================================== */

.vm-prose figure,
.vm-prose .wp-block-image,
.vm-prose .wp-block-uagb-image {
	margin-block: var(--space-9);
}

.vm-prose img {
	height: auto;
	border-radius: var(--radius-image);
}

.vm-prose figure img {
	width: 100%;
}

/* An image dropped inside a centred paragraph — a common classic-editor shape. */
.vm-prose p > img {
	margin-inline: auto;
}

.vm-prose .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.vm-prose .alignleft {
	float: left;
	max-width: 48%;
	margin: 0 var(--space-6) var(--space-4) 0;
}

.vm-prose .alignright {
	float: right;
	max-width: 48%;
	margin: 0 0 var(--space-4) var(--space-6);
}

/* Every caption shape this site has produced, in one rule. */
.vm-prose figcaption,
.vm-prose .wp-caption-text,
.vm-prose .widget-image-caption,
.vm-prose .blocks-gallery-item__caption {
	margin-top: var(--space-3);
	font: var(--weight-regular) var(--text-xs) / 1.5 var(--font-sans);
	color: var(--text-faint);
	text-align: left;
}

/* Some captions were typed inside <em>; the design's captions are upright. */
.vm-prose figcaption em {
	font-style: normal;
}

.vm-prose .wp-block-gallery img {
	border-radius: var(--radius-image);
}

.vm-prose .wp-block-gallery figcaption {
	text-align: center;
}

/* ==========================================================================
   6. Embeds
   ========================================================================== */

.vm-prose .wp-block-embed {
	position: relative;   /* WordPress's oEmbed iframe is absolutely positioned;
	                         without a positioned parent it sizes itself against
	                         the viewport and overflows the column. */
	margin-block: var(--space-9);
}

.vm-prose iframe,
.vm-prose video {
	max-width: 100%;
	border-radius: var(--radius-image);
}

.vm-prose .wp-block-embed.is-type-video .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}

.vm-prose .wp-block-embed.is-type-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   7. Legacy markup
   ==========================================================================
   Five posts from 2020–2021 were built with Elementor. Their content is
   ordinary paragraphs and images wrapped in Elementor's section/column divs.
   Flattening those wrappers means the posts read correctly whether or not
   Elementor is still installed — which is what makes it safe to retire the
   plugin later.
   ========================================================================== */

.vm-prose section.elementor-section,
.vm-prose div.elementor-container,
.vm-prose div.elementor-column,
.vm-prose div.elementor-widget-wrap,
.vm-prose div.elementor-element,
.vm-prose div.elementor-widget {
	display: block;
	width: auto;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: none;
}

/*
 * The outer Elementor wrapper keeps the reading measure. Without this it
 * inherits `max-width: none` from the rule above and the post runs the full
 * width of the page — 1200px of 19px serif, which is unreadable.
 */
.vm-prose > div.elementor {
	max-width: var(--vm-measure);
	margin-inline: auto;
	padding: 0;
	background: none;
}

.vm-prose div.elementor-widget + div.elementor-widget {
	margin-top: var(--space-6);
}

/* UAGB's image block is a div wrapping a figure; treat it as the figure. */
.vm-prose .wp-block-uagb-image__figure {
	margin: 0;
}

.vm-prose .wp-block-uagb-image--align-center .wp-block-uagb-image__figure,
.vm-prose .wp-block-uagb-image.aligncenter .wp-block-uagb-image__figure {
	margin-inline: auto;
	text-align: center;
}

/* Classic [caption] shortcodes render as figure.wp-caption with a fixed
   inline width; let them use the column instead. */
.vm-prose .wp-caption {
	width: auto !important;
	max-width: 100%;
}

/* ==========================================================================
   7b. Reading on a phone
   ==========================================================================
   These belong here rather than in theme.css: prose.css is enqueued after it,
   so a font-size set there would lose to the `font:` shorthand in §1.
   ========================================================================== */

@media (max-width: 640px) {

	.vm-prose {
		font-size: var(--text-base);          /* 17px reads better at arm's length */
		line-height: 1.7;
	}

	.vm-prose > p:first-child {
		font-size: var(--text-lg);
	}

	.vm-prose h2 {
		margin-top: var(--space-9);
		font-size: var(--text-xl);
	}

	.vm-prose h3 {
		font-size: var(--text-lg);
	}

	.vm-prose blockquote {
		padding-left: var(--space-4);
		font-size: var(--text-xl);
	}

	/* Floated images have nowhere to go on a phone. */
	.vm-prose .alignleft,
	.vm-prose .alignright {
		float: none;
		max-width: 100%;
		margin-inline: auto;
	}

	.vm-prose figure,
	.vm-prose .wp-block-image,
	.vm-prose .wp-block-uagb-image {
		margin-block: var(--space-7);
	}
}

/* ==========================================================================
   8. Print
   ==========================================================================
   The article page has a print button, so this is what comes out of it.
   ========================================================================== */

@media print {

	.vm-header,
	.vm-footer,
	.vm-article__tools,
	.vm-article__cta,
	.vm-related,
	.vm-skip-link,
	.vm-article__author {
		display: none !important;
	}

	.vm-article__body,
	.vm-article__head,
	.vm-article__hero {
		padding: 0;
		margin: 0;
	}

	.vm-prose,
	.vm-prose > * {
		max-width: 100%;
	}

	.vm-prose {
		font-size: 12pt;
		line-height: 1.5;
	}

	.vm-prose a[href]::after {
		content: " (" attr(href) ")";
		font-size: .8em;
		color: #555;
		word-break: break-all;
	}

	.vm-article__title {
		font-size: 24pt;
	}
}

/* ==========================================================================
   9. Pull quotes and the share button's confirmation
   ========================================================================== */

.vm-prose .wp-block-pullquote {
	margin: var(--space-9) auto;
	padding: 0 0 0 var(--space-6);
	border-left: var(--border-rule) solid var(--accent-clay);
	text-align: left;
}

.vm-prose .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.vm-share.is-done {
	border-color: var(--accent-lake);
	color: var(--accent-lake);
}