/* HexWeb Honeycomb Menu — plugin stylesheet (pill nav design).
   Reads the theme's own color tokens where sensible; falls back to
   values close to the reference screenshot (near-black pill,
   white text) so it still looks right if those tokens are absent. */

header.hexhc-active {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}

/* Hides the theme's original nav while this plugin is active. Added
   to <header> by the JS, not by editing header.php — deactivating
   the plugin (which stops the JS from running) restores it. */
header.hexhc-active #primaryNav,
header.hexhc-active .live-demo-btn {
	display: none !important;
}

.hexhc-mark {
	width: 30px;
	height: 30px;
	display: inline-block;
	flex-shrink: 0;
	margin-right: 8px;
	vertical-align: middle;
}

.hexhc-nav-right {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
}

#hexhc-pill {
	display: flex;
	align-items: center;
	gap: 4px;
	background: #141414;
	border-radius: 999px;
	padding: 6px;
	position: relative;
	font-family: var(--mono, ui-monospace, monospace);
	/* Layered shadow: the first two are the pill's own depth (dark
	   drop shadow + a hairline inner highlight along the top edge).
	   The third is the gold backlight — a soft, wide-spread glow
	   bleeding outward and down, like the reference screenshot's
	   light pooling under the bar. */
	box-shadow:
		0 8px 24px rgba(0, 0, 0, .45),
		inset 0 1px 0 rgba(255, 255, 255, .04),
		0 24px 60px -8px rgba(255, 233, 143, .38);
}

.hexhc-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	color: var(--ink, #fff);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.hexhc-item:hover,
.hexhc-item[aria-expanded="true"] {
	background: rgba(255, 255, 255, .08);
}
.hexhc-item svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.hexhc-item.hexhc-primary {
	color: var(--gold-bright, #ffe98f);
}

/* Menu trigger — themed teal (brand accent, matches the logo mark
   and the rest of the site's link color), turns gold like the CTA
   items once the panel is open, instead of staying plain white. */
.hexhc-item.hexhc-menu-btn {
	color: var(--teal, #8fe8c8);
}
.hexhc-item.hexhc-menu-btn[aria-expanded="true"] {
	color: var(--gold-bright, #ffe98f);
	background: rgba(255, 233, 143, .12);
}

#hexhc-dropdown {
	position: fixed;
	z-index: 9999;
	background: #141414;
	border-radius: 16px;
	padding: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
	display: none;
	min-width: 220px;
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	animation: hexhc-fadein .15s ease;
}
#hexhc-dropdown.hexhc-open { display: block; }
#hexhc-dropdown .hexhc-item {
	width: 100%;
	border-radius: 10px;
	justify-content: flex-start;
}

#hexhc-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: transparent;
	display: none;
	cursor: default;
}
#hexhc-overlay.hexhc-open { display: block; }

@keyframes hexhc-fadein {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Mobile: the header row (Services / Why Us / Process / Contact)
   has nowhere to go on a narrow screen — the pill just overflows
   off-canvas instead of wrapping. Below 640px, collapse to just the
   Menu button; every link (including these) is still reachable
   through its dropdown, which already contains the full list. */
@media (max-width: 640px) {
	#hexhc-pill a.hexhc-item {
		display: none;
	}
	#hexhc-pill {
		padding: 4px;
	}
}

/* Desktop: keep the nav pinned to the top of the viewport while
   scrolling, instead of scrolling away with the rest of the page. */
@media (min-width: 641px) {
	header.hexhc-active {
		position: sticky !important;
		top: 0;
		z-index: 100;
	}
}