/*
 Theme Name:   Mainsl Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Noah Morrow
 Author URI:   https://clubhausagency.com
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

    /* body .dwc-sidebar *:not(.dwc-sidebar .dwc-sidebar__nav__panel):focus-visible {
        outline: 0px !important;
    } */

:root {
    --list-icon-size: 80px;
    --scrollbar-gutter: 8.5px;
    --section-margin-top: 70px;

}
label {
  color:black;
}
input, select {
  border-color: #004080;
    border-radius: 8px;
    border-width: 2px;
}

/* On pages with a stable scrollbar gutter */
html {
  scrollbar-gutter: stable;
}

:root :where(.wp-block-button .wp-block-button__link) {
        position:relative;
  }
 

      @media screen and (max-width: 1024px) {
         .dwc-sidebar__nav {
        border-left: 10px solid var(--blue-3);
      }
    }


    /* Let images be responsive to their actual container, not the sizes attribute */
/* @container (min-width: 0px) {
    img {
        width: 100%;
        height: auto;
    }
}
   */

    .brx-header-right #brx-content, .brx-header-right #brx-footer {
    width: calc(100% - var(--sidebar-width));
}

.align-stretch {
  height:100%;
}

ul {
  padding-inline-start: 30px;
}

.splide__pagination {
  padding-inline-start: unset;
}
    .home #brxe-mdgfim {
      background-image:none !important;
    }

      h1 {
        font-size: clamp(3rem, 5vw + 1rem, 4.5rem) !important;
        /* Scales from ~30px on mobile to 45px on desktop */
      }
      
      h2 {
        font-size: clamp(2.6rem, 4vw + 0.8rem, 3.4rem);
        /* Scales from ~26px on mobile to 36px on desktop */
      }
      
      h3 {
        font-size: clamp(2.2rem, 2.3vw + 0.6rem, 2.4rem);
        /* Scales from ~22px on mobile to 28px on desktop */
        font-family: "verdana-pro-condensed"
      }
      
      h4 {
        font-size: clamp(1.9rem, 2vw + 0.5rem, 2.1rem) ;
        /* Scales from ~18px on mobile to 22px on desktop */
      }
      
      h5 {
        font-size: clamp(1.6rem, 1vw + 0.4rem, 1.8rem) ;
        /* Scales from ~16px on mobile to 18px on desktop */
      }
      
      h6 {
        font-size: clamp(1.4rem, 0.5vw + 0.3rem, 1.6rem) ;
        /* Scales from ~14px on mobile to 16px on desktop */
      }

      .wp-block-list {
        gap: 10px;
        display: flex;
        flex-direction: column;
      }




      


      footer {
        overflow:hidden;
      }

      .wp-block-button .wp-block-button__link {
        box-shadow:4.1px 9.41px 20.45px -1px rgba(0, 0, 0, 0.18);
        transition: box-shadow 0.3s ease, background-color .5s ease-in-out;
      }

      .wp-block-button .wp-block-button__link.has-border-color {
        padding-top: 0.35em;
        padding-right: 1em;
        padding-bottom: 0.35em;
        padding-left: 1em;
        font-weight:400;
          box-shadow:none;
          font-size: 16px !Important;
        border-width: 1.5px !important;
        color:black !Important;
      }
        .wp-block-button .wp-block-button__link.has-border-color:before {
          content:none;
        }
    
#brx-header ._svg {
  height:30px;
  width:30px !important;
}


.dwc-nav__panel__inner {
  padding-bottom:30px;
}

.skip-link {
  z-index:10000000;
}

.dwc-sidebar__dropdown-toggle button {
  flex-direction:row;
}
      .wp-block-button:hover .wp-block-button__link {
        box-shadow:-5.9px 8.41px 5.45px -2px rgba(0, 0, 0, 0.40);
      }

    .dwc-sidebar__nav__link.level-1 {
        font-weight: 700;
        font-family: "verdana-pro-condensed";
        font-size:1.65rem;

    }

    .secondary-menu .dwc-sidebar__nav__link.level-1 {
        font-weight: 600;
        font-family: "verdana-pro";
    }

    .dwc-sidebar__dropdown-toggle.level-2, .dwc-sidebar__dropdown-toggle.level-2 .dwc-nav__link__text {
        font-weight:600 !important;
        font-size:1.45rem;
    }

    .dwc-sidebar__nav__link {
        font-weight: 400;
        font-size:1.35rem;
        font-family: "verdana-pro";
    }

    .level-2 .dwc-sidebar__nav__link {
        padding: 2px var(--link-pad-x);
    }

    .dwc-sidebar__dropdown-content .dwc-sidebar__nav__li {
        gap: var(--list-gap);
    }

    .dwc-sidebar {
        background:white;
    }

    .dwc-sidebar__dropdown-toggle .dwc-nav__link__icon--chevron-right {
        opacity:.5;
    }
    .dwc-sidebar__nav__panel-footer .brxe-shortcode {
        border-top: 2px solid #b0d6fa87; 
    }


    .alignwide {
        margin-left: auto;
        margin-right:auto;
        max-width: 1500px;
        position: relative;
        width: 100%;
    }
