/* =========================================================================
   Glossary — /glossary/ and /glossary/{term}/
   Reuses the theme's existing design tokens (style.css :root) so this looks
   like it belongs to the site rather than introducing a new visual language.
   Only loaded on glossary templates (see inc/glossary.php enqueue block).

   Both templates share one layout: a sticky, filterable sidebar listing
   every published term, next to a main content column. On /glossary/ the
   main column is every term listed in full (title/excerpt/Read More) with
   the sidebar as an in-page jump list; on a single term page the main
   column is that one term's content, with the sidebar for browsing to
   others. Same .glossary-sidebar / .glossary-layout classes power both.
   ========================================================================= */

/* ---- Hero: reuses the site's own dark .lp-hero (style.css) — the exact
   same hero used on About Us / Contact Us / every landing page, on both
   /glossary/ and each individual term page. ---- */

/* ---- Shared sidebar + main two-column layout ---- */
.glossary-listing-section{padding:var(--space-12) 0 var(--space-24)}
.glossary-single-body{padding:var(--space-12) 0}

.glossary-layout{
  display:grid;grid-template-columns:280px 1fr;gap:var(--gutter);align-items:start;
}

/* Sticky, self-scrolling list of every published term — offset below the
   site's own sticky header (72px, see .site-header in style.css). Kept
   lightweight (title+link only, no excerpts) so this is cheap even with
   hundreds of entries — see t246_glossary_all_terms_light(). */
.glossary-sidebar{
  position:sticky;top:calc(72px + var(--space-6));
  max-height:calc(100vh - 72px - var(--space-10));
  display:flex;flex-direction:column;gap:var(--space-4);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-card);
}
.glossary-sidebar-search{
  position:relative;display:flex;align-items:center;gap:8px;flex:none;
  background:var(--surface-sunken);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);height:40px;padding:0 var(--space-3);
  transition:var(--transition-control);
}
.glossary-sidebar-search:focus-within{background:var(--white);border-color:var(--border-brand);box-shadow:var(--ring-brand)}
.glossary-sidebar-search svg{flex:none;color:var(--text-muted)}
.glossary-sidebar-search input{
  flex:1;min-width:0;border:none;background:transparent;outline:none;
  font:var(--fw-medium) var(--fs-sm)/1 var(--font-sans);color:var(--text-strong);
}
.glossary-sidebar-search input::placeholder{color:var(--text-muted)}

.glossary-sidebar-list{
  list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;
  display:flex;flex-direction:column;gap:2px;
}
.glossary-sidebar-list a{
  display:block;padding:8px 10px;border-radius:var(--radius-sm);
  font:var(--fw-medium) var(--fs-sm)/1.3 var(--font-sans);color:var(--text-body);
  transition:var(--transition-control);
}
.glossary-sidebar-list a:hover{background:var(--surface-sunken);color:var(--text-strong)}
.glossary-sidebar-list a.active{background:var(--green-50);color:var(--brand-green-deep);font-weight:var(--fw-bold)}
.glossary-sidebar-empty{font-size:var(--fs-sm);color:var(--text-muted);text-align:center;padding:var(--space-4) 0;margin:0}

/* ---- /glossary/ main column: every term, listed in full, sequentially ----
   Anchor targets (#term-{slug}) so the sidebar can jump-scroll to any entry
   without leaving the page; scroll-margin-top keeps the sticky header from
   covering the entry title when it lands. */
.glossary-entries{display:flex;flex-direction:column}
.glossary-entry{
  padding:var(--space-8) 0;border-bottom:1px solid var(--border-subtle);
  scroll-margin-top:calc(72px + var(--space-6));
}
.glossary-entry:first-child{padding-top:0}
.glossary-entry:last-child{border-bottom:none}
.glossary-entry h2{margin:0 0 var(--space-3)}
.glossary-entry h2 a{
  font:var(--fw-extrabold) var(--fs-h3)/var(--lh-snug) var(--font-sans);
  color:var(--brand-green-deep);letter-spacing:var(--ls-tight);text-decoration:none;
}
.glossary-entry h2 a:hover{color:var(--link-hover)}
.glossary-entry p{
  margin:0 0 var(--space-4);font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-body);
  max-width:72ch;
}
.glossary-entry-readmore{
  display:inline-flex;align-items:center;gap:6px;
  font:var(--fw-bold) var(--fs-sm)/1 var(--font-sans);color:var(--brand-green-deep);
}
.glossary-entry-readmore:hover{color:var(--link-hover)}

.glossary-empty{
  text-align:center;padding:var(--space-24) var(--space-5);
  color:var(--text-muted);font-size:var(--fs-body-lg);
}

/* ---- Related-terms grid (single-term page) & any other card grid reuse ---- */
.glossary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.glossary-grid-related{margin-top:var(--space-8)}
.glossary-card{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--card-pad-sm);text-decoration:none;color:inherit;
}
.glossary-card h3{font:var(--fw-bold) var(--fs-h4)/var(--lh-snug) var(--font-sans);color:var(--text-strong)}
.glossary-card p{
  flex:1;font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--text-body);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.glossary-card-thumb{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:16/9;background:var(--surface-sunken)}
