/**
 * Mobile header UX fix.
 *
 * The mobile header (site-mob-header-1, per Customizer > mobile_header_style)
 * had two problems on real phones:
 *  1. The logo <img> has no width constraint anywhere in the parent theme's
 *     CSS, so it renders at its native uploaded size (275x54px) on every
 *     screen -- too wide next to the search/menu icons on a ~360-390px
 *     viewport.
 *  2. The header icons (search, hamburger) are sized via
 *     `.site-mob-header .menu-icon { font-size: 13px; }`, which is small
 *     for a tap target and reads as "missing" next to the oversized logo.
 *
 * This file only touches `.site-mob-header`/`.logo-mob-wrap`, which are
 * unique to the mobile header markup, so it can't affect the desktop header.
 */

.site-mob-header .logo-mob-wrap img {
	max-width: 130px;
	width: auto;
	height: auto;
}

.site-mob-header .menu-icon {
	font-size: 22px !important;
}

.site-mob-header .icons-wrap li a {
	display: flex;
	align-items: center;
	padding: 0 10px;
}

@media (max-width: 400px) {
	.site-mob-header .logo-mob-wrap img {
		max-width: 105px;
	}

	.site-mob-header .menu-icon {
		font-size: 20px !important;
	}

	.site-mob-header .icons-wrap li a {
		padding: 0 8px;
	}
}