/**
 * Header mode skins driven by body class from Page Settings.
 *
 * Default / missing meta: secondary (solid white).
 * Classes: body.jdw-header-mode-secondary | body.jdw-header-mode-main
 *
 * Positioning (aligned to target .main-nav / .secondary-nav):
 *   - Both modes: absolute top bar, z-index 100.
 *   - Secondary only: content offset via --jdw-header-content-offset
 *     (set by Page Settings「内容顶距」; main mode has no offset).
 *   - Main + scrolled: body.jdw-header-solid → fixed white bar,
 *     dark text, solid logos (header-mode-front.js).
 *
 * Targets Theme Builder header location + JDW nav menu chrome.
 */

/* -------------------------------------------------------------------------- */
/* Secondary (default): solid white bar, dark text                             */
/* -------------------------------------------------------------------------- */

body.jdw-header-mode-secondary {
	--jdw-header-fg: #161616;
	--jdw-header-fg-muted: rgba(22, 22, 22, 0.8);
	--jdw-header-bg: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Main: transparent over dark hero, light text (top-of-page state)          */
/* -------------------------------------------------------------------------- */

body.jdw-header-mode-main {
	--jdw-header-fg: #ffffff;
	--jdw-header-fg-muted: rgba(255, 255, 255, 0.85);
	--jdw-header-bg: transparent;
	/* CTA text on transparent main (class head-button-contrast); overridable in 页头模式. */
	--jdw-header-button-contrast-color: #ffffff;
}

/*
 * Main + scrolled solid (class set by header-mode-front.js).
 * Mirrors secondary skin so white bar is readable over scrolled content.
 */
body.jdw-header-mode-main.jdw-header-solid {
	--jdw-header-fg: #161616;
	--jdw-header-fg-muted: rgba(22, 22, 22, 0.8);
	--jdw-header-bg: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Shared chrome position (target: .main-nav / .secondary-nav)                 */
/* The top state is absolute; the scrolled main state becomes fixed.           */
/* Bottom border: not forced here — set in Theme Builder Header (Elementor).   */
/* Target site uses one color for main + secondary: 1px solid #444444b3.       */
/* -------------------------------------------------------------------------- */

body.jdw-header-mode-main .elementor-location-header,
body.jdw-header-mode-secondary .elementor-location-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	background-color: var(--jdw-header-bg) !important;
	background-image: none !important;
	box-sizing: border-box;
}

/* Direct child section/container often carries Elementor kit background. */
body.jdw-header-mode-main .elementor-location-header > .elementor-element {
	background-color: transparent !important;
	background-image: none !important;
}

/* Secondary: keep solid white on nested chrome (Theme Builder may set kit bg). */
body.jdw-header-mode-secondary .elementor-location-header > .elementor-element {
	background-color: transparent !important;
	background-image: none !important;
}

body.jdw-header-mode-main.jdw-header-solid .elementor-location-header {
	position: fixed;
}

/*
 * Secondary content top offset — size comes from Page Settings「内容顶距」
 * (jdw_header_content_offset → CSS var on body.elementor-page-{id}).
 * No numeric defaults here; unset var means no extra padding until Elementor
 * prints the control value (control defaults match target nav-gap).
 */
body.jdw-header-mode-secondary #content.site-main,
body.jdw-header-mode-secondary main.site-main {
	padding-top: var(--jdw-header-content-offset);
}

/* -------------------------------------------------------------------------- */
/* JDW Nav Menu — top-level labels follow header mode                          */
/* Mega panel stays white (dropdown content is always light).                  */
/* -------------------------------------------------------------------------- */

body.jdw-header-mode-main .jdw-nav-dropdown-toggle-wrapper,
body.jdw-header-mode-main .jdw-nav-dropdown-toggle-wrapper--secondary,
body.jdw-header-mode-main .jdw-nav-link {
	color: var(--jdw-header-fg);
}

body.jdw-header-mode-secondary .jdw-nav-dropdown-toggle-wrapper,
body.jdw-header-mode-secondary .jdw-nav-dropdown-toggle-wrapper--secondary,
body.jdw-header-mode-secondary .jdw-nav-link {
	color: var(--jdw-header-fg);
}

/* Logo / brand image areas: inherit color for SVG currentColor if used. */
body.jdw-header-mode-main .jdw-nav-brand,
body.jdw-header-mode-main .elementor-location-header .jdw-nav-brand a {
	color: var(--jdw-header-fg);
}

body.jdw-header-mode-secondary .jdw-nav-brand,
body.jdw-header-mode-secondary .elementor-location-header .jdw-nav-brand a {
	color: var(--jdw-header-fg);
}

/*
 * Dual logo images (Elementor CSS Classes on widget or <img>):
 *   .head-logo-icon / .head-logo-text                     → solid (white bar)
 *   .head-logo-icon-contrast / .head-logo-text-contrast → light (transparent main)
 *
 * Toggle uses opacity/visibility + layout collapse (NOT display:none), so:
 *   - Missing contrast widgets leave the solid logo fully visible.
 *   - Solid is only collapsed when the matching contrast class exists (:has).
 *   - Pairs are independent (icon vs text).
 */

/* Inactive slot: keep in DOM, remove from visual layout (no display:none). */
.head-logo-icon-contrast,
.head-logo-text-contrast,
.elementor-element.head-logo-icon-contrast,
.elementor-element.head-logo-text-contrast {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	position: absolute;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	flex: 0 0 0 !important;
}

/*
 * Main transparent (not scrolled solid): show contrast when present.
 * Solid of the same pair is collapsed only if that contrast exists.
 */
body.jdw-header-mode-main:not(.jdw-header-solid) .head-logo-icon-contrast,
body.jdw-header-mode-main:not(.jdw-header-solid) .head-logo-text-contrast,
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-element.head-logo-icon-contrast,
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-element.head-logo-text-contrast {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	position: static;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: revert !important;
	padding: revert !important;
	overflow: visible !important;
	border: revert !important;
	flex: revert !important;
}

/* Hide solid icon only when a contrast icon exists anywhere in the page header chain. */
body.jdw-header-mode-main:not(.jdw-header-solid):has(.head-logo-icon-contrast, .elementor-element.head-logo-icon-contrast) .head-logo-icon,
body.jdw-header-mode-main:not(.jdw-header-solid):has(.head-logo-icon-contrast, .elementor-element.head-logo-icon-contrast) .elementor-element.head-logo-icon {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	position: absolute;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	flex: 0 0 0 !important;
}

/* Hide solid text only when a contrast text logo exists. */
body.jdw-header-mode-main:not(.jdw-header-solid):has(.head-logo-text-contrast, .elementor-element.head-logo-text-contrast) .head-logo-text,
body.jdw-header-mode-main:not(.jdw-header-solid):has(.head-logo-text-contrast, .elementor-element.head-logo-text-contrast) .elementor-element.head-logo-text {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	position: absolute;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	flex: 0 0 0 !important;
}

/*
 * Main scrolled solid: solid logos stay in normal flow (no hide rules).
 * Contrast returns to the default inactive rules above.
 */

/* Phone / text widgets in header follow --jdw-header-fg (light or solid dark). */
body.jdw-header-mode-main .elementor-location-header .elementor-widget-text-editor,
body.jdw-header-mode-main .elementor-location-header .elementor-icon-list-text,
body.jdw-header-mode-main .elementor-location-header .elementor-heading-title {
	color: var(--jdw-header-fg);
}

body.jdw-header-mode-main .elementor-location-header .elementor-widget-icon-list .elementor-icon-list-icon i,
body.jdw-header-mode-main .elementor-location-header .elementor-widget-icon-list .elementor-icon-list-icon svg {
	color: var(--jdw-header-fg);
	fill: var(--jdw-header-fg);
}

/*
 * Contrast CTA button (Elementor CSS Class on Button widget or wrapper):
 *   .head-button-contrast
 *
 * Main transparent only: force readable light text + matching border
 * (default white; Page Settings「对比按钮文字色」→ --jdw-header-button-contrast-color).
 * Secondary + main scrolled solid: leave Elementor button colors alone.
 */
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header .head-button-contrast.elementor-button,
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header .head-button-contrast .elementor-button,
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header a.head-button-contrast,
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header .elementor-element.head-button-contrast .elementor-button {
	color: var(--jdw-header-button-contrast-color, #ffffff) !important;
	border-color: var(--jdw-header-button-contrast-color, #ffffff) !important;
}

body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header .head-button-contrast .elementor-button-text,
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header .elementor-element.head-button-contrast .elementor-button-text {
	color: var(--jdw-header-button-contrast-color, #ffffff) !important;
}

body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header .head-button-contrast .elementor-button-icon,
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header .head-button-contrast .elementor-button-icon i,
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header .head-button-contrast .elementor-button-icon svg,
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header .elementor-element.head-button-contrast .elementor-button-icon,
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header .elementor-element.head-button-contrast .elementor-button-icon i,
body.jdw-header-mode-main:not(.jdw-header-solid) .elementor-location-header .elementor-element.head-button-contrast .elementor-button-icon svg {
	color: var(--jdw-header-button-contrast-color, #ffffff) !important;
	fill: var(--jdw-header-button-contrast-color, #ffffff) !important;
}