/* Glossary page only (/glossary/). Hand-written plain CSS; not part of the Tailwind build.
   Colours and fonts repeat the site values: green #1B4D3E, gold #C8A96E, cream #F8F6F3,
   Literata headings, Inter body. Behaviour: /glossary/glossary.js (the page works without it). */
:root {
  --gl-green: #1B4D3E;
  --gl-gold: #C8A96E;
  --gl-cream: #F8F6F3;
  --gl-line: rgba(27, 77, 62, .14);
  --gl-nav-h: 4rem;  /* sticky site header (h-16 = 4rem, so it follows the reader's font size) */
  --gl-bar-h: 60px;  /* sticky A to Z bar */
}

/* Anything the browser scrolls to (a term link, or a link reached with Tab or Shift+Tab) stops
   below the sticky header and the A to Z bar instead of underneath them. */
/* 4em here is the 4rem header: on the root element WebKit mis-sizes rem in this one property. */
html { scroll-padding-top: calc(4em + var(--gl-bar-h) + 8px); }
/* The older page rule adds 80px for the header; the line above already covers it. */
.prose h2 { scroll-margin-top: 0; }

.gl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Hero ---------- */
.gl-hero { padding: 1.5rem 0 1.75rem; }
.gl-hero-eyebrow { margin-bottom: .6rem; }
.gl-hero-title { margin-bottom: .6rem; text-wrap: balance; }
.gl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: .9rem; }
@media not all and (min-width: 48rem) {
  .gl-hero-title { font-size: 1.625rem; line-height: 1.25; }
  .gl-hero-sub { font-size: 1rem; line-height: 1.55; }
}

/* ---------- Page body ---------- */
.gl-main { padding-top: 1.25rem; padding-bottom: 2.5rem; }

.gl-popular { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0 0 .5rem; font-size: .875rem; color: #57534e; }
.gl-popular-label { font-weight: 600; margin-right: .15rem; }
.gl-popular a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .8rem; border: 1px solid rgba(27, 77, 62, .18); border-radius: 999px; background: rgba(27, 77, 62, .06); color: var(--gl-green); font-weight: 600; text-decoration: none; }
.gl-popular a:hover { border-color: var(--gl-gold); background: rgba(200, 169, 110, .18); }

/* ---------- A to Z bar ---------- */
.gl-bar { position: sticky; top: var(--gl-nav-h); z-index: 40; display: flex; align-items: center; gap: .5rem; min-height: var(--gl-bar-h); margin: 0 -1rem; padding: 0 1rem; background: var(--gl-cream); border-bottom: 1px solid var(--gl-line); }
/* One row that scrolls sideways when the letters do not fit. An edge fades while more letters
   lie beyond it: the right edge from the start, the left edge once the row has been scrolled
   (glossary.js sets the two classes). */
