/* =========================================================
   SEARCH OVERLAY
   ========================================================= */

#search-overlay {

    position: fixed;

    inset: 0;

    z-index: 100000;

    background: rgb(129 142 154 / 96%);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-100%);

    transition:
        transform 0.55s cubic-bezier(.77,0,.175,1),
        opacity 0.35s ease,
        visibility 0s linear 0.55s;

}


/* =========================================================
   OPEN
   ========================================================= */

#search-overlay.search-open {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    transition:
        transform 0.55s cubic-bezier(.77,0,.175,1),
        opacity 0.25s ease;

}


/* =========================================================
   PANEL
   ========================================================= */

.search-panel {

    position: relative;

    width: min(
        900px,
        calc(100% - 40px)
    );

    margin: 0 auto;

    padding-top: 90px;
}


/* =========================================================
   CLOSE
   ========================================================= */

#search-close {

    position: absolute;

    top: 28px;
    right: 0;

    width: 42px;
    height: 42px;

    border: 0;

    background: transparent;

    color: rgba(255,255,255,.65);

    font-size: 24px;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}

#search-close:hover {

    color: #fff;

    transform: rotate(90deg);
}


/* =========================================================
   SEARCH INPUT
   ========================================================= */

.search-input-wrapper {

    display: flex;

    align-items: center;

    gap: 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.25);

    padding-bottom: 18px;

    transform:
        translateY(35px);

    opacity: 0;

    transition:
        transform .5s ease .25s,
        opacity .5s ease .25s;
}


/* wanneer overlay open */

.search-open
.search-input-wrapper {

    transform:
        translateY(0);

    opacity: 1;
}


/* =========================================================
   SEARCH ICON
   ========================================================= */

.search-input-wrapper > i {

    color:
        rgba(255,255,255,.45);

    font-size: 26px;
}


/* =========================================================
   INPUT
   ========================================================= */

#news-search {

    flex: 1;

    width: 100%;

    border: 0;

    outline: none;

    background: transparent;

    color: #fff;

    font-family: inherit;

    font-size: clamp(
        28px,
        5vw,
        52px
    );

    font-weight: 300;

    letter-spacing:
        -1.5px;
}

#news-search::placeholder {

    color:
        rgba(255,255,255,.28);
}


/* =========================================================
   SUGGESTIONS
   ========================================================= */

#search-suggestions {

    margin-top: 30px;

    color: #fff;

    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity .4s ease .4s,
        transform .4s ease .4s;
}

.search-open
#search-suggestions {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   HINT
   ========================================================= */

.search-hint {

    color:
        rgba(255,255,255,.38);

    font-size: 14px;
}


/* =========================================================
   SUGGESTION
   ========================================================= */

.search-suggestion {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 0;

    color:
        rgba(255,255,255,.75);

    font-size: 18px;

    cursor: pointer;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    transition:
        color .2s ease,
        padding-left .2s ease;
}

.search-suggestion:hover {

    color: #fff;

    padding-left: 8px;
}


.search-suggestion i {

    font-size: 12px;

    color:
        rgba(255,255,255,.3);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .search-panel {

        width:
            calc(100% - 30px);

        padding-top: 80px;
    }


    #news-search {

        font-size: 30px;

        letter-spacing: -1px;
    }


    .search-input-wrapper {

        gap: 12px;
    }


    .search-input-wrapper > i {

        font-size: 20px;
    }


    #search-close {

        top: 22px;
    }

}

body.search-active {
    overflow: hidden;
}

/* =========================================================
   SEARCH SECTION
   ========================================================= */

.search-section-title {

    margin-bottom: 12px;

    color:
        rgba(255,255,255,.35);

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* =========================================================
   SEARCH RESULTS
   ========================================================= */

#search-results {

    margin-top: 35px;

    max-height:
        calc(100vh - 300px);

    overflow-y: auto;
}


/* =========================================================
   RESULT
   ========================================================= */

.search-result {

    padding: 16px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    cursor: pointer;
}


.search-result-title {

    color: #fff;

    font-size: 20px;

    line-height: 1.3;

    margin-bottom: 6px;
}


/* =========================================================
   RESULT META
   ========================================================= */

.search-result-meta {

    color:
        rgba(255,255,255,.65);

    font-size: 13px;

    margin-bottom: 7px;
}


/* =========================================================
   RESULT SUMMARY
   ========================================================= */

.search-result-summary {

    color:
        rgba(255,255,255,.75);

    font-size: 15px;

    line-height: 1.45;
}


/* =========================================================
   RESULT HOVER
   ========================================================= */

.search-result:hover
.search-result-title {

    color:
        rgba(255,255,255,.85);
}


/* =========================================================
   RESULT COUNT
   ========================================================= */

.search-result-count {

    color:
        rgba(255,255,255,.5);

    font-size: 13px;

    margin-bottom: 10px;
}


/* =========================================================
   NO RESULTS
   ========================================================= */

.search-no-results {

    color:
        rgba(255,255,255,.4);

    font-size: 14px;

    padding-top: 20px;
}