/* Archive-only additions. All article cards, section heading, header and footer
   are styled by /css/southpark.css, exactly as on the homepage. */

body.news-archive-page #news { min-height: calc(100vh - 144px); }

/* Search, sort and pagination are unique to this page. */
.news-archive-page .archive-toolbar {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 0 0 18px;
}
.news-archive-page .archive-search,
.news-archive-page .archive-sort-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #d8dde3;
  background: #fff;
  color: #172233;
}
.news-archive-page .archive-search { flex: 1; min-width: 0; }
.news-archive-page .archive-search svg { width: 18px; height: 18px; flex: none; }
.news-archive-page .archive-search input {
  flex: 1; width: 100%; min-width: 0;
  padding: 12px 0; border: 0; outline: 0;
  background: transparent; color: inherit; font: inherit;
}
.news-archive-page .archive-sort-wrap { font-size: .85rem; }
.news-archive-page .archive-sort-wrap select {
  max-width: 100%; border: 0; outline: 0;
  background: transparent; color: inherit; font: inherit;
  cursor: pointer;
}
.news-archive-page .archive-search:focus-within,
.news-archive-page .archive-sort-wrap:focus-within { outline: 2px solid #4572a1; outline-offset: 2px; }
.news-archive-page .archive-status { margin: 0 0 20px; color: #657182; font-size: .8rem; }
/* Pagination uses the homepage's .news-pagination and .news-page rules.
   Only layout adjustments specific to the archive belong here. */
.news-archive-page .archive-pages { flex-wrap: wrap; }
.news-archive-page .archive-pages .news-page:disabled {
  opacity: .4;
  cursor: default;
  transform: none;
}
.news-archive-page .archive-empty {
  grid-column: 1 / -1; padding: 40px 12px;
  text-align: center; color: #657182;
}
@media (max-width: 650px) {
  .news-archive-page .archive-toolbar { flex-direction: column; }
  .news-archive-page .archive-sort-wrap { justify-content: space-between; }
}

/* Compact search and sort controls */
.news-archive-page .archive-toolbar { gap: 12px; margin-bottom: 14px; }
.news-archive-page .archive-search,
.news-archive-page .archive-sort-wrap { height: 50px; min-height: 50px; padding: 0 14px; }
.news-archive-page .archive-search { gap: 12px; }
.news-archive-page .archive-search > svg { width: 19px; height: 19px; }
.news-archive-page .archive-search input { padding: 0; height: 100%; font-size: .95rem; }
.news-archive-page .archive-search input::-webkit-search-cancel-button { display: none; }
.news-archive-page .archive-clear { display: grid; place-items: center; width: 30px; height: 30px; padding: 5px; border: 0; background: transparent; color: #657182; cursor: pointer; }
.news-archive-page .archive-clear[hidden] { display: none; }
.news-archive-page .archive-clear:hover { color: #172233; }
.news-archive-page .archive-clear svg { width: 17px; height: 17px; }
.news-archive-page .archive-sort-wrap { flex: 0 0 auto; gap: 9px; }
.news-archive-page .archive-sort-wrap > svg { width: 17px; height: 17px; flex: none; }
.news-archive-page .archive-sort-wrap select { font-size: .87rem; }
.news-archive-page .archive-status { margin: 0 0 18px; }
@media (max-width: 650px) {
  .news-archive-page .archive-toolbar { gap: 10px; }
  .news-archive-page .archive-sort-wrap { align-self: flex-end; }
}

/* Clear control: isolate from shared button styles. */
.news-archive-page .archive-search .archive-clear:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 5px;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #657182;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
}
.news-archive-page .archive-search .archive-clear[hidden] { display: none !important; }
.news-archive-page .archive-search .archive-clear:hover { background: #eef1f4; color: #172233; }
.news-archive-page .archive-search .archive-clear:focus-visible { outline: 2px solid #4572a1; outline-offset: 2px; }
.news-archive-page .archive-search .archive-clear svg { display: block; width: 18px; height: 18px; flex: none; }