/*
    Theme Name: Podstore Theme
    Author: Magnus
    Version: 1.0.0
*/

:root {
    --ps-color-white1: #e1e2d2;
    --ps-color-white2: #d9d5b9;
    --ps-color-darkpurple1: #323a66;
    --ps-color-darkpurple2: #262235;
    --ps-color-darkpurple3: #231c29;
    --ps-color-darkpurple4: #131018;
    --ps-color-blue: #0176a2;
    --ps-color-green: #7c8f2a;
    --ps-color-yellow: #fab92a;
    --ps-color-red1: #cd3d38;
    --ps-color-red2: #b02037;

    --ps-text-color: var(--ps-color-white1);
    --ps-link-color: var(--ps-color-white2);
    --ps-link-color-hover: var(--ps-color-yellow);
    --ps-button-color: var(--ps-color-darkpurple1);
    --ps-bg-color: var(--ps-color-darkpurple3);

    --ps-border-main: 1px solid var(--ps-color-darkpurple1);
    --ps-header-height: 64px;
    --ps-max-page-width-desktop: 1200px;

    --ps-hamburger-width: 20px;
    --ps-hamburger-bar: 2px;
    --ps-hamburger-gap: 5px;
    --ps-hamburger-height: calc(var(--ps-hamburger-bar) * 3 + var(--ps-hamburger-gap) * 2);
    --ps-hamburger-margin: 22px;
    --ps-hamburger-color: var(--ps-color-white1);
    --ps-hamburger-timing: .4s cubic-bezier(0.23, 1, 0.320, 1);
}
*, *::before, *::after {
    box-sizing: border-box;
    font-family: "Geist", sans-serif;
    font-size: 16px;
}
a {
    color: var(--ps-link-color);
    text-decoration: none;
    font-weight: 700;
    &:hover {
        color: var(--ps-link-color-hover);
    }
}
body {
    background-color: var(--ps-bg-color);
    background-image: url(assets/img/bg-tile-30.png);
    background-repeat: repeat;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--ps-text-color);
    overflow-x: hidden;

    div#page {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        

        .wrapper {
            width: 100%;
            max-width: var(--ps-max-page-width-desktop);
            margin: 0 auto;
        }

        header {
            width: 100%;
            height: var(--ps-header-height);
            position: relative;
            background-color: var(--ps-color-darkpurple3);

            section.header-wrapper {
                display: flex;
                justify-content: space-between;
                height: 100%;
                

                div.logo-container {
                    padding: .5rem 0;
                    
                    > a {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        height: 100%;
                        .logo-static {
                            height: 40px;
                        }
                        .logo-animated {
                            display: none;
                            height: 40px;
                            width: 250px;
                        }
                    }
                    &:hover {
                       > a {
                            .logo-static {
                                display: none;
                            }
                            .logo-animated {
                                display: block;
                            }
                        }
                    }
                }
                div.menu-container {
                    position: relative;
    
                    label.hamburger-menu {
                        --x-width: calc(var(--ps-hamburger-height) * 1.41421356237);
    
                        display: flex;
                        flex-direction: column;
                        gap: var(--ps-hamburger-gap);
                        width: max-content;
                        position: absolute;
                        top: var(--ps-hamburger-margin);
                        right: var(--ps-hamburger-margin);
                        z-index: 10;
                        cursor: pointer;
    
                        &::after, &::before, input {
                            content: "";
                            width: var(--ps-hamburger-width);
                            height: var(--ps-hamburger-bar);
                            background-color: var(--ps-hamburger-color);
                            border-radius: 50px;
                            transform-origin: right center;
                            transition: opacity var(--ps-hamburger-timing), width var(--ps-hamburger-timing), rotate var(--ps-hamburger-timing);
                        }
                        input {
                            appearance: none;
                            padding: 0;
                            margin: 0;
                            outline: none;
                            pointer-events: none;
    
                            &:checked {
                                opacity: 0;
                                width: 0;
                            }
                        }
    
                        &:has(input:checked)::before {
                            rotate: -45deg;
                            width: var(--x-width);
                            translate: 0 calc(var(--ps-hamburger-bar) / -2);
                            background-color: var(--ps-color-red1);
                        }
                        &:has(input:checked)::after {
                            rotate: 45deg;
                            width: var(--x-width);
                            translate: 0 calc(var(--ps-hamburger-bar) / 2);
                            background-color: var(--ps-color-red1);
                        }
                        &:has(input:checked) + nav.main-nav {
                            display: flex;
                        }
                        &:hover {
                            &::after, &::before, input {background-color: var(--ps-color-yellow);}
                        }
                    }
                    
                    nav.main-nav {
                        display: none;
                        height: auto;
                        position: absolute;
                        top: var(--ps-header-height);
                        right: 0;
                        z-index: 10;
    
                        div.menu-top-menu-container {
                            background-color: var(--ps-color-darkpurple1);
                            padding: 1rem 2rem;
    
                            ul#menu-top-menu {
                                height: 100%;
                                list-style: none;
                                padding: 0;
                                margin: 0;
                                display: flex;
                                flex-direction: column;
                                gap: 1rem;
    
                                li.menu-item {
                                    display: flex;
                                    align-items: center;
                                    
                                    a {
                                        display: flex;
                                        align-items: center;
                                        height: 100%;
                                        color: var(--ps-text-color);
                                        font-weight: 300;
    
                                        &:hover {
                                            color: var(--ps-link-color-hover);
                                            svg.menu-icon {
                                                .svg-fill {
                                                    fill: var(--ps-color-yellow);
                                                }
                                            }
                                        }
                                        svg.menu-icon {
                                            width: 20px;
                                            height: 20px;
                                            align-self: center;
                                        }
                                        span.cart-count {
                                            align-self: flex-start;
                                            line-height: 2rem;
                                            font-weight: 300;
                                            font-size: .75rem;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            div.stripes {
                position: absolute;
                top: var(--ps-header-height);
                width: 100%;
                height: 2rem;
                overflow: hidden;
                z-index: 1;
                
            }
            

        }
        main {
            flex: 1;
            section.hero-wrapper {
                width: 100%;
                margin-bottom: 5rem;
    
                div.hero-container {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
    
                    div.hero-textbox {
                        display: flex;
                        flex-direction: column;
                        background-color: hsl(from var(--ps-color-darkpurple1) h s l / 0.3);
                        padding: min(2rem, 5%) min(3rem, 8%);
                        border-radius: 2rem;
                        border: var(--ps-border-main);
                        opacity: 0;
                        transform: translateY(20%);
    
                        h1 {
                            font-size: clamp(1.5rem, 6vw, 2.5rem);
                            font-weight: 700;
                            margin: 0;
                        }
                        p {
                            font-size: 1.2rem;
                            font-weight: 300;
                            color: var(--ps-color-yellow);
                            span {
                                font-size: 1.25rem;
                                font-weight: 600;
                            }
                        }
                        div.cta-container {
                            @media screen and (max-width: 500px) {
                                flex-direction: column;
                            }
                            display: flex;
                            gap: 0.5rem;
                            margin-top: 1rem;
    
                            a.cta-button {
                                align-self: flex-start;
                                padding: 1rem 2rem;
                                border-radius: 3rem;
                                background-color: var(--ps-color-darkpurple1);
                                position: relative;
                                transition: padding 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    
                                &::after {
                                        content: "\2192";
                                        position: absolute;
                                        
                                        z-index: 1;
                                        opacity: 0;
                                        transform: translateX(-1rem);
                                        transition: opacity 0.6s ease, transform 0.2s ease-in;
    
                                    }
                                
        
                                &:hover {
                                    background-color: var(--ps-color-blue);
                                    color: var(--ps-color-white2);
                                    padding-right: 3rem;
                                    &::after {
                                        opacity: 1;
                                        transform: translateX(1rem);
                                    }
                                }
                                &.cta-main {
                                    background-color: var(--ps-color-red1);
                                    &:hover {
                                        background-color: var(--ps-color-red2);
                                        color: var(--ps-color-white2);
                                    }
                                }
                            }
                        }
                    }
    
                    img.hero-image {
                        opacity: 0;
                        scale: .5;
                        width: 90vw;
                        border-radius: 2rem;
                    }
                }
            }
            section.brand-carousel-wrapper {
                /* width: 100%; */
                overflow: clip;
                opacity: 0;
                transition: opacity 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    
                &.reveal {
                    opacity: 1;
                }
    
                div.brand-carousel {
                    display: flex;
                    padding: 3rem 0;
                    padding-left: 4rem;
                    gap: 4rem;
                    width: max-content;
                    animation: brand-carousel-animation 30s linear infinite;
    
                    &:hover {
                        animation-play-state: paused;
                    }
    
                    div.brand-item {
                        width: auto;
                        /* flex-shrink: 0; */
    
                        img {
                            height: clamp(1.5rem, 2vw, 2.5rem);
                        }
                    }
                }
                
            }
            
            section.product-grid-wrapper {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
                margin-top: 3rem;
                padding: min(2rem, 5%) min(3rem, 8%);
                background-color: hsl(from var(--ps-color-darkpurple1) h s l / 0.3);
                border: var(--ps-border-main);
                border-radius: 2rem;
                opacity: 0;
                transform: translateY(150px);
                transition: transform .6s ease, opacity 1s ease;
    
                &.reveal {
                    opacity: 1;
                    transform: translateY(0);
                }
    
                h2 {
                    font-size: clamp(1rem, 4vw, 1.8rem);
                    margin-top: 0;
                    
                }
    
                div.product-grid {
                    display: grid;
                    gap: 1rem;
                    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    
                    article.product-card {
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        opacity: 0;
                        transform: translateY(100px) scale(.7);
                        transition: transform .6s ease, opacity 1s ease;
    
                        &.reveal {
                            opacity: 1;
                            transform: translateY(0) scale(1);
                        }
                        a.product-link {
                            border-radius: 2rem;
                            padding: 1rem;
                            background-color: var(--ps-color-darkpurple1);
                            color: var(--ps-text-color);
                            
                            /* background-color: hsl(from var(--ps-color-darkpurple1) h s calc(l + 10)); */
    
                            img.wp-post-image {
                                width: 100%;
                                height: auto;
                                aspect-ratio: 4 / 3;
                                border-radius: 1rem 1rem 0 0;
                                mix-blend-mode: normal;
                                
                            }
                            h3 {
    
                            }
                            &:hover {
                                background-color: hsl(from var(--ps-color-darkpurple1) h s calc(l + 20));
                                img.wp-post-image {
                                    mix-blend-mode: normal;
                                }
                            }
                        }
                    }
                }
            }
            section.products-wrapper {
                h1 {
                    margin-top: 2rem;
                    font-size: clamp(1.5rem, 6vw, 2.5rem);
                }
                ul.products {
                    li {
                        a.woocommerce-loop-product__link {
                            width: 100%;
                            background-color: #fff;
                            padding: 0.5rem;
                            border-radius: .625rem;
                            border: var(--ps-border-main);
                            border-width: .25rem;
                            img {
                                width: 100%;
                                object-fit: cover;
                                aspect-ratio: 1 / 1;
                            }
                            h2 {
                                color: var(--ps-color-darkpurple3);
                            }
                            &:hover {
                                border-color: var(--ps-color-yellow);
                                h2 {
                                    color: var(--ps-color-yellow);
                                }
                            }
                            span {
                                color: var(--ps-color-red1);
                            }
                        }
                    }
                }
            }
            section.collections-wrapper {
                h1 {
                    margin-top: 2rem;
                    font-size: clamp(1.5rem, 6vw, 2.5rem);
                }
                div.collections-grid {
                    display: grid;
                    gap: 1rem;
                    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

                    div.collection-card {
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        a {
                            width: 100%;
                            background-color: #fff;
                            padding: 0.5rem;
                            border-radius: .625rem;
                            border: var(--ps-border-main);
                            border-width: .25rem;
                            img {
                                width: 100%;
                                object-fit: cover;
                                aspect-ratio: 3 / 4;
                            }
                            h2 {
                                color: var(--ps-color-darkpurple3);
                            }
                            &:hover {
                                border-color: var(--ps-color-yellow);
                                h2 {
                                    color: var(--ps-color-yellow);
                                }
                            }
                        }
                    }
                }
            }
        }
        footer {
            margin-top: 4rem;
            width: 100%;
            background-color: var(--ps-color-darkpurple2);
            
            section.footer-wrapper {
                min-height: 400px;

                div.logo-container {
                    margin-top: 4rem;
                    img.footer-logo {
                        height: 64px;
                    }
                }
                div.footer-grid-container {
                    margin-top: 2rem;
                    display: grid;
                    gap: 1rem;
                    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

                    div.footer-grid-item {

                        ul {
                            padding: 0;
                            margin: 0;
                            list-style: none;
                            li {
                                h5 {
                                    text-transform: uppercase;
                                    color:hsl(from var(--ps-color-darkpurple1) h s calc(l + 25));
                                    font-size: 0.825rem;
                                    letter-spacing: 0.15rem;
                                    
                                }
                                
                                a, p {
                                    color:hsl(from var(--ps-color-darkpurple1) h s calc(l + 20));
                                    font-size: 0.825rem;
                                    font-weight: 300;
                                }
                                a:hover {
                                    color:hsl(from var(--ps-color-darkpurple1) h s calc(l + 40));
                                }

                            }
                        }
                        &:last-child {
                            ul {
                                li {
                                    text-align: left;

                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.gradient-mask {
    mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);
}

/* Overrides WooCommerce styling */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--ps-button-color);
    color: var(--ps-text-color);
    border-radius: 999px;
    padding: 0.6em 1.2em;
    font-weight: 300;
    font-size: .825rem;
    transition: background 0.3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    color: var(--ps-text-color);
    background-color: var(--ps-color-blue);
}

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select {
  border: var(--ps-border-main);
  padding: 0.6em;
  border-radius: 6px;
  width: 100%;
}


@keyframes brand-carousel-animation {
    to {
        transform: translateX(-50%);
    }
}

@media (min-width: 768px) {

    body {
        div#page {
            header {
                margin-bottom: 2rem !important;
                div.menu-container {
                    
                    label.hamburger-menu {
                        display: none !important;
                    }
                    nav.main-nav {
                        display: flex !important;
                        margin-top: 0 !important;
                        position: static !important;
                        height: 100% !important;
                        
                        div.menu-top-menu-container {
                            background-color: transparent !important;
                            padding: 0 !important;

                            ul.menu {
                                flex-direction: row !important;
                            }
                            
                        }
                    }
                }
            }
            section.hero-wrapper {
                div.hero-container {
                    flex-direction: row !important;

                    div.hero-textbox {
                        align-self: center;
                    }
                    img.hero-image {
                        width: 50% !important;
                    }
                }
            }
        }
    }
}