/* FAQ page and the small additions on the home page and legal pages.
   Builds on main.css and legal.css. */

/* Home page: link to the install guide next to the download buttons. It sits
   in the free space beside the second button, so the hero does not grow. */
.hero-guide-link {
  align-self:center;
  padding:10px 4px;
  color:#cdb6ff;
  font:9px/1.2 Consolas,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  border-bottom:1px solid rgba(205,182,255,.3);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.hero-guide-link:hover,
.hero-guide-link:focus-visible { color:#f1ebff; border-color:rgba(241,235,255,.7); }
.legal-links a.guide-link { color:#a79fb3; }
.legal-links a.guide-link:hover,
.legal-links a.guide-link:focus-visible { color:#efe9f7; }

/* Long words such as «конфиденциальности» must wrap instead of widening the page. */
.legal-title { overflow-wrap:break-word; hyphens:auto; }
@media (max-width: 520px) {
  .legal-title { font-size:clamp(28px, 9vw, 44px); }
}

/* Section navigation on the FAQ page */
.doc-nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 34px;
}
.doc-nav a {
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(12,11,17,.6);
  color:#a29dad;
  font:9px/1.2 Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.doc-nav a:hover,
.doc-nav a:focus-visible { color:#f1edf4; border-color:rgba(168,112,255,.45); }
.doc-nav a[aria-current="page"] {
  color:#f4f2f7;
  border-color:rgba(168,112,255,.55);
  background:linear-gradient(135deg, rgba(145,87,255,.22), rgba(21,18,32,.86));
}

/* Anchors such as faq.html#install must not end up under the fixed header. */
.doc-page [id] { scroll-margin-top:130px; }

.legal-card ol { margin:8px 0 0; padding-left:22px; }
.legal-card ol li { margin:9px 0; color:#bcb5c1; font-size:13px; line-height:1.72; }
.legal-card strong { color:#e8e2ee; }
.legal-card a { color:#d6c0ff; border-bottom:1px solid rgba(214,192,255,.3); }
.legal-card a:hover { color:#f1ebff; }
.legal-card code {
  padding:1px 6px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#e3dbef;
  font:12px/1.6 Consolas,monospace;
  overflow-wrap:anywhere;
}

.doc-note {
  margin-top:14px !important;
  padding:12px 14px;
  border-left:2px solid rgba(168,112,255,.6);
  background:rgba(145,87,255,.07);
}

.faq-item + .faq-item { margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.06); }
.faq-item h3 { margin:0 0 8px !important; font-size:15px !important; }

.doc-footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:34px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
}
.doc-footer-nav a { color:#8f8899; font:8px/1.5 Consolas,monospace; letter-spacing:.1em; text-transform:uppercase; }
.doc-footer-nav a:hover,
.doc-footer-nav a:focus-visible { color:#e6e0ec; }

@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  /* Phones keep both download buttons on one row; the guide link goes below. */
  .hero-guide-link { flex:0 0 100%; padding:6px 0 0; border-bottom:0; font-size:8.5px; }
  .doc-nav { margin-bottom:24px; }
  .doc-nav a { padding:9px 11px; font-size:8.5px; }
  .legal-card ol li { font-size:12px; line-height:1.65; }
}