/* ==========================================================================
   FAQ Engine — reusable searchable/filterable FAQ component
   Requires Bootstrap 4 grid + Font Awesome. All rules namespaced
   under .faq-engine so the file is portable across client sites.
   Brand colors are defined as custom properties — override per site.
   ========================================================================== */

.faq-engine {
  --faq-primary: #6399ae;        /* brand blue — large text only (3:1) */
  --faq-primary-dark: #426d85;   /* darker brand blue — body-size text, 5.6:1 (WCAG AA) */
  --faq-accent: #e07e3c;         /* icons, hovers, highlights */
  --faq-text: #505050;
  --faq-muted: #5f6b76;          /* small muted text, 5.4:1 (WCAG AA) */
  --faq-border: #e3e8ee;
  --faq-bg-soft: #f5f8fa;
  --faq-mark: #ffe9a8;
}

/* Visible keyboard focus for every engine control */
.faq-engine button:focus-visible,
.faq-engine .faq-search-input:focus-visible,
.faq-engine .faq-copy-link:focus-visible {
  outline: 2px solid var(--faq-primary-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-engine .faq-panel,
  .faq-engine .faq-item,
  .faq-engine .faq-pill,
  .faq-engine .faq-icon {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.faq-engine .faq-sidebar {
  background: var(--faq-bg-soft);
  border: 1px solid var(--faq-border);
  border-radius: 0.5rem;
  padding: 1.5rem 1.25rem;
}

@media (min-width: 992px) {
  .faq-engine .faq-sidebar {
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 153, 174, 0.4) transparent;
  }

  .faq-engine .faq-sidebar::-webkit-scrollbar { width: 6px; }
  .faq-engine .faq-sidebar::-webkit-scrollbar-track { background: transparent; }
  .faq-engine .faq-sidebar::-webkit-scrollbar-thumb {
    background: rgba(99, 153, 174, 0.4);
    border-radius: 3px;
  }
}

.faq-engine .faq-search {
  position: relative;
  margin-bottom: 0.75rem;
}

.faq-engine .faq-search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faq-primary) !important;
  pointer-events: none;
}

.faq-engine .faq-search-input {
  padding-left: 2.5rem;
  padding-right: 2.25rem;
  font-size: 1rem;
  border-color: var(--faq-border);
  border-radius: 0.4rem;
  text-overflow: ellipsis;
}

/* Hide the native WebKit clear button (Chrome/Brave/Edge) — we render
   our own, otherwise two X icons appear side by side. */
.faq-engine .faq-search-input::-webkit-search-cancel-button,
.faq-engine .faq-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.faq-engine .faq-search-input:focus {
  border-color: var(--faq-primary);
  box-shadow: 0 0 0 0.15rem rgba(99, 153, 174, 0.25);
}

.faq-engine .faq-search-input::placeholder {
  color: var(--faq-muted);
  opacity: 1;
}

.faq-engine .faq-search-clear {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--faq-muted);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  line-height: 1;
}

.faq-engine .faq-search-clear:hover { color: var(--faq-accent); }

.faq-engine .faq-count {
  font-size: 0.85rem;
  color: var(--faq-muted);
  margin-bottom: 1rem;
  min-height: 1.2em;
}

/* Category filter pills */

.faq-engine .faq-filters {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.faq-engine .faq-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--faq-border);
  background: #fff;
  color: var(--faq-text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.45rem 0.85rem;
  border-radius: 2rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.faq-engine .faq-pill:hover {
  border-color: var(--faq-primary-dark);
  color: var(--faq-primary-dark);
}

.faq-engine .faq-pill.is-active {
  background: var(--faq-primary-dark);
  border-color: var(--faq-primary-dark);
  color: #fff;
}

.faq-engine .faq-pill-count {
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

.faq-engine .faq-pill.is-active .faq-pill-count {
  background: rgba(0, 0, 0, 0.2);
}

/* Horizontal scrolling chips on small screens */
@media (max-width: 991.98px) {
  .faq-engine .faq-filters {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem;
  }
  .faq-engine .faq-pill { width: auto; flex: 0 0 auto; }
}

/* Expand/collapse all */

.faq-engine .faq-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--faq-muted);
  margin-bottom: 1.25rem;
}

.faq-engine .faq-tool-btn {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--faq-primary-dark);
  cursor: pointer;
  text-decoration: underline;
}

.faq-engine .faq-tool-btn:hover { color: var(--faq-accent); }

/* Help card */

.faq-engine .faq-help-card {
  border-top: 1px solid var(--faq-border);
  padding-top: 1.25rem;
  font-size: 0.95rem;
}

