/*Header Section*/

header.home-background{
    height: 1036px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    /* z-index: 0; */
    overflow: hidden;
}

.hero-bottom-graphic {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: -2;
    pointer-events: none;
}

.hero-bottom-graphic img{
    width: 100%;
    height: auto;
    display: flex;
    /* transform: translateY(35%); */
}



/*Navbar Section*/

.logo-right-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 38px;
}

/*Right Content*/
.right-content{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    column-gap: 30px;
}

a.header-btn {
    border-radius: 9px;
    border: 3px solid var(--button-text);
    color: var(--button-text);
    text-align: center;
    font-family: Montserrat;
    font-size: clamp(1.125rem, 5vw, 1.375rem);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    /* padding: 14px 27px; */
	padding: 0 27px;
    letter-spacing: 1.1px;
    text-decoration: none;
    transition: 0.5s all;
    text-transform: uppercase;
    width: auto;
    display: flex;
    height: 48px;
    display: flex;
    align-self: center;
    align-items: center;
}
a.header-btn.home.text-white{
  border-radius: 9px;
  border: 3px solid var(--button-text);
  color: var(--button-text);
  text-align: center;
  font-family: Montserrat;
  font-size: clamp(1.125rem, 5vw, 1.375rem);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 0 27px;
  letter-spacing: 1.1px;
  text-decoration: none;
  transition: 0.5s all;
  text-transform: uppercase;
  width: auto;
  display: flex;
    height: 48px;
    display: flex;
    align-self: center;
    align-items: center;
}

a.header-btn.home.text-white:hover{
color:var(--accent) !important;
background: var(--button-text) !important;
}



a.header-btn:focus{

  color: var(--button-text) !important;

}

/* a.header-btn:hover{
    background-color: var(--button-text);
    color: var(--accent);
    text-decoration: none;
} */

.page-template-template-page a.header-btn:hover{
    background-color: var(--button-text);
    color: white;
    text-decoration: none;
}



/* Search Section - Inline */
.header-search button:hover{
    background: transparent !important;
}
.header-search button svg{
    stroke: white;
    transition: 0.5s all;
}
.header-search button svg:hover{
    stroke: var(--button-text);
}

.header-search {
    position: relative;
}

.header-search .search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-search .search-field-desktop {
    width: 0;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 14px;
    transition: width 0.3s ease, border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateX(20px);
}

.header-search .search-field-desktop::placeholder {
    color: var(--accent);
}

.header-search .search-field-desktop.active {
    width: 200px; 
    border-color: rgba(255, 255, 255, 0.3);
    background: white;
    color: var(--accent);
    font-weight: 400;
    opacity: 1;
    transform: translateX(0);
}

/*this is for when the search field is focused*/
.header-search .search-field-desktop:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    background: white
}

.search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* button.search-submit.search-toggle:hover {
    background: none;
} */





/* Weather Widget Adjustments */
.splw-lite-wrapper{
    overflow: visible !important;
}

.splw-lite-wrapper .splw-lite-current-temp span.cur-temp {
    font-size: clamp(1.6rem, 5vw, 2.375rem) !important;
    font-weight: 400 !important;
    line-height: normal;
}

#splw-location-weather-437.splw-main-wrapper {
    max-width: 320px;
    margin: auto;
    margin-bottom: 0 !important;
}


/*Header Regular Pages*/
header.site-header.main .splw-lite-wrapper .splw-lite-current-temp span.cur-temp {
    font-size: clamp(1.6rem, 5vw, 2.375rem) !important;
    font-weight: 400 !important;
    line-height: normal;
    color:var(--accent);
}



/* Mobile Menu Styles */

