/**
 * @file
 * SaveMoLives news listing: search banner, filters, teasers and pager.
 *
 * The keyword search and the Region/County facets are separate blocks in the
 * content_above and content_top regions; the view itself renders the result
 * summary, the teasers and the pager.
 */

/* ---------------------------------------------------------------------------
 * News block paragraph (p_news_block) on interior pages.
 * ------------------------------------------------------------------------ */
.sml-news-block {
  margin-block: 0;
}

.sml-news-block__list .view,
.sml-news-block__list .view-content {
  display: block;
  gap: 0;
}

.sml-news-block__list .item-list,
.sml-news-block__list ul {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sml-news-block__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sml-news-block .sml-news-teaser {
  padding: 0;
  border-top: 0;
}

.sml-news-block .sml-news-teaser__title {
  margin: 0 0 0.5rem;
  font-family: var(--sml-font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.sml-news-block .sml-news-teaser__meta {
  margin: 0 0 0.5rem;
}

.sml-news-block .sml-news-teaser__body {
  font-size: 1rem;
}

.sml-news-block .sml-news-teaser__body p {
  margin: 0;
}

.sml-news-block__cta {
  margin-block-start: 1.5rem;
}

.sml-news-block__cta a,
.sml-news-block__cta a.btn,
.sml-news-block__cta a.btn-outline-blue {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 60px;
  padding: 0 1.5rem;
  border: 3px solid var(--sml-black);
  border-radius: 50px;
  background: var(--sml-orange);
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-weight: 700;
  font-size: 1rem;
  line-height: 2.1875;
  text-align: center;
  text-decoration: none;
}

.sml-news-block__cta a:focus,
.sml-news-block__cta a.btn:focus,
.sml-news-block__cta a.btn-outline-blue:focus {
  color: var(--sml-black);
  text-decoration: none;
  outline: none;
}

.sml-news-block__cta a:hover,
.sml-news-block__cta a.btn:hover,
.sml-news-block__cta a.btn-outline-blue:hover {
  border-color: var(--sml-black);
  background: var(--sml-orange-light);
  color: var(--sml-black);
  text-decoration: none;
}

.sml-news-block__cta a:focus-visible,
.sml-news-block__cta a.btn:focus-visible,
.sml-news-block__cta a.btn-outline-blue:focus-visible {
  outline: 2px dashed var(--sml-black);
  outline-offset: 5px;
}

.sml-news-block__cta a:focus-visible:not(:hover),
.sml-news-block__cta a.btn:focus-visible:not(:hover),
.sml-news-block__cta a.btn-outline-blue:focus-visible:not(:hover) {
  border-color: var(--sml-black);
  background: var(--sml-orange);
  color: var(--sml-black);
}

.sml-news-block__image img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
 * Search banner
 * ------------------------------------------------------------------------ */

/* The exposed-form block carries .form--inline, and form.css then sets
   .form--inline > .block__content { display: inline-block }, which shrinks
   the gradient to the intro + field instead of the results column. */
.region--content-above .form--inline > .block__content {
  display: block;
  width: 100%;
  margin-top: 0;
}

.region--content-above .views-exposed-form form {
  display: block;
  width: 100%;
}

.sml-news-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  min-height: 145px;
  margin: 2rem 0;
  padding: 1.75rem 2.5rem;
  border-radius: 10px;
  background-image: linear-gradient(
    90deg,
    var(--sml-black) 0%,
    var(--sml-orange-dark) 35%,
    var(--sml-orange) 55%,
    var(--sml-accent-magenta) 78%,
    var(--sml-purple) 100%
  );
  gap: 1.5rem 2rem;
}

.sml-news-search__intro {
  flex: 1 1 20rem;
  max-width: 48rem;
  margin: 0;
  color: var(--sml-white);
  font-family: var(--sml-font-jost);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
}

/* The submit button is positioned against this. The exposed form block renders
   the form item and actions directly here, with no form wrapper to anchor to. */
.sml-news-search__form {
  position: relative;
  flex: 0 1 28rem;
}

.sml-news-search .form-item,
.sml-news-search .js-form-item,
.sml-news-search .form-actions {
  margin: 0;
}

.sml-news-search input[type="text"],
.sml-news-search input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  padding: 0 3.25rem 0 0.75rem;
  color: var(--sml-black);
  border: 3px solid var(--sml-black);
  border-radius: 5px;
  background: var(--sml-white);
  font-family: var(--sml-font-jost);
  font-size: 1rem;
}

.sml-news-search input::placeholder {
  opacity: 1;
  color: var(--sml-black);
}

/* The icon sits inside the field instead of in a bordered box of its own. The
   element selector is needed to outrank the pill styling that buttons.css
   applies to every input[type="submit"]. */
.sml-news-search input.sml-news-search__submit {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transform: translateY(-50%);
  text-indent: -9999px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("../../images/icons/search.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.sml-news-search input.sml-news-search__submit:hover {
  opacity: 0.7;
  background-color: transparent;
}

.sml-news-search input.sml-news-search__submit:focus {
  border-color: transparent;
  background-color: transparent;
}

.sml-news-search input.sml-news-search__submit:focus-visible {
  outline: 2px solid var(--sml-black);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Region / County filters
 * ------------------------------------------------------------------------ */

.sml-news-filters .block__content {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: 1fr;
}

.sml-news-filters .facet-block__title {
  margin: 0 0 0.5rem;
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-size: 1rem;
  font-weight: 600;
  line-height: 2.1875;
}

/* The summary only has content once a filter is applied; without this its
   heading would sit under the dropdowns on every unfiltered page load. */
.sml-news-filters .facet-block:has(.facet-block__content:empty) {
  display: none;
}

.sml-news-filters .facet-block:last-child {
  grid-column: 1 / -1;
}

/* The widget nests each select in an item list, whose marker and indent would
   otherwise sit outside the box and narrow it. */
.sml-news-filters .item-list__select2,
.sml-news-filters .item-list__select2 > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Match the design's heavy-bordered select boxes on the select2 widgets. The
   box carries the arrow because select2 only draws one for its single-value
   variant, and these facets accept multiple values. */
.sml-news-filters .select2-container .select2-selection--single,
.sml-news-filters .select2-container .select2-selection--multiple {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  min-height: 60px;
  padding: 0.5rem 3.5rem 0.5rem 1.25rem;
  border: 3px solid var(--sml-black);
  border-radius: 5px;
  background-color: var(--sml-white);
  background-image: url("../../images/icons/arrow-drop-down.svg");
  background-repeat: no-repeat;
  background-position: right 26px center;
  background-size: 29px 29px;
  gap: 0.5rem;
}

.sml-news-filters .select2-container .select2-selection__arrow {
  display: none;
}

.sml-news-filters .select2-container:focus-within .select2-selection--single,
.sml-news-filters .select2-container:focus-within .select2-selection--multiple {
  outline: 2px solid var(--sml-black);
  outline-offset: 2px;
}

.sml-news-filters .select2-container .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-size: 1rem;
  line-height: 1.5;
  gap: 0.5rem;
}

.sml-news-filters .select2-container .select2-selection__choice,
.sml-news-filters .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.125rem 0.5rem;
  color: var(--sml-black);
  border: 2px solid var(--sml-black);
  border-radius: 5px;
  background: var(--sml-white);
  font-size: 0.875rem;
  gap: 0.375rem;
}

.sml-news-filters .select2-container .select2-selection__choice__remove,
.sml-news-filters .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin: 0;
  padding: 0;
  cursor: pointer;
  color: var(--sml-black);
  border: 0;
  background: none;
  font-size: 1rem;
  line-height: 1;
}

