/*
 * Page head with a search box, laid out as three columns: the title, the
 * search field, and any action buttons. The columns are declared here rather
 * than sized by their contents, so each part sits in the same place on every
 * page — the search box does not shift when a page has no buttons. They stack
 * into one column on narrow screens.
 *
 * One stylesheet for every listing page that uses it — Training Resources,
 * Training Materials, Training Opportunities and Search Trainers — so the four
 * cannot drift apart. It began in training-resources.css and moved here
 * unchanged.
 *
 * The colours are the Training Resources tokens. Each var() carries its value
 * as a fallback, so pages that do not load training-resources.css (where the
 * tokens are declared) get the same colours without declaring them again.
 */

.tr-pagehead {
  background: #fff;
  border: 1px solid var(--tr-line, #e2e8f0);
  border-radius: var(--tr-radius, 16px);
  box-shadow: var(--tr-shadow, 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06));
  padding: 22px 24px;
  display: grid;
  /* Title | search | actions. The outer two columns share what is left over
     equally, which is what keeps the search box in one place across pages:
     a page with no buttons still leaves the third column standing. */
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.tr-head-title {
  min-width: 0;
}

.tr-head-search {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tr-pagehead h1 {
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tr-blue, #126792);
  line-height: 1.2;
}

.tr-pagehead .tr-sub {
  font-size: 0.8rem;
  color: var(--tr-ink-soft, #64748b);
  font-weight: 500;
  margin-top: 2px;
}

/* Search */
.tr-search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f8fafc;
  border: 1px solid var(--tr-line, #e2e8f0);
  border-radius: 12px;
  padding: 9px 14px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tr-search:focus-within {
  border-color: var(--tr-blue, #126792);
  box-shadow: 0 0 0 3px var(--tr-blue-soft, #e8f4fb);
}

.tr-search svg {
  flex-shrink: 0;
  color: var(--tr-ink-soft, #64748b);
}

.tr-search input {
  border: 0;
  background: none;
  outline: 0;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--tr-ink, #0f172a);
}

.tr-search input::placeholder {
  color: #94a3b8;
}

/* Actions beside the search, and the outlined button they use */
.tr-pagehead .tr-head-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tr-btn-ghost {
  border: 1px solid var(--tr-line, #e2e8f0);
  background: #fff;
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tr-ink, #0f172a);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: 0.15s;
}

.tr-btn-ghost:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

/* Medium screens & Tablets (max-width: 768px) */
@media (max-width: 768px) {
  .tr-pagehead {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 18px;
    gap: 14px;
  }

  .tr-pagehead .tr-head-actions {
    justify-self: stretch;
    width: 100%;
    display: flex;
    gap: 10px;
  }

  .tr-pagehead .tr-head-actions button,
  .tr-pagehead .tr-head-actions a {
    flex: 1;
    justify-content: center;
    font-size: 13px;
    padding: 10px 14px;
  }
}

/* Mobile Devices (max-width: 640px) */
@media (max-width: 640px) {
  .tr-pagehead {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 14px 16px;
    gap: 12px;
  }

  .tr-pagehead h1 {
    font-size: 1.2rem;
  }

  .tr-pagehead .tr-sub {
    font-size: 0.75rem;
  }

  .tr-pagehead .tr-head-actions {
    justify-self: stretch;
    display: flex;
    gap: 8px;
  }

  .tr-pagehead .tr-head-actions button,
  .tr-pagehead .tr-head-actions a {
    flex: 1;
    justify-content: center;
    font-size: 12px;
    padding: 8px 10px;
  }
}

/*
 * Sticky, collapsible filter panel — Search Trainers and Training Materials.
 * Everything is scoped to .filter-aside, so pages without it are untouched.
 *
 * Markup:  aside.filter-aside
 *            > .filter-sidebar.is-collapsed     (the panel; this is what sticks)
 *                > .tr-panel-head  (… Reset All, then button.filter-toggle)
 *                > .filter-options
 *          The toggle is wired by static_global/js/filter-panel.js.
 *
 * The panel sticks just below the fixed header; each page's script writes the
 * header's and promo banner's heights to --header-height / --promo-height.
 * On desktop it travels inside the aside, which the flex row stretches to the
 * height of the results, so it stops where they end, above the footer. Below
 * lg the aside is display: contents, so the panel can stick across the whole
 * results column instead of only the aside's own (short) box.
 *
 * --filter-z: a page whose results sit in their own stacking context with
 * raised children sets it higher (Search Trainers: bookmark buttons are z-50).
 */
.filter-aside {
  --filter-top: calc(var(--promo-height, 0px) + var(--header-height, 0px) + 16px);
}

.filter-aside .filter-sidebar {
  position: sticky;
  top: var(--filter-top);
  z-index: var(--filter-z, 20);
  display: flex;
  flex-direction: column;
}

/* Head row stays put; only the options scroll when there is not room. */
.filter-aside .filter-options {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.filter-aside input[type="checkbox"],
.filter-aside input[type="radio"] {
  accent-color: var(--tr-blue, #126792);
}

.filter-toggle svg {
  transition: transform 0.2s ease;
}

.filter-aside .filter-sidebar:not(.is-collapsed) .filter-toggle svg {
  transform: rotate(180deg);
}

/* Desktop: never taller than the space under the header. */
@media (min-width: 1024px) {
  .filter-aside .filter-sidebar {
    max-height: calc(100vh - var(--filter-top) - 16px);
  }
}

/* Mobile/tablet: pinned over the results, collapsed to its head row by
   default; expanded, the options scroll within part of the screen. */
@media (max-width: 1023.98px) {
  .filter-aside {
    --filter-top: calc(var(--promo-height, 0px) + var(--header-height, 0px) + 8px);
    display: contents;
  }

  .filter-aside .filter-options {
    max-height: 55vh;
  }

  .filter-aside .filter-sidebar.is-collapsed .filter-options {
    display: none;
  }

  .filter-aside .filter-sidebar.is-collapsed .tr-panel-head {
    border-bottom-color: transparent;
  }
}