/*
 Theme Name:   Balma Child
 Description:  Balma Child Theme
 Author:       Balma
 #Author URI:   https://bootscore.me
 Template:     balma
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/


:root {
    --color-white: #FAF9F6;
    --color-black: #1A1A1A;
    --color-grey-dark: #6B6B6B;
    --color-grey-light: #AEAEAE;
    --color-arena: #E8DDD3;
    --color-cobre: #D4A59A;
    --color-dorado: #E8D5B7;
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'DM Sans', sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;
    --text-6xl: 4rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --border-radius: 0px;
    --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05);
    --shadow-md: 0 4px 6px rgba(26, 26, 26, 0.07);
    --shadow-lg: 0 10px 15px rgba(26, 26, 26, 0.1);
    --z-header: 1000;
    --z-overlay: 900;
    --z-dropdown: 800;
}


body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-black);
    line-height: 1.6;
}

body p{
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--color-grey-dark);
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
}

a{
    text-decoration: none
}


.top-button{
    background-color: var(--color-dorado);
    border-color: var(--color-dorado);
}

/* ===== TEXT COLORS ===== */
.color-white {
    color: var(--color-white);
}

.color-black {
    color: var(--color-black);
}

.color-grey-dark {
    color: var(--color-grey-dark);
}

.color-grey-light {
    color: var(--color-grey-light);
}

.color-arena {
    color: var(--color-arena);
}

.color-cobre {
    color: var(--color-cobre);
}

.color-dorado {
    color: var(--color-dorado);
}

/* ===== BACKGROUND COLORS ===== */
.bg-white {
    background-color: var(--color-white);
}

.bg-black {
    background-color: var(--color-black);
}

.bg-grey-dark {
    background-color: var(--color-grey-dark);
}

.bg-grey-light {
    background-color: var(--color-grey-light);
}

.bg-arena {
    background-color: var(--color-arena);
}

.bg-cobre {
    background-color: var(--color-cobre);
}

.bg-dorado {
    background-color: var(--color-dorado);
}




.nav-link {
    --bs-navbar-nav-link-padding-x: 1.25rem;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 400;
    color: var(--color-black);
    position: relative;
    transition: color var(--transition-base);
}

.nav-link span::after {
    content: '';
    position: absolute;
    bottom: calc(var(--space-xs) * (-1));
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-black);
    transition: width var(--transition-base);
}

.nav-link:hover span::after {
    width: 100%;
}

.top-bar{
    width: 100%;
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--text-xs);
    padding: calc(var(--space-xs) + 5px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: calc(var(--z-header) + 1);
}


.top-bar p,
.top-bar a{
    font-size: var(--text-xs);
}

.top-bar .wp-social-link-instagram a{
    font-size: var(--text-lg)
}

.wp-block-social-links{
    margin-bottom: 0
}

.top-bar a {
    color: var(--color-grey-light);
    transition: color var(--transition-base);
}

.top-bar a:hover {
    color: var(--color-white);
    opacity: 1;
}

.top-bar .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor{
    color: var(--color-grey-light)
}



#bootscore-navbar li a.active{
    color: var(--color-cobre)
}


#bootscore-navbar > li:last-child a{
    padding-right: 0
}

.icon::before{

    --_fa-family: var(--fa-family,var(--fa-style-family,"Font Awesome 7 Free"));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: var(--fa-display,inline-block);
    font-family: var(--_fa-family);
    font-feature-settings: normal;
    font-style: normal;
    font-synthesis: none;
    font-variant: normal;
    font-weight: var(--fa-style,900);
    line-height: 1;
    text-align: center;
    text-rendering: auto;
    width: var(--fa-width,1.25em);
    content: var(--fa)/"";
    margin-right: 0.5rem
}



.icon-phone::before{

    --fa: "\f095";
}
.icon-mail::before{

    --fa: "\f0e0";
}
.icon-map::before{

    --fa: "\f3c5";
}

.top-bar .icon::before {
    color: var(--color-grey-light);
    font-size: var(--text-sm)
}


footer {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: var(--space-3xl) 0 var(--space-xl);
}