/*Exterior Hamburger Menu Styling*/
    .main-menu-toggle {
        padding: 20px;
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        justify-content: space-between;
        align-items: center;
        column-gap: 20px;
        flex-direction: row-reverse;
    }

    .menu-text {
        color: white;
        font-size: clamp(1.125rem, 5vw, 2.5rem);
        font-family: var(--gp-font--hello) !important;
    }

    .mobile-menu-toggle {
        cursor: pointer;
        transition: transform 0.3s ease;
        column-gap: 10px;
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        flex-direction: row-reverse;
        align-items: center;
        transition: 0.5s all;
    }

    /* .mobile-menu-toggle:hover {
        transform: scale(1.1);
    } */

    .mobile-menu-toggle svg {
        fill: white;
    }


    /* Mobile Menu Overlay */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 40%;
        height: 100vh;
        background: #f4e6b8;
        z-index: 9999; /* Very high z-index */
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
        overflow-y: auto;
        padding: 80px 48px 48px;
        border-radius: 0 0 25px 25px;
    }

    .mobile-menu.active {
        transform: translateX(0);
    }

    /* Close Button */
    .close-btn {
        position: absolute;
        right: 48px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        z-index: 1001;
    }

    .close-btn svg {
        width: 100%;
        height: 100%;
    }

    /* Social Icons */
    .social-icons {
        display: flex;
        gap: 15px;
        margin-bottom: 40px;
    }
   

    .social-icons a {
        display: block;
        line-height: 0;
    }

    .social-icons svg {
        width: 40px;
        height: 40px;
        fill: var(--accent);
    }

    /* WordPress Menu Styling */
    .mobile-menu .menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-menu .menu > li {
        border-bottom: 3px solid #4fc3f7;
        margin-bottom: 5px;
    }

    /*Links*/
    .mobile-menu .menu > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        color: var(--accent);
        text-decoration: none;
        font-size: clamp(1rem, 5vw, 1.5rem);
        font-weight: 400;
        text-transform: uppercase;
        transition: padding-left 0.3s ease;
        position: relative;
        font-family: var(--gp-font--gotham);

    }

    .harbor-cam-ico::after{
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="19" viewBox="0 0 22 19" fill="none"><path d="M18.6996 3.34313H17.2916L16.9396 2.22876C16.7115 1.57488 16.2882 1.00909 15.7285 0.609763C15.1687 0.210438 14.5003 -0.00264874 13.8157 2.48544e-05H8.18383C7.49255 0.00133503 6.81913 0.222545 6.25861 0.632435C5.6981 1.04232 5.2788 1.62019 5.05989 2.28448L4.7079 3.39885H3.29993C2.42474 3.39885 1.58538 3.75107 0.966528 4.37802C0.34767 5.00497 0 5.85531 0 6.74195V15.6569C0 16.5435 0.34767 17.3939 0.966528 18.0208C1.58538 18.6478 2.42474 19 3.29993 19H18.6996C19.5748 19 20.4142 18.6478 21.033 18.0208C21.6519 17.3939 21.9995 16.5435 21.9995 15.6569V6.74195C22.0068 6.29826 21.9269 5.85754 21.7643 5.44548C21.6017 5.03343 21.3598 4.65828 21.0527 4.34192C20.7455 4.02556 20.3793 3.77431 19.9753 3.60283C19.5713 3.43135 19.1376 3.34307 18.6996 3.34313ZM19.7996 15.6012C19.7996 15.8967 19.6837 16.1802 19.4774 16.3892C19.2711 16.5981 18.9913 16.7155 18.6996 16.7155H3.29993C3.0082 16.7155 2.72842 16.5981 2.52213 16.3892C2.31584 16.1802 2.19995 15.8967 2.19995 15.6012V6.68623C2.19995 6.39068 2.31584 6.10724 2.52213 5.89826C2.72842 5.68927 3.0082 5.57187 3.29993 5.57187H5.49989C5.73975 5.58455 5.97713 5.51734 6.17575 5.38051C6.37437 5.24368 6.52333 5.04475 6.59986 4.8141L7.19385 2.98653C7.26764 2.76519 7.40823 2.57295 7.59575 2.43697C7.78327 2.30099 8.00823 2.22816 8.23883 2.22876H13.8707C14.1013 2.22816 14.3263 2.30099 14.5138 2.43697C14.7013 2.57295 14.8419 2.76519 14.9157 2.98653L15.5097 4.8141C15.5803 5.02666 15.7125 5.21269 15.8891 5.34789C16.0658 5.48308 16.2785 5.56114 16.4997 5.57187H18.6996C18.9913 5.57187 19.2711 5.68927 19.4774 5.89826C19.6837 6.10724 19.7996 6.39068 19.7996 6.68623V15.6012ZM10.9998 5.57187C10.1296 5.57187 9.27887 5.83329 8.55531 6.32309C7.83175 6.81288 7.2678 7.50904 6.93479 8.32354C6.60177 9.13803 6.51463 10.0343 6.68441 10.8989C6.85418 11.7636 7.27323 12.5579 7.88857 13.1812C8.5039 13.8046 9.28789 14.2292 10.1414 14.4012C10.9949 14.5732 11.8796 14.4849 12.6835 14.1475C13.4875 13.8101 14.1747 13.2388 14.6582 12.5058C15.1416 11.7727 15.3997 10.9109 15.3997 10.0293C15.3997 8.84714 14.9361 7.71337 14.111 6.87743C13.2858 6.04149 12.1667 5.57187 10.9998 5.57187ZM10.9998 12.2581C10.5647 12.2581 10.1393 12.1274 9.77754 11.8825C9.41576 11.6376 9.13379 11.2895 8.96728 10.8822C8.80077 10.475 8.7572 10.0269 8.84209 9.59453C8.92697 9.1622 9.1365 8.76508 9.44417 8.45338C9.75184 8.14169 10.1438 7.92942 10.5706 7.84343C10.9973 7.75743 11.4397 7.80157 11.8417 7.97025C12.2436 8.13894 12.5872 8.4246 12.829 8.79112C13.0707 9.15763 13.1997 9.58853 13.1997 10.0293C13.1997 10.6204 12.9679 11.1873 12.5554 11.6053C12.1428 12.0233 11.5832 12.2581 10.9998 12.2581Z" fill="%23335575"/></svg>');;    
        padding-left: 9px;
    }

    .mobile-menu .menu > li > a:hover {
        padding-left: 10px;
    }

    /* Arrow icon container */
    .menu-arrow {
        width: 32px;
        height: 32px;
        background: var(--sky-blue);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.3s ease;
        cursor: pointer;
        transition: 0.5s all;
    }
    .menu-arrow:hover {
        padding-left: 10px;
    }

    .menu-arrow svg {
        width: 20px;
        height: 20px;
        stroke: var(--accent);
        fill: none;
        transition: transform 0.1s ease;
    }
    

    /* Rotate arrow when submenu is open */
    .mobile-menu .menu > li.submenu-open > a .menu-arrow svg {
        transform: rotate(90deg);
    }

    /* Sub-menu styling - HIDDEN BY DEFAULT */
    .mobile-menu .menu .sub-menu {
        list-style: none;
        padding-left: 20px;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        opacity: 0;
        visibility: hidden;
    }

    /* ONLY show when parent has submenu-open class */
    .mobile-menu .menu > li.submenu-open > .sub-menu {
        max-height: 500px;
        padding-top: 10px;
        padding-bottom: 10px;
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu .menu .sub-menu li {
        margin-bottom: 3px;
    }

    .mobile-menu .menu .sub-menu li:last-child {
        margin-bottom: 0;
    }

    .mobile-menu .menu .sub-menu li a {
        display: block;
        padding: 10px 0;
        color: #3b5a7d;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 350;
        text-transform: none;
        transition: padding-left 0.3s ease;
    }

    .mobile-menu .menu .sub-menu li a:hover {
        padding-left: 10px;
    }

    /* Search Bar */
    .search-bar {
        margin-top: 40px;
        position: relative;
    }

    .search-bar form {
        position: relative;
    }

  

    .search-bar input[type="text"] {
        width: 100%;
        padding: 20px 50px 20px 0;
        font-size: clamp(1rem, 5vw, 1.5rem);
        color: #999;
        background: transparent !important;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-bottom: 3px solid var(--accent) !important;
        text-transform: uppercase;
        outline: none;
        font-family: var(--gp-font--gotham);
    }

    .search-bar input::placeholder {
        color: #999;
    }

    .search-icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .search-icon svg {
        width: 100%;
        height: 100%;
    }

    /* Hide default WordPress menu classes we don't need */
    .mobile-menu .current-menu-item > a,
    .mobile-menu .current_page_item > a {
        color: #2a5a7d;
    }





/* Home Hero Section */
    .home-hero-container{
    margin-top: 200px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}