/**
 * HiTek Header — structural overrides only.
 *
 * Most styling (colors, typography, button variant) lives on block attributes
 * in parts/header.html. This file handles what block attributes cannot express:
 *   1. Logo swap per breakpoint (no block-level visibility-per-viewport attr)
 *   2. Force hamburger at 1280px (WP default collapses at ~600px)
 *   3. Mobile drawer structural overrides (vertical stack, chevron, submenu toggle)
 *   4. Red square bullet before submenu items (pseudo-element)
 *
 * Breakpoint: 1280px — nav collapses to hamburger below this width.
 */

header.wp-block-template-part:has(.hitek-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.hitek-header-inner {
	align-items: center;
	min-height: 64px;
	width: 100%;
}

/* ----- Desktop padding override (block padding is fixed per block attr) ------ */
@media (min-width: 1280px) {
	.hitek-header {
		padding-left: var(--wp--preset--spacing--70) !important;
		padding-right: var(--wp--preset--spacing--70) !important;
	}
	.hitek-header-inner {
		min-height: 126px;
	}
}

/* At 1280-1439 the spacing|70 value evaluates to ~57px each side, leaving
 * the nav ~34px too narrow to fit all 5 labels on one row (the long
 * "AI, Integrations & Custom Applications" pushes total content past the
 * available width and "Resources" wraps to a second line). Drop to spacing|50
 * (~40px) at this range to free the missing pixels, AND tighten the per-item
 * left padding from 12px to 4px (the 12px is breathing room that's only needed
 * once the layout has elbow room at >=1440). */
@media (min-width: 1280px) and (max-width: 1439.98px) {
	.hitek-header {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
	.hitek-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-left: 4px !important;
	}
}

/* Prevent the Contact us button text from wrapping when the header is tight. */
@media (min-width: 1280px) {
	.hitek-contact-btn .wp-block-button__link {
		white-space: nowrap;
	}
}

/* ----- Logo swap ------------------------------------------------------- */
.hitek-logo-desktop { display: none; }
.hitek-logo-mobile  { display: block; margin: 0; }

@media (min-width: 1280px) {
	.hitek-logo-desktop { display: block; margin: 0; }
	.hitek-logo-mobile  { display: none; }
}

/* ----- Force hamburger at 1280px (WP default is ~600px) ---------------- */
@media (max-width: 1279.98px) {
	.hitek-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.hitek-primary-nav .wp-block-navigation__responsive-container-open {
		display: flex;
		background: transparent;
		border: 0;
		padding: 0;
		width: 24px;
		height: 24px;
		align-items: center;
		justify-content: center;
	}

	/* Suppress the UA focus ring on click (renders as a white+blue ring on
	 * macOS Chrome). Keyboard users still get a focus indicator. */
	.hitek-primary-nav .wp-block-navigation__responsive-container-open:focus:not(:focus-visible) {
		outline: 0;
	}
	.hitek-primary-nav .wp-block-navigation__responsive-container-open:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	/* Replace WP's default 2-bar hamburger with a 3-line icon (per Figma) */
	.hitek-primary-nav .wp-block-navigation__responsive-container-open svg {
		display: none;
	}
	.hitek-primary-nav .wp-block-navigation__responsive-container-open::before {
		content: "";
		width: 22px;
		height: 14px;
		background-image:
			linear-gradient(currentColor, currentColor),
			linear-gradient(currentColor, currentColor),
			linear-gradient(currentColor, currentColor);
		background-size: 100% 2px;
		background-position: left top, left center, left bottom;
		background-repeat: no-repeat;
	}

	/* Mobile header shows only logo + hamburger; CTA lives inside the drawer.
	 * !important needed to beat core wp-block-buttons-is-layout-flex. */
	.hitek-header-inner > .hitek-header-cta {
		display: none !important;
	}
}

/* Drawer CTA is hidden above 1280px (desktop uses the header-bar CTA instead) */
@media (min-width: 1280px) {
	.hitek-drawer-cta {
		display: none !important;
	}
}

/* Drawer CTA styling — shown only when the mobile drawer is open.
 * Nav renders its inner wp:buttons as a sibling of the <ul>. Per Figma the
 * Contact us button is inline (auto width) and left-aligned, not full-width. */
@media (max-width: 1279.98px) {
	.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .hitek-drawer-cta {
		display: flex;
		justify-content: flex-start;
		margin-top: 24px;
	}
}

/* At/above 1280px: show inline nav, suppress overlay toggles */
@media (min-width: 1280px) {
	.hitek-primary-nav .wp-block-navigation__responsive-container {
		display: flex !important;
		background: transparent !important;
		padding: 0 !important;
		position: static !important;
		width: auto !important;
	}
	.hitek-primary-nav .wp-block-navigation__responsive-container-open,
	.hitek-primary-nav .wp-block-navigation__responsive-container-close {
		display: none !important;
	}
	.hitek-primary-nav .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: row;
		align-items: center;
	}

	/* Figma nav item spec (node 32935:583): px:4, py:12, h:48, plus inner lvl-1 pl:8.
	 * The 12px left padding = 4px wrapper + 8px lvl-1 pl; 4px right matches wrapper. */
	.hitek-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 12px 4px 12px 12px;
	}

	/* Chevron on desktop: Figma shows a 24x24 chevron with 4px gap from the label.
	 * WP default is tiny and overlaps the button via negative margin — reset both. */
	.hitek-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
		width: 24px;
		height: 24px;
		margin: 0 0 0 4px;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.hitek-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon svg {
		width: 12px;
		height: 12px;
	}
}

