/*
 * VLINZZA — Single Post non-critical styles (Task 54A).
 * Loaded early but applied non-blocking after assets/css/single-post.css.
 */

.vlz-single-post__end {
	max-width: var(--vlz-wide-max);
	margin-inline: auto;
	padding-inline: var(--vlz-container-gutter);
	padding-block-end: var(--vlz-space-xl);
}

.vlz-single-post__content img,
.vlz-single-post__content video,
.vlz-single-post__content iframe {
	max-width: 100%;
	height: auto;
}

.vlz-single-post__content figure {
	margin-inline: 0;
	max-width: 100%;
}

.vlz-single-post__content figcaption {
	font-size: var(--vlz-text-sm);
	color: var(--vlz-color-text-muted);
}

/*
 * Task 3 Correction — article table overflow regression root cause:
 * `display: block; overflow-x: auto;` directly on <table> forced the
 * table out of real table layout (anonymous-box row/cell sizing), and per
 * the CSS Overflow spec, setting only `overflow-x` to a non-`visible`
 * value forces the browser to compute the UNSET `overflow-y` as `auto`
 * too (confirmed live: computed overflow-y was "auto" even though this
 * rule never declared it) — any subpixel row-height rounding from the
 * anonymous-box layout then reads as vertical overflow and shows an
 * internal vertical scrollbar. Overflow does not apply to a real
 * `display: table` box in any engine tested, so horizontal scrolling is
 * moved to a dedicated wrapper (`.vlz-single-table-scroll`, added by
 * `vlz_single_post_wrap_tables()` in inc/blog/single.php) instead of the
 * <table> element itself — the table keeps its natural table layout and
 * intrinsic height, so page scroll is the only vertical scroll mechanism,
 * per this task's hard rule (no vertical/internal scroll, no max-height).
 */
.vlz-single-post__content table {
	max-width: 100%;
	border-collapse: collapse;
}

.vlz-single-post__content .vlz-single-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: visible;
}

.vlz-single-post__content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--vlz-space-sm);
	border-inline-start: var(--vlz-border-width-strong) solid var(--vlz-color-border-strong);
	color: var(--vlz-color-text-muted);
}

/* ===================================================================
 * Task 2 — Inline "قد يهمك أيضًا", Author, Newsletter, Final Related.
 * All new selectors stay scoped under .vlz-single-* — nothing here touches
 * .vlz-blog-* (shared nav) or .vlz-blog-card (Archive Card).
 * =================================================================== */

/*
 * Inline recommendation — compact horizontal card, one thumbnail + title.
 *
 * Width fix (2026-09-11): this component carried its own `max-width:
 * var(--vlz-measure)` (68ch), left behind when `.vlz-single-post__content`'s
 * own cap was corrected from 68ch to 90% in an earlier "Legacy Geometry
 * Correction" — everything else in the content column inherited the
 * corrected width automatically via `.vlz-single-post__content > *
 * { max-width: 100% }`, but this element's own, more specific declaration
 * kept re-imposing the stale 68ch cap. Set explicitly to 100% here (rather
 * than removed) so the intent stays legible in source and the block now
 * matches the Article Content Column's width exactly, flush on both edges.
 * Background/border/padding also lightly refreshed per the same task (subtle
 * differentiation from the page background, not a prominent CTA — no icons,
 * no copy change). See BLOG-ARCHIVE-RELATED-BLOCK-IMPLEMENTATION-2026-09-11.md.
 */
.vlz-single-inline-related {
	margin-block: var(--vlz-space-lg);
	padding: var(--vlz-space-md);
	border: var(--vlz-border-width) solid var(--vlz-color-border);
	border-inline-start: var(--vlz-border-width-strong) solid var(--vlz-color-primary);
	border-radius: var(--vlz-radius-md);
	background: #f6f9fc;
	max-width: 100%;
}

.vlz-single-inline-related__label {
	margin: 0 0 var(--vlz-space-2xs);
	font-size: var(--vlz-text-sm);
	font-weight: var(--vlz-weight-semibold);
	color: var(--vlz-color-text-muted);
}

.vlz-single-inline-related__link {
	display: flex;
	align-items: center;
	gap: var(--vlz-space-sm);
	text-decoration: none;
	color: inherit;
}

.vlz-single-inline-related__media {
	flex: 0 0 auto;
	display: block;
	width: 6.5rem;
	aspect-ratio: 16 / 9;
	border-radius: var(--vlz-radius-sm);
	overflow: hidden;
	background: var(--vlz-color-surface);
}

.vlz-single-inline-related__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vlz-single-inline-related__fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--vlz-color-border);
}

