/* ==========================================================================
   Stirred By Grace - category / taxonomy results pages
   Enqueued on archive + search views by
   wp-content/novamira-sandbox/sbg-archive-nav.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Card titles
   Kadence sizes every h2 from the Customizer at 43px / line-height .949.
   That is a page-headline size landing on a ~300px card, so three-word
   recipe names wrapped to two and three lines and fought the photograph.
   Scoped to the archive loop so single-post and widget headings are untouched,
   and deliberately kept off .sbg-archive-rating (the star row and its
   "5 Stars (1 Rating)" line keep the sizes they already had).
   -------------------------------------------------------------------------- */
.post-archive .loop-entry .entry-title {
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.1px;
}

@media (max-width: 1024px) {
  .post-archive .loop-entry .entry-title {
    font-size: 20px;
  }
}

/* Phones run a two-up grid (section 4 below), so the title drops again to
   match the recipe cards on the home page. */
@media (max-width: 767px) {
  .post-archive .loop-entry .entry-title {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   2. Browse rail under the archive title
   One way back up to all recipes, plus sideways movement between the meal
   categories, so a results page is never a dead end.
   -------------------------------------------------------------------------- */
.sbg-archive-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding-bottom: 22px;
  border-bottom: 1px solid #D6D1C4;
}

.sbg-archive-nav__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  margin: 0 5px;
  background: #D6D1C4;
}

.sbg-archive-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid #566246;
  border-radius: 999px;
  background: transparent;
  color: #566246;
  font-family: var(--global-heading-font-family, "Bricolage Grotesque", sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sbg-archive-chip:hover,
.sbg-archive-chip:focus-visible {
  background: #566246;
  border-color: #566246;
  color: #F1EDE3;
  text-decoration: none;
}

.sbg-archive-chip[aria-current="page"] {
  background: #566246;
  border-color: #566246;
  color: #F1EDE3;
  cursor: default;
}

.sbg-archive-chip svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}

.sbg-archive-chip--up:hover svg,
.sbg-archive-chip--up:focus-visible svg {
  transform: translateX(-2px);
}

@media (max-width: 767px) {
  .sbg-archive-nav {
    gap: 7px;
    padding-bottom: 18px;
  }

  /* Roomier than desktop on purpose: these are thumb targets. */
  .sbg-archive-chip {
    padding: 10px 15px;
    font-size: 13px;
  }

  .sbg-archive-nav__divider {
    margin: 0 2px;
  }
}

/* --------------------------------------------------------------------------
   3. Way out at the bottom of the results
   Sits after the pagination, for readers who scrolled the whole grid.
   -------------------------------------------------------------------------- */
.sbg-archive-outro {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #D6D1C4;
  text-align: center;
}

.sbg-archive-outro p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: #4A5260;
}