/* ----- Mobile drawer structural overrides ------------------------------ */
/* These only take effect when .is-menu-open is on (drawer visible).
 * Top padding = 40px (drawer edge) + 50px (logo height) + 32px (Figma gap)
 * so the absolutely-positioned logo doesn't collide with the first nav row. */
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 122px var(--wp--preset--spacing--50) 40px;
}

/* Figma node 33115:6456 — HiTek mark top-left of the drawer overlay. */
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	top: 40px;
	left: var(--wp--preset--spacing--50);
	width: 39px;
	height: 50px;
	background-image: url("/wp-content/uploads/2026/04/logo-mobile.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
	pointer-events: none;
	z-index: 2;
}

/* Pin the close (X) to top-right of the overlay (aligned with the logo row).
 * WP core positions it absolute to .wp-block-navigation__responsive-dialog
 * which sits inside our 122px top padding — pull it back up. */
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: -69px;
	right: 0;
}

/* Drawer contents: vertical stack — only scoped to top-level container,
 * so nested submenu containers stay controlled by aria-expanded. */
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px;
	align-items: stretch;
	width: 100%;
}

/* Each top-level nav item is a full-width row (flex-row is forced —
 * WP overlay CSS otherwise makes it column). Chevron sibling sits on the right. */
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
}

/* Top-level button/link: larger, left-aligned, takes remaining space */
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 1.1875rem;
	flex: 1;
	text-align: left;
	background: transparent;
	border: 0;
}

/* Force chevron visible in drawer (WP hides it by default on mobile overlay) */
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
	display: inline-flex !important;
	align-items: center;
	padding: 12px 0;
}
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	transition: transform 200ms ease;
}
.hitek-primary-nav .wp-block-navigation-submenu > button[aria-expanded="true"] + .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* Drawer focus reset */
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: 0;
	box-shadow: none;
}

/* Submenu container in drawer: hide by default, reveal when button is expanded */
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation__submenu-container {
	display: none;
	position: static !important;
	background: transparent;
	padding: 8px 0;
	min-width: 0;
	width: 100%;
	box-shadow: none;
	opacity: 1;
	flex-direction: column;
}
.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > button[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
}

/* ----- Submenu items: red square bullet + sub-items are not uppercase --
 * white-space: nowrap forces each label onto a single line so the submenu
 * container sizes to the longest label per menu (variable width per dropdown)
 * instead of all dropdowns being padded to fit the longest label site-wide. */
.hitek-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	text-transform: none;
	line-height: 1.3;
	white-space: nowrap;
}

/* Mobile drawer submenu: left-align items.
 *
 * WP core sets `align-items: center` on `.wp-block-navigation-item` (a flex
 * column) which centers the shrink-to-content `.content` horizontally inside
 * its full-width LI. Figma (33079:16907–16914) shows red square + label
 * flush-left under the parent item. Pull the LI to flex-start and zero the
 * default 16px left padding on the content. */
@media (max-width: 1279.98px) {
	.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		align-items: flex-start;
		width: 100%;
	}
	.hitek-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-left: 0;
	}
}

.hitek-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	background: var(--wp--preset--color--theme-06);
	flex-shrink: 0;
}

