/* page-support.css */

#home-banner .support-container * {
    color: var(--neutral-700);
    line-height: var(--leading-relaxed);
}

#home-banner .support-container {
    text-align: left;
    width: var(--size-full);
    max-width: var(--container-3xl);
    background-color: var(--white);
    padding: var(--spacing-14) var(--spacing-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-24);
    margin-bottom: var(--spacing-14);
    overflow: hidden;
}

/* Heading Container */
#home-banner .support-container .heading-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
    padding: 0 var(--spacing-4);
}

#home-banner .support-container .heading-container h1 {
    font-size: var(--text-4xl);
    text-align: center;
    display: none;
}

#home-banner .support-container .heading-container p {
    width: var(--size-full);
    max-width: var(--container-lg);
    text-align: center;
    line-height: var(--leading-loose);
}

/* Info Container */
.support-container .info-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-8);
}

/* Cards */
/* Search Content */
.support-container .search-content {
    width: var(--size-3-of-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-1);
    
}

.support-container .search-content:focus-within {
    width: var(--size-full);
}

.support-container .search {
    background-color: var(--neutral-100);
    width: var(--size-full);
    height: var(--size-16);
    padding: var(--spacing-2) var(--spacing-2_5);
    display: flex;
    justify-content: space-between;
    gap: var(--gap-12);
    border: var(--border) solid var(--neutral-100);
    
    border-radius: var(--rounded-sm);
}

.support-container .search:focus-within {
    border: var(--border-2) solid var(--neutral-700);
}

.support-container .search #mySearchInput {
    height: var(--size-full);
    padding: var(--spacing-0);
    border: var(--border-0);
    flex: 1;
    background-color: var(--neutral-100);
    font-size: var(--text-sm);
}

.support-container .search #mySearchInput:focus {
    box-shadow: none;
}

.support-container .search button {
    width: var(--size-full);
    max-width: var(--size-28);
    height: var(--size-full);
    background-color: var(--white);
    border: var(--border-0);
    color: var(--neutral-700);
    border-radius: var(--rounded);
    display: flex;
    justify-content: center;
    align-items: center;
}

#home-banner .support-container .search button>span {
    font-size: var(--text-sm);
    font-style: normal;
}

#home-banner .support-container .search button>svg {
    display: none;
    stroke: var(--neutral-700);
    width: var(--size-5);
    height: var(--size-5);
}


#home-banner .support-container .search button:hover {
    color: var(--neutral-700);
    background-color: var(--neutral-200);
}

.support-container .search button:active {
    box-shadow: -2px 4px 0 var(--neutral-700-opacity-50);
}

#home-banner .support-container .gsc-control-cse span {
    color: #333;
}

.gs-webResult .gs-visibleUrl {
    display: none;
}

.support-container .gsc-tabsArea,
.gsc-refinementBlock,
.gs-per-result-labels {
    display: flex;
    flex-wrap: wrap;
}

.gs-per-result-labels {
    font-size: var(--text-sm);
    align-items: center;
}

.gsc-search-box,
.gsc-search-button {
    display: none !important;
}

.gsc-control-cse {
    background-color: transparent !important;
    border: var(--border-0) !important;
}

.support-container .gsc-control-cse {
    background-color: unset;
    border: unset;
}

.support-container .gsc-input-box,
.support-container .gsc-search-button {
    border-radius: var(--rounded);
}

.gs-title a {
    font-weight: unset
}

#home-banner .support-container .search-content small {
    color: var(--neutral-400);
    font-style: italic;
    width: var(--size-full);
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
}

.support-container .info-container .cards-left,
.support-container .info-container .cards-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--gap-10)
}

.support-container .info-container .card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
    padding: var(--spacing-4);
    height: var(--size-80);
    
}

.support-container .info-container .cards-left .card {
    box-shadow: -4px 4px 8px var(--blue-50);
}

.support-container .info-container .cards-left .card:hover,
.support-container .info-container .cards-right .card:hover {
    box-shadow: 0px 0px 8px var(--blue-100)
}

.support-container .info-container .cards-right .card {
    box-shadow: 4px 4px 8px var(--blue-50);
}

.support-container .info-container .card>div {
    display: flex;
    gap: var(--gap-2);
    align-items: center;
}

.support-container .info-container .card>div svg {
    stroke: var(--neutral-700);
}

.support-container .info-container .card h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin: var(--spacing-0);
}

#home-banner .support-container .info-container .card p > a {
    color: var(--blue-400);
}

#home-banner .support-container .info-container .card p > a:hover {
    color: var(--neutral-700);
}

.support-container .info-container .card > a {
    width: fit-content;
    padding: var(--spacing-2_5) var(--spacing-10);
    font-size: var(--text-base);
    border-radius: var(--rounded-sm);
    margin: auto auto var(--spacing-0);
    text-decoration: underline;
    opacity: 1;
    
    text-align: center;
}

.support-container .info-container .card > a:hover {
    background-color: var(--neutral-100);
}

.support-container .info-container .card .help-desks {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}

.support-container .info-container .card .help-desks .help-desk {
    font-size: var(--text-sm);
    display: flex;
    gap: var(--gap-1);
    align-items: center;
}

#home-banner .support-container .info-container .card .help-desks .help-desk svg {
    width: var(--size-4);
    height: var(--size-4);
    stroke: var(--blue-200);
}

#home-banner .support-container #___gcse_0 {
    position: absolute;
}

/* Media Queries */
@media screen and (max-width: 1536px) {
    .support-container .search-content {
        width: var(--size-4-of-5);
    }
}

@media screen and (max-width: 1280px) {
    .support-container .info-container .card {
        height: 400px;
    }

    .support-container .search-content {
        width: var(--size-5-of-6);
    }

    .support-container .search {
        gap: var(--gap-5);
    }

    .support-container .search button {
        max-width: var(--size-24);
    }
}

@media screen and (max-width: 1090px) {
    .support-container .info-container {
        flex-direction: column;
    }

    .support-container .info-container .card {
        height: auto;
        padding: var(--spacing-9) var(--spacing-4);
    }
}

@media screen and (max-width: 1024px) {
    #home-banner .support-container .heading-container h1 {
        display: block;
    }
}

@media screen and (max-width: 640px) {
    #home-banner .support-container {
        padding-left: var(--spacing-0);
        padding-right: var(--spacing-0);
    }

    .support-container .info-container .card {
        align-items: center;
    }

    .support-container .info-container .card > div {
        flex-direction: column;
    }

    .support-container .info-container .card > div svg {
        width: var(--size-14);
        height: var(--size-14);
    }

    .support-container .info-container .card p,
    #home-banner .support-container .search-content small.card,
    .support-container .info-container .card h2 {
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .support-container .search button {
        max-width: var(--size-20);
    }

    #home-banner .support-container .search button>span {
        display: none;
    }

    #home-banner .support-container .search button>svg {
        display: block;
    }
}