/* ═══════════════════════════════════════════════════════════════
   glossary.css — Glossary index additions + the per-term page
   PATH: public/css/glossary.css
   ROLE: Styles the two glossary views added/extended on 2026-09-26, when every
         term gained its own page:
           · Views/public/glossary.php (index) — the lede, the term-name links
             and the :target highlight that an incoming glossary#slug link lights
             up. The letter sections, term blocks and sources themselves are
             still styled in public.css (§ Glossary) and are untouched here.
           · Views/public/glossary_term.php (one term) — hero title/sub,
             definition callout, cited source, "where this comes up" list,
             related-term cards, previous/next pager, soft CTA and the sidebar
             letter jump back into the index.
   LOADED FROM: the 'styles' section of both views, i.e. after public.css and
         roofing.css, so a rule here wins where the two overlap.
   TOKENS: colour + radius tokens come from the :root block in public.css
         (--teal, --teal-dark, --accent, --light-bg, --border, --text-dark,
         --text-mid, --text-light, --radius-sm/md) with the same literal
         fallbacks the 2026-09-21 round used; fonts come from roofing.css
         (--font-display Playfair Display, --font-body DM Sans).
   NOTE: .glossary-term (the store-time tooltip span that Helpers\GlossaryLinker
         writes into post and guide bodies) is NOT styled here — it stays in
         public.css and must keep its dotted underline.
   Created: 2026-09-26
   ═══════════════════════════════════════════════════════════════ */

/* ── Index: lede + term-name links ─────────────────────────────── */

.glossary-lede {
    margin: 0 0 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-mid, #556);
}

