/* Targets all WordPress block buttons */
.wp-block-button__link {
    border-radius: 50px !important; /* The !important ensures it overrides WordPress defaults */
}

/* Specific styling for the 'Learn More' transparent style on hover */
.wp-block-button__link.has-transparent-background-color:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Adds a very light grey tint on hover */
    text-decoration: none;
}

/* 1. Hide the checkbox itself */
#category-toggle-check {
    display: none;
}

/* 2. Desktop View (Default) */
.category-list {
    display: flex; /* Or 'block' depending on your design */
    gap: 20px;
    list-style: none;
    padding: 0;
}

.arrow {
    display: none; /* Hide arrow on desktop */
}

/* 3. Mobile View (Screens smaller than 768px) */
@media (max-width: 768px) {
    .mobile-dropdown-container {
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 5px;
    }

    .mobile-dropdown-container label {
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        margin: 0;
    }

    .arrow {
        display: inline-block;
        transition: transform 0.3s ease;
    }

    .category-list {
        display: none; /* Hide the list on mobile by default */
        flex-direction: column;
        margin-top: 15px;
        border-top: 1px solid #eee;
        padding-top: 10px;
    }

    /* THE TRICK: When checkbox is checked, show the list */
    #category-toggle-check:checked ~ .category-list {
        display: flex;
    }

    /* Rotate arrow when open */
    #category-toggle-check:checked ~ label .arrow {
        transform: rotate(180deg);
    }
}