.vlz-single-inline-related__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--vlz-text-sm);
	font-weight: var(--vlz-weight-semibold);
	color: var(--vlz-color-heading);
	line-height: var(--vlz-leading-tight);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vlz-single-inline-related__link:hover .vlz-single-inline-related__title,
.vlz-single-inline-related__link:focus-visible .vlz-single-inline-related__title {
	color: var(--vlz-color-primary);
}

.vlz-single-inline-related__link:focus-visible {
	outline: var(--vlz-focus-width) solid var(--vlz-color-focus);
	outline-offset: var(--vlz-focus-offset);
	border-radius: var(--vlz-radius-sm);
}

@media (max-width: 480px) {
	.vlz-single-inline-related__media {
		width: 4.5rem;
	}
}

/*
 * Author block — Owner Correction Round 1 §15: now the first child of the
 * full-width `.vlz-single-post__end` wrapper (moved out of the narrower
 * reading column, see inc/blog/single.php), kept at the same comfortable
 * reading measure and centred in the wider container rather than stretched
 * edge-to-edge, since it's still short identity text, not a grid.
 */
.vlz-single-author {
	display: flex;
	align-items: flex-start;
	gap: var(--vlz-space-sm);
	max-width: var(--vlz-measure);
	margin-inline: auto;
	margin-block-start: var(--vlz-space-lg);
	padding: var(--vlz-space-sm);
	border: var(--vlz-border-width) solid var(--vlz-color-border);
	border-radius: var(--vlz-radius-md);
	background: var(--vlz-color-surface-alt);
}

.vlz-single-author__avatar img {
	display: block;
	border-radius: var(--vlz-radius-pill);
}

.vlz-single-author__label {
	margin: 0 0 var(--vlz-space-3xs);
	font-size: var(--vlz-text-sm);
	color: var(--vlz-color-text-muted);
}

.vlz-single-author__name {
	margin: 0 0 var(--vlz-space-3xs);
	font-weight: var(--vlz-weight-bold);
}

.vlz-single-author__name a {
	color: var(--vlz-color-heading);
	text-decoration: none;
}

.vlz-single-author__name a:hover,
.vlz-single-author__name a:focus-visible {
	color: var(--vlz-color-primary);
	text-decoration: underline;
}

.vlz-single-author__bio {
	margin: 0;
	font-size: var(--vlz-text-sm);
	color: var(--vlz-color-text-muted);
}