/* Desktop submenu dropdown panel (only applies at >= 1280px since below it renders inline).
 * Width is intentionally not pinned — labels use white-space:nowrap (above)
 * so each submenu container sizes to its own longest label. */
@media (min-width: 1280px) {
	.hitek-primary-nav .has-child .wp-block-navigation__submenu-container {
		background: var(--wp--preset--color--theme-07);
	}
}

/* ============================================================
 * MEGAMENU — Services dropdown only (Figma node 33077:3806)
 * ------------------------------------------------------------
 * The Services <li> is tagged with .hitek-megamenu by hitek-megamenu.js.
 * The other 4 dropdowns retain the compact list styling above.
 *
 * Layout: full-viewport-width dark panel below the 126px nav bar,
 * 3-column card grid with 25x25 red-square icon + uppercase title +
 * 12px gray description per card. Active trigger gets #373737 bg.
 * ============================================================ */
@media (min-width: 1280px) {
	/* Anchor the megamenu panel to the header viewport edges. The .hitek-header
	 * is alignfull, so making it position:relative gives left:0/right:0 on the
	 * panel a full-viewport span. WP core sets position:relative on the Services
	 * <li> AND on the wrapping nav UL, which would otherwise become the panel's
	 * containing block — force every ancestor between the panel and .hitek-header
	 * to position:static (only when a megamenu is present, via :has()). */
	.hitek-header {
		position: relative;
	}
	.hitek-megamenu.has-child,
	.wp-block-navigation__container:has(> .hitek-megamenu),
	.wp-block-navigation__responsive-container-content:has(.hitek-megamenu),
	.wp-block-navigation__responsive-dialog:has(.hitek-megamenu),
	.wp-block-navigation__responsive-container:has(.hitek-megamenu),
	.hitek-primary-nav:has(.hitek-megamenu) {
		position: static !important;
	}

	/* Active trigger background — slate gray when this panel is open */
	.hitek-megamenu > .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
		background: #373737;
	}

	/* Megamenu panel: full viewport width via left:0/right:0 against the
	 * .hitek-header (set position:relative above). top:100% drops it just
	 * below the 126px nav bar.
	 *
	 * Padding: 24px top / 37px bottom from Figma. Left/right padding scales
	 * the card-grid inner edge to a 1280px content rail (78px Figma offset
	 * inside the rail), with a 78px floor on narrower viewports. */
	.hitek-megamenu > .wp-block-navigation__submenu-container {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: 100% !important;
		width: auto !important;
		min-width: 0;
		max-width: none;
		background: var(--wp--preset--color--theme-07);
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		box-shadow: none;
		opacity: 1;
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 44px;
		row-gap: 16px;
		padding: 24px max(78px, calc((100vw - 1280px) / 2 + 78px)) 37px;
	}

	/* Each card is one grid cell; reset the LI's own flex/center settings
	 * coming from earlier rules so the card content can take over. */
	.hitek-megamenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: block;
		width: 100%;
		margin: 0;
		align-items: stretch;
	}

	/* Card content: 40px icon column + flexible label/description column.
	 * Override the existing inline-flex / nowrap rules from the compact-list
	 * styling above so titles can wrap and a 2-row card layout can render. */
	.hitek-megamenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: grid !important;
		grid-template-columns: 40px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 8px;
		row-gap: 4px;
		padding: 16px 8px;
		align-items: center;
		gap: 8px;
		white-space: normal;
		line-height: 1.2;
		text-decoration: none;
	}

	/* Force description visibility — WP core hides .wp-block-navigation-item__description
	 * by default on navigation-link items (only renders in submenu type). */
	.hitek-megamenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
		display: block !important;
	}

	/* 25x25 red square icon, centered inside its 40x40 grid cell.
	 * Overrides the 15x15 bullet from the compact-list rule above. */
	.hitek-megamenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
		content: "";
		width: 25px;
		height: 25px;
		background: var(--wp--preset--color--theme-06);
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
		justify-self: center;
	}

	.hitek-megamenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		grid-column: 2;
		grid-row: 1;
		font-family: var(--wp--preset--font-family--avenir-next-condensed);
		font-size: 19px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.38px;
		text-transform: uppercase;
		color: #ffffff;
	}

	.hitek-megamenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
		grid-column: 2;
		grid-row: 2;
		font-family: var(--wp--preset--font-family--poppins);
		font-size: 12px;
		font-weight: 400;
		line-height: 1.4;
		letter-spacing: 0;
		text-transform: none;
		color: #9ca3af;
	}
}