/**
 * WPGPL.store — header, navigation and mega menu.
 */

/* --------------------------------------------------------------------------
 * Desktop header row
 * ----------------------------------------------------------------------- */

.whb-main-header .whb-general-header .site-logo img {
	max-width: 100%;
}

/* Logo lockup (rendered by [wpgpl_logo]) */
.wpgpl-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	line-height: 1;
}

.wpgpl-logo__mark {
	width: 38px;
	height: 38px;
	flex: none;
	display: block;
}

.wpgpl-logo__mark .wpgpl-mark-plate {
	fill: var(--wpgpl-primary);
}

.wpgpl-logo__mark .wpgpl-mark-glyph {
	fill: none;
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wpgpl-logo__word {
	font-family: var(--wpgpl-font-heading);
	font-size: 1.42rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wpgpl-dark);
}

.wpgpl-logo__suffix {
	font-family: var(--wpgpl-font-heading);
	font-size: 1.42rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--wpgpl-primary);
}

/* Dark header (sticky / dark plate) — invert the wordmark.
   WoodMart's row classes are inverted: `whb-color-light` = light text. */
.whb-color-light .wpgpl-logo__word,
.color-scheme-light .wpgpl-logo__word {
	color: #fff;
}

.whb-color-light .wpgpl-logo__suffix,
.color-scheme-light .wpgpl-logo__suffix {
	color: #93b0ff;
}

.wpgpl-footer .wpgpl-logo__word {
	color: #fff;
}

.wpgpl-footer .wpgpl-logo__suffix {
	color: #93b0ff;
}

/* --------------------------------------------------------------------------
 * Main navigation
 * ----------------------------------------------------------------------- */

.wpgpl-nav .wd-nav > li > a {
	font-family: var(--wpgpl-font-heading);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--wpgpl-dark) !important;
}

.wpgpl-nav .wd-nav > li > a:hover,
.wpgpl-nav .wd-nav > .current-menu-item > a,
.wpgpl-nav .wd-nav > .current-menu-parent > a,
.wpgpl-nav .wd-nav > li > a:focus-visible {
	color: var(--wpgpl-primary) !important;
}

/* WoodMart row classes are inverted: `light` means light-on-dark. */
.whb-color-light .wpgpl-nav .wd-nav > li > a,
.color-scheme-light .wpgpl-nav .wd-nav > li > a {
	color: rgba(255, 255, 255, 0.86) !important;
}

.whb-color-light .wpgpl-nav .wd-nav > li > a:hover,
.color-scheme-light .wpgpl-nav .wd-nav > li > a:hover {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
 * Mega menu
 * ----------------------------------------------------------------------- */

.wpgpl-mega .wd-dropdown-menu {
	border: 1px solid var(--wpgpl-border);
	border-radius: var(--wpgpl-radius);
	box-shadow: var(--wpgpl-shadow-lg);
	background: var(--wpgpl-white);
	padding: 26px 28px;
}

.wpgpl-mega .wd-sub-menu > li > a {
	display: block;
	padding: 7px 0;
	font-family: var(--wpgpl-font-body);
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--wpgpl-text);
	border-radius: 0;
	transition: color var(--wpgpl-dur) var(--wpgpl-ease), transform var(--wpgpl-dur) var(--wpgpl-ease);
}

.wpgpl-mega .wd-sub-menu > li > a:hover {
	color: var(--wpgpl-primary);
	transform: translateX(3px);
}

.wpgpl-mega .wd-sub-menu > li.menu-item-has-children > a {
	font-weight: 600;
	color: var(--wpgpl-dark);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	padding-bottom: 9px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--wpgpl-border);
}

.wpgpl-mega .wd-sub-menu > li.menu-item-has-children > a:hover {
	transform: none;
	color: var(--wpgpl-primary);
}

.wpgpl-mega .sub-sub-menu > li > a {
	font-size: 0.88rem;
	color: var(--wpgpl-text-muted);
	padding: 5px 0;
}

.wpgpl-mega .sub-sub-menu > li > a:hover {
	color: var(--wpgpl-primary);
}

/* Highlighted (feature) entries inside a mega column */
.wpgpl-mega .wd-sub-menu > li > a.wpgpl-mega-feature {
	font-family: var(--wpgpl-font-heading);
	font-weight: 600;
	color: var(--wpgpl-dark);
}

.wpgpl-mega .wd-sub-menu.wd-grid-f-inline > li {
	vertical-align: top;
}

/* --------------------------------------------------------------------------
 * Header search field (rendered by [wpgpl_search])
 * ----------------------------------------------------------------------- */

.wpgpl-search-cell {
	width: 100%;
}

