/**
 * Search Slide-In Styles
 * 
 * Desktop: Shows only search icon, slides form in on click
 * Mobile: Shows normal search form
 */

/* Desktop styles - only apply above mobile breakpoint */
@media screen and (min-width: 600px) {
    /* Target search block inside navigation container */
    .wp-block-navigation__responsive-container-content .wp-block-search {
        position: relative;
    }
    
    /* Hide the input field by default, but keep button visible */
    .wp-block-navigation__responsive-container-content .wp-block-search:not(.search-active) .wp-block-search__input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
        opacity: 0;
    }
    
    /* Keep the wrapper visible but minimal w   hen not active */
    .wp-block-navigation__responsive-container-content .wp-block-search:not(.search-active) .wp-block-search__inside-wrapper {
        display: flex;
        width: auto;
        padding: 0;
        border: none;
        background: transparent;
    }
    
    /* Show only the search button/icon in the nav */
    .wp-block-navigation__responsive-container-content .wp-block-search__button {
        background: transparent;
        border: 2px solid var(--Color-Border-border-light, #EBEBEB);
        padding: var(--Layout-Spacing-XS, 8px);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        width: 34px;
        height: 34px;
        border-radius: 1000px;
        transition: all 0.19s ease-in;
    }
    .wp-block-navigation__responsive-container-content .wp-block-search__button:hover {
        background: var(--wp--preset--color--neutral);
    }
    .wp-block-navigation__responsive-container-content .search-active .wp-block-search__button {
        border: 0;
    }
    
    /* Hide the default WordPress search icon SVG */
    .wp-block-navigation__responsive-container-content .wp-block-search__button .search-icon,
    .wp-block-navigation__responsive-container-content .wp-block-search__button svg {
        display: none;
    }
    
    /* Add custom search icon SVG */
    .wp-block-navigation__responsive-container-content .wp-block-search__button::before {
        content: '';
        display: inline-block;
        width: 14px;
        height: 13px;
        background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7969 11.959C13.0508 12.2129 13.0508 12.5938 12.7969 12.8223C12.6953 12.9492 12.543 13 12.3906 13C12.2129 13 12.0605 12.9492 11.9336 12.8223L8.53125 9.41992C7.61719 10.1562 6.47461 10.5625 5.25586 10.5625C2.36133 10.5625 0 8.20117 0 5.28125C0 2.38672 2.33594 0 5.25586 0C8.15039 0 10.5371 2.38672 10.5371 5.28125C10.5371 6.52539 10.1309 7.66797 9.39453 8.55664L12.7969 11.959ZM1.21875 5.28125C1.21875 7.54102 3.02148 9.34375 5.28125 9.34375C7.51562 9.34375 9.34375 7.54102 9.34375 5.28125C9.34375 3.04688 7.51562 1.21875 5.28125 1.21875C3.02148 1.21875 1.21875 3.04688 1.21875 5.28125Z' fill='black'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .wp-block-navigation__responsive-container-content .search-active .wp-block-search__button::before {
        width: 28px;
        height: 26px;
        background-image: url('data:image/svg+xml,<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.7969 11.959C13.0508 12.2129 13.0508 12.5938 12.7969 12.8223C12.6953 12.9492 12.543 13 12.3906 13C12.2129 13 12.0605 12.9492 11.9336 12.8223L8.53125 9.41992C7.61719 10.1562 6.47461 10.5625 5.25586 10.5625C2.36133 10.5625 0 8.20117 0 5.28125C0 2.38672 2.33594 0 5.25586 0C8.15039 0 10.5371 2.38672 10.5371 5.28125C10.5371 6.52539 10.1309 7.66797 9.39453 8.55664L12.7969 11.959ZM1.21875 5.28125C1.21875 7.54102 3.02148 9.34375 5.28125 9.34375C7.51562 9.34375 9.34375 7.54102 9.34375 5.28125C9.34375 3.04688 7.51562 1.21875 5.28125 1.21875C3.02148 1.21875 1.21875 3.04688 1.21875 5.28125Z" fill="white"/></svg>');
    }
    
    /* When search is active, show full overlay */
    .wp-block-navigation__responsive-container-content .wp-block-search.search-active .wp-block-search__inside-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        margin: 0;
        border: none;
    }
    
    /* Style the search input when active */
    .wp-block-navigation__responsive-container-content .wp-block-search.search-active .wp-block-search__input {
        position: static;
        width: 100%;
        max-width: 600px;
        font-size: 1.5rem;
        padding: 1rem 1.5rem;
        background: #fff;
        border: 2px solid #000;
        border-radius: 4px;
        opacity: 1;
        clip: auto;
        height: auto;
        margin: 0;
    }
    
    /* Hide the label */
    .wp-block-navigation__responsive-container-content .wp-block-search__label {
        display: none;
    }
    
    /* Close button when search is active - using a pseudo-element on a wrapper */
    .wp-block-navigation__responsive-container-content .wp-block-search.search-active .wp-block-search__inside-wrapper::after {
        content: '×';
        position: absolute;
        top: 2rem;
        right: 2rem;
        font-size: 3rem;
        color: #fff;
        cursor: pointer;
        line-height: 1;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        z-index: 1000000;
    }
    
    .wp-block-navigation__responsive-container-content .wp-block-search.search-active .wp-block-search__inside-wrapper::after:hover {
        background: #fff;
        color: #000;
    }
    
    /* Prevent body scroll when search is open */
    body.search-overlay-open {
        overflow: hidden;
    }
}

/* Mobile styles - show normal search form */
@media screen and (max-width: 599px) {
    .wp-block-navigation__responsive-container-content .wp-block-search {
        /* Reset any desktop styles */
        position: static;
    }
    
    .wp-block-navigation__responsive-container-content .wp-block-search__inside-wrapper {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: transparent;
        height: auto;
        width: auto;
        padding: 0;
        display: flex;
    }
    
    .wp-block-navigation__responsive-container-content .wp-block-search__input {
        width: auto;
        max-width: none;
        font-size: inherit;
    }
}