/**
 * Header Search Width Transition Fix
 *
 * This file adds a smooth width transition to the header search input.
 * The search starts with width: 0 (invisible and takes no space), then
 * expands to 200px when hovered/focused with a smooth animation.
 *
 * This prevents the Donate button from being pushed over when the
 * search input is hidden.
 *
 * Implementation Date: October 16, 2025
 */

#header-search {
    display: flex;
    align-items: center;
}

/* Default state - hidden with no width */
#header-search .search-form input[type="search"] {
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 2.5em !important;
    border: none !important;
    transition: 0.25s ease-in-out opacity,
                0.35s ease-in-out width,
                0.25s ease-in-out padding,
                0.25s ease-in-out border !important;
}

/* Hover/focus/active state - expanded */
#header-search .search-form input[type="search"]:hover,
#header-search .search-form input[type="search"]:focus,
#header-search .search-form input[type="search"]:active {
    opacity: 1 !important;
    width: 250px !important; /* Adjust this value to your preferred width */
    padding-left: 0.75em !important;
    border: 1px solid #bebebe !important; /* $gray color from theme */
}

/* When hovering the search button itself */
#header-search .search-form input[type="search"]:hover ~ button,
#header-search .search-form input[type="search"]:focus ~ button,
#header-search .search-form input[type="search"]:active ~ button {
    padding: 0.5em !important;
}

#header-search .search-form input[type="search"]:hover ~ button i,
#header-search .search-form input[type="search"]:focus ~ button i,
#header-search .search-form input[type="search"]:active ~ button i {
    font-size: 1.75em !important;
}

#header-search .search-form input[type="search"]:hover ~ button .screen-reader-text,
#header-search .search-form input[type="search"]:focus ~ button .screen-reader-text,
#header-search .search-form input[type="search"]:active ~ button .screen-reader-text {
    opacity: 0 !important;
}

/* When hovering the form container */
#header-search .search-form:hover input[type="search"],
#header-search .search-form:focus input[type="search"],
#header-search .search-form:active input[type="search"] {
    opacity: 1 !important;
    width: 250px !important; /* Must match the value above */
    padding-left: 0.75em !important;
    padding-right: 2.5em !important;
    border: 1px solid #bebebe !important;
}

#header-search .search-form:hover button,
#header-search .search-form:focus button,
#header-search .search-form:active button {
    padding: 0.5em !important;
}

#header-search .search-form:hover button i,
#header-search .search-form:focus button i,
#header-search .search-form:active button i {
    font-size: 1.75em !important;
}

#header-search .search-form:hover button .screen-reader-text,
#header-search .search-form:focus button .screen-reader-text,
#header-search .search-form:active button .screen-reader-text {
    opacity: 0 !important;
}

.donate-button {
    color: #fff !important;
    border-radius: 25px !important;
    padding: 0.5rem 1rem !important;
    margin-right: 1rem !important;
    display: flex !important;
}

@media (max-width: 600px) {
    .donate-button {
        display: none !important;
    }
}

/**
 * CUSTOMIZATION OPTIONS:
 *
 * To adjust the search input width, change both instances of "200px" above.
 * Recommended values:
 * - 150px (narrower)
 * - 200px (current/balanced)
 * - 250px (wider)
 * - 300px (very wide)
 *
 * To adjust animation speed, change the transition values:
 * - Faster: 0.2s ease-in-out
 * - Slower: 0.5s ease-in-out
 *
 * To change the border color, update the "border" property value.
 * Current color: #bebebe (gray from theme)
 */