/**
 * WooCommerce Category Accordion v3.0
 * Modern CSS with custom properties, themes, dark mode, accessibility.
 *
 * @author  TechieResource
 * @package woocommerce-category-accordion
 */

/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */
:root {
    --trwca-primary: #1A56DB;
    --trwca-primary-hover: #1447B8;
    --trwca-text: #1e293b;
    --trwca-text-sub: #64748b;
    --trwca-bg: #ffffff;
    --trwca-bg-sub: #f8fafc;
    --trwca-bg-hover: #f1f5f9;
    --trwca-border: #e2e8f0;
    --trwca-active-bg: var(--trwca-primary);
    --trwca-active-text: #ffffff;
    --trwca-count-bg: #e2e8f0;
    --trwca-count-text: #64748b;
    --trwca-radius: 6px;
    --trwca-speed: 300ms;
    --trwca-font-size: 14px;
    --trwca-line-height: 1.5;
}

/* ============================================================
   Base Accordion Styles
   ============================================================ */
.trwca-accordion-wrap {
    font-size: var(--trwca-font-size);
    line-height: var(--trwca-line-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.trwca-accordion,
.trwca-accordion ul,
.trwca-accordion li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trwca-accordion .trwca-submenu {
    display: none;
}

.trwca-accordion .trwca-submenu.trwca-open {
    display: block;
}

/* ============================================================
   Links / Items
   ============================================================ */
.trwca-accordion .trwca-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--trwca-text);
    background: var(--trwca-bg);
    border-bottom: 1px solid var(--trwca-border);
    transition: background-color var(--trwca-speed) ease,
                color var(--trwca-speed) ease;
    cursor: pointer;
    outline: none;
    text-transform: capitalize;
    width: 100%;
    box-sizing: border-box;
}

.trwca-accordion .trwca-link:hover,
.trwca-accordion .trwca-link:focus-visible {
    background: var(--trwca-bg-hover);
    color: var(--trwca-primary);
}

.trwca-accordion .trwca-link:focus-visible {
    box-shadow: inset 0 0 0 2px var(--trwca-primary);
    border-radius: var(--trwca-radius);
}

/* Active / Current */
.trwca-accordion .trwca-current > .trwca-link,
.trwca-accordion .trwca-link.trwca-active {
    font-weight: 600;
    color: var(--trwca-primary);
}

.trwca-accordion .trwca-current-ancestor > .trwca-link {
    font-weight: 600;
}

/* Dark-theme active overrides — var(--trwca-primary) is the same dark color as
   the background in these themes, so the base active rule makes text invisible. */
.trwca-theme-dark .trwca-link.trwca-active {
    color: #fff;
}

.trwca-theme-darkblue .trwca-submenu .trwca-link.trwca-active {
    color: #fff;
    border-left-color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   Icons (SVG-based)
   ============================================================ */
.trwca-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform var(--trwca-speed) ease;
}

.trwca-icon svg {
    width: 14px;
    height: 14px;
}

.trwca-link[aria-expanded="true"] > .trwca-icon {
    transform: rotate(0deg);
}

.trwca-link[aria-expanded="false"] > .trwca-icon {
    transform: rotate(0deg);
}

/* ============================================================
   Product Count Badge
   ============================================================ */
.trwca-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--trwca-count-text);
    background: var(--trwca-count-bg);
    border-radius: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.trwca-link .trwca-count + .trwca-icon {
    margin-left: 6px;
}

/* ============================================================
   Submenu Indentation
   ============================================================ */

/* Fill the entire submenu container and reset any theme margin.
   Specificity (0,3,0) beats Storefront (0,1,2) and TwentyTwelve's .widget-area .widget ul ul (0,2,2). */
.trwca-accordion-wrap .trwca-accordion .trwca-submenu {
    background: var(--trwca-bg-sub);
    margin-left: 0 !important;
    padding: 0;
}

.trwca-accordion .trwca-submenu .trwca-link {
    padding-left: 28px;
    font-size: 13px;
    color: var(--trwca-text-sub);
    background: var(--trwca-bg-sub);
}

.trwca-accordion .trwca-submenu .trwca-submenu .trwca-link {
    padding-left: 42px;
    font-size: 12.5px;
}

.trwca-accordion .trwca-submenu .trwca-submenu .trwca-submenu .trwca-link {
    padding-left: 56px;
    font-size: 12px;
}

/* ============================================================
   Empty State
   ============================================================ */
.trwca-empty {
    padding: 20px;
    text-align: center;
    color: var(--trwca-text-sub);
    font-style: italic;
}

/* ============================================================
   THEMES
   ============================================================ */

/* --- Light (default) --- */
.trwca-theme-light {
    /* Uses root defaults */
}

/* --- Classic --- */
.trwca-theme-classic {
    --trwca-bg: transparent;
    --trwca-bg-sub: transparent;
    --trwca-border: #f0f0f0;
}
.trwca-theme-classic .trwca-link {
    border-bottom: 1px solid #f0f0f0;
}

