@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&family=Roboto:wght@300;400;500;700&display=swap");

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    /* border: 1px solid red; */
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../assets/img/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    --body-padding: 2rem;
    padding: var(--body-padding);
}

/* MAIN MENU */

main {
    width: calc(100svw - 2*var(--body-padding));
    max-width: calc(100svw - 2*var(--body-padding));
    height: calc(100svh - 2*var(--body-padding));
    max-height: calc(100svh - 2*var(--body-padding));
    overflow-y: hidden;
    
    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border: 1px solid rgba(255, 255, 255, 0.18);
    
    border-radius: 20px;
    z-index: 1;

    display: flex;
    flex-direction: row;
}

/* --------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------     NAVIGATION      -------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------- */

nav {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

.nav-menu {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    /* Semi-transparent nav background for glass feel */
    background: rgba(0, 96, 125, 0.85); 
    /* backdrop-filter: blur(10px);  - Optional if we want blur behind nav too */
    border-radius: 20px 0 0 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);

    flex: 1;
}

.nav-menu h1 {
    display: block;
    font-size: larger;
    font-weight: 500;
    text-align: center;
    margin: 20px 0 30px;
    color: rgb(var(--text-color));
}

.nav-item {
    position: relative;
    display: block;
}

.nav-item:hover {
    cursor: pointer;
}

.nav-item a {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: rgb(var(--text-color));
    font-size: xx-large;
    padding: 15px;
    margin-left: 10px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    transition: all 0.3s ease;
}

.nav-item b:nth-child(1) {
    position: absolute;
    top: -15px;
    height: 15px;
    width: 100%;
    background: transparent; /* Changed from variable to handle transparency better manually if needed, but keeping simple logic */
    display: none; /* Removing the complex corner logic for cleaner glass look, or adapting it */
} 

/* Simplified active state for Glassmorphism */
.nav-item.active a {
    text-decoration: none;
    color: rgb(var(--secondary-color));
    background: rgba(255, 255, 255, 0.9);
    box-shadow: -5px 5px 15px rgba(0,0,0,0.1);
}

/* Restoring the corner rounding with a simpler approach if needed, 
   but for glassmorphism usually cleaner lines are better. 
   Let's disable the 'b' elements effectively by hiding them 
   or we adjust them to match the new background. 
   For now, I'll hide them to keep the glass clean. */

.nav-item b {
    display: none;
}

.nav-icon {
    font-size: larger;
    text-align: center;
    padding: 0 0.5rem;
}

.nav-text {
    font-size: large;
    font-weight: 700;
}


/* --------------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------      CONTENT      --------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------- */

.content {
    flex: 6;

    height: inherit;
    max-height: inherit;
    display: flex;
    flex-direction: column;

    --upper-content-height: 5rem;
}

