/*
Theme Name: kyara
Theme URI: 
Author: Ennismore
Author URI: https://ennismore.com
Description: kyara theme
Requires at least: 6.7
Tested up to: 6.7
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
Text Domain: kyara
Tags: 
*/

/**
 * hand drawn button
 */
.hand-drawn-button {
    position: relative;
    cursor: pointer;
    
    svg {
        position: absolute;
        z-index: -1;
        top: -16px;
        left: -10px;
    }
}

.wp-block-buttons {
    .hand-drawn-button svg {
        left: -35px;
    }
}

/**
 * Header
 */
#header {
    @media screen and (min-width: 1024px){
        .hand-drawn-button {
        
            svg {
                width: 150px;
                position: absolute;
                top: -28px;
                left: -14px;
            }
        }
    }

    @media screen and (min-width: 480px) and (max-width: 1024px){
        .hand-drawn-button {
            svg {
                width: 150px;
                position: absolute;
                top: -25px;
                left: -35px;
            }
        }

        .wp-block-site-logo img {
            height: 46px !important;
            width: auto !important;
        }

        #top-nav {
            padding-top: 40px !important;
            padding-right: 40px !important;
            padding-bottom: 40px !important;
            padding-left: 0 !important;

            nav {
                margin-top: 40px;
            }
        }
    }

    @media screen and (max-width: 480px){
        background-size: 95% !important;
        padding-top: 40px !important;
    
        .wp-block-site-logo img {
            height: 30px !important;
            width: auto !important;
        }

        .hand-drawn-button {
            svg {
                width: 145px;
                position: absolute;
                top: -28px;
                left: -12px;
            }
        }
    
        #top-nav {
            padding: 16px !important;
    
            nav ul{
                justify-content: space-between !important;
                gap: 18px !important;
            }
        }
    }
}


/**
 * Brand Intro
 */
#brand-intro {
    @media screen and (max-width: 1024px){
        
    }

    @media screen and (min-width: 480px) and (max-width: 768px){
        padding: 80px 40px !important;

        h2 {
            font-size: 28px !important;
        }

        p {
            font-size: 18px !important;
        }

        .content-col {
            gap: 9px !important;
            justify-content: end;
        }

        .brand-text {
            max-width: 377px;
        }
    }

    @media screen and (max-width: 480px){
        padding: 56px 16px !important;

        h2 {
            font-size: 28px !important;
        }

        p {
            font-size: 18px !important;
        }

        .content-col {
            gap: 9px !important;
            justify-content: end;
        }

        .brand-text {
            max-width: 288px;
        }
    }
}

/**
 * Info Section
 */
#info-section {
    @media screen and (max-width: 1024px){
        
    }

    @media screen and (min-width: 375px) and (max-width: 768px){
        
    }

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

    }
}

/**
 * Menu Section
 */
#menu {
    @media screen and (min-width: 480px) and (max-width: 768px) {
        flex-wrap: nowrap !important;
    }

    @media screen and (min-width: 480px) and (max-width: 768px){
        padding: 80px 40px !important;

        h2 {
            font-size: 28px !important;
        }

        p {
            font-size: 18px !important;
        }

        .content-col {
            gap: 9px !important;
            justify-content: end;
        }

        .brand-text {
            max-width: 377px;
        }
    }

    @media screen and (max-width: 480px){
        padding: 56px 16px !important;

        h2 {
            font-size: 28px !important;
        }

        p {
            font-size: 18px !important;
        }

        .content-col {
            gap: 9px !important;
            justify-content: end;
        }

        .menu-text {
            max-width: 288px;
        }
    }
}

/**
 * Gallery Section
 */
#gallery {

    .wp-block-image img {
        aspect-ratio: 1 !important;
    }

    @media screen and (max-width: 1024px){
        
    }

    @media screen and (min-width: 375px) and (max-width: 768px){
        
    }

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

    }
}

/**
 * Book Table Section
 */
#book-now {
    @media screen and (min-width: 480px) and (max-width: 768px) {
        .book-wrapper {
            flex-wrap: nowrap !important;
        }
    }

    @media screen and (min-width: 480px) and (max-width: 768px){
        padding: 80px 40px !important;

        h2 {
            font-size: 28px !important;
        }

        p {
            font-size: 18px !important;
        }

        .content-col {
            gap: 9px !important;
            justify-content: end;
        }

        .brand-text {
            max-width: 377px;
        }
    }

    @media screen and (max-width: 480px){
        padding: 56px 16px !important;

        .book-wrapper {
            flex-direction: column-reverse !important;
        }

        h2 {
            font-size: 28px !important;
        }

        p {
            font-size: 18px !important;
        }

        .content-col {
            gap: 9px !important;
            justify-content: end;
        }

        .menu-text {
            max-width: 288px;
        }
    }
}

/**
 * Footer
 */
#contact {
    .wp-block-navigation .wp-block-navigation__submenu-icon svg {
        margin-top: -.075em !important;
    }

    @media screen and (max-width: 1024px) {
        .copyright-text {
            display: none;
        }

        .brand-logos img {
            height: auto !important;
            width: auto !important;
        }

        .footer-nav {
            ul {
                font-size: 14px !important;
                justify-content: left;
                padding-left: 30px;
                gap: 12px;
            }
        }
    }

    @media screen and (min-width: 480px) and (max-width: 768px){
        .contact-wrapper {
            flex-wrap: nowrap !important;
        }
    }

    @media screen and (max-width: 480px){
        .bottom-bleed img {
            width: auto !important;
            height: 75px !important;
        }

        .contact-wrapper {
            padding: 48px 16px !important;
        }

        .timings p {
            font-size: 20px !important;
        }

        .contact-content p {
            font-size: 18px !important;
        }

        .footer-nav ul {
            display: flex;
            flex-direction: column;
            align-content: flex-start;
            text-align: left;
            align-items: self-start;
        }

        .footer-nav li a {
            font-size: 14px !important;
        }

        .footer-bottom {
            padding: 16px !important;
        }
    }
}
/*
 * Button animation
*/
.hand-drawn-button svg {
    fill: none;

    path {
        stroke: transparent;
    }
}

.hand-drawn-button.hover path,
.hand-drawn-button:hover path {
    stroke: black;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation-name: acfb-hh-dash;
    animation-duration: 10s;
}
.hand-drawn-button.hover path:nth-of-type(2), 
.hand-drawn-button:hover path:nth-of-type(2) {
    animation-delay: 2s;
}

@keyframes acfb-hh-dash {
    0% {
        stroke-dashoffset: 1500;
    }

    15% {
        stroke-dashoffset: 0;
    }

    85% {
        opacity: 1;
    }

    90% {
        stroke-dashoffset: 0;
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 1500;
        opacity: 1;
    }
}