// Hot Springs Marina Custom LESS

// COLORS
@primary: #080808;
@secondary: #629299;
@accent: #810000;
@muted: #f8f8f8;


// TEXT STYLES

// Headings - Montserrat
// Text - Nunito


// OVERLAY

.black_overlay {
    &-xlight {
        background: rgba(8, 8, 8, .3);
    }
  
    &-light {
        background: rgba(8, 8, 8, .5);
  
    }
  
    &-medium {
        background: rgba(8, 8, 8, .65);
    }
  
    &-dark {
        background: rgba(8, 8, 8, .8);
    }
}
  
.white_overlay {
    &-xlight {
        background: rgba(255, 255, 255, .3);
    }
  
    &-light {
        background: rgba(255, 255, 255, .5);
    }
  
    &-medium {
        background: rgba(255, 255, 255, .65);
    }
  
    &-dark {
        background: rgba(255, 255, 255, .8);
    }
}

// GLOBAL CUSTOM STYLES

.fishies {
    background-image: url(/wp-content/uploads/2025/04/fishies-800.webp);
    background-size: auto auto;
}

.uk-card {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    border-radius: 5px;
}

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

.underline-accent {
    border-bottom: 4px solid @accent;
}

.padding-remove {
    &-top {
        padding-top: 0px;
    }
    &-right {
        padding-right: 0px;
    }
    &-bottom {
        padding-bottom: 0px;
    }
    &-left {
        padding-left: 0px;
    }
}

.uk-subnav.uk-subnav-pill.light {
    li.uk-active {
        a {
            color: @primary;
            background-color: white;
        }
    }

    li a {
        border: 2px solid white;
        border-radius: 5px;
        transition: all .1s ease-in-out;
    }

    li a:hover {
        background-color: white;
        color: @primary;
    }
}

.uk-subnav.uk-subnav-pill.dark {
    li.uk-active {
        a {
            color: white !important;
            background-color: @primary !important;
        }
    }

    li a {
        border: 2px solid @primary !important;
        border-radius: 5px;
        color: @primary;
        transition: all .1s ease-in-out;
    }

    li a:hover {
        background-color: @primary !important;
        color: white !important;
    }
}

.special-slider {
    .uk-slidenav {
        color: @primary;
        border: 2px solid @primary;
        bottom: -42px;
        padding: 0px 10px;
        border-radius: 5px;

        &:hover {
            background-color: @primary;
            color: white;
        }
    }

    .uk-dotnav {
        a {
            border: 2px solid @primary;
            width: 15px;
            height: 10px;
            border-radius: 3px;
            background-color: white;

            &:hover {
                background-color: @primary;
            }
        }

        li.uk-active {
            a {
                background-color: @primary;
            }
        }
    }
}

.black-text {
    color: @primary !important;
}

// TOOLBAR STYLES

.tm-toolbar {

    padding: 5px 0px;

    .uk-container {
        max-width: 1600px !important;
    }

    p {
        font-size: 18px;
        font-weight: 700;
        transition: all .1s ease-in-out;
        color: @primary;
    }

    .uk-icon {
        position: relative;
        top: -1px;
        color: @primary;
    }

    a:hover {
        text-decoration: none;
        p {
            color: white;
            text-decoration: none;
        }
    }
}

// NAVBAR STYLES

.tm-header {
    .uk-navbar-left {
        img {
            position: absolute;
            left: 0;
            top: -34px;
            background-color: white;
            padding: 5px;
            border-radius: 5px;
            height: 80px;
            width: auto;
        }
    }
}

