/* Global colors */
.text-dark-black { color: #042215; }
.text-dark-green { color: #073823; }
.text-bg-green { color: #00663B; }
.text-green { color: #486D56; }
.text-light-green { color: #B5C3BD; }
.text-yellow { color: #FFCB5A; }
.text-pure-white { color: #FFFFFF; }
.text-red { color: #FF383C; }

.bg-dark-green { background-color: #073823; }
.bg-green { background-color: #00663B; }
.bg-yellow { background-color: #FFCB5A; }
.bg-input-field { background-color: #E0E7CC; }
.bg-input-form { background-color: #FFFBF6;}
.bg-white { background-color: #FFFFFF; }


body {
    font-family: 'FunnelSans', sans-serif;
}

.navbar-brand .logo {
    height: 52px;
}

.toggler-icon {
  transition: opacity .5s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #FFCB5A;
    color: #042215 !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-link.active {
  color: #FFCB5A !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn.button-contacts:hover,
.btn.button-contacts:focus {
    background-color: #FFCB5A;
    box-shadow: 0 0 30px #FFCB5A;
    transition: box-shadow 0.2s ease, 
                border-color 0.2s ease,
                background-color 0.2s ease;
}

.btn.bg-green:hover,
.btn.bg-green:focus {
    background-color: #00663B;
    color: #FFCB5A;
    box-shadow: 0 0 30px #00663B;
    transition: box-shadow 0.2s ease, 
                border-color 0.2s ease,
                background-color 0.2s ease;
}

.navbar-button-element {
    border-radius: 12px;
    padding: 10px 16px;
}

.border-yellow {
    border: 1px solid #FFCB5A;
}



footer {
    background-color:#073823
}

footer hr {
    border: 1px solid #E0E7CC;
}

.font-size-18 {
    font-size: 18px;
}

.services-personas-vietas,
.services-personas-pavadzimes,
.services-personas-sortimenta-sagatavosana {
    position: relative;
    overflow: hidden; /* ensures the overlay stays inside */
}

/* Shared background overlay rules */
.services-personas-vietas::before,
.services-personas-pavadzimes::before, 
.services-personas-sortimenta-sagatavosana::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.2;
    z-index: 0;
}

/* Unique images */
.services-personas-vietas::before {
    background-image: url('/images/vietas.webp');
}

.services-personas-pavadzimes::before {
    background-image: url('/images/pavadzimes.webp');
}

.services-personas-sortimenta-sagatavosana::before {
    background-image: url('/images/krautuve.webp');
}

/* Content should sit above the opacity layer */
.services-personas-vietas > *,
.services-personas-pavadzimes > *,
.services-personas-sortimenta-sagatavosana > * {
    position: relative;
    z-index: 1;
}

.mark-highlight {
    background-color: #FFCB5A;
    padding: 0 2px;
    border-radius: 3px;
}

/* Modal image wrapper to maintain aspect ratio */
.image-wrapper {
    width: 100%;
    padding-top: 100%; /* 1:1 aspect ratio */
    position: relative;
    overflow: hidden;
}

/* Modal image styling */
.modal-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* crop to fill container */
}

.map {
    height: 640px;
    width: 100%;
}

.cursor-pointer {
    cursor: pointer;
}

@media (max-width: 992px) {
    .navbar-brand .logo{
        height: 40px;
    }

    .navbar-button-element {
        border-radius: 12px;
        padding: 12px;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .lead-text {
        font-size: 1.1rem;
        font-weight: 300;
    }
}

/* Footer background image for md and larger screens */
@media (min-width: 768px) {
    body {
        background-image: url(/images/background_trees_bottom.svg);
        background-repeat: repeat-x;
        background-position: center bottom;
        background-size: auto 600px;
    }
}

@media (max-width: 767px) {
    footer {
        background-color: unset;
    }

    footer h6 {
        color: #00663B !important;
    }

    footer a {
        color:#073823 !important
    }

    footer small {
        color: #042215 !important;
    }
}