/* ===========================================================================
 * INVENTORY NAV ITEM + the header spacing it needs.
 *
 * Owner-chosen Lovable design 4, "leading item" (project c01a40c2,
 * src/pages/InventoryLab.tsx V4 + Drawer n=4 @ 14d9a696). Markup:
 * template-parts/header/site-header.php (`[data-sb-inventory]`); URL and
 * current state: inc/site-header.php.
 *
 * 16 Oct owner feedback: "a little smaller ... maybe not yellow either but I
 * like this style". Same position, icon, label and divider; quieter skin:
 *
 *   >= 1024  FIRST nav item, right after the logo: translucent white
 *            (12%, hover 20%) on the navy bar, 1px white/30% border, white
 *            13/600 text, 34px tall, rounded 6px, 12px x-padding; then a
 *            1x20 white 25% divider before Biospecimens.
 *            Contrast: white on the tint ~12:1 (hover ~9.5:1).
 *   <  1024  compact "In stock" text button in the bar, 40px tall, same
 *            translucent skin (aria-label "In stock inventory")
 *   drawer   first row, 48px, light navy tint, navy text, arrow at the end
 *
 *   16 Oct (owner): "remove the icon from in-stock inventory" -- the Boxes
 *   glyph is gone from all three; text only. The only svg left is the
 *   drawer's trailing arrow.
 *   current  (/products/?view=instock, aria-current="page") the SAME
 *            translucent skin, just stronger: white 20% fill + white/60%
 *            border, white text (drawer: navy 14% tint + navy/60% border,
 *            navy text). 16 Oct owner: "the style of the old Inventory button,
 *            just no icon. Not the white background yellow underline one." 
 *
 * Selectors are prefixed with `.sb-site-header` because style.css,
 * legacy-site.css and the BB skin carry bare `a` / `a:hover` / `a:focus`
 * rules that outrank a single class. html is font-size:10px, so px only.
 * ======================================================================== */

.sb-site-header a.sb-site-header__inventory {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	flex-shrink: 0;
	height: 34px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff !important;
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
	text-decoration: none !important;
	box-shadow: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sb-site-header a.sb-site-header__inventory:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff !important;
}

.sb-site-header a.sb-site-header__inventory svg {
	display: block;
	flex-shrink: 0;
}

/* Current: same translucent skin, stronger (white ~20% fill, white/60% border). */
.sb-site-header a.sb-site-header__inventory.is-current,
.sb-site-header a.sb-site-header__inventory[aria-current="page"],
.sb-site-header a.sb-site-header__inventory.is-current:hover,
.sb-site-header a.sb-site-header__inventory[aria-current="page"]:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff !important;
	box-shadow: none;
}

/* Focus: white 2px ring on a 2px navy gap (visible on the tint and on white). */
.sb-site-header a.sb-site-header__inventory:focus {
	outline: none;
}

.sb-site-header a.sb-site-header__inventory:focus-visible {
	outline: 2px solid transparent !important; /* forced-colors fallback */
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #07038c, 0 0 0 4px #fff !important;
}

.sb-site-header a.sb-site-header__inventory.is-current:focus-visible,
.sb-site-header a.sb-site-header__inventory[aria-current="page"]:focus-visible {
	box-shadow: 0 0 0 2px #07038c, 0 0 0 4px #fff !important;
}

/* --- Desktop: first nav item + divider ------------------------------------- */

.sb-site-header .sb-site-header__inventory-divider {
	display: block;
	flex-shrink: 0;
	width: 1px;
	height: 20px;
	margin: 0 4px 0 8px;
	background: rgba(255, 255, 255, 0.25);
}

/* --- Bar version (below 1024): compact text button, 40px tall (touch target) */

.sb-site-header a.sb-site-header__inventory--bar {
	order: -1;
	width: auto;
	height: 40px;
	padding: 0 12px;
}

@media (min-width: 1024px) {
	.sb-site-header a.sb-site-header__inventory--bar {
		display: none;
	}
}

/* --- Drawer row (white panel) ---------------------------------------------- */

.sb-site-header a.sb-site-header__inventory--drawer {
	display: flex;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	height: 48px;
	margin: 0 0 8px;
	padding: 0 16px;
	border-color: rgba(6, 3, 141, 0.15);
	background: rgba(6, 3, 141, 0.06);
	color: #06038d !important;
	font-size: 16px;
	line-height: 24px;
}

.sb-site-header a.sb-site-header__inventory--drawer:hover {
	border-color: rgba(6, 3, 141, 0.25);
	background: rgba(6, 3, 141, 0.1);
	color: #06038d !important;
}

/* Only the trailing arrow remains (no leading icon since 16 Oct). */
.sb-site-header a.sb-site-header__inventory--drawer svg.sb-site-header__inventory-arrow {
	padding: 0;
	background: none;
	color: currentColor;
}

.sb-site-header a.sb-site-header__inventory--drawer.is-current,
.sb-site-header a.sb-site-header__inventory--drawer[aria-current="page"],
.sb-site-header a.sb-site-header__inventory--drawer.is-current:hover,
.sb-site-header a.sb-site-header__inventory--drawer[aria-current="page"]:hover {
	border-color: rgba(6, 3, 141, 0.6);
	background: rgba(6, 3, 141, 0.14);
	color: #06038d !important;
	box-shadow: none;
}

/* On the white drawer a navy gap would vanish; use the drawer's own navy ring. */
.sb-site-header a.sb-site-header__inventory--drawer:focus-visible,
.sb-site-header a.sb-site-header__inventory--drawer.is-current:focus-visible,
.sb-site-header a.sb-site-header__inventory--drawer[aria-current="page"]:focus-visible {
	box-shadow: none !important;
	outline: 2px solid #07038c !important;
	outline-offset: 2px !important;
}

.sb-site-header .sb-site-header__inventory-arrow {
	margin-left: auto;
}
/* --- Header spacing (Lovable dd71b0b) -------------------------------------
 *
 *   1024-1439  nav items 6px side padding (was 12) and no gap between them
 *   1200-1279  keep the compact search icon (it opened the same full search
 *              below 1200 already); the full field starts at 1280
 * ------------------------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1439px) {
	.sb-site-header .sb-site-header__nav {
		gap: 0;
	}

	.sb-site-header .sb-site-header__nav-btn,
	.sb-site-header .sb-site-header__nav-link {
		padding-left: 6px;
		padding-right: 6px;
	}
}

@media (min-width: 1200px) and (max-width: 1279px) {
	.sb-site-header .sb-site-header__search--desktop {
		display: none;
	}

	.sb-site-header .sb-site-header__search--mobile {
		display: block;
	}
}