/* GLOBAL */
:root {
    /* COLORS */
    --bs-primary: #c99d26;
    --bs-primary-light: #ffd862;
    --bs-primary-dark: #866620;
    --bs-body: #f7f7f7;

    /* FONTS */
    --bs-font-sans-serif: "Libre Bodoni", serif;
}

/* FONTS */
.font-sans-serif,
.libre-bodoni-regular {
    font-family: var(--bs-font-sans-serif);
    font-weight: 400; /* Variable Font - any weight axis from 400 to 700 */
    font-style: normal;
}

.display-1, .display-2, .display-3, .display-4,
h1, h2, h3, h4,
.fs-1, .fs-2 {
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
}

/* BACKGROUND */
.bg-dots-dark {
    background-image: radial-gradient(
            circle at 2px 2px,
            currentColor 1px,
            var(--bs-extra-dark) 0
    );
}

/* BORDERS */
.border-gradient-top,
.border-gradient-bottom {
    --border-gradient-direction: to bottom;
    --border-gradient-width: 1px;
    --border-gradient-bg: var(--bs-body);
    --border-gradient-color: var(--bs-primary);
    --star-image: url(/media/pdfs/upload/star_gold.svg);
    border: var(--border-gradient-width) solid transparent;
    background: linear-gradient(var(--border-gradient-bg), var(--border-gradient-bg)) padding-box,
    linear-gradient(var(--border-gradient-direction), var(--border-gradient-color), transparent) border-box;

    background: linear-gradient(var(--border-gradient-bg), var(--border-gradient-bg)) padding-box,
    radial-gradient(circle at center 20%, rgb(from var(--border-gradient-color) calc(r + 10) calc(g + 10) calc(b + 10)), var(--border-gradient-color), transparent) border-box;
    position: relative;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2rem;
        height: 2rem;
        background-image: var(--star-image),
        radial-gradient(circle, rgba(from var(--border-gradient-color) r g b / 0.7) 10%, transparent 70%);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    &.bg-dark {
        --border-gradient-bg: var(--bs-dark);
    }

    &.bg-extra-dark {
        --border-gradient-bg: var(--bs-extra-dark);
    }

    &.bg-white {
        --border-gradient-bg: var(--bs-white);
    }

    &.bg-primary {
        --border-gradient-bg: var(--bs-primary);
        --border-gradient-color: var(--bs-black);
        --star-image: url(/media/pdfs/upload/star.svg);
    }

    &.bg-primary-light {
        --border-gradient-bg: var(--bs-primary-light);
        --border-gradient-color: var(--bs-primary-light);
        --star-image: url(/media/pdfs/upload/star.svg);
    }

    &.bg-primary-dark {
        --border-gradient-bg: var(--bs-primary-dark);
        --border-gradient-color: var(--bs-primary-dark);
    }

}

.border-gradient-bottom {
    --border-gradient-direction: to top;

    &::before {
        top: 100%;
    }
}

/* BUTTONS */
.btn {
    text-transform: uppercase;
}

.btn.btn-primary {
    background: linear-gradient(to bottom, var(--bs-primary-light) 30%, var(--bs-primary) 100%);
    transition: filter 0.3s ease;
}

.btn.btn-primary:hover {
    filter: brightness(1.1);
}

.btn.btn-outline-primary {
    border-color: var(--bs-primary);
    border-width: 2px;
    color: var(--bs-primary);
    background: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn.btn-outline-primary:hover {
    background-color: var(--bs-primary);
    color: white;
}

/* DIVIDERS */
.divider {
    position: relative;
    width: 100%;
    z-index: 2;
}

.divider img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.divider.-down img {
    bottom: unset;
    top: -1px;
    transform: rotate(180deg);
}

/* HERO */
.section.section-hero {
    background-color: #000;
    background-image: linear-gradient(to bottom, #00000031 50%, #000000c0 90%),
    url('/media/pdfs/upload/Gold-King-arizona-mountains-background-2.webp'),
    linear-gradient(#000, #000) !important;
    background-size: contain !important;
    background-position: bottom !important;
}

.site-header__secondary__info {
    flex-direction: column !important;
}

.site-header__secondary__info > ul {
    margin-bottom: 0;
}

.header .custom-logo-link {
    --logo-width: 100px;
    width: var(--logo-width);
    height: var(--logo-width);
    object-fit: contain;
}

@media (width >= 992px) {
    .header .custom-logo-link {
        --logo-width: 130px;
        margin-top: -60px;
    }
}

@media (width >= 1200px) {
    .header .custom-logo-link {
        --logo-width: 150px;
    }

    .hero-carousel__slide > [class*="col-"]:first-child {
        padding-right: 2rem;
    }

    .section-hero .heading-block-body {
        font-size: 1.5rem;
        text-wrap: balance;
    }
}

.header-middle .search-box .awesomplete .form-control {
    background: transparent;
    color: white;
    border-right: none;
}

.header-middle .search-box .btn {
    background: transparent;
    border-color: white;

    svg {
        filter: invert(1);
    }
}

.site-header__secondary__info {
    display: none !important;
}

.site-header + section.section-hero, .site-header + main > section:first-of-type.section-hero {
    padding-top: 170px !important;
}

@media (width < 992px) {
    .header-top {
        align-items: start !important;
        padding-top: .5rem;
        height: 43px;
    }

    .header-middle {
        height: 110px;
    }

}

@media (width >= 992px) {
    .header-top > .container > .row {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: end !important;
    }

    .site-header__secondary__info {
        display: block !important;
        align-items: end !important;
    }

    .site-header__secondary__prices {
        display: none !important;
    }

    .section-hero .section-hero-content {
        min-height: 500px
    }

    .site-header + section.section-hero, .site-header + main > section:first-of-type.section-hero {
        padding-top: 110px !important;
    }
}

@media (width >= 1460px) {
    .header-top > .container > .row {
        flex-direction: row !important;
        justify-content: end !important;
        align-items: center !important;
        flex-wrap: nowrap;
    }

    .site-header__secondary__info { /* REMOTE THIS LATER */
        width: auto !important;
    }

    .site-header + section.section-hero, .site-header + main > section:first-of-type.section-hero {
        padding-top: 200px !important;
    }
}

@media (width >= 1700px) {
    .site-header + section.section-hero, .site-header + main > section:first-of-type.section-hero {
        padding-top: 250px !important;
    }
}

/* FOOTER */
.site-footer {
    background-color: black;
}

@media (width >= 1460px) {
    .footer__links-container {
        flex-wrap: nowrap;
    }
}