@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'),
  url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;       /* Maps the weight axis */
  font-style: normal;         /* Targets upright text */
}

@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations'),
  url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;       /* Maps the weight axis */
  font-style: italic;         /* Targets italicized text */
}

:root {
  --THEME-FONT: 'Inter Variable', sans-serif;
  --THEME-BG-COLOR: #fafafa;
  --THEME-TEXT-COLOR: #333333;
  --THEME-LINK-COLOR: #005A8F;
  --THEME-LINK-HOVER-COLOR: #0078BD;
  --THEME-PRIMARY: #3B716F;
  --THEME-SECONDARY: #93c8af;
  --THEME-ACCENT: #ff9f55;
  --THEME-NAV-BG-COLOR: #3a4955;
  --THEME-UI-ACTIVE-BG-COLOR: #EEF7F6;
  --font-size-sm: 0.9rem;
  --font-size-xs: 0.8rem;

  /*Bootstrap 5.2.3 custom */
  --bs-font-sans-serif: 'Inter Variable', sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-primary: var(--THEME-PRIMARY);
  --bs-secondary: var(--THEME-SECONDARY);
  --bs-navbar-color: #FFFFFF;
  --bs-navbar-hover-color: var(--THEME-ACCENT);
  --bs-border-color: #e5e7ea;
  --bs-nav-link-color: #FFFFFF;
  --bs-nav-link-hover-color: var(--THEME-ACCENT);
  --bs-nav-link-font-size: 1rem;
  --bs-nav-link-font-weight: 300;
  --bs-btn-border-radius: .5rem;
}

/**, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }*/

html, body {
  height: 100%;
}

body {
  font-family: var(--THEME-FONT);
  font-weight: var(--bs-body-font-weight);
  font-style: normal;
  font-optical-sizing: auto;
  background: var(--THEME-BG-COLOR);
  color: var(--THEME-TEXT-COLOR);
}

/* ── Misc / Utilities ─────────────────────────────────────────────────── */
.primary {
  color: var(--THEME-PRIMARY);
}

.secondary {
  color: var(--THEME-SECONDARY);
}

.grayDividerLine {
  height: 1px;
  background-color: #CCCCCC;
  margin: .5rem auto;
}

/* ── Navbar ──────────────────────────────────────────────────────────── */
.navbar {
  background: var(--THEME-NAV-BG-COLOR);
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-navbar-color);
  font-weight: var(--bs-nav-link-font-weight);
}
.navbar-brand {
  width: 100%;
  @media (min-width: 768px){
    width: auto;
  }
}

.navbar .active {
  color: var(--THEME-ACCENT);
}

/* ── Header ─────────────────────────────────────────────────────────── */
header h1 { font-size: 1.4rem; }
header h1 .branding {
  font-weight: 300;
  letter-spacing: 0.01em;
  font-size: 2.5rem;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer{
  background: var(--THEME-NAV-BG-COLOR);
  color: var(--bs-navbar-color);
  font-size: var(--font-size-sm);
  font-weight: var(--bs-nav-link-font-weight);

  a{
    color: var(--bs-nav-link-color);
    text-decoration: none;

    &:hover {
      color: var(--THEME-ACCENT);
    }
  }
}

/* ── Search bar ──────────────────────────────────────────────────────── */
.search-container {
  flex: 1;
  min-width: 0;
  @media (min-width: 992px){
    margin-left: 5rem;
  }
  @media (min-width: 1400px){
    margin-left: 12rem;
  }
}

.search-bar {
  display: flex;
  gap: .5rem;
}
.search-bar input {
  flex: 1;
  color: var(--THEME-TEXT-COLOR);
  border-radius: .5rem;

  &::placeholder {font-style: italic; font-weight: 300;}

  &:focus {
    border-color: var(--THEME-PRIMARY);
    box-shadow: 0 0 0 .25rem #dee2e6;
  }
}

.btn {border-radius: .5rem;}

.btn:focus-visible {
  background-color: var(--THEME-PRIMARY);
  border-color: var(--THEME-PRIMARY);
  box-shadow: 0 0 0 .25rem #dee2e6;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: #FFFFFF;
  background-color: var(--THEME-PRIMARY);
  border-color: var(--THEME-PRIMARY);
}

.btn-primary {
  background-color: var(--THEME-PRIMARY);
  border-color: var(--THEME-PRIMARY);

  &:active, &:focus, &:hover, &.active {
    background-color: #305A59;
    border-color: #305A59;
    color: #FFFFFF;
  }
}

.btn-outline-primary{
  border-color: var(--THEME-PRIMARY);
  color: var(--THEME-PRIMARY);

  &:active, &:focus, &:hover {
    background-color: #305A59;
    border-color: #305A59;
    color: #FFFFFF;
  }

  &:disabled {
    border-color: var(--THEME-PRIMARY);
    color: var(--THEME-PRIMARY);
  }
}

/* ── Active filters ──────────────────────────────────────────────────── */
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--THEME-UI-ACTIVE-BG-COLOR);
  border: 1px solid var(--THEME-PRIMARY);
  color: var(--THEME-PRIMARY);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: 20px;
  padding: 3px 10px;
}
.filter-tag button {
  background: none;
  border: none;
  color: #AD4B00;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 3px 0 3px 10px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #dde1e4;
  border-radius: 8px;
}
.sidebar h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
  margin-bottom: 12px;
}