.sml-news-filters .select2-container .select2-search--inline {
  display: block;
  flex: 1 1 6rem;
  min-width: 0;
  margin: 0;
}

/* The inline search field is a <textarea type="search">, so form-text.css
   gives it width:100% and a 54px min-height, which adds a second line. */
.sml-news-filters .select2-container textarea.select2-search__field,
.sml-news-filters .select2-container textarea.select2-search__field:focus {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 1.5rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  resize: none;
  color: var(--sml-black);
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--sml-font-jost);
  font-size: 1rem;
  line-height: 1.5;
}

.sml-news-filters .select2-container textarea.select2-search__field::placeholder {
  opacity: 1;
  color: var(--sml-black);
}

/* Active Filters summary: orange links fail contrast on white. Match the
   Select2 chips — black text, black border, white fill. */
.sml-news-filters .facet-block:last-child .facet-block__content,
.sml-news-filters .facet-block:last-child .facet-block__content ul,
.sml-news-filters [data-drupal-facets-summary-id],
.sml-news-filters .facets-summary,
.sml-news-filters .item-list--facets-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.5rem 0.75rem;
}

.sml-news-filters .facets-summary-item,
.sml-news-filters .facet-summary-item--facet,
.sml-news-filters .facet-summary-item--clear,
.sml-news-filters [data-drupal-facets-summary-id] > li,
.sml-news-filters .facets-summary li,
.sml-news-filters .item-list--facets-summary > li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sml-news-filters .facet-item__status {
  display: none;
}

