/**
 * AMERICANA WINS — Archival Search Page Styles
 * Authentic American broadsheet newspaper aesthetics, tactile ink borders,
 * vintage highlighter marks, and faceted archive filters.
 */

/* ========================================================
   1. PAGE WRAPPER & GLOBAL REFINEMENTS
   ======================================================== */
.search-page-body {
  background-color: #FFFFFF;
  color: var(--primary-black, #111111);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.search-hero-container,
.search-filters-container,
.search-dateline-container,
.search-results-container {
  width: 100%;
  padding: 0 30px;
}

/* Active Nav Links */
.nav-link.active-nav-tab {
  color: var(--crimson-red, #8B1E1E) !important;
  font-weight: 900 !important;
  position: relative;
}
.nav-link.active-nav-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--crimson-red, #8B1E1E);
}


/* ========================================================
   2. SEARCH HERO: ARCHIVAL INQUIRY CONSOLE
   ======================================================== */
.search-hero-section {
  background: #FFFFFF;
  border-top: 1px solid #111111;
  border-bottom: 3px double #111111;
  padding: 34px 0 30px;
  position: relative;
}

.search-hero-headline {
  font-family: var(--font-playfair, 'Playfair Display', serif);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0 0 20px;
  line-height: 1.05;
  color: #111111;
  text-transform: uppercase;
}

/* Search Console Form & Box */
.search-console-form {
  max-width: 860px;
  margin: 0 auto;
}

.search-input-wrapper {
  display: flex;
  align-items: stretch;
  background-color: #FFFFFF;
  border: 2px solid #111111;
  box-shadow: 4px 4px 0px #111111;
  position: relative;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.search-input-wrapper:focus-within {
  box-shadow: 6px 6px 0px #111111;
  transform: translate(-1px, -1px);
}

.search-icon-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px 0 20px;
  color: #111111;
  flex-shrink: 0;
}

.search-icon-symbol svg {
  width: 22px;
  height: 22px;
  fill: #111111;
}

.search-query-field {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-source-serif, 'Source Serif 4', Georgia, serif);
  font-size: 1.25rem;
  color: #111111;
  padding: 16px 12px;
  outline: none;
  min-width: 0;
}

.search-query-field::placeholder {
  color: #888888;
  font-style: italic;
}

/* Chrome/Safari cancel button removal */
.search-query-field::-webkit-search-decoration,
.search-query-field::-webkit-search-cancel-button,
.search-query-field::-webkit-search-results-button,
.search-query-field::-webkit-search-results-decoration {
  display: none;
}

.search-field-clear-btn {
  background: none;
  border: none;
  font-size: 1.6rem;
  color: #666666;
  cursor: pointer;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.search-field-clear-btn:hover {
  color: var(--crimson-red, #8B1E1E);
}

.search-inquire-btn {
  background-color: #111111;
  color: #FFFFFF;
  border: none;
  border-left: 2px solid #111111;
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 0 32px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.search-inquire-btn:hover {
  background-color: var(--crimson-red, #8B1E1E);
}

/* ========================================================
   3. FACETED FILTERS & TOOLBAR
   ======================================================== */
.search-filters-section {
  background-color: var(--paper-bg, #F8F6F0);
  border-bottom: 2px solid #111111;
  padding: 14px 0;
}

.search-filters-container {
  width: 100%;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.desk-filter-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 0;
  border-bottom: none;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.desk-pill {
  background-color: #FFFFFF;
  border: 1.5px solid #111111;
  color: #111111;
  font-family: 'Barlow Condensed', var(--font-condensed), sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 2px 2px 0px #111111;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}

.desk-pill:hover {
  background-color: #F4EFE6;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px #111111;
}

.desk-pill.active {
  background-color: #8B1E1E;
  color: #FFFFFF;
  border-color: #111111;
  box-shadow: 2px 2px 0px #111111;
}

.desk-pill.active:hover {
  background-color: #721616;
}

.pill-count {
  font-size: 0.76rem;
  font-weight: 900;
  background-color: #EFECE4;
  color: #333333;
  padding: 1px 7px;
  border-radius: 12px;
  letter-spacing: 0.02em;
  border: 1px solid #D5D0C5;
  transition: all 0.15s ease;
}

.desk-pill.active .pill-count {
  background-color: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
}

/* Inline Sort & Filter Actions */
.search-sort-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.select-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-label {
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: #666666;
}

.vintage-select {
  background-color: #FFFFFF;
  border: 1.5px solid #111111;
  box-shadow: 2px 2px 0px #111111;
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #111111;
  padding: 6px 30px 6px 12px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23111111' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: all 0.15s ease;
}

.vintage-select:hover,
.vintage-select:focus {
  border-color: var(--crimson-red, #8B1E1E);
}

/* View Switcher */
.view-switcher-group {
  display: inline-flex;
  border: 1.5px solid #111111;
  box-shadow: 2px 2px 0px #111111;
  background-color: #FFFFFF;
}

.view-btn {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: #111111;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.view-btn:first-child {
  border-right: 1px solid #111111;
}

.view-btn.active {
  background-color: #111111;
  color: #FFFFFF;
}

.view-btn.active svg {
  fill: #FFFFFF;
}

.reset-inquiry-btn {
  background: #FFFFFF;
  color: #8B1E1E;
  border: 1.5px solid #8B1E1E;
  box-shadow: 2px 2px 0px #8B1E1E;
  font-family: 'Barlow Condensed', var(--font-condensed), sans-serif;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.reset-inquiry-btn:hover {
  background-color: #8B1E1E;
  color: #FFFFFF;
  box-shadow: 2px 2px 0px #111111;
  border-color: #111111;
  transform: translate(-1px, -1px);
}

/* ========================================================
   4. RESULTS DATELINE STATUS
   ======================================================== */
.search-dateline-section {
  padding: 16px 0;
  border-bottom: 1px solid #DDDDDD;
  margin-bottom: 30px;
}

.search-dateline-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.dateline-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dateline-bullet {
  color: var(--crimson-red, #8B1E1E);
  font-size: 0.85rem;
}

.results-summary-text {
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 900;
  font-size: 1.08rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111111;
}

.dateline-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.active-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #EFECE4;
  border: 1px solid #CCCCCC;
  padding: 3px 8px;
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #333333;
}

.active-filter-badge button {
  background: none;
  border: none;
  font-size: 1rem;
  color: #777777;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.active-filter-badge button:hover {
  color: var(--crimson-red, #8B1E1E);
}

/* ========================================================
   5. RESULTS FEED: CARDS VIEW
   ======================================================== */
.search-results-section {
  flex: 1;
  padding-bottom: 60px;
}

.results-grid.view-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 32px;
}

.dispatch-card {
  background-color: var(--bg-cream, #F7F5EF);
  border: 1.5px solid #111111;
  box-shadow: 4px 4px 0px #111111;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.dispatch-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0px #111111;
}

.card-media-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.5;
  background-color: #111111;
  overflow: hidden;
  border-bottom: 1.5px solid #111111;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.dispatch-card:hover .card-img {
  transform: scale(1.03);
}

.card-desk-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #111111;
  color: #FFFFFF;
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  text-transform: uppercase;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}

.card-content {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-desk-category {
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--crimson-red, #8B1E1E);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.card-headline {
  font-family: var(--font-playfair, 'Playfair Display', serif);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.24;
  color: #111111;
  margin: 0 0 10px;
}

.card-headline a {
  color: inherit;
  text-decoration: none;
}

.card-headline a:hover {
  color: var(--crimson-red, #8B1E1E);
}

.card-subline {
  font-family: var(--font-source-serif, 'Source Serif 4', Georgia, serif);
  font-size: 0.98rem;
  line-height: 1.45;
  color: #555555;
  margin: 0 0 14px;
  font-style: italic;
}

.card-excerpt-snippet {
  background-color: #FDFBF7;
  border-left: 3px solid #111111;
  padding: 10px 14px;
  font-family: var(--font-source-serif, 'Source Serif 4', Georgia, serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: #333333;
  margin-bottom: 16px;
}

.card-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 16px;
}

.card-tag-pill {
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background-color: #EFECE4;
  color: #444444;
  padding: 2px 7px;
  border-radius: 2px;
  text-transform: uppercase;
}

.card-meta-row {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed #CCCCCC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: #666666;
}

.meta-author {
  font-weight: 800;
  color: #222222;
}

.card-read-link {
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 900;
  font-size: 0.94rem;
  letter-spacing: 0.06em;
  color: #111111;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.card-read-link:hover {
  color: var(--crimson-red, #8B1E1E);
  transform: translateX(3px);
}

/* ========================================================
   6. RESULTS FEED: ARCHIVE LEDGER VIEW
   ======================================================== */
.results-grid.view-ledger {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ledger-item-row {
  display: grid;
  grid-template-columns: 140px 1fr 220px 120px;
  align-items: center;
  gap: 20px;
  background-color: var(--bg-cream, #F7F5EF);
  border: 1.5px solid #111111;
  box-shadow: 2px 2px 0px #111111;
  padding: 16px 20px;
  transition: all 0.15s ease;
}

.ledger-item-row:hover {
  background-color: #FDFBF7;
  transform: translateX(3px);
  box-shadow: 4px 4px 0px #111111;
}

.ledger-desk {
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  color: var(--crimson-red, #8B1E1E);
  text-transform: uppercase;
}

.ledger-main-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ledger-title {
  font-family: var(--font-playfair, 'Playfair Display', serif);
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}

.ledger-title a {
  color: #111111;
  text-decoration: none;
}

.ledger-title a:hover {
  color: var(--crimson-red, #8B1E1E);
}

.ledger-subline {
  font-family: var(--font-source-serif, 'Source Serif 4', Georgia, serif);
  font-size: 0.9rem;
  color: #555555;
  margin: 0;
  font-style: italic;
}

.ledger-meta {
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-size: 0.88rem;
  color: #666666;
  font-weight: 700;
}

.ledger-action {
  text-align: right;
}

.ledger-btn {
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  color: #111111;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ledger-btn:hover {
  color: var(--crimson-red, #8B1E1E);
}

/* ========================================================
   7. KEYWORD HIGHLIGHTING
   ======================================================== */
mark.search-highlight {
  background-color: #FFE699;
  color: #111111;
  font-weight: 800;
  padding: 1px 3px;
  border-radius: 2px;
  border-bottom: 2px solid #C4971A;
}

/* ========================================================
   8. EMPTY STATE (ZERO RESULTS)
   ======================================================== */
.search-empty-state {
  margin-top: 20px;
}

.empty-state-card {
  background-color: #FFFFFF;
  border: 2px solid #111111;
  box-shadow: 5px 5px 0px #111111;
  padding: 44px 32px;
  text-align: center;
  max-width: 780px;
  margin: 0 auto 48px;
}

.empty-state-badge {
  display: inline-block;
  background-color: var(--crimson-red, #8B1E1E);
  color: #FFFFFF;
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  padding: 4px 14px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.empty-state-headline {
  font-family: var(--font-playfair, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 900;
  margin: 0 0 14px;
  color: #111111;
}

.empty-state-message {
  font-family: var(--font-source-serif, 'Source Serif 4', Georgia, serif);
  font-size: 1.08rem;
  line-height: 1.55;
  color: #555555;
  max-width: 580px;
  margin: 0 auto 24px;
}

.empty-state-tips {
  background-color: #FDFBF7;
  border: 1px dashed #BBBBBB;
  padding: 20px 24px;
  text-align: left;
  max-width: 580px;
  margin: 0 auto 26px;
}

.tips-title {
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: #111111;
  margin: 0 0 10px;
}

.tips-list {
  margin: 0;
  padding-left: 20px;
  font-family: var(--font-source-serif, 'Source Serif 4', Georgia, serif);
  font-size: 0.94rem;
  line-height: 1.6;
  color: #444444;
}

.btn-empty-reset {
  background-color: #111111;
  color: #FFFFFF;
  border: 2px solid #111111;
  box-shadow: 2px 2px 0px #111111;
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  padding: 12px 28px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-empty-reset:hover {
  background-color: var(--crimson-red, #8B1E1E);
  border-color: var(--crimson-red, #8B1E1E);
}

/* Curated Editor's Picks */
.empty-picks-section {
  max-width: 1140px;
  margin: 0 auto;
}

.empty-picks-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.picks-line {
  flex: 1;
  height: 1px;
  background-color: #111111;
}

.picks-title {
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111111;
  white-space: nowrap;
}

.empty-picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* ========================================================
   9. SMART BROADSHEET PAGINATION (Enlarged High-Contrast)
   ======================================================== */
.archive-pagination-wrap {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid #111111;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pagination-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 2px solid #111111;
  box-shadow: 2px 2px 0px #111111;
  font-family: var(--font-graduate, 'Graduate', serif);
  font-size: 1.42rem;
  font-weight: 900;
  color: #111111;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.page-btn:hover:not(:disabled) {
  background-color: #F1ECE0;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px #111111;
}

.page-btn.active {
  background-color: #111111;
  color: #FFFFFF;
  border-color: #111111;
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.page-nav-btn {
  width: auto;
  min-width: 90px;
  height: 48px;
  padding: 0 18px;
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.page-numbers-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 48px;
  font-family: var(--font-graduate, 'Graduate', serif);
  font-size: 1.42rem;
  font-weight: 900;
  color: #555555;
  user-select: none;
}

.pagination-summary-caption {
  font-family: var(--font-barlow-condensed, 'Barlow Condensed', sans-serif);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777777;
}

/* ========================================================
   10. RESPONSIVE DESIGN
   ======================================================== */

@media (max-width: 980px) {
  .search-hero-section {
    padding: 28px 16px 22px;
  }

  .search-input-wrapper {
    flex-direction: row;
    box-shadow: 3px 3px 0px #111111;
  }

  .search-icon-symbol {
    padding: 0 10px 0 14px;
  }

  .search-icon-symbol svg {
    width: 20px;
    height: 20px;
  }

  .search-query-field {
    font-size: 1.05rem;
    padding: 12px 8px;
  }

  .search-inquire-btn {
    border-left: 2px solid #111111;
    border-top: none;
    padding: 0 22px;
    font-size: 1.05rem;
  }

  .results-grid.view-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ledger-item-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }

  .ledger-action {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .search-hero-headline {
    font-size: 2.2rem;
    margin-bottom: 16px;
  }

  .search-filters-container {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .search-sort-inline {
    justify-content: space-between;
    width: 100%;
    padding-top: 8px;
    border-top: 1px dashed #CCCCCC;
  }

  .select-wrapper {
    flex: 1;
  }

  .vintage-select {
    width: 100%;
  }

  .pagination-inner {
    gap: 4px;
  }

  .page-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .page-nav-btn {
    min-width: 70px;
    height: 40px;
    font-size: 0.95rem;
    padding: 0 10px;
  }

  .page-ellipsis {
    width: 20px;
    height: 40px;
    font-size: 1.2rem;
  }
}

@media (max-width: 640px) {
  .search-hero-section {
    padding: 20px 12px 18px;
  }

  .search-hero-headline {
    font-size: 1.85rem;
    margin-bottom: 12px;
  }

  .search-input-wrapper {
    flex-direction: row;
    box-shadow: 2px 2px 0px #111111;
    border-width: 1.5px;
  }

  .search-icon-symbol {
    padding: 0 8px 0 10px;
  }

  .search-icon-symbol svg {
    width: 16px;
    height: 16px;
  }

  .search-query-field {
    font-size: 0.92rem;
    padding: 10px 4px;
  }

  .search-inquire-btn {
    border-left: 1.5px solid #111111;
    border-top: none;
    padding: 0 14px;
    font-size: 0.92rem;
    letter-spacing: 0.05em;
  }
}

/* ========================================================
   SEARCH ARCHIVE — DARK MODE OVERRIDES
   ======================================================== */
html[data-theme="dark"] .search-page-body {
  background-color: #0B131F !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .search-hero-section {
  background-color: #0E1926 !important;
  border-top-color: #1E2D3E !important;
  border-bottom-color: #1E2D3E !important;
}

html[data-theme="dark"] .search-hero-headline {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .search-hero-subdeck,
html[data-theme="dark"] .search-tagline {
  color: #8B9BAE !important;
}

html[data-theme="dark"] .search-input-wrapper {
  background-color: #080E16 !important;
  border-color: #1E2D3E !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .search-icon-symbol svg {
  fill: #8B9BAE !important;
}

html[data-theme="dark"] .search-query-field {
  background: transparent !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .search-query-field::placeholder {
  color: #64748B !important;
}

html[data-theme="dark"] .search-inquire-btn {
  background-color: #C93B3B !important;
  border-color: #1E2D3E !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] .search-inquire-btn:hover {
  background-color: #A82828 !important;
}

html[data-theme="dark"] .search-filters-bar,
html[data-theme="dark"] .search-filters-section,
html[data-theme="dark"] .search-dateline-bar,
html[data-theme="dark"] .search-dateline-section {
  background-color: #0C1622 !important;
  border-color: #1E2D3E !important;
  color: #94A3B8 !important;
}

html[data-theme="dark"] .results-summary-text {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .active-filter-badge {
  background-color: #0E1926 !important;
  border-color: #1E2D3E !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .filter-pill-btn,
html[data-theme="dark"] .desk-filter-pill,
html[data-theme="dark"] .desk-pill,
html[data-theme="dark"] .filter-chip {
  background-color: #0E1926 !important;
  border: 1px solid #1E2D3E !important;
  color: #94A3B8 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .filter-pill-btn:hover,
html[data-theme="dark"] .desk-filter-pill:hover,
html[data-theme="dark"] .desk-pill:hover,
html[data-theme="dark"] .filter-chip:hover {
  background-color: #142233 !important;
  color: #FFFFFF !important;
  border-color: #2D425A !important;
}

html[data-theme="dark"] .filter-pill-btn.active,
html[data-theme="dark"] .desk-filter-pill.active,
html[data-theme="dark"] .desk-pill.active,
html[data-theme="dark"] .filter-chip.active {
  background-color: #C93B3B !important;
  border-color: #C93B3B !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .pill-count {
  background-color: #142233 !important;
  color: #94A3B8 !important;
}

html[data-theme="dark"] .desk-pill.active .pill-count {
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .vintage-select {
  background-color: #0E1926 !important;
  border-color: #1E2D3E !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .select-label {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .view-toggle {
  background-color: #0E1926 !important;
  border-color: #1E2D3E !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .view-btn {
  color: #94A3B8 !important;
  border-color: #1E2D3E !important;
}

html[data-theme="dark"] .view-btn.active {
  background-color: #C93B3B !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .reset-inquiry-btn {
  background-color: #0E1926 !important;
  border-color: #C93B3B !important;
  color: #E25C5C !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .reset-inquiry-btn:hover {
  background-color: #C93B3B !important;
  color: #FFFFFF !important;
  border-color: #C93B3B !important;
}

html[data-theme="dark"] .dispatch-card,
html[data-theme="dark"] .search-result-card,
html[data-theme="dark"] .search-card-item {
  background-color: #0E1926 !important;
  border-color: #1E2D3E !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .dispatch-card:hover {
  border-color: #2D425A !important;
}

html[data-theme="dark"] .card-desk-tag {
  background-color: #080E16 !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .card-desk-category {
  color: #C93B3B !important;
}

html[data-theme="dark"] .card-headline,
html[data-theme="dark"] .card-headline a,
html[data-theme="dark"] .search-card-title,
html[data-theme="dark"] .search-card-title a,
html[data-theme="dark"] .search-result-title,
html[data-theme="dark"] .search-result-title a {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .card-headline a:hover,
html[data-theme="dark"] .search-card-title a:hover,
html[data-theme="dark"] .search-result-title a:hover {
  color: #E25C5C !important;
}

html[data-theme="dark"] .card-subline,
html[data-theme="dark"] .search-card-excerpt,
html[data-theme="dark"] .search-result-card p {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .card-excerpt-snippet,
html[data-theme="dark"] .search-result-snippet,
html[data-theme="dark"] .search-result-excerpt {
  background-color: #142233 !important;
  border-left: 3px solid #C93B3B !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .search-card-meta,
html[data-theme="dark"] .search-result-card .search-card-body div {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .search-results-header {
  border-bottom: 2px solid #1E2D3E !important;
}

html[data-theme="dark"] .search-results-header h2,
html[data-theme="dark"] .search-results-title {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .card-tag-pill,
html[data-theme="dark"] .search-meta-tag,
html[data-theme="dark"] .result-desk-badge {
  background-color: #0E1824 !important;
  border-color: #233549 !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .card-meta-row {
  border-top-color: #1E2D3E !important;
  color: #64748B !important;
}

html[data-theme="dark"] .meta-author {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .card-read-link {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .card-read-link:hover {
  color: #C93B3B !important;
}

html[data-theme="dark"] .ledger-item-row {
  background-color: #0E1926 !important;
  border-color: #1E2D3E !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .ledger-item-row:hover {
  background-color: #142233 !important;
}

html[data-theme="dark"] .ledger-desk {
  color: #C93B3B !important;
}

html[data-theme="dark"] .ledger-title a {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .ledger-title a:hover {
  color: #C93B3B !important;
}

html[data-theme="dark"] .ledger-subline {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .ledger-meta {
  color: #64748B !important;
}

html[data-theme="dark"] .ledger-btn {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .ledger-btn:hover {
  color: #C93B3B !important;
}

html[data-theme="dark"] .empty-state-card {
  background-color: #0E1926 !important;
  border-color: #1E2D3E !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .empty-state-badge {
  background-color: #142233 !important;
  color: #E25C5C !important;
  border-color: #233549 !important;
}

html[data-theme="dark"] .empty-state-headline {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .empty-state-message {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .empty-state-tips {
  background-color: #080E16 !important;
  border-color: #1E2D3E !important;
}

html[data-theme="dark"] .tips-title {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .tips-list li {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .btn-empty-reset {
  background-color: #C93B3B !important;
  color: #FFFFFF !important;
  border-color: #C93B3B !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .empty-picks-section .picks-line {
  background-color: #1E2D3E !important;
}

html[data-theme="dark"] .empty-picks-section .picks-title {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .pagination-rule {
  background-color: #1E2D3E !important;
}

html[data-theme="dark"] .pagination-counter,
html[data-theme="dark"] .pagination-summary-caption {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .page-btn,
html[data-theme="dark"] .page-numbers,
html[data-theme="dark"] a.page-numbers,
html[data-theme="dark"] button.page-btn,
html[data-theme="dark"] .page-num {
  background-color: #0E1926 !important;
  border: 1.5px solid #1E2D3E !important;
  color: #CBD5E1 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] a.page-numbers:hover,
html[data-theme="dark"] .page-btn:hover:not(:disabled):not(.active):not(.is-active) {
  background-color: #142233 !important;
  border-color: #2D425A !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

html[data-theme="dark"] .page-numbers.current,
html[data-theme="dark"] span.page-numbers.current,
html[data-theme="dark"] .page-btn.active,
html[data-theme="dark"] .page-btn.is-active,
html[data-theme="dark"] .page-num.active {
  background-color: #C93B3B !important;
  border-color: #C93B3B !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .page-numbers.prev,
html[data-theme="dark"] .page-numbers.next,
html[data-theme="dark"] a.page-numbers.prev,
html[data-theme="dark"] a.page-numbers.next,
html[data-theme="dark"] .page-btn-nav,
html[data-theme="dark"] .page-nav-btn {
  background-color: #0E1926 !important;
  border: 1.5px solid #1E2D3E !important;
  color: #CBD5E1 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .page-numbers.prev:hover,
html[data-theme="dark"] .page-numbers.next:hover,
html[data-theme="dark"] a.page-numbers.prev:hover,
html[data-theme="dark"] a.page-numbers.next:hover,
html[data-theme="dark"] .page-btn-nav:hover:not(:disabled),
html[data-theme="dark"] .page-nav-btn:hover:not(:disabled) {
  background-color: #142233 !important;
  border-color: #2D425A !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .page-numbers:disabled,
html[data-theme="dark"] .page-btn:disabled,
html[data-theme="dark"] .page-btn[aria-disabled="true"],
html[data-theme="dark"] .page-numbers[aria-disabled="true"] {
  background-color: #070D14 !important;
  border-color: #142233 !important;
  color: #475569 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .page-numbers.dots,
html[data-theme="dark"] .page-ellipsis {
  background: transparent !important;
  border: none !important;
  color: #64748B !important;
  box-shadow: none !important;
}