.footer-bottom {
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(174, 174, 174, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#footer-menu a {
    font-size: var(--text-xs);
    color: var(--color-grey-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#footer-menu a:hover {
    opacity: 0.7;
}

.bootscore-copyright {
    font-size: var(--text-xs);
    color: var(--color-grey-light);
}

.footer-column h4 {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    color: var(--color-white);
    border-bottom: 1px solid rgba(174, 174, 174, 0.3);
}

.footer-column p, .footer-column a {
    font-size: var(--text-sm);
    color: var(--color-grey-light);
    line-height: 1.8;
    display: block;
}

.footer-column .wp-social-link a{
    font-size: var(--text-lg)
}

.footer-column a:hover {
    color: var(--color-cobre);
    opacity: 1;
}


.bootscore-footer-columns{
    margin-bottom: var(--space-3xl);
}

.footer-column .wp-social-link-google.icon-map::before{
    font-size: var(--text-lg)
}

.footer-column .wp-social-link-google a svg{
    display: none;
}

.footer-hours p {
    margin-bottom: var(--space-xs);
}

:where(.editor-styles-wrapper) .width-100 {
    left: 0!important;
}


header.to-fixed{
    background-color: rgba(250, 249, 246, 0.95);

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


.hero {
    position: relative;
    height: calc(100vh - 125px - var(--wp-admin--admin-bar--height, 0));
    display: flex;
    min-height: 600px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--color-black);
}

.hero-carousel {
    position: absolute!important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 0
}

.full-slider div{
    height: 100%;
}

.full-slider .swiper img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: brightness(0.7)
}

.hero-small {
    height: 350px;
    min-height: auto
}



.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--color-white);
    max-width: 900px;
    padding: 0 var(--space-lg);
}

.hero-title {
    font-size: 4.75rem;
    font-weight: 500;
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
    animation: fadeInUp 1s ease;
}

.hero .title{
    animation: fadeInUp 1s ease;
}

.hero-subtitle {
    font-size: var(--text-xl);
    color: var(--color-arena);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    animation: fadeInUp 1s ease 0.2s backwards;
}

.hero-subtitle.color-grey-dark{
    color: var(--color-grey-dark)
}

.btn{
    border-radius: 0
}

.hero-btn {
    display: inline-block;
    padding: var(--space-sm) var(--space-xl);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background-color: transparent;
    transition: all var(--transition-base);

}

.hero .hero-btn{
    animation: fadeInUp 1s ease 0.4s backwards;
}

.collections-hero-overlay {
    position: absolute!important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #EBDED3;
    opacity: 0.85;
    z-index: 1;
}





figure.hero-carousel img{
    width: 100%;
    height: 100%!important;
    object-fit: cover
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section{
    padding: var(--space-3xl) 0
}

.small-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.title {
    font-size: 3.25rem;
    margin-bottom: var(--space-lg);
    color: var(--color-black);
}

.sub-title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
    color: var(--color-black);
}

.box-item{
    overflow: hidden;
    height: 100%
}

.box-overlay {
    position: absolute!important;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-xl);
    background: linear-gradient(to top, rgba(26, 26, 26, 0.9), transparent);

}

.box-overlay .title {
    color: var(--color-white)
}

.box-item figure{
    height: 100%;
    margin-bottom: 0
}

.box-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow), filter var(--transition-slow);
    filter: sepia(30%) saturate(50%) brightness(1.1);
}

.box-item:hover img {
    transform: scale(1.05);
    filter: sepia(0%) saturate(100%) brightness(1);
}

.mb-lg{
    margin-bottom: var(--space-2xl);
}

.fade-in:not(.wp-block) {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}



.wp-block-gallery figure{
    overflow: hidden
}

.wp-block-gallery figure:hover img{
    transform: scale(1.1)
}

.wp-block-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}



.inspirat-card-content {
    padding: 0 var(--space-md) var(--space-lg);
}

.mb-2r{
    margin-bottom: var(--space-lg)
}


.masonry-grid {
    display: grid!important;
    grid-template-columns: repeat(auto-fill, 320px);
    grid-auto-rows: 20px;
    gap: var(--space-md)!important;
    max-width: 1600px;
    margin: 0 auto;
    justify-content: center;
}


.masonry-grid figure {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform var(--transition-base);
}

