/* Shield the site header from nicepage.css on FAQ-template pages.
   Re-assert the theme's flex header layout so nav doesn't drop. */
body header .nav-container{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
}
body header nav{
  order:0 !important;
  float:none !important;
  clear:none !important;
  width:auto !important;
  display:block !important;
}
body header nav ul,
body header nav .sub-menu{
  float:none;
}
/* keep nicepage sizing from leaking into the header logo/actions */
body header .logo,
body header .header-actions{
  float:none !important;
}

/* Issue 6: nicepage's "ul:not(.u-unstyled){margin-top:20px}" pushes the header menu down.
   Cancel it for the site header nav on FAQ pages (all languages). */
body header ul:not(.u-unstyled),
body header nav ul,
body header .nav-container ul {
  margin-top: 0 !important;
}

/* =====================================================================
   FIX 1 — Typography: match the FAQ guides to the main site font.
   nicepage.css sets `html{font-family:sans-serif}`, which resolves to a
   different face than the theme's stack and makes FAQ pages look foreign.
   Re-assert the site stack across FAQ content (all languages).
   ===================================================================== */
body.page-template-template-faq,
body.page-template-template-faq .u-body,
body.page-template-template-faq .u-body h1,
body.page-template-template-faq .u-body h2,
body.page-template-template-faq .u-body h3,
body.page-template-template-faq .u-body h4,
body.page-template-template-faq .u-body h5,
body.page-template-template-faq .u-body h6,
body.page-template-template-faq .u-text,
body.page-template-template-faq p,
body.page-template-template-faq li,
body.page-template-template-faq td,
body.page-template-template-faq th,
body.page-template-template-faq a,
body.page-template-template-faq span,
body.page-template-template-faq div {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
/* keep the Cyrillic/Latin rendering even on the nicepage font utility classes */
body.page-template-template-faq [class*="u-font-"] {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* =====================================================================
   FIX 2 — Chapter index strips ("red strip"), top and bottom.
   Was: heavy solid-red band / loud red-on-red text, cramped and hard to scan.
   Now: a restrained index bar — neutral surface, brand-red links, muted
   separators, comfortable rhythm, clear hover + current-chapter state.
   Applies to every chapter page in every language.
   ===================================================================== */
#HeaderChapters,
#HeaderChaptersBottom {
  background: #faf9f9 !important;
  background-image: none !important;
  border-top: 1px solid #ececec !important;
  border-bottom: 1px solid #ececec !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
#HeaderChapters .u-sheet,
#HeaderChaptersBottom .u-sheet {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 14px 20px !important;
  min-height: 0 !important;
  height: auto !important;
}
/* the " | " separators are bare text nodes, so muting the paragraph colour
   greys them out while the links keep the brand colour */
#HeaderChapters p,
#HeaderChaptersBottom p {
  color: #c9c9c9 !important;
  font-size: 0.82rem !important;
  line-height: 2.1 !important;
  letter-spacing: .01em !important;
  margin: 0 !important;
  text-align: center !important;
  word-spacing: .06em;
}
#HeaderChapters a,
#HeaderChaptersBottom a {
  color: #B30006 !important;
  text-decoration: none !important;
  padding: 1px 2px;
  border-radius: 2px;
  transition: color .15s ease, background-color .15s ease;
}
#HeaderChapters a:hover,
#HeaderChaptersBottom a:hover {
  color: #7d0004 !important;
  background: #f3e7e7;
  text-decoration: none !important;
}
/* the leading "FAQ Guide:" / localized label */
#HeaderChapters p > span:first-child,
#HeaderChaptersBottom p > span:first-child {
  color: #333 !important;
  font-weight: 700 !important;
}
#HeaderChapters p > span:first-child a,
#HeaderChaptersBottom p > span:first-child a {
  color: #333 !important;
}
#HeaderChapters p > span:first-child a:hover,
#HeaderChaptersBottom p > span:first-child a:hover {
  color: #B30006 !important;
  background: transparent;
}
/* current chapter (flagged by the small script in template-faq.php) */
#HeaderChapters a.ck-current,
#HeaderChaptersBottom a.ck-current {
  color: #7d0004 !important;
  font-weight: 700 !important;
  background: #f1e2e2;
  text-decoration: none !important;
}
/* bottom strip sits at the end of the article — give it breathing room */
#HeaderChaptersBottom {
  margin-top: 34px !important;
}
@media (max-width: 767px) {
  #HeaderChapters .u-sheet,
  #HeaderChaptersBottom .u-sheet { padding: 11px 14px !important; }
  #HeaderChapters p,
  #HeaderChaptersBottom p { font-size: 0.76rem !important; line-height: 2 !important; }
}

/* =====================================================================
   Mobile: the chapter index is 28 links, which wrapped into a ~243px
   block — the reader met a wall of links before any content. On small
   screens it becomes a single swipeable line instead, with the current
   chapter scrolled into view by the script in template-faq.php.
   ===================================================================== */
@media (max-width: 767px) {
  #HeaderChapters .u-sheet,
  #HeaderChaptersBottom .u-sheet {
    padding: 8px 12px !important;
  }
  #HeaderChapters p,
  #HeaderChaptersBottom p {
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    text-align: left !important;
    line-height: 1.9 !important;
    padding-bottom: 2px;
  }
  #HeaderChapters p::-webkit-scrollbar,
  #HeaderChaptersBottom p::-webkit-scrollbar { display: none; }

  /* a little more room to tap each chapter */
  #HeaderChapters a,
  #HeaderChaptersBottom a { padding: 4px 3px; }

  /* fade at the right edge hints there is more to swipe */
  #HeaderChapters,
  #HeaderChaptersBottom {
    position: relative;
  }
  #HeaderChapters::after,
  #HeaderChaptersBottom::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 26px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(250,249,249,0), #faf9f9);
  }
}

/* =====================================================================
   Narrow phones (≤360px): nicepage.css hardcodes the content sheet to a
   fixed 340px (`--theme-sheet-width-xs`, applied with !important) and adds
   a -20px right margin. That assumes every phone is at least 360px wide, so
   on a 320px screen every FAQ page scrolled sideways by 20px.
   Make the sheet fluid instead.
   ===================================================================== */
@media (max-width: 360px) {
  .u-sheet,
  .ck-faq-page .u-sheet,
  .u-body .u-sheet {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  /* images and headings inside the sheet must not exceed it either */
  .u-body img,
  .u-body h1, .u-body h2, .u-body h3,
  .u-body p {
    max-width: 100% !important;
    height: auto;
  }
}

/* Same story for nicepage's repeater/list blocks inside FAQ content — they
   also carry hardcoded pixel widths (340px and similar) that exceed a 320px
   screen. Cap everything inside the FAQ body to its container. */
@media (max-width: 360px) {
  .u-body .u-repeater,
  .u-body .u-repeater-item,
  .u-body .u-list,
  .u-body .u-list-item,
  .u-body .u-container-style,
  .u-body .u-container-layout,
  .u-body .u-layout,
  .u-body .u-layout-cell,
  .u-body table,
  .u-body iframe {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
  }
  .u-body .u-repeater { grid-template-columns: 1fr !important; }
}