/* ==========================================================================
   Glossary component styles (hub page)
   --------------------------------------------------------------------------
   Scoped stylesheet for the glossary HUB page (/glossary). Both the TERM
   pages (/glossary/<slug>) AND the hub's own hero now reuse the production
   theme's real Bootstrap components verbatim — container-lg / row / col,
   card / card-sm / rounded-top-start rounded-bottom-end, btn btn-primary
   lift, display-* headings, fs-lg text-muted lead text, text-uppercase
   text-warning eyebrows, the #335EEA check SVG, product-card-body. So every
   rule below exists purely to style the hub's search + A-Z browse UI (the
   search box, the sticky A-Z jump bar and the term-row list), which has no
   production analogue.

   Colour, font and radius tokens are reconciled to the production theme's
   real custom properties (see assets/css/theme.bundle.css and custom_css.css)
   so the hub reads as native to resolve247.ai rather than a separate
   microsite.

   Loaded after libs/theme/theme-sans-serif/custom_css in
   glossary/_template/partials/head.html, so it layers on top of production
   styles and can reference the theme's --bs-* custom properties directly.

   Every custom property below is prefixed --gloss- so it can never collide
   with the theme's own --bs-* variables. Every component rule is scoped under
   a glossary-specific class (never a bare element selector such as h2, p, ul,
   a, body). The hub's body, html, a, h1/h2, .nav and .footer styling come
   from production chrome (loaded via the theme bundles), not from here.
   ========================================================================== */

:root{
  /* ---- Brand colours (mapped to production tokens where one exists) ---- */
  --gloss-primary: var(--bs-primary, #6658ea);
  --gloss-white: var(--bs-white, #fff);

  /* Foreground/text tones */
  --gloss-fg1: var(--bs-body-color, #1b1642);
  --gloss-fg2: var(--bs-secondary, #575a7b);
  --gloss-fg3: var(--bs-gray-500, #8d9aae);
  --gloss-gray-200: var(--bs-gray-200, #eaf2fe);
  --gloss-gray-300: var(--bs-gray-300, #dce0f3);

  /* RGB triplets — needed to build rgba() tints/overlays (translucent
     sticky bar, focus rings, hover washes) from the same production
     colours above rather than from arbitrary hardcoded triplets */
  --gloss-primary-rgb: var(--bs-primary-rgb, 102,88,234);
  --gloss-dark-rgb: var(--bs-dark-rgb, 27,22,66);
  --gloss-light-rgb: var(--bs-light-rgb, 243,248,255);

  /* Radius — production's own asymmetric "leaf" corner treatment (see
     .product-card-image in custom_css.css, which rounds only the
     top-left/bottom-right corners) sized off the real border-radius scale.
     The term-page cards get this same leaf shape from the production
     rounded-top-start rounded-bottom-end utilities; here it styles the
     hub search box. */
  --gloss-radius-leaf-sm: var(--bs-border-radius-sm, .5rem) 0 var(--bs-border-radius-sm, .5rem) 0;

  /* Shadows — offsets/blur kept from the mockup (production has no named
     shadow-scale token), tint switched from an arbitrary rgba to the real
     brand-ink RGB above so it matches the site's actual dark colour */
  --gloss-shadow-sm: 0 .25rem .75rem rgba(var(--gloss-dark-rgb), .08);
  --gloss-shadow: 0 .5rem 1.5rem rgba(var(--gloss-dark-rgb), .10);
}

/* --------------------------------------------------------------------------
   Hub page
   -------------------------------------------------------------------------- */

.search{position:relative;max-width:540px;margin:0 auto;}
.search__icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);display:flex;pointer-events:none;}
.search__input{width:100%;padding:15px 44px 15px 48px;font-size:16.5px;border:1px solid var(--gloss-gray-300);border-radius:var(--gloss-radius-leaf-sm);background:var(--gloss-white);box-shadow:var(--gloss-shadow);color:var(--gloss-fg1);font-family:inherit;}
.search__input:focus{outline:none;border-color:var(--gloss-primary);box-shadow:0 0 0 3px rgba(var(--gloss-primary-rgb),.25);}
.search__input::placeholder{color:#9aa3bf;opacity:1;}
.search__clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:#eef1fb;color:var(--gloss-fg2);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;display:none;align-items:center;justify-content:center;}
.search__scope{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;font-size:13px;color:var(--gloss-fg3);}
.search__count{margin-top:8px;font-size:14px;color:var(--gloss-primary);font-weight:600;min-height:20px;}

.az-bar{position:sticky;top:64px;z-index:40;background:rgba(var(--gloss-light-rgb),.94);backdrop-filter:blur(8px);padding:11px 24px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;box-shadow:0 1px 0 rgba(var(--gloss-dark-rgb),.05);}
.az-letter{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:.4rem 0 .4rem 0;font-size:13px;font-weight:700;color:var(--gloss-primary);background:var(--gloss-white);box-shadow:0 1px 2px rgba(var(--gloss-dark-rgb),.08);transition:background .15s ease,color .15s ease;}
a.az-letter:hover{background:var(--gloss-primary);color:var(--gloss-white);}
.az-letter.is-off{color:#c3cae0;background:transparent;box-shadow:none;pointer-events:none;cursor:default;}

.glossary-list{max-width:860px;margin:0 auto;padding:6px 24px 8px;}
.term-group{scroll-margin-top:120px;}
.term-group__head{display:flex;align-items:center;gap:16px;margin:34px 0 4px;}
.term-group__letter{font-size:26px;font-weight:600;color:var(--gloss-primary);min-width:24px;letter-spacing:-.02em;}
.term-group__rule{flex:1;height:2px;background:#e4e9f6;}

.term-row{display:grid;grid-template-columns:240px 1fr 22px;gap:18px;align-items:baseline;padding:15px 12px;border-bottom:1px solid var(--gloss-gray-200);border-radius:.4rem;}
.term-row:hover{background:var(--gloss-white);box-shadow:var(--gloss-shadow-sm);}
.term-row__name{font-size:17px;font-weight:600;color:var(--gloss-fg1);}
.term-row:hover .term-row__name{color:var(--gloss-primary);}
.term-row__def{font-size:15px;color:var(--gloss-fg2);line-height:1.5;}
.term-row__arrow{color:#b7bfd8;font-size:16px;text-align:right;}

.no-results{text-align:center;padding:56px 20px;}
.no-results__title{font-size:19px;color:var(--gloss-fg1);font-weight:600;margin-bottom:6px;}
.no-results__sub{font-size:15px;color:var(--gloss-fg3);}
.linklike{border:0;background:none;color:var(--gloss-primary);font-weight:600;cursor:pointer;font-size:inherit;font-family:inherit;padding:0;}

/* --------------------------------------------------------------------------
   Term page — the one bespoke term-page rule: brand-gold highlight on the
   authored <mark> in the CTA headline (production has no <mark> treatment).
   Uses the theme's own --bs-warning / --bs-dark tokens.
   -------------------------------------------------------------------------- */
.gloss-cta-headline mark{background:var(--bs-warning);color:var(--bs-dark);padding:.05em .3em;border-radius:.25rem;}

@media(max-width:640px){
  .term-row{grid-template-columns:1fr;gap:3px;}
  .term-row__arrow{display:none;}
}