html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}


/* --- Styling för externa inloggningsknappar --- */

/* Gemensam stil för alla externa knappar */
.btn-external-login {
    border: 1px solid #ced4da; /* Ljusgrå kantlinje */
    background-color: #ffffff; /* Vit bakgrund */
    color: #212529; /* Mörk text */
    padding-left: 40px; /* Ge plats för logotypen */
    background-repeat: no-repeat;
    background-position: 12px center; /* Positionera logotypen */
    background-size: 20px; /* Storlek på logotypen */
    text-align: left;
    width: 100%;
}

    .btn-external-login:hover {
        background-color: #f8f9fa; /* Lite mörkare vit vid hover */
        color: #212529;
    }

/* Specifik stil och logotyp för Google-knappen */
button[value='Google'] {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' xmlns:xlink='http://www.w3.org/1999/xlink' style='display: block;'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'%3E%3C/path%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'%3E%3C/path%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'%3E%3C/path%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'%3E%3C/path%3E%3Cpath fill='none' d='M0 0h48v48H0z'%3E%3C/path%3E%3C/svg%3E");
}

/* Specifik stil och logotyp för Microsoft-knappen */
button[value='Microsoft'] {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EMS-Symbollockup%3C/title%3E%3Crect x='1' y='1' width='9' height='9' fill='%23f25022'/%3E%3Crect x='1' y='11' width='9' height='9' fill='%2300a4ef'/%3E%3Crect x='11' y='1' width='9' height='9' fill='%237fba00'/%3E%3Crect x='11' y='11' width='9' height='9' fill='%23ffb900'/%3E%3C/svg%3E");
}


/* --- Säsongsbaserad Styling --- */
body {
    transition: background-color 0.5s ease-in-out;
}

/* Här kan du lägga till specifika regler för olika årstider om du vill, t.ex. ändra länkfärger */
/*
body.autumn { color: #5a3a22; }
body.winter { color: #3a5a6b; }
*/


/* --- Styling för den nya startsidan ("Hero"-sektionen) --- */
.hero-section {
    /* Denna rad ska vara borttagen eller utkommenterad för att den slumpmässiga bilden ska fungera */
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/seasons/autumn.jpg'); */

    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0;
    text-align: center;
    border-radius: 8px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Lägger till en liten skugga på texten för läsbarhet */
}

    .hero-section h1 {
        font-size: 3.5rem;
        font-weight: 700;
    }

    .hero-section p {
        font-size: 1.25rem;
        max-width: 600px;
        margin: 20px auto;
    }

    .hero-section .btn-cta {
        background-color: #e8891d; /* Höstig orange */
        border-color: #e8891d;
        color: white;
        font-size: 1.2rem;
        padding: 12px 25px;
        font-weight: 500;
        transition: background-color 0.2s ease-in-out;
    }

        .hero-section .btn-cta:hover {
            background-color: #c77418;
            border-color: #c77418;
        }
/* --- För att göra navbaren högre --- */
.navbar {
    min-height: 70px; /* Standard Bootstrap navbar är ca 56px, så detta blir högre */
    display: flex;
    align-items: center; /* Centrerar innehållet vertikalt */
}

/* Anpassa navbar-brand för att centrera logotypen om navbaren blir högre */
.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}