/**
 * Qing Category Accordion widget styles.
 *
 * Parent category header (eyebrow + title + icon + chevron) that expands to
 * a list of child categories. Child icons come from the WooCommerce category
 * image, so a child with no image simply has no icon element.
 */

.qing-catAccordion {
    --qing-ca-text: #2f2b28;
    --qing-ca-muted: #6b6560;
    --qing-ca-border: #eae5df;
    box-sizing: border-box;
}

.qing-catAccordion *,
.qing-catAccordion *::before,
.qing-catAccordion *::after {
    box-sizing: inherit;
}

/* ---------- Header ---------- */
/* The divider lives on the parent header so it shows whether the item is
   open or closed. Child rows deliberately have no dividers. */
.qing-catAccordion__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--qing-ca-border);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.qing-catAccordion__header:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* A parent with no children can't expand, so it shouldn't invite a click. */
.qing-catAccordion__item.is-childless .qing-catAccordion__header {
    cursor: default;
}

.qing-catAccordion__headerText {
    min-width: 0; /* lets long titles wrap instead of pushing the icon out */
}

.qing-catAccordion__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--qing-ca-muted);
    font-size: 14px;
    line-height: 1.4;
}

.qing-catAccordion__parentTitle {
    display: block;
    color: #1f1c1a;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

a.qing-catAccordion__parentTitle:hover {
    text-decoration: none;
}

.qing-catAccordion__count {
    color: var(--qing-ca-muted);
    font-weight: 400;
}

/* Right-hand side of the header: category icon + chevron. */
.qing-catAccordion__headerAside {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.qing-catAccordion__parentIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    line-height: 0;
}

.qing-catAccordion__parentIcon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qing-catAccordion__parentIcon svg {
    width: 100%;
    height: 100%;
}

/* ---------- Toggle ---------- */
.qing-catAccordion__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #9a938c;
    line-height: 0;
    transition: transform 0.25s ease, color 0.2s ease;
}

.qing-catAccordion__toggle svg {
    display: block;
}

.qing-catAccordion.qing-toggle-rotate .qing-catAccordion__item.is-open .qing-catAccordion__toggle {
    transform: rotate(180deg);
}

/* ---------- Panel ---------- */
/* No border here: the parent header already draws the line above the panel. */
.qing-catAccordion__panel {
    overflow: hidden;
}

/* The JS animates max-height; [hidden] alone would jump. Declared here so a
   closed panel is still hidden if JS never runs. */
.qing-catAccordion__panel[hidden] {
    display: none;
}

.qing-catAccordion__children {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- Child rows ---------- */
/* Intentionally no dividers between children — only parents are separated. */

.qing-catAccordion__childLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 10px 0;
    color: var(--qing-ca-text);
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.qing-catAccordion__childLink:hover {
    text-decoration: none;
}

.qing-catAccordion__childName {
    min-width: 0;
}

/* Icon box. Only present when the category has an uploaded image, so there
   is no empty-space reservation to worry about. */
.qing-catAccordion__childIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    line-height: 0;
}

.qing-catAccordion__childIcon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Icon on the left instead of the right. */
.qing-catAccordion.qing-icon-left .qing-catAccordion__childLink {
    justify-content: flex-start;
}

.qing-catAccordion.qing-icon-left .qing-catAccordion__childIcon {
    order: -1;
}

.qing-catAccordion.qing-icon-left .qing-catAccordion__childName {
    flex: 1 1 auto;
}

/* ============================================================
 * Drawer mode
 *
 * With drawer mode on, the accordion is moved out of the flow and into a
 * panel that slides in from the left, opened by a span trigger. The
 * accordion rules above are untouched -- they apply just the same inside
 * the drawer, so the two modes cannot drift apart.
 * ============================================================ */

.qing-caDrawer {
    --qing-cad-width: 380px;
    --qing-cad-bg: #ffffff;
    --qing-cad-scrim: rgba(35, 32, 29, 0.5);
    --qing-cad-speed: 0.32s;
    --qing-cad-border: #eae5df;
    box-sizing: border-box;
}

.qing-caDrawer *,
.qing-caDrawer *::before,
.qing-caDrawer *::after {
    box-sizing: inherit;
}

/* ---------- Trigger ---------- */
/* A span, so it needs role/tabindex from the PHP to be reachable by
   keyboard -- the browser gives none of that to a span. */
.qing-caDrawer__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border: 1px solid var(--qing-cad-border);
    border-radius: 4px;
    color: #2f2b28;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.qing-caDrawer__trigger:hover {
    border-color: #b3946f;
    color: #b3946f;
}

.qing-caDrawer__trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.qing-caDrawer__triggerIcon {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
}

.qing-caDrawer__triggerIcon svg {
    display: block;
    width: 1.15em;
    height: 1.15em;
}

/* Named so the label can be targeted on its own; the flex parent already
   places it, but a bare span with no rule is easy to break later. */
