/* General Styles */
@import url("https://use.typekit.net/rrc0sio.css");

body, html {
    font-family: proxima-nova, sans-serif;
    font-weight: 400;
    font-style: normal;
}

strong, b { font-weight: 700;}

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

.container-fluid {
    &.limited { max-width: 128rem; }
}

/* Navigation */
.main-nav {
    .navbar-brand {
        max-height: 3.6rem;
        img { max-height: 3.6rem; }
    }
    .navbar-nav {
        .nav-link {
            padding: 0;
            position: relative;
            &::after {
                content: '';
                display: block;
                width: 0;
                height: 2px;
                background-color: var(--bs-yellow);
                transition: width 0.5s ease-in-out;
                margin-top: 3px;
                position: absolute;
            }
            &:hover::after { width: 100%; }
        }
    }
    .phone {
        font-weight: 600;
        i { color: var(--bs-gray-dark); }
    }
}

/* Titles */
.lil-title {
    &:before {
        content: '';
        background-color: var(--bs-yellow);
        display: block;
        height: .2rem;
        margin: 0 0 1rem;
        max-width: 2.5rem;
    }
    &.text-center::before { margin: 0 auto 1rem; }
    &.text-end::before { margin: 0 0 1rem auto; }
}

.page-title {
    color: var(--bs-primary);
    &:before {
        content: '';
        background-color: var(--bs-yellow);
        display: block;
        height: .2rem;
        margin: 0 0 1rem;
        max-width: 2.5rem;
    }
}

.splash {
    background-color: black;
    background-image: url('../img/splash-one.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 50svh;
    text-shadow: 0 .25rem .5rem rgba(0,0,0,1);
    .btn {
        box-shadow: 0 .25rem .5rem rgba(0,0,0,0.5);
        text-shadow: none;
    }
    .schedule {
        text-shadow: none;
        box-shadow: 0 .25rem .5rem rgba(0,0,0,0.5);
    }
}

/* Chat Area */
#whatsapp-bubble {
    background: #25D366;
    border: 2px solid white;
    height: 3rem;
    width: 3rem;
}

#chat-window {
    bottom: 3rem;
    right: 0;
    width: 15rem;
}

#chat-window::after {
    bottom: -0.7rem;
    border-width: .8rem .8rem 0 .8rem;
    border-style: solid;
    border-color: white transparent transparent transparent;
    content: "";
    height: 0;
    position: absolute;
    right: .8rem;
    width: 0;
}

.services {
    .title, .lil-title { text-shadow: 0 .1rem .1rem white; }
}

.contact {
    .logo {
        display: block;
        margin: 0 auto;
        max-width: 18rem;
    }
}

.contact-us, .products, .product-info, .cart, .checkout {
    min-height: calc(100vh - 14.9rem);
}

.products {
    .card {
        .card-text {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    }
}

.cart {
    .item-pic {
        width: 4.8rem;
        img { max-width: 100%; }
    }
}

.form-label {
    .required::after {
        color: var(--bs-danger);
        content: "*";
        display: inline-block;
        font-weight: 600;
    }
}  

.checkout {
    .cart-totals {
        td, th { background-color: transparent; }
    }
    .accordion {
        .accordion-button {
            padding: 0;
            input[type=radio] { margin: 1.25rem 0 1.25rem 1.25rem; }
            label {
                flex: 1;
                padding: 1.25rem;
                padding-left: .75rem;
            }
            &::after { display: none; }
        }
    }
    .afterpay {
        width: auto;
        min-width: 50%;
        max-width: 100%;
        .status-icon {
            font-size: 6.4rem;
            line-height: 1;
            .bi { display: inline-block; }
        }
    }
}

/* Responsive Sizes */
@media (max-width: 767.98px) {
    .splash { height: auto; }
    .main-nav {
        .navbar-brand {
            max-height: 1.8rem;
            img { max-height: 1.8rem; }
        }
        .phone {
            color: var(--bs-gray-dark);
            font-size: 0.9rem;
        }
    }
}