/* ==========================================================================
   SOV-O homepage, mockup layout applied to the original sections.
   Loaded AFTER style.css and responsive.css. Layout only.

   This file does not change colours, backgrounds, fonts, container widths,
   copy or imagery. It only rearranges three sections to match the client
   layout reference:
     1. hero, supporting list and button row added beneath the text
     2. how it works, the two existing groups become tabs, steps sit in a grid
   Everything else on the page is untouched.
   ========================================================================== */

/* --- 1. hero ----------------------------------------------------------- */

.banner_section .banner_text p {
    max-width: 480px;
}

/* supporting labels */

.banner_section .banner_usp {
    list-style: none;
    margin: 26px 0 30px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.banner_section .banner_usp li {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--secondary);
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(50, 35, 111, .06);
}

.banner_section .banner_usp i {
    font-size: 13px;
}

.banner_section .banner_usp .usp_paid {
    color: var(--primary);
}

.banner_section .banner_usp .usp_volunteer {
    color: #14b8a6;
}

.banner_section .banner_usp .usp_secure {
    color: var(--primary);
}

/* button row, all three on one line */

.banner_section .app_btn {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 0;
}

/* the theme adds margin-left:25px to the last item, which indented See How
   It Works whenever the row wrapped */
.banner_section .app_btn li,
.banner_section .app_btn li:last-child {
    margin: 0;
}

/* the theme sizes these at 210px on a dark purple ground; the reference has
   compact black pills, so the padding shrinks and the white lockup is shown
   in place of the purple one */
.banner_section .app_btn li a {
    background-color: #000;
    padding: 11px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.banner_section .app_btn li a:hover {
    background-color: #1c1c1c;
}

.banner_section .app_btn li a .blue_img {
    display: none;
}

.banner_section .app_btn li a .white_img {
    position: static;
    left: auto;
    transform: none;
    opacity: 1;
    max-width: 104px;
    height: auto;
    display: block;
}

/* when the column is too narrow for all three, the badges take the first row
   and this sits flush beneath them rather than trailing off the end */
.banner_section .app_btn li.how_link {
    flex-basis: auto;
    margin-left: 0;
}

.banner_section .app_btn li.how_link .how_btn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    background: var(--white);
    border: 1.5px solid var(--primary);
    color: var(--primary);
    border-radius: 12px;
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: 0.3s all;
}

.banner_section .app_btn li.how_link .how_btn:hover {
    background: var(--primary);
    color: var(--white);
}

.banner_section .app_btn li.how_link .how_btn i {
    font-size: 16px;
}

/* --- 2. how it works, tabs over a grid of steps ------------------------ */

.whychoose_section .hiw_tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 36px;
}

.whychoose_section .hiw_tab {
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--secondary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px;
    padding: 12px 28px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.whychoose_section .hiw_tab:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.whychoose_section .hiw_tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.whychoose_section .hiw_panel[hidden] {
    display: none;
}

.whychoose_section .hiw_grid {
    align-items: stretch;
}

.whychoose_section .hiw_grid > [class*="col-"] {
    margin-bottom: 24px;
}

.whychoose_section .hiw_grid .whychoose_box {
    height: 100%;
    margin-bottom: 0;
    text-align: left;
}

/* --- responsive -------------------------------------------------------- */

@media (max-width: 991px) {

    .banner_section .banner_text p {
        max-width: none;
    }

}

@media (max-width: 767px) {

    .banner_section .banner_usp {
        gap: 8px;
        margin: 20px 0 24px;
    }

    .banner_section .banner_usp li {
        font-size: 13px;
        padding: 9px 13px;
    }

    .banner_section .app_btn {
        gap: 10px;
    }

    .banner_section .app_btn li a {
        padding: 11px 16px;
    }

    .banner_section .app_btn li a .white_img {
        max-width: 104px;
    }

    .banner_section .app_btn li.how_link .how_btn {
        padding: 11px 18px;
        font-size: 13.5px;
    }

    .whychoose_section .hiw_tab {
        flex: 1 1 auto;
        padding: 11px 18px;
        font-size: 14px;
    }
}