/**
 * The glossary term list: the A–Z pills, the search box and the term cards.
 *
 * The list is assembled from config — an edw_tabs paragraph and a Search API
 * view — so this file styles two separate roots rather than one wrapper of its
 * own:
 *
 * - the view's exposed form, addressed by its `data-drupal-selector`, which
 *   Views builds from the view and display id. Both controls live in it now:
 *   the search box, and the A–Z letters as a facets_exposed_filters filter
 *   rendered through Better Exposed Filters' links widget (`.bef-links`);
 * - `.skp-term-card`, the card in views-view-fields--glossary-explorer.
 *
 * The Explorer / List tab bar is not styled here: the pill look is the site's,
 * not the glossary's, and lives in the theme —
 * edwtfe/src/pcss/custom/tabs.pcss.css.
 *
 * Colours are the ones sampled for the term record (css/glossary-term.css)
 * plus the pill tints Adrian sent as an image; the theme ships no pills
 * component to reuse.
 */

[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'],
.skp-term-card {
  --skp-ink: #12263f;
  --skp-ink-muted: #6b7c93;
  --skp-link: #0081cc;
  --skp-border: #d5dde5;
  --skp-surface: #f4f6f7;

  /* the two pill tints */
  --skp-pill-on-bg: #e6f2fb;
  --skp-pill-on-ink: #12557f;

  font-family: 'Inter', sans-serif;
  color: var(--skp-ink);
}

/* ---- browse by letter --------------------------------------------------- */

/* The letters are an exposed filter, so they arrive in the form's DOM order —
   after the search box — while the design puts them above it. Ordering is done
   here rather than by reordering the filters in the view, because the view's
   order is also the tab order and the search box should still come first for a
   keyboard user.

   The form is the theme's flex column. `.form-actions` holds the magnifier and
   is taken out of flow to sit inside the search input, which is why the two
   dimensions of that input are variables: the button is positioned from them. */
[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] {
  --skp-search-w: min(400px, 100%);
  --skp-search-h: 46px;

  flex-direction: column;
  align-items: flex-start;
}

[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] .form-item-letter {
  order: 1;
  width: 100%;
}

[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] .form-item-search {
  order: 2;
  width: var(--skp-search-w);
}

/* "Browse terms" — the filter's own label, which the design shows as a heading
   over the letters. */
[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] .form-item-letter label {
  display: block;
  margin: 0 0 18px;
  color: var(--skp-ink);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
}

/* `flex-direction` has to be stated. The theme has its own component for BEF
   link lists — components/bef/bef_nested_elements — which lays them out as a
   vertical dropdown (`display: flex; flex-direction: column`). Everything else
   here overrides it on specificity, but a property this file never set would
   otherwise keep the theme's column and stack the alphabet. */
[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] .bef-links ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] .bef-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid var(--skp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--skp-ink);
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] .bef-link:hover {
  border-color: var(--skp-link);
  color: var(--skp-link);
}

/* "Show all" is the filter's own "- Any -" option, relabelled in the view. It
   is a word rather than a letter, so it does not want the square-ish minimum. */
[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] li:first-child > .bef-link {
  font-weight: 500;
  padding-left: 16px;
  padding-right: 16px;
}

/* `.bef-links a` rather than `.bef-link`: the theme's dropdown component styles
   the selected state as `.c--bef-nested-elements a.bef-link--selected`, which
   is one element-selector more specific than an attribute plus a class would
   be. This ties on classes and wins on the element. */
[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] .bef-links a.bef-link--selected {
  border-color: var(--skp-link);
  background: var(--skp-link);
  color: #fff;
}

/* BEF keeps a hidden input carrying the value for the no-JS case. */
[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] input[name='letter'] {
  display: none;
}

/* ---- the search box ----------------------------------------------------- */

/* The theme's form and button components are driven entirely by custom
   properties (components/form/form/form.css, globals/button/button.css), so
   the way to change one is to set its token. The doubled selector is for the
   specificity: the theme sets the same tokens from a single class and its CSS
   loads after this file. */
