/**
 * Knowledge library listing page.
 *
 * Figma: Sponge Knowledge Platform — Knowledge library (node 17856:2056).
 *
 * The page header itself is the existing `banner` component in its
 * `.banner_minimal.field-banner-style--cream` variant with
 * `.c--banner__graphic--knowledge`; only the search field it contains is styled
 * here. Result cards are the `card-knowledge` component.
 */

.c--knowledge-library {
  --_kl_gap: var(--kl_gap, 30px); /* Figma: 1020px column + 30px + 300px sidebar. */
  --_kl_aside-w: var(--kl_aside-w, 300px);
  --_kl_p-b: var(--kl_p-b, 24px);
  --_kl_list-gap: var(--kl_list-gap, 16px);

  background-color: var(--c-white);
  padding-block: var(--_kl_p-b);
}

/* One grid holds the whole view. The exposed form is a single <form> carrying
   both the search and the facets, so it is rendered once as a grid child and
   flattened with `display: contents`; its children are then placed
   individually - the search at the top of the results column, the facet list
   in the sidebar column.

   Two rows: the search, then the results. The sidebar (header line + facet
   list) starts level with the search box, per the design (Figma node
   18907:6664), so it lives in row 1 as well and spans both rows. The second
   row is `1fr`: when the facets outgrow the results (few or no matches), grid
   puts the extra height of a spanning item into flexible tracks only, so the
   results row grows and the search row keeps its own height. */
.knowledge-library__inner {
  width: var(--container_m-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--_kl_aside-w);
  grid-template-rows: auto 1fr;
  grid-column-gap: var(--_kl_gap);
  grid-row-gap: 0;
  align-items: start;
}

.knowledge-library__inner > .views-exposed-form {
  display: contents;
}

.knowledge-library__inner > .views-exposed-form > .form-item-search-api-fulltext {
  grid-column: 1;
  grid-row: 1;
  margin-block-end: 1rem;
}

/* Sidebar, row 1: "Filter by" and BEF's "Clear filters" reset share one grid
   cell, pinned to opposite ends so they read as a single header line, its top
   edge level with the search box's. */
.knowledge-filters__header,
.knowledge-library__inner > .views-exposed-form > .form-actions {
  grid-column: 2;
  grid-row: 1;
}

.knowledge-filters__header {
  justify-self: start;
}

.knowledge-library__inner > .views-exposed-form > .form-actions {
  justify-self: end;
}

/* The facet list shares that cell and is pushed below the 22px header line
   (20px line + 2px padding) plus the design's 2px gap, rather than taking a
   row of its own - a separate row would be as tall as the search box and
   leave a hole under the header. */
.knowledge-library__inner > .views-exposed-form > .knowledge-filters__list {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-block-start: 1.5rem;
}

.knowledge-library__results {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--_kl_list-gap);
  min-width: 0;
}

/* "Found N resources" above the cards — Figma Title/M (node 18907:6666). The
   top margin, with the search's own margin, gives the design's 44px between
   the search pill and the title. */
.knowledge-library__count {
  margin: 1.75rem 0 0;
  font-family: var(--f-f_s);
  font-size: 1.5rem;
  font-weight: var(--f-w_bold);
  line-height: 1.3;
  color: var(--c-title-main);
  word-wrap: break-word;
}

@media (max-width: 61.9375rem) {
  /* One column, stacked: search, header line, facets, then the results, so
     the filters stay above the results. */
  .knowledge-library__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 0.25rem;
  }

  .knowledge-library__inner > .views-exposed-form > .form-item-search-api-fulltext,
  .knowledge-filters__header,
  .knowledge-library__inner > .views-exposed-form > .form-actions,
  .knowledge-library__inner > .views-exposed-form > .knowledge-filters__list,
  .knowledge-library__results {
    grid-column: 1;
  }

  .knowledge-filters__header,
  .knowledge-library__inner > .views-exposed-form > .form-actions {
    grid-row: 2;
  }

  .knowledge-library__inner > .views-exposed-form > .knowledge-filters__list {
    grid-row: 3;
    margin-block-start: 0;
  }

  .knowledge-library__results {
    grid-row: 4;
  }
}

/* ---------------------------------------------------------------------------
 * Fulltext search — the pill at the top of the results column, spanning its
 * full width (Figma node 18907:7198), level with the sidebar header.
 * ------------------------------------------------------------------------- */
.c--knowledge-library .form-item-search-api-fulltext {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 3.75rem;

  /* No padding here: the inner <input> carries it instead, so its box fills the
     pill and a click anywhere inside the rounded border lands on the field. */
  padding: 0;
  cursor: text;
  background-color: var(--c-white);
  background-image: url("../../icons/search.svg");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 1.25rem 1.25rem;
  border: 1px solid #888888;
  border-radius: 1.875rem;
  transition: var(--t--b);
}
/* The shared input component draws its focus ring as a box-shadow, so it
     lands on the inner rectangle and cuts across this pill's rounded border.
     Drop it there and put the focus affordance on the pill instead, where it
     follows the rounded edge. */
.c--knowledge-library .form-item-search-api-fulltext:focus-within {
    border-color: var(--c-blue);
  }
