/**
 * Woodmart Header Extractor – icon font + CSS custom property defaults.
 *
 * The header CSS parts in ./parts/ are copied verbatim from the Woodmart theme,
 * so they expect the theme's design tokens to exist. This file supplies them
 * when the theme is absent. Loaded before header-base.css.
 *
 * Three groups:
 *   1. Base palette / form tokens – copied verbatim from the theme's
 *      css/parts/base.css :root block. Authoritative values, do not invent.
 *   2. Tokens with a static default in the theme's style.css.
 *   3. Tokens the theme only ever emits from Theme Settings (typography,
 *      button styles). No static source exists, so these are neutral defaults
 *      derived from the group-1 palette.
 *
 * Header heights and border widths (--wd-header-h, --wd-header-general-sticky-h,
 * --wd-top-bar-h, --wd-header-clone-h, …) are NOT listed here: the plugin's
 * Styles class generates all 17 of them per header, exactly like the theme.
 */

/* Icon font used by all tool elements (.wd-tools-icon:before). */
@font-face {
	font-family: "techbolic-icons";
	src: url("../fonts/techbolic-icons.woff2") format("woff2"),
	     url("../fonts/techbolic-icons.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

:root {
	/* ---------------------------------------------------------------------
	 * 1. Verbatim from the theme's css/parts/base.css :root block
	 * ------------------------------------------------------------------ */
	--wd-text-line-height: 1.6;
	--wd-link-decor: underline var(--wd-link-decor-style, none) var(--wd-link-decor-color, currentColor);
	--wd-link-decor-hover: underline var(--wd-link-decor-style-hover, none) var(--wd-link-decor-color-hover, var(--wd-link-decor-color, currentColor));
	--wd-brd-radius: .001px;
	--wd-form-height: 42px;
	--wd-form-color: inherit;
	--wd-form-placeholder-color: inherit;
	--wd-form-bg: transparent;
	--wd-form-brd-color: rgba(0, 0, 0, 0.1);
	--wd-form-brd-color-focus: rgba(0, 0, 0, 0.15);
	--wd-form-chevron: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==);
	--wd-navigation-color: 51, 51, 51;
	--wd-main-bgcolor: #FFF;
	--wd-scroll-w: .001px;
	--wd-admin-bar-h: .001px;
	--wd-block-spacing: 20px;
	--wd-sticky-nav-w: .001px;
	--color-white: #FFF;
	--color-gray-100: #f7f7f7;
	--color-gray-200: #f1f1f1;
	--color-gray-300: #bbb;
	--color-gray-400: #a5a5a5;
	--color-gray-500: #767676;
	--color-gray-600: #666;
	--color-gray-700: #555;
	--color-gray-800: #333;
	--color-gray-900: #242424;
	--color-black-rgb: 0, 0, 0;
	--bgcolor-white: #FFF;
	--bgcolor-gray-100: #f7f7f7;
	--bgcolor-gray-200: #f7f7f7;
	--bgcolor-gray-300: #f1f1f1;
	--bgcolor-black-rgb: 0, 0, 0;
	--bgcolor-white-rgb: 255, 255, 255;
	--brdcolor-gray-200: rgba(0, 0, 0, 0.075);
	--brdcolor-gray-300: rgba(0, 0, 0, 0.105);
	--brdcolor-gray-400: rgba(0, 0, 0, 0.12);
	--brdcolor-gray-500: rgba(0, 0, 0, 0.2);
	--wd-start: start;
	--wd-end: end;
	--wd-center: center;
	--wd-stretch: stretch;

	/* ---------------------------------------------------------------------
	 * 2. Static defaults taken from the theme's css/style.css
	 * ------------------------------------------------------------------ */
	--wd-align: center;
	--wd-title-sp: 15px;
	--wd-side-hidden-w: 340px;
	--wd-popup-width: 900px;
	--wd-dropdown-bg-color: var(--bgcolor-white);
	--btn-accented-bgcolor: transparent;
	--btn-accented-bgcolor-hover: transparent;
	--btn-accented-box-shadow: none;
	--btn-accented-box-shadow-hover: none;
	--btn-accented-color: var(--color-gray-900);
	--btn-accented-color-hover: var(--color-gray-900);

	/*
	 * The theme ships both a light and a dark value for these; the light-scheme
	 * one is used here. `.color-scheme-light` in the copied parts flips them.
	 */
	--wd-title-color: #242424;
	--wd-text-color: #767676;
	--wd-entities-title-color-hover: rgba(51, 51, 51, 0.65);
	--wd-widget-title-color: var(--wd-title-color);

	/* ---------------------------------------------------------------------
	 * 3. Theme-Settings-driven tokens – neutral defaults
	 *
	 * The theme emits these from its typography and button options, so there is
	 * no static value to copy. `inherit` lets the active theme's own typography
	 * come through, which is the right behaviour for a theme-agnostic plugin.
	 * ------------------------------------------------------------------ */
	--wd-text-font: inherit;
	--wd-text-font-size: inherit;
	--wd-text-font-weight: inherit;
	--wd-text-font-style: normal;
	--wd-title-font: inherit;
	--wd-alternative-font: inherit;
	--wd-alternative-font-style: normal;
	--wd-alternative-color: var(--color-gray-500);
	--wd-widget-title-font: inherit;
	--wd-widget-title-font-size: 16px;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-font-style: normal;
	--wd-widget-title-transform: none;

	/* Header element typography, used by the copied header parts. */
	--wd-header-el-font: inherit;
	--wd-header-el-font-size: 14px;
	--wd-header-el-font-weight: 600;
	--wd-header-el-font-style: normal;
	--wd-header-el-transform: none;
	--wd-header-el-color: #333;
	--wd-header-el-color-hover: rgba(51, 51, 51, 0.6);

	/*
	 * Form border width/radius are Theme Settings options in Woodmart, so the
	 * theme CSS carries no static default. A visible 1px border is the sensible
	 * standalone default — with the theme's `--wd-form-bg: transparent`, a width
	 * of 0 would render the header search field completely invisible.
	 */
	--wd-form-brd-width: 1px;
	--wd-form-brd-radius: 0;

	/* Misc geometry the parts reference bare. */
	--wd-primary-color: #83b735;
	--wd-container-w: 1222px;
	--wd-divider-color: var(--brdcolor-gray-300);
	--wd-tools-icon-width: 20px;
	--wd-search-form-width: 310px;
	--wd-label-h: auto;
	--wd-popup-height: auto;
	--wd-social-shadow: none;
	--wd-dropdown-bg-img: none;
	--btn-accented-brd-radius: 0;
	--btn-accented-box-shadow-active: none;
	--nav-gap: 0.001px;

	/*
	 * A couple of copied parts (the login form, quantity control) reference
	 * WordPress admin / XTS builder tokens. Map them to the palette so they
	 * degrade sensibly on the front end.
	 */
	--wp-admin-theme-color: var(--wd-primary-color);
	--xts-default-color: var(--color-gray-800);
	--xts-heding-color: var(--color-gray-900);
}

/* WP admin bar offsets the sticky header. */
.admin-bar {
	--wd-admin-bar-h: 32px;
}
@media (max-width: 782px) {
	.admin-bar {
		--wd-admin-bar-h: 46px;
	}
}

/*
 * Header container. The theme's own grid normally supplies .container; provide
 * it so the header's boxed/full-width options behave on any theme. Scoped to
 * .whb-header so we never touch the active theme's own .container.
 */
.whb-header .container {
	width: 100%;
	max-width: var(--wd-container-w, 1222px);
	margin-inline: auto;
	padding-inline: 15px;
	box-sizing: border-box;
}
.whb-header.whb-full-width .whb-row > .container {
	max-width: 100%;
}

/*
 * Minimal resets. The copied Woodmart parts assume a normalised baseline that
 * the theme's base.css provides; these are the few rules the header genuinely
 * depends on. Deliberately narrow – element layout comes from the copied parts,
 * not from here.
 */
.whb-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.whb-header a {
	text-decoration: none;
}
.whb-header img {
	max-width: 100%;
	height: auto;
}

/*
 * Form control baseline.
 *
 * Woodmart's search CSS styles the *wrapper* (.searchform, .searchsubmit,
 * .wd-clear-search) but never the field itself — the field's height, width,
 * padding, border and background come from a global form reset in the theme's
 * css/parts/base.css. Without it the input falls back to the browser default
 * (~15px tall, inset border) and the whole search element collapses.
 *
 * These rules are that reset, copied from the theme, but scoped to the header
 * and its off-canvas panels so the plugin never restyles the host theme's own
 * forms. The scopes cover the header, the mobile menu and side cart (rendered
 * in the footer), and any search wrapper (.wd-search-form / -dropdown /
 * -full-screen).
 */
.whb-header input[type="email"],
.whb-header input[type="date"],
.whb-header input[type="search"],
.whb-header input[type="number"],
.whb-header input[type="text"],
.whb-header input[type="tel"],
.whb-header input[type="url"],
.whb-header input[type="password"],
.whb-header textarea,
.whb-header select,
.mobile-nav input[type="text"],
.mobile-nav input[type="search"],
.mobile-nav select,
.cart-widget-side input[type="text"],
.cart-widget-side select,
[class*="wd-search-"] input[type="text"],
[class*="wd-search-"] input[type="search"],
[class*="wd-search-"] select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	padding: 0 15px;
	max-width: 100%;
	width: 100%;
	height: var(--wd-form-height);
	border: var(--wd-form-brd-width) solid var(--wd-form-brd-color);
	border-radius: var(--wd-form-brd-radius);
	background-color: var(--wd-form-bg);
	box-shadow: none;
	color: var(--wd-form-color);
	vertical-align: middle;
	font-size: 14px;
	line-height: normal;
	transition: border-color .5s ease;
}

