/**
 * SodaPop SearchWP Styles - THE FINAL MASTER
 * Focus: Forcing Input Width, UberMenu Overrides, and WCAG Compliance
 */

:root {
  --swp-blue: #3b6ba1;
  --swp-blue-dark: #2a4d74;
  --swp-text-gray: #636466;
  --swp-focus-teal: #0096A3;
}

/* =========================================================
   1. NAVIGATION TRIGGER (WCAG & Icon Fixes)
   ========================================================= */

body .main-nav-side-search,
body .mk-search-trigger .mk-svg-icon,
body .mk-search-trigger .mk-search-text,
body .ubermenu-item-2700 > a > .ubermenu-sub-indicator {
    display: none !important;
}

body .ubermenu-item-2700 > a > .ubermenu-target-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body .ubermenu-item-2700 > a::before {
    content: "\f002" !important; 
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    display: inline-block !important;
    padding: 0 10px !important;
    vertical-align: middle !important;
}

body .ubermenu-item-2700 > a:focus-visible {
    outline: 2px solid var(--swp-focus-teal) !important;
    outline-offset: 2px;
}

/* Pull the menu back to the right by shrinking the search icon's invisible footprint */
body .ubermenu.ubermenu-main .ubermenu-item-2700 > a.ubermenu-target {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Optional: You can also use a negative margin to pull the whole menu slightly further right */
body .ubermenu.ubermenu-main {
    padding-right: 0 !important;
    margin-right: 0px !important; /* Adjust this number to perfectly align it */
}

/* =========================================================
   2. DROPDOWN PANEL (Outer Grey Box)
   ========================================================= */

ul.ubermenu-submenu-id-2700 {
    background-color: #e8e8e8 !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    padding: 15px !important;
    
    width: 460px !important;
    min-width: 460px !important;
    max-width: 460px !important;
    box-sizing: border-box !important; 
    
    right: 0 !important;
    left: auto !important;
    margin-top: 0 !important; 
    
    border-radius: 4px !important;
    border-top: 5px solid var(--swp-blue) !important;
}

/* =========================================================
   3. THE SEARCH FORM (The "Chain of Expansion" Fix)
   ========================================================= */

/* FORCE every single wrapper layer to stretch 100% */
.ubermenu-item-2698,
.ubermenu-item-2698 > div.ubermenu-custom-content-padded,
.site-search--menu,
.site-search--menu #searchwp-form-1,
.site-search--menu #searchwp-form-1 .swp-flex--col {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* The row holding the input and button */
.site-search--menu .swp-flex--row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
}

/* The container holding just the input field */
.site-search--menu .searchwp-form-input-container {
    display: flex !important;
    flex-grow: 1 !important; 
    width: auto !important;
    position: relative !important;
}

/* The Input Field Itself */
.site-search--menu #searchwp-form-1 .swp-input {
    width: 100% !important;
    flex-grow: 1 !important;
    border: 1px solid #ccc !important;
    border-right: none !important;
    border-radius: 4px 0 0 4px !important; 
    height: 44px !important; 
    padding: 0 40px 0 12px !important; /* Protects mic icon */
    background: #fff !important; 
    font-size: 16px !important;
    color: var(--swp-text-gray) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* The Submit Button */
.site-search--menu #searchwp-form-1 input[type="submit"] {
    flex-shrink: 0 !important; 
    background-color: var(--swp-blue) !important;
    color: #ffffff !important;
    height: 44px !important;
    padding: 0 20px !important;
    border: 1px solid var(--swp-blue) !important; 
    border-radius: 0 4px 4px 0 !important; 
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Button & Input States */
.site-search--menu #searchwp-form-1 input[type="submit"]:hover {
    background-color: var(--swp-blue-dark) !important;
    border-color: var(--swp-blue-dark) !important;
}

.site-search--menu #searchwp-form-1 input[type="submit"]:focus-visible,
.site-search--menu #searchwp-form-1 .swp-input:focus-visible {
    outline: 2px solid var(--swp-focus-teal) !important;
    outline-offset: 2px !important;
}

/* Voice Search Mic Icon */
.site-search--menu .swp-voice-search-button {
    position: absolute !important;
    right: 8px !important; 
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #999 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

/* =========================================================
   4. MOBILE RESPONSIVENESS (Button Fix & Height Correction)
   ========================================================= */

@media only screen and (max-width: 768px) {
    
    /* 1. Force the dropdown box to fit the screen and hug the content */
    ul.ubermenu-submenu-id-2700 {
        width: 100vw !important; 
        min-width: 100% !important;
        max-width: 100% !important;
        padding: 15px 10px !important;
        box-sizing: border-box !important;
        left: 0 !important; 
        height: auto !important; /* Force height to shrink-wrap */
        min-height: 0 !important; /* Kill any theme minimums */
        padding-bottom: 15px !important; /* Lock the bottom gap */
    }

    /* 2. KILL the invisible UberMenu "Close" button causing the gap */
    ul.ubermenu-submenu-id-2700 .ubermenu-retractor-mobile {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Bring the blue SEARCH button back and position it */
    .site-search--menu .searchwp-form .search-submit,
    .site-search--menu #searchwp-form-1 input[type="submit"] {
        display: block !important;
        flex: 0 0 auto !important;
        padding: 0 15px !important; 
        font-size: 13px !important; 
        height: 44px !important; 
        margin: 0 !important; /* Ensure no margins push the box down */
    }

    /* 4. Ensure the input field shrinks to make room for the button */
    .site-search--menu .searchwp-form-input-container {
        flex: 1 1 auto !important;
        min-width: 0 !important; 
        margin: 0 !important;
    }

    /* 5. Adjust input padding to protect the mic icon */
    .site-search--menu #searchwp-form-1 .swp-input {
        width: 100% !important;
        padding: 0 35px 0 10px !important; 
        margin: 0 !important;
    }
    
    /* 6. Keep the input and button strictly on the same line */
    .site-search--menu .swp-flex--row {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        margin: 0 !important;
    }
}

/* =========================================================
   5. STICKY DROPDOWN (Keyboard Accessibility & Suggestion Fix)
   ========================================================= */

/* Force the UberMenu dropdown to fully expand and stay open 
   when tabbing via keyboard OR selecting autocomplete suggestions */
body .ubermenu.ubermenu-main .ubermenu-item-2700:focus-within > .ubermenu-submenu-drop {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: auto !important;
    
    /* NEW: Prevent clipping when JS hasn't fired yet */
    clip: auto !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}