body {
  margin: 0;
  container-type: inline-size;
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
  body {
    margin: 0;
       container-type: normal;
  }
}



.brxe-parent-title {
      position: absolute;
    top: 0px;
    left: 0px;
    padding: 8px;
    background: var(--blue);
    color: white;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
}
  

    .dwc-current-menu-item  .dwc-nav__link__text {
        font-weight: 600;
        color:black;
    }

    .dwc-current-menu-item:not(.level-1) span:after {
      content: '';
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background-color: var(--blue-3);
      margin-right: 10px;
      position: absolute;
      left: -8px;
      top: 7.5px;
    }

    .secondary-menu .dwc-current-menu-item span:after {
      content:none !Important;
    }

    
    .menu-panel .dwc-current-menu-item span:after {
      content:none !Important;
    }
    .dwc-nav__panel__inner {
        scrollbar-width: thin;
        scrollbar-color: #9bb6df6e white;
    }

    .testimonial-slide {
        position:relative;
        filter: drop-shadow(3px 5px 4px #a9b6ca);
    }
    .testimonial-slide::after {
        content: '';
        position: absolute;
        bottom: -23px;
        left: 25%;
        width: 0;
        height: 0;
        border-left: 13px solid transparent;
        border-right: 43px solid transparent;
        border-top: 33px solid var(--blue-4);
      }
   



body .contact-btn {
    background: linear-gradient(to right, #0169B4 50%, white 50%) !important;
    background-size: 200% 100% !important;
    background-position: right !important;
    color: #0169B4 !important;
    transition: background-position 0.3s ease, color 0.3s ease !important;
}

body .contact-btn:hover {
    background-position: left !important;
    color: white !Important;
}




    
/* Your original CSS - keep this as is */
.alignfull, .wp-block-categories-list.alignfull {
  left: 50%;
  margin-left: calc(-50cqw + (var(--sidebar-width) / 2));
  margin-right: -50cqw;
  max-width: calc(100cqw - var(--sidebar-width)) !important;
  position: relative;
  right: 50%;
  width: calc(100vcqw - var(--sidebar-width));
  padding-right: 20px;
  padding-left: 20px;
      overflow-x: clip;
}


      @media screen and (max-width: 1024px) {
        .alignfull, .wp-block-categories-list.alignfull {
            max-width: calc(100% + 40px) !important;
            left: auto;
            margin-left: -20px;
            margin-right: -20px;
            right: auto;
            width: calc(100% + 40px);
            padding: 0px;
        }
    }


    body.dwc-collapse-sidebar .alignfull,
body.dwc-collapse-sidebar .wp-block-categories-list.alignfull {
  margin-left:  calc(-50dvw + (var(--collapse-offset) / 2));
  max-width:    calc(100dvw - var(--collapse-offset)) !important;
  width:        calc(100dvw - var(--collapse-offset));
}



    .alignfull > div {
        padding-left:20px;
        padding-right:20px;
    }


    nav a:where(:not(.wp-element-button)) {
        text-decoration:none;
    }

   

    .wp-block-image {
        width:inherit;
    }

    :root :where(.is-layout-flow) > *, :root :where(.is-layout-flow) > :first-child {
        margin-block-start: inherit !important;
    }
    

    .event-content {
      display: flex;
      flex-direction: column;
      padding:20px;
    }
 
    .subpage-item a {
        text-decoration: none;
        line-height: 1.5;
        display: flex;
        font-size: 15px;
    }
    .subpages-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

    footer a {
      text-decoration: none;
    }

    footer a:hover {
        text-decoration: underline;
        text-decoration-style: wavy;
        text-decoration-color: var(--blue-3);
    }


    .brxe-subpages-list {
        margin-bottom:20px;
    }

    footer .section-title {
        font-weight: 600;
    font-family: "verdana-pro";
    color: var(--blue-1);
    font-size: 18px;
    margin-bottom:15px;
    }






      /* --- Gradient Border Button Style --- */
      .wp-block-button__link {
        position:relative;
      }

      .wp-block-button__link:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 7px;
        padding: 3px;
        background: linear-gradient(90deg, white, var(--blue-3));
        background-size: 100% 100%; /* Make the background twice as wide */
        background-position: center bottom; /* Start with the right side showing */
        -webkit-mask: 
          linear-gradient(#fff 0 0) content-box, 
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        transition: background-position 0.5s ease, background-size 0.5s ease; /* Add smooth transition */
      }

      

      .wp-block-button__link:hover:before {
        background-position: left bottom; /* Move to show the left side on hover */
        background-size: 500% 100%; /* Make the background twice as wide */

      }
      
      .wp-block-button__link.has-yellow-2-background-color:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 7px;
        padding: 3px;
        background: linear-gradient(0deg, var(--orange), white);
        background-size: 100% 100%; /* Make the background twice as tall */
        background-position: center center; /* Start with the top showing */
        -webkit-mask: 
          linear-gradient(#fff 0 0) content-box, 
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        transition: background-position 0.5s ease, background-size 0.5s ease; /* Add smooth transition */
      }
      
      .wp-block-button__link.has-yellow-2-background-color:hover:before {
        background-position: center bottom; /* Move to show the bottom on hover */
        background-size: 100% 200%; /* Make the background twice as tall */

      }

      .wp-block-button__link.has-yellow-2-background-color:hover {
        background-color:#ffe479 !important;
      }

      .list-style-type-disc {
        list-style-type: disc;
        display: list-item;
      }

      .dwc-toggle-collapse i.brxe-icon {
        position:relative;
        left:0px;
        transition: .2s !important;
        right:0px;
      }

      .dwc-toggle-collapse:hover i.brxe-icon {
        right:-5px;
        left:unset;
      }

      .dwc-collapse-sidebar .dwc-toggle-collapse:hover i.brxe-icon {
         left:-5px;
         right:unset;
      }



.wp-block-image, .wp-block-video, figcaption, figure {
  margin: unset;
}
      

       .modal-button-overlay {
            display: none;
            position: fixed;
            z-index: 999999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            animation: fadeIn 0.3s;
        }
        .modal-button-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: none;
            border-radius: 8px;
            width: 90%;
            max-width: 600px;
            position: relative;
            animation: slideIn 0.3s;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }
        .modal-button-close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            line-height: 1;
            margin-top: -5px;
        }
        .modal-button-close:hover,
        .modal-button-close:focus {
            color: #000;
        }
        .modal-button-header {
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        .modal-button-title {
            margin: 0;
            font-size: 1.5em;
            color: #333;
        }
        .modal-button-body {
            margin-bottom: 20px;
            line-height: 1.6;
        }
        .modal-button-footer {
            text-align: right;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }
        .modal-button-learn-more {
            background-color: #0073aa;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 4px;
            display: inline-block;
            transition: background-color 0.3s;
        }
        .modal-button-learn-more:hover {
            background-color: #005a87;
            color: white;
            text-decoration: none;
        }
        @keyframes fadeIn {
            from {opacity: 0;}
            to {opacity: 1;}
        }
        @keyframes slideIn {
            from {transform: translateY(-50px); opacity: 0;}
            to {transform: translateY(0); opacity: 1;}
        }
        @media (max-width: 768px) {
            .modal-button-content {
                width: 95%;
                margin: 10% auto;
                padding: 15px;
            }
        }



  

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


      .mainsl-breadcrumbs {
            gap: 5px;
flex-wrap:nowrap;
    line-height: 1;
    font-size: 15px;
      }
  .mainsl-breadcrumbs > span:last-child {
    display:none !important;
  }
      .wp-element-button {
            line-height: 1.4;
    padding-top: 15px;
    padding-bottom: 15px;
      }

      .mobile-swap {
        flex-direction: column-reverse;
      }
      .mobile-scroll {
        display:flex !Important;
        flex-wrap: nowrap !important;
        overflow-x: scroll;
        padding-top: 30px;
    }

    .mobile-scroll>div, .mobile-scroll>a {
        width: 65%;
        min-width: 65%;
    }

    .featured-items.mobile-scroll>div, .featured-items .mobile-scroll>div, .featured-items .mobile-scroll>a {
        width: 65%;
        min-width: 65%;
    }

}


    @media screen and (max-width: 767px) {
        main > div {
          overflow:hidden;
        }
        .mobile-hide {
          display:none;
        }
}


.list-post-item {
  flex-direction: column;
    align-items: stretch;
    text-decoration: none;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    border: 2px solid var(--blue-3);
    border-radius: 8px;
    height: 100%;
}


.bricks-search-inner form:after {
    content: '';
    position: absolute;
    top: -200px;
    height: 134px;
    width: 165px;
    background-image: url(/wp-content/uploads/2025/07/blue-boat-search-9fdb1f.svg);
    background-size: 165px;
    background-repeat: no-repeat;
    transform: translateX(-50%);
    left: 50%;
}

.bricks-search-overlay button.close {
    top: 65px !important;
    font-size: 60px !important;
    color: var(--blue-3) !important;
}


/* Loading spinner styles */
.pagination-loading.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

.pagination-loading.loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.gb-text > a, p > a {
     text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--blue-3);
    font-weight: 600;
    color: var(--blue);
}

.gb-text > a:hover, p > a:hover {
    color: var(--blue-1);
      text-decoration-color: var(--blue);
}
.bricks-search-inner {
  padding:10px;
}

 [img_position="center-top"] {
           object-position: center top !important;
  }

   [img_position="center-bottom"] {
           object-position: center bottom !important;
  }