/**
 × feed_css v2.21 × updated 2026-10-07 ×
 × created 2026-08-10 × raimundo p. solar ×
 × Feed family: CBC, News, Publications archives + singles, Feed page ×
 **/

/* --------------------------------------------------
   1. SHARED FEED ARCHIVE LAYOUT
-------------------------------------------------- */

/*
 * .grid.two in layout.css owns the 50 / 50 geometry.
 *
 * feed.css only owns behaviour that is specific to
 * CBC Journal / Canid News / Publications / Global Feed:
 * - scrollable sticky filters
 * - compact result rows
 * - shared document Single interface
 */

.feed-archive {
  --feed-header-height:
    calc(
      60px
      + 0.6rem
    );

  --feed-sticky-gap:
    var(--breche-s);

  --feed-sticky-top:
    calc(
      var(--feed-header-height)
      + var(--feed-sticky-gap)
    );

  padding-top: 0;
}


.feed-layout {
  align-items: stretch;
}


.feed-sidebar {
  position: relative;

  align-self: stretch;

  min-width: 0;
}


.feed-sidebar__intro {
  margin-bottom:
    var(--breche-m);
}


.feed-sidebar__intro h1 {
  margin: 0;
}


.feed-sidebar__intro > p {
  max-width: 38rem;

  margin:
    0.35rem
    0
    0;
}

/* Intro links (.link-arrow, style.css) right under the intro sentence. */
.feed-sidebar__intro > p + p {
  margin-top: 0.1rem;
}


/* --------------------------------------------------
   STICKY / SCROLLABLE FILTER PANEL
-------------------------------------------------- */

.feed-sidebar__sticky {
  position: sticky;

  top:
    var(--feed-sticky-top);

  width: 100%;

  max-height:
    calc(
      100vh
      - var(--feed-sticky-top)
      - var(--breche-s)
    );

  max-height:
    calc(
      100dvh
      - var(--feed-sticky-top)
      - var(--feed-sticky-gap)
    );

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior-y: auto;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(20, 20, 20, 0.35)
    transparent;
}


.feed-sidebar__filters {
  width:
    min(
      100%,
      20rem
    );
}


.feed-filter-search-group {
  position: sticky;

  top: 0;

  z-index: 4;

  margin-top: 0;

  padding-top: 0.1rem;

  padding-bottom:
    var(--breche-s);

  background:
    var(--color-white);
}


.feed-results {
  min-width: 0;
}

/*
 * Lists with small type labels (Feed, search): first
 * row lowered so its uppercase label lines up with the
 * capitals of the page title (optical alignment).
 */
.feed-layout > .feed-results:has(.feed-item__category) {
  padding-top: 0.15rem;
}


/* --------------------------------------------------
   2. SHARED FEED RESULT
-------------------------------------------------- */

.feed-item {
  margin: 0;

  padding:
    0.25rem
    0
    0.4rem;

  border-top:
    0.9px
    solid
    var(--color-black);
}


/*
 * Keep the first visible result flush with the top of
 * the results column.
 *
 * `:first-child` alone breaks after filtering because
 * the original first item remains in the DOM with
 * [hidden]. `nth-child(... of ...)` selects the actual
 * first visible Feed item instead.
 */
.feed-item:first-child,
.feed-item:nth-child(
  1 of .feed-item:not([hidden])
) {
  padding-top: 0;

  border-top: 0;
}


.feed-item__headline {
  margin: 0;

  line-height: inherit;
}


/*
 * Global Feed only:
 * small singular content label immediately above
 * the standard bold Feed title.
 */
.feed-item__category {
  margin: 0 0 0.08rem;

  line-height: 1;

  text-transform: uppercase;
}


.feed-item__authors {
  margin:
    0.08rem
    0
    0;

  font-style: normal;
}


.feed-item[hidden] {
  display: none !important;
}


/* --------------------------------------------------
   3. SHARED FEED SINGLE
-------------------------------------------------- */

/*
 * PDF Singles occupy exactly one visible screen.
 * The footer therefore begins immediately after
 * the viewport: one scroll reveals the footer.
 *
 * The interface and bottom navigation take their
 * natural height; the PDF receives everything left.
 */

.feed-single.has-pdf {
  --feed-single-header-height:
    calc(
      60px
      + 0.6rem
    );

  display: flex;
  flex-direction: column;

  /*
   * Leave a small visible buffer below the document
   * so Previous / Next remain directly visible.
   *
   * Width is unaffected: only vertical space is
   * reduced.
   */
  height:
    calc(
      100svh
      - var(--feed-single-header-height)
      - 10rem
    );

  min-height: 30.5rem;

  overflow: hidden;
}


.feed-single__interface-shell {
  flex: 0 0 auto;

  padding-bottom:
    0.35rem;
}


.feed-single__meta {
  margin: 0;
}


.feed-single__heading {
  display: inline;
}


.feed-single__title {
  font-weight: inherit;
}


.feed-single__pdf-shell {
  display: flex;

  flex: 1 1 auto;

  align-items: stretch;

  min-height: 0;

  padding-bottom:
    0.35rem;
}