.qing-caDrawer__triggerText {
    display: inline-block;
}

/* ---------- Scrim ---------- */
/* Separate element rather than a pseudo on the panel: it has to cover the
   viewport while the panel is only a strip down the left. */
.qing-caDrawer__scrim {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--qing-cad-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--qing-cad-speed) ease, visibility var(--qing-cad-speed) ease;
}

/* ---------- Panel ---------- */
/* Slid out with translate rather than left/width so the animation stays on
   the compositor and does not relayout the page on every frame. */
.qing-caDrawer__panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: var(--qing-cad-width);
    max-width: 100vw;
    height: 100%;
    background: var(--qing-cad-bg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--qing-cad-speed) cubic-bezier(0.22, 0.61, 0.36, 1), visibility var(--qing-cad-speed) ease;
}

/* ---------- Open state ---------- */
/* Driven by a class on the wrapper so one toggle moves both parts. */
.qing-caDrawer.is-open .qing-caDrawer__scrim {
    opacity: 1;
    visibility: visible;
}

.qing-caDrawer.is-open .qing-caDrawer__panel {
    transform: translateX(0);
    visibility: visible;
}

/* ---------- Panel head ---------- */
.qing-caDrawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 18px 20px;
    border-bottom: 1px solid var(--qing-cad-border);
}

.qing-caDrawer__title {
    margin: 0;
    color: #2f2b28;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.qing-caDrawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b6560;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.qing-caDrawer__close:hover {
    background: rgba(35, 32, 29, 0.06);
    color: #2f2b28;
}

/* ---------- Scrollable body ---------- */
/* The accordion goes in here. min-height:0 is what lets a flex child
   actually scroll instead of growing past the panel. */
.qing-caDrawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 24px;
}

/* Inside the drawer the accordion supplies no padding of its own -- the
   body above already has it, and the widget padding control targets the
   accordion, which would double up. */
.qing-caDrawer__body .qing-catAccordion {
    max-width: none;
}

/* ---------- Page scroll lock ---------- */
/* Set on <html> by the script while the drawer is open. Without it the
   page behind scrolls when the drawer list is already at its end. */
html.qing-caDrawer-lock,
html.qing-caDrawer-lock body {
    overflow: hidden;
}

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

    /* Leave a sliver of the page visible so it stays obvious the drawer is
       an overlay and not a new screen. */
    .qing-caDrawer__panel {
        width: min(var(--qing-cad-width), calc(100vw - 44px));
    }

    .qing-caDrawer__body {
        padding: 8px 16px 20px;
    }

    .qing-caDrawer__head {
        padding: 16px;
    }
}

/* The slide is decoration; the drawer still opens and closes. */
@media (prefers-reduced-motion: reduce) {

    .qing-caDrawer__panel,
    .qing-caDrawer__scrim {
        transition-duration: 0.01ms;
    }
}

/* ============================================================
 * Drawer: mobile only
 *
 * Above the breakpoint the drawer parts are switched off and the accordion
 * returns to the normal flow, so one widget covers both layouts: a button
 * on phones, a plain inline list on desktop.
 *
 * min-width is used rather than wrapping the drawer rules in a max-width
 * query, because the drawer block above is also what the Elementor editor
 * renders -- keeping its rules unconditional means the preview matches.
 * ============================================================ */
@media (min-width: 1025px) {

    .qing-caDrawer__trigger,
    .qing-caDrawer__scrim,
    .qing-caDrawer__head {
        display: none;
    }

    /* Undo the fixed panel: no transform, no viewport height, no shadow --
       it is just a wrapper around the list again. */
    .qing-caDrawer__panel {
        position: static;
        width: auto;
        max-width: none;
        height: auto;
        transform: none;
        visibility: visible;
        background: transparent;
        transition: none;
    }

    .qing-caDrawer__body {
        overflow: visible;
        padding: 0;
    }

    /* The lock class can survive a resize while the drawer was open, which
       would leave the desktop page unscrollable. */
    html.qing-caDrawer-lock,
    html.qing-caDrawer-lock body {
        overflow: visible;
    }
}

/* ============================================================
 * Trigger: button + label
 *
 * Sized to its content, not the container: the button sits inline like a
 * control rather than a full-width bar.
 * ============================================================ */
@media (max-width: 1024px) {

    .qing-caDrawer__trigger {
        display: inline-flex;
        width: auto;
        gap: 10px;
        padding: 11px 18px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    /* No flex-grow here: letting the label stretch is what would pull the
       button out to the full row again. */
    .qing-caDrawer__triggerText {
        flex: 0 1 auto;
    }

    /* Chevron after the label, hinting the panel arrives from the side. */
    .qing-caDrawer__trigger::after {
        content: "";
        flex: none;
        width: 7px;
        height: 7px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(45deg);
        opacity: 0.55;
    }
}