/* --- Blue --- */
.trwca-theme-blue {
    --trwca-primary: #0099cc;
    --trwca-primary-hover: #0087b7;
}
.trwca-theme-blue > .trwca-accordion > .trwca-item > .trwca-link {
    background: var(--trwca-primary);
    color: #fff;
    border-bottom-color: var(--trwca-primary-hover);
}
.trwca-theme-blue > .trwca-accordion > .trwca-item > .trwca-link:hover {
    background: var(--trwca-primary-hover);
    color: #fff;
}
.trwca-theme-blue .trwca-submenu .trwca-link {
    color: var(--trwca-primary);
}
.trwca-theme-blue .trwca-submenu .trwca-link:hover {
    background: var(--trwca-primary);
    color: #fff;
}

/* --- Dark Blue --- */
.trwca-theme-darkblue {
    --trwca-primary: #414956;
    --trwca-primary-hover: #3b424d;
}
.trwca-theme-darkblue > .trwca-accordion > .trwca-item > .trwca-link {
    background: var(--trwca-primary);
    color: #fff;
    border-bottom-color: var(--trwca-primary-hover);
}
.trwca-theme-darkblue > .trwca-accordion > .trwca-item > .trwca-link:hover {
    background: var(--trwca-primary-hover);
    color: #fff;
}
.trwca-theme-darkblue .trwca-submenu {
    background: #383838;
}

.trwca-theme-darkblue .trwca-submenu .trwca-link {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border-left: 3px solid rgba(255, 255, 255, 0.25);
}

.trwca-theme-darkblue .trwca-submenu .trwca-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    border-left-color: rgba(255, 255, 255, 0.6);
}