.whb-header input:focus,
.whb-header textarea:focus,
.whb-header select:focus,
.mobile-nav input:focus,
.cart-widget-side input:focus,
[class*="wd-search-"] input:focus,
[class*="wd-search-"] select:focus {
	outline: none;
	border-color: var(--wd-form-brd-color-focus);
	transition: border-color .4s ease;
}

.whb-header ::placeholder,
.mobile-nav ::placeholder,
.cart-widget-side ::placeholder,
[class*="wd-search-"] ::placeholder {
	color: var(--wd-form-placeholder-color);
	opacity: 1;
}

/* Buttons inside the header inherit typography and lose the UA chrome. */
.whb-header button,
.whb-header input,
.whb-header optgroup,
.whb-header select,
.whb-header textarea,
.mobile-nav button,
.cart-widget-side button,
[class*="wd-search-"] button {
	margin: 0;
	color: inherit;
	font: inherit;
}

.whb-header button,
.mobile-nav button,
.cart-widget-side button,
[class*="wd-search-"] button {
	cursor: pointer;
	overflow: visible;
	-webkit-appearance: button;
}

.whb-header button::-moz-focus-inner,
.whb-header input::-moz-focus-inner,
[class*="wd-search-"] button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

/*
 * Chrome paints its own clear "X" on type=search; Woodmart draws its own
 * .wd-clear-search control, so suppress the native one to avoid two.
 */
[class*="wd-search-"] input::-webkit-search-cancel-button,
.whb-header input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}