/* --- Project Cards Hover Effect --- */

/* 1. Base State adjustments for the cards (Matching nav base state perfectly) */
.cards a.card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Exact Bright Glass Effect from your nav */
    background: rgba(250, 250, 250, var(--glassy-base-opacity)) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    border: 1px solid var(--bcg-grad-violette-soft);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    
    /* Ensure the text is visible */
    color: var(--text-color) !important;
}

/* 2. NUKE THE WEIRD TABI EXPANDING LINK EFFECT */
/* Tabi uses a:not(.no-hover-padding):hover::before, we override it here */
.cards a.card:hover::before,
.cards a.card::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}

/* 3. The Glassy Hover Effect (Matching the Nav exactly) */
.cards a.card:hover {
    /* Noticeably brighter on hover, overriding Tabi's primary paint */
    background: rgba(255, 255, 255, var(--glassy-stronger-opacity)) !important; 
    background-color: rgba(255, 255, 255, var(--glassy-stronger-opacity)) !important; 
    
    /* Match the Violette Soft border glow from the nav */
    border-color: var(--bcg-grad-violette-soft) !important; 
    
    /* Match the exact nav shadow */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important; 
}

/* 4. Fix the text color on hover */
.cards a.card:hover .card-title,
.cards a.card:hover .card-description {
    /* Locks both the title and description to your default text color so they don't change */
    color: var(--text-color) !important; 
}


/* --- Taxonomy / Filter Buttons (Matching Nav Text Buttons) --- */

/* 1. Base State */
.filter-controls .taxonomy-item a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* The Bright Glass Effect */
    background: rgba(250, 250, 250, var(--glassy-base-opacity)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Bborder for base state */
    border: 1px solid var(--bcg-grad-violette-soft) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    
    border-radius: 10px !important; /* Matches nav buttons instead of heavily rounded pills */
    color: var(--text-color) !important;
    padding: 0.4rem 1.2rem !important; /* Gives them the same breathing room as nav buttons */
}

/* 2. NUKE THE WEIRD TABI EXPANDING LINK EFFECT */
/* Just like the cards, we have to stop Tabi from drawing a solid box behind hovered links */
.filter-controls .taxonomy-item a:hover::before,
.filter-controls .taxonomy-item a::before,
.filter-controls .taxonomy-item a.active::before {
    content: none !important;
    display: none !important;
}

/* 3. Hover State */
.filter-controls .taxonomy-item a:hover {
    background: rgba(255, 255, 255, var(--glassy-stronger-opacity)) !important; 
    
    /* Violet border glow on hover */
    border-color: var(--bcg-grad-violette-soft) !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
}

/* 4. Active State (When a filter is currently selected) */
.filter-controls .taxonomy-item a.active {
    /* Keeps the button permanently glowing violet so the user knows it is active */
    background: rgba(255, 255, 255, var(--glassy-stronger-opacity)) !important; 
    border-color: var(--bcg-grad-violette-soft) !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
    
    /* Optional: Slightly bold the text of the active filter */
    font-weight: 500 !important;
}