.upper-content {
    max-height: 100%;
    height: var(--upper-content-height);
    max-width: 100%;
    width: 100%;
    display: flex;
    padding: 1rem;
    justify-content: flex-end;
    /* Removed drop shadow for cleaner glass look */
    /* box-shadow: rgba(var(--background-color)) 5px 1px 10px; */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* USER INFO */

.user-info {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-items: right;
    color: white; /* Ensure text is white for contrast against glass */
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.user-info h4 {
    white-space: nowrap;
}

.user-info img {
    width: 3rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);

}

/* lower content */

.lower-content {
    max-height: calc(100% - var(--upper-content-height));
    height: calc(100% - var(--upper-content-height));
    width: 100%;
}

/* applets */

.applets {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    overflow-y: scroll; /* Scroll the whole container */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}

.applets h1 {
    padding: 1.5rem 0 1rem;
    font-weight: 700;
    font-size: xx-large;
    color: white; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    text-align: center;
}

.featured-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.applets-container {
    display: grid;
    /* Square tiles, responsive */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Scrollbar styling */
.applets::-webkit-scrollbar {
    width: 8px;
}
.applets::-webkit-scrollbar-track {
    background: transparent;
}
.applets::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* Card Styling */
.card {
    position: relative;
    aspect-ratio: 1/1; /* Square design */
    border-radius: 20px;
    overflow: hidden;
    
    /* Using site variables for blue tones with glassmorphism */
    /* --secondary-color: 0, 96, 125 */
    background: linear-gradient(135deg, rgba(var(--secondary-color), 0.7), rgba(var(--background-color), 0.8));
    
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    cursor: pointer;
}

.featured-card {
    width: 350px;
    max-width: 100%;
    aspect-ratio: 16/9; 
    /* Distinctive gradient using primary and highlight hints */
    background: linear-gradient(135deg, rgba(var(--primary-color), 0.85), rgba(var(--background-color), 0.9));
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
    z-index: 5;
    /* Slightly lighter/more saturated on hover */
    background: linear-gradient(135deg, rgba(var(--secondary-color), 0.8), rgba(var(--background-color), 0.9));
}

.featured-card:hover {
    border-color: rgba(var(--highlight-color), 0.6); 
    background: linear-gradient(135deg, rgba(var(--primary-color), 0.95), rgba(var(--secondary-color), 0.95));
}

.card a {
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem; /* Sufficient padding to keep text away from edges */
    text-align: center;
    color: rgb(240, 240, 240);
}

.card-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Ensures vertical centering */
    gap: 0.5rem;
}

.card-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    
    /* Ensure text is completely visible and centered */
    width: 100%;
    word-wrap: break-word; /* Wrap long words if needed */
    overflow-wrap: break-word;
    hyphens: auto;
    
    /* Removed line-clamping to show full text */
    display: block;
    max-height: 100%;
}

.card-content p {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.8;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 0.5rem; /* Use margin instead of auto to keep consistent spacing */
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 0.5rem;
    display: inline-block; /* Center relative to content properly */
}

.featured-card .card-content h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    -webkit-line-clamp: 2;
}
.featured-card .card-content p {
    font-size: 1rem;
    width: auto;
    padding: 0.5rem 1.5rem 0;
}


/* Replaced colorful gradients with a more uniform professional look.
   We remove specific nth-child gradients to maintain consistency. */

/* Optional: Slight variation for categories if desired, or keep uniform. 
   Currently going for uniform professional dark look. */

@media (max-width: 1000px) {

    main {
        flex-direction: column;
        height: auto; 
        min-height: 100vh;
        overflow-y: auto;
    }

    .nav-menu {
        width: 100%;
        height: auto;
        border-radius: 20px 20px 0 0;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        flex: none;
    }
    
    .nav-menu ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 1rem;
    }
    
    .nav-menu h1 {
        display: none;
    }
    
    .nav-item a {
        padding: 10px;
        margin: 0 5px;
        border-radius: 10px;
    }

    .content {
        flex: auto;
        overflow: visible;
        /* height needs to be auto on mobile so main scroll works */
        height: auto; 
    }
    
    .applets {
        overflow-y: visible;
        height: auto;
    }

    .featured-container {
        flex-direction: column;
        align-items: center;
    }
    
    .featured-card {
        width: 100%;
        aspect-ratio: 16/9;
    }

    .applets-container {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }
    
    @media (min-width: 600px) {
        .applets-container {
            grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
        }
    }
}


/* --------------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------      SNACKBAR      -------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------- */

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden;
    /* Hidden by default. Visible on click */
    min-width: 250px;
    /* Set a default minimum width */
    margin-left: -125px;
    /* Divide value of min-width by 2 */
    background-color: #333;
    /* Black background color */
    color: rgb(var(--text-color));
    /* White text color */
    text-align: center;
    /* Centered text */
    border-radius: 2px;
    /* Rounded borders */
    padding: 16px;
    /* Padding */
    position: fixed;
    /* Sit on top of the screen */
    z-index: 10;
    /* Add a z-index if needed */
    left: 50%;
    /* Center the snackbar */
    bottom: 30px;
    /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible;
    /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
        However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}