/*
Theme Name: Boston Yacht Theme
Theme URI: https://36.agency
Author: 36creative     
Author URI: https://36.agency
Description: Block theme designed to provide a flexible and easy to use editing experience.
Version: 3.2
Requires at least: 6.5.5
Tested up to: 6.5.5
Requires PHP: 8.1.23
Text Domain: boston-yacht
*/

* {
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased; 
    font-family: var(--wp--preset--font-family--inter);   
}

img {
    max-width: 100%;
    height: auto;    
}


:root :where(.is-layout-constrained) > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

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

#wp--skip-link--target {
    margin: 0;
}

@media screen and (min-width: 1025px) {
    body:not(.editor-styles-wrapper) .visible-desktop-false {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    body:not(.editor-styles-wrapper) .visible-tablet-false {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    body:not(.editor-styles-wrapper) .visible-mobile-false {
        display: none;
    }
}



/*=========== entry content ==============*/



main > .entry-content {
    /*padding-top: var(--header-height);*/
}
.light-theme main > .entry-content{
    padding-top: 0;
}


/*=========== header ==============*/

header.wp-block-template-part{
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 0;
    left: 0;    
    transition: all 0.3s ease-in-out 0s;
}
.header-inn{
    overflow: visible;
}
.header-inn .header-logo{
    position: relative;
    z-index: 3;
}
.header-inn .header-main{
    position: static;
}
@media screen and (max-width: 1180px) {
    .header-inn .header-logo{
        max-width: 216px;
        width: auto;
    }
    .header-inn .header-main{
        width: 28px;
        flex: 0 0 28px;
    }
}

.nav-up header.wp-block-template-part{
    top: -100px;  
    transition: all 0.3s ease-in-out;      
}
.nav-down header.wp-block-template-part{
    top: 0;   
    transition: all 0.3s ease-in-out;
}

.fixed .light-theme header.wp-block-template-part{
    background: var(--wp--preset--color--white);
}
.deep-theme header.wp-block-template-part,
.fixed .deep-theme header.wp-block-template-part{
    background: var(--wp--preset--color--white);
}
.menu-open-desk .deep-theme header.wp-block-template-part,
.menu-open-desk-root .deep-theme header.wp-block-template-part{
    background: transparent;
}
.light-theme header.wp-block-template-part{
    /*background: linear-gradient(0deg, rgba(0, 33, 45, 0.00) 0%, rgba(0, 33, 45, 0.90) 100%);*/
}
/* White logo: target img (before SVG inlining) and paths (after inlining). */
:not(.search-open):not(.menu-open):not(.fixed) .light-theme .header-inn .header-inn-wrap .header-logo .wp-block-blueprint-logo img,
.search-open .header-inn .header-inn-wrap .header-logo .wp-block-blueprint-logo img,
.search-open .wp-block-blueprint-menu-search .search-logo img,
.menu-open-desk .deep-theme .header-inn .header-inn-wrap .header-logo .wp-block-blueprint-logo img,
.menu-open-desk-root .deep-theme .header-inn .header-inn-wrap .header-logo .wp-block-blueprint-logo img,
.menu-open .light-theme .header-inn .header-inn-wrap .header-logo .wp-block-blueprint-logo img{
    filter: brightness(0) invert(1);
}
:not(.search-open):not(.menu-open):not(.fixed) .light-theme .header-inn .header-inn-wrap .header-logo .wp-block-blueprint-logo svg path[fill="#1E272D"],
.search-open .header-inn .header-inn-wrap .header-logo .wp-block-blueprint-logo svg path[fill="#1E272D"],
.search-open .wp-block-blueprint-menu-search .search-logo svg path[fill="#1E272D"],
.search-open .wp-block-blueprint-menu-search .search-logo svg path[fill="#1e272d"],
.menu-open-desk .deep-theme .header-inn .header-inn-wrap .header-logo .wp-block-blueprint-logo svg path[fill="#1E272D"],
.menu-open-desk-root .deep-theme .header-inn .header-inn-wrap .header-logo .wp-block-blueprint-logo svg path[fill="#1E272D"]{
    fill: var(--wp--preset--color--white);
}

.deep-theme header.wp-block-template-part .header-inn .header-inn-wrap .header-logo .wp-block-blueprint-logo svg path[fill="white"],
.fixed header.wp-block-template-part .header-inn .header-inn-wrap .header-logo .wp-block-blueprint-logo svg path[fill="white"]{
    fill: #1E272D;
}


/*=========== footer ==============*/

footer.wp-block-template-part{
    background-color: #292929;
}
.footer-main{
    .footer-main-inner{
        .footer-main-mid{
            & > .container{
                .footer-main-mid-left{
                    & > .container{
                        @media screen and (max-width: 1024px) {
                            align-items: flex-start;
                        }
                        .wp-block-group{
                            @media screen and (max-width: 1024px) {
                                width: 50%;
                            }
                            @media screen and (min-width: 1025px) {
                                & + .wp-block-group{
                                    margin-left: 44px;
                                }
                            }
                            .wp-block-blueprint-paragraph{
                                @media screen and (min-width: 1025px) {
                                    display: none;
                                }
                            }
                            & > .wp-block-navigation{
                                ul{
                                    gap: 44px;
                                    @media screen and (max-width: 1024px) {
                                        gap: 32px;
                                        flex-direction: column;
                                        align-items: flex-start;
                                    }
                                    li{
                                        a{
                                            color: var(--wp--preset--color--white);
                                            font-family: var(--wp--preset--font-family--aktiv-grotesk-extended);
                                            font-size: 12px;
                                            font-weight: 800;
                                            line-height: normal;
                                            letter-spacing: 0.96px;    
                                            text-transform: uppercase;  
                                            transition: all 0.3s ease-in-out;
                                            &:hover{
                                                @media screen and (min-width: 1025px) {
                                                    color: var(--wp--preset--color--blue);
                                                }
                                            }                                   
                                        }
                                        &.has-child{                                            
                                            width: 100%;
                                            & > a{
                                                @media screen and (max-width: 1024px) {
                                                    display: none;
                                                }
                                                @media screen and (min-width: 1025px) {
                                                    .wp-block-navigation-item__label{
                                                        display: block;
                                                        padding-right: 18px;
                                                        &::after{
                                                            content: '';
                                                            position: absolute;
                                                            top: 50%;
                                                            right: 0;
                                                            transform: translateY(-50%);
                                                            width: 11px;
                                                            height: 6px;
                                                            background-color: var(--wp--preset--color--white);
                                                            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6' fill='none'%3E%3Cpath d='M0.75 0.75L5.19559 4.8215L9.63974 0.75' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
                                                            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6' fill='none'%3E%3Cpath d='M0.75 0.75L5.19559 4.8215L9.63974 0.75' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
                                                            transition: all 0.3s ease-in-out;
                                                        }                                              
                                                    }
                                                    &[aria-expanded="true"]{
                                                        .wp-block-navigation-item__label{
                                                            &::after{
                                                                transform: translateY(-50%) rotate(180deg);
                                                                background-color: var(--wp--preset--color--blue);
                                                            }
                                                        }
                                                        & + .foot-mid-dropdown-wrap{
                                                            height: auto;
                                                            opacity: 1;
                                                        }
                                                    }
                                                }
                                            }  
                                            .foot-mid-dropdown-wrap{  
                                                @media screen and (min-width: 1025px) {
                                                    position: absolute;
                                                    bottom: 100%;
                                                    left: 0;
                                                    width: 320px;
                                                    background-color: var(--wp--preset--color--white);
                                                    height: 0;
                                                    overflow: hidden;
                                                    transition: all 0.3s ease-in-out;      
                                                    opacity: 0;                                              
                                                }                                        
                                                .wp-block-navigation-submenu{
                                                    height: auto;
                                                    overflow: visible;
                                                    visibility: visible;
                                                    width: 100%;
                                                    opacity: 1;
                                                    position: relative;
                                                    background-color: transparent;
                                                    border: 0;                                                    
                                                    @media screen and (min-width: 1025px) {
                                                        gap: 0;
                                                        padding: 20px;
                                                    }
                                                    li{
                                                        a{
                                                            padding: 0;
                                                            @media screen and (min-width: 1025px) {
                                                                padding: 0 20px;
                                                                color: var(--wp--preset--color--brand-secondary);
                                                                position: relative;
                                                                transition: all 0.3s ease-in-out;
                                                                font-size: 12px;
                                                                font-style: normal;
                                                                font-weight: 800;
                                                                line-height: 40px;
                                                                letter-spacing: 0.96px;
                                                                text-transform: uppercase;
                                                                &::before{
                                                                    content: '';
                                                                    position: absolute;
                                                                    top: 0;
                                                                    left: 0;
                                                                    width: 100%;
                                                                    height: 100%;
                                                                    background-color: var(--wp--preset--color--sky);
                                                                    opacity: 0;
                                                                    transition: all 0.3s ease-in-out;
                                                                }
                                                                &:hover{
                                                                    color: var(--wp--preset--color--brand-primary);
                                                                    &::before{
                                                                        opacity: 0.5;
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .footer-main-bottom{
            & > .container{
                .footer-main-bottom-left{
                    width: 49%;
                    @media screen and (max-width: 768px) {
                        width: 100%;
                        order: 2;
                        margin-top: 40px;
                        .wp-block-blueprint-paragraph{
                            p{
                                text-align: center;
                            }
                        }
                    }
                }                
                .footer-main-bottom-right{
                    width: 49%;
                    @media screen and (max-width: 768px) {
                        width: 100%;
                        order: 1;
                    }
                    & > .container{
                        & > .wp-block-navigation{
                            ul{
                                gap: 52px;
                                @media screen and (max-width: 768px) {
                                    justify-content: center;
                                }
                                li{
                                    a{
                                        color: var(--wp--preset--color--silver-grey);
                                        font-family: var(--wp--preset--font-family--aktiv-grotesk);
                                        font-size: 11px;
                                        font-weight: 400;
                                        line-height: normal;
                                        text-decoration: none;
                                        transition: all 0.3s ease-in-out;
                                        &:hover{
                                            color: var(--wp--preset--color--blue);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}



@media screen and (min-width: 1025px) and (max-width: 1365px) {
    .wp-block-blueprint-columns .wp-block-blueprint-column[data-client-id="block-24592b50-7ec9-4e66-9789-ea8a1c27d244"]{
        padding-bottom: 520px;
    }
    .wp-block-blueprint-columns .wp-block-blueprint-column[data-client-id="block-24592b50-7ec9-4e66-9789-ea8a1c27d244"] .column-parallax__layer[data-layer="1"] {
      top: 42%;
      bottom: 0px;
      left: -95%;
      z-index: 2;
    }
    .wp-block-blueprint-columns .wp-block-blueprint-column[data-client-id="block-24592b50-7ec9-4e66-9789-ea8a1c27d244"] .column-parallax__layer[data-layer="2"] {
      right: 10%;
      bottom: 120px;
      z-index: 1;
    }
  }


/* iOS Safari only (touches -webkit-touch-callout). Tablet/hamburger header widths. */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 1180px) {
    .wp-block-blueprint-column[data-client-id="block-cdbbe9fc-435c-467f-b94d-c106498bbef9"] {
      width: 216px;
      z-index: 11;
    }
    .wp-block-blueprint-column[data-client-id="block-e4648c85-af11-4f39-b634-151c123da3f5"] {
      margin-top: 0;
      margin-bottom: 0;
      width: auto;
    }
  }
}