.uk-navbar-container {
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.uk-navbar-dropdown {
    width: 960px !important;
    right: 0 !important;
    left: unset !important;
    padding: 0px !important;
    background-color: #fff !important;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px !important;

    .uk-grid.nav-grid {
        &>div:first-child>div {
            padding: 15px 0px 15px 15px;
        }

        &>div:nth-child(2)>div {
            padding: 15px 0px 15px 0px;
        }

        &:not(.uk-grid-match)>div:last-child>div {
            padding: 15px 15px 15px 0px;
        }
    }

    .nav-heading {
        font-size: 20px;
        font-family: Montserrat;
        font-weight: 700;
        color: @primary;
        border-bottom: @accent 4px solid;
        margin-bottom: 10px;
    }

    .uk-list {
        padding-left: 0px;
    }

    ul:not(.uk-subnav.uk-subnav-pill) {
        a {
            color: @primary;

            &:hover {
                text-decoration: none;
                font-weight: 700;
            }
        }
    }
}

#brands-dropdown {
    .vertical-subnav {

        li {
            width: 100%;

            &.uk-active {
                a {
                    span:last-child {
                        color: white;
                    }
                }
            }   
        }

        a {
            display: flex;

            transition: all .1s ease-in-out;

            span:last-child {
                color: @primary;

                transition: all .1s ease-in-out;
            }

            &:hover {
                background-color: @primary;

                span:last-child {
                    color: white;
                }
            }
        }

        .image-span {
            height: 30px !important;
            width: 30px !important;
            background-color: white;
            border-radius: 5px;
            padding: 2px;
        }

        img {
            width: 26px;
            height: auto;
        }
    }
}

// MOBILE NAV STYLES

#custom_html-3 {
    .uk-nav-accordion>li>a {
        font-size: 20px;
    }

    .mobile-sub-accordion>ul>li>a {
        font-size: 20px;
    }

    .mobile-sub-accordion .uk-nav-sub {
        padding-left: 0px;
    }

    .mobile-sub-accordion .uk-nav-sub>li>a {
        font-size: 20px;
    }
}

.tm-header-mobile {
    .uk-navbar-left {
        img {
            height: 55px;
            width: auto;
            padding: 4px 4px;
            margin: 2px 0;
            background-color: white;
        }
    }
}

// Mobile Cta

@media(max-width: 960px) {
    .mobile-cta {
      position: fixed;
      top: 59px;
      left: 0;
      border-radius: 0;
      width: 102%;
      z-index: 900;
    }
  
    .mobile-cta a {
      padding: 0;
      border-radius: 0;
  
    }
  
    .mobile-cta a:nth-child(1) {
      padding: 0;
      border-radius: 0;
      border-right: 1px solid #080808;
    }
  
    .tm-main {
      margin-top: 39px;
    }
  
  }

// HEADER STYLES

.header-home {

    .black_overlay-light {
        border-top-left-radius: 5px;
    }

    .h1-target {
        span {
            display: block;

            &:last-child {
                font-size: 1.25rem;
            }
        }
    }
}

.header-inventory-archive {
    .h1-target {
        span {
            display: block;

            &:last-child {
                font-size: 1.25rem;
            }
        }
    }
}

.header-form {
    .h1-target {
        span {
            display: block;

            &:last-child {
                font-size: 1.25rem;
            }
        }
    }

    .black_overlay-medium {
        border-radius: 5px 5px 0px 0px;
    }
}

.header-mainpage {

    .h1-target {
        span {
            display: block;

            &:last-child {
                font-size: 1.25rem;
            }
        }
    }

    .black_overlay-medium {
        border-radius: 5px 5px 0px 0px;
    }
}

.header-sub {

    .h1-target {
        span {
            display: block;

            &:last-child {
                font-size: 1.25rem;
            }
        }
    }
}

.header-brand-archive {

    .h1-target {
        span {
            display: block;

            &:last-child {
                font-size: 1.25rem;
            }
        }
    }
}

// SECTION STYLES

