/* Section and topic archive layout.
   Values below are taken from the original site and declared once on the
   section root so they can be remapped to the trf.css tokens in a single place. */
.ctx-section {
  --ctx-section-accent: var(--ctx-blue-section, #003e68);
  --ctx-section-text: #212223;
  --ctx-section-rule: #e5e5e5;
  --ctx-section-surface: #ffffff;
  --ctx-section-control: #b9bdc1;
  --ctx-section-check: var(--ctx-blue-accent, #006daa);
  --ctx-section-button: var(--ctx-blue-deep, #004a7c);
  --ctx-section-muted: #6b7075;
  color: var(--ctx-section-text);
}
/* Intro: icon column plus topics and description */
.ctx-section__intro {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 32px 0;
}
.ctx-section__icon {
  flex: 0 0 102px;
}
.ctx-section__icon img {
  display: block;
  width: 102px;
  height: 102px;
}
.ctx-section__intro-body {
  flex: 1 1 auto;
  min-width: 0;
  border-left: 1px solid var(--ctx-section-rule);
  padding-left: 32px;
}
/* Topic buttons */
.ctx-section__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
/* Pill metrics from the original: 1px border plus 11px vertical padding on a
   24px line box gives the 48px control height. The hover and focus selectors
   are part of the base group so the box styling wins over the global anchor
   rules in trf.css. */
.ctx-section__topic,
.ctx-section__topic:visited,
.ctx-section__topic:hover,
.ctx-section__topic:focus {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid var(--ctx-section-accent);
  border-radius: 6px;
  background: var(--ctx-section-surface);
  color: var(--ctx-section-accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  border-bottom-width: 1px;
}
/* Hover and focus only underline the label: no background or colour change.
   trf.css sets text-decoration: none !important on every anchor state, so the
   underline has to be forced here. text-underline-offset is a separate
   property and is not affected by that shorthand. */
.ctx-section__topic:hover,
.ctx-section__topic:focus {
  background: var(--ctx-section-surface);
  color: var(--ctx-section-accent);
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.ctx-section__topic.is-active,
.ctx-section__topic.is-active:visited,
.ctx-section__topic.is-active:hover,
.ctx-section__topic.is-active:focus {
  background: var(--ctx-section-accent);
  color: var(--ctx-section-surface);
}
.ctx-section__topic.is-active:hover,
.ctx-section__topic.is-active:focus {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.ctx-section__topic:focus-visible {
  outline: 2px solid var(--ctx-section-accent);
  outline-offset: 2px;
}
/* Description: the inline heading carries the accent, the running copy uses
   the body colour. */
.ctx-section__description p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ctx-section-text);
}
.ctx-section__description-heading {
  font-weight: 700;
  color: var(--ctx-section-accent);
}
/* Rules */
.ctx-section__rule {
  height: 0;
  margin: 0 0 32px;
  border: 0;
  border-top: 1px solid var(--ctx-section-rule);
}
/* Container width is inherited from .max-width, which reads --ctx-container in
   trf.css, so no local override is needed here. */
/* Two column layout, 17 / 7 of the original 24 column grid */
.ctx-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 60px;
}
.ctx-section__rail {
  min-width: 0;
}
@media (min-width: 992px) {
  .ctx-section__layout {
    grid-template-columns: minmax(0, 17fr) minmax(0, 7fr);
    gap: 48px;
  }
}
/* Mobile */
@media (max-width: 768px) {
  .ctx-section__intro {
    flex-direction: column;
    gap: 20px;
    padding: 24px 0;
  }
  .ctx-section__intro-body {
    border-left: 0;
    padding-left: 0;
  }
  .ctx-section__topics {
    gap: 10px;
  }
  .ctx-section__topic,
  .ctx-section__topic:visited,
  .ctx-section__topic:hover,
  .ctx-section__topic:focus {
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 0.9375rem;
  }
}
/* AJAX loading states */
.ctx-section__content.is-loading {
  opacity: 0.45;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.ctx-post-feed__more-button.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ctx-section__content.is-loading {
    transition: none;
  }
}
/* Empty feed */
.ctx-post-feed__empty {
  margin: 0;
  padding: 24px 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ctx-section-muted);
}
/* Filters module.
   Metrics follow the original component: 10px base, so 1.7rem there is 17px
   here. The original hides the module below 1200px. */
.ctx-filters {
  display: none;
  margin-bottom: 40px;
}
@media (min-width: 1200px) {
  .ctx-filters {
    display: block;
  }
}
.ctx-filters__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ctx-section-rule);
}
.ctx-filters__heading::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 20px;
  background: var(--ctx-section-accent);
}
.ctx-filters__heading h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ctx-section-accent);
}
.ctx-filters__form {
  margin: 0;
}
/* A legend is painted in the fieldset border area, so padding-top on the
   fieldset moves the options but not the label. The space above each label is
   therefore carried by the legend margin, not by the group padding. */
