/* ============================================================
 * ThornBloom Header Extras — hamburger trigger, cart icon, search icon.
 * Slots into the existing .tbh-canonical-nav-right on header.php.
 * At <=1099px, nav links collapse and hamburger appears.
 * @since 2.7.21 (chunk 2 — multi-build 2026-04-21)
 * ============================================================ */

/* Icon-button shared style for nav-right actions */
.tbh-canonical-nav .icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	background: transparent;
	border: 1px solid var(--tb-border-gold, rgba(209, 178, 140, 0.18));
	color: var(--realm-cream, #ECE4D5);
	cursor: pointer;
	border-radius: 2px;
	padding: 0;
	position: relative;
	transition: color .2s ease, border-color .2s ease;
	text-decoration: none;
}
.tbh-canonical-nav .icon-btn:hover,
.tbh-canonical-nav .icon-btn:focus-visible {
	color: var(--realm-metallic, #D1B28C);
	border-color: var(--tb-border-strong, rgba(209, 178, 140, 0.35));
	outline: none;
}
.tbh-canonical-nav .icon-btn svg {
	width: 18px; height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.4;
}

/* Cart badge */
.tbh-canonical-nav .cart-count-badge {
	position: absolute;
	top: -6px; right: -6px;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	background: var(--realm-metallic, #D1B28C);
	color: var(--realm-bg, #070A14);
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-size: 10px; font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.tbh-canonical-nav .cart-count-badge[data-count="0"] {
	display: none;
}

/* Hamburger button — 3 lines that morph to X when menu open.
   Scoped to .tbh-canonical-nav so we beat the specificity of
   .tbh-canonical-nav .icon-btn { display:inline-flex } above.
   Without this scoping, the hamburger leaked onto desktop (regression v2.7.23). */
.tbh-canonical-nav .tb-hamburger {
	display: none; /* desktop default — shown at <=1099px */
}
.tb-hamburger-bars {
	position: relative;
	display: inline-block;
	width: 18px; height: 12px;
}
.tb-hamburger-bars::before,
.tb-hamburger-bars::after,
.tb-hamburger-bars span {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 1.4px;
	background: currentColor;
	transition: transform .25s ease, opacity .2s ease, top .2s ease;
}
.tb-hamburger-bars::before { top: 0; }
.tb-hamburger-bars span    { top: 50%; transform: translateY(-50%); }
.tb-hamburger-bars::after  { bottom: 0; }

/* Morph to X when drawer is open */
body[data-menu-open="true"] .tb-hamburger-bars::before {
	top: 50%; transform: translateY(-50%) rotate(45deg);
}
body[data-menu-open="true"] .tb-hamburger-bars::after {
	bottom: 50%; transform: translateY(50%) rotate(-45deg);
}
body[data-menu-open="true"] .tb-hamburger-bars span {
	opacity: 0;
}

/* Responsive — show hamburger, hide nav-links below 1100px */
@media (max-width: 1099px) {
	.tbh-canonical-nav-links {
		display: none !important;
	}
	.tb-hamburger {
		display: inline-flex !important;
	}
}

/* Make sure backdrop + drawer get the right stacking above everything */
.tb-mm-backdrop { z-index: 80 !important; }
.tb-mm          { z-index: 90 !important; }

/* Lock scroll on body when menu open */
body[data-menu-open="true"] {
	overflow: hidden !important;
}