/* --- Green --- */
.trwca-theme-green {
    --trwca-primary: #03a678;
    --trwca-primary-hover: #049372;
}
.trwca-theme-green > .trwca-accordion > .trwca-item > .trwca-link {
    background: var(--trwca-primary);
    color: #fff;
    border-bottom-color: var(--trwca-primary-hover);
}
.trwca-theme-green > .trwca-accordion > .trwca-item > .trwca-link:hover {
    background: var(--trwca-primary-hover);
    color: #fff;
}
.trwca-theme-green .trwca-submenu .trwca-link { color: var(--trwca-primary-hover); }
.trwca-theme-green .trwca-submenu .trwca-link:hover { background: var(--trwca-primary); color: #fff; }

/* --- Turquoise --- */
.trwca-theme-turquoise {
    --trwca-primary: #34b8b6;
    --trwca-primary-hover: #2ca19f;
}
.trwca-theme-turquoise > .trwca-accordion > .trwca-item > .trwca-link {
    background: var(--trwca-primary);
    color: #fff;
    border-bottom-color: var(--trwca-primary-hover);
}
.trwca-theme-turquoise > .trwca-accordion > .trwca-item > .trwca-link:hover {
    background: var(--trwca-primary-hover);
    color: #fff;
}
.trwca-theme-turquoise .trwca-submenu .trwca-link { color: var(--trwca-primary-hover); }
.trwca-theme-turquoise .trwca-submenu .trwca-link:hover { background: var(--trwca-primary); color: #fff; }

/* --- Red --- */
.trwca-theme-red {
    --trwca-primary: #ed5565;
    --trwca-primary-hover: #da4453;
}
.trwca-theme-red > .trwca-accordion > .trwca-item > .trwca-link {
    background: var(--trwca-primary);
    color: #fff;
    border-bottom-color: var(--trwca-primary-hover);
}
.trwca-theme-red > .trwca-accordion > .trwca-item > .trwca-link:hover {
    background: var(--trwca-primary-hover);
    color: #fff;
}
.trwca-theme-red .trwca-submenu .trwca-link { color: var(--trwca-primary-hover); }
.trwca-theme-red .trwca-submenu .trwca-link:hover { background: var(--trwca-primary); color: #fff; }

/* --- Purple --- */
.trwca-theme-purple {
    --trwca-primary: #800080;
    --trwca-primary-hover: #640264;
}
.trwca-theme-purple > .trwca-accordion > .trwca-item > .trwca-link {
    background: var(--trwca-primary);
    color: #fff;
    border-bottom-color: var(--trwca-primary-hover);
}
.trwca-theme-purple > .trwca-accordion > .trwca-item > .trwca-link:hover {
    background: var(--trwca-primary-hover);
    color: #fff;
}
.trwca-theme-purple .trwca-submenu .trwca-link { color: var(--trwca-primary-hover); }
.trwca-theme-purple .trwca-submenu .trwca-link:hover { background: var(--trwca-primary); color: #fff; }

/* --- Pink --- */
.trwca-theme-pink {
    --trwca-primary: #FF8AA0;
    --trwca-primary-hover: #FE7C92;
}
.trwca-theme-pink > .trwca-accordion > .trwca-item > .trwca-link {
    background: var(--trwca-primary);
    color: #fff;
    border-bottom-color: var(--trwca-primary-hover);
}
.trwca-theme-pink > .trwca-accordion > .trwca-item > .trwca-link:hover {
    background: var(--trwca-primary-hover);
    color: #fff;
}
.trwca-theme-pink .trwca-submenu .trwca-link { color: var(--trwca-primary-hover); }
.trwca-theme-pink .trwca-submenu .trwca-link:hover { background: var(--trwca-primary); color: #fff; }

/* --- Orange --- */
.trwca-theme-orange {
    --trwca-primary: #FF681F;
    --trwca-primary-hover: #FF4A1F;
}
.trwca-theme-orange > .trwca-accordion > .trwca-item > .trwca-link {
    background: var(--trwca-primary);
    color: #fff;
    border-bottom-color: var(--trwca-primary-hover);
}
.trwca-theme-orange > .trwca-accordion > .trwca-item > .trwca-link:hover {
    background: var(--trwca-primary-hover);
    color: #fff;
}
.trwca-theme-orange .trwca-submenu .trwca-link { color: var(--trwca-primary-hover); }
.trwca-theme-orange .trwca-submenu .trwca-link:hover { background: var(--trwca-primary); color: #fff; }

/* --- Yellow --- */
.trwca-theme-yellow {
    --trwca-primary: #ea9f14;
    --trwca-primary-hover: #c58715;
}
.trwca-theme-yellow > .trwca-accordion > .trwca-item > .trwca-link {
    background: var(--trwca-primary);
    color: #fff;
    border-bottom-color: var(--trwca-primary-hover);
}
.trwca-theme-yellow > .trwca-accordion > .trwca-item > .trwca-link:hover {
    background: var(--trwca-primary-hover);
    color: #fff;
}
.trwca-theme-yellow .trwca-submenu .trwca-link { color: var(--trwca-primary-hover); }
.trwca-theme-yellow .trwca-submenu .trwca-link:hover { background: var(--trwca-primary); color: #fff; }

/* --- Brown --- */
.trwca-theme-brown {
    --trwca-primary: #964B00;
    --trwca-primary-hover: #703801;
}
.trwca-theme-brown > .trwca-accordion > .trwca-item > .trwca-link {
    background: var(--trwca-primary);
    color: #fff;
    border-bottom-color: var(--trwca-primary-hover);
}
.trwca-theme-brown > .trwca-accordion > .trwca-item > .trwca-link:hover {
    background: var(--trwca-primary-hover);
    color: #fff;
}
.trwca-theme-brown .trwca-submenu .trwca-link { color: var(--trwca-primary-hover); }
.trwca-theme-brown .trwca-submenu .trwca-link:hover { background: var(--trwca-primary); color: #fff; }

/* --- Dark --- */
.trwca-theme-dark {
    --trwca-primary: #292929;
    --trwca-primary-hover: #222;
    --trwca-text: #f1f5f9;
    --trwca-bg: #292929;
    --trwca-bg-sub: #383838;
    --trwca-border: #444;
    --trwca-bg-hover: #333;
    --trwca-count-bg: #444;
    --trwca-count-text: #ccc;
}
.trwca-theme-dark .trwca-link {
    color: #fff;
}
.trwca-theme-dark .trwca-submenu .trwca-link {
    color: #ddd;
}
.trwca-theme-dark .trwca-link:hover {
    background: var(--trwca-primary-hover);
    color: #fff;
}

/* ============================================================
   RTL Support
   ============================================================ */
.trwca-rtl {
    direction: rtl;
}
.trwca-rtl .trwca-link {
    text-align: right;
}
.trwca-rtl .trwca-icon {
    margin-left: 0;
    margin-right: auto;
}
.trwca-rtl .trwca-accordion .trwca-submenu .trwca-link {
    padding-left: 14px;
    padding-right: 28px;
}
.trwca-rtl .trwca-accordion .trwca-submenu .trwca-submenu .trwca-link {
    padding-right: 42px;
}

/* ============================================================
   Dark Mode (auto-detect)
   ============================================================ */
@media (prefers-color-scheme: dark) {
    .trwca-theme-light {
        --trwca-text: #e2e8f0;
        --trwca-text-sub: #94a3b8;
        --trwca-bg: #1e293b;
        --trwca-bg-sub: #0f172a;
        --trwca-bg-hover: #334155;
        --trwca-border: #334155;
        --trwca-count-bg: #334155;
        --trwca-count-text: #94a3b8;
    }
    .trwca-theme-classic {
        --trwca-text: #e2e8f0;
        --trwca-border: #334155;
    }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 480px) {
    .trwca-accordion .trwca-link {
        padding: 12px 12px;
        font-size: 13px;
    }
    .trwca-accordion .trwca-submenu .trwca-link {
        padding-left: 24px;
    }
}