.sml-news-filters .facets-summary a,
.sml-news-filters .facet-summary-item--facet a,
.sml-news-filters .facet-summary-item--facet,
.sml-news-filters .facets-widget a,
.sml-news-filters .block-facets a,
.sml-news-filters .is-active,
.sml-news-filters .facets-widget .is-active,
.sml-news-filters .block-facets .is-active {
  color: var(--sml-black);
}

.sml-news-filters .facet-summary-item--facet a,
.sml-news-filters .facets-summary-item--facet a,
.sml-news-filters .facets-summary-item a:not(.facets-reset-link, .facet-summary-item--clear) {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  text-decoration: none;
  color: var(--sml-black);
  border: 2px solid var(--sml-black);
  border-radius: 5px;
  background: var(--sml-white);
  font-family: var(--sml-font-jost);
  font-size: 0.875rem;
  gap: 0.375rem;
}

.sml-news-filters .facets-summary a:hover,
.sml-news-filters .facets-summary a:focus,
.sml-news-filters .facet-summary-item--facet a:hover,
.sml-news-filters .facet-summary-item--facet a:focus,
.sml-news-filters .facets-summary-item--facet a:hover,
.sml-news-filters .facets-summary-item--facet a:focus {
  color: var(--sml-purple);
}

.sml-news-filters .facet-summary-item--clear a,
.sml-news-filters .facets-summary-item--clear a,
.sml-news-filters .facets-reset-all,
.sml-news-filters .facets-reset-link,
.sml-news-filters a.facets-reset-link,
.sml-news-filters .facet-summary-item--clear .button,
.sml-news-filters .facets-summary-item--clear .button {
  display: inline;
  padding: 0;
  text-decoration: underline;
  color: var(--sml-black);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--sml-font-jost);
  font-size: 1rem;
  font-weight: 600;
}

.sml-news-filters .facet-summary-item--clear a:hover,
.sml-news-filters .facets-summary-item--clear a:hover,
.sml-news-filters .facets-reset-all:hover,
.sml-news-filters .facets-reset-link:hover,
.sml-news-filters .facet-summary-item--clear .button:hover,
.sml-news-filters .facets-summary-item--clear .button:hover {
  color: var(--sml-purple);
  background: transparent;
}

/* ---------------------------------------------------------------------------
 * Result summary
 * ------------------------------------------------------------------------ */

.sml-news__header {
  padding-bottom: 1.5rem;
}

.sml-news__count {
  margin: 0;
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.94;
}

.sml-news__empty {
  margin: 2rem 0;
  font-family: var(--sml-font-jost);
  font-size: 1.125rem;
}

/* ---------------------------------------------------------------------------
 * Teasers
 * ------------------------------------------------------------------------ */

.sml-news-teaser {
  padding: 2.5rem 0;
  border-top: 1px solid var(--sml-black);
}

.sml-news-teaser__title {
  margin: 0 0 2rem;
  font-family: var(--sml-font-code-pro-bold);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1667;
}

.sml-news-teaser__title a {
  text-decoration: underline;
  color: var(--sml-black);
}

.sml-news-teaser__title a:hover,
.sml-news-teaser__title a:focus {
  color: var(--sml-purple);
}

.sml-news-teaser__meta {
  display: flex;
  align-items: center;
  margin: 0 0 2rem;
  color: var(--sml-black);
  font-family: var(--sml-font-lexend);
  font-size: 1.125rem;
  gap: 0.875rem;
}

.sml-news-teaser__icon {
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--sml-purple);
}

.sml-news-teaser__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sml-news-teaser__icon svg path {
  fill: currentColor;
}

.sml-news-teaser__posted-label {
  font-weight: 700;
}

.sml-news-teaser__meta time {
  margin-left: -0.5rem;
}

.sml-news-teaser__body {
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-size: 1.125rem;
  line-height: 1.5;
}

.sml-news-teaser__body p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * News article detail layout
 * ------------------------------------------------------------------------ */

.sml-news-article {
  margin-bottom: 2rem;
}

.sml-news-article__title {
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--sml-border);
  color: var(--sml-black);
  font-family: var(--sml-font-code-pro-bold);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
}

.sml-news-article__row {
  align-items: flex-start;
}

.sml-news-article__main {
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-size: 1.125rem;
  line-height: 1.5;
}