.ctx-filters__group {
  margin: 0;
  padding: 0 0 30px;
  border: 0;
  border-bottom: 1px solid var(--ctx-section-rule);
}
.ctx-filters__legend {
  width: 100%;
  margin: 30px 0 0;
  padding: 30px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ctx-section-text);
}
.ctx-filters__option {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  cursor: pointer;
}
.ctx-filters__group .ctx-filters__option:first-of-type {
  margin-top: 18px;
}
.ctx-filters__option:last-child {
  margin-bottom: 0;
}
/* The native control is replaced so the checked state can carry the accent.
   The declarations are forced because trf.css styles form controls globally. */
.ctx-filters .ctx-filters__checkbox[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--ctx-section-text) !important;
  border-radius: 1px !important;
  background-color: transparent !important;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 9px 9px;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
}
.ctx-filters .ctx-filters__checkbox[type="checkbox"]:checked {
  border-color: var(--ctx-section-check) !important;
  background-color: var(--ctx-section-check) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' d='M2 6.3 4.6 8.9 10 3.2'/%3E%3C/svg%3E");
}
.ctx-filters .ctx-filters__checkbox[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ctx-section-text);
  outline-offset: 3px;
}
.ctx-filters__label {
  margin-left: 9px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ctx-section-text);
}
/* Facet counts are rendered for every option but hidden, since the original
   design shows labels only. Switch to inline to expose them. */
.ctx-filters__count {
  display: none;
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--ctx-section-muted);
}
/* Options with no posts under the active term */
.ctx-filters__option.is-empty {
  cursor: default;
}
.ctx-filters__option.is-empty .ctx-filters__label {
  color: var(--ctx-section-control);
}
.ctx-filters .ctx-filters__checkbox[type="checkbox"]:disabled {
  border-color: var(--ctx-section-control) !important;
  background-color: transparent !important;
  cursor: default;
}
/* Actions */
.ctx-filters__actions {
  padding-top: 30px;
}
.ctx-filters__apply {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 2px solid var(--ctx-section-button);
  border-radius: 2px;
  background: var(--ctx-section-button);
  color: var(--ctx-section-surface);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
}
.ctx-filters__apply:hover,
.ctx-filters__apply:focus {
  background: var(--ctx-section-accent);
  border-color: var(--ctx-section-accent);
}
.ctx-filters__clear,
.ctx-filters__clear:visited,
.ctx-filters__clear:hover,
.ctx-filters__clear:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 14px 16px;
  border: 1px solid var(--ctx-section-button);
  border-radius: 2px;
  background: transparent;
  color: var(--ctx-section-button);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border-bottom-width: 1px;
}
.ctx-filters__clear:hover,
.ctx-filters__clear:focus {
  border-color: var(--ctx-section-accent);
  color: var(--ctx-section-accent);
}
/* Rail modules.
   Shared shell for Latest on Context and Most read. The marker matches the
   filters heading so the three modules read as one column. */
.rail-module {
  margin-bottom: 40px;
}
.rail-module:last-child {
  margin-bottom: 0;
}
.rail-module__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ctx-section-rule);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ctx-section-accent);
}
.rail-module__title::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 20px;
  background: var(--ctx-section-accent);
}
.rail-module__body {
  padding-top: 30px;
}
/* Latest on Context */
.ctx-rail-latest {
  padding: 0;
  margin: 0;
  list-style: none;
}
.ctx-rail-latest__item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 30px;
  border-bottom: 1px solid #dddddd;
  margin: 0 0 30px;
  list-style: none;
}
.ctx-rail-latest__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 0;
}
.ctx-rail-latest .ctx-rail-latest__media,
.ctx-rail-latest .ctx-rail-latest__media:link,
.ctx-rail-latest .ctx-rail-latest__media:visited {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  border: 0;
  line-height: 0;
}
.ctx-rail-latest img.ctx-rail-latest__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 100 / 61.7;
  object-fit: cover;
}
.ctx-rail-latest__info {
  flex-grow: 1;
  margin-top: 17px;
}
.ctx-rail-latest__title {
  position: relative;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 26.6px;
}
.ctx-rail-latest .ctx-rail-latest__title a,
.ctx-rail-latest .ctx-rail-latest__title a:link,
.ctx-rail-latest .ctx-rail-latest__title a:visited {
  color: #000000;
  border: 0;
}
.ctx-rail-latest .ctx-rail-latest__title a:hover,
.ctx-rail-latest .ctx-rail-latest__title a:focus {
  color: #000000;
  text-decoration: underline !important;
}
/* The rail becomes full width below 992px, so the two column arrangement runs
   from 640px up to that breakpoint. */
