@import url('root.css');

/* =========================================
   FOOTER
   ========================================= */
footer{
    position: relative;
    z-index: 0;
    /* tucks the footer up under the wiggle line above it */
    margin-top: -40px;
    padding-top: 90px;
    background-color: var(--green);

    .footer-content{
        display: grid;
        grid-template-columns: repeat(3 , 1fr);
        padding: 0 60px 40px;

        h3{
            color: var(--goldenrod);
            font-family: var(--heading-font);
            font-size: 30px;
            margin-bottom: 18px;
        }

        p{
            color: whitesmoke;
            font-family: var(--body-font);
            font-size: 18px;
            margin-bottom: 10px;
        }

        a{
            color: whitesmoke;
            font-family: var(--body-font);
            text-decoration: none;
            transition: color 0.2s ease;

            &:hover{
                color: var(--goldenrod);
            }
        }

        /* LEFT - LOGO AND TAGLINE */
        .left{
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .logo{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 12px;

                img{
                    width: 60px;
                }

                h2{
                    color: var(--bone);
                    font-family: var(--heading-font);
                    font-size: 32px;
                    margin: 0;
                    padding-left: 12px;
                }
            }

            p{
                color: var(--bone);
                margin-bottom: 20px;
            }

            .book-btn{
                display: inline-block;
                padding: 10px 28px;
                background-color: var(--goldenrod);
                color: var(--bone);
                font-size: 18px;
                border-radius: 30px;
                transition: background-color 0.2s ease;

                &:hover{
                    color: var(--bone);
                    background-color: var(--clay-brown);
                }
            }
        }

        /* MIDDLE - QUICK LINKS */
        .middle{
            display: flex;
            flex-direction: column;
            align-items: center;

            .footer-links{
                display: flex;
                flex-direction: column;
                align-items: center;

                a{
                    font-size: 18px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                }
            }
        }

        /* RIGHT - CONTACT INFO */
        .right{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
    }

    /* BOTTOM BAR */
    .footer-bottom{
        border-top: 1px solid var(--clay-brown);
        padding: 18px 20px;
        text-align: center;

        p{
            color: var(--bone);
            font-family: var(--body-font);
            font-size: 14px;
            margin: 0;
            opacity: 0.75;

            a{
                color: var(--bone);
                text-decoration: none;
            }

            a:hover{
                color: var(--goldenrod);
            }
        }

        .appointment{
            color: var(--goldenrod);
            font-family: var(--heading-font);
            font-size: 22px;
            margin-bottom: 6px;
            opacity: 1;
        }
    }
}

/* =========================================
   PHONE VIEW
   ========================================= */
@media (max-width: 767px){
    footer{
        margin-top: -28px;
        padding-top: 70px;

        .footer-content{
            grid-template-columns: 1fr;
            padding: 0 20px 25px;
            text-align: center;

            h3{
                font-size: 26px;
                margin-bottom: 12px;
            }

            p{
                font-size: 16px;
            }

            .left, .middle, .right{
                align-items: center;
                padding-bottom: 30px;
            }

            /* LOGO */
            .left{
                .logo{
                    img{
                        width: 48px;
                    }

                    h2{
                        font-size: 26px;
                        padding-left: 10px;
                    }
                }
            }
        }

        /* BOTTOM BAR */
        .footer-bottom{
            .appointment{
                font-size: 18px;
            }

            p{
                font-size: 13px;
            }
        }
    }
}

/* =========================================
   TABLET VIEW
   ========================================= */


/* =========================================
   BIGGER SCREEN SIZES VIEWS
   ========================================= */