/*
 * The Boss Animated Dock Header
 * Compact, dark, high-contrast, content-sized floating dock — segmented
 * item pills, cream active state, thin line icons, mono typography.
 * All classes are prefixed bad-dock to avoid theme/plugin collisions.
 *
 * Isolation strategy: NOT a blanket `all: revert`. Instead, every
 * property a theme or Elementor's global CSS is likely to set on bare
 * <header>/<nav>/<ul>/<li>/<a>/<svg> (margin, padding, list-style,
 * color, text-decoration, background, font, box-sizing, and icon
 * sizing) is explicitly reset, scoped under .bad-dock-wrap, with
 * !important only on the specific properties that must never lose to
 * a theme/Elementor rule. Colors are still driven by the CSS custom
 * properties set inline per-instance (see class-bad-render.php), so
 * the admin/Elementor color controls keep working normally.
 */

.bad-dock-wrap,
.bad-dock-wrap * {
	box-sizing: border-box;
}

/* ---- Structural reset: neutralize theme/Elementor defaults on the
   bare semantic tags this widget uses ------------------------------ */
.bad-dock-wrap header,
.bad-dock-wrap nav {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	float: none !important;
	position: static;
	max-width: none !important;
	width: auto;
}

.bad-dock-wrap .bad-dock__list,
.bad-dock-wrap .bad-dock__submenu {
	margin: 0 !important;
	list-style: none !important;
	border: 0;
}
.bad-dock-wrap .bad-dock__list > li,
.bad-dock-wrap .bad-dock__submenu > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 0 !important;
	background: none !important;
}

.bad-dock-wrap a,
.bad-dock-wrap .bad-dock__link {
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none;
	background-image: none !important;
	margin: 0;
}
.bad-dock-wrap a:visited,
.bad-dock-wrap a:hover,
.bad-dock-wrap a:focus,
.bad-dock-wrap a:active {
	text-decoration: none !important;
}

.bad-dock-wrap span {
	margin: 0;
	padding: 0;
	background: none;
}

.bad-dock-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	pointer-events: none; /* let the inner dock capture events; wrapper stays passthrough */
	line-height: 1;
}

.bad-pos-sticky   { position: sticky; top: var(--bad-top, 12px); }
.bad-pos-fixed    { position: fixed; top: var(--bad-top, 12px); left: 0; right: 0; }
.bad-pos-absolute { position: absolute; top: var(--bad-top, 12px); left: 0; right: 0; }
.bad-pos-normal   { position: relative; }

/* Account for the WordPress admin toolbar (32px desktop / 46px <783px)
   without hardcoding a value that breaks logged-out visitors. */
body.admin-bar .bad-pos-fixed,
body.admin-bar .bad-pos-sticky {
	top: calc(var(--bad-top, 12px) + 32px);
}
@media (max-width: 782px) {
	body.admin-bar .bad-pos-fixed,
	body.admin-bar .bad-pos-sticky {
		top: calc(var(--bad-top, 12px) + 46px);
	}
}

.bad-dock-wrap .bad-dock {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	width: max-content !important;
	max-width: calc(100vw - 24px) !important;
}

.bad-dock-wrap .bad-dock__nav { display: inline-flex; max-width: 100%; }

/*
 * Optional local font: if a licensed monospace display font file is
 * placed at assets/fonts/bad-dock-mono.woff2, it will be picked up
 * here automatically. No font asset ships with the plugin by default
 * (none was supplied), so the stack below falls back cleanly to the
 * system UI monospace font — never a random substitute webfont.
 */