.glossary-lede b {
    color: var(--text-dark, #2d3748);
}

.glossary-lede-layers {
    display: block;
    margin-top: 0.2rem;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light, #8898aa);
}

.glossary-term-name a {
    color: var(--text-dark, #2d3748);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--border, #e2e8f0);
}

.glossary-term-name a:hover,
.glossary-term-name a:focus {
    color: var(--teal-dark, #143654);
    text-decoration-color: var(--teal, #1F4D72);
}

/* The layer the seeder filed the term under (data-layer on the block). */
.glossary-term-layer {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--light-bg, #f4f6f9);
    color: var(--teal-dark, #143654);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* An incoming glossary#slug link (tooltip links, external links) lands here. */
.glossary-term-block {
    scroll-margin-top: 88px;
    padding-left: 12px;
    border-left: 3px solid transparent;
    transition: border-color 0.2s, background 0.2s;
}

.glossary-term-block:target {
    border-left-color: var(--teal, #1F4D72);
    background: var(--light-bg, #f4f6f9);
}

/* ── Term page: hero ──────────────────────────────────────────── */

.term-hero-title {
    font-size: 46px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.15;
    letter-spacing: 0.5px;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 4px 18px rgba(0, 0, 0, 0.55);
}

.term-hero-sub {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f4f7fa;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.7),
        0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ── Term page: frame ─────────────────────────────────────────── */

.term-page {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-mid, #556);
}

.term-section {
    margin-top: 2.5rem;
}

.term-section-heading {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--text-dark, #2d3748);
}

/* The definition callout — the block a search snippet quotes. */
.term-definition {
    margin: 0 0 1rem;
    padding: 1.35rem 1.5rem;
    border-left: 4px solid var(--teal, #1F4D72);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    background: var(--light-bg, #f4f6f9);
}

.term-definition-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal-dark, #143654);
}

.term-definition p {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-dark, #2d3748);
}

.term-source {
    margin: 0;
    font-size: 13px;
    color: var(--text-light, #8898aa);
}

.term-source a {
    color: var(--teal-dark, #143654);
    text-decoration: none;
}

.term-source a:hover,
.term-source a:focus {
    color: var(--teal, #1F4D72);
    text-decoration: underline;
}

.term-source .fa-external-link-alt {
    font-size: 10px;
    opacity: 0.7;
}

/* ── Term page: where this comes up ───────────────────────────── */

.term-usage {
    margin: 0;
    padding: 0;
    list-style: none;
}

.term-usage li + li {
    border-top: 1px solid var(--border, #e2e8f0);
}

.term-usage a {
    display: block;
    /* Roomy rows so each link is an easy tap target on a phone. */
    padding: 0.7rem 0;
    color: var(--teal, #1F4D72);
    font-weight: 500;
    text-decoration: none;
}

.term-usage a::after {
    content: " →";
    color: var(--text-light, #8898aa);
}

.term-usage a:hover,
.term-usage a:focus {
    color: var(--accent, #B85A2A);
    text-decoration: underline;
}

/* ── Term page: related terms ─────────────────────────────────── */

.term-related {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.term-card {
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.term-card:hover,
.term-card:focus-within {
    border-color: var(--teal, #1F4D72);
    box-shadow: 0 6px 18px rgba(31, 77, 114, 0.08);
}

.term-card-name {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    line-height: 1.3;
}

.term-card-name a {
    color: var(--text-dark, #2d3748);
    text-decoration: none;
}

.term-card-name a:hover,
.term-card-name a:focus {
    color: var(--teal-dark, #143654);
    text-decoration: underline;
}

.term-card-definition {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-mid, #556);
}

/* ── Term page: previous / next ───────────────────────────────── */

.term-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

.term-pager a {
    flex: 1 1 45%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
}

/* "Next" sits on the right of the row even when it is the only link. */
.term-pager-next {
    margin-left: auto;
    text-align: right;
}

.term-pager-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-light, #8898aa);
}

.term-pager-name {
    display: block;
    margin-top: 2px;
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: 1rem;
    color: var(--text-dark, #2d3748);
}

.term-pager a:hover,
.term-pager a:focus {
    border-color: var(--teal, #1F4D72);
    background: var(--light-bg, #f4f6f9);
}

.term-pager a:hover .term-pager-name,
.term-pager a:focus .term-pager-name {
    color: var(--teal-dark, #143654);
}

/* ── Term page: soft CTA ──────────────────────────────────────── */

.term-cta {
    margin-top: 2.5rem;
    padding: 1.6rem 1.75rem;
    background: var(--light-bg, #f4f6f9);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
}

.term-cta-heading {
    margin: 0 0 0.35rem;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--text-dark, #2d3748);
}

.term-cta p {
    margin: 0;
    font-size: 15px;
    color: var(--text-mid, #556);
}

/* Specificity note: .term-cta p resets the margin, so the actions row is
   addressed through the parent rather than with !important. */
.term-cta .term-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.1rem;
}

.term-cta-primary {
    display: inline-block;
    padding: 12px 28px;
    border-radius: var(--radius-sm, 4px);
    background: var(--teal, #1F4D72);
    color: #fff;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background 0.15s;
}

.term-cta-primary:hover,
.term-cta-primary:focus {
    background: var(--teal-dark, #143654);
    color: #fff;
}

.term-cta-secondary {
    color: var(--teal-dark, #143654);
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.term-cta-secondary:hover,
.term-cta-secondary:focus {
    color: var(--accent, #B85A2A);
}

/* ── Term page: browse sidebar ────────────────────────────────── */

.term-side {
    margin-top: 2.5rem;
}

.term-side-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-light, #8898aa);
}

.term-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.term-letters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-sm, 4px);
    background: #fff;
    color: var(--text-mid, #556);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.term-letters a:hover,
.term-letters a:focus {
    background: var(--teal, #1F4D72);
    border-color: var(--teal, #1F4D72);
    color: #fff;
}

.term-side-all {
    display: inline-block;
    color: var(--teal-dark, #143654);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.term-side-all:hover,
.term-side-all:focus {
    color: var(--accent, #B85A2A);
    text-decoration: underline;
}

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

@media (max-width: 991.98px) {
    /* The sidebar drops under the article — give it a rule of its own. */
    .term-side {
        padding-top: 1.75rem;
        border-top: 1px solid var(--border, #e2e8f0);
    }
}

@media (max-width: 575.98px) {
    .term-hero-title {
        font-size: 32px;
    }

    .term-hero-sub {
        font-size: 13px;
    }

    .term-definition {
        padding: 1.1rem 1.15rem;
    }

    .term-definition p {
        font-size: 17px;
    }

    /* One card and one pager link per row so nothing is squeezed. */
    .term-related {
        grid-template-columns: minmax(0, 1fr);
    }

    .term-pager a {
        flex: 1 1 100%;
        text-align: left;
    }

    .term-cta {
        padding: 1.25rem 1.1rem;
    }
}