/* ==========================================================
   BUTTONS.CSS
   Rising Sons Africa
========================================================== */


/* ==========================================================
   BASE BUTTON
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    padding:.95rem 2rem;

    border:none;

    border-radius:var(--radius-pill);

    font-family:var(--font-family);

    font-size:var(--font-size-md);

    font-weight:var(--font-semibold);

    text-decoration:none;

    cursor:pointer;

    user-select:none;

    white-space:nowrap;

    transition:all var(--transition);

}

.btn:disabled{

    opacity:.65;

    cursor:not-allowed;

    pointer-events:none;

}


/* ==========================================================
   PRIMARY
========================================================== */

.btn-primary{

    background:var(--primary);

    color:var(--white);

    box-shadow:
        0 10px 24px rgba(245,158,11,.20);

}

.btn-primary:hover{

    background:var(--primary-dark);

    color:var(--white);

    transform:translateY(-3px);

    box-shadow:
        0 16px 36px rgba(245,158,11,.28);

}

.btn-primary:active{

    transform:translateY(0);

}


/* ==========================================================
   SECONDARY
========================================================== */

.btn-secondary{

    background:var(--secondary);

    color:var(--white);

}

.btn-secondary:hover{

    background:var(--secondary-dark);

    color:var(--white);

    transform:translateY(-3px);

}


/* ==========================================================
   OUTLINE PRIMARY
========================================================== */

.btn-outline-primary{

    background:transparent;

    color:var(--primary);

    border:2px solid var(--primary);

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:var(--white);

}


/* ==========================================================
   OUTLINE LIGHT
========================================================== */

.btn-outline-light{

    background:transparent;

    color:var(--white);

    border:2px solid var(--white);

}

.btn-outline-light:hover{

    background:var(--white);

    color:var(--heading);

}


/* ==========================================================
   LIGHT
========================================================== */

.btn-light{

    background:var(--white);

    color:var(--heading);

    box-shadow:var(--shadow-sm);

}

.btn-light:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}


/* ==========================================================
   LINK BUTTON
========================================================== */

.btn-link{

    padding:0;

    background:none;

    color:var(--primary);

    border:none;

    border-radius:0;

}

.btn-link:hover{

    color:var(--primary-dark);

}


/* ==========================================================
   ICON BUTTON
========================================================== */

.btn-icon{

    width:48px;

    height:48px;

    padding:0;

    border-radius:50%;

}

.btn-icon i{

    font-size:1rem;

}


/* ==========================================================
   SIZES
========================================================== */

.btn-sm{

    padding:.7rem 1.4rem;

    font-size:.9rem;

}

.btn-lg{

    padding:1.15rem 2.5rem;

    font-size:1.05rem;

}


/* ==========================================================
   FULL WIDTH
========================================================== */

.btn-block{

    width:100%;

}


/* ==========================================================
   FOCUS
========================================================== */

.btn:focus-visible{

    outline:3px solid rgba(245,158,11,.25);

    outline-offset:4px;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .btn{

        padding:.9rem 1.6rem;

        font-size:.95rem;

    }

    .btn-lg{

        padding:1rem 2rem;

    }

}