/* ================================================================
   Search Results Page
   File: themes/theme_acbf/css/search.css
   Add to libraries.yml under global: css/search.css: {}
   ================================================================ */

/* ── Page background ───────────────────────────────────────── */
.search-node main,
.path-search main {
  background: #F7F5F0;
  padding: 32px 0 60px;
  min-height: 60vh;
}

/* ── Two-column layout ─────────────────────────────────────── */
.search-node .region--content > .block-system-main-block > .content,
.path-search .region--content > .block-system-main-block > .content {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "sidebar heading"
    "sidebar results"
    "sidebar pager";
  gap: 0 28px;
  align-items: start;
}

/* Search form — left column spanning both rows */
.search-node .region--content > .block-system-main-block > .content > .search-form,
.path-search .region--content > .block-system-main-block > .content > .search-form {
  grid-area: sidebar;
  align-self: start;
  position: sticky;
  top: 20px;
}

/* h2 "Search results" — right column top row */
.search-node .region--content > .block-system-main-block > .content > h2,
.path-search .region--content > .block-system-main-block > .content > h2 {
  grid-area: heading;
  margin: 0 0 18px;
  padding-bottom: 12px;
  font-size: 17px;
  font-weight: 700;
  color: #1C1C2E;
  border-bottom: 2px solid #e8e4dc;
}

/* Results list — right column second row */
.search-node .region--content > .block-system-main-block > .content > ol,
.search-node .region--content > .block-system-main-block > .content > .item-list,
.path-search .region--content > .block-system-main-block > .content > ol,
.path-search .region--content > .block-system-main-block > .content > .item-list {
  grid-area: results;
}

