/**
 * Sky Web Header Builder (SWHB) — base structural layout.
 * Phase 1: rows / columns / visibility / core element look, styled to the Sky
 * design tokens (--skyweb-*). Sticky effects + per-element dynamic CSS land in
 * Phase 2. Loaded only when builder mode is active.
 */

/* ---- Wrapper & rows ------------------------------------------------------ */
.swhb-header {
	position: relative;
	z-index: 390;
	width: 100%;
}
/* Match the classic navbar look exactly (theme vars flip in dark mode). */
.swhb-main-header {
	position: relative;
	background: var(--skyweb-white-color);
	/* Small breathing space above the header. */
	padding-top: 5px;
}
.swhb-row {
	width: 100%;
	border-bottom: 1px solid var(--skyweb-border-color);
}
.swhb-row:last-child {
	border-bottom: 0;
}
/* Align the header to the SITE CONTENT box. Elementor's content is 1256px wide
   with a 16px inline gutter. The +32px on the cap keeps the CONTENT area exactly
   1256px on wide screens (padding sits outside the cap, matching Elementor), while
   the 16px padding gives the same left/right gutter on mid/narrow screens so the
   header never touches the viewport edges. Override width via --swhb-content-width. */
.swhb-container {
	max-width: calc(var(--swhb-content-width, 1256px) + 32px);
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}
/* Menu grows to fill the pill so the action items are pushed to the right
   (nav left · actions right within one container — matches the classic pill). */
.swhb-nav.navbar__menu { flex: 1 1 auto; }
.swhb-container-fluid {
	width: 100%;
	padding: 0 16px;
	box-sizing: border-box;
}
.swhb-flex-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

/* Row heights (main row = classic navbar height). The per-row "Row height"
   control sets --swhb-row-h; these are the fallbacks per position. */
