/* Blog Page Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'League Gothic', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #141115;
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem; /* Adjust based on your navbar height */
  }

/* -------------------------------NAV BAR------------------------------- */
.navbarblog {
    background: #fff;
    color: #141115;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0; /* Reset padding */
    margin: 0; /* Reset margin */
    height: 4rem; /* Set navbar height explicitly */
    display: flex; /* Flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    gap: 1rem; /* Space between links */
    border-bottom: solid 1px #F2E1E1;
}

.nav-links-blog {
    display: flex; /* Aligns links in a row */
    align-items: center; /* Ensures all items are vertically aligned */
    gap: 1.5rem; /* Adjusts spacing between links */
}



.nav-links-blog a {
    display: flex; /* Makes text links behave like flex items */
    align-items: center; /* Centers text */
    color: #630036;
    text-decoration: none;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    transition: opacity 0.3s ease-in-out;

}

.nav-links-blog a {
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.nav-links-blog a:active {
    opacity: 0.5;
}

/* Hover Effect */
.nav-links-blog a:hover {
    color: #F8BABB; /* Change color on hover (soft pink) */
    transform: scale(1.1); /* Slight zoom effect */
}

/* Home Icon Default Size */
.nav-links-blog a img {
    width: 30px; /* Set a fixed size */
    height: auto;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Home Icon Hover Effect */
.nav-links-blog a:hover img {
    filter: brightness(0) saturate(100%) invert(85%) sepia(20%) saturate(500%) hue-rotate(300deg) brightness(95%) contrast(90%);
    transform: scale(1.1); /* Slight zoom effect on hover */
}

#menu-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none; /* Prevents clicking */
}

/* -------------------------------FOOTER------------------------------- */
footer {
    font-family: 'League Gothic', sans-serif;
    font-size: 2rem;
    text-align: center;
    padding: 5rem 2rem;
    background: #F2E1E1;
    color: #630036;
    height: 350px;
}

footer .copy{
    font-size: 1.5rem;
    color: #fff;
}

.social-icons {
    display: flex;
    justify-content: center; /* Centers icons */
    gap: 20px; /* Space between icons */
    margin-top: 20px; /* Space above the icons */
}

/* Style the Icons */
.social-icons img {
    width: 30px; /* Adjust icon size */
    height: auto;
    transition: transform 0.3s ease; /* Smooth hover effect */
}

/* Hover Effect */
.social-icons img:hover {
    transform: scale(1.1); /* Slight zoom effect */
}





/* 📌 Mobile View (Hide Menu by Default) */
@media (max-width: 768px) {
    /* Hide default navigation links */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 4rem;
        left: 0;
        width: 100%;
        background: #fff;
        text-align: center;
        padding: 1rem 0;
        border-top: 1px solid #F2E1E1;
    }

    /* Show menu when checkbox is checked */
    #menu-toggle:checked ~ .nav-links {
        display: flex;
    }

    /* Hide default checkbox */
    #menu-toggle {
        display: none;
    }

    /* Hamburger Icon */
    .menu-icon {
        display: block;
        font-size: 2rem;
        cursor: pointer;
        color: #630036;
        padding: 10px;
    }
}

/* Hide Hamburger Menu on Desktop */
@media (min-width: 769px) {
    .menu-icon {
        display: none; /* Completely remove ☰ on larger screens */
    }
}