/*
* Description: Interactive components — behavior only (structure, motion, a11y hooks)
* Author: C Studio
* Version: 1.2.0
* Update: 26-05-20
*
* No colors, borders, or project spacing tokens — set those in etch-theme/css/c-*.css
*
* Accordion: [data-etch-accordion] on .c-accordion
*   data-etch-accordion-open-first | data-etch-accordion-allow-multiple (Etch)
*   data-etch-accordion-mode="multiple" | data-etch-accordion="2" | "1,3"
*
* Tabs: [data-etch-tabs] on .c-tabs — data-etch-tab-trigger / data-etch-tab-panel
*   .c-tabs.toggle — sliding pill on .c-tabs__list + .c-tabs__bg
*
* Toggle switch: [data-etch-toggle] on .c-toggle — .c-toggle__switch (role="switch")
* Toggle option: [data-etch-toggle] on .c-toggle-option — .c-toggle-option__bg / __trigger
*
* Dropdown: [data-etch-dropdown] on .c-dropdown — .c-dropdown__trigger / __panel
*
* Modal: [data-etch-modal] on .c-modal — .c-modal__dialog / __panel
*   [data-etch-modal-trigger="{name}"] — open (anywhere, e.g. header)
*   [data-etch-modal-close] — close button; click stage/overlay; Escape
*   [data-modal-open-delay="5000"] — auto-open after ms (first of delay|scroll wins)
*   [data-modal-open-scroll="100dvh"] — auto-open after scroll (px|vh|dvh|%); Alpine store or data-etch-modal
*
* Filter: .cj-filter + #cj-hub — data-filter triggers per [data-etch-filter-group], data-hub on items
*
* Tooltip: [data-etch-tooltip] on .c-tooltip — CSS hover/focus; y/x dynamic via etch-alpine.js
*
* JS: core/js/etch-alpine.js, core/js/etch-filter.js
 */

/* --------------------------------------------------------------------------
   Shared
   -------------------------------------------------------------------------- */

[x-cloak] {
    display: none !important;
}

/* Closed until etch-alpine binds (avoids flash of all panels open) */
[data-etch-accordion]:not([data-etch-bound]) .c-accordion__panel {
    grid-template-rows: 0fr;
}

[data-etch-tabs]:not([data-etch-bound]) .c-tabs__panel {
    display: none;
}

[data-etch-tabs]:not([data-etch-bound]) .c-tabs__panel:first-child {
    display: block;
}

[data-etch-dropdown]:not([data-etch-bound]) .c-dropdown__panel {
    pointer-events: none;
    visibility: hidden;
}