.wpgpl-search {
	position: relative;
	width: 100%;
}

.wpgpl-search__form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 5px 5px 16px;
	background: var(--wpgpl-surface);
	border: 1px solid var(--wpgpl-border);
	border-radius: var(--wpgpl-radius-pill);
	transition: border-color var(--wpgpl-dur) var(--wpgpl-ease), background-color var(--wpgpl-dur) var(--wpgpl-ease),
		box-shadow var(--wpgpl-dur) var(--wpgpl-ease);
}

.wpgpl-search__form:focus-within {
	border-color: var(--wpgpl-primary);
	background: var(--wpgpl-white);
	box-shadow: 0 0 0 3px rgba(49, 85, 231, 0.12);
}

.wpgpl-search__icon {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--wpgpl-text-soft);
}

.wpgpl-search__icon svg {
	width: 17px;
	height: 17px;
}

.wpgpl-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 8px 2px;
	font-family: var(--wpgpl-font-body);
	font-size: 0.9rem;
	color: var(--wpgpl-text);
	outline: none;
}

.wpgpl-search__input::placeholder {
	color: var(--wpgpl-text-soft);
}

.wpgpl-search__submit {
	flex: none;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--wpgpl-radius-pill);
	background: var(--wpgpl-primary);
	color: #fff;
	font-family: var(--wpgpl-font-heading);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--wpgpl-dur) var(--wpgpl-ease);
}

.wpgpl-search__submit:hover {
	background: var(--wpgpl-primary-dark);
}

.wpgpl-search__hint {
	display: none;
	margin: 6px 0 0;
	font-size: 0.75rem;
	color: var(--wpgpl-text-soft);
}

/* Dark surfaces — WoodMart's `light` row = light-on-dark. */
.whb-color-light .wpgpl-search__form,
.color-scheme-light .wpgpl-search__form {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--wpgpl-on-dark-border);
}

.whb-color-light .wpgpl-search__input,
.color-scheme-light .wpgpl-search__input {
	color: #fff;
}

.whb-color-light .wpgpl-search__input::placeholder,
.color-scheme-light .wpgpl-search__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.whb-color-light .wpgpl-search__icon,
.color-scheme-light .wpgpl-search__icon {
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1024px) {
	.wpgpl-search-cell {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Header tools (account / wishlist / cart)
 * ----------------------------------------------------------------------- */

/* WoodMart gives every header element a `whb-{id}` class, which is how the
   tools are targeted here (ids: wpgpl-account / wpgpl-wishlist / wpgpl-cart). */
.whb-wpgpl-account,
.whb-wpgpl-wishlist,
.whb-wpgpl-cart {
	--wd-header-el-color: var(--wpgpl-dark);
	--wd-header-el-color-hover: var(--wpgpl-primary);
}

.whb-wpgpl-account .wd-tools-text,
.whb-wpgpl-cart .wd-tools-text {
	font-family: var(--wpgpl-font-heading);
	font-weight: 600;
	font-size: 0.86rem;
	color: inherit;
}

.whb-color-light .whb-wpgpl-account,
.whb-color-light .whb-wpgpl-wishlist,
.whb-color-light .whb-wpgpl-cart {
	--wd-header-el-color: #fff;
	--wd-header-el-color-hover: #93b0ff;
}

.whb-wpgpl-cart .wd-cart-count,
.whb-wpgpl-wishlist .wd-wishlist-count {
	background: var(--wpgpl-primary);
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Top bar
 * ----------------------------------------------------------------------- */

.wpgpl-topbar {
	background: var(--wpgpl-dark);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.82rem;
}

.wpgpl-topbar a {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

.wpgpl-topbar a:hover {
	color: #93b0ff;
}

.wpgpl-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 40px;
}

.wpgpl-topbar__list {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpgpl-topbar__list li {
	display: flex;
	align-items: center;
	gap: 7px;
}

.wpgpl-topbar__list svg {
	width: 15px;
	height: 15px;
	flex: none;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
 * Mobile header
 * ----------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.wpgpl-logo__mark {
		width: 32px;
		height: 32px;
	}

	.wpgpl-logo__word,
	.wpgpl-logo__suffix {
		font-size: 1.16rem;
	}

	.wpgpl-header-search .wd-search-form {
		min-width: 0;
	}
}

@media (max-width: 480px) {
	.wpgpl-logo__mark {
		width: 29px;
		height: 29px;
	}

	.wpgpl-logo__word,
	.wpgpl-logo__suffix {
		font-size: 1.06rem;
	}

	.wpgpl-topbar__list--secondary {
		display: none;
	}
}