/* =========================================
   UNIVERSAL RESPONSIVE CATEGORY WIDGET
   Mobile • Tablet • Laptop • Desktop
========================================= */

/* Category Widget Wrapper */
.wp-block-categories{
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1vw, 14px);

    margin: 0;
    padding: 0;
    list-style: none;

    width: 100%;
}

/* Category Item */
.wp-block-categories .cat-item{
    margin: 0;
    padding: 0;
}

/* =========================================
   CATEGORY BUTTON STYLE
========================================= */

.wp-block-categories .cat-item a{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    padding:
        clamp(8px, 1vw, 12px)
        clamp(14px, 1.5vw, 22px);

    font-size: clamp(12px, 1vw, 15px) !important;
    font-weight: 600;
    line-height: 1.2;

    color: #374151;
    background: #f3f4f6;

    border-radius: 999px;
    border: 1px solid transparent;

    white-space: nowrap;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

/* =========================================
   HOVER EFFECT
========================================= */

.wp-block-categories .cat-item a:hover{
    background: linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color: #ffffff;

    transform: translateY(-3px);

    border-color: rgba(255,255,255,.15);

    box-shadow:
        0 10px 24px rgba(37,99,235,.22);
}

/* Active Click */
.wp-block-categories .cat-item a:active{
    transform: scale(.96);
}

/* Focus Accessibility */
.wp-block-categories .cat-item a:focus{
    outline: none;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.18);
}

/* =========================================
   SMALL MOBILE DEVICES
========================================= */

@media (max-width: 480px){

    .wp-block-categories{
        gap: 8px;
    }

    .wp-block-categories .cat-item a{
        padding: 8px 14px;
        font-size: 13px !important;
    }
}

/* =========================================
   TABLET DEVICES
========================================= */

@media (min-width: 481px) and (max-width: 991px){

    .wp-block-categories{
        gap: 10px;
    }
}

/* =========================================
   LARGE DESKTOP DEVICES
========================================= */

@media (min-width: 1400px){

    .wp-block-categories .cat-item a{
        padding:
            12px 24px;

        font-size: 15px !important;
    }
}

/* =========================================
   TOUCH DEVICE OPTIMIZATION
========================================= */

@media (hover: none){

    .wp-block-categories .cat-item a:hover{
        transform: none;
    }
}

/* =========================================
   DARK MODE SUPPORT
========================================= */

@media (prefers-color-scheme: dark){

    .wp-block-categories .cat-item a{
        background: #1f2937;
        color: #f3f4f6;
        border-color: #374151;
    }

    .wp-block-categories .cat-item a:hover{
        color: #ffffff;
    }
}
/* =========================================
   UNIVERSAL RESPONSIVE SIDEBAR TAG WIDGET
   Supports Mobile, Tablet, Laptop & Desktop
========================================= */

.sidebar-widget{
    position: relative;
    width: 100%;
    background: #ffffff;
    padding: clamp(18px, 2vw, 30px);
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 25px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: all 0.35s ease;
}

/* Hover Card Effect */
.sidebar-widget:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(0,0,0,0.08);
}

/* =========================================
   TITLE
========================================= */

.sidebar-widget .widget-title{
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 12px;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Gradient Underline */
.sidebar-widget .widget-title::after{
    content: "";
    position: absolute;
    left: 42%; /*you may use px or %*/
    bottom: 0;
    width: 70px;
    height: 4px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );
}

/* =========================================
   TAG CLOUD WRAPPER
========================================= */

.sidebar-widget .wp-widget-group__inner-blocks{
    width: 100%;
}

.sidebar-widget .wp-block-tag-cloud{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
}

/* =========================================
   TAG BUTTONS
========================================= */

.sidebar-widget .wp-block-tag-cloud .tag-cloud-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    padding: clamp(8px, 1vw, 12px)
             clamp(14px, 1.5vw, 22px);

    font-size: clamp(12px, 1vw, 15px) !important;
    font-weight: 600;
    line-height: 1;

    color: #374151;
    background: #f3f4f6;

    border-radius: 999px;
    border: 1px solid transparent;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

    white-space: nowrap;
}

/* Hover / Focus */
.sidebar-widget .wp-block-tag-cloud .tag-cloud-link:hover,
.sidebar-widget .wp-block-tag-cloud .tag-cloud-link:focus{
    background: linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color: #ffffff;
    transform: translateY(-3px);

    box-shadow:
        0 10px 24px rgba(37,99,235,.22);

    outline: none;
}

/* Active Click */
.sidebar-widget .wp-block-tag-cloud .tag-cloud-link:active{
    transform: scale(.96);
}


/* Tag Cloud Wrapper */
.wp-block-tag-cloud{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
}

/* Tag Link Style */
.wp-block-tag-cloud .tag-cloud-link{
    display: inline-block;
    padding: 10px 18px;
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
    font-size: 14px !important;
    font-weight: 600;
    border-radius: 50px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    line-height: 1;
}

/* Hover Effect */
.wp-block-tag-cloud .tag-cloud-link:hover{
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

/* Active Click */
.wp-block-tag-cloud .tag-cloud-link:active{
    transform: scale(0.96);
}

/* Responsive */
@media (max-width: 768px){

    .wp-block-tag-cloud{
        gap: 10px;
    }

    .wp-block-tag-cloud .tag-cloud-link{
        padding: 8px 14px;
        font-size: 13px !important;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark){

    .wp-block-tag-cloud .tag-cloud-link{
        background: #1f2937;
        color: #f3f4f6;
        border-color: #374151;
    }
}

/* =========================================
   ULTRA SMALL DEVICES
========================================= */

@media (max-width: 480px){

    .sidebar-widget{
        padding: 18px;
        border-radius: 14px;
    }

    .sidebar-widget .widget-title{
        margin-bottom: 18px;
    }

    .sidebar-widget .wp-block-tag-cloud{
        gap: 10px;
    }

    .sidebar-widget .wp-block-tag-cloud .tag-cloud-link{
        width: auto;
        max-width: 100%;
    }
}

/* =========================================
   TABLETS
========================================= */

@media (min-width: 481px) and (max-width: 991px){

    .sidebar-widget{
        padding: 24px;
    }

    .sidebar-widget .wp-block-tag-cloud{
        gap: 12px;
    }
}

/* =========================================
   LARGE DESKTOPS
========================================= */

@media (min-width: 1400px){

    .sidebar-widget{
        padding: 34px;
    }

    .sidebar-widget .widget-title{
        margin-bottom: 26px;
    }

    .sidebar-widget .wp-block-tag-cloud{
        gap: 14px;
    }
}

/* =========================================
   ACCESSIBILITY & TOUCH SUPPORT
========================================= */

@media (hover: none){

    .sidebar-widget:hover{
        transform: none;
    }

    .sidebar-widget .tag-cloud-link:hover{
        transform: none;
    }
}

/* =========================================
   DARK MODE SUPPORT
========================================= */

@media (prefers-color-scheme: dark){

    .sidebar-widget{
        background: #111827;
        border-color: #1f2937;
        box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    }

    .sidebar-widget .widget-title{
        color: #f9fafb;
    }

    .sidebar-widget .wp-block-tag-cloud .tag-cloud-link{
        background: #1f2937;
        color: #e5e7eb;
    }

    .sidebar-widget .wp-block-tag-cloud .tag-cloud-link:hover{
        color: #ffffff;
    }
}