.core-services {

    .text-overlay {
        padding-left: 30px;
        
        p {
            color: @secondary;
        }

        span {
            display: block;
            color: #fff;
            margin-left: 30px;
            transition: .3s ease-in-out all;
        }
    }

    .animation-overlay {
        position: absolute;
        height: ~"calc(100% + 40px)";
        width: 100%;
        left: 0;
        top: 40%;
        clip-path: ~"polygon(0% 0%, 100% calc(0% + 40px), 100% 100%, 0% 100%)";
        transition: .3s ease-in-out all;
    }

    a:hover {
        .animation-overlay {
            top: ~"calc(0% - 40px)";
        }

        span {
            color: @secondary;
        }
    }
}

.featured-inventory {
    .heading-card {
        width: fit-content;

        border-radius: 5px 5px 0px 0px;
        box-shadow: none;
        z-index: 1;
        padding-bottom: 0px;

        h3 {
            width: fit-content;
        }
    }

    .slider-card {
        border-top-left-radius: 0px;
    }
}

.explore-brands {
    .logo-div {
        height: 250px;
    }

    .image-div {
        padding: 10px;
        background-color: white;
        border-radius: 5px;
        img {
            width: 200px;
            height: auto;
        }
    }

    .cover-div {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: @primary;
        transition: .2s ease-in-out all;
    }

    a:hover  {
        .cover-div {
            opacity: 0%;
        }
    }
}

.half-half-section {
    .uk-cover-container {
        border-radius: 5px;

        img {
            border-radius: 5px;
        }
    }
}

.widget-menu {
    border-radius: 5px;

    &>a {
        .uk-background-primary, h4 {
            transition: all .1s ease-in-out;
        }

        &:hover {
            .uk-background-primary {
                background-color: @secondary;

                h4 {
                    color: @primary;
                }
            }
        }
    }

    .uk-background-primary {
        border-radius: 5px 5px 0px 0px;
        transition: all .1s ease-in-out;
    }

    .uk-accordion {
        border: 2px solid @secondary;
        border-top: none;
        border-radius: 0px 0px 5px 5px;

        .uk-accordion-title {
            font-size: 20px;
            color: @primary;
            padding: 4px 6px;

            &:hover {
                color: @primary;
            }
        }

        .uk-accordion-content {
            ul>li {
                margin: 0px;
                padding: 0px;

                a {
                    display: block;
                    padding: 4px 16px;
                    color: @primary;
                    transition: all .1s ease-in-out;

                    &:hover {
                        background-color: @secondary;
                    }

                    &.active {
                        background-color: @secondary;
                    }
                }
            }
        }

        &>li {
            margin: 0px;
        }
    }
}

.inventory-card {

    border-radius: 5px;

    .uk-cover-container {
        border-radius: 5px 5px 0px 0px;
    }

    .uk-background-secondary {
        border-radius: 0px 0px 5px 5px;
        padding: 10px;
    }

    .location-div {
        position: absolute;
        top: 0;
        left: 0;
        background-color: @primary;
        color: white;
        font-size: 16px;
        padding: 2px 6px;
        border-bottom-right-radius: 5px;
        transition: all .1s ease-in-out;

        .uk-icon {
            margin-right: 3px;
        }
    }

    .price-div {
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: @primary;
        color: white;
        font-size: 16px;
        padding: 2px 6px;
        border-top-left-radius: 5px;
    }
}

.inventory-grid {
    .special-slider {
        a:hover {
            text-decoration: none;

            .location-div {
                background-color: @secondary;
                color: @primary;
            }
        }
    }

    .uk-button {
        padding-right: 20px;
    }
}

.marina-services-section, .service-section, .rentals-section {
    .uk-grid a:hover {
        .black_overlay-light {
            opacity: 50%;
        }
    }

    .uk-grid {
        .black_overlay-light {
            transition: all .3s ease-in-out;
        }
    }
}

.brand-page-nav {
    border-bottom: @primary 2px solid;
    .uk-subnav {
        a {
            color: #5C5C5C;

            &:hover {
                color: @primary;
            }
        }
    }
}

// PAGE STYLES


