/* 
Wordpress breakpoints: Mobile - (0-599) / Tablet (600-767) / Desktop (768-99999)
*/

html {
    scroll-padding-top: 200px;
    /* offset for anchor links */
    scroll-behavior: smooth;
    /* smooth scrolling for anchor links */
}

/* is this controlled in theme.json? */

/* .wp-site-blocks {
    padding-top: 0;
    padding-bottom: 0;
} */

.coast {

    /* Resets */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-block-start: 0.5rem;
        margin-block-end: 0.5rem;
    }

    .is-layout-grid {
        @media screen and (max-width: 599px) {
            display: flex;
            flex-direction: column;
        }
    }

    /* Paragraph margins are not needed, it's easier to let block spacings deal with this */
    /* p {
        margin-block-start: 0.5rem;
        margin-block-end: 1rem;
    }  */

    /* Table of Contents - BLOCK */
    .kb-table-of-content-nav .kb-table-of-content-list {
        list-style: none;
        padding-left: 0;
        margin-top: 0;
    }

    .kb-table-of-content-nav .kb-table-of-content-wrap {
        @media screen and (max-width: 599px) {
            max-width: 100% !important;
        }
    }

    /* Cover */
    .wp-block-cover {
        @media screen and (max-width: 599px) {
            min-height: 300px;

        }
    }

    .header-spacer {
        @media screen and (max-width: 599px) {
            height: 0 !important;

        }
    }

    header {
        /* height: 116px; */
        background: var(--wp--preset--color--accent-4);
        position: fixed !important;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9999;
        height: 120px;

        .wp-block-site-logo {
            top: -20px;

            img {
                transition: all 0.3s ease-in-out;
            }

            @media screen and (max-width: 599px) {
                img {
                    width: 100px;
                    transition: all 0.3s ease-in-out;
                }
            }
        }

        @media screen and (max-width: 599px) {
            height: 80px;

            .wp-block-site-logo {
                top: -5px;

                img {
                    width: 100px;
                    transition: all 0.3s ease-in-out;
                }
            }
        }
    }

    header.header-is-scrolled {
        height: 80px;
        top: 0;

        .wp-block-site-logo {
            top: -5px;

            img {
                width: 100px;
                transition: all 0.3s ease-in-out;
            }
        }
    }

    .wp-block-site-logo {
        position: absolute;
        top: -42px;
        left: 0;
        right: 0;
        z-index: 9999;
    }

    ul ul.wp-block-navigation__submenu-container {
        width: 400px !important;
        padding: 2rem;
        border: none !important;
        border-radius: 30px;

        a {
            font-size: 1rem !important;
        }

    }

    /* Mobile Menu */
    /* Outer Container - Contains the Hamburger button */
    .wp-block-navigation__responsive-container.is-menu-open {
        background-color: var(--wp--preset--color--base) !important;
        text-align: left;

        /* Top Level */
        ul {
            gap: 8px !important;
            padding-right: 10px !important;
            justify-items: flex-start !important;
            justify-content: flex-start !important;
            align-items: flex-start !important;
            width: 100% !important;

            >li {
                /* padding-right: 10px !important; */
                align-items: flex-start !important;
                text-align: left !important;
            }

            >li.has-child {
                border-right: 1px solid var(--wp--preset--color--secondary) !important;
            }

            >li>a {
                color: var(--wp--preset--color--contrast) !important;
                text-align: left;
                font-size: 1.5rem !important;
            }
        }

        button span {
            color: var(--wp--preset--color--contrast) !important;
            text-align: left;
            font-size: 1.5rem !important;
        }

        /* Second Level */
        ul ul {
            padding: 0 0 0 10px !important;
            margin-top: 12px !important;
            margin-bottom: 0px !important;

            >li>a {
                color: var(--wp--preset--color--secondary) !important;
                font-size: 1rem !important;
            }
        }
    }


    /* Navigation Mobile Custom Breakpoint 
     * - change max-width to desired point hamburger appears 
     */
    @media screen and (max-width: 1050px) {
        .wp-block-navigation__responsive-container-open {
            display: block !important;
        }

        .wp-block-navigation__submenu-container {
            display: block !important;
            /* position: absolute !important; */
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            background-color: var(--wp--preset--color--accent-4) !important;
            padding: 2rem !important;
            border-radius: 30px !important;

            .wp-block-navigation-link {
                padding-bottom: 5px;
            }
        }

        .wp-block-navigation-item.has-child::after {
            content: ">";
            right: -20px;
            top: 7px;
            position: absolute;

            background-color: var(--wp--preset--color--secondary) !important;
        }

        .wp-block-navigation__submenu-container {
            display: none !important;
        }

        .wp-block-navigation-submenu__toggle[aria-expanded="true"]~.wp-block-navigation__submenu-container {
            display: block !important;
        }

        .wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
            display: none !important;
        }

        .mobile-row-reverse {
            flex-direction: row-reverse;
        }
    }

    /* First Group block on a page */
    .wp-block-post-content .wp-block-group:first-child {
        @media screen and (max-width: 599px) {
            margin-top: 0 !important;
        }
    }

    /* List */
    .kb-table-of-content-nav.kb-table-of-content-id666_f6fdec-88 .kb-table-of-content-list {
        @media screen and (max-width: 599px) {
            li {
                margin: 0;
            }

            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap:1rem;
            column-gap: 30px;
            ;
        }
    }

    /* PLUGIN - Simple photo feed */
    .spf_container {
        gap: 0;
        border-radius: 50px;
        overflow: hidden;
        padding: 0;
    }

    .spf_container.spf_size_small {
        grid-template-columns: repeat(4, 1fr);
    }

    /* PLUGIN - Gravity Forms */
    .gform-theme.gform-theme--framework.gform_wrapper {
        --gf-ctrl-radius: 30px;
        --gf-ctrl-border-color: transparent !important;
        /* --gf-radius: 30px; */
        /* --gf-local-radius: var(--gf-ctrl-radius); */

        input[type="submit"].gform_button.button {
            border-radius: var(--gf-ctrl-radius);
            --gf-local-bg-color: var(--wp--preset--color--accent-3);
        }
    }

    .gform-theme--foundation .gform_fields {
        gap: 1.5rem;
    }

    .gfield_label {
        padding-left: 0.8rem;
    }


    /* Blocks */
    .wp-block-search__input {
        padding-left: 1.5rem;
    }

    #instagram-search {
        border: none;
        border-radius: 30px;
        padding: 10px 20px;
        width: 240px;
        margin: 20px;
        background-color: white;
    }
}

