/**
 * File: header-search.css
 * Purpose: Styles for the site-wide predictive search form in both desktop and mobile headers.
 * Usage: Used within `.main-nav` and `.mobile-main-nav` areas for search interaction and styling.
 * Dependencies: Assumes Advanced Woo Search (AWS) markup and class structure.
 *
 * Notes:
 * - Search form is hidden by default and revealed via `:focus-within` on `.search-wrapper`
 * - Desktop and mobile styles are split but kept in the same file
 * - Includes button/icon hover styles and responsive position adjustment
 * - Relies on CSS variables for consistent color and spacing control
 * - Supports full-width dropdown positioning and transitions
 * - **NEW**: Styles `.no-results-message` block for fallback messaging
 *
 * Key Class Targets:
 * - `.search-button` — search trigger button with SVG icon
 * - `.aws-container` — hidden dropdown container with transition effect
 * - `.aws-search-form` — wraps input field and search button
 * - `.aws-search-field`, `.aws-form-btn`, `.aws-search-btn_icon` — input/button styling
 * - `.no-results-message` — styled fallback box with visual matching to main search UI
 *
 * Responsive Behavior:
 * - Tablet/mobile dropdown positioning handled via media queries
 * - Full-width `.aws-search-result` ensures results span viewport on both mobile and desktop
 */


/* ========================== */
/* === Scoped Variables === */
/* ========================== */


.main-nav,
.mobile-main-nav{
    --search-button-icon-color: var(--brown-dark);
    --search-button-icon-hover-color: var(--brand-orange-medium);
    --search-button-bg-color: var(--brown-medium);
    --search-button-bg-hover-color: var(--brown-medium);
    --search-button-border-color: var(--brown-medium);
    --search-button-font-color: var(--tan-lightest);
    --search-field-font-color: var(--brown-dark);
    --search-field-border-color: var(--tan-medium);
}

.no-results-message { 
    --nrm-search-border-color: var(--gray-medium);
    --nrm-search-field-focus-hover-bg-color: var(--white);
    --nrm-search-field-focus-hover-border-color: var(--brand-accent-color);
    --nrm-search-button-bg-color: var(--gray-light);
    --nrm-search-button-bg-hover-color: var(--brand-accent-color);
    --nrm-search-button-border-color: var(--gray-medium);
    --nrm-search-button-border-hover-color: var(--brand-accent-color);
    --nrm-search-button-icon-color: var(--black);
    --nrm-search-button-icon-hover-color: var(--white);
}

.search-query {
    --nrm-search-query-color: var(--brand-accent-color);
}



/* ========================== */
/* === Desktop Search UI === */
/* ========================== */

