/**
 * Hola Dual Title - Frontend Styles
 *
 * Uses highly specific selectors to override Twenty Twenty (and most
 * themes) heading margins that cause a huge gap between the two titles.
 * All rules are scoped to the plugin's unique classes so nothing else breaks.
 */

/* ── Dual-title container — flexbox column, tight gap ─── */
.dual-title-wrap,
.entry-title .dual-title-wrap,
h1.entry-title .dual-title-wrap,
h2.entry-title .dual-title-wrap,
.post-inner .entry-title .dual-title-wrap,
.singular .entry-title .dual-title-wrap,
.entry-header .entry-title .dual-title-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	line-height: 1.3;
}

/* ── Each title line — block display, centered, zero margin ── */
.dual-title-wrap .dual-title-line,
.entry-title .dual-title-wrap .dual-title-line,
h1.entry-title .dual-title-wrap .dual-title-line,
h2.entry-title .dual-title-wrap .dual-title-line,
.entry-header .entry-title .dual-title-wrap .dual-title-line {
	display: block;
	margin: 0;
	padding: 0;
	text-align: center;
	line-height: 1.3;
}

/* ── English title ─────────────────────────────────────── */
.dual-title-wrap .dual-title-en,
.entry-title .dual-title-wrap .dual-title-en {
	unicode-bidi: embed;
	text-align: center;
}

/* ── Arabic title — larger font for visual balance ─────── */
.dual-title-wrap .dual-title-ar,
.entry-title .dual-title-wrap .dual-title-ar,
h1.entry-title .dual-title-wrap .dual-title-ar,
h2.entry-title .dual-title-wrap .dual-title-ar {
	unicode-bidi: embed;
	text-align: center;
	font-size: 1.15em;
	font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Arabic Typesetting', sans-serif;
}

/* ── Kill any <br> left over (safety) ──────────────────── */
.dual-title-wrap br {
	display: none;
}

/* ── Archive / blog listing pages — slightly smaller gap ─ */
.archive .dual-title-wrap,
.home .dual-title-wrap,
.blog .dual-title-wrap,
.search-results .dual-title-wrap {
	gap: 1px;
}