/* Anpassad CSS för Kommunmarknad-färger */

html, body {
    font-family: 'Century Gothic', Helvetica, Arial, sans-serif;
    background: linear-gradient(180deg, #f9f9f2 0%, #eaf2e4 50%, #d8e6d0 100%); /* Ljus beige till svagt grön gradient */
    color: #4a4a4a; /* Mörk textfärg för bättre kontrast */
}

a, .btn-link {
    color: #5a7f5d; /* Nedtonad grön färg inspirerad av "Kommunmarknad" texten */
    text-decoration: none;
}

    a:hover, .btn-link:hover {
        color: #3f6545; /* Mörkare grön vid hover */
    }

.btn-primary {
    color: #b34a22; /* Brunröd färg för bättre synlighet */
    background-color: transparent; /* Ingen bakgrund för att visa endast pilen */
    border: none; /* Ta bort kantlinjen */
    font-size: 1.2rem; /* Öka storlek för text */
}

    .btn-primary:hover {
        color: #5a7f5d; /* Svag grön vid hover */
    }

.content {
    padding-top: 1.1rem;
    background-color: #ffffff; /* Neutral vit bakgrund */
    border-radius: 12px; /* Mer rundade hörn för modern design */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lätt skugga för djup */
}

.navbar {
    background: linear-gradient(180deg, #f9f9f2 0%, #eaf2e4 50%, #d8e6d0 100%); /* Ännu mjukare gradient med vitbeige och svagt grön */
    color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Tunnare och diskret gräns */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

    .navbar .nav-link {
        color: #4a4a4a; /* Neutral mörkgrå text */
        font-size: 1rem;
        text-align: center;
        flex: 1;
        padding: 0.5rem;
    }

        .navbar .nav-link:hover {
            color: #287f43; /* Subtil grön vid hover */
        }

footer {
    background: linear-gradient(180deg, #d8e6d0 0%, #eaf2e4 100%); /* Gradient som matchar navbaren men inverterad */
    color: #4a4a4a; /* Neutral mörkgrå text */
    padding: 1rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* Tunn och diskret gräns */
    display: flex; /* Lägg till flexbox för att förhindra radbrytning */
    justify-content: space-around; /* Jämnt mellanrum mellan ikoner */
}

    footer .nav-link {
        color: #5a7f5d; /* Nedtonad grön för länkar */
        text-align: center; /* Centrera text under ikoner */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        footer .nav-link:hover {
            color: #3f6545; /* Mörkare grön vid hover */
        }
.custom-mt-5rem {
 margin-top: 3rem; /* Samma som mt-5 */
}

h1, h2, h3, h4, h5, h6 {
    color: #5a7f5d; /* Nedtonad grön för rubriker */
}

.validation-message {
    color: #b34a22; /* Brunröd för felmeddelanden */
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #5a7f5d; /* Grön markering för validerade fält */
}

.invalid {
    outline: 1px solid #b34a22; /* Brunröd markering för ogiltiga fält */
}

/* Responsiv meny för mobil */
@media (max-width: 768px) {
    .navbar {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }

        .navbar .nav-link {
            padding: 0.5rem;
            flex: 1;
        }

    footer {
        flex-direction: row;
        justify-content: space-evenly; /* Justera till horisontellt layout även på mindre skärmar */
        padding: 1rem;
    }
}

/* Bakgrund med grässtrån */
body {
    background-image: url('grass_background.jpeg'); /* Grässtrån som bakgrund */
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Inkluderad befintlig kod från tidigare */

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

h1:focus {
    outline: none;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.message-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    background-color: #f0f2f5;
}

/* Kommentarer för ändringar */
/* 
1. Bakgrundsgradient för html/body har justerats för att ha vitbeige i mitten och övergå i svagt ljusgrön.
2. Navbar och footer har fått subtilare färger och gradienter.
3. Gränser i mobilen har justerats till tunnare och diskretare linjer.
4. Bakgrundsbild med grässtrån för ett naturligt utseende.
5. Footer och navbar håller nu en horisontell layout även på små skärmar.
6. Btn-primary justerad till svagt grön vid hover.
*/