/* Help centre layout. Everything here is specific to help.jalihr.org; colour,
   type and spacing come from style.css so the help centre and jalihr.org stay
   one visual system. */

/* Search */
.help-search { max-width: 640px; margin: var(--space-8) auto 0; }
.help-search__field {
  width: 100%;
  height: 56px;
  padding: 0 var(--space-5);
  font: 400 var(--text-base)/1 var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}
.help-search__field::placeholder { color: var(--color-text-faint); }
.help-search__field:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.help-search__count {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  min-height: 1.4em;
}

/* Category list */
.help-cats { display: grid; gap: var(--space-8); }
.help-cat {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.help-cat[hidden] { display: none; }
.help-cat__title {
  margin: 0;
  font: 600 var(--text-lg)/1.2 var(--font-display);
  color: var(--color-primary);
}
.help-cat__sub {
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.help-cat__articles { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.help-cat__articles li[hidden] { display: none; }
.help-cat__articles a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
}
.help-cat__articles a:hover { background: var(--color-surface-2); color: var(--color-primary); }
.help-cat__empty {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

@media (min-width: 760px) {
  .help-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Article page */
.help-article { padding: var(--space-12) 0 var(--space-16); }
.help-breadcrumb {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}
.help-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.help-breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }

.help-prose { max-width: var(--content-narrow); }
.help-prose h2 {
  margin: var(--space-10) 0 var(--space-4);
  font: 600 var(--text-lg)/1.25 var(--font-display);
  color: var(--color-primary);
}
.help-prose h3 {
  margin: var(--space-8) 0 var(--space-3);
  font: 600 var(--text-base)/1.3 var(--font-body);
  color: var(--color-text);
}
.help-prose p { margin: 0 0 var(--space-4); font-size: var(--text-base); color: var(--color-text-muted); }
.help-prose ol, .help-prose ul { margin: 0 0 var(--space-6); padding-left: var(--space-6); }
.help-prose li { margin-bottom: var(--space-3); font-size: var(--text-base); color: var(--color-text-muted); }
.help-prose strong { color: var(--color-text); font-weight: 600; }
.help-prose code {
  padding: 0.1em 0.4em;
  font-size: 0.9em;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}

/* A field-by-field table inside an article */
.help-fields { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-6); font-size: var(--text-sm); }
.help-fields th, .help-fields td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.help-fields th { width: 30%; color: var(--color-text); font-weight: 600; }
.help-fields td { color: var(--color-text-muted); }

/* A short aside: a caveat the reader needs before they act */
.help-note {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.help-note strong { color: var(--color-text); }