/* TEXT */

/* Clip text lines with css, add .clp-txt + .c(no of lines 2,3,5 or 10)  */

.clp-txt {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.c2 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.c3 {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.c5 {
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

.c10 {
    -webkit-line-clamp: 10;
    line-clamp: 10;
}

.no-underline,
.no-underline *,
.no-underline *:hover {
    text-decoration-line: none;
}

/* HOVE EFFECTS */

.hover-slide-left {
    transition: all 200ms ease-in-out;

    &:hover {
        transform: translateX(-5px);
        transition: all 200ms ease-in-out;
    }
}

.hover-slide-right {
    transition: all 200ms ease-in-out;

    &:hover {
        transform: translateX(5px);
        transition: all 200ms ease-in-out;
    }
}

.hover-underline:hover {

    h1,
    h2,
    h3,
    p {
        text-decoration: underline;
    }
}

/* Animate in */

.fadein {
    opacity: 0;
    transition: all 1s;
}

/* dont hide elements in the editor - we don't run the required js script in the editor */

.block-editor-block-canvas .fadein,
.editor-styles-wrapper .fadein {
    opacity: 1 !important;
}

.fadein:nth-child(2) {
    transition-delay: 200ms;
}

.fadein:nth-child(3) {
    transition-delay: 400ms;
}

.fadein:nth-child(4) {
    transition-delay: 600ms;
}

.fadein:nth-child(5) {
    transition-delay: 700ms;
}

.fadein:nth-child(6) {
    transition-delay: 750ms;
}

.fadein:nth-child(7) {
    transition-delay: 800ms;
}

.coast-visible {
    opacity: 1;
}

/* Position */

.absolute {
    position: absolute !important;
}

.left-0 {
    left: 0 !important;
}

.right-0 {
    right: 0 !important;
}

/* Width */

.fit-content {
    width: fit-content;
}

/* Border Radius */

.border-radius-0,
.border-radius-5,
.border-radius-10,
.border-radius-20,
.border-radius-30 {
    overflow: hidden;
}

.border-radius-0 {
    border-radius: 0 !important;
}

.border-radius-5 {
    border-radius: 5px !important;
}

.border-radius-10 {
    border-radius: 10px !important;
}

.border-radius-20 {
    border-radius: 20px !important;
}

.border-radius-30 {
    border-radius: 30px !important;
}

/* Padding */

.p-sm {
    padding: 1rem;
}

.p-md {
    padding: 2rem;
}

.p-lg {
    padding: 3rem;
}

/* Height */

.h-full {
    height: 100%;
}

/* Width */

.w-full {
    width: 100%;
}

/* Max Width */

.mw-text {
    max-width: 675px !important;
}

.max-w-text {
    max-width: 675px !important;
}

.mw-500 {
    max-width: 500px !important;
}

@media screen and (max-width: 1050px) {
    .mobile-reverse {
        flex-direction: column-reverse;
    }
}

.list-style-none {
    list-style: none;
    padding-left: 0;
}

/* Menu - Page item children */

tr.level-1 {
    a.row-title {
        color: #8794b1;
    }
}

/* Core Image block custom Style - Shapes */

.wp-block-image.is-style-shape-1 img,
.wp-block-image.is-style-shape-2 img,
.wp-block-image.is-style-shape-1 .components-resizable-box__container img,
.wp-block-image.is-style-shape-2 .components-resizable-box__container img {
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.wp-block-image.is-style-shape-1 img,
.wp-block-image.is-style-shape-1 .components-resizable-box__container img {
    mask-image: url(/wp-content/themes/coast-starter/assets/img/shape-1.svg);
    -webkit-mask-image: url(/wp-content/themes/coast-starter/assets/img/shape-1.svg);
}

.wp-block-image.is-style-shape-2 img,
.wp-block-image.is-style-shape-2 .components-resizable-box__container img {
    mask-image: url(/wp-content/themes/coast-starter/assets/img/shape-2.svg);
    -webkit-mask-image: url(/wp-content/themes/coast-starter/assets/img/shape-2.svg);
}

/* @import "./plugin-gravity.css"; */