/* Project tag filters styles */
.project-tag-filters {
    margin-bottom: 1.5rem;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.project-tag-filters h3 {
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
}

.tag-filters-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.tag-filters {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

/*
 * Special styling for tag filters to prevent flickering
 * Following o4's advice to avoid changing the element's hit area
 */
.tag-filters {
    /* Set overflow to visible to allow child elements to grow outside the container */
    overflow: visible;
}

.tag-filters .tag {
    position: relative;
    margin-bottom: 0;
    white-space: nowrap;
    padding: 0.5rem 0.7rem;
    border-radius: 50px;
    font-size: 0.85rem;
    cursor: pointer;

    /* Set transform origin to center to avoid changing the hit area */
    transform-origin: center center;

    /* Use a transition that doesn't affect the hit area */
    transition: background-color 0.3s, color 0.3s, transform 0.2s;

    /* Base styling */
    background-color: var(--light-accent);
    color: var(--dark-accent);

    /* Add a pseudo-element for the border effect to avoid changing the hit area */
    overflow: visible;
}

/* Active state styling */
.tag-filters .tag.active {
    background-color: var(--secondary-color);
    color: white;
}

/* Hover effect that doesn't change the hit area */
.tag-filters .tag:hover {
    /* Use transform scale instead of translateY to maintain the center position */
    transform: scale(1.05);
    background-color: var(--secondary-color);
    color: white;
}

/* Special styling for active tags on hover */
.tag-filters .tag.active:hover {
    background-color: var(--secondary-color);
    color: white;
    /* Use a slightly different scale to differentiate */
    transform: scale(1.05);
}

.tag-filters .tag.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Ensure tag filters are visible immediately */
.projects-container {
    position: relative;
    width: 100%;
    margin-top: 2rem;
    opacity: 1 !important;
    visibility: visible !important;
}