/**
 * Collapse Component Styles
 * Reusable collapsible component
 */

/* Collapsible Container */
/* An accent hairline rather than the deep --clr-border: a collapse panel is a
   large closed outline sitting on the page background, the same shape as a card,
   and a near-black edge there reads as a grey box floating on a themed page. */
.collapse-container {
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    overflow: hidden;
    direction: rtl;
}

/* Collapsible Header */
/* A wash of the page rather than a fill of its own. The header is a control the
   visitor may never open — a filter panel, a truncated description — so at rest
   it announces itself and no more; the accent arrives on approach and stays
   while the panel is open, which is the one moment it carries information.

   The bottom rule is transparent at rest and drawn only when open, so a closed
   panel is one clean outline instead of a box with a line through it. */
.collapse-header {
    background-color: var(--surface-translucent);
    color: var(--clr-text);
    cursor: pointer;
    padding: 16px 20px;
    width: 100%;
    border: none;
    text-align: right;
    outline: none;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border-bottom: 1px solid transparent;
    margin-bottom: 0;
}

.collapse-header:hover,
.collapse-header.opened {
    background-color: var(--accent-soft);
    color: var(--clr-text);
}

.collapse-header.opened {
    border-bottom-color: var(--border-accent);
}

/* inherit, so the title follows whichever fill the header currently has */
.collapse-header h3 {
    margin: 0;
    font-size: 17px;
    color: inherit;
    font-weight: 600;
}

.collapse-toggle-icon {
    color: var(--clr-main);
    font-weight: bold;
    font-size: 16px;
    transition: transform 0.2s ease;
    line-height: 1;
    display: inline-block;
    width: 20px;
    text-align: center;
}

.collapse-header.opened .collapse-toggle-icon {
    transform: rotate(180deg);
}

/* Collapsible Content */
.collapse-content {
    display: none;
    background: var(--bg-panel);
    border-bottom: 1px solid transparent;
}

.collapse-content.opened {
    display: block;
    border-bottom: none;
}

.collapse-content > div {
    /*
    padding: 15px;
     */
    padding: 15px 10px;
}

/* Print styles */
@media print {
    .collapse-container {
        display: none;
    }
}