.gl-letters { display: flex; flex: 1 1 auto; gap: .375rem; min-width: 0; padding: 6px 28px 6px 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; --gl-fade-l: #000; --gl-fade-r: transparent; -webkit-mask-image: linear-gradient(to right, var(--gl-fade-l), #000 28px, #000 calc(100% - 28px), var(--gl-fade-r)); mask-image: linear-gradient(to right, var(--gl-fade-l), #000 28px, #000 calc(100% - 28px), var(--gl-fade-r)); }
.gl-letters.is-scrolled { --gl-fade-l: transparent; }
.gl-letters.is-at-end { --gl-fade-r: #000; }
.gl-letters::-webkit-scrollbar { display: none; }
.gl-letters a { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(27, 77, 62, .18); border-radius: 10px; background: #fff; color: var(--gl-green); font-weight: 700; text-decoration: none; }
.gl-letters a:hover { border-color: var(--gl-gold); background: rgba(200, 169, 110, .18); }
/* Wider screens: the bar keeps to the same left and right edges as the cards below it. */
@media (min-width: 48rem) { .gl-bar { margin: 0; padding: 0; } }
.gl-toggle-all { flex: 0 0 auto; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--gl-green); border-radius: 10px; background: var(--gl-green); color: var(--gl-cream); font: inherit; font-size: .85rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.gl-toggle-all:hover { background: #153e32; }
.gl-toggle-all[hidden] { display: none; }
/* Phones and small tablets: the button moves out of the sticky bar (letters only there) to a
   row of its own above the first letter. The row keeps its height so nothing jumps when the
   script shows the button, and disappears when JavaScript is off. */
.gl-tools { display: none; }
@media not all and (min-width: 48rem) {
  .gl-bar .gl-toggle-all { display: none; }
  .gl-tools { display: flex; justify-content: flex-end; min-height: 44px; margin: .25rem 0 -1rem; }
  .gl-tools .gl-toggle-all { padding: 0 .25rem; border: 0; background: transparent; color: var(--gl-green); text-decoration: underline; text-decoration-color: var(--gl-gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .gl-tools .gl-toggle-all:hover { background: transparent; text-decoration-color: var(--gl-green); }
}
@media (scripting: none) { .gl-tools { display: none; } }

/* ---------- Most-asked card ---------- */
.gl-featured { margin-top: 1rem; padding: 1rem 1.25rem .35rem;border: 1px solid var(--gl-line); border-left: 4px solid var(--gl-gold); border-radius: 14px; background: #fff; }
.gl-featured-q { margin: 0 0 .35rem; font-family: 'Literata', serif; font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--gl-green); }
.gl-featured-label { display: inline-block; margin-right: .35rem; padding: .15rem .5rem; border-radius: 999px; background: rgba(200, 169, 110, .22); color: #5c430f; font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
.gl-featured-a { margin: 0; line-height: 1.65; }
.gl-featured-more { margin: 0; }

/* ---------- Letter groups and cards ---------- */
.gl-letter { display: flex; align-items: center; gap: .75rem; margin: 1.75rem 0 .75rem; font-family: 'Literata', serif; font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--gl-green); scroll-margin-top: 4px; }
.gl-letter::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(200, 169, 110, .55); }
/* One full-width card per row at every screen size (the page column is 864px at most). */
.gl-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; }

.gl-card { min-width: 0; padding: 1.1rem 1.25rem .75rem; border: 1px solid var(--gl-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(27, 77, 62, .05); }
.gl-card:has(.term-anchor:target) { border-color: var(--gl-gold); box-shadow: 0 0 0 2px rgba(200, 169, 110, .45); }
.gl-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .5rem; }
.gl-card h2.term-anchor { margin: 0; padding: 0; border: 0; font-family: 'Literata', serif; font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--gl-green); overflow-wrap: anywhere; scroll-margin-top: 20px; }
.gl-pill { display: inline-block; padding: .15rem .55rem; border-radius: 999px; background: rgba(200, 169, 110, .22); color: #5c430f; font-size: .7rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.gl-answer { margin: 0; line-height: 1.65; }

.gl-more { margin: .35rem 0 .1rem; }
.gl-more > summary, .gl-featured-more a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; border-radius: 8px; color: var(--gl-green); font-size: .9rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gl-gold); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.gl-more > summary { list-style: none; }
.gl-more > summary::-webkit-details-marker { display: none; }
.gl-more > summary::before { content: ""; flex: 0 0 auto; width: .5rem; height: .5rem; margin: 0 .15rem 0 .1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.gl-more[open] > summary::before { transform: rotate(45deg); }
.gl-more-body { margin-top: .35rem; padding-top: .9rem; border-top: 1px solid var(--gl-line); }
.gl-more-body > :last-child { margin-bottom: .5rem; }

.gl-related { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .85rem; margin: .1rem 0 0; padding-top: .15rem; border-top: 1px solid rgba(27, 77, 62, .08); font-size: .8rem; color: #57534e; }
.gl-related-label { font-weight: 600; }
.gl-related a { display: inline-flex; align-items: center; min-height: 36px; color: var(--gl-green); text-decoration: underline; text-underline-offset: 3px; }
.gl-related a:hover, .gl-more > summary:hover, .gl-featured-more a:hover { text-decoration-color: var(--gl-green); }

/* Phones: finger-sized targets for the small links. */
@media not all and (min-width: 48rem) {
  .gl-popular a, .gl-related a { min-height: 44px; }
  .gl-popular { flex-wrap: nowrap; margin-right: -1rem; padding-right: 1rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .gl-popular::-webkit-scrollbar { display: none; }
  .gl-popular a { flex: 0 0 auto; }
  .gl-featured, .gl-card { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Focus ---------- */
.gl-popular a:focus-visible, .gl-letters a:focus-visible, .gl-toggle-all:focus-visible, .gl-more > summary:focus-visible, .gl-related a:focus-visible, .gl-featured-more a:focus-visible { outline: 3px solid var(--gl-green); outline-offset: 2px; }
.gl-bar .gl-toggle-all:focus-visible { outline-color: var(--gl-gold); }
/* Drawn inside the chip so the sideways-scrolling row cannot clip it. */
.gl-letters a:focus-visible { outline-offset: -3px; }

/* ---------- Reduced motion (jumps on this page are already instant) ---------- */
@media (prefers-reduced-motion: reduce) {
  .gl-more > summary::before { transition: none; }
}

/* ---------- Print: every explanation open, no navigation chrome ---------- */
@media print {
  .gl-bar, .gl-tools, .gl-popular, .gl-related, .gl-more > summary, .gl-featured-more { display: none; }
  .gl-cards { display: block; }
  .gl-card { margin-bottom: .75rem; box-shadow: none; break-inside: avoid; }
  .gl-more::details-content { display: block; content-visibility: visible; height: auto; }
}