/*
 * SmokTek header/navigation styles (Phase 5.1)
 *
 * Covers: the version-controlled logo (see functions.php smoktek_site_branding),
 * the compliance warning bar (rendered from the smoktek-core plugin) and the
 * rotating promo bar (rendered from this theme) below it.
 */

/* Logo — measured against the live Shopify header (2026-07-24):
 * rendered 263x70 in a ~92px-tall header. The old max-height:40px rule
 * was the biggest single contributor to the header "feeling tiny" -
 * this file's own logo asset is 600x160 (3.75:1), matching Shopify's
 * measured ratio almost exactly, so height:70px + width:auto lands on
 * ~263px wide with no cropping/distortion.
 *
 * Shoptimizer generates its OWN inline <style> block (no href, so it's
 * not a file we can edit) that forces header-4's logo to a fixed 30px
 * via `.header-4 .site-header .custom-logo-link img` - specificity
 * (0,3,1), higher than a plain `.custom-logo-link .custom-logo` rule
 * (0,2,0), confirmed by enumerating document.styleSheets live (that
 * 30px rule is exactly why the first version of this fix had no
 * effect). Matching its specificity here, not !important, so this
 * stays overridable the normal way if header-4's layout ever changes. */
.header-4 .site-header .custom-logo-link .custom-logo,
.custom-logo-link .custom-logo {
	height: 70px;
	width: auto;
	max-height: none;
}

/*
 * header-4 single-row layout defect fix (found in Phase 5.1 staging verification).
 *
 * At ~1024px, the 6 top-level nav items don't all fit on one line, so the
 * browser wraps the overflow onto a second line inside the nav <ul> (normal,
 * expected behavior for display:inline-block menu items with insufficient
 * width). The bug: header-4's own container CSS (main.css, fixed to a
 * single-row height) doesn't grow to fit that second line, so the wrapped
 * items visually spill out of the header and overlap the page content below
 * it instead of pushing it down. Confirmed live in a real browser (computed
 * heights + bounding boxes) before writing this fix, not guessed.
 *
 * Fix: let these containers size to their actual content instead of a fixed
 * height, so wrapping (however many items it involves, at whatever width)
 * always displays cleanly. !important is used deliberately here: overriding
 * fixed heights set on the same class names in the parent theme's compiled,
 * minified stylesheet needs equal-or-higher specificity, and !important is
 * less fragile than chaining extra selectors that could break if the parent
 * theme's own markup ever changes.
 */
.header-4 .header-4-container,
.header-4 .main-header.col-full,
.header-4 .main-navigation {
	height: auto !important;
}

.header-4 .col-full-nav {
	height: auto !important;
	flex-wrap: wrap;
}

/* Nav type — measured against the live Shopify header: 14px/500 (the
 * parent's own typography defaults were rendering 15px/600 here),
 * confirmed still correct in the P2 re-measurement pass (2026-07-27).
 * Item spacing measured separately: Shopify's nav items sit a
 * consistent 12px apart; ours measured only 5px (all coming from the
 * parent's own ~7.7px link padding-right, not a margin/gap we
 * control) - bumped to a flat 12px padding-right to match. */
.main-navigation ul li.menu-item > a {
	font-size: 14px;
	font-weight: 500;
	padding-right: 12px;
}

/* header-4's nav is `.primary-navigation { position:absolute; left:0;
 * width:100%; text-align:center }` (main.css) - it centers on the
 * full-viewport `.header-4-container`, not the narrower 1170px-capped
 * `.header-4-inner` row the logo/icons actually sit in. An earlier
 * attempt here reduced nav's available width enough (~680px) that all
 * 6 items no longer fit on one line at 1440px, and because nav is
 * position:absolute its wrapped second line doesn't push the header
 * taller - it overflows onto the promo bar/hero below instead.
 *
 * The header-regression fix (2026-07-27) restored the nav menu's 3
 * broken top-level items (DISPOSABLE VAPES, DEVICES & KITS, NICOTINE
 * POUCHES - previously silently dropped, see customizer-settings.md),
 * making the centered 6-item menu ~767px wide. At the parent's stock
 * 1170px `.header-4-inner` cap, the fixed gap between the logo's right
 * edge and the free-shipping-badge/search/account/cart cluster's left
 * edge is only ~576px - nav genuinely cannot fit there at ANY padding
 * value (confirmed by measuring both edges live, not just estimating:
 * padding that clears one side reliably pushes the whole centered
 * block into the other). Padding alone can't fix a box that's smaller
 * than its content.
 *
 * Real fix: widen `.header-4-inner` itself (below) so logo and icons
 * sit far enough apart for the full nav to fit between them. But that
 * max-width only helps once the viewport is wide enough for it to
 * actually apply (>=1500px) - below that, .header-4-inner is capped to
 * the viewport itself with zero side margin, same as before the
 * widening, and the fit is tight again (~4.5px measured at 1440px,
 * "NICOTINE POUCHES" touching the truck icon). padding-right:60px
 * (vs. padding-left's 10px) shifts the centered block left just
 * enough to clear that case too, confirmed live at 1440px/1920px
 * without reopening the logo-side gap the first (reverted)
 * padding-right:420px attempt caused. */