.c--knowledge-library .form-item-search-api-fulltext input[type="text"] {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    height: auto;

    /* Inherited from the pill; the inline end clears the search glyph. */
    padding-block: 0;
    padding-inline: 1.5rem 3.125rem;
    font-family: var(--f-f);
    font-size: 1.125rem;
    line-height: var(--l-h);
    color: var(--c-text);
    background: none;
    border: 0;
    border-radius: inherit;
  }
.c--knowledge-library .form-item-search-api-fulltext input[type="text"]::-moz-placeholder {
      color: #555555;
      opacity: 1;
    }
.c--knowledge-library .form-item-search-api-fulltext input[type="text"]::placeholder {
      color: #555555;
      opacity: 1;
    }
.c--knowledge-library .form-item-search-api-fulltext input[type="text"]:focus {
      outline: none;
      box-shadow: none;
    }

/* Autosubmit hides Apply, leaving only the reset, styled as the design's
   "CLEAR FILTERS" on the header line. */
.c--knowledge-library .form-actions {
  display: flex;
  align-items: center;
  margin: 0;
  padding-block-end: 2px;
}

.c--knowledge-library .form-actions input[type="submit"] {
  padding: 0;
  font-family: var(--f-f);
  font-size: 0.75rem;
  font-weight: var(--f-w_medium);
  line-height: 1.25rem;
  color: #666666;
  text-transform: uppercase;
  background: none;
  border: 0;
  cursor: pointer;
}

.c--knowledge-library .form-actions input[type="submit"]:hover {
    color: var(--c-blue);
  }


/* ---------------------------------------------------------------------------
 * Sidebar filters.
 * ------------------------------------------------------------------------- */
.knowledge-filters__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-block-end: 2px;
  font-size: 0.75rem;
  font-weight: var(--f-w_medium);
  line-height: 1.25rem;
  color: #666666;
  text-transform: uppercase;
}

.knowledge-filters__title {
  flex: 1 1 auto;
  min-width: 0;
}

.knowledge-filters__clear {
  flex-shrink: 0;
  color: inherit;
  white-space: nowrap;
}

.knowledge-filters__clear:hover {
    color: var(--c-blue);
  }

.knowledge-filters__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* BEF renders each collapsible facet through the theme's own dropdown
   component (<details class="c--dropdown">), so drive it via that component's
   custom properties rather than re-selecting its internals. Closed is the flat
   grey pill; open is the white bordered panel. */
.c--knowledge-library .c--dropdown {
  --dropdown_f-s: 1rem;
  --dropdown_f-w: var(--f-w_medium);
  --dropdown_c: var(--c-gray-dim);
  --dropdown_bg: var(--c-gray-ultralight);
  --dropdown_b-r: 1.375rem;
  --dropdown_p-i: 1.25rem;
  --dropdown_p-b: 0.375rem;

  background-color: var(--dropdown_bg);
  border: 1px solid transparent;
  border-radius: var(--dropdown_b-r);
}
.c--knowledge-library .c--dropdown > .dropdown__summary {
    min-height: 2.75rem;
    padding-inline: 1.25rem 1rem;
    line-height: var(--l-h);
    transition: padding var(--t-t), color var(--t-t);
  }
/* Open: white panel with a hairline border, per the design. */
.c--knowledge-library .c--dropdown[open] {
    --dropdown_bg: var(--c-white);
    --dropdown_c: var(--c-title-main);

    padding-block-end: 1rem;
    border-color: #eeeeee;
  }
.c--knowledge-library .c--dropdown[open] > .dropdown__summary {
      padding-block: 0.875rem 0;
    }

/* Open the panel inline rather than floating it.
   details--exposed-filter.html.twig asks the dropdown component for
   `dropdown_position: 'absolute'`, which suits a wide filter bar but not this
   narrow sidebar column - the open panel covers the facets underneath it. Put
   the content back in flow so the rest of the list is pushed down instead, and
   drop the card chrome that only makes sense while floating: the open facet is
   already the white panel, so a second rounded, shadowed card inside it would
   show through. The panel's own padding goes too, since the option rows below
   carry theirs and it has to line up with the summary text. A max-height with
   scroll stays, though - some facets (Benefit) carry dozens of terms, and
   without a cap the panel would push the rest of the sidebar out of view. */
.c--knowledge-library .c--dropdown.has-position-absolute {
  --dropdown_content_pos: static;
  --dropdown_content_w: auto;
  --dropdown_content_m-h: 20rem;
  --dropdown_content_overflow: auto;
  --dropdown_content_bg: transparent;
  --dropdown_content_p-b: 0;
  --dropdown_content_p-i: 0;
  --dropdown_content_b-r: 0;
  --dropdown_content_b-sh: none;
  --dropdown_m-b-s: 0;
}

/* The dropdown ships its own chevron SVG in the summary; recolour it to match
   the design (brown when open, grey when closed) and flip it when open, since
   the component itself never rotates it. */
.c--knowledge-library .c--dropdown > .dropdown__summary svg {
  flex-shrink: 0;
  color: #555555;
  transition: var(--t--b);
}

