// Longmont Social Custom Less

// Colors
@primary: rgb(8, 8, 8);
@secondaryLight: #36E723;
@secondary: #FFD700;
@secondaryDark: #125C0A;
@muted: #f8f8f8;

// Fonts
// Heading: Montserrat
// Paragraphs & Links: Open Sans

// Overlays
.black_overlay {
    &-xlight {
        background: rgba(0, 0, 0, .3);
    }
  
    &-light {
        background: rgba(0, 0, 0, .5);
    }
  
    &-medium {
        background: rgba(0, 0, 0, .65);
    }
  
    &-dark {
        background: rgba(0, 0, 0, .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);
    }
  }

  .primary_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);
    }
  }

  .secondary_overlay {
    &-xlight {
        background: rgba(31, 150, 18, .3);
    }
  
    &-light {
        background: rgba(31, 150, 18, .5);
    }
  
    &-medium {
        background: rgba(31, 150, 18, .65);
    }
  
    &-dark {
        background: rgba(31, 150, 18, .8);
    }
  }

// Child Theme Fixes



// Global Styles

.uk-padding-remove {
    &-top {
        padding-top: 0px;
    }

    &-right {
        padding-right: 0px;
    }

    &-bottom {
        padding-bottom: 0px;
    }

    &-left {
        padding-left: 0px;
    }
}

.border-primary {
    border: @primary 2px solid;
}

.border-radius{
    &-remove-tops {
        border-top-left-radius: unset !important;
        border-top-right-radius: unset !important;
    }

    &-remove-bottoms {
        border-bottom-left-radius: unset !important;
        border-bottom-right-radius: unset !important;
    }


    &-10 {
        border-radius: 10px;
    }

    &-15 {
        border-radius: 15px;
    }

    &-15-image {
        img {
            border-radius: 15px;
        }
    }

    &-20 {
        border-radius: 20px;
    }
}

.overflow-hidden {
    overflow: hidden;
}

.underline-accent {
    position: relative;
    width: fit-content;

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: ~"calc(100% + 50px)";
        height: 2px;
        background-color: @secondary;
    }
}

.picture-accent {
    position: relative;
}

.uk-slidenav {
    svg {
        height: unset !important;
        width: unset !important;
        color: white;
    }
    
    margin: 0px;
    bottom: -42px;
}

.card-shadow {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.secondary-line {
    border-color: @secondary;
    border-width: 2px;
}

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

// Background Images

.axe-background {
    background-size: 500px auto;
}

.leafy-background {
    background-size: 1500px auto;
}

.bubble-background {
    background-size: 500px auto;
}

.tea-background {
    background-size: 400px auto;
}

.silverware-background {
    background-size: 500px auto;
}

.work-background {
    background-size: 400px auto;
}

.stay-background {
    background-size: 300px auto;
}

// Toolbar Styles

.tm-toolbar .uk-container {
    max-width: 1600px;

    #custom_html-2 {
        svg {
            transition: all .2s ease-in-out;
        }

        p {
            transition: all .2s ease-in-out;
        }

        a:hover {
            text-decoration: none;

            svg {
                transform: scale(1.25);
            }

            p {
                color: @secondary;
            }
        }

        .uk-grid>div {
            padding-left: 15px;
        }
    }
}

// Navbar Styles

.tm-header {
    .uk-navbar-left {
        img {
            width: 150px;
            height: auto;
            position: absolute;
            top: -30px;
            left: 0;

            padding: 1px;
            // background-color: white;
            // border-radius: 50%;
        }
    }

    @media(max-width:1110px) {
        .uk-navbar-left img {
            width: 100px;
        }
    }

    @media(max-width:1060px) {
        .uk-navbar-nav {
            gap: 10px;
        }
    }

    @media(max-width:1010px) {
        .uk-navbar-left img {
            top: -25px;
            width: 75px;
        }
    }

    .uk-navbar-dropdown {
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
}

.tm-header-mobile {
    .uk-navbar-left {
        img {
            position: absolute;
            top: 2px;

            height: 56px;
            width: auto;
            padding: 1px;
            background-color: white;
            border-radius: 50%;
        }
    }
}

// Mobile Nav

#custom_html-3 {
    .toggle_sub {
        display: none !important;
      }
    
      .uk-nav-sub:not(.hidden) {
        max-height: unset !important;
      }
    
      .uk-nav.uk-nav-primary {
        font-size: 20px;
    
        .uk-nav-sub {
            font-size: 18px;
            padding-left: 20px !important;
        }
      }
    }

// Header Styles

.heading-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    height: 80%;

    svg {
        height: 100%;
        width: auto;
    }
}

.home-header {

    .h1-target {

        font-size: 2rem;

        span {
            display: block;

            &:nth-child(2n) {
                font-size: 1.5rem;
            }
        }
    }
}

.main-header {

    .h1-target {

        font-size: 1.75;

        span {
            display: block;

            &:nth-child(2n) {
                font-size: 1.25rem;
            }
        }
    }
}

.sub-header {

    .h1-target {

        font-size: 1.75;

        span {
            display: block;

            &:nth-child(2n) {
                font-size: 1.25rem;
            }
        }
    }
}

