/* Printeez Header block — styled to mirror the app's public header
 * (apps/print_simple_web: layouts/public_root.html.heex + css/header.scss).
 * Loads front-end AND editor (block `style` handle), so the editor previews
 * the real bar layout around the live slot previews.
 *
 * Anatomy (children of .ps-header, template order = DOM order):
 *   .ps-header-toggle     hidden checkbox — the pure-CSS mobile menu state,
 *                         the same mechanism the app header uses
 *   .ps-header-hamburger  its <label>, three bars animating to an X
 *   .ps-header-logo       core/site-logo
 *   .ps-header-nav        the custom menu block (off-canvas panel on mobile)
 *   .ps-header-selector   the warehouse selector block (starts the right
 *                         cluster via margin-left:auto)
 *   .ps-header-slot--logged-out / --logged-in
 *                         the auth button groups (server-gated hidden;
 *                         header-view.js reveals one)
 *
 * Breakpoint 819px matches the app's header collapse point. Colors are
 * plain values mirroring the app's rendered tokens (no skin-token system
 * exists WP-side): text #020912 (--color-fill), border #e5e5e5, bg #fff.
 */

.ps-header {
	position: sticky;
	top: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	box-sizing: border-box;
	padding: 1rem 0.5rem;
	background: #ffffff;
	border-bottom: 1px solid #e5e5e5;
}

.ps-header *,
.ps-header *::before,
.ps-header *::after {
	box-sizing: border-box;
}

/* --- WP admin bar (logged-in admins) --------------------------------------
   WP pushes the page down with html{margin-top}, but a sticky bar must
   offset its own `top` too or it slides under the fixed admin bar on
   scroll. The height var ships with WP's front-end admin-bar styles
   (32px, 46px ≤782px); logged-out pages have neither the class nor the
   var, so this is a no-op for visitors. */
body.admin-bar .ps-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	/* Below 600px WP's admin bar is position:absolute and scrolls away
	   with the page, so the header sticks to the real viewport top. */
	body.admin-bar .ps-header {
		top: 0;
	}
}

@media (min-width: 820px) {
	.ps-header {
		padding: 1rem 1.5rem;
		gap: 2rem;
	}
}

/* --- Checkbox + hamburger (app: header-navigation-toggle/-trigger) ------ */

.ps-header .ps-header-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ps-header .ps-header-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 0.5rem;
	cursor: pointer;
}

.ps-header .ps-header-hamburger span {
	display: inline-flex;
	width: 24px;
	height: 1.5px;
	background: #020912;
	transform-origin: center;
	transition: all 0.3s ease-in-out;
}

/* --- Logo ---------------------------------------------------------------- */

.ps-header .ps-header-logo {
	flex: 0 0 auto;
	margin: 0;
}

.ps-header .ps-header-logo img {
	width: 100%;
	max-width: 120px;
	height: auto;
	display: block;
}

/* --- Nav (desktop inline; mobile off-canvas below) ------------------------ */

.ps-header .ps-header-nav {
	min-width: 0;
}

/* Desktop: the nav area owns ALL of the bar's free space, keeping the menu
   beside the logo (app parity) while pinning the right cluster to the right
   — the split must never depend on the selector's auto margin alone, or
   hiding the selector collapses it and the buttons drift up against the
   menu. */
@media (min-width: 820px) {
	.ps-header .ps-header-nav {
		display: flex;
		justify-content: flex-start;
		flex: 1 1 auto;
	}

	/* The menu block is width:100% by default; inside the nav it must
	   shrink-wrap or there is nothing to center. */
	.ps-header .ps-header-nav .wp-block-custom-printeez-custom-menu {
		width: auto;
	}
}

/* --- Right cluster: selector + auth buttons ------------------------------- */

/* Belt-and-suspenders with the nav's flex-grow above: still pins the right
   cluster if the nav slot is ever emptied entirely. */
.ps-header .ps-header-selector {
	margin-left: auto;
}

.ps-header .ps-header-slot {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 0 0 auto;
}

.ps-header .ps-header-slot .wp-block-buttons {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: nowrap;
}

.ps-header .ps-header-slot .wp-block-button__link {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.ps-header .ps-header-slot .wp-block-button__link {
		padding: 0.5rem 1.25rem;
		font-size: 0.9rem;
	}
}

/* --- Mobile (≤819px, the app's collapse point) ----------------------------
   The checkbox precedes every slot as a direct sibling, so `:checked ~`
   reaches the nav and the hamburger exactly like the app's CSS does. */

@media (max-width: 819px) {
	.ps-header .ps-header-hamburger {
		display: inline-flex;
	}

	/* Anchored to the header itself (absolute in the sticky bar, top:100%),
	   not to the viewport — so the panel always starts exactly where the
	   bar ends, whatever pushes the bar around (WP admin bar, sticky vs.
	   in-flow). Height = viewport minus the bar (100% = the header's own
	   height) minus the admin bar when present. */
	.ps-header .ps-header-nav {
		position: absolute;
		top: 100%;
		/* Full viewport bleed regardless of how the theme wraps the header:
		   template parts commonly sit inside an alignfull has-global-padding
		   constrained group, so the header's own box — the panel's absolute
		   containing block — is inset from the viewport by the root padding
		   and left:0/right:0 can never reach the edges. Center-anchor, span
		   the viewport, pull half of it back. width:100vw is safe here: the
		   body scrollbar is gone while the panel is open (scroll lock below). */
		left: 50%;
		width: 100vw;
		max-width: none;
		margin: 0 0 0 -50vw;
		z-index: 999;
		height: calc(100vh - 100% - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		padding: 1rem;
		background: #ffffff;
		transform: translateX(-100%);
		opacity: 0;
		pointer-events: none;
		transition: all 0.3s ease-in-out;
	}

	.ps-header .ps-header-toggle:checked ~ .ps-header-nav {
		transform: translateX(0);
		opacity: 1;
		pointer-events: auto;
		z-index: 999999;
	}

	/* Hamburger → X. Adjacent bar centers sit 7.5px apart (1.5px bar +
	   6px gap), so each outer bar translates that far onto the middle bar
	   FIRST, then rotates (rightmost transform applies first). The reverse
	   order translated along the already-rotated axis, skewing the X
	   off-center. */
	.ps-header .ps-header-toggle:checked ~ .ps-header-hamburger span:nth-child(1) {
		transform: translateY(7.5px) rotate(45deg);
	}

	.ps-header .ps-header-toggle:checked ~ .ps-header-hamburger span:nth-child(2) {
		opacity: 0;
	}

	.ps-header .ps-header-toggle:checked ~ .ps-header-hamburger span:nth-child(3) {
		transform: translateY(-7.5px) rotate(-45deg);
	}
}

/* Scroll lock while the mobile menu is open (app: body overflow hidden). */
body:has(.ps-header .ps-header-toggle:checked) {
	overflow: hidden;
}