.masonry-grid figure {
    width: 100%!important;
    grid-row: span 22;
    margin: 0!important
}


.masonry-grid figure.tall {
    grid-row: span 26;
}

.masonry-grid img {
    width: 100%!important;
    height: 100%!important;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}




.masonry-grid figcaption {
    top: 0;
    bottom: auto!important;
    font-size: var(--text-sm);
    color: var(--color-arena);
    margin-bottom: 0;
    text-align: left!important;
    opacity: 0;
    transition: opacity var(--transition-base);
    padding: var(--space-lg)!important;
    background: linear-gradient(to bottom, rgba(26, 26, 26, 0.9), transparent)!important;
}


.masonry-grid figcaption strong {
    display: block;
    font-size: var(--text-2xl);
    margin-bottom: var(--space-xs);
    font-family: var(--font-heading);
    color: var(--color-white);
    line-height: 1
}

.masonry-grid figure:hover figcaption{
    opacity: 1
}

.about-text {
    max-width: 900px;
    margin: 0 auto
}

.about-text p {
    font-size: var(--text-lg);
    line-height: 1.9;
    color: var(--color-grey-dark);
    margin-bottom: var(--space-lg);
}


.contact-card {
    background-color: var(--color-white);
    padding: var(--space-2xl);
    text-align: center;
}

.contact-card h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-md);
    color: var(--color-black);
}


.contact-card h4 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-black);
}

.card-hours {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-arena);
}





.contact-form {
    max-width: 700px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: var(--space-lg);
}

.contact-form label {
    display: block;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    color: var(--color-black);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    border: 1px solid var(--color-grey-light);
    background-color: var(--color-white);
    color: var(--color-black);
    transition: border-color var(--transition-base);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-black);
}

.form-textarea {
    resize: vertical;
    height: 150px;
}

.form-submit {
    width: 100%;
    padding: var(--space-md) var(--space-xl);
    margin-top: var(--space-md);
    text-transform: uppercase
}

.form-group p br{
    display: none
}

.inspirat-card-content p {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-grey-dark);
}

.page-id-27 .bootscore-footer-top{
    display: none
}

.wpcf7-list-item{
    margin: 0
}

.contact-form .wpcf7-list-item label{
    margin-bottom: 0
}


.top-bar .wpml-ls-legacy-list-horizontal a,
.top-bar .wpml-ls-legacy-list-horizontal{
    padding-right: 0;
    padding-left: 0;
    padding: 0
}


.btn-col:not(.wp-block){
    display: none
}


@media (min-width: 1400px){
    .gx-6{
        --bs-gutter-x: 6rem;
    }
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 1400px;
    }
}


@media (max-width: 1199px){

    .row-xl > div{
        flex: 0 0 auto;
        width: 100%;
    }

}

@media (max-width: 991px){
    .wp-block-gallery.grid-looks figure {
        width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)*.8)!important;
    }

    .title {
        font-size: var(--text-3xl)
    }

    .sub-title {
        font-size: var(--text-2xl);
    }

    .masonry-grid figure.tall {
        grid-row: span 24;
    }

    .masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 12px;
        gap: var(--space-sm)!important;
    }

    .offcanvas-header{
        background-color: var(--color-arena)
    }

}


@media (max-width: 767px){
    


    .row-md > div{
        flex: 0 0 auto;
        width: 100%;
    }

    .order-md{
        order: -1
    }

    .hero-title {
        font-size: var(--text-4xl);
    }
    .hero-subtitle {
        font-size: var(--text-base);
        margin-bottom: var(--space-sm)
    }




}

@media (max-width: 575px){
    
        .footer-column{
        text-align: center
    }
    
    .footer-column h4{
        padding-bottom: var(--space-xs)
    }
    
    .bootscore-copyright{
        text-align: center
    }
    
    #footer-menu{
        justify-content: center
    }
    
    .footer-column .wp-block-social-links{
        justify-content: center
    }

    .row-sm > div{
        flex: 0 0 auto;
        width: 100%;
    }

    .order-sm{
        order: -1
    }

    .footer-bottom{
        display: block
    }

    .bootscore-copyright{
        margin-bottom: 1.5rem
    }

}

@media (max-width: 414px){
    .top-bar{
        display: none
    }
}