/* ============================================================
   LOCAL OVERRIDES — this instance's own tweaks, layered on top
   of the canonical assets/css/simexdb.css. Loaded after it (see
   index.html <head>), so plain selectors here win the cascade
   without needing !important.

   Keep changes here instead of editing simexdb.css directly —
   that file gets replaced wholesale when the engine is updated.
   ============================================================ */

/* Background token override — light mode only. Dark mode keeps
   simexdb.css's own --c-bg (repeated here so it isn't blotted out:
   [data-theme="dark"] has the same specificity as :root, and this
   file loads after simexdb.css, so an unscoped :root rule would
   otherwise win in both themes). */

:root {
  --c-bg  : #ffffff;
}

[data-theme="dark"] {
    --text-secondary: #f7f1f1;
    --link: #12f0fc;
    --c-bg: #1C1917;
}

/* simexdb.css's reset sets an unscoped `body { font-size: 13px }`
   meant for its own dashboard widget, but it leaks into all page text
   on pages that load it. simexdb's own elements set their own explicit
   font-sizes, so restoring the site's normal base size here only
   affects text that would otherwise inherit from body. */
body {
    font-size: 16px;
}

h2 {
    font-size: 1.55rem; /*2rem*/
}

a {
    color: var(--link);
}

/* display the associated background image on the trip pages */
.plaque {
    background-repeat: no-repeat;
    height: 300px;
    background-position: 30%;
    background-size: auto;
}

.plaque.voyageur {
    background-image: url('/media/site/Voyageur.png');
}

.plaque.mountaineer {
    background-image: url('/media/site/Mountaineer.png');
}

.plaque.hudson-bay {
    background-image: url('/media/site/Hudson Bay.png');
}

/* to prevent anchor links from disappearing under the top bar */
div[id] {
    scroll-margin-top: 100px;
}

/* page numbers in asfw */
.top, .bottom{
    width: 10%;
    margin: auto;
    font-weight: bold;
}

/* styles for nav with paginated results */
.pagination {
  display: flex;
  justify-content: center;
  list-style: none; /* remove list bullets */
  padding: 10px 0;
}   

.pagination li  a {
  display: block; /* let links fill the list item */
  padding: 8px 12px;
  text-decoration: none;
  /*border: 1px solid gray;*/
  border: 1px solid var(--border);
  color: var(--text-primary);
  margin: 0 4px;
  border-radius: 5px; /* add rounded borders */
}

.pagination li a.active {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.pagination li a.disabled {
  color: var(--text-secondary);
  cursor: not-allowed;
  pointer-events: none;
}


/* Hide element if the viewport width is 600px or less */
@media screen and (max-width: 1260px) {
  .noDisplayOnMobile {
    display: none;
  }
}

@media screen {
    .printOnly {display: none;}
    .screenOnly {display: block;}
}

@media print {
    .printOnly {display: block;}
    .screenOnly {display: none;}
}

/* Site buttons keep line-height: 1. They used to inherit it from the engine's
   global .btn rule, which since simexdb#72 only styles the engine's own
   buttons — without this, "Back to list" and the Filters button grow
   ~10px taller. */
.btn { line-height: 1; }

/* Reserve the scrollbar's width on every page, so short and long pages line
   up. Inherited from the engine's global html rule until simexdb#72 limited
   it to standalone dashboard pages. */
html { scrollbar-gutter: stable; }

/* Cards that hold a dashboard panel clip their contents, so the records
   table scrolls inside its panel on phones instead of widening the page.
   They used to get overflow: hidden from the engine's global .card rule,
   which since simexdb#72 only styles the engine's own record cards. */
.card:has(> .panel) { overflow: hidden; }

/* Standalone record pages (.detail-record, e.g. /canoeHistoryDetail): the
   record reuses the engine's lightbox classes, which are sized for the small
   popup (12px). On a full page next to 16px site text they read as tiny, so
   size them up here — the dashboard's popup keeps its compact sizes. */
.detail-record .lb-meta-row { font-size: 15px; }
.detail-record .lb-desc     { font-size: 16px; line-height: 1.6; }
.detail-record .lb-links .card-link { font-size: 14px; }

/* simexdb filter bar (_simExDbFilters.njk): the Filters button and the active
   filters as removable chips, pinned just under the fixed site header (its
   height is kept in --site-header-h by main.js). */
.sx-filterbar {
  position: sticky;
  top: var(--site-header-h, 72px);
  z-index: 900;                 /* under the site header (1000) and the filter sheet */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  margin-bottom: 8px;
  background: var(--bg-primary);
}
.sx-filterbar .btn-filter-mobile { padding: 0.5rem 1rem; }