/**
 * 
 * Navbar background/gradient/transparency
 * 
 **/
body.home #masthead {
    background: transparent !important;
    box-shadow: none;
}
body.home #masthead #nav-main {
    background: transparent;
}
/* Force the homepage content behind the navbar */
body.home .dpi-carousel {
    margin-top: -90px;
}
body.home .dpi-carousel .carousel-item {
    padding-top: 200px;
}
body.home #nav-main {
    --nav-main-mix: 0; /* 0 = full gradient, 1 = solid color */
    background:
        /* Layer 1 (solid): fades in */
        linear-gradient(
            to bottom,
            rgba(30, 30, 30, calc(var(--nav-main-mix) * 1)) 0%,
            rgba(30, 30, 30, calc(var(--nav-main-mix) * 1)) 100%
        ),
        /* Layer 2 (original gradient): fades out */
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.75) 0%,
            transparent 90%,
            transparent 100%
        ) !important;

    background-blend-mode: normal;
    transition: background 0.05s linear; /* tiny smoothing */
}

/**
 * 
 * Misc. Global Elements
 * 
 */
.header-actions {
    margin-left: 40px;
}
.woocommerce {
    margin-top: 0;
}
:root {
    --bs-dark-rgb: 20, 20, 18;
}
.header-actions .sign-in .btn:hover,
.header-actions .sign-in .btn:focus {
    color: #fff !important;
    opacity: .8;
}

/**
 * 
 * Curved underline
 * 
 * <span class="curve-underline"><span class="curve-text">Hello</span></span>
 */
.curve-underline {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.curve-text {
    position: relative;
    z-index: 1;
}

/* Underline attached to the TEXT span */
.curve-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -40px; /* adjust underline distance */
    width: 100%;
    height: 40px;

    pointer-events: none;

    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;

    background-image: url("data:image/svg+xml,%3Csvg width='800' height='60' viewBox='0 0 800 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 40 C 250 10, 550 10, 770 40' stroke='%23e18572' stroke-width='24' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}