@media (min-width: 640px) and (max-width: 991.98px) {
  .ctx-rail-latest {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
  }
  .ctx-rail-latest__item {
    width: 50%;
    padding-right: 15px;
    padding-left: 15px;
    border-bottom: 0;
  }
}
@media (max-width: 639.98px) {
  .ctx-rail-latest__item + .ctx-rail-latest__item {
    flex-direction: row;
    align-items: flex-start;
  }
  .ctx-rail-latest__item + .ctx-rail-latest__item .ctx-rail-latest__media {
    min-width: 150px;
    max-width: 150px;
    min-height: 107px;
    max-height: 107px;
    margin-right: 13px;
  }
  .ctx-rail-latest__item + .ctx-rail-latest__item img.ctx-rail-latest__image {
    aspect-ratio: 16 / 9;
    height: 100%;
  }
  .ctx-rail-latest__item + .ctx-rail-latest__item .ctx-rail-latest__info {
    margin-top: 0;
  }
  .ctx-rail-latest__item + .ctx-rail-latest__item .ctx-rail-latest__title {
    font-size: 16px;
    line-height: 24px;
  }
}
/* Most read */
.ctx-rail-most-read {
  padding: 0 0 0 20px;
  margin: 0;
  list-style: none;
}
.ctx-rail-most-read__item {
  display: flex;
  align-items: flex-start;
  min-height: 80px;
  margin: 0 0 20px;
  list-style: none;
}
.ctx-rail-most-read__item:last-child {
  margin-bottom: 0;
}
.ctx-rail-most-read__rank {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  margin-right: 19px;
  border-radius: 4px;
  background-color: var(--ctx-blue-deep, #004a7c);
  color: #ffffff;
  font-size: 28px;
  font-weight: 600;
  line-height: 28px;
}
.ctx-rail-most-read__title {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 27px;
}
.ctx-rail-most-read__title a,
.ctx-rail-most-read__title a:link,
.ctx-rail-most-read__title a:visited {
  display: block;
  color: #000000;
}
.ctx-rail-most-read__title a:hover,
.ctx-rail-most-read__title a:focus {
  color: #000000;
  text-decoration: underline !important;
}
.ctx-rail-most-read__title a:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 3px;
}
@media (max-width: 639.98px) {
  .ctx-rail-most-read {
    padding-left: 0;
  }
}
/* Shared card components: label pill, image flags and title icons.
   Used by the rail modules and by the feed cards. */