[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'][data-drupal-selector] {
  /* The form is now full width and holds both controls; the search input alone
     is capped, at --skp-search-w. */
  --form_m-w: 100%;
  /* margin-inline: the theme centres forms by default. */
  --form_m-i: 0 auto 0 0;

  position: relative;
  margin-bottom: 34px;
}

[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] .form-item {
  margin: 0;
}

/* The placeholder says it. Scoped to the search item so it does not also hide
   "Browse terms", which is the letter filter's label and is meant to show. */
[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] .form-item-search label {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
}

[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] input[type='text'] {
  width: 100%;
  height: 46px;
  padding: 0 52px 0 22px;
  border: 1px solid var(--skp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--skp-ink);
  font: inherit;
  font-size: 15px;
}

[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] input[type='text']:focus {
  border-color: var(--skp-link);
  outline: none;
}

/* Out of flow, sitting inside the right-hand end of the search input. The
   search box is the last thing in the form, so `bottom: 0` lines the button up
   with it without needing to know how tall the letters wrapped to. */
[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] .form-actions {
  position: absolute;
  bottom: 0;
  left: calc(var(--skp-search-w) - var(--skp-search-h));
  margin: 0;
}

/* The submit keeps its "Search" value — for a screen reader, and for a browser
   that never got this file — and the magnifier is drawn in its place. The
   glyph is the theme's own search icon, so the two search boxes on the site
   match. --btn_bg ends up in a `background` shorthand, which is why it carries
   the position and repeat with it. */
[data-drupal-selector='views-exposed-form-glossary-explorer-glossary-list'] .form-submit {
  --btn_bg: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13 13-2.9-2.9m1.567-3.767A5.333 5.333 0 1 1 1 6.333a5.333 5.333 0 0 1 10.667 0Z' stroke='%2300abf1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center;
  --btn_bg_h: var(--btn_bg);
  --btn_c: transparent;
  --btn_f-s: 0;
  --btn_b: 0;
  --btn_p-b: 0;
  --btn_p-i: 0;
  --btn_b-r: 999px;

  width: 46px;
  height: 46px;
}

/* ---- the cards ---------------------------------------------------------- */

/* The wrapper class is the view's own: style plugin "HTML List", wrapper class
   skp-glossary-results. */
.skp-glossary-results ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 767px) {
  .skp-glossary-results ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The card is the list item's only child, and has to fill it: cards in a row
   are as tall as the tallest. */
.skp-glossary-results li {
  display: flex;
}

.skp-term-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 26px;
  border-radius: 10px;
  background: var(--skp-surface);
}

.skp-term-card__title {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}

.skp-term-card__definition {
  margin-bottom: 18px;
  color: #33404d;
  font-size: 15px;
  line-height: 1.6;
}

.skp-term-card__definition p {
  margin: 0;
}

/* Pushed to the bottom so the buttons line up across a row of uneven cards. */
.skp-term-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  gap: 16px;
}

.skp-term-card__related {
  min-width: 0;
  font-size: 14px;
}

.skp-term-card__related-label {
  display: block;
  margin-bottom: 2px;
  color: var(--skp-ink-muted);
  font-size: 13px;
}

.skp-term-card__related-links a {
  color: var(--skp-link);
  text-decoration: none;
}

.skp-term-card__related-links a:hover {
  text-decoration: underline;
}

.skp-term-card__open {
  margin-left: auto;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--skp-ink);
  font-size: 14px;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.skp-term-card__open:hover,
.skp-term-card__open:focus {
  background: var(--skp-pill-on-bg);
  color: var(--skp-pill-on-ink);
}

/* ---- empty state and pager ---------------------------------------------- */

[data-skp-glossary-list] .views-empty {
  padding: 28px 0;
  color: var(--skp-ink-muted);
}

[data-skp-glossary-list] .pager {
  margin-top: 28px;
}