/*---------------------------------------Our CSS-------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/*------------------------------------------FONT----------------------------------------------*/
.logo {
    font-family: 'Inter', sans-serif;
}
    .logo.logo-text {
        font-family: 'Inter', sans-serif;
    }

body {
    font-family: 'Montserrat', sans-serif !important;
}

/*------------------------------------------NAV----------------------------------------------*/

.nav-search {
    margin-right: 0.5rem;
}

.search-list a {
    text-decoration: none;
    color: #000000;
    line-height: 2rem;
}

.search-list a:hover {
    color: #43A16F;
}

.search-list a:visited {
    color: #006B5F;
}

.search-list a:focus {
    color: #2B56A1;
}


#color {
    color: #206680;
}

.logo {
    font-weight: 500;
}


/*------------------------------------------HOME----------------------------------------------*/
.banner-image {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
/*--------------------------------------ADMIN/MYPAGES------------------------------------*/

.my-pages-list a,
.admin-pages-list a {
    text-decoration: none;
    color: #000000;
    line-height: 2rem;
}

.my-pages-list a:hover,
.admin-pages-list a:hover {
    color: #43A16F;
}

/*.my-pages-list a:visited,
.admin-pages-list a:visited {
    color: #006B5F;
}*/

.my-pages-list a:focus,
.admin-pages-list a:focus {
    color: #2B56A1;
}

.my-pages-list,
.admin-pages-list {
    list-style: none;
    /*margin: 0;*/
    padding: 0;
}

/*------------------------------------------BUTTONS--------------------------------------------*/
/* General button design */
.button {
    color: white; /* Vit textfärg */
    border: none; /* Ingen kantlinje */
    border-radius: 5px; /* Rundade hörn */
    padding: 7px 11px; /* Padding för att göra knappen större */
    font-size: 16px; /* Storlek på texten */
    cursor: pointer; /* Handpekare när man hovrar */
    transition: background-color 0.3s ease; /* Mjuk övergång vid hover */
}

/* Login button - specific blue color */
.login-button {
    background-color: #3494fa; 
}

/* Login button hover color */
.login-button:hover {
    background-color: #174188; 
}
/* Specific style for Login-link */
.login-link {
    display: inline-block; /* För att få den att bete sig som en knapp */
    background-color: #3494fa; 
    color: white; 
    padding: 7px 11px; 
    font-size: 16px; 
    border-radius: 5px; 
    text-decoration: none; /* Ta bort eventuell understrykning */
    transition: background-color 0.3s ease, color 0.3s ease; 
}

/* Hover for Login-link */
.login-link:hover {
    background-color: #174188; 
    color: white; 
}

/* Specific style for register-link  */
.register-link {
    display: inline-block; 
    background-color: #4cbf81; 
    color: white; 
    padding: 7px 11px; 
    font-size: 16px; 
    border-radius: 5px; 
    text-decoration: none; 
    transition: background-color 0.3s ease, color 0.3s ease; 
}
/* Register link hover */
.register-link:hover {
    background-color: #1e6941; 
    color: white; 
}

/* Register button color */
.register-button {
    background-color: #4cbf81; 
}

/* Register button hover */
.register-button:hover {
    background-color: #1e6941; 
}

/* Specific style for continue as guest-link  */
.continue-as-guest-link {
    display: inline-block; 
    background-color: #c56aec; 
    color: white; 
    padding: 7px 11px; 
    font-size: 16px; 
    border-radius: 5px; 
    text-decoration: none; 
    transition: background-color 0.3s ease, color 0.3s ease; 
}

/* continue as guest link hover color*/
.continue-as-guest-link:hover {
    background-color: #713c88; 
    color: white; 
}

/* continue as guest button color */
.continue-as-guest-button {
    background-color: #c56aec; 
}

/* continue as guest button margin between icon and text */
.continue-as-guest-button i {
    margin-right: 6px; 
}

/* continue as guest button hover */
.continue-as-guest-button:hover {
    background-color: #713c88; 
}

/* Specific style for search in nav-search */
.nav-search-button {
    background-color: #000000;
    color: white; 
    border: none; 
    border-radius: 5px; 
    padding: 7px 11px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
}

/* Hover-effect for search in nav-search */
.nav-search-button:hover {
    background-color: #3b3939; 
    color: white; 
}

/*logout button color*/
.logout-button {
    background-color: #cd0000;
}

/*Logout button hover color*/
.logout-button:hover {
    background-color: #900404;
}

/* logout button margin between icon and text */
.logout-button i {
    margin-right: 6px; 
}

/*submit button color*/
.submit-button {
    background-color: #247a4c;
}

/*submit button hover*/
.submit-button:hover {
    background-color: #174f31;
}
/*margin for submit button*/
.submit-button i {
    margin-right: 6px;
}

/*cancel link style*/
.cancel-link {
    display: inline-block; 
    background-color: #000000; 
    color: white; 
    padding: 7px 11px; 
    font-size: 16px; 
    border-radius: 5px; 
    text-decoration: none; 
    transition: background-color 0.3s ease, color 0.3s ease; 
    margin-top: 6px;
}

/* cancel link margin between icon and text */
.cancel-link i {
    margin-right: 6px; 
}

/*hover for cancel link*/
.cancel-link:hover {
    background-color: #2b2a2a;
    color: white;
}

/*edit information link style*/
.edit-information-link {
    display: inline-block;
    background-color: #f7b307;
    color: white;
    padding: 7px 11px;
    font-size: 16px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* edit information link margin between icon and text */
.edit-information-link i {
    margin-right: 6px; 
}

/*hover for edit information link*/
.edit-information-link:hover {
    background-color: #ca9101;
    color: white;
}

/*edit password link style*/
.edit-password-link {
    display: inline-block;
    background-color: #000000;
    color: white;
    padding: 7px 11px;
    font-size: 16px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* edit password link margin between icon and text */
.edit-password-link i {
    margin-right: 6px;
}

/*hover for edit password link*/
.edit-password-link:hover {
    background-color: #2b2a2a;
    color: white;
}

/* delete button color */
.delete-button {
    background-color: #cd0000;
}

/* delete button hover color */
.delete-button:hover {
    background-color: #900404;
}

/*delete button margin*/
.delete-button i {
    margin-right: 6px;
}

/*add comment link style*/
.add-comment-link {
    display: inline-block;
    background-color: #2B56A1;
    color: white;
    padding: 7px 11px;
    font-size: 16px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/*add comment link hover color*/
.add-comment-link:hover {
    background-color: #193667;
    color: white;
}

/*add comment link margin*/
.add-comment-link i {
    margin-right:6px;
}

/*reject button color*/
.reject-button {
    background-color: #cd0000;
}

/*reject button hover*/
.reject-button:hover {
    background-color: #900404;
}

/*reject button margin*/
.reject-button i {
    margin-right: 6px;
}

/*apply filter button color*/
.apply-filter-button {
    background-color: #0056b2;
    display: inline-block;
    border:none;
    cursor: pointer;
    color: white;
    padding: 5px 5px;
    font-size: 14px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-bottom: 6px;
}

/*apply filter button hover*/
.apply-filter-button:hover {
    background-color: #003873;
}

/*clear filter button color*/
.clear-filter-button {
    background-color: #3c3a3a;
    display: inline-block;
    border: none;
    cursor: pointer;
    color: white;
    padding: 5px 5px;
    font-size: 14px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-bottom: 6px;
}

/*clear filter button hover*/
.clear-filter-button:hover {
    background-color: #252424;
}

/*post new activity link color*/
.new-activity-link {
    background-color: #007bff;
}

/*post new activity link hover color*/
.new-activity-link:hover {
    background-color:#0056b2;
    color: white;
}

/*post new activity link margin*/
.new-activity-link i {
    margin-right: 6px;
}
/*------------------------------------------FOOTER--------------------------------------------*/
footer {
    background-color: #525a5c;
    padding-top: 0rem;
    padding-bottom: 0rem;
}

footer a {
    text-decoration: none;
     color: white;
}

footer p {
    color: white;
    line-height: 1rem;
}

footer a:hover {
    color: #96DED1;
}

footer a:visited {
    color: #B4D3DE;
}

footer a:focus {
    color: #83A182;
}

/*to color the social media icons when we hover on them*/
footer a:hover svg path {
    fill: #96DED1;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .footer-info {
    text-align: left;
}


.footer-info a {
    display: block;
    line-height: 2rem;
}

.footer-follow {
    line-height: 1rem;
}

footer .footer-follow {
    text-align: right;
}

.footer-follow a {
   margin-right: 10px;
}

.footer-image {
    /*width: 100%;
    height: auto;*/
}

.container-p {
    padding: 0rem;
    margin: 0rem;
}
/*------------------------------------ Original CSS --------------------------------------*/
html {
    font-size: 14px;
}

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

.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;
}

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

/*this affected footer - footer went up in body*/
body {
    margin-bottom: 7rem;
    font-family: 'Inter', sans-serif;
}

/*------------------------------------ Explore CSS --------------------------------------*/
.activity-link {
    color: black;
    text-decoration: none;
}
    .activity-link:hover {
        text-decoration: underline 2px solid;
    }

.bi-check-lg { 
    color: mediumseagreen;
}
.bi-currency-dollar {
    color: firebrick;
}
.bi-x-lg {
    color: firebrick;
}
.bi-exclamation-circle {
    color: firebrick;
}

.card-icon {
    font-size: 1.1rem;
}

.like-button {
    background: none; /* No background */
    border: none; /* No border */
    padding: 0; /* No padding */
    outline: none; /* No outline */
    cursor: pointer; /* Pointer cursor */
    appearance: none; /* Removes default button styling on some browsers */
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
    .like-button:hover {
        color: lightpink; /* Default color */
        font-size: 1.5rem;
        transition: color 0.3s ease;
    }

.heart-icon {
    color: lightgray; /* Default color */
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

    .heart-icon:hover {
        color: lightpink; /* Default color */
        font-size: 1.5rem;
        transition: color 0.3s ease;
    }

.liked .heart-icon {
    color: red; /* Color when liked */
}

.heart-icon.liked {
    color: red; /* Color when liked */
}

/* Remove all visual feedback on active, focus, and hover */
.like-button:focus,
.like-button:active,
.like-button:hover {
    outline: none;
    box-shadow: none; /* Removes any shadow effect */
    background: none; /* Ensures no background appears */
    border: none; /* No border */
}

.btn.like-button:focus {
    outline: none !important;
    box-shadow: none !important;
}


/*------------------------------------ Parmis Changes --------------------------------------*/
/*---------AdminPage----------*/

/*--------Index----------*/

/* Basdesign */
.list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: white;
    color: #333;
    text-decoration: none;
    padding: 10px 15px;
    border: 1px solid #ddd;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* Hovringseffekt */
    .list-group-item:hover {
        background-color: #f0f8ff; 
        color: #007bff; 
    }

    /* Ikoner */
    .list-group-item i {
        font-size: 1.2em; 
        color: #666; 
        transition: color 0.3s ease;
    }

    .list-group-item:hover i {
        color: #007bff; 
    }



/*----ListAllCategories--*/

/* Kategorikort */
.category-card {
    background-color: #f8f9fa; /* Lätt bakgrundsfärg */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effekt */
}

    .category-card:hover {
        transform: translateY(-5px); /* Lyfter kortet lite vid hover */
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15); /* Lägger till en starkare skugga */
    }

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Justera så att korten fördelas jämnt */
}

.category-card {
    flex: 1; /* Gör att alla kort får samma storlek */
    min-height: 300px; /* Eller använd en specifik minimi-höjd för alla kort */
    margin-bottom: 20px; /* Gör mellanrummen lika för alla kort */
}


/* Kategorikortets titel */

.category-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #60707e;
    padding: 10px;
    display: inline-block; /* Gör så att bakgrunden bara täcker texten */
    margin-bottom: 15px; /* Utrymme under titeln */
}
.category-card-description {

}

.category-card-Create {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 15px 25px;
    border-radius: 2px;
    background-color: #f8f9fa;
    color: #207f2d;
    text-decoration: none;
    display: inline-block;
    border: #207f2d; 
}
    .category-card-Create:hover {
        background-color: #6baa73; /* Grön bakgrund på hover */
        color: white; /* Vit text på hover */
        border-color: #155d22; 
    }

.category-card-subject {
    color: #4a5056;
}
/* Kategorikortets beskrivning */
.category-card-description {
    font-size: 1rem;
    color: #6c757d;
}

/*---------UserPage----------*/

.list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: white;
    color: #333;
    text-decoration: none;
    padding: 10px 15px;
    border: 1px solid #ddd;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* Hovringseffekt */
    .list-group-item:hover {
        background-color: #f0f8ff; 
        color: #007bff; /* Blå text */
    }

    /* Ikoner */
    .list-group-item i {
        font-size: 1.2em;
        color: #666;
        transition: color 0.3s ease;
    }

    .list-group-item:hover i {
        color: #007bff; 
    }