/*
Theme Name: Patatino WP Theme
Theme URI:
Author: Ennismore
Author URI: https://ennismore.com
Description: wordpress theme for patatino
Requires at least: 6.6
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: patatino-wp-theme
Tags:
*/

/*
 * Global
 */
/* common */
:where(.wp-site-blocks) > * {
    margin-block-start: 0;
}

.wp-block-buttons {
    justify-content: center;
    max-width: fit-content;

    @media (max-width: 1024px) {
        .wp-block-button__link {
            font-size: 16px !important;
            line-height: 120%; /* 19.2px */
            letter-spacing: 1.92px;
        }
    }
}

/* Block Styles */
.is-style-notched-corners {
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    clip-path: polygon(0 0, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

    @media (max-width: 480px) {
        padding: 54px 24px !important;
        clip-path: polygon(0 0, 85% 0%, 100% 10%, 100% 100%, 15% 100%, 0% 90%);
    }
}

.is-style-scooped-corners {
    background-color: #ffffff;
    position: relative;
    mask: radial-gradient(40px at 50px 50px, transparent 98%, black) -50px -50px;
}

.wp-block-group:has(.is-style-scooped-corner) {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border: 2px solid red;
}

.is-style-stripes {
    background-image: repeating-linear-gradient(
        90deg,
        #83BAF8 0%,
        #83BAF8 12.5%,
        #DFE6F3 12.5%,
        #DFE6F3 25%
    );

    @media (min-width: 768px) {
        background-image: repeating-linear-gradient(
            90deg,
            #83BAF8 0%,
            #83BAF8 7.14%,
            #DFE6F3 7.14%,
            #DFE6F3 14.28%
        );
    }
}

/*
 * Typography
 */
.heading-text {
    @media (max-width: 1024px) {
        font-size: 56px !important;
        line-height: 110% !important;
        letter-spacing: -3.36px !important;
    }
}

.sub-heading-text {
    @media (max-width: 1024px) {
        font-size: 16px !important;
        line-height: 110% !important; /* 17.6px */
        letter-spacing: 2.4px !important;
    }
}

.body-text {
    @media (max-width: 1024px) {
        font-size: 18px !important;
        line-height: 140% !important; /* 25.2px */
        letter-spacing: 0.18px !important;
    }
}

/*
 * Header
 */
#header {
    transition: background-color 0.2s linear;

    &:not(.sticky) {
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        position: absolute;
    }

    &.sticky {
        width: 100%;
        position: fixed;
        background: #FDE9E6 !important;
        z-index: 100;

        .wp-block-site-logo {
            filter: invert(1);
        }

        ul {
            color: #000000 !important;
        }

        svg,
        .wp-block-navigation__responsive-container-close {
            filter: invert(1) !important;
        }
    }

    .nav {
        .wp-block-site-logo {
            display: none;
        }
    }

    .is-menu-open {
        padding: 10px 16px !important;
        .wp-block-site-logo {
            top: 0;
            position: absolute;
            filter: invert(1);
            display: block !important;
            height: 38px !important;
            width: auto !important;
        }
    }

    .nav-button a {
        &:hover {
            background-color: #D88190 !important;
        }

        &:focus {
            outline: #2500F9 solid 3px;
            outline-offset: 2px;
        }
    }

    @media only screen and (min-width: 375px) and (max-width: 1024px) {
        nav ul {
            gap: 48px !important;

            li {
                font-size: 20px !important;
                gap: 48 px;
            }
        }
    }

    @media screen and (min-width: 480px) and (max-width: 1024px){
        nav ul {
            li {
                font-size: 20px !important;
            }
        }
        .nav-button a {
           font-size: 16px !important;
        }
    }

    @media only screen and (max-width: 768px) {
        .header-inner-group {
            padding: 10px 16px !important;

            .nav-button a {
                padding: 7px 18px;
                line-height: 24px;
            }
        }
    }

    @media only screen and (max-width: 480px) {
        .wp-block-site-logo img {
            height: 38px;
            width: auto;
        }
        .header-inner-group {
            .menu-wrapper {
                flex-direction: row-reverse;
                gap: 24px;
            }
        }

        .wp-block-navigation__container {
            gap: 32px !important;
            margin-top: 60px !important;
        }
    }
}
/*
 * Hero Section
 */
#hero-section {
    @media (max-width: 1024px) {
        min-height: 500px !important;
    }

    @media (max-width: 480px) {
        min-height: 375px !important;
    }
}

/*
 * Brand Intro
 */
#brand-intro {
    .wp-block-column {
        padding: 0 !important;
    }

    @media only screen and (min-width: 1024px)  {
        .body-text {
            max-width: 440px;
            margin: auto;
        }
    }

    @media only screen and (max-width: 1024px) {
        padding: 82px 32px !important;

        .wp-block-columns {
            gap: auto;
        }
    }

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

        figure.alignright {
            margin-inline-start: 0;
        }

        .wp-block-columns {
            gap: 41px;
        }
    }
}

/*
 * Menus
 */
