/* ============================================================
   Theme-wide fixes for Tailwind classes that conflict with
   the compiled Vite CSS bundle (dist/assets/js-*.css).
   `body` prefix + `!important` is required because the bundle
   loads AFTER this file in the cascade.
   ============================================================ */

/* ---------- Header logo ----------
 * Two <img>s share one <a>: `logo-icon.svg` (mobile) +
 * `logo-half.webp` (desktop). The compiled bundle applies
 * `nvi:w-full nvi:h-full` → both images try to fill a parent
 * anchor that has no explicit size → they collapse to 0×0 and
 * become invisible. We reset sizing to natural and handle the
 * mobile/desktop swap by src attribute.
 */
body #masthead img[src*="/logo-"] {
	width: auto !important;
	height: auto !important;
	max-height: 32px !important;
}

/* Mobile (<640px): show SVG icon, hide WebP half */
@media (max-width: 639px) {
	body #masthead img[src*="/logo-icon"] { display: block !important; }
	body #masthead img[src*="/logo-half"] { display: none  !important; }
}

/* Desktop (≥640px): hide SVG icon, show WebP half */
@media (min-width: 640px) {
	body #masthead img[src*="/logo-icon"] { display: none  !important; }
	body #masthead img[src*="/logo-half"] { display: block !important; }
}