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

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 subtle JPNT gold/timber hover, focus, and selected states.
- 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


JPNT Interaction Colours:

Hover / Focus:
- Background: #FDFBF0
- Border: #EAD77E
- Text: #65412A

Selected / Active:
- Background: #FAF4D0
- Border: #D9BD22
- Text: #4E3424


JPNT Design System References:
- Refined Gold: #D9BD22
- Soft Gold Border: #EAD77E
- Soft Gold Background: #FDFBF0
- Stronger Gold Background: #FAF4D0
- Timber Brown: #65412A
- Deep Timber Brown: #4E3424
========================================================
*/


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

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

JPNT:
- Soft gold background
- Soft gold border
- Timber text

Targets currently:
- Buttons

Additional field selectors remain commented out
from the original snippet.

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

/*
.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: #FDFBF0 !important;
  border-color: #EAD77E !important;
  color: #65412A !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: #65412A !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 State

Subtle JPNT gold treatment.

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

.search-filter-component-combobox-base__listbox-option:hover,
.search-filter-component-combobox-base__listbox-option:focus {
  background-color: #FDFBF0 !important;
  border-color: #EAD77E !important;
  color: #65412A !important;
}


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

Opened Dropdown Selected State

Slightly stronger than hover so the currently
selected option remains visually identifiable.

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

.search-filter-component-combobox-base__listbox-option--selected {
  background-color: #FAF4D0 !important;
  border-color: #D9BD22 !important;
  color: #4E3424 !important;
}


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

Opened Dropdown Count Hover / Focus 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 {
  color: #65412A !important;
}


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

Opened Dropdown Count Selected State

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

.search-filter-component-combobox-base__listbox-option--selected
.search-filter-component-combobox-base__listbox-option-count {
  color: #4E3424 !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;
  }
}