/*
 * The iframe fills the complete width defined by
 * the shared .marges container.
 *
 * Its height alone compresses to keep navigation
 * visible within the first viewport.
 */
.feed-single__pdf-viewer {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 0;

  border: 0;

  background:
    #ededed;
}


.feed-single__navigation-shell {
  flex: 0 0 auto;

  padding-bottom:
    0.35rem;
}


.feed-single__navigation {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  margin: 0;

  padding: 0;
}


.feed-single__navigation-next {
  text-align: right;
}


.feed-single__content-shell {
  margin-top:
    var(--breche-m);
}


.feed-single__content-shell article > :first-child {
  margin-top: 0;
}


/* --------------------------------------------------
   WORDPRESS ADMIN BAR
-------------------------------------------------- */

@media (min-width: 783px) {

  body.admin-bar .feed-archive {
    --feed-sticky-top:
      calc(
        var(--feed-header-height)
        + 32px
        + var(--feed-sticky-gap)
      );
  }

}


/* --------------------------------------------------
   4. COMPACT HEADER
-------------------------------------------------- */

@media (min-width: 640px) and (max-width: 1010px) {

  .feed-archive {
    --feed-header-height:
      calc(
        48px
        + 0.8rem
      );
  }


  .feed-single.has-pdf {
    --feed-single-header-height:
      calc(
        48px
        + 0.8rem
      );
  }

}


/* --------------------------------------------------
   5. MOBILE
-------------------------------------------------- */

@media (max-width: 639px) {

  .feed-layout {
    align-items: start;
  }


  .feed-sidebar {
    align-self: start;
  }


  .feed-sidebar__intro {
    margin-bottom:
      var(--breche-s);
  }


  .feed-sidebar__sticky {
    position: static;

    max-height: none;

    overflow: visible;
  }


  .feed-sidebar__filters {
    width: 100%;
  }


  .feed-filter-search-group {
    position: static;

    padding-top: 0;
    padding-bottom: 0;
  }


  /*
   * On small screens the PDF keeps a practical
   * reading height instead of forcing the complete
   * Single into one viewport.
   */
  .feed-single.has-pdf {
    display: block;

    height: auto;
    min-height: 0;

    overflow: visible;
  }


  .feed-single__pdf-shell {
    display: block;

    min-height: 0;
  }


  .feed-single__pdf-viewer {
    width: 100%;
    height: 72svh;
    min-height: 32rem;
  }


  .feed-single__navigation-shell {
    padding-top:
      var(--breche-s);
  }
}

/* --------------------------------------------------
   6. CANID NEWS — CENTERED STRUCTURED SINGLE
-------------------------------------------------- */

/*
 * Editorial reading width:
 * 15% breathing room / 70% article / 15% breathing room.
 *
 * This is deliberately independent of the archive's
 * 50 / 50 Feed grid.
 */
.news-single__article {
  width: 70%;

  margin-inline: auto;
}


.news-single__header {
  margin-bottom:
    var(--breche-m);
}


.news-single__headline,
.news-single__canids,
.news-single__subtitle,
.news-single__caption {
  margin-top: 0;
}


.news-single__headline {
  margin-bottom: 0;

  line-height: 1.2;
}


.news-single__meta-dot {
  display: inline-block;

  margin-inline:
    0.18em;

  font-size: 1.45em;
  line-height: 0;

  vertical-align:
    -0.06em;
}


.news-single__canids {
  margin:
    0.12rem
    0
    0;

  line-height: 1.2;
}


.news-single__section,
.news-single__figure {
  margin:
    0
    0
    var(--breche-m);
}


.news-single__subtitle {
  margin-bottom:
    0.22rem;

  line-height: 1.15;
}


.news-single__richtext {
  line-height: 1.35;
}


.news-single__richtext > :first-child {
  margin-top: 0;
}


.news-single__richtext > :last-child {
  margin-bottom: 0;
}


/*
 * Preserve formatting authored in the ACF WYSIWYG.
 * Parent text-regular is the normal body weight;
 * backend Bold / Italic visibly override it.
 */
.news-single__richtext strong,
.news-single__richtext b {
  font-weight: 500;
}


.news-single__richtext em,
.news-single__richtext i {
  font-style: italic;
}


.news-single__richtext ul,
.news-single__richtext ol {
  padding-left: 1.2em;
}


.news-single__figure img {
  display: block;

  width: 100%;
  height: auto;
}


.news-single__caption {
  margin-bottom: 0;

  padding-top:
    0.2rem;
}


.news-single__table {
  overflow-x: auto;
}


.news-single__table table {
  width: 100%;

  border-collapse: collapse;
}


.news-single__table th,
.news-single__table td {
  padding:
    0.2rem
    0.35rem
    0.2rem
    0;

  vertical-align: top;

  text-align: left;
}


@media (max-width: 1010px) {

  .news-single__article {
    width: 82%;
  }

}


@media (max-width: 639px) {

  .news-single__article {
    width: 100%;
  }


  .news-single__header {
    margin-bottom:
      var(--breche-s);
  }


  .news-single__section,
  .news-single__figure {
    margin-bottom:
      var(--breche-s);
  }

}