/* =========================================================
   GWL Search Page Styles
   ========================================================= */

.gwl-search-page-wrap {
    max-width: none !important;
    width: 100% !important;
    padding: 20px 30px !important; /* Boosted side padding to keep content off the literal edge */
    box-sizing: border-box;
    margin: 0 auto;
}

.gwl-search-page-wrap .gwl-legacy-page__wp-content {
    margin-bottom: 24px;
}

/* Hide sidebars on smaller screens to prioritize search results */
@media (max-width: 1200px) {
    .page-template-page-search #secondary,
    .page-template-page-search #sidebar,
    .page-template-page-search .sidebar,
    .page-template-page-search .widget-area {
        display: none !important;
    }
    .page-template-page-search #primary,
    .page-template-page-search #content,
    .page-template-page-search .content-area,
    .page-template-page-search .site-content,
    .page-template-page-search main {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   2. Search Bar Layout
   ========================================================= */
.gwl-search-bar-container {
    background: #222;
    padding: 15px 20px; /* Shaved 5px off top and bottom padding as well */
    border-radius: 8px;
    margin-bottom: 5px !important; /* Force a tiny gap below the box */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.gwl-search-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; 
    margin: 0 !important; /* Nukes the theme's invisible form margin */
    padding: 0 !important;
}

.gwl-search-input {
    flex-grow: 1;
    padding: 12px 15px;
    font-size: 1.1em;
    border-radius: 4px;
    border: 1px solid #444;
    background: #333;
    color: #fff;
    min-width: 250px;
}

.gwl-search-input:focus {
    outline: none;
    border-color: #98cb00; /* Changed to match the new green button */
}

.gwl-search-btn {
    padding: 12px 24px;
    background: #98cb00; /* Your brand green */
    color: #555555;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1.05em;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.gwl-search-btn:hover {
    background: #5de000; /* Your hover green */
}

/* =========================================================
   3. Search Results Layout
   ========================================================= */
.gwl-search-results-header {
    margin-bottom: 20px;
    color: #dd9933; /* Soft Gold for the main text */
}

/* Targets the specific search string inside the <em> tags */
.gwl-search-results-header em {
    color: #007bff; /* Brand Blue */
    font-weight: 700; /* Bolds the searched word to make it stand out */
    font-style: normal; /* Optional: removes the default italics. Delete this line if you want to keep it italicized! */
}

.gwl-search-empty {
    color: #aaa;
    font-style: italic;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

/* Section Titles */
.gwl-search-section-title {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    padding-left: 15px; /* Pushes the title off the left wall */
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
}
.gwl-search-section-title--players { color: #007bff; }
.gwl-search-section-title--teams   { color: #007bff; }
.gwl-search-section-title--games   { color: #dd9933; }
.gwl-search-section-title--ladders { color: #98cb00; }

/* Result Lists */
.gwl-search-list {
    list-style: none;
    padding: 0 0 0 15px; /* Adds 15px of padding to the left of the results */
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gwl-search-list--col {
    flex-direction: column;
    gap: 8px;
}

/* Individual Result Badges/Rows */
.gwl-search-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, transform 0.1s ease;
}

.gwl-search-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.gwl-search-item a {
    text-decoration: none;
    color: #fff;
    display: block;
    font-weight: 500;
}

/* Specialized links */
.gwl-search-item--game a {
    color: #dd9933;
    font-weight: 700;
}

.gwl-search-item--ladder a {
    color: #98cb00; 
}

.gwl-search-item a:hover {
    text-decoration: underline;
}

/* =========================================================
   4. Sticky Page Title (Mirrors Legacy Hub)
   ========================================================= */
.gwl-search-page-wrap .gwl-sticky-header-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0; /* TIP: Change this to 32px if the WP Admin bar is covering the header! */
    z-index: 999;
    margin: 0 !important;
    padding: 0 !important;
}

.gwl-search-page-wrap .gwl-sticky-title {
    background: #333333 !important; /* Solid dark background */
    box-shadow: 0 2px 5px rgba(0,0,0,0.4) !important; /* Exact drop shadow from legacy-esports.css */
    padding: 15px 20px !important; /* Exact padding from the hub pages */
    margin: 0 !important;
    color: #ffffff !important; /* Forces text to white instead of gold */
    box-sizing: border-box;
    width: 100%;
    display: block;
}

/* =========================================================
   5. Search Results Page Specifics
   ========================================================= */

/* Add extra top margin to the search bar ONLY on the results pages 
   to give it breathing room underneath the sticky title */
body[class*="page-legacy-search"] .gwl-search-bar-container,
body[class*="page-template-page-search"] .gwl-search-bar-container {
    margin-top: 25px !important; 
}