/* =========================================================
   Archive & Search — branded category / tag / author / date
   listings and search results. References the Journal design:
   reuses .rn-post-card, .rn-archive-grid, .rn-section--* from
   posts.css / homepage.css. Only the hero, server-rendered
   pager, search form, and empty state are defined here.
   ========================================================= */

/* ── Contextual hero ───────────────────────────────────── */
.rn-archive-hero {
  position: relative;
  overflow: hidden;
  background: var(--renera-sand-300);
  padding: 80px 0 72px;
  border-bottom: 1px solid var(--renera-clay-300);
}
.rn-archive-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.rn-archive-hero__back {
  display: inline-flex;
  margin-bottom: 24px;
  color: var(--renera-mute);
}
.rn-archive-hero__back:hover { color: var(--renera-olive-700); }
.rn-archive-hero__title {
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.04;
  margin: 14px 0 20px;
}
.rn-archive-hero__title em { font-style: italic; color: var(--renera-olive-700); }
.rn-archive-hero__lead {
  font-size: 17px;
  max-width: 560px;
  margin: 0 auto;
}
.rn-archive-hero__count {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--renera-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--renera-mute);
}
.rn-archive-hero__search { margin-top: 32px; }

/* ── Results spacing ───────────────────────────────────── */
.rn-archive-results { padding-top: 80px; padding-bottom: 96px; }

/* ── Server-rendered pager (anchors from paginate_links) ─
   posts.css styles the JS button pager; these rules adapt the
   same look to WordPress's anchor markup and center the row. */
.rn-pager--server {
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.rn-pager--server .rn-pager__page,
.rn-pager--server .rn-pager__nav,
.rn-pager--server .rn-pager__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.rn-pager--server .rn-pager__page {
  min-width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--renera-olive-700);
}
.rn-pager--server a.rn-pager__page:hover {
  background: var(--renera-sand-300);
}
.rn-pager--server .rn-pager__page.is-current {
  background: var(--renera-olive-700);
  color: var(--renera-sand-200);
}
.rn-pager--server .rn-pager__nav { padding: 0 14px; height: 40px; }
.rn-pager--server a.rn-pager__nav:hover { color: var(--renera-ink); }
.rn-pager--server .rn-pager__dots {
  min-width: 28px; height: 40px;
  color: var(--renera-mute);
  font-family: var(--renera-font-mono);
}

/* ── Branded search form ───────────────────────────────── */
.rn-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
  padding: 6px 6px 6px 22px;
  background: var(--renera-sand-200);
  border: 1px solid var(--renera-clay-300);
  border-radius: 999px;
}
.rn-search-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--renera-font-sans);
  font-size: 15px;
  color: var(--renera-ink);
  outline: none;
}
.rn-search-form input[type="search"]::placeholder { color: var(--renera-mute); }

/* The magnifier IS the submit — a round olive icon button on the right.
   Scoped, higher-specificity selectors beat brand-base.css's bare
   [type="submit"] rule (which would otherwise paint it clay-on-hover and
   tint the icon olive via currentColor). */
.rn-search-form button.rn-search-form__submit {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--renera-olive-700);
  border: 1px solid var(--renera-olive-700);
  border-radius: 50%;
  color: var(--renera-sand-200);
  cursor: pointer;
  transition: background var(--renera-dur-fast, .15s) var(--renera-ease, ease),
              border-color var(--renera-dur-fast, .15s) var(--renera-ease, ease);
}
.rn-search-form button.rn-search-form__submit:hover,
.rn-search-form button.rn-search-form__submit:focus {
  background: var(--renera-olive-800);
  border-color: var(--renera-olive-800);
  color: var(--renera-sand-200);
}
.rn-search-form__icon {
  width: 18px; height: 18px;
  flex: 0 0 auto; /* inherits currentColor = sand-200 from the button */
}

/* ── Empty state ───────────────────────────────────────── */
.rn-empty {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 0 24px;
}
.rn-empty__title { font-size: clamp(28px, 4vw, 44px); margin: 14px 0 16px; }
.rn-empty .rn-lead { margin: 0 auto 28px; }
.rn-empty__search { margin-bottom: 24px; }
.rn-empty .rn-btn { margin: 0 auto; }
.rn-empty__link { display: inline-block; color: var(--renera-olive-700); }