.accordion-button {
  padding: .75rem 1rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--THEME-PRIMARY);
  background-color: transparent;
  text-transform: capitalize;
}

.accordion-button:not(.collapsed) {
  color: var(--THEME-PRIMARY);
  background-color: var(--THEME-UI-ACTIVE-BG-COLOR);
}

.accordion-button:focus {
  border-color: #305A59;
  box-shadow: 0 0 0 0.25rem rgba(48, 90, 89, 0.25)
}

.accordion-body {
  padding: .75rem .25rem;
}

.facet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 0.85rem;
}
.facet-item input[type="checkbox"] {
  accent-color: var(--THEME-PRIMARY);
  cursor: pointer;

  &:focus-visible {
    outline: var(--THEME-PRIMARY) auto 1px;
  }
}

.facet-item label { cursor: pointer; flex: 1; }
.facet-count {
  font-size: 0.75rem;
  background: #f0f0f0;
  border-radius: 10px;
  padding: 1px 7px;
}

/* ── Main content ────────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; }

/* ── Result count ────────────────────────────────────────────────────── */
#result-count {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 14px;
}

/* ── Results list ────────────────────────────────────────────────────── */
.results-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid #dde1e4;
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 767px)  {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; }
}

/* ── Result rows ─────────────────────────────────────────────────────── */
.result-meta {
  font-size: 0.85rem;
}

.result-row {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  transition: background 0.15s;
}

.result-row:nth-child(even) {
  background: #f3f5f6;
}

.result-row:hover {
  background: var(--THEME-UI-ACTIVE-BG-COLOR);
}

.result-row:last-child {
  border-bottom: none;
}

.result-title {
  font-weight: 600;
  color: var(--THEME-PRIMARY);

  @media (min-width: 992px)  {
    width: calc(100% - 120px);
  }
}

.result-separator {
  color: #000000;
}

.online-badge {
  background: var(--THEME-UI-ACTIVE-BG-COLOR);
  color: var(--THEME-PRIMARY);
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: .25rem .5rem;
  border-radius: 12px;
}

.online-url {
  color: var(--THEME-LINK-COLOR);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-decoration: none;

  &:hover{
    color: var(--THEME-LINK-HOVER-COLOR);
    text-decoration: underline;
  }
}


/* ── Pagination ──────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 1.25rem;
}
.pagination button {
  padding: .5rem 1.25rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.pagination button:hover:not(:disabled) {
  background: var(--THEME-PRIMARY);
  color: #fff;
  border-color: var(--THEME-PRIMARY);
}
.pagination button:disabled { opacity: 0.38; cursor: default; }
.pagination span { font-size: var(--font-size-xs); }

/* ── Spinner ─────────────────────────────────────────────────────────── */
.spinner-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.65);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.spinner-overlay.active { display: flex; }
.spinner {
  width: 44px;
  height: 44px;
  border: 5px solid #dde1e4;
  border-top-color: #005030;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #888;
  display: none;
}
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 12px; }
.empty-state p { font-size: 1rem; }