.other-header {
    h1 {
        position: relative;
        width: fit-content;
        padding-bottom: 8px;

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 150%;
            height: 4px;
            background-color: @secondary;
        }
    }

    
}

// Section Styles

.core-services {

    svg {
        height: 100px;
        width: auto;
    }

    .height-match {
        overflow: hidden;
    }

    .animation-div {
        bottom: -100%;
        position: absolute;
        height: ~"calc(100% - 30px)";
        width: ~"calc(100% - 30px)";
        background-color: @primary;
        transition: all .2s ease-in-out;
    }

    a:hover {
        .animation-div {
            bottom: 0;
        }
    }
}

.home-first-section {
    iframe {
        aspect-ratio: 1.77;
    }

    .logo-div {
        opacity: 30%;
        position: absolute;
        height: 100%;

        img {
           height: 100%;
        }
    }
}

.frontpage-map-hours {

    .padding-top-bottom {
        padding: 40px 0px;
    }

    @media(min-width: 961px) {
        ul li {
            padding-right: 20px;
        }
    }
}

.games-entertainment {
    .height-match {
        border: 2px solid @primary;
        border-top: none;
        overflow: hidden;
    }

    svg {
        height: 100px;
        width: auto;
    }

    .animation-div {
        bottom: -100%;
        position: absolute;
        height: ~"calc(100% - 30px)";
        width: ~"calc(100% - 30px)";
        background-color: @primary;
        transition: all .2s ease-in-out;
    }

    a:hover {
        .animation-div {
            bottom: 0;
        }
    }
}

.last-section {

    .lastSection-video {

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: 100%;
        overflow: hidden;

        img {
            width: 100%;
        }
    }
}

.things-to-do {
    .uk-card {
        border-radius: 20px;
    }

    a:hover {
        text-decoration: none !important;
    }
}

// Page Styles

#menu {
    .title {
        font-weight: 700;
        font-size: 20px;
    }
}

#subpage {
    .subpage-icon {
        position: absolute;
        bottom: 20px;
        right: 20px;

    }

    .widget-menu {

        a:hover {
            color: @secondary;
            text-decoration: none;
        }
        
        li {

            margin: 0px;
            padding: 0px;

            a {
                display: block;
                padding: 8px 16px;
                color: white;
            }
        }
    }
}

#contact {
    .company-info {
        a {
            color: @primary;
        }
    }

    .gform_footer {
        justify-content: center;

        .button {
            color: @primary;
        }
    }
}

// Footer Styles

#footer {
    p {
        font-size: 18px;
    }

    a:hover {
        color: @secondary;
        text-decoration: none;
    }

    .margin-top-10 {
        margin-top: 10px;
    }

    .uk-accordion {
        margin-top: 10px;

        .uk-accordion-title:before {
            height: 25px;
            width: 25px;
        }

        ul {
            padding-left: 0px;

            li {
                margin-top: 10px;
            }
        }
    }

    img {
        width: 250px;
    }

    .uk-panel.padding {
        @media(max-width: 960px) {
            padding: 0px 40px;
        }
    }
}

// SVG Styles

.skip {
    fill: none !important;
}

.parties-events-2, .axe-throwing-1, .vr-golf-simulators-1, .cls-1:not(.skip), .watch-sports-1, .live-music-entertainment-2, .live-music-entertainment-3, .indoor-outdoor-patio-2, .indoor-outdoor-patio-3, .dog-friendly-1, .tap-room1, .food-drink-1, .work-1, .sleep-1, .games-entertainment-1, .kava-bar-1, .vr-escape-room-1 {
    fill: black !important;
}

#subpage {

    .sub-header {
        svg {
            width: 200px;
            height: auto;
        }
    }


    .parties-events-2, .axe-throwing-1, .vr-golf-simulators-1, .cls-1:not(.skip), .watch-sports-1, .live-music-entertainment-2, .live-music-entertainment-3, .indoor-outdoor-patio-2, .indoor-outdoor-patio-3, .dog-friendly-1, .tap-room1, .food-drink-1, .work-1, .sleep-1, .games-entertainment-1, .kava-bar-1, .vr-escape-room-1, .cls-2:not(.skip) {
        fill: #1F1F1F !important;
    }
}

// Updates 2024-8-13
article {
	background-color: #080808;
	background-attachment: fixed;

    .uk-section-primary {
        &.axe-background {
            background-color: transparent;
        }
        &.leafy-background {
            background-color: transparent;
        }
        &.bubble-background {
            background-color: transparent;
        }
        &.tea-background {
            background-color: transparent;
        }
        &.silverware-background {
            background-color: transparent;
        }
        &.work-background {
            background-color: transparent;
        }
        &.stay-background {
            background-color: transparent;
        }
        &.core-services {
            background-color: transparent;
        }
    }

    &.axe-background {
        background-size: 500px auto;
    }
    &.leafy-background {
        background-size: 1500px auto;
    }
    &.bubble-background {
        background-size: 500px auto;
    }
    &.tea-background {
        background-size: 400px auto;
    }
    &.silverware-background {
        background-size: 500px auto;
    }
    &.work-background {
        background-size: 400px auto;
    }
    &.stay-background {
        background-size: 300px auto;
    }
}