/* ── LEFT: Search form as sidebar ──────────────────────────── */
.search-node .search-form,
.path-search .search-form {
  width: 260px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e4dc;
  box-shadow: 0 2px 12px rgba(28,28,46,.06);
  overflow: hidden;
  position: sticky;
  top: 20px;
}
.search-node .search-form::before,
.path-search .search-form::before {
  content: '\f002  Search';
  font-family: 'Font Awesome 6 Free', sans-serif;
  font-weight: 900;
  display: block;
  background: linear-gradient(135deg, #1C1C2E, #2d2d4a);
  color: #e8c16a;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 13px 16px;
}
.search-node .search-form .container-inline,
.path-search .search-form .container-inline {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-node .search-form .form-item,
.path-search .search-form .form-item { margin: 0; }

.search-node .search-form .form-item__label,
.path-search .search-form .form-item__label {
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: #6b6b7a; margin-bottom: 5px; display: block;
}
.search-node .search-form input[type="search"],
.path-search .search-form input[type="search"] {
  width: 100%; padding: 9px 12px;
  border-radius: 8px; border: 1px solid #e2ddd4;
  background: #f7f5f0; font-size: 14px; color: #1C1C2E;
  box-sizing: border-box;
}
.search-node .search-form input[type="search"]:focus,
.path-search .search-form input[type="search"]:focus {
  outline: none; border-color: #1dac4b; background: #fff;
}
.search-node .search-form input[type="submit"],
.path-search .search-form input[type="submit"] {
  width: 100%; background: var(--btn-primary, #1aaa4b); color: #fff;
  border: none; padding: 9px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .2s;
}
.search-node .search-form input[type="submit"]:hover,
.path-search .search-form input[type="submit"]:hover { background: var(--btn-primary-hover, #044c2b); }
.search-node .search-form .search-help-link,
.path-search .search-form .search-help-link { display: none; }

/* Results list */
.search-node .search-results,
.path-search .search-results {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.search-node .search-results__item,
.path-search .search-results__item { padding: 0; margin: 0; }

/* ── Card ──────────────────────────────────────────────────── */
.sr-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(28,28,46,.05);
  transition: transform .2s, box-shadow .2s;
}
.sr-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(28,28,46,.10);
}
.sr-card--gold   { border-left-color: #e8c16a; }
.sr-card--green  { border-left-color: #1dac4b; }
.sr-card--teal   { border-left-color: #14b8a6; }
.sr-card--blue   { border-left-color: #3b82f6; }
.sr-card--purple { border-left-color: #8b5cf6; }
.sr-card--grey   { border-left-color: #9ca3af; }

.sr-card-inner { padding: 16px 18px; }

/* Head: badge + date */
.sr-card-head {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}

/* Type badge */
.sr-type-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px;
}
.sr-type-badge--gold   { background: rgba(232,193,106,.14); color: #a8782a; border: 1px solid rgba(232,193,106,.35); }
.sr-type-badge--green  { background: rgba(29,172,75,.10);   color: #17923e; border: 1px solid rgba(29,172,75,.28); }
.sr-type-badge--teal   { background: rgba(20,184,166,.10);  color: #0f766e; border: 1px solid rgba(20,184,166,.28); }
.sr-type-badge--blue   { background: rgba(59,130,246,.10);  color: #1d4ed8; border: 1px solid rgba(59,130,246,.28); }
.sr-type-badge--purple { background: rgba(139,92,246,.10);  color: #6d28d9; border: 1px solid rgba(139,92,246,.28); }
.sr-type-badge--grey   { background: rgba(156,163,175,.12); color: #4b5563; border: 1px solid rgba(156,163,175,.3); }

/* Date */
.sr-card-date {
  font-size: 11px; color: #9ca3af;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}

/* Title */
.sr-card-title {
  font-size: 16px; font-weight: 700;
  color: #1C1C2E; margin: 0 0 8px; line-height: 1.35;
}
.sr-card-title a { color: inherit; text-decoration: none; }
.sr-card-title a:hover { color: #1dac4b; }

/* Snippet — highlighted search terms in bold green */
.sr-card-snippet {
  font-size: 13px; line-height: 1.7;
  color: #5A5A6A; margin-bottom: 12px;
}
.sr-card-snippet strong { color: #1dac4b; font-weight: 600; }

/* Footer */
.sr-card-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding-top: 10px; border-top: 1px solid #f0ede7;
}
.sr-card-meta { font-size: 12px; color: #9ca3af; }
.sr-card-link {
  font-size: 12px; font-weight: 600; color: #1dac4b;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  transition: gap .2s;
}
.sr-card-link:hover { gap: 8px; color: #17923e; text-decoration: none; }

/* ── Pager ─────────────────────────────────────────────────── */
.search-node .region--content > .block-system-main-block > .content > nav,
.path-search .region--content > .block-system-main-block > .content > nav {
  grid-area: pager;
}

.search-node .pager,
.path-search .pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.search-node .pager__item.is-active a{
  background-color: var(--btn-primary, #1aaa4b) !important;
  border-color: var(--btn-primary, #1aaa4b) !important;
  color: #fff !important;
}

.search-node .pager__item{
  background-color: transparent !important;
  width: 40px;
}

.search-node .pager__item--next, .search-node .pager__item--last, .search-node .pager__item--first{
  min-width: 64px;
}

.search-node .pager__item--previous{
  min-width: 90px;
}

.search-node .pager__item--next a, .search-node .pager__item--last a, .search-node .pager__item--first a, .search-node .pager__item--previous a{
  padding: 0px !important;
}

.search-node .pager__item a,
.search-node .pager__item span,
.path-search .pager__item a,
.path-search .pager__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #e8e4dc;
  background: #fff;
  color: #4A4A5A;
  transition: all .2s;
}
.search-node .pager__item a:hover,
.path-search .pager__item a:hover {
  border-color: #1dac4b;
  color: #1dac4b;
  background: rgba(29,172,75,.05);
  text-decoration: none;
}
.search-node .pager__item--current span,
.path-search .pager__item--current span {
  background: var(--btn-primary, #1aaa4b);
  border-color: var(--btn-primary, #1aaa4b);
  color: #fff;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .search-node .region--content > .block-system-main-block > .content,
  .path-search .region--content > .block-system-main-block > .content {
    grid-template-columns: 1fr;
  }
  .search-node .region--content > .block-system-main-block > .content > .search-form,
  .path-search .region--content > .block-system-main-block > .content > .search-form {
    grid-column: 1; grid-row: 1;
    position: static; width: 100%;
  }
  .search-node .region--content > .block-system-main-block > .content > h2,
  .path-search .region--content > .block-system-main-block > .content > h2 {
    grid-column: 1; grid-row: 2;
  }
  .search-node .region--content > .block-system-main-block > .content > ol,
  .search-node .region--content > .block-system-main-block > .content > .item-list,
  .path-search .region--content > .block-system-main-block > .content > ol,
  .path-search .region--content > .block-system-main-block > .content > .item-list {
    grid-column: 1; grid-row: 3;
  }
}