#menus {
    .menu-items {
        a {
            text-decoration: none;

            &:hover {
                text-decoration: underline;
                text-underline-offset: 6px;
                text-decoration-thickness: 3px;
            }
        }
    }

    @media (min-width: 481px) and (max-width: 1024px) {
        .wp-block-column {
            flex-basis: 50% !important;
            flex-shrink: 0 !important;
            box-sizing: border-box;
        }

        #menu-image {
            padding: 64px 32px !important;
            align-content: center;
        }

        #menu-content {
            padding: 64px 32px !important;
        }

        .menu-items {
            font-size: 28px !important;
            padding: 28px 0 !important;

            >  * + *  {
                margin-block-start: 18px;
            }
        }
    }

    @media (max-width: 480px) {
        #menu-content {
            padding: 64px 16px !important;
        }

        .menu-items {
            padding: 28px !important;

            >  * + *  {
                margin-block-start: 16px;
            }

            img {
                width: 100px !important;
            }

            a {
                font-size: 28px;
                line-height: 100%; /* 28px */
                letter-spacing: 1.12px;
            }
        }
    }
}

/*
 *
 */
#image-carousel {
    @media (max-width: 480px) {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}

/*
 * Events
 */
#events {
    #events-image {
        align-self: stretch;
        align-content: center;
    }

    @media (max-width: 1024px) {
        #events-content {
            padding: 64px 16px !important;

            img {
                width: 95px !important;
            }

            .heading-text {
                font-size: 34px !important;
                line-height: 100% !important;
                letter-spacing: -2.04px !important;
            }

            .is-style-notched-corners {
                > * + * {
                    margin-block-start: 20px;
                }
            }
        }
    }

    @media (min-width: 481px) and (max-width: 1024px) {
        .wp-block-column {
            flex-basis: 50% !important;
            flex-shrink: 0 !important;
            box-sizing: border-box;
        }

        #events-content {
            padding: 64px 32px !important;
            box-sizing: border-box;

            .wp-block-group {
                padding: 54px 24px !important;
            }
        }

        #events-image {
            padding: 64px 32px !important;
            align-self: stretch !important;
            align-content: center !important;
        }
    }
}

/*
 * Private Dinning
 */
#private {
    @media screen and (min-width: 1028px) {
        #private-content {
            width: 550px;
            height: 600px;
        }
    }
    @media (max-width: 1024px) {
        min-height: 710px !important;

        .heading-text {
            font-size: 34px !important;
            line-height: 100% !important; /* 34px */
            letter-spacing: -0.68px !important;
        }

        #private-content {
            padding: 64px 24px !important;
            max-width: 335px;
        }
    }

    @media (max-width: 480px) {
        padding: 16px;

        #private-content{
            max-width: 100% !important;
            padding: 64px 24px !important;
            > * {
                margin-block-start: 18px;
            }

            img {
                width: 132px !important;
            }

            .heading-text {
                font-size: 34px !important;
                line-height: 100% !important; /* 34px */
                letter-spacing: -0.68px !important;
            }
        }
    }
}

/*
 * Book Table
 */
#book-table {
    @media (min-width: 780px) {
        .body-text {
            max-width: 480px;
        }
    }

    @media (min-width: 481px) and (max-width: 1024px) {
        padding: 80px 32px !important;
        gap: 48px;

        .wp-block-column {
            flex-basis: 50% !important;
            flex-shrink: 1 !important;
            box-sizing: border-box;
        }

        #book-table-image {
            .wp-block-image  {
                margin: auto !important;
            }
        }

        .heading-text {
            font-size: 34px !important;
            line-height: 120% !important; /* 40.8px */
            letter-spacing: -2.04px !important;
        }
    }

    @media (max-width: 480px) {
        padding: 80px 16px !important;
        gap: 32px;

        .wp-block-column {
            padding: 0 !important;
        }

        #book-table-content{
            > * + * {
                margin-block-start: 32px;
            }

            img {
                width: 132px !important;
            }

            .heading-text {
                font-size: 34px !important;
                line-height: 120% !important; /* 40.8px */
                letter-spacing: -2.04px !important;
            }
        }

        #book-table-image .wp-block-image {
            margin: 0px !important;
        }
    }
}

/*
 # Contact / Footer
 */
#contact {
    .footer-bottom {
        .copyright,
        .wp-block-navigation-item__content {
            font-size: 18px;
        }
    }

    @media (max-width: 1024px) {
        .footer-bottom {
            .copyright
            .wp-block-navigation-item__content {
                font-size: 16px !important;
            }
        }
    }

    @media (max-width: 480px) {
        .footer-content {
            padding: 48px 16px !important;

            .timings {
                .wp-block-group > * + * {
                    margin-block-start: 12px;
                    margin-block-end: 0;
                }
            }
        }

        .copyright {
            display: none;
        }

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

        .footer-logo {
            figure {
                float: left;
                margin-inline: 0;

            }

            img {
                width: 174px !important;
            }
        }

        .footer-bottom {
            padding: 24px 16px !important;

            .wp-block-navigation-item__content {
                font-size: 16px !important;
            }



            nav ul {
                display: flex;
                flex-direction: column;
                align-items: baseline;
                gap: 12px !important;
                font-size: 16px !important;
                line-height: 140% !important; /* 22.4px */
            }
        }
    }
}