.header-4 .primary-navigation {
	padding-left: 10px;
	padding-right: 60px;
}

/* Matches the parent's own selector (`.header-4:not(.full-width-header)
 * .header-4-inner`, main.min.css) exactly, at equal specificity - live
 * measurement showed the parent's 1170px still winning despite this
 * child stylesheet loading later in the cascade (confirmed via the
 * <link> order in the served HTML, so it isn't a load-order mistake;
 * left unresolved rather than assumed). `!important` sidesteps it the
 * same way the header-4 height overrides above already do for this
 * exact class of parent-compiled-CSS conflict. 1500px (not the shared
 * --smoktek-container 1360px used elsewhere on the page - that token
 * solves a different, unrelated layout problem) is the smallest round
 * value that clears both the logo and the icon cluster with a
 * comfortable margin at 1920px, confirmed live. */
.header-4:not(.full-width-header) .header-4-inner {
	max-width: 1500px !important;
}

/* Free-shipping badge (Phase 5.3 header-regression fix) — values are a
 * direct copy of the live Shopify header's own compiled CSS (captured
 * 2026-07-27): 13px/700 "Free Shipping" in near-black, 13px/600 "On
 * Orders $89+" underlined in the hover-orange token color, 10px icon/
 * label gap, hidden entirely below 749px (matching Shopify's own
 * `--hide-mobile` breakpoint).
 *
 * Positioning note: `.main-navigation` (the flex child wrapping
 * header-4's nav) collapses to a ZERO-width flex box — its real
 * rendered content, `.primary-navigation`, is `position: absolute`
 * relative to `.header-4-container`, entirely independent of this
 * flex row's layout (a pre-existing header-4 pattern, see the
 * `.header-4 .primary-navigation` rule below). A first attempt at
 * placing this badge via flex `order` alone landed it directly on top
 * of "NICOTINE POUCHES": with nav occupying zero flex space, the
 * badge became the first *visible* item in the row regardless of its
 * order number, coinciding with wherever the absolutely-positioned
 * nav text happened to render. `margin-left: auto` sidesteps this
 * entirely — it pushes the badge (and, via flex order, the search/
 * account/cart icons after it) flush against the row's real right
 * edge, independent of the zero-width nav placeholder. */
.smoktek-free-shipping-badge {
	order: 2;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1.2;
	margin-inline-end: 20px;
}

.header-4 .col-full-nav .search-trigger {
	order: 3;
}

.header-4 .col-full-nav .mobile-extra {
	order: 4;
}

.header-4 .col-full-nav .shoptimizer-myaccount {
	order: 5;
}

.header-4 .col-full-nav .site-header-cart {
	order: 6;
}

.smoktek-free-shipping-badge__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.smoktek-free-shipping-badge__label {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.smoktek-free-shipping-badge__main {
	font-size: 13px;
	font-weight: 700;
	color: #222;
	letter-spacing: -0.01em;
}

.smoktek-free-shipping-badge__highlight {
	font-size: 13px;
	font-weight: 600;
	color: var(--smoktek-color-primary-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media screen and (max-width: 749px) {
	.smoktek-free-shipping-badge {
		display: none !important;
	}
}

/* Compliance warning bar (smoktek-core plugin output). Background
 * measured against the live Shopify announcement bar (2026-07-27):
 * rgb(17,17,17) = #111, not the general-purpose --smoktek-color-text
 * token (#303030) used elsewhere - kept as its own literal since it's
 * a distinct measured value, not a reused brand color. Text, height,
 * and alignment are untouched (compliance wording owned by the
 * smoktek-core plugin, not this file). */
.smoktek-compliance-bar {
	background: #111;
	color: #fff;
}

.smoktek-compliance-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--smoktek-space-2) var(--smoktek-space-4);
	text-align: center;
}

.smoktek-compliance-bar__inner p {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
}

/* Rotating promo bar — corrected against direct measurement of the
 * live Shopify announcement bar (2026-07-24): background is a vivid
 * orange (#FA4A11, NOT the earlier dark guess), height 41px, white
 * 14px/400 text. Position (below the header, above content) is set by
 * the shoptimizer_before_content hook in functions.php, not by CSS. */
.smoktek-promo-bar {
	background: #FA4A11;
	color: #fff;
}

.smoktek-promo-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--smoktek-space-4);
	min-height: 41px;
	display: flex;
	align-items: center;
	gap: var(--smoktek-space-2);
}

.smoktek-promo-bar__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-height: 1.4em;
}

/* Prev/next controls — present on the live Shopify announcement bar
 * (2026-07-27 measurement): 44x44 transparent buttons, white chevrons,
 * flanking the centered rotating text. Manual navigation restarts the
 * auto-rotate timer rather than fighting it (promobar.js); reduced-
 * motion only disables the automatic interval, never these controls,
 * so keyboard/click navigation always works. */
.smoktek-promo-bar__arrow {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.smoktek-promo-bar__arrow:hover,
.smoktek-promo-bar__arrow:focus-visible {
	opacity: 0.8;
}

.smoktek-promo-bar__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.smoktek-promo-bar__item[aria-hidden="false"] {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.smoktek-promo-bar__item {
		transition: none;
	}
}