/* Dynamic Category Navigation Block Styles - Blog Design Match */
.wp-block-crates-category-navigation {
    margin: 0 0 3rem 0 !important;
    width: 100% !important;
}

/* Container matching blog-design: flex flex-wrap justify-center gap-3 mb-12 */
.wp-block-crates-category-navigation .category-navigation-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    margin-bottom: 3rem !important;
    width: 100% !important;
}

/* Button styling matching blog-design EXACTLY: bg-[#0F2922] hover:bg-[#163832] px-6 py-3 rounded-full text-white font-medium */
/* !important used here as exception to override WordPress theme and Gutenberg core button styles */
/* MAXIMUM SPECIFICITY - Nuclear Option */
html body .wp-block-crates-category-navigation .category-navigation-container button.category-nav-button.category-nav-button.category-nav-button,
html body .category-navigation-container button.category-nav-button.category-nav-button.category-nav-button,
body .wp-block-crates-category-navigation .category-navigation-container button.category-nav-button.category-nav-button.category-nav-button {
    /* Exact React Tailwind equivalent styles with WordPress override protection */
    background-color: #0F2922 !important;
    background: #0F2922 !important;
    color: #ffffff !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 9999px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    /* Reset WordPress button defaults */
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    /* Ensure proper display */
    display: inline-block !important;
    box-sizing: border-box !important;
    text-align: center !important;
    vertical-align: middle !important;
    user-select: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

html body .wp-block-crates-category-navigation .category-navigation-container button.category-nav-button.category-nav-button.category-nav-button:hover,
html body .category-navigation-container button.category-nav-button.category-nav-button.category-nav-button:hover,
body .wp-block-crates-category-navigation .category-navigation-container button.category-nav-button.category-nav-button.category-nav-button:hover {
    background-color: #163832 !important;
    background: #163832 !important;
    color: #ffffff !important;
}

html body .wp-block-crates-category-navigation .category-navigation-container button.category-nav-button.category-nav-button.category-nav-button:focus,
html body .category-navigation-container button.category-nav-button.category-nav-button.category-nav-button:focus,
body .wp-block-crates-category-navigation .category-navigation-container button.category-nav-button.category-nav-button.category-nav-button:focus {
    background-color: #163832 !important;
    background: #163832 !important;
    color: #ffffff !important;
    outline: 2px solid #F39A76 !important;
    outline-offset: 2px !important;
}

.wp-block-crates-category-navigation .category-navigation-container .category-count,
.category-navigation-container .category-count {
    margin-left: 0.5rem !important;
    opacity: 0.8 !important;
    font-size: 0.9em !important;
    color: inherit !important;
}

/* Responsive design - maintain horizontal layout on most screens */
@media (max-width: 480px) {
    .wp-block-crates-category-navigation .category-navigation-container {
        gap: 0.5rem !important;
    }

    .wp-block-crates-category-navigation .category-navigation-container button.category-nav-button,
    .category-navigation-container button.category-nav-button {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
}

/* Very small screens - allow wrapping but keep horizontal when possible */
@media (max-width: 320px) {
    .wp-block-crates-category-navigation .category-navigation-container button.category-nav-button,
    .category-navigation-container button.category-nav-button {
        padding: 0.5rem 1rem !important;
        font-size: 0.8125rem !important;
    }
}