/* What to Wear — shared styles for the collapsible block rendered by
 * /event-attire.js attireHtml(). Linked by every page that shows it (public
 * event page, both calendars, dashboard home, packing list, homepage).
 *
 * Collapsed by default: a native <details> whose <summary> is the one-line
 * "What to wear: Troop Uniform ▸". Tap/click/Enter/Space expands the
 * pictures, per-level or per-son rows and the note. Colour tokens come from
 * the page (dash.css flips them under [data-theme="dark"]); the fallbacks are
 * the public site's light palette for pages without those variables. */

.event-attire {
    margin: 0 0 12px;
    border: 1px solid var(--gray-200, #DDD8CE);
    border-left: 3px solid var(--tl-blue, #004B87);
    border-radius: var(--radius, 8px);
    background: var(--gray-100, #F0EDE6);
    font-size: 0.9rem;
    color: var(--gray-700, #4A453D);
    line-height: 1.45;
}
.event-attire-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;            /* custom chevron instead of the UA marker */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: inherit;
}
.event-attire-summary::-webkit-details-marker { display: none; }
.event-attire-summary::marker { content: ""; }
.event-attire-summary:focus-visible {
    outline: 2px solid var(--tl-blue, #004B87);
    outline-offset: 2px;
}
.event-attire-icon { flex: none; width: 18px; height: 18px; color: var(--tl-blue, #004B87); }
.event-attire-icon svg { width: 100%; height: 100%; display: block; }
.event-attire-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tl-blue, #004B87);
    white-space: nowrap;
}
.event-attire-what {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: var(--brown-dark, #3E2E18);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Chevron: ▸ collapsed, ▾ expanded */
.event-attire-chevron {
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--gray-500, #8C8578);
    border-bottom: 2px solid var(--gray-500, #8C8578);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    margin: 0 4px 0 2px;
}
.event-attire[open] > .event-attire-summary .event-attire-chevron { transform: rotate(45deg); }

/* A line with nothing more to show (e.g. "No uniform required") — same look,
 * no chevron, not interactive. */
.event-attire-static .event-attire-summary { cursor: default; }

.event-attire-more {
    padding: 0 12px 10px 38px;   /* lines up under the text, past the icon */
}
.event-attire-detail { color: var(--gray-500, #8C8578); }
.event-attire-note { margin-top: 2px; }
.event-attire-levels { margin-top: 8px; }
.event-attire-levels-hint { display: block; font-size: 0.78rem; color: var(--gray-500, #8C8578); margin-bottom: 6px; }
.event-attire-figs { display: flex; flex-wrap: wrap; gap: 8px; }
.event-attire-fig { margin: 0; width: 52px; text-align: center; }
.event-attire-fig img {
    display: block; width: 52px; height: 52px; object-fit: contain;
    background: #fff; border: 1px solid var(--gray-200, #DDD8CE); border-radius: 6px; padding: 3px;
}
.event-attire-fig figcaption {
    margin-top: 2px; font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--gray-700, #4A453D); line-height: 1.2;
}
.event-attire-son { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--gray-200, #DDD8CE); }
.event-attire-son:first-child { border-top: 0; padding-top: 4px; }
.event-attire-son .event-attire-figs { flex: none; flex-wrap: nowrap; }
.event-attire-son-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.event-attire-son-name { font-weight: 700; color: var(--brown-dark, #3E2E18); }
.event-attire-son-level { font-size: 0.74rem; color: var(--tl-blue, #004B87); font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }
.event-attire-son-what { font-size: 0.88rem; }

/* Compact variant for list rows (dashboard widget, homepage cards, the RSVP
 * "coming up" list, packing-list header): tighter, smaller. */
.event-attire-compact { font-size: 0.82rem; margin: 0; border-radius: 6px; }
.event-attire-compact .event-attire-summary { padding: 5px 10px; gap: 6px; }
.event-attire-compact .event-attire-icon { width: 15px; height: 15px; }
.event-attire-compact .event-attire-label { font-size: 0.66rem; }
.event-attire-compact .event-attire-more { padding: 0 10px 8px 31px; }
.event-attire-compact .event-attire-fig, .event-attire-compact .event-attire-fig img { width: 44px; }
.event-attire-compact .event-attire-fig img { height: 44px; }

/* Hosts that put the block under a linked card */
.ue-item .event-attire { margin-top: 6px; }
.tl-popup-body .event-attire { margin: 6px 0 10px; }

@media (max-width: 480px) {
    .event-attire-more { padding-left: 12px; }
    .event-attire-fig, .event-attire-fig img { width: 44px; }
    .event-attire-fig img { height: 44px; }
    .event-attire-son { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .event-attire-chevron { transition: none; }
}