// Your Saint Nick Custom Less

// Colors
@primary: rgb(6, 64, 43);
@primaryLight: #0A704B;
@secondary: #8B0000;
@secondaryLight: #F50000;

// Fonts
// Headings - Playfair Display
// Text - Lato

// Overlays

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

.primary_overlay {
    &-xlight {
      background: rgba(6, 64, 43, .3);
    }
  
    &-light {
      background: rgba(6, 64, 43, .5);
    }
  
    &-medium {
      background: rgba(6, 64, 43, .65);
    }
  
    &-dark {
      background: rgba(6, 64, 43, .8);
    }
}

// Headers

.home-header {
    .h1-target {
        span {
            display: block;
            font-size: 2.5rem;
        }

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

    .candy-cane-bar-top {
        width: 100%;
        height: 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .candy-cane-bar-bottom {
        width: 100%;
        height: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
}

.main-header {
    .h1-target {
        span {
            display: block;
            font-size: 2rem;
        }

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

    .primary_overlay-medium {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }


}

.sub-header {
    .h1-target {
        span {
            display: block;
            font-size: 2rem;
        }

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

    .uk-button {
        line-height: 40px;
        border: 2px solid @secondary;

        &:hover {
            border: 2px solid white;
        }
    }
}

// Toolbar
.tm-toolbar {
    
}

// Navbar {

.uk-navbar-dropdown {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

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

@media(min-width: 960px) {
    .uk-navbar-left {
        width: 280px;
        position: absolute;
        left: 0;
        top: -47px;        

        img {
            width: 100%;
        }
    }
}

// Mobile Toolbar
#tm-dialog-mobile {
    background-color: @primary !important;
    color: white;

    a {
        color: white;
    }

    .uk-nav-sub {
        padding-left: 20px !important;

        a:hover {
            text-decoration: underline;
        }
    }

    li:not(.has-children) {
        a {
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

// Global Custom Style

.social-button {
    width: 40px;
    padding: 0px;
}

.opacity {
    &-75 {
        opacity: 75%;
    }
}

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

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

.image-border {
    padding: 10px;
    border-radius: 10px;

    img {
        border-radius: 10px;
    }
}

.candy-cane-background {
    background-image: linear-gradient(45deg, #8B0000 25%, #ffffff 25%, #ffffff 50%, #8B0000 50%, #8B0000 75%, #ffffff 75%, #ffffff 100%);
    background-size: 56.57px 56.57px;
}

.candy-cane-background-reverse {
    background-image: linear-gradient(135deg, #8B0000 25%, #ffffff 25%, #ffffff 50%, #8B0000 50%, #8B0000 75%, #ffffff 75%, #ffffff 100%);
    background-size: 56.57px 56.57px;
}

.candy-cane-background-thick {
    background-image: linear-gradient(135deg, #8b0000 25%, #ffffff 25%, #ffffff 50%, #8b0000 50%, #8b0000 75%, #ffffff 75%, #ffffff 100%);
    background-size: 113.14px 113.14px;
}

.test-background {
    background-size: 800px auto !important;
}

// Section Styles

.core-services {
    .gift-tag {
        position: relative;
        transition: all ease-in-out .3s;
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 22px;
        }

        &.tag-1 {
            p {
                transform: translate(-82%, -50%);
                text-align: center;
            }
        }
        
        &.tag-2 {
            p {
                transform: translate(-84%, -70%);
                text-align: center;
            }
        }

        &.tag-3 {
            p {
                transform: translate(-79%, -68%);
                text-align: center;
            }
        }
    }

    a:hover {
        .gift-tag {
            transform: rotate(-35deg);
        }
    }
}

.santas-offerings {
    .uk-background-primary {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .list-container {
        border: solid 4px @secondary;
        border-top: none;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    a:hover {
        .list-image {
            transform: rotate(45deg);
        }
    }

    .list-image {
        transition: all ease-in-out .3s;
        img {
            width: 25px;
        }
    }
}

.cta-bar {
    .uk-button {
        line-height: 40px;
        border: 2px solid @secondary;

        &:hover {
            border: 2px solid white;
        }
    }
}

.child-pages-grid {
    .present-title {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%, 0%);
        padding: 10px;
        background-color: @primary;
        width: 60%;
        border-radius: 20px;
    }

    a {
        .rotate {
            transition: all ease-in-out .3s;
        }
        
        &:hover {
            
            .rotate {
                transform: rotate(-30deg);
            }
        }
    }
}

.child-pages-grid-alternate {
    a {
        img {
            height: 100px;
            transition: all ease-in-out .3s;
        }

        .border-container {
            border: 4px solid @primary;
            border-radius: 20px;
            transition: all ease-in-out .3s;
            background-color: white;
        }
    }

    a:hover {

        img {
            transform: rotate(-10deg);
        }

        .border-container {
            border-color: @secondary;
        }
    }
}

.subpage-content-container {
    .card-shadow {
        background-color: white;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

        p {
            margin-bottom: 0px;
        }
    }
}

.widget-menu {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

    h3 {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    li a {
        display: block;
        padding: 8px 10px;
    }

    .uk-background-default {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

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

    li {
        margin: 0px !important;
        padding: 0px;
    }

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

    li:last-child {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;

        a {
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }
    }
}

.gallery-section {

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

    a:hover {
        .black_overlay-light {
            opacity: 0%;
        }
    }
}

.contact {
    .card-shadow {
        background-color: white;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

        p {
            margin-bottom: 0px;
        }
    }
}

// Footer

#footer {

    h3:after {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background-color: white;
    }

    .footer-list-padding {
        padding-left: 15px;
    }

    .footer-subtitle {
        font-size: 20px;
    }

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

            ul>li:first-child {
                margin-top: 0px;
            }
        }
    }

    .social-icon {
        span {
            transition: all ease-in-out .2s;
            padding: 5px;
            background-color: white;
            border: 2px solid white;
            border-radius: 50%;
        }

        svg {
            transition: all ease-in-out .2s;
            fill: @secondary;
        }

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

            svg {
                fill: white;
            }
        }
    }

    ul.uk-list:not(.icon-list) {
        li {
            margin-top: 5px;
        }
    }

    img {
        width: 100%;
        padding: 10px;
        background-color: white;
        border-radius: 20px;
    }
}