/*
========================================================
Snippet Name: Search & Filter Responsive Typography + Hover State
Author: Arif / ChatGPT

Purpose:
- Controls font size for Search & Filter fields inside archive filter bars.
- Targets search fields, dropdown combobox fields, buttons, placeholders,
  labels, counts, and opened dropdown list items.
- Adds a clean hover/focus state using Kawan Elite brand colour variables.
- Keeps this styling scoped to .ke-sf-filterbar where possible.

How to Use:
1. Add the class "ke-sf-filterbar" to the OUTER GenerateBlocks container
   that wraps all related Search & Filter shortcode blocks.

2. Recommended structure:
   Outer Container: ke-sf-filterbar
     - Inner Container A
       - Search & Filter search shortcode
     - Inner Container B
       - Search & Filter dropdown shortcode
     - Inner Container C
       - Search & Filter reset/clear shortcode

3. You do NOT need to add "ke-sf-filterbar" to every inner container.

4. The opened dropdown menu is handled separately because Search & Filter
   may output the dropdown popup outside the wrapper container.

Font Size Rules:
- Desktop main field text: 13px
- Desktop secondary text: 12px
- Tablet/Mobile main field text: 12px
- Tablet/Mobile secondary text: 11px

Hover / Focus Rules:
- Background: var(--ke-green-soft)
- Border: var(--ke-green-mid)
- Text: var(--ke-green)
========================================================
*/


/* ==================================

Base Field Typography

================================== */

.ke-sf-filterbar input,
.ke-sf-filterbar select,
.ke-sf-filterbar button,
.ke-sf-filterbar textarea {
  font-size: 13px !important;
  line-height: 1.4 !important;
}


/* ==================================

Search Box Typography

Targets Search & Filter search field:
.search-filter-input-text
.search-filter-input-text__input

================================== */

.ke-sf-filterbar .search-filter-input-text,
.ke-sf-filterbar .search-filter-input-text__input {
  font-size: 13px !important;
  line-height: 1.4 !important;
}


/* ==================================

Dropdown / Combobox Typography

Targets Search & Filter custom dropdown field:
.search-filter-component-combobox-base
.search-filter-component-combobox__actions-input

================================== */

.ke-sf-filterbar .search-filter-base,
.ke-sf-filterbar .search-filter-field,
.ke-sf-filterbar .search-filter-field__input,
.ke-sf-filterbar .search-filter-input,
.ke-sf-filterbar .search-filter-component-combobox-base,
.ke-sf-filterbar .search-filter-component-combobox,
.ke-sf-filterbar .search-filter-component-combobox__header,
.ke-sf-filterbar .search-filter-component-combobox__actions,
.ke-sf-filterbar .search-filter-component-combobox__selection,
.ke-sf-filterbar .search-filter-component-combobox__actions-input {
  font-size: 13px !important;
  line-height: 1.4 !important;
}


/* ==================================

Placeholder Text

Targets both:
- Search box placeholder
- Dropdown combobox placeholder

================================== */

.ke-sf-filterbar input::placeholder,
.ke-sf-filterbar textarea::placeholder,
.ke-sf-filterbar .search-filter-input-text__input::placeholder,
.ke-sf-filterbar .search-filter-component-combobox__actions-input::placeholder {
  font-size: 13px !important;
  line-height: 1.4 !important;
}


/* ==================================

Secondary Text / Labels / Counts

================================== */

.ke-sf-filterbar label,
.ke-sf-filterbar .search-filter-label,
.ke-sf-filterbar .search-filter-count,
.ke-sf-filterbar .search-filter-component-combobox-base__screen-reader-text {
  font-size: 12px !important;
  line-height: 1.4 !important;
}


/* ==================================

Native Dropdown Fallback

Only applies if Search & Filter outputs a native <select><option> field.

================================== */

.ke-sf-filterbar option {
  font-size: 13px !important;
  line-height: 1.4 !important;
}


/* ==================================

Visible Field Hover / Focus State

Targets:
- Search input wrapper
- Dropdown combobox wrapper
- Native input/select/button fallback

================================== */
/*
.ke-sf-filterbar input:hover,
.ke-sf-filterbar input:focus,
.ke-sf-filterbar select:hover,
.ke-sf-filterbar select:focus,
.ke-sf-filterbar .search-filter-input-text:hover,
.ke-sf-filterbar .search-filter-input-text:focus-within,
.ke-sf-filterbar .search-filter-component-combobox-base:hover,
.ke-sf-filterbar .search-filter-component-combobox-base:focus-within
*/
.ke-sf-filterbar button:hover,
.ke-sf-filterbar button:focus{
  background-color: var(--ke-green-soft) !important;
  border-color: var(--ke-green-mid) !important;
  color: var(--ke-green) !important;
}