.ctx-label {
  display: block;
  width: fit-content;
  margin: 0 0 9px;
}
.ctx-label a,
.ctx-label a:link,
.ctx-label a:visited {
  display: inline-block;
  border: 0;
  text-decoration: none;
}
.ctx-label span {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: var(--ctx-blue-deep, #004a7c);
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  text-transform: uppercase;
  color: #ffffff;
}
.ctx-label a:hover span,
.ctx-label a:focus span {
  background-color: var(--ctx-blue-accent, #006daa);
}
@media (min-width: 1200px) {
  .ctx-label span {
    font-size: 11px;
    padding: 3px 12px 5px;
  }
}
.ctx-flag {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ctx-flag--corner {
  top: 0;
  left: 0;
  width: fit-content;
  padding: 8px 16px;
  background-color: var(--ctx-blue-accent, #006daa);
}
.ctx-flag--corner > span {
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
  text-transform: uppercase;
  color: #ffffff;
}
.ctx-flag--video {
  left: 0;
  bottom: 0;
  width: 62px;
  height: 32px;
  background-color: var(--color-page-background, #f6f6f6);
}
.ctx-flag--video > span {
  padding-left: 15px;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: #000000;
  background-image: url("/wp-content/themes/trust/image/icon-triangle-right.svg");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: 0;
}
.ctx-flag--audio {
  left: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  background-color: var(--ctx-blue-accent, #006daa);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
@media (min-width: 640px) {
  .ctx-flag--corner > span {
    font-size: 12px;
  }
  .ctx-flag--audio {
    width: 34px;
    height: 34px;
    background-size: 16px 16px;
  }
}
.ctx-title-icon {
  position: relative;
}
.ctx-title-icon::before {
  content: "";
  position: absolute;
  left: 0;
  background-repeat: no-repeat;
  background-position: 50%;
}
.ctx-title-icon--opinion {
  text-indent: 14px;
}
.ctx-title-icon--opinion::before {
  top: 4px;
  width: 10px;
  height: 8px;
  background-image: url("/wp-content/themes/trust/image/icon-double-quote.svg");
  background-size: 10px 8px;
}
.ctx-title-icon--video {
  text-indent: 16px;
}
.ctx-title-icon--video::before {
  top: 5px;
  width: 12px;
  height: 12px;
  background-image: url("/wp-content/themes/trust/image/icon-triangle-right.svg");
  background-size: 12px 12px;
}
.ctx-title-icon--audio {
  text-indent: 20px;
}
.ctx-title-icon--audio::before {
  top: 5px;
  width: 14px;
  height: 14px;
  background-image: url("/wp-content/themes/trust/image/icon-audio-blue.svg");
  background-size: 14px 14px;
}
@media (min-width: 640px) {
  .ctx-title-icon--opinion {
    text-indent: 17px;
  }
  .ctx-title-icon--opinion::before {
    width: 12px;
    height: 10px;
    background-size: 12px 10px;
  }
  .ctx-title-icon--video {
    text-indent: 18px;
  }
  .ctx-title-icon--video::before {
    top: 7px;
  }
  .ctx-title-icon--audio::before {
    top: 7px;
  }
}
@media (min-width: 900px) {
  .ctx-title-icon--opinion {
    text-indent: 20px;
  }
  .ctx-title-icon--opinion::before {
    top: 5px;
    width: 14px;
    height: 11px;
    background-size: 14px 11px;
  }
  .ctx-title-icon--video {
    text-indent: 20px;
  }
}
/* Topics dropdown.
   Below the two column breakpoint the topic pills collapse behind a toggle,
   leaving only the section level pill on the first row. The panel and the
   toggle are created by section.js, so the markup of the templates is
   unchanged and the desktop layout is preserved with display: contents. */
/* Above the breakpoint the panel and the toggle are removed from the DOM by
   section.js, so no desktop rule is needed for them. */
@media (max-width: 991.98px) {
  .ctx-section__topics {
    position: relative;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
  }
  /* Pre-mount state. The pills ship as direct children of the nav and
     section.js, a footer script, moves them into the panel. Hiding the
     inactive ones here means the first paint already shows the collapsed row
     instead of the full grid. section.js adds is-topics-ready as soon as it
     runs, after which the panel and the promoted pill decide what is visible.
     The ctx-topics-js flag is written by script, so a visitor without
     JavaScript never gets it and keeps the full grid. */
  .ctx-topics-js .ctx-section__topics:not(.is-topics-ready) > .ctx-section__topic:not(.is-active) {
    display: none;
  }
  .ctx-section__topics-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--ctx-section-button);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 16px 16px;
    cursor: pointer;
  }
  .ctx-section__topics-toggle:focus-visible {
    outline: 2px solid var(--ctx-section-accent);
    outline-offset: 3px;
  }
  .ctx-section__topics-toggle[aria-expanded="true"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E");
  }
  .ctx-section__topics-panel {
    position: relative;
    display: none;
    flex-wrap: wrap;
    gap: 10px;
    flex-basis: 100%;
    width: 100%;
    margin-top: 20px;
    padding: 24px 0 4px 16px;
    border-top: 1px solid var(--ctx-section-rule);
  }
  .ctx-section__topics.is-topics-open .ctx-section__topics-panel {
    display: flex;
  }
  /* The accent rule is positioned against the panel, so it starts below the
     separator instead of running up behind the first row. */
  .ctx-section__topics-panel::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 4px;
    left: 0;
    width: 4px;
    background: var(--ctx-section-accent);
  }
  /* Pills inside the panel are filled, the reverse of the desktop treatment. */
  .ctx-section__topics-panel .ctx-section__topic,
  .ctx-section__topics-panel .ctx-section__topic:visited,
  .ctx-section__topics-panel .ctx-section__topic:hover,
  .ctx-section__topics-panel .ctx-section__topic:focus {
    background: var(--ctx-section-accent);
    border-color: var(--ctx-section-accent);
    color: var(--ctx-section-surface);
  }
  /* The section icon is dropped on narrow screens. */
  .ctx-section__icon {
    display: none;
  }
  .ctx-section__topics.is-topics-open ~ .ctx-section__description {
    display: none;
  }
  .ctx-section__description {
    position: relative;
    margin-top: 20px;
    padding: 20px 0 0 16px;
    border-top: 1px solid var(--ctx-section-rule);
  }
  .ctx-section__description::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--ctx-section-accent);
  }
  .ctx-section__description:empty {
    display: none;
  }
}
/* Feed item share control.
   The label sits beside the black share glyph. Declared here because the
   archives load section.css; mirror the rule in the Context: Post Feed block
   stylesheet so the control matches wherever the block is placed. */
.ctx-feed-item__share,
.ctx-feed-item__share:link,
.ctx-feed-item__share:visited,
.ctx-feed-item__share:hover,
.ctx-feed-item__share:focus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ctx-section-text, #212223);
  text-decoration: none;
  cursor: pointer;
}
.ctx-feed-item__share:hover span,
.ctx-feed-item__share:focus span {
  text-decoration: underline;
}
.ctx-feed-item__share:focus-visible {
  outline: 2px solid var(--ctx-section-text, #212223);
  outline-offset: 3px;
}
.ctx-feed-item__share-icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  line-height: 0;
}
.ctx-feed-item__share-icon img {
  display: block;
  width: 20px;
  height: 20px;
}
/* Share popup.
   Shell and panel from the shared share popup specification. The close icon is
   referenced with a relative path, which resolves against this stylesheet, so
   the file has to stay in the theme root. */
.ctx-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Sits above the sticky header, which uses --ctx-z-popup in header.css. */
  z-index: calc(var(--ctx-z-popup, 9999) + 1);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ctx-modal:target {
  display: flex;
}
.ctx-modal__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.7);
  border: 0;
  text-decoration: none;
}
.ctx-modal__dialog {
  position: relative;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.ctx-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 65px;
  background: var(--ctx-navy-mid, #042d52);
  color: #ffffff;
  flex: 0 0 auto;
}
.ctx-modal__title {
  display: flex;
  align-items: center;
  margin: 0 20px;
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  line-height: 24px;
}
.ctx-modal__close,
.ctx-modal__close:link,
.ctx-modal__close:visited {
  width: 15px;
  height: 15px;
  margin: 25px;
  flex: 0 0 15px;
  background: url("/wp-content/themes/trust/image/icon-share-close.svg") 50% no-repeat;
  background-size: 15px 15px;
  border: none;
  text-decoration: none;
}
@media (min-width: 640px) {
  .ctx-modal__header {
    height: 81px;
  }
  .ctx-modal__title {
    font-size: 22px;
    line-height: 28px;
    margin: 0 31px;
  }
  .ctx-modal__close,
  .ctx-modal__close:link,
  .ctx-modal__close:visited {
    margin: 33px;
  }
}
.ctx-share {
  max-width: 345px;
  padding-bottom: 30px;
}
.ctx-share__media {
  margin: 0 0 22px;
  min-height: 200px;
  line-height: 0;
}
.ctx-share img.ctx-share__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}
.ctx-share__headline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 23px 10px 16px;
  margin: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 23px;
  text-align: left;
  color: #000000;
}
.ctx-share__copy {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin: 0 0 14px 16px;
}
.ctx-copy-url {
  border: none;
  background: transparent;
  padding: 0;
  color: #000000;
  font-family: inherit;
  font-weight: 600;
  font-size: 18px;
  line-height: 23px;
  text-decoration-line: underline;
  cursor: pointer;
}
.ctx-copy-url__feedback {
  display: none;
  flex-direction: row;
  align-items: center;
  padding: 0 8px;
  margin-left: 12px;
  height: 28px;
  border-radius: 4px;
  background-color: #888888;
  color: #ffffff;
  font-size: 13px;
  line-height: 13px;
  font-weight: 500;
}
.ctx-copy-url__feedback.is-visible {
  display: flex;
}
.ctx-share__links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0 16px -4px;
  padding: 0;
}
.ctx-share__link,
.ctx-share__link:link,
.ctx-share__link:visited {
  display: block;
  width: 41px;
  height: 41px;
  border: 0;
  line-height: 0;
  text-decoration: none;
}
.ctx-share__link img {
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 640px) {
  .ctx-share {
    max-width: 528px;
  }
  .ctx-share__media {
    margin: 0 0 20px;
    min-height: 306px;
  }
  .ctx-share img.ctx-share__image {
    min-height: 306px;
  }
  .ctx-share__headline {
    padding: 0 31px 13px;
    font-size: 26px;
    line-height: 32.6px;
  }
  .ctx-share__copy {
    margin: 0 31px 20px;
  }
  .ctx-share__links {
    margin: 0 31px -4px;
  }
  .ctx-share__link,
  .ctx-share__link:link,
  .ctx-share__link:visited {
    width: 52px;
    height: 52px;
  }
}