.sml-news-article__main a {
  color: var(--sml-black);
  text-decoration: underline;
}

.sml-news-article__main a:hover,
.sml-news-article__main a:focus {
  color: var(--sml-purple);
}

.sml-news-article__sidebar {
  padding-bottom: 1.5rem;
}

.sml-news-article__card {
  margin-bottom: 1rem;
  border: 1px solid var(--sml-border);
  background: var(--sml-white);
}

.sml-news-article__card-title {
  margin: 0;
  padding: 0.75rem;
  background: var(--sml-black);
  color: var(--sml-white);
  font-family: var(--sml-font-jost);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
}

.sml-news-article__card-content {
  padding: 0.75rem;
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-size: 1rem;
  line-height: 1.5;
}

.sml-news-article__card-content p {
  margin-top: 0;
}

.sml-news-article__card-content a {
  color: var(--sml-black);
  text-decoration: underline;
}

.sml-news-article__card-content a:hover,
.sml-news-article__card-content a:focus {
  color: var(--sml-purple);
}

.sml-news-article__social-title {
  margin: 0 0 1rem;
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.sml-news-article__social-content .social-media-links--platforms {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sml-news-article__social-content .social-media-links--platforms a {
  color: var(--sml-black);
}

.sml-news-article__social-content .social-media-links--platforms a:hover,
.sml-news-article__social-content .social-media-links--platforms a:focus {
  color: var(--sml-purple);
}

.sml-news-sidebar-contact {
  display: flex;
  gap: 0.75rem;
}

.sml-news-sidebar-contact__image {
  flex: 0 0 30%;
  max-width: 30%;
}

.sml-news-sidebar-contact__image img {
  display: block;
  width: 100%;
  height: auto;
}

.sml-news-sidebar-contact__content {
  flex: 1 1 auto;
  min-width: 0;
}

.sml-news-sidebar-contact__name {
  margin: 0 0 0.25rem;
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.sml-news-sidebar-contact__content a {
  color: var(--sml-black);
  text-decoration: underline;
}

.sml-news-sidebar-contact__content a:hover,
.sml-news-sidebar-contact__content a:focus {
  color: var(--sml-purple);
}

/* ---------------------------------------------------------------------------
 * Pager
 * ------------------------------------------------------------------------ */

.sml-news__pager {
  padding: 2.5rem 0 1rem;
  border-top: 1px solid var(--sml-black);
}

.sml-news__pager .pager__items {
  margin: 0;
  gap: 15px;
}

.sml-news__pager .pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 45px;
  min-width: 45px;
  height: 45px;
  padding: 0;
  text-decoration: none;
  color: var(--sml-black);
  border: 3px solid var(--sml-black);
  border-radius: 5px;
  background: var(--sml-white);
  font-family: var(--sml-font-jost);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
}

.sml-news__pager .pager__link:hover,
.sml-news__pager .pager__link:focus {
  border-color: var(--sml-black);
  background: var(--sml-gray-light);
}

.sml-news__pager .pager__link--current {
  text-decoration: underline;
  background: var(--sml-orange);
  font-weight: 800;
}

.sml-news__pager .pager__link svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* The design only draws forward-facing arrows, so mirror them going back. */
.sml-news__pager .pager__item--first svg,
.sml-news__pager .pager__item--previous svg {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
 * Breakpoints
 * ------------------------------------------------------------------------ */

@media (min-width: 62rem) {
  .sml-news-filters .block__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .sml-news-search {
    padding: 1.5rem;
  }

  .sml-news-search__intro,
  .sml-news-search__form {
    flex: 1 1 100%;
  }

  .sml-news-teaser {
    padding: 1.5rem 0;
  }

  .sml-news-teaser__title {
    margin-bottom: 1rem;
    font-size: 1.25rem;
  }

  .sml-news-teaser__meta {
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .sml-news-teaser__body {
    font-size: 1rem;
  }

  .sml-news__pager .pager__items {
    gap: 0.5rem;
  }

  .sml-news-block .sml-news-teaser {
    padding: 0;
  }

  .sml-news-block .sml-news-teaser__title {
    margin-bottom: 0.5rem;
  }

  .sml-news-block .sml-news-teaser__meta {
    margin-bottom: 0.5rem;
  }

  .sml-news-article__main {
    font-size: 1.125rem;
  }

  .sml-news-sidebar-contact {
    display: block;
  }

  .sml-news-sidebar-contact__image {
    max-width: 140px;
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 61.99rem) {
  .sml-news-article__sidebar {
    margin-top: 2rem;
  }
}