/*==============================================================
 * DOITUK - MJS ENERGY
 * DIVI 5 CHILD THEME - PORTFOLIO STYLING
 *
 * File: /css/portfolio.css
 *
 * PURPOSE:
 * Styles MJS Energy's case-study portfolio and project tags.
 *
 * Divi module class: case_portfolio
 * JavaScript: /js/portfolio-tags.js
 *
 * Includes:
 * - Filterable portfolio buttons
 * - Active and hover states
 * - Responsive portfolio filters
 * - Project tag links
 * - Keyboard accessibility
 *==============================================================*/


/*==============================================================
 * 1. PORTFOLIO FILTER DESIGN VARIABLES
 *==============================================================*/

.case_portfolio {
    --filter-background: #111111;
    --filter-text: #ffffff;
    --filter-border: #8cc63f;

    --filter-hover-background: #222222;
    --filter-hover-text: #8cc63f;
    --filter-hover-border: #8cc63f;

    --filter-active-background: #2b2b2b;
    --filter-active-text: #ffffff;
    --filter-active-border: #8cc63f;

    --filter-focus: #8cc63f;

    --filter-gap: 8px;
    --filter-padding: 10px 16px;
    --filter-radius: 3px;
    --filter-font-size: 16px;
    --filter-font-weight: 600;
}


/*==============================================================
 * 2. PORTFOLIO FILTER CONTAINER
 *==============================================================*/

/*--------------------------------------------------------------
 * Space Below Category Filters
 *--------------------------------------------------------------*/

.case_portfolio .et_pb_portfolio_filters {
    margin-bottom: 35px;
}


/*==============================================================
 * 3. FILTER BUTTON LAYOUT
 *==============================================================*/

/*--------------------------------------------------------------
 * Centre the Filter Buttons
 *
 * Uses flexbox rather than the older floated layout.
 *--------------------------------------------------------------*/

.case_portfolio .et_pb_portfolio_filters ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: var(--filter-gap);

    margin: 0;
    padding: 0;
}

.case_portfolio .et_pb_portfolio_filters li {
    float: none;

    width: auto !important;

    margin: 0 !important;
    padding: 0;
}


/*==============================================================
 * 4. STANDARD FILTER BUTTONS
 *==============================================================*/

/*--------------------------------------------------------------
 * Dark Background with MJS Green Border
 *--------------------------------------------------------------*/

.case_portfolio .et_pb_portfolio_filters li a {
    display: block;

    margin: 0 !important;
    padding: var(--filter-padding) !important;

    background-color: var(--filter-background) !important;
    color: var(--filter-text) !important;

    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;

    font-size: var(--filter-font-size);
    font-weight: var(--filter-font-weight);
    line-height: 1.3;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/*==============================================================
 * 5. FILTER BUTTON HOVER
 *==============================================================*/

.case_portfolio .et_pb_portfolio_filters li a:hover {
    background-color: var(--filter-hover-background) !important;
    color: var(--filter-hover-text) !important;
    border-color: var(--filter-hover-border) !important;
}


/*==============================================================
 * 6. ACTIVE PORTFOLIO FILTER
 *==============================================================*/

.case_portfolio .et_pb_portfolio_filters li a.active {
    background-color: var(--filter-active-background) !important;
    color: var(--filter-active-text) !important;
    border-color: var(--filter-active-border) !important;

    box-shadow:
        inset 0 -3px 0 var(--filter-active-border);
}


/*==============================================================
 * 7. KEYBOARD ACCESSIBILITY
 *==============================================================*/

.case_portfolio .et_pb_portfolio_filters li a:focus-visible {
    outline: 2px solid var(--filter-focus);
    outline-offset: 2px;
}


/*==============================================================
 * 8. PORTFOLIO PROJECT TAGS
 *==============================================================*/

/*--------------------------------------------------------------
 * Project Tags Displayed Below Portfolio Titles
 *
 * Existing class: portfolio-tags
 *
 * Retained for compatibility with portfolio-tags.js.
 *--------------------------------------------------------------*/

.portfolio-tags {
    margin-top: 0.5em;

    font-size: 14px;
    line-height: 1.5;

    color: #666666;
}


/*==============================================================
 * 9. PROJECT TAG LINKS
 *==============================================================*/

.portfolio-tags a.portfolio-tag {
    color: #0d6efd;

    text-decoration: none;

    margin-right: 5px;
}

.portfolio-tags a.portfolio-tag:hover,
.portfolio-tags a.portfolio-tag:focus {
    text-decoration: underline;
}


/*==============================================================
 * 10. MOBILE PORTFOLIO FILTERS
 *==============================================================*/

@media only screen and (max-width: 767px) {

    .case_portfolio .et_pb_portfolio_filters ul {
        justify-content: flex-start;
        gap: 6px;
    }

    .case_portfolio .et_pb_portfolio_filters li a {
        padding: 9px 12px !important;
        font-size: 14px;
    }

}


/*==============================================================
 * 11. REDUCED MOTION ACCESSIBILITY
 *==============================================================*/

@media (prefers-reduced-motion: reduce) {

    .case_portfolio .et_pb_portfolio_filters li a {
        transition: none;
    }

}


/*==============================================================
 * END OF MJS ENERGY PORTFOLIO STYLING
 *==============================================================*/