/* =============================================================================
   Taxonomy (Tags) - CodePen-inspired chip style
   ============================================================================= */

/* CSS Variables for tag colors */
:root {
    --tag-bg: var(--bg-tertiary, #454e56);
    --tag-text: var(--text-secondary, #b2becd);
    --tag-security: #ff3860;
    --tag-security-text: #fff;
    --tag-web: #498afb;
    --tag-web-text: #fff;
    --tag-crystal: #000;
    --tag-crystal-text: #fff;
    --tag-development: #09c372;
    --tag-development-text: #fff;
    --tag-guide: #9166cc;
    --tag-guide-text: #fff;
    --tag-hwaro: #fa8142;
    --tag-hwaro-text: #fff;
    --tag-ssg: #41b883;
    --tag-ssg-text: #35495e;
    --tag-oast: #ff4088;
    --tag-oast-text: #fff;
    --tag-blog: #ffdd57;
    --tag-blog-text: #12181a;
    --tag-introduction: #54c5f8;
    --tag-introduction-text: #003b6c;
}

/* Taxonomy stats */
.taxonomy-stats {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md) 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--border-color);
}

.taxonomy-stats .stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.taxonomy-stats .stat-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Taxonomy list container */
.taxonomy-list {
    margin-top: var(--spacing-xl);
}

/* Override default ul styles for taxonomy-terms */
.taxonomy-list ul.taxonomy-terms,
.taxonomy-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Each tag item */
.taxonomy-terms li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* Tag link styling - chip style */
.taxonomy-terms li a {
    display: inline-block;
    padding: 0.3em 0.6em 0.35em;
    background: var(--tag-bg);
    color: var(--tag-text);
    font-size: 1.1em;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Add # prefix */
.taxonomy-terms li a::before {
    content: "#";
}

/* Hover effect */
.taxonomy-terms li a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

/* =============================================================================
   Tag-specific colors (based on href containing the tag name)
   ============================================================================= */

/* Security tag */
.taxonomy-terms li a[href*="/security/"] {
    background: var(--tag-security);
    color: var(--tag-security-text);
}

/* Security testing tag */
.taxonomy-terms li a[href*="/security-testing/"] {
    background: linear-gradient(90deg, var(--tag-security), #db1d5f);
    color: #fff;
}

/* Web tag */
.taxonomy-terms li a[href*="/web/"] {
    background: var(--tag-web);
    color: var(--tag-web-text);
}

/* Crystal tag */
.taxonomy-terms li a[href*="/crystal/"] {
    background: var(--tag-crystal);
    color: var(--tag-crystal-text);
}

/* Development tag */
.taxonomy-terms li a[href*="/development/"] {
    background: var(--tag-development);
    color: var(--tag-development-text);
}

/* Guide tag */
.taxonomy-terms li a[href*="/guide/"] {
    background: var(--tag-guide);
    color: var(--tag-guide-text);
}

/* Hwaro tag */
.taxonomy-terms li a[href*="/hwaro/"] {
    background: var(--tag-hwaro);
    color: var(--tag-hwaro-text);
}

/* SSG tag */
.taxonomy-terms li a[href*="/ssg/"] {
    background: var(--tag-ssg);
    color: var(--tag-ssg-text);
}

/* OAST tag */
.taxonomy-terms li a[href*="/oast/"] {
    background: var(--tag-oast);
    color: var(--tag-oast-text);
}

/* Blog tag */
.taxonomy-terms li a[href*="/blog/"] {
    background: var(--tag-blog);
    color: var(--tag-blog-text);
}

/* Introduction tag */
.taxonomy-terms li a[href*="/introduction/"] {
    background: var(--tag-introduction);
    color: var(--tag-introduction-text);
}

/* =============================================================================
   Additional popular tag colors
   ============================================================================= */

/* JavaScript */
.taxonomy-terms li a[href*="/javascript/"] {
    background: #f0db4f;
    color: #000;
}

/* TypeScript */
.taxonomy-terms li a[href*="/typescript/"] {
    background: #2775c3;
    color: #fff;
}

/* Python */
.taxonomy-terms li a[href*="/python/"] {
    background: #3879ab;
    color: #ffda5d;
}

/* Go/Golang */
.taxonomy-terms li a[href*="/go/"],
.taxonomy-terms li a[href*="/golang/"] {
    background: #00add8;
    color: #fff;
}

/* Rust */
.taxonomy-terms li a[href*="/rust/"] {
    background: #dea584;
    color: #000;
}

/* Ruby */
.taxonomy-terms li a[href*="/ruby/"] {
    background: #cc342d;
    color: #fff;
}

/* Docker */
.taxonomy-terms li a[href*="/docker/"] {
    background: #2496ed;
    color: #fff;
}

/* Linux */
.taxonomy-terms li a[href*="/linux/"] {
    background: #fcc624;
    color: #000;
}

/* API */
.taxonomy-terms li a[href*="/api/"] {
    background: #6c7983;
    color: #fff;
}

/* Tools */
.taxonomy-terms li a[href*="/tools/"] {
    background: #454e56;
    color: #dbe1e8;
}

/* =============================================================================
   Taxonomy item (for other taxonomy usages)
   ============================================================================= */
.taxonomy-item {
    display: inline-block;
}

.taxonomy-item .tag-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.taxonomy-item .tag-link:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.taxonomy-item .tag-link .tag-count {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 400;
    margin-left: var(--spacing-xs);
}

/* Tag size variants */
.taxonomy-item.size-xs .tag-link {
    font-size: var(--font-size-sm);
    padding: calc(var(--spacing-sm) * 0.7) calc(var(--spacing-md) * 0.8);
}

.taxonomy-item.size-sm .tag-link {
    font-size: var(--font-size-md);
    padding: calc(var(--spacing-sm) * 0.85) calc(var(--spacing-md) * 0.9);
}

.taxonomy-item.size-md .tag-link {
    font-size: 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
}

.taxonomy-item.size-lg .tag-link {
    font-size: var(--font-size-lg);
    padding: calc(var(--spacing-sm) * 1.15) calc(var(--spacing-md) * 1.1);
    font-weight: 500;
}

.taxonomy-item.size-xl .tag-link {
    font-size: var(--font-size-xl);
    padding: calc(var(--spacing-sm) * 1.3) calc(var(--spacing-md) * 1.2);
    font-weight: 500;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 768px) {
    .taxonomy-terms {
        gap: 0.4em;
    }

    .taxonomy-terms li a {
        font-size: 0.95em;
        padding: 0.25em 0.5em 0.3em;
    }

    .taxonomy-item .tag-link {
        padding: calc(var(--spacing-sm) * 0.8) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .taxonomy-item.size-lg .tag-link,
    .taxonomy-item.size-xl .tag-link {
        font-size: 1rem;
        padding: var(--spacing-sm) calc(var(--spacing-md) * 0.9);
    }
}