/* ==========================================================================
   Glossary Assembly block
   ========================================================================== */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.plinth-glossary-assembly {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--wp--preset--spacing--40, 2rem) var(--wp--preset--spacing--96, 6rem);
}

/* ── A-Z Jump Bar ─────────────────────────────────────────────────────────── */

/*
 * Sticky below the site header (56 px). z-index 25 matches the filter bar
 * used on Directory Hub archives. Opaque background prevents content bleeding
 * through when scrolling. Hairline border matches the hub filter bar.
 */
.plinth-glossary-jumpbar {
    position: sticky;
    top: 56px;
    z-index: 25;
    background: var(--wp--preset--color--paper, #ffffff);
    border-bottom: 1px solid var(--wp--preset--color--border, #e5e7eb);
    margin: 0 calc(-1 * var(--wp--preset--spacing--40, 2rem));
    padding: 0 var(--wp--preset--spacing--40, 2rem);
}

.plinth-glossary-jumpbar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.plinth-glossary-jumpbar__letter {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 44px;
    padding: 0 4px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    color: var(--wp--preset--color--text, #111827);
    border-bottom: 2px solid transparent;
    transition: color 0.12s, border-color 0.12s;
}

.plinth-glossary-jumpbar__letter:hover:not(.is-empty) {
    color: var(--wp--preset--color--rust-600, #2563eb);
    border-bottom-color: var(--wp--preset--color--rust-600, #2563eb);
}

/* Empty letters: present in the DOM for layout, visually muted, not interactive */
.plinth-glossary-jumpbar__letter.is-empty {
    color: var(--wp--preset--color--text-muted, #d1d5db);
    cursor: default;
    pointer-events: none;
}

/* ── Search field ─────────────────────────────────────────────────────────── */

.plinth-glossary-search {
    padding: var(--wp--preset--spacing--32, 1.5rem) 0;
    max-width: 480px;
}

/* ── Letter sections ──────────────────────────────────────────────────────── */

/*
 * scroll-margin-top = header (56px) + jump bar (44px) + breathing room (8px).
 * Applied to both sections and entries so any anchor lands clear of sticky UI.
 */
.plinth-glossary-section,
.plinth-glossary-entry {
    scroll-margin-top: 116px;
}

.plinth-glossary-section {
    border-top: 1px solid var(--wp--preset--color--border, #e5e7eb);
    padding-top: var(--wp--preset--spacing--48, 2.5rem);
    margin-top: var(--wp--preset--spacing--48, 2.5rem);
}

.plinth-glossary-section:first-child {
    border-top: none;
    margin-top: var(--wp--preset--spacing--32, 1.5rem);
}

.plinth-glossary-section__letter {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wp--preset--color--rust-600, #2563eb);
    margin: 0 0 var(--wp--preset--spacing--32, 1.5rem);
    line-height: 1;
}

/* ── Entry anatomy ────────────────────────────────────────────────────────── */

.plinth-glossary-entry {
    padding-bottom: var(--wp--preset--spacing--32, 1.5rem);
    margin-bottom: var(--wp--preset--spacing--32, 1.5rem);
    border-bottom: 1px solid var(--wp--preset--color--border, #f3f4f6);
}

.plinth-glossary-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.plinth-glossary-entry__term {
    font-size: var(--wp--preset--font-size--h3, 1.25rem);
    font-weight: 700;
    margin: 0 0 0.375rem;
    color: var(--wp--preset--color--text, #111827);
}

/* "Also known as" — caption-scale, secondary colour */
.plinth-glossary-entry__aka {
    font-size: var(--wp--preset--font-size--caption, 0.8125rem);
    color: var(--wp--preset--color--text-secondary, #6b7280);
    margin: 0 0 0.625rem;
}

/* one_line_definition — bold, answer-engine target */
.plinth-glossary-entry__definition {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.6;
}

.plinth-glossary-entry__body {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--wp--preset--color--text-secondary, #374151);
}

/* "In Bullhorn" — labelled inset panel */
.plinth-glossary-entry__in-bullhorn {
    display: flex;
    gap: 0.625rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    background: var(--wp--preset--color--surface, #f9fafb);
    border-radius: 6px;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.plinth-glossary-entry__in-bullhorn-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--text-secondary, #6b7280);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Related terms — inline list */
.plinth-glossary-entry__related-terms {
    font-size: 0.875rem;
    margin: 0.5rem 0 0;
    color: var(--wp--preset--color--text-secondary, #6b7280);
}

.plinth-glossary-entry__related-terms a {
    color: var(--wp--preset--color--rust-600, #2563eb);
    /* Underlined, not colour-only: these sit inside a sentence, which axe-core
       flags as link-in-text-block when colour is the only distinction. */
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.plinth-glossary-entry__related-terms a:hover {
    text-decoration: underline;
}

.plinth-glossary-entry__related-label {
    font-weight: 600;
    margin-right: 0.25rem;
}

/* Related pages — small card row (max 3) */
.plinth-glossary-entry__related-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.plinth-glossary-related-card {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.5rem 0.875rem;
    background: var(--wp--preset--color--paper, #ffffff);
    border: 1px solid var(--wp--preset--color--border, #e5e7eb);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    max-width: 220px;
    min-width: 120px;
}

.plinth-glossary-related-card:hover {
    border-color: var(--wp--preset--color--rust-600, #2563eb);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.plinth-glossary-related-card__type {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--text-secondary, #6b7280);
}

.plinth-glossary-related-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wp--preset--color--text, #111827);
    text-wrap: pretty;
}

/* ── Can't find a term ────────────────────────────────────────────────────── */

.plinth-glossary-suggest {
    margin-top: var(--wp--preset--spacing--64, 4rem);
    padding: var(--wp--preset--spacing--32, 1.5rem) var(--wp--preset--spacing--40, 2rem);
    background: var(--wp--preset--color--surface, #f9fafb);
    border-radius: 8px;
    text-align: center;
}

.plinth-glossary-suggest__text {
    font-size: 1rem;
    color: var(--wp--preset--color--text-secondary, #374151);
    margin: 0;
    line-height: 1.6;
}

.plinth-glossary-suggest__text a {
    color: var(--wp--preset--color--rust-600, #2563eb);
    font-weight: 600;
    text-decoration: none;
}

.plinth-glossary-suggest__text a:hover {
    text-decoration: underline;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/*
 * Below 640px the jump bar wraps to two rows naturally (flex-wrap: wrap is
 * already set). Letters are not compressed or removed. Min-width is reduced
 * to ensure 26 letters fit comfortably across two rows without overflow.
 */
@media (max-width: 640px) {
    .plinth-glossary-jumpbar__letter {
        min-width: 28px;
        height: 40px;
        font-size: 0.8125rem;
        padding: 0 2px;
    }

    .plinth-glossary-entry__related-pages {
        flex-direction: column;
    }

    .plinth-glossary-related-card {
        max-width: 100%;
    }

    .plinth-glossary-section__letter {
        font-size: 1.5rem;
    }
}