.sbg-archive-outro__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border: 1px solid #566246;
  border-radius: 999px;
  background: #566246;
  color: #F1EDE3;
  font-family: var(--global-heading-font-family, "Bricolage Grotesque", sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sbg-archive-outro__btn:hover,
.sbg-archive-outro__btn:focus-visible {
  background: #A3A380;
  border-color: #A3A380;
  color: #0B1320;
  text-decoration: none;
}

.sbg-archive-outro__btn svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.sbg-archive-outro__btn:hover svg,
.sbg-archive-outro__btn:focus-visible svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4. Result count under the archive title
   Orientation on a paginated archive: which slice of how many you are looking
   at. Rendered by sbg_archive_nav_render().
   -------------------------------------------------------------------------- */
.sbg-archive-count {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #7B7C7A;
  font-variant-numeric: tabular-nums;
}

/* Phones only, for now. Tablet and desktop were signed off as they are, and
   this is an addition rather than a fix - drop this block to show it there. */
@media (min-width: 768px) {
  .sbg-archive-count {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   5. Phones: two-up results grid and a pinned browse rail

   The grid dropped to a single column below 576px - Kadence's posts markup
   has no mobile column class, only grid-sm-col-* (>=576) and grid-lg-col-*
   (>=1025), so everything narrower falls back to the base one-column rule.
   At 327px wide and a 4:3 portrait crop each card ran 435px tall, so ten
   results (the default page size) came to 5,398px - well over six screens
   between the rail and the pagination.

   Two up at 4:5 gives 157x196px cards, matching the home page's equipment
   results exactly, and takes that same page to about 1,500px.

   Tablet and desktop are deliberately untouched: grid-sm-col-2 and
   grid-lg-col-3 still do their own thing above 767px.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .post-archive.grid-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 22px !important;
  }

  .post-archive .loop-entry .post-thumbnail {
    padding-bottom: 125% !important;
  }

  /* No meta sits under the title, so the header's bottom margin is dead
     space repeated down every row. */
  .post-archive .loop-entry .entry-header {
    margin-bottom: 0;
  }

  /* Category and equipment archives already centre their card titles; tag
     archives did not, so the three read differently side by side once they
     shared a two-up grid. Centred to match the home page's recipe cards.
     Mobile only - the desktop difference is left as it was. */
  .post-archive .loop-entry .entry-title {
    text-align: center;
  }

  /* ---- the rail as a single swipeable row ----
     Five chips come to ~510px, so wrapped they cost two rows and 96px. One
     scrolling row is 57px, which is what makes pinning it affordable.
     Added by script; without it the rail keeps wrapping and still works. */
  .sbg-archive-nav.is-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sbg-archive-nav.is-row::-webkit-scrollbar {
    display: none;
  }

  .sbg-archive-nav.is-row .sbg-archive-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Fades the right edge only while chips remain off-screen. The mask is
     fixed to the container box, not to the scrolled content. */
  .sbg-archive-nav.is-row.has-more {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent);
  }

  /* ---- pinned, but only when the results are longer than the screen ----
     A four-recipe category never scrolls far enough to lose the rail, so
     pinning there would cost 57px of screen for nothing. The script adds
     this class only when the grid is taller than the viewport, which means
     it starts applying on its own as a category fills out. */
  .sbg-archive-nav.is-sticky {
    position: sticky;
    top: 0;
    z-index: 30;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    padding: 10px 16px 11px;
    background: #FFFFFF;
    border-bottom: 1px solid #D6D1C4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sbg-archive-chip,
  .sbg-archive-chip svg,
  .sbg-archive-outro__btn,
  .sbg-archive-outro__btn svg {
    transition: none;
  }

  .sbg-archive-chip--up:hover svg,
  .sbg-archive-outro__btn:hover svg {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   6. Grouped rail + "Browse by" switcher (Sept 2026)
   The rail now carries every group of its family (Meal, Dish, Equipment,
   Season); only the current group's chips are shown. The switcher line swaps
   them in place. Rendered by sbg_archive_nav_render().
   -------------------------------------------------------------------------- */
.sbg-archive-nav .sbg-archive-chip[hidden],
.sbg-archive-switch[hidden] {
  display: none !important;
}

.sbg-archive-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

.sbg-archive-switch__label {
  color: #7B7C7A;
}

.sbg-archive-switch .sbg-archive-switch__btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 2px 0 !important;
  border: 0 !important;
  border-bottom: 1.5px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #4A5260 !important;
  font: inherit;
  font-family: var(--global-heading-font-family, "Bricolage Grotesque", sans-serif);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2px;
  text-transform: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sbg-archive-switch .sbg-archive-switch__btn:hover {
  color: #566246 !important;
}

.sbg-archive-switch .sbg-archive-switch__btn[aria-current="true"] {
  cursor: default;
  color: #566246 !important;
  font-weight: 700;
  border-bottom-color: #566246 !important;
}

.sbg-archive-switch .sbg-archive-switch__btn:focus-visible {
  outline: 2px solid #566246;
  outline-offset: 3px;
}

.sbg-archive-switch + .sbg-archive-nav {
  margin-top: 12px;
}

/* The family root ("All Reviews" on /category/reviews/) is the current page. */
.sbg-archive-chip--up[aria-current="page"] {
  cursor: default;
}

/* --------------------------------------------------------------------------
   7. Review + devotional cards
   Review type above the title, a short excerpt under it.
   -------------------------------------------------------------------------- */
.sbg-card-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #566246;
}

.sbg-card-excerpt {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4A5260;
}

body.category .sbg-card-kicker,
body.category .sbg-card-excerpt,
body.tax-review_type .sbg-card-kicker,
body.tax-review_type .sbg-card-excerpt,
body.tax-review_type .post-archive .entry-title,
body.post-type-archive-devotional .sbg-card-excerpt,
body.post-type-archive-devotional .post-archive .entry-title,
body.tax-devotional_topic .sbg-card-excerpt,
body.tax-devotional_topic .post-archive .entry-title {
  text-align: center;
}

@media (max-width: 767px) {
  .sbg-archive-switch {
    gap: 4px 14px;
    font-size: 13px;
  }

  /* Two-up cards are too narrow for an excerpt. */
  .sbg-card-excerpt {
    display: none;
  }

  .sbg-card-kicker {
    font-size: 10.5px;
    margin-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sbg-archive-switch .sbg-archive-switch__btn {
    transition: none;
  }
}

/* Pinned rail has 16px side padding; without matching scroll padding the
   snap points pulled the first chip flush against the screen edge. */
@media (max-width: 767px) {
  .sbg-archive-nav.is-sticky {
    scroll-padding-inline: 16px;
  }
}

/* Switcher items are links now (each opens a page). */
.sbg-archive-switch a.sbg-archive-switch__btn,
.sbg-archive-switch a.sbg-archive-switch__btn:hover {
  text-decoration: none !important;
}