[data-etch-modal]:not(.is-open) .c-modal__dialog,
[data-etch-modal]:not([data-etch-bound]) .c-modal__dialog {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

body.is-modal-open {
    overflow: hidden;
}

/* Etch editor: modals must not block canvas scroll or cover the page */
html.is-etch-editor,
html:has(body.is-etch-editor) {
    overflow: auto !important;
    overscroll-behavior: auto !important;
}

body.is-etch-editor,
html:has(#etch-builder) body {
    overflow: auto !important;
}

body.is-etch-editor .c-modal,
body.is-etch-editor .c-modal__dialog,
body.is-etch-editor .c-modal__overlay,
body.is-etch-editor .c-modal__stage,
body.is-etch-editor [x-dialog],
html:has(#etch-builder) .c-modal,
html:has(#etch-builder) .c-modal__dialog,
html:has(#etch-builder) [x-dialog] {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

body.is-etch-editor.is-modal-open,
html:has(#etch-builder) body.is-modal-open {
    overflow: auto !important;
}

[data-etch-toggle]:not([data-etch-bound]).c-toggle-option {
    --toggle-active: 0;
}

[data-etch-tabs]:not([data-etch-bound]).toggle .c-tabs__list {
    --toggle-active: 0;
}

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */

.c-accordion__item :where(h2, h3, h4, h5, h6) {
    font: inherit;
    margin: 0;
}

.c-accordion__trigger {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    appearance: none;
    background: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 0.75em;
    justify-content: space-between;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit;
    width: 100%;
}

.c-accordion__trigger:focus {
    outline: none;
}

.c-accordion__title {
    flex: 1;
    min-width: 0;
}

.c-accordion__icon {
    flex-shrink: 0;
    pointer-events: none;
}

/* Height animation: panel → collapse (preferred) or content */
.c-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.35s ease;
}

.c-accordion__panel.is-open {
    grid-template-rows: 1fr;
}

.c-accordion__panel > .c-accordion__collapse {
    min-height: 0;
    overflow: hidden;
}

/* Legacy: panel → content (no __collapse wrapper) */
.c-accordion__panel:not(:has(.c-accordion__collapse)) > .c-accordion__content {
    min-height: 0;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .c-accordion__panel {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.c-tabs {
    display: block;
    width: 100%;
}

.c-tabs__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    list-style: none;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0;
    scrollbar-width: thin;
}

.c-tabs__item {
    flex-shrink: 0;
    margin: 0;
}

.c-tabs__trigger {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    appearance: none;
    background: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    line-height: inherit;
    margin: 0;
    text-align: inherit;
    white-space: nowrap;
}

.c-tabs__trigger:focus {
    outline: none;
}

.c-tabs__panels {
    display: block;
    position: relative;
}

.c-tabs__panel {
    display: none;
}

.c-tabs__panel.is-open,
.c-tabs__panel[aria-hidden="false"] {
    display: block;
}

.c-tabs__panel :where(h2, h3, h4, h5, h6) {
    font: inherit;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Toggle switch (on/off)
   -------------------------------------------------------------------------- */

.c-toggle__switch {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    box-sizing: border-box;
    font: inherit;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Toggle option (segmented control)
   -------------------------------------------------------------------------- */

.c-toggle-option {
    display: inline-flex;
    max-width: 100%;
    position: relative;
    vertical-align: middle;
    width: auto;
}

.c-toggle-option__bg {
    pointer-events: none;
    position: absolute;
}

.c-toggle-option__trigger {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    font: inherit;
    margin: 0;
    text-align: inherit;
    white-space: nowrap;
}

.c-toggle-option__trigger:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Dropdown
   -------------------------------------------------------------------------- */

.c-dropdown {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.c-dropdown__trigger {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    appearance: none;
    background: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 0.5em;
    justify-content: center;
    line-height: inherit;
    margin: 0;
    text-align: inherit;
    white-space: nowrap;
}

.c-dropdown__trigger:focus {
    outline: none;
}

.c-dropdown__label {
    min-width: 0;
}

.c-dropdown__icon {
    flex-shrink: 0;
    pointer-events: none;
}

.c-dropdown__panel {
    margin: 0;
    min-width: 12rem;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    visibility: hidden;
    z-index: 20;
}

.c-dropdown.start .c-dropdown__panel,
.c-dropdown:not(.end) .c-dropdown__panel {
    left: 0;
    right: auto;
}

.c-dropdown.end .c-dropdown__panel {
    left: auto;
    right: 0;
}

.c-dropdown.is-open .c-dropdown__panel,
.c-dropdown__panel[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
}

.c-dropdown__item {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    font: inherit;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.c-dropdown__item:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

.c-modal__dialog {
    transition:
        opacity var(--time-in) var(--bezier-in),
        visibility var(--time-in) var(--bezier-in);
}

.c-modal.is-open .c-modal__dialog {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   Filter (etch-filter.js) — visibility only
   -------------------------------------------------------------------------- */

[data-etch-filter-item][hidden],
[data-etch-filter-hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Tooltip (CSS-only)
   -------------------------------------------------------------------------- */

[data-etch-tooltip] {
    position: relative;
}

[data-etch-tooltip] .c-tooltip__box {
    opacity: 0;
    transition:
        opacity var(--time-normal) var(--bezier-bounce),
        visibility 0s linear var(--time-normal);
    visibility: hidden;
}

[data-etch-tooltip]:is(:hover, :focus-within) .c-tooltip__box:not(.is-dynamic),
[data-etch-tooltip].is-tooltip-open .c-tooltip__box.is-dynamic,
[data-etch-tooltip] .c-tooltip__trigger:focus-visible + .c-tooltip__box:not(.is-dynamic) {
    opacity: 1;
    transition-delay: 0s;
    visibility: visible;
}

[data-etch-tooltip]:is(:hover, :focus-within) .c-tooltip__box:not(.is-dynamic) .c-tooltip__box-inner,
[data-etch-tooltip].is-tooltip-open .c-tooltip__box.is-dynamic .c-tooltip__box-inner,
[data-etch-tooltip] .c-tooltip__trigger:focus-visible + .c-tooltip__box:not(.is-dynamic) .c-tooltip__box-inner {
    transform: translateY(0) scale(1) rotate(0.001deg);
}

[data-etch-tooltip] .c-tooltip__box[data-etch-tooltip-y='bottom']:not(.is-dynamic) .c-tooltip__box-inner {
    transform: translateY(-1em) scale(0.9) rotate(0.001deg);
}

[data-etch-tooltip]:is(:hover, :focus-within) .c-tooltip__box[data-etch-tooltip-y='bottom']:not(.is-dynamic) .c-tooltip__box-inner,
[data-etch-tooltip].is-tooltip-open .c-tooltip__box.is-dynamic[data-etch-tooltip-y-resolved='bottom'] .c-tooltip__box-inner,
[data-etch-tooltip] .c-tooltip__trigger:focus-visible + .c-tooltip__box[data-etch-tooltip-y='bottom']:not(.is-dynamic) .c-tooltip__box-inner {
    transform: translateY(0) scale(1) rotate(0.001deg);
}

@media (prefers-reduced-motion: reduce) {
    [data-etch-tooltip] .c-tooltip__box,
    [data-etch-tooltip] .c-tooltip__box-inner {
        transition: none;
    }

    [data-etch-tooltip] .c-tooltip__box-inner {
        transform: none;
    }
}