/* --- Search Button --- */
.main-nav .search-button {
    margin-left: 2em !important;
    padding-right: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.main-nav .search-button svg {
    fill: var(--search-button-icon-color);	
}

.main-nav .search-button:hover svg {
    fill: var(--search-button-icon-hover-color);	
}


/* --- Search Visibility --- */
/* Hidden by default; shown when form is focused */
.main-nav .aws-container {
    display: block;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -50px !important;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 1000ms ease-in-out;
}

.main-nav .search-wrapper {
    display: flex;
}

.main-nav .search-wrapper:focus-within .aws-container {
    display: block;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    top: calc(113.25px + var(--top-offset-half, 0px)) !important;
}


/* --- Search Layout & Field Styles --- */
.main-nav .aws-search-result {
    left: 0vw !important;
    width: 100vw !important;
}

.main-nav .aws-container .aws-search-form {
    width: 97%;
    height: 39.5px;
}

.main-nav .aws-container .aws-search-form .aws-wrapper {
    margin: 0 0 0 3% !important;
}


/* ========================= */
/* === Mobile Search UI === */
/* ========================= */

/* --- Search Button --- */
.mobile-main-nav .search-button {
    margin-right: 0 !important;
    border: none;
    background: none;
    cursor: pointer;
}

.mobile-main-nav .search-button svg {
    fill: var(--search-button-icon-color);	
}

.mobile-main-nav .search-button:hover svg {
    fill: var(--search-button-icon-hover-color);	
}


/* --- Search Visibility --- */
/* Hidden by default; shown when form is focused */
.mobile-main-nav .aws-container {
    display: block;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -50px !important;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 1000ms ease-in-out;
}

.mobile-main-nav .search-wrapper {
    display: flex;
}

.mobile-main-nav .search-wrapper:focus-within .aws-container {
    display: block;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

/* --- Top Offset Adjustments by Device --- */
@media all and (max-width: 820px) and (min-width: 769px) {
    .mobile-main-nav .search-wrapper:focus-within .aws-container {
        top: calc(117px + var(--top-offset-half, 0px)) !important;
    }
}

@media all and (max-width: 768px) {
    .mobile-main-nav .search-wrapper:focus-within .aws-container {
        top: calc(117px + var(--top-offset-half, 0px)) !important;
    }
}


/* --- Search Layout & Field Styles --- */
.mobile-main-nav .aws-search-result {
    left: 0vw !important;
    width: 100vw !important;
}

.mobile-main-nav .aws-container .aws-search-form {
    width: 97%;
    height: 45px;
}

.mobile-main-nav .aws-container .aws-search-form .aws-wrapper {
    margin: 0 0 0 3% !important;
}


/* ===================================== */
/* === Shared Button / Field Styles === */
/* ===================================== */

.main-nav .aws-form-btn,
.mobile-main-nav .aws-form-btn {
    background-color: var(--search-button-bg-color)!important;
    border: 1px solid var(--search-button-border-color)!important;
}

.main-nav .aws-form-btn:hover,
.mobile-main-nav .aws-form-btn:hover {
    background-color: var(--search-button-bg-hover-color);
}

.main-nav .aws-search-btn_icon,
.mobile-main-nav .aws-search-btn_icon {
    color: var(--search-button-font-color) !important;
}

.main-nav .aws-search-field,
.mobile-main-nav .aws-search-field {
    color: var(--search-field-font-color);
    border: 1px solid var(--search-field-border-color);
}


/* =================================== */
/* === No Results Message Styling === */
/* =================================== */

.no-results-message .aws-container .aws-search-field {
    border: solid var(--nrm-search-border-color)!important;
    padding: 6px 15px;
    border-width: 2px 1px!important;
    border-radius: 5px 0px 0 5px !important;
    transition: all 500ms ease;
}

.no-results-message .aws-container .aws-search-field:focus,
.no-results-message .aws-container .aws-search-field:hover
 {
    background-color: var(--nrm-search-field-focus-hover-bg-color);
    border-color: var(--nrm-search-field-focus-hover-border-color) !important;
}

.no-results-message .aws-container .aws-search-form .aws-form-btn {
    background: var(--nrm-search-button-bg-color)!important;
    border: solid var(--nrm-search-button-border-color)!important;
    border-width: 2px 1px!important;
    border-radius: 0 5px 5px 0 !important;
    margin: 0 0 0 2px!important;
    transition: all 500ms ease;
}

.no-results-message .aws-container .aws-search-form .aws-search-btn_icon {
    fill: currentColor;
    color: var(--nrm-search-button-icon-color);
}

.no-results-message .aws-container .aws-search-form .aws-form-btn:hover {
    background: var(--nrm-search-button-bg-hover-color)!important;
    border: solid var(--nrm-search-button-border-hover-color)!important;
    border-width: 2px 1px!important;
}

.no-results-message .aws-container .aws-search-form .aws-form-btn:hover .aws-search-btn_icon {
    fill: currentColor;
    color: var(--nrm-search-button-icon-hover-color);
}

.search-query {
  color:var(--nrm-search-query-color);
  font-weight:700;
}