/*
Header search field: Kobe1.1 text and the Figma Input Field hover/focus border (86eypb6kw, Vita QA 5 Oct).

Config investigated: FiboSearch Pro (dgwt_wcas_settings) has no font-family or focus-colour option for its input,
and Blocksy's Customizer form-field focus colour is a single global that also drives checkout/login fields,
so this one field is styled by code. The header field itself is owned by header-navigation.css (size, shape); this
file only adds font and state colours, loaded after it.

editor-friendly-ok: styles FiboSearch's own header plugin markup, not editable block content; colours reuse
--wp--preset--color--bhp-green with its literal fallback.
*/

/* Kobe1.1 is the body face (Figma Input Field text 29049:58895 is Kobe1.1 Regular). The extra [data-row] [data-column] keeps
   this above header-navigation.css's breakpoint-scoped rules whatever their order. */
#header [data-row] [data-column] [data-id="search"] input.dgwt-wcas-search-input,
#header [data-row] [data-column] [data-id="search"] input.dgwt-wcas-search-input::placeholder {
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
}

/* Figma Input Field border ladder: hover/focus = brand green #247B4E (hover-type-contract.md). Blocksy's
   focus colour defaults to its demo blue, so pin the variable too. The 1px ring keeps the state visible beyond a
   1px colour change (WCAG 2.4.7); deviation from the flat Figma border, reported to QA. */
#header [data-row] [data-column] [data-id="search"] input.dgwt-wcas-search-input {
	--theme-form-field-border-focus-color: var( --wp--preset--color--bhp-green, #247B4E );
}

#header [data-row] [data-column] [data-id="search"] input.dgwt-wcas-search-input:hover,
#header [data-row] [data-column] [data-id="search"] input.dgwt-wcas-search-input:focus,
#header [data-row] [data-column] [data-id="search"] input.dgwt-wcas-search-input:focus-visible {
	border-color: var( --wp--preset--color--bhp-green, #247B4E );
	outline: none;
}

#header [data-row] [data-column] [data-id="search"] input.dgwt-wcas-search-input:focus,
#header [data-row] [data-column] [data-id="search"] input.dgwt-wcas-search-input:focus-visible {
	box-shadow: 0 0 0 1px var( --wp--preset--color--bhp-green, #247B4E );
}