@media (max-width: 480px) {
	.vlz-single-author {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * Newsletter — Owner Correction Round 2 §11-§19: same
 * `vlz_blog_render_newsletter()` markup/provider as Round 1 (still no
 * second backend, still nothing redefined in assets/css/blog-archive.css —
 * Blog Home's own dark/with-image newsletter is completely untouched), but
 * the composition is rebuilt from Round 1's single-row flex into a real
 * Semrush-like two-area grid, per the Owner's rejection of Round 1's
 * right-heavy/pale-background layout: `.vlz-blog-newsletter__content`
 * becomes `display: contents` so its children (title/body/form/consent) can
 * be placed directly as grid items of `.vlz-blog-newsletter` itself — title
 * + body in the ~30% copy column (RIGHT on this RTL site, since it is the
 * grid's first/inline-start track), form + consent in the ~70% form column
 * (LEFT) — no new DOM, no PHP change, no image (the Round 1
 * `__visual { display:none }` rule two blocks up is untouched and still
 * applies here regardless of whether the Owner ever sets a Blog Settings
 * image). Colours below use the Owner's exact Round 2 hex values; several
 * are literals rather than existing --vlz-* tokens (documented per rule) —
 * the header brief was explicit about avoiding both the previous
 * washed-out pale blue and a dark navy full-bleed block.
 */
.vlz-single-post__newsletter {
	max-width: none;
	margin-block-start: var(--vlz-space-lg);
}

.vlz-single-post__newsletter .vlz-blog-newsletter {
	display: grid;
	grid-template-columns: minmax(230px, 0.9fr) minmax(0, 2fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 32px;
	row-gap: 10px;
	margin-block-start: 0;
	padding: 28px 32px;
	/*
	 * Owner Correction Round 3 §3: background is now settings-driven —
	 * VLINZZA → Single Post Appearance (inc/single-post-appearance.php) —
	 * with the exact Round 2 literal (#DCECF8) as the var() fallback, so an
	 * unsaved/default install renders identically to before. See
	 * --vlz-single-newsletter-heading-color/--vlz-single-newsletter-text-color
	 * below for the other two controls.
	 */
	background: var(--vlz-single-newsletter-bg, #DCECF8);
	border: var(--vlz-border-width) solid var(--vlz-single-newsletter-bg, #DCECF8);
	border-radius: 10px;
}

.vlz-single-post__newsletter .vlz-blog-newsletter__visual {
	/* Owner Correction Round 1 §17 (unchanged this round): image removed
	 * completely for this section regardless of the Blog Settings image. */
	display: none;
}

.vlz-single-post__newsletter .vlz-blog-newsletter__content {
	/* Lets title/body/form/consent become direct grid items of
	 * .vlz-blog-newsletter above, instead of a single flex child — this is
	 * the whole mechanism behind the two-column composition, no markup
	 * change required. */
	display: contents;
}

.vlz-single-post__newsletter .vlz-blog-newsletter__title {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	/* Settings-driven (§3) — fallback matches var(--vlz-color-heading), the
	 * exact #1b2538 the Round 2 brief called for. */
	color: var(--vlz-single-newsletter-heading-color, #1B2538);
	font-size: 1.5rem;
	line-height: 1.3;
}

.vlz-single-post__newsletter .vlz-blog-newsletter__body {
	grid-column: 1;
	grid-row: 2;
	margin-block-start: var(--vlz-space-3xs);
	/* Settings-driven (§3) — fallback is the exact Round 2 literal #44546A. */
	color: var(--vlz-single-newsletter-text-color, #44546A);
	font-size: var(--vlz-text-sm);
	max-width: none;
}

.vlz-single-post__newsletter .vlz-blog-newsletter__form {
	grid-column: 2;
	grid-row: 1;
	align-items: stretch;
	margin-block: 0;
	max-width: none;
	gap: 12px;
}

.vlz-single-post__newsletter .vlz-blog-newsletter__form input {
	/*
	 * Owner Correction Round 3 §2: rounded to the project's own pill family
	 * (var(--vlz-radius-pill), the same radius the Blog Bar search input and
	 * every VLINZZA CTA button already use — see
	 * .vlz-blog-bar__search .vlz-blog-search-form input and
	 * .vlz-blog-cta__button in assets/css/blog-archive.css) instead of
	 * Round 2's plain 9px corners, so this reads as VLINZZA's own visual
	 * language rather than a generic/browser-default rectangle.
	 */
	min-height: 52px;
	padding-inline: 1.25rem;
	border: 1px solid #B8CEE0;
	border-radius: var(--vlz-radius-pill, 999px);
	background: var(--vlz-color-surface);
	color: var(--vlz-color-text);
	box-sizing: border-box;
	transition: border-color .15s ease;
}

.vlz-single-post__newsletter .vlz-blog-newsletter__form input:hover {
	border-color: var(--vlz-color-primary);
}

.vlz-single-post__newsletter .vlz-blog-newsletter__form input:focus-visible {
	border-color: var(--vlz-color-primary);
	outline: var(--vlz-focus-width) solid var(--vlz-color-focus);
	outline-offset: var(--vlz-focus-offset);
}

.vlz-single-post__newsletter .vlz-blog-newsletter__consent {
	grid-column: 2;
	grid-row: 2;
}

.vlz-single-post__newsletter .vlz-blog-newsletter__status {
	/* Visible live feedback sits below the consent without overlapping it. */
	grid-column: 2;
	grid-row: 3;
}

.vlz-single-post__newsletter .vlz-blog-newsletter__button {
	/*
	 * Owner Correction Round 3 §2: same pill radius as the input above and
	 * as every other VLINZZA CTA/search control project-wide
	 * (var(--vlz-radius-pill)) — was a plain 9px rectangle in Round 2, which
	 * read as an "admin rectangle" rather than a real project button.
	 */
	min-height: 52px;
	min-width: 140px;
	padding-inline: 1.5rem;
	color: var(--vlz-color-text-invert);
	/* var(--vlz-color-primary-strong) already resolves to the exact #17669c
	 * the brief calls for. */
	background: var(--vlz-color-primary-strong);
	border: 0;
	border-radius: var(--vlz-radius-pill, 999px);
	box-sizing: border-box;
	transition: background-color .15s ease;
}

.vlz-single-post__newsletter .vlz-blog-newsletter__button:not(:disabled):hover,
.vlz-single-post__newsletter .vlz-blog-newsletter__button:not(:disabled):focus-visible,
.vlz-single-post__newsletter .vlz-blog-newsletter__button:not(:disabled):active {
	color: var(--vlz-color-text-invert);
	/* Literal #12547F — darker than --vlz-color-primary-strong itself (the
	 * button's own new resting colour), per the Owner's explicit hover/focus
	 * value. */
	background: #12547F;
	outline: var(--vlz-focus-width) solid var(--vlz-color-focus);
	outline-offset: var(--vlz-focus-offset);
}

.vlz-single-post__newsletter .vlz-blog-newsletter__button:disabled {
	/*
	 * Owner Correction Round 2 §17: provider is still disconnected, but the
	 * disabled button must still look intentional rather than
	 * near-invisible — literal #9AB7CC per the brief, not the previous
	 * --vlz-color-border-strong (a plain neutral grey).
	 */
	background: #9AB7CC;
	color: var(--vlz-color-text-invert);
	cursor: not-allowed;
	opacity: 1;
}

.vlz-single-post__newsletter .vlz-blog-newsletter__consent,
.vlz-single-post__newsletter .vlz-blog-newsletter__consent p {
	/* Settings-driven (§3) — same control/fallback as the body text above. */
	color: var(--vlz-single-newsletter-text-color, #44546A);
}

/*
 * Owner Correction Round 2 §19: at Tablet (768px) the two-column 30/70 grid
 * has too little room for the copy column at its 230px floor without
 * cramping the form column — rather than "preserve empty space just to
 * keep Desktop structure" (the brief's own words), this collapses to the
 * same clean single-column stack Mobile uses, just with Tablet-scale
 * padding/gap. 900px (not the file's usual 1024.98px) is deliberate here:
 * it is comfortably above the 768px Tablet QA viewport and comfortably
 * below common small-laptop widths, so the two-column layout still gets
 * real Desktop-width screens to itself.
 */
@media (max-width: 900px) {
	.vlz-single-post__newsletter .vlz-blog-newsletter {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		row-gap: 16px;
		padding: 24px;
	}

	.vlz-single-post__newsletter .vlz-blog-newsletter__title,
	.vlz-single-post__newsletter .vlz-blog-newsletter__body,
	.vlz-single-post__newsletter .vlz-blog-newsletter__form,
	.vlz-single-post__newsletter .vlz-blog-newsletter__consent,
	.vlz-single-post__newsletter .vlz-blog-newsletter__status {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (max-width: 600px) {
	.vlz-single-post__newsletter .vlz-blog-newsletter {
		padding: 20px;
		row-gap: 12px;
	}

	.vlz-single-post__newsletter .vlz-blog-newsletter__title {
		font-size: 1.5rem; /* ~24px ceiling per the brief */
	}

	.vlz-single-post__newsletter .vlz-blog-newsletter__form {
		/* Owner Correction Round 2 §18: Mobile order lists Email and Button
		 * as separate numbered steps (3, 4) and requires the button full
		 * width — both only make sense stacked, not sharing a row. */
		flex-direction: column;
		gap: 12px;
	}

	.vlz-single-post__newsletter .vlz-blog-newsletter__button {
		width: 100%;
		min-width: 0;
	}
}

/*
 * Final Related Posts — compact content-continuation cards, not Archive
 * Cards. Owner Correction Round 1 §14/§15: 8 cards, no width cap (the
 * section is now a direct child of the full-width `.vlz-single-post__end`
 * wrapper) so a real 4-column Desktop grid has room, 2 columns Tablet,
 * 1 column Mobile.
 */
.vlz-single-related {
	margin-block-start: var(--vlz-space-xl);
}

.vlz-single-related__heading {
	margin: 0 0 var(--vlz-space-md);
}

.vlz-single-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vlz-grid-gap);
}

.vlz-single-related__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vlz-single-related__media {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--vlz-radius-md);
	overflow: hidden;
	background: var(--vlz-color-surface-alt);
	margin-block-end: var(--vlz-space-2xs);
}

.vlz-single-related__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vlz-single-related__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--vlz-color-text-muted);
	font-size: var(--vlz-text-sm);
	font-weight: var(--vlz-weight-semibold);
}

.vlz-single-related__category {
	margin: 0 0 var(--vlz-space-3xs);
	font-size: var(--vlz-text-sm);
	font-weight: var(--vlz-weight-semibold);
}

.vlz-single-related__category a {
	color: var(--vlz-color-primary);
	text-decoration: none;
}

.vlz-single-related__title {
	margin: 0;
	font-size: var(--vlz-text-h4);
	line-height: var(--vlz-leading-heading);
}

.vlz-single-related__title a {
	color: var(--vlz-color-heading);
	text-decoration: none;
}

.vlz-single-related__title a:hover,
.vlz-single-related__title a:focus-visible {
	color: var(--vlz-color-primary);
}

@media (max-width: 1024.98px) {
	.vlz-single-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.vlz-single-related__grid {
		grid-template-columns: 1fr;
	}
}