.boat-single {
    .banner-text {
        padding: 5px;
        line-height: 1rem;
        color: @primary;
        border-radius: 5px;
    }
    
    .banner-text-padding {
        padding-top: 28px;
    }
    
    .under-title-meta {
        p {
            color: white !important;
        }
        &>*:not(.uk-first-column)::before {
            border-left-color: white !important;
        }
    }
    
    .uk-button-default:hover {
        background-color: white !important;
        color: @primary !important;
    }

    .uk-thumbnav {
        li {
            height: 38px;
            position: relative;
            overflow: hidden;

            &.uk-active {
                &::after {
                    content: '';
                    position: absolute;
                    width: calc(100% - 17px);
                    height: 34px;
                    border: 2px solid @primary;
                    top: 0;
                    right: 0;
                    z-index: 1;
                }

                a {
                    border: none !important;
                }
            }
        }
    }

    .form-container {
        .gform_wrapper {
            label {
                color: white;
            }
            legend {
                color: white;

                span.gfield_required {
                    color: #F44F2A;
                }
            }

            .horizontal-form-buttons {
                .gfield_checkbox  {
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: unset !important;
                    gap: 10px !important;
                
                    &>* {
                        width: calc(50% - 20px);
                    }
                }
            }

            .gform_fields {
                row-gap: 0px;
            }

            #gform_fields_7, #field_7_1 {
                height: fit-content;
            }

            .gfield:not(.gfield_visibility_hidden):not(:last-child):not(.spacer) {
                padding-bottom: 10px;
            }

            .textarea {
                min-block-size: 80px !important;
                height: 80px;
            }

            .gform-theme--api, .gform-theme--framework {
                --gf-color-danger: #F44F2A;
            }
        }
    }

    .uk-slidenav {
        background-color: @primary;
        color: white;
        padding: 5px 20px 5px 20px;
        border: 2px solid @primary;
        transition: all .1s ease-in-out;

        &.uk-position-bottom-left {
            border-radius: 0px 5px 0px 0px;
        }

        &.uk-position-bottom-right {
            border-radius: 5px 0px 0px 0px;
        }
    }

    .uk-thumbnav {
        .uk-active {
            a {
                border: @primary 2px solid;
            }
        }

        a {
            border: 2px solid transparent;
        }
    }

    .uk-subnav.uk-subnav-pill {
        li {
            a {
                background-color: white;
                color: @primary;
                border-radius: 5px;
                display: block;
                padding: 10px;
                transition: all;
                border: 2px solid @primary;
                font-weight: 600;

                &:hover {
                    background-color: @primary;
                    color: white;
                }
            }
        }
    }

    #specs {
        
        li {
            padding: 6px 5px;
        }

        @media (min-width: 1200px) {
            .uk-grid-divider {
                margin-left: -40px;
            }
            .uk-grid-divider>div {
                padding-left: 40px;
            }

            .uk-grid-divider > :not(.uk-first-column)::before {
                left: 20px;
                border-color: rgba(8,8,8,.5);
            }
        }
    }

    .see-more-specs {
        padding: 3px 20px;
        border: 2px solid @primary;
        transition: all .1s ease-in-out;

        &:hover {
            color: @primary;
            background-color: white;
            text-decoration: none;
        }
    }
}

// INVENTORY ARCHIVE

