/**
 * File: glossary.css
 * Purpose: Public A-Z construction glossary page styling for
 *          columbusremodelcost.com (reads the --crc-* tokens defined in
 *          site.css :root; loaded by public/glossary.php). Reuses the
 *          .guide-header-* rules already in guides.css for the page
 *          header band — this file covers only the jump-nav and the
 *          term-list layout.
 * Author: iSpec LLC
 * Created: 2026-08-10
 * Last Modified: 2026-09-26 — per-term pages added: the index term name is
 *          now a link (.glossary-term-name a) and a new .term-* block at the
 *          end of this file styles /glossary/<slug> (definition callout,
 *          source row, usage list, related cards, prev/next pager, hand-off,
 *          browse sidebar). Ported from ispecllc.com's css/glossary.css by
 *          class role only — every value is remapped onto this site's
 *          --crc-* tokens (its --teal/--ink/--line/--muted have no
 *          equivalent here).
 * 2026-08-14 — .glossary-term-source "See also" link row (roof/kitchen/bath
 *          glossary parity)
 */

/* ── JUMP NAV ─────────────────────────────────────────── */
.glossary-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 2rem;
}
.glossary-jump-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid var(--crc-border);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--crc-ink-mid);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.glossary-jump-link:hover {
  border-color: var(--crc-teal);
  color: var(--crc-teal-dark);
  background-color: var(--crc-teal-tint);
}

/* ── TERM GROUPS ──────────────────────────────────────── */
.glossary-group { margin-bottom: 2rem; }
.glossary-group-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--crc-teal-dark);
  border-bottom: 2px solid var(--crc-border);
  padding-bottom: 0.375rem;
  margin-bottom: 1rem;
}
.glossary-term-block {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--crc-border);
}
.glossary-term-block:last-child { border-bottom: none; }
.glossary-term-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--crc-ink);
  margin: 0 0 0.25rem;
}
.glossary-term-def {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--crc-ink-mid);
  margin: 0;
}
.glossary-term-source {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--crc-muted);
  margin: 0.25rem 0 0;
}
.glossary-term-source a {
  color: var(--crc-teal-dark);
  text-decoration: none;
}
.glossary-term-source a:hover {
  color: var(--crc-teal);
  text-decoration: underline;
}
.glossary-term-source .fa-arrow-up-right-from-square {
  font-size: 0.65rem;
  opacity: 0.7;
}

/* ── INDEX: TERM NAME AS A LINK (2026-09-26) ──────────── */
/* Each term name now opens its own page at /glossary/<slug>. The block keeps
   its id="<slug>" anchor so links written before term pages existed still land. */
.glossary-term-name a {
  color: var(--crc-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.glossary-term-name a:hover,
.glossary-term-name a:focus-visible {
  color: var(--crc-teal-dark);
  border-bottom-color: var(--crc-teal);
}

/* ═══ TERM PAGE (/glossary/<slug>) ═════════════════════ */

/* ── DEFINITION CALLOUT ───────────────────────────────── */
.term-definition {
  border-left: 3px solid var(--crc-teal);
  background-color: var(--crc-teal-tint);
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 1.125rem 1.25rem;
}
.term-definition-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crc-teal-dark);
  margin-bottom: 0.5rem;
}
.term-definition-text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--crc-ink);
  margin: 0;
}

/* ── CITED SOURCE ─────────────────────────────────────── */
.term-source {
  font-size: 0.8125rem;
  color: var(--crc-muted);
  margin: 0.875rem 0 0;
}
.term-source a {
  color: var(--crc-teal-dark);
  text-decoration: none;
}
.term-source a:hover { text-decoration: underline; }
.term-source .fa-arrow-up-right-from-square {
  font-size: 0.65rem;
  opacity: 0.7;
}

/* ── SECTIONS ─────────────────────────────────────────── */
.term-section,
.term-handoff { margin-top: 2.25rem; }
.term-section-heading {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crc-teal);
  margin-bottom: 0.875rem;
}

/* ── WHERE THIS COMES UP ──────────────────────────────── */
.term-usage {
  list-style: none;
  padding: 0;
  margin: 0;
}
.term-usage li {
  border-bottom: 1px solid var(--crc-border);
  padding: 0.5rem 0;
}
.term-usage li:last-child { border-bottom: none; }
.term-usage a {
  font-size: 0.9375rem;
  color: var(--crc-ink-mid);
  text-decoration: none;
}
.term-usage a:hover { color: var(--crc-teal-dark); }

/* ── RELATED TERM CARDS ───────────────────────────────── */
.term-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.875rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.term-card {
  border: 1px solid var(--crc-border);
  border-top: 3px solid var(--crc-teal);
  border-radius: 0.375rem;
  padding: 0.875rem 1rem;
}
.term-card-name {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.3125rem;
}
.term-card-name a {
  color: var(--crc-ink);
  text-decoration: none;
}
.term-card-name a:hover { color: var(--crc-teal-dark); }
.term-card-definition {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--crc-muted);
  margin: 0;
}

/* ── PREV / NEXT PAGER ────────────────────────────────── */
.term-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--crc-border);
}
.term-pager-link {
  flex: 1 1 45%;
  min-height: 44px;
  border: 1px solid var(--crc-border);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
a.term-pager-link:hover {
  border-color: var(--crc-teal);
  background-color: var(--crc-teal-tint);
}
.term-pager-link[data-state="disabled"] { opacity: 0.55; }
.term-pager-next { text-align: right; }
.term-pager-kicker {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crc-muted);
}
.term-pager-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--crc-ink);
  margin-top: 0.125rem;
}

/* ── QUIET HAND-OFF ───────────────────────────────────── */
.term-handoff {
  border-top: 1px solid var(--crc-border);
  padding-top: 1.5rem;
}
.term-handoff p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--crc-ink-mid);
}
.term-handoff-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 0;
}
.term-handoff-links a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--crc-teal-dark);
  text-decoration: none;
}
.term-handoff-links a:hover { text-decoration: underline; }

/* ── BROWSE SIDEBAR ───────────────────────────────────── */
.term-side {
  border: 1px solid var(--crc-border);
  border-radius: 0.5rem;
  padding: 1.125rem;
  background-color: var(--crc-surface);
}
.term-side-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crc-teal);
  margin-bottom: 0.875rem;
}
.term-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.term-letters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid var(--crc-border);
  border-radius: 0.375rem;
  background-color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--crc-ink-mid);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.term-letters a:hover {
  border-color: var(--crc-teal);
  color: var(--crc-teal-dark);
  background-color: var(--crc-teal-tint);
}
.term-side-all {
  font-size: 0.875rem;
  margin: 0;
}
.term-side-all a {
  color: var(--crc-teal-dark);
  font-weight: 600;
  text-decoration: none;
}
.term-side-all a:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
  .term-pager-link { flex-basis: 100%; }
  .term-pager-next { text-align: left; }
}