/**
 * Header responsive fixes (global).
 *
 * Hand-written and loaded site-wide. The theme's Tailwind is PRECOMPILED, and
 * the build ships `md:flex` / `lg:hidden` but NOT `lg:flex` — so the desktop
 * primary nav can only be toggled on at the `md` breakpoint (768px). With six
 * items plus the language switcher and the cart/account icons that is too wide
 * for the 768–1023px range: labels wrap and items collide with the logo.
 *
 * Fix: hold the burger menu until 1024px (the markup uses `lg:hidden` on the
 * burger and the mobile menu, both of which the build does provide), and hide
 * the `md:flex` desktop nav across the 768–1023px band here. On phones, tighten
 * the right-hand action cluster so the logo and language switcher never touch.
 *
 * @package Robo9
 */

/* Tablet band: the desktop nav is `md:flex` (visible from 768px), but there
   is no room for it yet — keep it collapsed into the burger until 1024px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.js-desktop-nav {
		display: none !important;
	}
}

/* Phones: `space-x-6` (1.5rem) between four action items plus the logo
   overflows a ~400px viewport, pushing the language switcher under the logo
   (the original report was at 402px). Tighten the action gaps, trim the bar's
   side padding and scale the logo down a touch so the whole row fits with room
   to spare on the narrowest phones. */
@media (max-width: 480px) {
	.js-header-bar {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}
	/* This build's `space-x-6` spaces items with margin-right: 1.5rem on each
	   child. Shrink it so the language switcher, cart, account and burger stay
	   on one row on the narrowest phones. */
	.js-header-actions > * {
		margin-right: 0.375rem !important;
	}
	.js-header-actions > *:last-child {
		margin-right: 0 !important;
	}
	.js-header-bar a > img.h-10 {
		height: 2rem !important;
	}
}