/*
 * FlowInteract structural stylesheet (com_flowinteract.structure, card
 * W1.3, ADR-0009 section 4).
 *
 * STRUCTURE ONLY - layout, spacing and focus handling shared by every
 * block type. Every colour, radius, font and spacing value here is a
 * `--fi-*` custom property resolved from the active per-site token
 * file (com_flowinteract.tokens.*, declared as this asset's
 * dependency in joomla.asset.json so it always loads first); the only
 * colour keywords this file may use are currentColor, transparent and
 * inherit - never a hex literal, rgb() or hsl(). A block's own accent
 * or brand colour usage (var(--fi-accent), var(--fi-accent-contrast))
 * belongs to that block's own CSS, not here: it keeps this file safe
 * under every token scheme, including a light accent that would fail
 * text/background contrast if used bare against --fi-surface. Logical
 * properties throughout for RTL correctness. No Bootstrap grid or
 * utility class assumptions - a block must look right dropped into
 * any Flow site template.
 */

.fi-block {
    box-sizing: border-box;
    display: block;
    margin-block: var(--fi-gap-lg);
    padding: var(--fi-gap);
    border: 1px solid var(--fi-border);
    border-radius: var(--fi-radius);
    background-color: var(--fi-surface);
    color: var(--fi-text);
    font-family: var(--fi-font);
    font-size: var(--fi-font-size);
    line-height: var(--fi-line-height);
    box-shadow: var(--fi-shadow);
}

.fi-block *,
.fi-block *::before,
.fi-block *::after {
    box-sizing: inherit;
}

.fi-block__title {
    margin-block: 0 var(--fi-gap);
    margin-inline: 0;
    font-size: 1.15em;
    font-weight: 700;
    line-height: var(--fi-line-height);
    color: inherit;
}

.fi-block__body {
    margin-block: 0 var(--fi-gap);
    margin-inline: 0;
    color: inherit;
}

.fi-block__body > :last-child {
    margin-block-end: 0;
}

.fi-block__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fi-gap);
    margin-block-start: var(--fi-gap);
}

.fi-block button,
.fi-block input,
.fi-block select,
.fi-block textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.fi-block :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.fi-block [hidden] {
    display: none !important;
}

/*
 * Visually hidden but screen-reader-visible utility - the standard
 * clip-based pattern - for labels that must exist in the
 * accessibility tree without occupying visual space.
 */
.fi-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media print {
    .fi-block {
        border-color: transparent;
        box-shadow: none;
        break-inside: avoid;
    }

    .fi-block__actions {
        display: none;
    }
}

/* Poll topic hub (Decision 6). Fluid, no template assumptions: spacing and colour come from the shared tokens. */
.fi-topic {
    font-family: var(--fi-font);
    font-size: var(--fi-font-size);
    line-height: var(--fi-line-height);
    color: var(--fi-text);
    max-inline-size: 100%;
}

.fi-topic__title {
    margin-block: 0 var(--fi-gap);
}

.fi-topic__intro {
    margin-block-end: var(--fi-gap-lg);
    color: var(--fi-text-muted);
}

.fi-topic__intro img {
    max-inline-size: 100%;
    block-size: auto;
}

.fi-topic__section {
    margin-block: var(--fi-gap-lg);
}

.fi-topic__heading {
    margin-block: 0 var(--fi-gap);
    font-size: 1.15em;
}

.fi-topic__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fi-gap);
}

.fi-topic__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25em var(--fi-gap);
    padding-block-end: var(--fi-gap);
    border-block-end: 1px solid var(--fi-border);
}

.fi-topic__link {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.fi-topic__meta {
    color: var(--fi-text-muted);
    font-size: 0.9em;
}

.fi-topic__badge {
    margin-inline-start: 0.5em;
    padding: 0.1em 0.5em;
    border: 1px solid var(--fi-border);
    border-radius: var(--fi-radius);
}

.fi-topic__empty {
    color: var(--fi-text-muted);
}