/* UrduPaper — Menu Icons frontend rendering.
 *
 * The PHP filter wraps each iconed menu item title in:
 *   <span class="upaper-menu-icon-wrap">
 *     <svg class="upaper-menu-icon">…</svg>
 *     <span class="upaper-menu-icon-text">…title…</span>
 *   </span>
 *
 * This stylesheet only handles inline alignment + sizing — leaves colour to
 * the parent menu link so the icon inherits hover / active states.
 */

.upaper-menu-icon-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
}

.upaper-menu-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	stroke-width: 2;
	color: inherit;
}

/* Dashicons are a font, not an SVG — `width/height` have no effect on the
 * glyph itself; we size them via `font-size` instead and let the icon
 * inherit the menu link's text color. */
.upaper-menu-icon--dashicon {
	font-size: 1em;
	width: auto;
	height: auto;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

/* Slightly larger in the primary nav, where line-height makes the default
 * 1em look small next to bold uppercase Urdu titles. */
#primary-menu .upaper-menu-icon--lucide,
.main-navigation .upaper-menu-icon--lucide {
	width: 16px;
	height: 16px;
}

#primary-menu .upaper-menu-icon--dashicon,
.main-navigation .upaper-menu-icon--dashicon {
	font-size: 16px;
}

/* RTL — flip the gap so the icon sits to the right of the text (Urdu reads
 * RTL, so logically the icon should lead the text from the right). */
html[dir="rtl"] .upaper-menu-icon-wrap {
	flex-direction: row-reverse;
}