/* ===============================================================
   HCBI resource page styles. Loaded via $extra_css alongside
   solution.css on resource content pages (glossary, FAQ extras).
   Reuses shared tokens from main.css and the solution-page chrome
   from solution.css. Holds only resource-specific layout.
   =============================================================== */

/* GLOSSARY LETTER INDEX */
.glossary-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.glossary-index a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--navy);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.glossary-index a:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* GLOSSARY GROUPS */
.glossary-group {
  /* offset so the letter clears the sticky header when jumped to */
  scroll-margin-top: 100px;
}

.glossary-group + .glossary-group {
  margin-top: var(--space-lg);
}

.glossary-letter {
  font-size: var(--fs-h3);
  color: var(--green-dark);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--green);
}

/* DEFINITION LIST */
.glossary-list {
  margin: 0;
}

.glossary-list dt {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin-top: var(--space-md);
}

.glossary-list dt:first-child {
  margin-top: 0;
}

.glossary-list dd {
  margin: 0.35rem 0 0;
  color: var(--text-dark);
  line-height: var(--lh-body);
}

/* ---------------------------------------------------------------
   BLOG
   Index listing, single post body, and the admin preview banner.
--------------------------------------------------------------- */

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

.post-list__item {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-gray);
}

.post-list__item:last-child {
  border-bottom: 0;
}

.post-list__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  margin: 0 0 0.375rem;
}

.post-list__title a {
  color: var(--navy);
  text-decoration: none;
}

.post-list__title a:hover,
.post-list__title a:focus {
  text-decoration: underline;
}

.post-list__meta {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.post-list__excerpt {
  margin: 0 0 0.5rem;
  line-height: var(--lh-body);
}

.post-list__more a {
  font-weight: 600;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-lg);
}

.pager__status {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   SINGLE POST
--------------------------------------------------------------- */

.post-body {
  padding: var(--space-lg) 0;
}

/* Long-form reading measure, narrower than the 1200px container the
   rest of the site uses for grids.

   SUPERSEDED. This file loads after pages.css on a post page, so this
   single-class rule quietly beat the 820px pages.css asked for and the
   article rendered at 736px for as long as both existed. The width is
   now set by :is(.page-blog-post) .post-body__inner in pages.css, which
   outranks this. Kept only so the history is visible; do not raise its
   specificity. */
.post-body__inner {
  max-width: 46rem;
}

.post-body__meta {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-gray);
}

.post-body__inner h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--navy);
  line-height: var(--lh-heading);
  margin: var(--space-lg) 0 var(--space-sm);
}

.post-body__inner h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--navy);
  line-height: var(--lh-heading);
  margin: var(--space-md) 0 var(--space-xs);
}

.post-body__inner p,
.post-body__inner li {
  line-height: var(--lh-body);
}

.post-body__inner p {
  margin: 0 0 var(--space-sm);
}

.post-body__inner ul,
.post-body__inner ol {
  margin: 0 0 var(--space-sm) 1.25rem;
}

.post-body__inner li {
  margin-bottom: 0.375rem;
}

.post-body__inner blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--green);
  background: var(--light-gray);
  font-style: italic;
}

.post-body__inner img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.post-body__inner table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
  font-size: var(--fs-small);
}

.post-body__inner th,
.post-body__inner td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-gray);
}

/* ---------------------------------------------------------------
   PREVIEW BANNER (admin only, never public)
--------------------------------------------------------------- */

.preview-banner {
  background: #6B4A05;
  color: #FFFFFF;
  padding: 0.625rem 0;
  font-size: var(--fs-small);
  text-align: center;
}

.preview-banner a {
  color: #FFFFFF;
  font-weight: 600;
}