/* le-placements header slot (spec mobile-header-placement, design D7). Loaded only when a
   header-mobile creative is live; every rule is scoped under .le-header--placement.
   The slot overlays the header row, so the header's box never changes size (no layout shift).
   Phone layout only: narrower than 768px, or a landscape phone (touch, shorter than 500px, and
   below 1024px where the header is still logo + menu). Keep in sync with `mq` in header-morph.js
   and the orb rules in the theme's le-site.css. Everything else never sees the slot. */
.le-header--placement .le-slot { display: none; }
@media (max-width: 767px), (pointer: coarse) and (max-height: 499px) and (max-width: 1023px) {
	.le-header--placement .le-header-row { position: relative; overflow: hidden; }
	.le-header--placement .le-slot { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0 12px; opacity: 0; pointer-events: none; }
	.le-header--placement .le-slot-box { width: 320px; height: 50px; max-width: 100%; }
	.le-header--placement.le-morphed .le-slot { pointer-events: auto; }
	.le-header--placement.le-morphed .le-brand,
	.le-header--placement.le-morphed .le-menu-toggle { pointer-events: none; }
	.le-header--placement .le-brand-orb { transform-origin: 50% 50%; }
	/* Safari re-rasterises an inline SVG when the layer holding it starts to move, which stalled
	   the morph ~130 ms as the menu button slid out (measured 2026-09-27). The same icon as a
	   background image is a bitmap to the compositor. Geometry = le_icon('menu'); colour =
	   --juniper-ink (#2A1F52), the toggle's colour. The drawer's close icon is untouched. */
	.le-header--placement .le-menu-toggle-open > svg { display: none; }
	.le-header--placement .le-menu-toggle-open { width: 21px; height: 24px; transform-origin: 50% 10.5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1F52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center top / 21px 21px no-repeat; } /* 24px tall with the icon at the top: the inline SVG's position in its line box today */

	/* No Web Animations API: switch states without motion. */
	.le-header--placement.le-morph-static.le-morphed .le-slot { opacity: 1; }
	.le-header--placement.le-morph-static.le-morphed .le-brand,
	.le-header--placement.le-morph-static.le-morphed .le-menu-toggle { opacity: 0; }
}