/*
 * The help center's layout. Tokens, fonts, buttons and the logo come from the
 * marketing site's app.css, copied in at build time; this file is only what a
 * help page adds. The bar matches the marketing nav's height, width and logo
 * size so the logo doesn't move between bienvue.com and help.
 */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* ------------------------------------------------------------------ bar -- */

.bar { display: flex; align-items: center; height: var(--nav-h); border-bottom: 1px solid var(--border); }
.bar-inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); width: 100%; }
.bar-space { flex: 1; }
.home-link { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.home-link:hover .brand { opacity: 0.7; }
.help-tag { padding-left: 12px; border-left: 1px solid var(--border-strong); font-size: 17px; font-weight: 500; line-height: 20px; color: var(--ink-secondary); }
.quiet { display: flex; align-items: center; min-height: 44px; font-size: 15.5px; color: var(--ink-secondary); text-decoration: none; transition: color 160ms linear; }
.quiet:hover { color: var(--ink); }
.icon-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--ink-secondary); }

/* ---------------------------------------------------------------- search -- */

[data-search] { position: relative; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; color: var(--ink-secondary); }
[data-search]:focus-within { border-color: var(--action); }
[data-search] input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); }
[data-search] input::placeholder { color: var(--ink-secondary); }
[data-search] input::-webkit-search-cancel-button { display: none; }
[data-search] svg { flex: none; }
.bar-search { width: 300px; height: 44px; padding: 0 16px; background: var(--canvas); }
.bar-search input { font-size: 15px; }
.searchbox { height: 56px; padding: 0 20px; box-shadow: 0 1px 2px rgb(34 32 28 / 0.06); }
.searchbox input { font-size: 17px; }

.results { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; max-height: min(420px, 70vh); overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 18px 40px -20px rgb(27 37 35 / 0.45); text-align: left; }
.bar-search .results { left: auto; width: min(440px, 90vw); }
.results a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.results a:hover, .results a[aria-selected="true"] { background: var(--sunk); }
.results b { display: block; font-size: 15.5px; font-weight: 600; }
.results small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-secondary); }
.results p { margin: 0; padding: 10px 12px; font-size: 15px; color: var(--ink-secondary); }

/* ------------------------------------------------------------------ home -- */

.hero { padding: clamp(48px, 7vw, 72px) var(--gutter) 56px; background: var(--sunk); border-bottom: 1px solid var(--border); }
.hero-inner { display: flex; flex-direction: column; gap: 22px; max-width: 680px; margin-inline: auto; text-align: center; }
.hero h1 { margin: 0; font-size: clamp(32px, 4vw, 46px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 15px; color: var(--ink-secondary); }
.popular a { color: var(--action); }
.popular a:hover { color: var(--action-hover); }

.topics { display: flex; flex-direction: column; gap: 24px; padding-block: 56px 72px; }
.topics h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { display: flex; align-items: flex-start; gap: 16px; min-height: 116px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color 160ms linear; }
.tile:hover { border-color: var(--action); }
.tile-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--sunk); color: var(--action); }
.tile-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
.tile-text { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--ink-secondary); }

.still { padding-bottom: 72px; }
.still-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.still-box h2 { margin: 0 0 4px; font-size: 19px; font-weight: 600; }
.still-box p { margin: 0; font-size: 15px; color: var(--ink-secondary); }
.still-box a { font-weight: 600; color: var(--action); text-decoration: none; }
.still-box a:hover { color: var(--action-hover); }

/* ------------------------------------------------- topic and article pages -- */

.section-page { display: flex; flex-direction: column; gap: 28px; max-width: calc(820px + 2 * var(--gutter)); padding-block: 40px 80px; }
.reading-page { display: flex; flex-direction: column; gap: 24px; max-width: calc(var(--prose) + 2 * var(--gutter)); padding-block: 40px 96px; }

.crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14.5px; color: var(--ink-secondary); }
.crumb a { color: var(--ink-secondary); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }

.page-head { display: flex; flex-direction: column; gap: 10px; }
.page-head h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.lede { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-secondary); }
.lede a { color: var(--action); }
.article-head { padding-bottom: 24px; border-bottom: 1px solid var(--border); }

.rows, .related { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.row, .rel { display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--border); color: var(--ink); text-decoration: none; }
.row:first-child, .rel:first-child { border-top: 0; }
.row:hover, .rel:hover { background: var(--sunk); }
.row { padding: 20px 24px; }
.rel { justify-content: space-between; padding: 16px 20px; font-weight: 500; }
.row svg, .rel svg { flex: none; color: var(--ink-secondary); }
.row-body { flex: 1; }
.row-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; }
.row-text { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--ink-secondary); }

.other, .more { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.other h2, .more h2 { margin: 0; font-size: 18px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.chip:hover { border-color: var(--action); }
.still-line { margin: 8px 0 0; font-size: 15px; color: var(--ink-secondary); }
.still-line a { color: var(--action); }

/* An article's body, rendered from Markdown. */
.prose { font-size: 17px; line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 40px 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.prose h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 600; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose li { margin: 0 0 8px; }
.prose li > ul, .prose li > ol { margin: 8px 0 0; }
.prose strong { font-weight: 600; }
.prose a { color: var(--action); }
.prose a:hover { color: var(--action-hover); }
.prose table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 15.5px; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; background: var(--sunk); }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--sunk); font-size: 0.92em; }

/* ------------------------------------------------------------------ chat -- */

/* The support chat's launcher. The chat floats above it (bienvue-chat.js's
   data-bottom), in the corner KrispyAI's own launcher would take. */
.ask { position: fixed; z-index: 40; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--canvas); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgb(34 32 28 / 0.22); }
.ask:hover { background: color-mix(in srgb, var(--ink) 88%, var(--canvas)); }

/* ---------------------------------------------------------------- footer -- */

.foot-outer { border-top: 1px solid var(--border); }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-block: 22px; font-size: 14px; color: var(--ink-secondary); }
.foot a { color: var(--ink-secondary); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* --------------------------------------------------------------- mobile -- */

/* The marketing site's bar breakpoint, so the logo shrinks at the same width. */
@media (max-width: 900px) {
  .bar .brand { flex-shrink: 0; width: 120px; }
  .bar-inner { gap: 12px; }
}
@media (max-width: 700px) {
  .hide-sm { display: none; }
  .icon-btn { display: inline-flex; }
  .ask { right: 16px; bottom: 16px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 0; padding: 18px; }
  .row { padding: 18px; }
  .still-box { padding: 22px; }
  .prose { font-size: 16.5px; }
  .prose table { display: block; overflow-x: auto; }
}
/* A phone fits the logo, "Help", search and the button only with a shorter
   label and a slightly smaller lockup. */
.show-xs { display: none; }
@media (max-width: 480px) {
  .bar .brand { width: 104px; }
  .bar-inner { gap: 8px; }
  .bar .btn-primary { padding-inline: 16px; }
  .hide-xs { display: none; }
  .show-xs { display: inline; }
}
@media (max-width: 359px) {
  .bar .brand { width: 96px; }
  .bar-inner { gap: 8px; }
  .bar .btn-primary { padding-inline: 14px; }
}