:root {
    --mm-cta-view-boat-bg: @primary;
    --mm-cta-view-boat-bg-hover: @primary;
    --mm-cta-view-boat-text: white;
    --mm-cta-check-availability-bg: var(--mm-cta-view-boat-bg);
    --mm-cta-check-availability-bg-hover: var(--mm-cta-view-boat-bg-hover);
    --mm-cta-check-availability-text: var(--mm-cta-view-boat-text);
    --mm-usage-badge-bg: @primary;
    --mm-usage-badge-shadow: transparent;
    --mm-usage-badge-text: white;
    --mm-title-link-hover: @secondary;
    --mm-monthly-payment-link: darken(@primary, 20%);
    --mm-cta-request-pricing-bg: @primary;
    --mm-cta-request-pricing-shadow: @primary;
    --mm-cta-request-pricing-bg-hover:darken(@primary, 20%);
    --mm-cta-request-pricing-text: #fff;
    --mm-featured-bg:  @secondary;
    --mm-featured-text: white;
    --mm-featured-card-gradient-to-100: @secondary;
    --mm-featured-card-gradient-via-50: @muted;
    --mm-filter-accent: darken(@primary, 20%);
    --mm-cta-show-more-bg: @primary;
    --mm-cta-show-more-bg-hover: darken(@primary, 20%);
    --mm-cta-show-more-text: white;
  }

// Empty State Fix
.hits-empty-state {
    text-align: center;
  
    svg {
      display: inline-block;
      margin: 0 auto;
    }
  
    .hits-empty-state-title {
      color: @primary;
    }
  
    .hits-empty-state-description {
      color: @primary;
    }
}

#root {
    &>div>.bg-white {
        background-color: transparent;
    }
}

// FOOTER STYLES

#footer {
    .uk-accordion:not(.sub-accordion) {
        &>li>.uk-accordion-title {
            font-size: 22px;
        }

        &>:nth-child(n+2) {
            margin-top: 10px;
        }

        .uk-accordion-content {
            padding-left: 20px;
        }
    }

    .uk-accordion.sub-accordion {
        .uk-accordion-title {
            font-size: 20px;
        }

        &>:nth-child(n+2) {
            margin-top: 10px;
        }
    }

    .uk-accordion-content {
        margin: 10px 0px;
    }

    img {
        padding: 5px;
        background-color: white;
        border-radius: 5px;
    }
}

// GRAVITY FORM STYLES

.gform_wrapper {
    .gsection_title {
        margin-bottom: 0px;
    }
    
    .gsection {
        padding-bottom: 0px !important;
    }
    
    .horizontal-form-buttons {
        .gfield_checkbox  {
            display: flex;
            flex-direction: unset !important;
            gap: 20px !important;
    
            &>* {
                width: auto;

                label {
                    max-width: unset !important;
                }
            }
        }
    
        .gfield_radio {
            display: flex;
            flex-direction: unset !important;
            gap: 20px !important;
    
            &>* {
                width: auto;
            }
        }
    }
    
    .column-2-form-buttons {
        .gfield_checkbox {
            display: flex;
            flex-direction: unset !important;
            gap: 20px !important;
            flex-wrap: wrap;
            
            &>* {
                width: calc(50% - 20px);
            }
        }
    }
    
    .gform-footer {
        justify-content: center !important;
        margin-top: 10px !important;
    }
    
    .gform_button {
        margin: 0 !important;
        border: none !important;
        overflow: visible !important;
        font: inherit !important;
        color: inherit !important;
        -webkit-appearance: none !important;
        border-radius: 0 !important;
        display: inline-block !important;
        box-sizing: border-box !important;
        padding: 0 30px !important;
        vertical-align: middle !important;
        font-size: 1em !important;
        line-height: 38px !important;
        text-align: center !important;
        text-decoration: none !important;
        text-transform: none !important;
        transition: 0.1sease-in-out !important;
        transition-property: color, background-color, border-color !important;
        border-radius: 5px !important;
        background-color: @secondary !important;
        color: @primary !important;
    
        &:hover {
            background-color: #44666a !important;
            color: white !important;
        }
    }
            
    .gform-theme--api, .gform-theme--framework {
        --gf-ctrl-accent-color: @secondary !important;
        --gf-ctrl-outline-color-focus: rgba(0, 174, 239, .65) !important;
        --gf-ctrl-border-color-focus: @secondary !important;
        --gf-ctrl-choice-check-color: @primary !important;
    }
}