.c--knowledge-library .c--dropdown[open] > .dropdown__summary svg {
  color: var(--c-earth);
  transform: rotate(180deg);
}

/* Option list. Multi-select facets (field_sector/field_benefit/field_project)
   render through BEF's own bef-checkboxes.html.twig, which adds ".bef-checkboxes"
   alongside the core ".form-checkboxes" class; the single-select Content type
   filter renders through core's plain radios.html.twig instead, which only ever
   gets ".form-radios" - there is no BEF-specific radios template to match a
   "bef-radios" class against. */
.c--knowledge-library .dropdown__content .bef-checkboxes,
.c--knowledge-library .dropdown__content .form-radios {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 0.75rem 0.25rem;
  padding-inline: 1.25rem 1rem;
}

/* The checkbox/radio keeps its place on the first text line: labels here carry
   the option name plus its result count and routinely wrap to two or three
   lines, so centring would float the control against the middle of the block,
   and wrapping would drop the label underneath it. */
.c--knowledge-library .dropdown__content .c--form-element {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin: 0;
}

/* The theme's label component hides every form label (label_visible defaults
   to null, not true, in components/form/label/label.twig). The facet labels
   carry the option text and its result count, so bring them back here.
   Remove this once that component's default is fixed. */
.c--knowledge-library .dropdown__content .c--label.visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  font-size: 0.9375rem;
  line-height: 1.125rem;
  color: #333333;
  cursor: pointer;
}

/* Custom checkbox/radio — 12px, sharp corners on the checkbox, round for the
   radio (Content type, the only single-select facet here), filled Earth
   brown when checked. */
.c--knowledge-library .dropdown__content input[type="checkbox"],
.c--knowledge-library .dropdown__content input[type="radio"] {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0;
  margin-block-start: 0.1875rem;

  /* These inputs also carry .c--input, whose 12px inline padding would floor
     the border-box width at 26px and swallow the size set here. */
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--c-white);
  border: 1px solid #cccccc;
  cursor: pointer;
  transition: var(--t--b);
}
.c--knowledge-library .dropdown__content input[type="checkbox"]:focus-visible, .c--knowledge-library .dropdown__content input[type="radio"]:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 1px;
  }

.c--knowledge-library .dropdown__content input[type="checkbox"] {
  border-radius: 0;
}

.c--knowledge-library .dropdown__content input[type="checkbox"]:checked {
    background-color: var(--c-earth);
    background-image: url("../../icons/check.svg");
    background-repeat: no-repeat;
    background-position: center;

    /* Scale the 12px tick down to the 10px content box. */
    background-size: 0.625rem 0.625rem;
    border-color: var(--c-earth);
  }

.c--knowledge-library .dropdown__content input[type="radio"] {
  border-radius: 50%;
}

.c--knowledge-library .dropdown__content input[type="radio"]:checked {
    border-color: var(--c-earth);
    background-image: radial-gradient(circle, var(--c-earth) 40%, transparent 41%);
  }


/* ---------------------------------------------------------------------------
 * Pagination — restyles the shared pager via its own custom properties.
 * ------------------------------------------------------------------------- */
.c--knowledge-library .c--pager {
  --pager-gap: 0.75rem;
  --pager_m-b-s: 0.625rem;
  --pager-item-bg: transparent;
  --pager-item_c: var(--c-text);
  --pager-item_f-w: var(--f-w_medium);
  --pager-item-b-r: 0.1875rem;
  --pager-item-m-w: 2.5rem;
  --pager-item-p-b: 0.625rem;
  --pager-item-p-i: 0.625rem;
  --pager-item_bg_h: var(--c-blue);
  --pager-item_c_h: var(--c-white);
  --pager-item_bg_a: var(--c-blue);
  --pager-item_c_a: var(--c-white);

  /* The current page is a blue circle; the rest stay square-ish. */

  /* Next / last controls are icon-only: drop the "Next ›" label and paint the
     glyph as a background. */
}
.c--knowledge-library .c--pager li > * {
    height: 2.5rem;
  }
.c--knowledge-library .c--pager li.is-active > *,
  .c--knowledge-library .c--pager li > *[aria-current="page"],
  .c--knowledge-library .c--pager li > *:hover {
    border-radius: 1.25rem;
  }
.c--knowledge-library .c--pager li.is-active > * {
    color: var(--c-white);
    background: var(--c-blue);
  }
.c--knowledge-library .c--pager .pager__item--next a,
  .c--knowledge-library .c--pager .pager__item--last a {
    background-repeat: no-repeat;
    background-position: center;
  }
.c--knowledge-library .c--pager .pager__item--next a [aria-hidden="true"], .c--knowledge-library .c--pager .pager__item--last a [aria-hidden="true"] {
      display: none;
    }
.c--knowledge-library .c--pager .pager__item--next a:hover, .c--knowledge-library .c--pager .pager__item--last a:hover {
      background-color: transparent;
    }
.c--knowledge-library .c--pager .pager__item--next a {
    background-image: url("../../icons/pager-next.svg");
  }
.c--knowledge-library .c--pager .pager__item--last a {
    background-image: url("../../icons/pager-last.svg");
  }