/* ==================================

Placeholder Hover / Focus State

================================== */

.ke-sf-filterbar input:hover::placeholder,
.ke-sf-filterbar input:focus::placeholder,
.ke-sf-filterbar textarea:hover::placeholder,
.ke-sf-filterbar textarea:focus::placeholder,
.ke-sf-filterbar .search-filter-input-text__input:hover::placeholder,
.ke-sf-filterbar .search-filter-input-text__input:focus::placeholder,
.ke-sf-filterbar .search-filter-component-combobox__actions-input:hover::placeholder,
.ke-sf-filterbar .search-filter-component-combobox__actions-input:focus::placeholder {
  color: var(--ke-green) !important;
}


/* ==================================

Opened Dropdown Popup Typography

Search & Filter uses a custom combobox list for the opened dropdown menu.

Important:
This is intentionally NOT scoped with .ke-sf-filterbar because the opened
dropdown popup may be output elsewhere in the page HTML by the plugin.

================================== */

.search-filter-component-combobox-base__listbox-list,
.search-filter-component-combobox-base__listbox-option,
.search-filter-component-combobox-base__listbox-option-count {
  font-size: 13px !important;
  line-height: 1.35 !important;
}


/* ==================================

Opened Dropdown Popup Spacing

================================== */

.search-filter-component-combobox-base__listbox-option {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}


/* ==================================

Opened Dropdown Hover / Focus / Selected State

================================== */

.search-filter-component-combobox-base__listbox-option:hover,
.search-filter-component-combobox-base__listbox-option:focus,
.search-filter-component-combobox-base__listbox-option--selected {
  background-color: var(--ke-green-soft) !important;
  border-color: var(--ke-green-mid) !important;
  color: var(--ke-green) !important;
}


/* ==================================

Opened Dropdown Count Hover / Selected State

================================== */

.search-filter-component-combobox-base__listbox-option:hover .search-filter-component-combobox-base__listbox-option-count,
.search-filter-component-combobox-base__listbox-option:focus .search-filter-component-combobox-base__listbox-option-count,
.search-filter-component-combobox-base__listbox-option--selected .search-filter-component-combobox-base__listbox-option-count {
  color: var(--ke-green) !important;
}


/* ==================================

Tablet & Mobile Typography

================================== */

@media (max-width: 1024px) {
  .ke-sf-filterbar input,
  .ke-sf-filterbar select,
  .ke-sf-filterbar option,
  .ke-sf-filterbar button,
  .ke-sf-filterbar textarea,
  .ke-sf-filterbar .search-filter-input-text,
  .ke-sf-filterbar .search-filter-input-text__input,
  .ke-sf-filterbar .search-filter-base,
  .ke-sf-filterbar .search-filter-field,
  .ke-sf-filterbar .search-filter-field__input,
  .ke-sf-filterbar .search-filter-input,
  .ke-sf-filterbar .search-filter-component-combobox-base,
  .ke-sf-filterbar .search-filter-component-combobox,
  .ke-sf-filterbar .search-filter-component-combobox__header,
  .ke-sf-filterbar .search-filter-component-combobox__actions,
  .ke-sf-filterbar .search-filter-component-combobox__selection,
  .ke-sf-filterbar .search-filter-component-combobox__actions-input,
  .ke-sf-filterbar input::placeholder,
  .ke-sf-filterbar textarea::placeholder,
  .ke-sf-filterbar .search-filter-input-text__input::placeholder,
  .ke-sf-filterbar .search-filter-component-combobox__actions-input::placeholder {
    font-size: 12px !important;
  }

  .ke-sf-filterbar label,
  .ke-sf-filterbar .search-filter-label,
  .ke-sf-filterbar .search-filter-count,
  .ke-sf-filterbar .search-filter-component-combobox-base__screen-reader-text {
    font-size: 11px !important;
  }

  .search-filter-component-combobox-base__listbox-list,
  .search-filter-component-combobox-base__listbox-option,
  .search-filter-component-combobox-base__listbox-option-count {
    font-size: 12px !important;
  }
}