@font-face {
	font-family: 'Boss Dock Mono';
	src: url('../fonts/bad-dock-mono.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
}

.bad-dock-wrap .bad-dock__list {
	padding: 4px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
	gap: 3px !important;
	width: max-content !important;
	max-width: calc(100vw - 24px);
	min-height: 38px;

	background: var(--bad-dock-bg, rgba(14,14,14,0.86)) !important;
	border: 1px solid var(--bad-dock-border, #292929) !important;
	border-radius: var(--bad-dock-radius, 11px);
	backdrop-filter: blur(var(--bad-dock-blur, 18px)) saturate(75%);
	-webkit-backdrop-filter: blur(var(--bad-dock-blur, 18px)) saturate(75%);
	box-shadow:
		inset 0 1px rgba(255,255,255,0.035),
		0 12px 34px rgba(0,0,0,0.48);
	transition: background-color .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* Scroll-state blend: at the very top of the page the dock sits on a
   lighter, more translucent surface so it doesn't read as a harsh dark
   rectangle over a hero section; past the configured scroll threshold
   it smoothly settles into its full background for readability. Only
   applied when data-scroll-blend="1" (default on) — see
   bad-dock-engine.js for the scroll listener that toggles .is-at-top. */
.bad-dock-wrap[data-scroll-blend="1"].is-at-top .bad-dock__list {
	background: var(--bad-scroll-top-bg, rgba(14,14,14,0.35)) !important;
	border-color: transparent !important;
	backdrop-filter: blur(var(--bad-scroll-top-blur, 10px)) saturate(75%);
	-webkit-backdrop-filter: blur(var(--bad-scroll-top-blur, 10px)) saturate(75%);
	box-shadow: none;
}

.bad-dock-wrap .bad-dock__list,
.bad-dock-wrap .bad-dock__link,
.bad-dock-wrap .bad-dock__label {
	font-family: 'Boss Dock Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.bad-dock-wrap .bad-dock__item {
	display: block; /* not list-item — avoids a ::marker box */
	position: relative;
	flex: 0 0 auto;
	/* Resting size lives HERE, on the actual element the JS engine
	   animates (it queries .bad-dock__item, reads this as baseWidth/
	   baseHeight via getBoundingClientRect, then drives it via
	   el.style.width/height/transform during the spring animation).
	   Deliberately NOT !important, so the JS's plain inline style —
	   which is lower cascade priority than an !important stylesheet
	   rule but higher than a normal one — can override it every frame. */
	width: var(--bad-item-width, 94px);
	height: 28px;
	transform-origin: 50% 0;
	will-change: width, height, transform;
}
.bad-dock-wrap .bad-dock__subitem { display: block; }
/* The brand item and any item with a submenu caret need their own
   natural width rather than the fixed 94px nav-item width. */
.bad-dock-wrap .bad-dock__item--brand { width: auto; }

.bad-dock-wrap .bad-dock__link {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 5px;
	/* Fills whatever box .bad-dock__item currently has — at rest
	   (94x28) or mid-animation (JS-driven, larger). This is what makes
	   the visible pill (background/border/radius live here) actually
	   grow along with the animated parent, instead of a static pill
	   floating inside a resizing-but-invisible list item. */
	width: 100%;
	height: 100%;
	padding: 0 9px;
	border-radius: 7px;
	color: var(--bad-item-inactive, #858580) !important;
	background: var(--bad-item-bg, rgba(21,21,20,0.90));
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: 0.10em !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	overflow: hidden;
	border: 1px solid transparent;
	box-sizing: border-box;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.bad-dock-wrap .bad-dock__icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 13px !important;
	height: 13px !important;
	min-width: 13px !important;
	min-height: 13px !important;
	flex: 0 0 13px;
	opacity: var(--bad-icon-opacity, 0.62);
	transition: opacity .18s ease;
}
.bad-dock-wrap .bad-dock__item.is-proximate .bad-dock__icon,
.bad-dock-wrap .bad-dock__item.is-active .bad-dock__icon,
.bad-dock-wrap .bad-dock__link:hover .bad-dock__icon,
.bad-dock-wrap .bad-dock__link:focus-visible .bad-dock__icon {
	opacity: 1;
}
.bad-dock-wrap .bad-dock__icon svg {
	display: block !important;
	width: 13px !important;
	height: 13px !important;
	max-width: 13px !important;
	max-height: 13px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

/* Proximity / hover state (temporary, not the active-page state) */
.bad-dock-wrap .bad-dock__item.is-proximate .bad-dock__link,
.bad-dock-wrap .bad-dock__link:hover,
.bad-dock-wrap .bad-dock__link:focus-visible {
	color: var(--bad-item-hover, #ECECE8) !important;
	background: var(--bad-item-hover-bg, rgba(27,27,26,0.94));
	border-color: var(--bad-item-hover-border, #41413E);
	box-shadow: 0 7px 16px rgba(0,0,0,0.26);
}

/* Active PAGE state — clearly selected, independent of proximity. */
.bad-dock-wrap .bad-dock__item.is-active > .bad-dock__link {
	background: var(--bad-active-bg, #E8E8E3) !important;
	color: var(--bad-active-text, #111111) !important;
	border-color: var(--bad-active-bg, #E8E8E3) !important;
	box-shadow: 0 7px 18px rgba(0,0,0,0.28);
}
.bad-dock-wrap .bad-dock__item.is-active .bad-dock__icon svg {
	stroke: var(--bad-active-text, #111111) !important;
}

.bad-dock-wrap .bad-dock__link:focus-visible {
	outline: 2px solid var(--bad-accent, #12E19F);
	outline-offset: 2px;
}

/* Brand / logo item — text mode stays a compact pill like any nav
   item; image/mark mode becomes a fixed 28x28 cream swatch, matching
   the original Sable logo segment (a colored block, not a text pill). */
.bad-dock-wrap .bad-dock__item--brand .bad-dock__link {
	padding: 0 10px;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	color: var(--bad-item-hover, #ECECE8) !important;
}
.bad-dock-wrap .bad-dock__item--brand-square {
	width: 28px; /* resting size on the LI — the JS-animated element */
	height: 28px;
}
.bad-dock-wrap .bad-dock__item--brand-square .bad-dock__link {
	padding: 0 !important;
	background: var(--bad-logo-bg, #E8E8E3) !important;
	border-color: transparent !important;
}
.bad-dock-wrap .bad-dock__item--brand-square.is-proximate .bad-dock__link,
.bad-dock-wrap .bad-dock__item--brand-square .bad-dock__link:hover,
.bad-dock-wrap .bad-dock__item--brand-square .bad-dock__link:focus-visible {
	background: var(--bad-logo-bg, #E8E8E3) !important; /* swatch stays put — no dark hover bg for a light logo tile */
	box-shadow: 0 7px 18px rgba(0,0,0,0.28);
}
.bad-dock-wrap .bad-dock__logo-img { display: block; width: 100%; height: 100%; border-radius: 4px; object-fit: contain; }
.bad-dock-wrap .bad-dock__logo-mark svg { width: 15px; height: 15px; display: block; }
.bad-dock-wrap .bad-dock__logo-text { font-size: 10px !important; white-space: nowrap !important; }

/* Submenu (dropdown) — must not break the spring interaction */
.bad-dock-wrap .bad-dock__item.has-children > .bad-dock__link::after {
	content: '';
	width: 5px; height: 5px;
	border-right: 1.2px solid currentColor;
	border-bottom: 1.2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 2px;
	opacity: .6;
}
.bad-dock-wrap .bad-dock__submenu {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 4px;
	min-width: 160px;
	width: max-content;
	background: var(--bad-dock-bg, rgba(14,14,14,0.86)) !important;
	border: 1px solid var(--bad-dock-border, #292929) !important;
	border-radius: 10px;
	backdrop-filter: blur(var(--bad-dock-blur, 18px)) saturate(75%);
	box-shadow: 0 12px 34px rgba(0,0,0,0.48);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .16s ease;
}
.bad-dock-wrap .bad-dock__item.has-children:hover > .bad-dock__submenu,
.bad-dock-wrap .bad-dock__item.has-children:focus-within > .bad-dock__submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.bad-dock-wrap .bad-dock__subitem a {
	display: block !important;
	padding: 7px 10px;
	border-radius: 6px;
	color: var(--bad-item-inactive, #858580) !important;
	font-size: 10px !important;
	letter-spacing: 0.08em !important;
	white-space: nowrap !important;
}
.bad-dock-wrap .bad-dock__subitem a:hover,
.bad-dock-wrap .bad-dock__subitem a:focus-visible { color: var(--bad-item-hover, #ECECE8) !important; background: var(--bad-item-hover-bg, rgba(27,27,26,0.94)); }
.bad-dock-wrap .bad-dock__subitem.is-active a { color: var(--bad-active-text, #111) !important; background: var(--bad-active-bg, #E8E8E3) !important; }

/* Responsive visibility flags, set per nav item */
@media (min-width: 1025px) { .bad-dock-wrap .bad-hide-desktop { display: none !important; } }
@media (min-width: 601px) and (max-width: 1024px) { .bad-dock-wrap .bad-hide-tablet { display: none !important; } }
@media (max-width: 600px) { .bad-dock-wrap .bad-hide-mobile { display: none !important; } }

/* Tablet: same visual language, compact, no overflow. */
@media (max-width: 1024px) {
	.bad-dock-wrap .bad-dock__list { gap: 2px !important; padding: 4px !important; min-height: 34px; }
	/* Height lives on .bad-dock__item (the JS-animated element) so the
	   link (width/height:100%) tracks it correctly whether or not the
	   spring is active at this breakpoint. */
	.bad-dock-wrap .bad-dock__item:not(.bad-dock__item--brand-square) { height: 28px; }
	.bad-dock-wrap .bad-dock__link { padding: 0 10px; font-size: var(--bad-tablet-font-size, 9.5px) !important; }
	.bad-dock-wrap .bad-dock__icon,
	.bad-dock-wrap .bad-dock__icon svg { width: 12px !important; height: 12px !important; min-width: 12px !important; min-height: 12px !important; }
}

/* Mobile: usability first — never just a scaled-down desktop dock.
   Spring interaction is replaced by a lightweight touch/scroll-driven
   "current item" tracker on coarse-pointer devices (see
   bad-dock-engine.js) rather than disabled outright; this CSS
   guarantees no overflow/breakage regardless. Horizontal scrolling to
   reach every item — brand included, as item #1 — is the intended
   interaction here, not something to design around; readability of
   the (larger, configurable) mobile text takes priority over cramming
   every item into one screen width. */
@media (max-width: 600px) {
	.bad-dock-wrap { padding: 0 10px; }
	/* Content-sized, same as desktop — NOT width:100%. The dock only
	   grows to fill the viewport cap if it genuinely needs to (i.e. the
	   nav items themselves don't fit), in which case it scrolls
	   internally rather than stretching into a full-width navbar. */
	.bad-dock-wrap .bad-dock { width: max-content !important; max-width: calc(100vw - 20px) !important; }
	.bad-dock-wrap .bad-dock__nav { width: auto; max-width: 100%; }
	.bad-dock-wrap .bad-dock__list {
		width: max-content !important;
		max-width: calc(100vw - 20px) !important;
		min-height: 40px;
		gap: 3px !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		scrollbar-width: none;
		/* One-swipe-one-item: the browser only handles VERTICAL panning
		   (page scroll). Horizontal finger movement is left to the JS swipe
		   handler, which snaps exactly one item; the list stays
		   overflow-x:auto only so scrollTo() can position it. */
		touch-action: pan-y;
		overscroll-behavior-x: contain;
	}
	.bad-dock-wrap .bad-dock__list::-webkit-scrollbar { display: none; }
	.bad-dock-wrap .bad-dock__item:not(.bad-dock__item--brand-square) { height: 30px; width: auto; }
	.bad-dock-wrap .bad-dock__link {
		padding: 0 10px;
		font-size: var(--bad-mobile-font-size, 11px) !important;
		letter-spacing: 0.04em !important;
	}
	.bad-dock-wrap .bad-dock__icon { display: none !important; } /* icons hidden on mobile, per source */
	/* Optional: some users may still prefer the older compact-but-
	   brandless mobile dock (pre-v1.9.0 default). Off by default now —
	   the brand participates in the mobile rail as item #1. */
	.bad-dock--hide-brand-text-mobile .bad-dock__item--brand:not(.bad-dock__item--brand-square) { display: none; }
	.bad-dock-wrap .bad-dock__logo-img { width: 26px !important; height: 26px !important; }
	.bad-dock-wrap .bad-dock__item--brand-square { width: 26px; height: 26px; }
	.bad-dock-wrap .bad-dock__submenu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border: none !important; background: transparent !important; width: 100%; display: none; }
	.bad-dock-wrap .bad-dock__item.has-children.is-open .bad-dock__submenu { display: block; }
}

/* Never let the dock's own wrapper cause the page to scroll sideways */
.bad-dock-wrap { overflow: visible; max-width: 100vw; }

/* Reduced motion: disable spring transforms entirely, keep simple fades */
@media (prefers-reduced-motion: reduce) {
	.bad-dock-wrap .bad-dock__item,
	.bad-dock-wrap .bad-dock__link { transition: color .12s ease, background-color .12s ease !important; }
}