.faq-engine .faq-help-card p { margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   Category sections
   -------------------------------------------------------------------------- */

.faq-engine .faq-section { margin-bottom: 2.5rem; }

.faq-engine .faq-section-title {
  font-size: 1.6rem;
  font-weight: 300 !important;
  color: var(--faq-primary);
  border-bottom: 2px solid var(--faq-border);
  padding-bottom: 0.5rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
  scroll-margin-top: 120px;
}

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */

.faq-engine .faq-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-engine .faq-item {
  background: #fff;
  border: 1px solid var(--faq-border);
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.2s, border-color 0.2s;
  scroll-margin-top: 120px;
}

.faq-engine .faq-item:hover { border-color: var(--faq-primary); }

.faq-engine .faq-item.is-open {
  border-color: var(--faq-primary);
  box-shadow: 0 6px 18px 0 rgba(99, 153, 174, 0.15);
}

.faq-engine .faq-item:target,
.faq-engine .faq-item.is-linked {
  border-color: var(--faq-accent);
}

.faq-engine .faq-query {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
}

.faq-engine .faq-query:focus-visible {
  outline: 2px solid var(--faq-primary);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

.faq-engine .faq-query-text {
  color: var(--faq-primary-dark);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
}

.faq-engine .faq-item.is-open .faq-query-text { font-weight: 500; }

.faq-engine .faq-icon {
  flex: 0 0 auto;
  margin-top: 0.3rem;
  color: var(--faq-accent) !important;
  font-size: 0.85rem;
  transition: transform 0.25s;
}

.faq-engine .faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-engine .faq-panel-inner {
  padding: 0 1.25rem 1.1rem;
  font-size: 1.02rem;
  color: var(--faq-text);
}

.faq-engine .faq-panel-inner > :last-child { margin-bottom: 0; }

.faq-engine .faq-panel-inner ul { padding-left: 1.25rem; }

.faq-engine .faq-panel-inner a {
  color: #a5501c;
  text-decoration: underline;
}

.faq-engine .faq-panel-inner a:hover { color: #000; }

/* Copy deep-link button (injected by JS) */

.faq-engine .faq-copy-link {
  display: inline-block;
  margin: 0 1.25rem 1rem;
  font-size: 0.8rem;
  color: var(--faq-muted) !important;
  text-decoration: none !important;
}

.faq-engine .faq-copy-link:hover { color: var(--faq-accent) !important; }

.faq-engine .faq-copy-link .fa-link { margin-right: 0.3rem; }

/* --------------------------------------------------------------------------
   Search states
   -------------------------------------------------------------------------- */

.faq-engine mark.faq-mark {
  background: var(--faq-mark);
  padding: 0 0.1em;
  border-radius: 2px;
}

.faq-engine .faq-hidden { display: none !important; }

.faq-engine .faq-no-results {
  background: var(--faq-bg-soft);
  border: 1px dashed var(--faq-border);
  border-radius: 0.5rem;
  text-align: center;
  padding: 3rem 1.5rem;
  margin-bottom: 2rem;
}

.faq-engine .faq-no-results .fa-search {
  font-size: 2rem;
  color: var(--faq-primary) !important;
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   Surreal CMS edit mode
   Surreal adds an .is-cms class to the page while staff edit in-context.
   The engine JS deliberately does not run there (so runtime-injected IDs,
   highlights, and buttons can never be saved into content), which means
   the accordion cannot be toggled. Force every answer panel open so staff
   can click straight into any answer (cms-unlock) and edit it.
   -------------------------------------------------------------------------- */

.is-cms .faq-panel {
  max-height: none !important;
  overflow: visible !important;
  transition: none !important;
}

.is-cms .faq-query { cursor: default; }

.is-cms .faq-item { page-break-inside: auto; }

/* --------------------------------------------------------------------------
   Print — complete expanded reference, no UI chrome
   -------------------------------------------------------------------------- */

@media print {
  #header,
  #heroimage,
  footer,
  .footer,
  #skiptocontent,
  .js-go-to,
  .faq-sidebar-col,
  .faq-no-results,
  .faq-copy-link,
  .faq-icon {
    display: none !important;
  }

  .faq-engine .faq-hidden { display: block !important; }

  .faq-engine .faq-main-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .faq-engine .faq-panel {
    max-height: none !important;
    overflow: visible !important;
  }

  .faq-engine .faq-section { page-break-before: auto; }
  .faq-engine .faq-item {
    page-break-inside: avoid;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
  }

  .faq-engine .faq-query { padding: 0.75rem 0 0.25rem; cursor: default; }
  .faq-engine .faq-query-text { color: #000; font-weight: 700; }
  .faq-engine .faq-panel-inner { padding: 0 0 0.75rem; color: #000; }
  .faq-engine .faq-section-title { color: #000; }

  .faq-engine mark.faq-mark { background: none; }
}