.glossary-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.glossary-read-more{font:var(--fw-bold) var(--fs-sm)/1 var(--font-sans);color:var(--brand-green-deep)}

/* ---- Single term page: content card ---- */
.glossary-single-thumb{
  border-radius:var(--radius-xl);overflow:hidden;margin-bottom:var(--space-10);box-shadow:var(--shadow-card);
}
.glossary-single-thumb img{width:100%;height:auto;display:block}

/* Full glossary content — headings/paragraphs/lists/links/images/tables
   from the WYSIWYG editor, styled to match the site's typography scale. */
.glossary-content{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-body)}
.glossary-content > *:first-child{margin-top:0}
.glossary-content h2{
  font:var(--fw-extrabold) var(--fs-h3)/var(--lh-snug) var(--font-sans);
  color:var(--text-strong);letter-spacing:var(--ls-tight);margin:var(--space-10) 0 var(--space-4);
}
.glossary-content h3{
  font:var(--fw-bold) var(--fs-h4)/var(--lh-snug) var(--font-sans);
  color:var(--text-strong);margin:var(--space-8) 0 var(--space-3);
}
.glossary-content p{margin:0 0 var(--space-5)}
.glossary-content ul,.glossary-content ol{margin:0 0 var(--space-5);padding-left:1.3em}
.glossary-content li{margin-bottom:var(--space-2)}
.glossary-content a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.glossary-content a:hover{color:var(--link-hover)}
.glossary-content img{max-width:100%;height:auto;border-radius:var(--radius-lg);margin:var(--space-5) 0}
.glossary-content blockquote{
  margin:var(--space-6) 0;padding:var(--space-4) var(--space-6);
  border-left:3px solid var(--brand-green-deep);background:var(--surface-tile);
  border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-strong);
}
.glossary-content table{
  width:100%;border-collapse:collapse;margin:var(--space-6) 0;
  font-size:var(--fs-sm);overflow-x:auto;display:block;
}
.glossary-content table thead{background:var(--surface-sunken)}
.glossary-content table th,.glossary-content table td{
  padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--border-subtle);
}
.glossary-content table th{font-weight:var(--fw-bold);color:var(--text-strong)}

.glossary-related-section{padding:var(--space-16) 0;background:var(--surface-page);border-top:1px solid var(--border-subtle)}

.glossary-single-main{display:flex;flex-direction:column;gap:var(--space-6)}
.glossary-single-card{padding:var(--card-pad)}

.glossary-single-cta{
  margin-top:var(--space-10);padding-top:var(--space-8);border-top:1px solid var(--border-subtle);
}
.glossary-single-cta h3{
  font:var(--fw-bold) var(--fs-h4)/var(--lh-snug) var(--font-sans);color:var(--text-strong);margin:0 0 var(--space-3);
}
.glossary-single-cta p{font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--text-body);margin:0 0 var(--space-5);max-width:640px}
.glossary-single-cta-actions{display:flex;gap:12px;flex-wrap:wrap}

.glossary-adjacent-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.glossary-adjacent-link{
  display:flex;flex-direction:column;gap:6px;
  padding:var(--card-pad-sm);background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);transition:var(--transition-card);
}
.glossary-adjacent-link:hover{box-shadow:var(--shadow-card-hover);transform:var(--lift-card)}
.glossary-adjacent-next{text-align:right;align-items:flex-end}
.glossary-adjacent-label{
  font:var(--fw-bold) var(--fs-xs)/1 var(--font-sans);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;
}
.glossary-adjacent-title{font:var(--fw-bold) var(--fs-body)/var(--lh-snug) var(--font-sans);color:var(--text-strong)}

/* =========================================================================
   Responsive — breakpoints match the rest of the theme (1024 / 900 / 640 / 480)
   ========================================================================= */
@media (max-width:1023px){
  .glossary-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  /* .lp-hero-h1 / .lp-hero-body already have their own responsive sizing in
     style.css (shared with every other page's hero) — nothing to add here. */

  .glossary-layout{grid-template-columns:1fr}
  .glossary-sidebar{
    position:static;max-height:280px;order:-1; /* list above the content on tablet/mobile */
  }
  .glossary-adjacent-nav{grid-template-columns:1fr}
  .glossary-adjacent-next{text-align:left;align-items:flex-start}
}

@media (max-width:640px){
  .glossary-grid{grid-template-columns:1fr}
  .glossary-content table{font-size:12px}
  .glossary-sidebar{max-height:220px;padding:var(--space-4)}
  .glossary-single-cta-actions .btn{flex:1;min-width:160px}
  .glossary-entry{padding:var(--space-6) 0}
  .glossary-entry h2 a{font-size:20px}
}

@media (max-width:480px){
  .glossary-card{padding:18px}
}