.swhb-row .swhb-flex-row              { min-height: var(--swhb-row-h, 60px); }
.swhb-row.swhb-top-bar .swhb-flex-row { min-height: var(--swhb-row-h, 40px); }
.swhb-row.swhb-main .swhb-flex-row    { min-height: var(--swhb-row-h, var(--navbar-height, 80px)); }
.swhb-row.swhb-bottom .swhb-flex-row  { min-height: var(--swhb-row-h, 52px); }
/* Sticky row height ("Row height when sticky" → --swhb-row-h-sticky). */
.swhb-header.swhb-sticked .swhb-flex-row { min-height: var(--swhb-row-h-sticky, var(--swhb-row-h, var(--navbar-height, 80px))); }
/* Row flex layouts (3-column rows): flexible middle vs equal sides. */
.swhb-row.swhb-flex-middle .swhb-col-center { flex: 1 1 auto; }
.swhb-row.swhb-flex-middle .swhb-col-left,
.swhb-row.swhb-flex-middle .swhb-col-right   { flex: 0 0 auto; }
.swhb-row.swhb-equal-sides .swhb-col-left,
.swhb-row.swhb-equal-sides .swhb-col-right   { flex: 1 1 0; }
.swhb-row.swhb-equal-sides .swhb-col-center  { flex: 0 0 auto; }
/* Row shadow. */
.swhb-row.swhb-row-shadow { box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
/* Responsive row hide (breakpoint 1200, matches theme nav). */
@media (min-width: 1200px) { .swhb-row.swhb-hide-desktop { display: none; } }
@media (max-width: 1199px) { .swhb-row.swhb-hide-mobile  { display: none; } }

/* ---- Columns ------------------------------------------------------------ */
.swhb-column {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}
.swhb-col-left,
.swhb-mobile-left   { justify-content: flex-start; }
.swhb-col-center,
.swhb-mobile-center { justify-content: center; flex: 1 1 auto; }
.swhb-col-right,
.swhb-mobile-right  { justify-content: flex-end; }
.swhb-empty-column  { flex: 0 0 auto; }
/* On mobile the action cluster sits tight to the far right (logo left /
   actions right). Button border/size/radius/icon come from each element's own
   builder settings (Box + Colors groups), not hard-coded here. */
.swhb-mobile-center { justify-content: flex-end; gap: 6px; }

/* ---- Responsive visibility (breakpoint 1200px, matches theme nav) ------- */
.swhb-hidden-lg { display: none; }
@media (max-width: 1199px) {
	.swhb-visible-lg { display: none; }
	.swhb-hidden-lg  { display: flex; }
	/* "Row height on mobile" → --swhb-row-h-mobile (falls back to the row height). */
	.swhb-row .swhb-flex-row           { min-height: var(--swhb-row-h-mobile, var(--swhb-row-h, 48px)); }
	.swhb-row.swhb-main .swhb-flex-row { min-height: var(--swhb-row-h-mobile, var(--swhb-row-h, 64px)); }
}

/* ---- Color schemes (per row) -------------------------------------------- */
.swhb-row.swhb-color-light {
	background: var(--skyweb-header-dark-bg, #131316);
	color: rgba(255, 255, 255, .82);
}
.swhb-row.swhb-color-light a { color: rgba(255, 255, 255, .82); }
.swhb-row.swhb-color-light a:hover { color: #fff; }

/* ---- Mega-menu / dropdown hover-gap fix --------------------------------- */
/* The dropdown & mega panels anchor to .swhb-main-header, which is taller than
   the visual pill, so top:100% lands ~20px below the pill and the theme's 16px
   hover-bridge can't reach the nav item — the menu closes as the cursor crosses
   the gap. Pull the panel up snug under the pill and extend the invisible bridge
   right up to the nav item so hover survives the trip. Builder-scoped so the
   classic navbar keeps its own values. */
@media (min-width: 1200px) {
	/* Comfortable gap below the pill (not glued to the title)… */
	.swhb-header .navbar__menu .mega-menu,
	.swhb-header .navbar__menu .sub-menu--depth-0 { margin-top: 8px; }
	/* …with the invisible hover-bridge extended to span the WHOLE gap (from the
	   nav item down to the panel) so there is no dead zone that closes the menu. */
	.swhb-header .navbar__menu .mega-menu::after,
	.swhb-header .navbar__menu .sub-menu--depth-0::after { top: -48px; height: 48px; }
}

/* ---- Logo --------------------------------------------------------------- */
.swhb-logo-link { display: inline-flex; align-items: center; }
/* Size is driven by the element's "Logo width" control (max-width, per element).
   max-height is only a safety cap = header row height, so an over-large width is
   ignored rather than blowing up the bar (matches WoodMart's note). */
.swhb-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 60px; }
.swhb-logo-text { font-weight: 700; font-size: 20px; color: var(--skyweb-heading, #fff); }
/* Light/dark logo swap follows the site theme (dark is default). Selectors are
   more specific than `.swhb-logo img` so they actually win. */
.swhb-logo img.swhb-logo-light { display: none; }
html.dark .swhb-logo img.swhb-logo-main { display: none; }
html.dark .swhb-logo img.swhb-logo-light { display: block; }
/* Uploaded sticky logo: swap to it while the header is stuck. */
.swhb-logo .swhb-logo-sticky { display: none; }
.swhb-header.swhb-sticked .swhb-logo .swhb-logo-custom.has-sticky { display: none; }
.swhb-header.swhb-sticked .swhb-logo .swhb-logo-sticky { display: block; }

/* ---- Navigation --------------------------------------------------------- */
/* The menu element emits .navbar__menu > ul.nav (Skyweb_Menu_Walker), so the
   theme's navmenu.css owns the nav/dropdown/mega-menu styling. We only align
   layout inside the header row here. */
.swhb-nav.navbar__menu { display: flex; align-items: center; }

/* ---- Button / CTA (reuses theme .nav-cta styling) ----------------------- */
.swhb-button { display: inline-flex; }

/* ---- Tool-button design presets (shared block; Cart/Account/Search/Toggle/
   Burger). Low specificity + no !important so a per-element Colors/Box override
   always wins. Gray tones read on both dark and light headers. --------------- */
.swhb-tool-design-bordered button, button.swhb-tool-design-bordered { border: 1px solid rgba(128, 128, 128, .35); border-radius: 10px; }
.swhb-tool-design-filled button,   button.swhb-tool-design-filled   { background: rgba(128, 128, 128, .14); border-radius: 10px; }
.swhb-tool-design-round button,    button.swhb-tool-design-round    { border: 1px solid rgba(128, 128, 128, .35); border-radius: 999px; }

/* ---- Action-icon cluster (search / account / cart / burger) ------------- */
.swhb-col-right,
.swhb-mobile-right { gap: 6px; }
.swhb-col-right .swhb-button { margin-left: 6px; }
.swhb-cart,
.swhb-search,
.swhb-account { display: inline-flex; align-items: center; }

/* ---- Text / html / divider / space -------------------------------------- */
.swhb-text { font-size: 13px; line-height: 1.5; }
.swhb-text > :last-child { margin-bottom: 0; }
.swhb-divider {
	width: 1px;
	align-self: stretch;
	min-height: 20px;
	margin: 0 4px;
	background: var(--skyweb-border, rgba(255, 255, 255, .16));
}
.swhb-space { display: block; flex: 0 0 auto; }

/* ---- Tool elements with text (cart/account display variants) ------------ */
.swhb-cart button, .swhb-account button { gap: 6px; }
.swhb-cart-text, .swhb-account-text { font-weight: 600; font-size: 14px; white-space: nowrap; }
.swhb-cart-total { font-weight: 600; font-size: 13px; }
.swhb-cart button:has(.swhb-cart-text), .swhb-cart button:has(.swhb-cart-total),
.swhb-account button:has(.swhb-account-text),
.swhb-search button:has(.swhb-search-text) { width: auto; padding: 0 14px; }
.swhb-search button { gap: 6px; }
.swhb-search-text { font-weight: 600; font-size: 14px; white-space: nowrap; }
.nav-cta .swhb-btn-arrow { margin-left: 6px; font-size: .9em; }

/* ---- Social ------------------------------------------------------------- */
.swhb-social { display: inline-flex; align-items: center; gap: 12px; }
.swhb-social-link { font-size: 16px; line-height: 1; color: inherit; opacity: .8; transition: opacity .18s ease; }
.swhb-social-link:hover { opacity: 1; }

/* ---- Burger (mobile) ---------------------------------------------------- */
/* Structural defaults only — border / radius / size / colours come from the
   Burger element's own builder settings. */
.swhb-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.swhb-burger span {
	display: block;
	height: 2px;
	width: 100%;
	border-radius: 2px;
	background: var(--skyweb-heading, #fff);
	transition: transform .2s ease;
}

/* ---- Overlap (transparent over hero) ------------------------------------ */
.swhb-header.swhb-overcontent {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}
.swhb-header.swhb-overcontent .swhb-main-header { background: transparent; }
.swhb-header.swhb-overcontent .swhb-row { border-bottom: 0; }
/* Default pill in LIGHT mode = exact match to the classic Elementor light pill:
   solid white + 1px cream border, no blur (dark-mode keeps the dark glass). */
html:not(.dark) .swhb-header .swhb-main-center {
	background-color: #ffffff !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: inset 0 0 0 1px #e8e2d6;
}
/* Pill column shouldn't stretch — hug its content. */
.swhb-col-right { flex: 0 0 auto; }

/* ---- Sticky (JS toggles .swhb-sticked; see header-builder.js) ----------- */
.swhb-main-header {
	transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
	will-change: transform;
}
.swhb-header.swhb-sticked .swhb-main-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 391;
	background: var(--skyweb-header-bg, var(--skyweb-bg, #0b0b0c));
}
/* Reserve the vacated space (JS sets --swhb-sticky-h). */
.swhb-header.swhb-sticked { display: block; min-height: var(--swhb-sticky-h, 0); }
/* When stuck, drop non-sticky rows (e.g. the top bar) for a compact bar. */
.swhb-header.swhb-sticked .swhb-not-sticky-row { display: none; }
/* Shadow when stuck. */
.swhb-header.swhb-sticky-shadow.swhb-sticked .swhb-main-header {
	box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
}
/* Overlap/pill headers stay floating when stuck — no full-width background band
   or shadow behind the pill (only the pill container itself shows). */
.swhb-header.swhb-overcontent.swhb-sticked .swhb-main-header {
	background: transparent !important;
	box-shadow: none !important;
}
/* Admin bar offset. */
.admin-bar .swhb-header.swhb-sticked .swhb-main-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .swhb-header.swhb-sticked .swhb-main-header { top: 46px; }
}
/* Hide-on-scroll: slide the stuck bar out when scrolling down. */
.swhb-header.swhb-hide-on-scroll.swhb-sticked.swhb-scroll-down .swhb-main-header {
	transform: translateY(-100%);
}