/*
Theme Name:   	Mochilas Emergencia Theme                               
Theme URI:    	https://github.com/stuartduff/storefront-child-theme
Author:       	Hello World
Author URI:     https://helloworld.pt
Template:     	storefront
Description:  	This is a WooCommerce Storefront child theme built for Mochilas Emergencia
Version:      	1.0.2
License:      	GNU General Public License v2 or later
License URI:  	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  	storefront
*/

/*
* Flexbox Grid
*/
@media only screen and (min-width: 48em) {
    .container {
        width: 57rem;
    }
}
@media only screen and (min-width: 75em) {
    .container {
        width: 67rem;
    }
}

/*
* Typography
*/
body {
    font-family: 'Lato', sans-serif;
    color: #3a3a3a;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    strong {
        color: #dc090e;
    }
}
h1 {
    font-size: 3.5rem;
}
h2 {
    font-size: 2.5rem;
}
h3 {
    font-size: 2rem;
}
h4 {
    font-size: 1.5rem;
}
h5 {
    font-size: 1.2rem;
}
h6 {
    font-size: 1rem;
}
p {
    font-size: 1.1rem;
}

/*
* Buttons
*/
.btn-primary {
    background-color: #dc090e;
    color: #fff;
    padding: 10px 12px;
    border-radius: 5px;
    display: inline-block;
    transition: all 0.3s ease;
    
    &::after {
        content: '\f061';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: 10px;
        transition: all 0.3s ease;
        font-size: .7rem;
    }

    &:hover { 
        background-color: black;

        &::after {
            margin-left: 20px;
        }
    }
}
a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus {
    outline-color: #dc090e;
}

/*
* Header
*/
@media (min-width: 768px) {
    .storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {
        width: 39%;
    }
}
@media (min-width: 768px) {
    .woocommerce-active .site-header .site-search {
        width: 29.73913%;
    }
}
/* #masthead a:focus {
    outline: none;
} */
/*
* Footer
*/
#colophon {
    background-color: #f5f5f5;
    padding-top: 4em;
    padding-bottom: 4em;
    background-image: url('/wp-content/themes/storefront-child/img/footer-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .widget .widget-title, .widget .widgettitle {
        border-bottom: 1px solid #fff;
        padding-bottom: 1em;
    }

    .footer-widget-area {
        
        h2 {
            font-size: 1.25rem;
            font-weight: bold;
            color: white !important;
            padding-left: 0 !important;
            margin-left: 0 !important;
        }

        .widget-title {
            padding-left: 0 !important;
            margin-left: 0 !important;
            &::before,
            &::after {
                display: none !important;
                content: none !important;
            }
        }
        
        ul {
            list-style: none;
            padding-left: 0 !important;
        }
        
        li {
            padding-left: 0 !important;
            margin-left: 0 !important;
            &::before,
            &::after,
            &::marker {
                display: none !important;
                content: none !important;
            }

            a {
                color: white !important;
                text-decoration: none;

                &::after {
                    content: '\f061';
                    font-family: 'Font Awesome 5 Free';
                    font-weight: 900;
                    margin-left: 0px;
                    transition: all 0.3s ease;
                    font-size: .7rem;
                    opacity: 0;
                }

                &:hover {
                    &::after {
                        opacity: 1;
                        margin-left: 15px;
                    }
                }
            }
        }
    }
    .footer-social {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        h2 {
            font-size: 2rem;
            font-weight: bold;
            color: white !important;
        }

        ul {
            list-style: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 2em;

            li a {
                border: 1px solid white;
                padding: 1em;
                width: 60px;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: all 0.3s ease;
                text-decoration: none;

                i {
                    font-size: 1.25rem;
                    color: white;
                }

                &:hover {
                    background-color: white;
                    i {
                        color: #dc090e;
                    }
                }
            }

            
                
        }
        
    }
}


@media screen and (min-width: 768px) {
    #colophon {
        .footer-widget-area {
            padding-right: 1em;

        }
    }
}
#footer-copyright {
    background-color: #000;
    color: white;
    padding-top: 1em;
    padding-bottom: 1em;

    p {
        font-size: .8rem;
        margin: 0;
    }
}
#floating-whatsapp {
    position: fixed;
    bottom: 2em;
    right: 2em;
   
    a {
        background-color: #37dc09;
        color: white;
        padding: 1em;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 2rem;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease;
        opacity: 0;
        animation: fadeIn .8s ease-in forwards;

        &:hover {
            background-color: #229900;
        }
    }

}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*
* WooCommerce
*/
.star-rating {
    color: grey;
}

.star-rating span::before {
    color: #dc090e;
}

/**
* WooCommerce
*
*/
.site-content>.col-full>.woocommerce>.woocommerce-message:first-child, .site-content>.col-full>.woocommerce>.woocommerce-info:first-child, .site-content>.col-full>.woocommerce>.woocommerce-error:first-child {
    margin-top: 0;
}
@media (min-width: 768px) {
    .storefront-breadcrumb {
        margin-bottom: 0;
    }
}
#secondary a {
    text-decoration: none;
}

/**
* Archive
*
*/
.news-item {
    background-color: #f5f5f5;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    height: calc(100% - 2em);

    .post-image {
        width: 100%;
        height: 200px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .post-content {
        padding: 1em;
        flex: 1;
    }
    h3 {
        font-size: 1.25rem;
        line-height: 1.1;
        font-weight: bold;
        color: #dc090e;
    }
}
/**
* Single
*
*/
body.single-post {
    h1.entry-title {
        font-size: 2.5rem;
        line-height: 1.1;
    }
    h3 {
        margin: 2em 0 1em;
    }
}