/*
Theme Name: Kamusa
Author: Francisco Vera
Version: 1.0
Description: Kamusa website
Text Domain: kamusa
Requires at least: 6.0
Tested up to: 6.4.3
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: full-site-editing, 
*/

.overlay {
    background:transparent; 
    position:relative; 
    width:100%;
    height:550px; /* your iframe height */
    top:550px;  /* your iframe height */
    margin-top:-550px;  /* your iframe height */
 }

.hero-section {
    align-items: flex-end !important;    
}

.zebra-pattern {
    width: 100%;
    height: 140px;
    background-image: url('https://kamusa.studio/wp-content/uploads/2024/05/patron-cebra-limpio.svg');
}

.flex {
    display: flex;
}

.red { background-color: #FB452F; }
.pink { background-color: #F3A4B8; }
.black { background-color: #000; }
.white { background-color: #fff; }

.box {
    flex-grow: 1 !important;
    aspect-ratio: 1 !important;
}

.kamusa-visual {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    
    .image-1 { background-image: url('https://kamusa.studio/wp-content/uploads/2024/04/Cuadrado-jirafa.png'); background-size: cover; }
    .image-2 { background-image: url('https://kamusa.studio/wp-content/uploads/2024/04/Cuadrado-flor.png'); background-size: cover; }
    .image-3 { background-image: url('https://kamusa.studio/wp-content/uploads/2024/04/Cuadrado-jarra.png'); background-size: cover; }
    .image-4 { background-image: url('https://kamusa.studio/wp-content/uploads/2024/04/Cuadrado-ave.png'); background-size: cover; }
}

.list-content {
    flex-basis: content;
}

.areas-grid { /* Grid for Areas de colaboración */
    font-family: var(--wp--preset--font-family--poppins);
    font-size: var(--wp--preset--font-size--body-small);
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .box {
        display: flex;
        align-items: center;
        min-width: 25%;
        max-width: 25%;
        aspect-ratio: 1;
        p {
            padding: var(--wp--preset--spacing--s);
            margin: 0;
            font-weight: 700 !important;
        }
    }
    .black, .red {
        color: #fff;
    }
}

.donation-title {
    width: 50%;
}

.staff-visual { /* box grid where staff profile images are */
    display: flex !important;
    flex-wrap: wrap !important;
    .box {
        flex-basis: 50%;
        max-width: 50%;
    }
}

.kat-small-1 { background-image: url('https://kamusa.studio/wp-content/uploads/2024/05/kat-small-1.png'); background-size: cover; }    
.kat-small-2 { background-image: url('https://kamusa.studio/wp-content/uploads/2024/05/kat-small-2.png'); background-size: cover; }
.ari-small-1 { background-image: url('https://kamusa.studio/wp-content/uploads/2024/05/ari-small-1.png'); background-size: cover; }    
.ari-small-2 { background-image: url('https://kamusa.studio/wp-content/uploads/2024/05/ari-small-2.png'); background-size: cover; }    

.wp-block-navigation__responsive-container.is-menu-open {
    background-color: #000 !important;
    color: #fff !important;
    padding: var(--wp--preset--spacing--m) !important;
    a {
        font-family: 'Poppins';
        font-weight: 700;
        font-size: 27px !important;
    }
}

.artists-table {
    table {
        table-layout: auto;
        width: auto !important;
        tbody td:nth-child(2) {
            color: rgba(0, 0, 0, .6);
        }
        td {
            padding: 0 var(--wp--preset--spacing--s) 0 0 !important;
            border: 0 !important;
        }
    }

}

.donation-info table {
    tbody td:nth-child(1) {
        font-size: 30px;
        font-weight: 700;
        line-height: 1.1;
    }
}

.logo-gallery .vp-portfolio__items-style-default {
    --vp-items-style-default--image-hover__transform: none;
    --vp-items-style-default--overlay__background: none;
}

.impact-gallery {
    figure {
        width: 45% !important;
    }
}

.check-list {
    li::marker {
        content: '✓   ';
    }
}

@media only screen and (max-width: 781px) {

    body {
        --wp--preset--spacing--xs: 5px;
        --wp--preset--spacing--s: 20px;
        --wp--preset--spacing--m: 30px;
        --wp--preset--spacing--l: 50px;
        --wp--preset--spacing--xl: 80px;
        --wp--preset--font-size--body-small: 14px;
        --wp--preset--font-size--body: 16px;
        --wp--preset--font-size--body-big: 20px;
        --wp--preset--font-size--big-paragraph: 27px;
        --wp--preset--font-size--h-2: 30px;
        --wp--preset--font-size--h-1: 39px
    }

    .main-header {
        min-height: 90px !important;
    }

    .kamusa-visual {
        .box {
            flex-basis: 33.33%;
            max-width: 33.33%;
        }
        .hide {
            display: none;
        }
    }

    .values-section {
        img {
            width: 70px !important;
        }
        .value-column {
            margin-bottom: 10px !important;
            .value-stack {
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                .texts {
                    gap: 10px !important;
                    width: fit-content;
                    margin-top: 13px !important;
                }
            }
        }
    }

    .project-item {
        margin-bottom: 20px !important;
    }

    .member {
        margin-bottom: 60px !important;
    }

    .project {
        margin-bottom: var(--wp--preset--spacing--m) !important;
    }

    .donation-title {
        width: 100%;
    }

    .projects-section {
        .project-column {
            margin-bottom: 40px !important;
        }
    }

    .site-footer {
        .logo-footer {
            padding: 20px 0;
            img {
                width: 130px !important;
            }
        }
        .image-area {
            padding: 30px;
        }
        .meta-info-footer {
            padding: 0 var(--wp--preset--spacing--m) var(--wp--preset--spacing--xl) !important;
            h4 {
                text-align: left;
            }
            .socials-row {
                justify-content: flex-start;
                margin: 0 !important;
            }
        }
        .staff {
            flex-direction: row;
            flex-wrap: nowrap;
            .individual {
                width: 100% !important;
            }
        }
    }

    .participa-heading {
        margin-bottom: 20px;
    }

    .impact-gallery {
        figure {
            width: 45% !important;
        }
        .item {
            gap: 20px;
        }
    }

    .areas-grid { /* Grid for Areas de colaboración */
        .box {
            flex-basis: 50%;
            min-width: 50%;
            aspect-ratio: 1.75 !important; 
        }
    }

}
    
@media only screen and (min-width: 782px) and (max-width: 1023px) {
    
    .full-column {
        flex-basis: 100% !important;
    }

    .hero-section, .hero-container {
        flex-wrap: wrap !important; 
    }
    
    .kamusa-visual .box {
        flex-basis: 25%;
        max-width: 25%;
    }

    .values-section {
        flex-wrap: wrap !important;
        gap: var(--wp--preset--spacing--m) 0 !important;
        .value-column {
            flex-basis: 50% !important;
            .spacing-right {
                padding-right: var(--wp--preset--spacing--m) !important;
            }
            .spacing-left {
                padding-left: var(--wp--preset--spacing--m) !important;
            }
        }
    }

    .projects-section {
        flex-wrap: wrap !important;
        gap: var(--wp--preset--spacing--m) 0 !important;
        .project-column {
            flex-basis: 50% !important;
            .spacing-right {
                padding-right: var(--wp--preset--spacing--m) !important;
            }
            .spacing-left {
                padding-left: var(--wp--preset--spacing--m) !important;
            }
        }
    }

    .padding-top {
        padding-top: 30px !important;
    }

    .full-width-list {
        width: 100% !important;
    }

    .impact-gallery {
        .item {
            flex-direction: column !important;
            align-items: flex-start;
        }
    }

}

@media only screen and (min-width: 1024px) {

    .hero-section {
        flex-wrap: nowrap !important;
    }

    .kamusa-visual {
        .box {
            flex-basis: 25%;
            max-width: 25%;
        }
        .hide {
            display: block;
        }
    }

}