@import url("/assets/css/es/header-footer.css");
@import url("/assets/css/es/main.css");

/* Hausa (Boko) — Latin script with hooked consonants ɓ ɗ ƙ ƴ.
   The rendering risk here is NOT stacking or clipping, as it is for the Indic
   and Ethiopic locales on this site. It is FONT COVERAGE: many otherwise
   competent Latin webfonts lack U+0253, U+0257, U+0199 and U+01B4, and fall
   back per-glyph, which makes those four letters render in a different face
   and weight from the text around them. The font stack below is ordered to
   put broad-coverage faces first for exactly that reason. */

:root {
  --ha-ink: #1c1d1a;
  --ha-muted: #5f6355;
  --ha-accent: #1d4ed8;
  --ha-accent-soft: #eff6ff;
  --ha-line: #dde2ea;
}

body[lang="ha"] {
  color: var(--ha-ink);
  /* Noto Sans and DejaVu Sans both cover the Hausa hooked letters; the generic
     system stacks often do not. Keeping them ahead of system-ui avoids the
     mismatched-glyph fallback described above. */
  font-family: "Noto Sans", "DejaVu Sans", "Segoe UI", "Charis SIL", "Gentium Plus", system-ui, sans-serif;
  overflow-wrap: anywhere;
  text-rendering: optimizeLegibility;
}

body[lang="ha"] h1,
body[lang="ha"] h2,
body[lang="ha"] h3,
body[lang="ha"] p,
body[lang="ha"] li,
body[lang="ha"] summary,
body[lang="ha"] dt,
body[lang="ha"] dd,
body[lang="ha"] td,
body[lang="ha"] th,
body[lang="ha"] a { line-height: 1.7; letter-spacing: normal; }

/* The descender of ɗ and the hook of ƙ sit slightly outside the usual Latin
   x-height box; a small amount of block padding keeps them off the line above
   in tight headings. */
body[lang="ha"] h1,
body[lang="ha"] h2,
body[lang="ha"] h3 { padding-block: .06em; }

.ha-trail { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1rem; color: var(--ha-muted); font-size: .88rem; }
.ha-trail a { color: var(--ha-accent); text-decoration: none; }
.ha-trail a:hover, .ha-trail a:focus-visible { text-decoration: underline; }

.ha-answer { margin: 1.4rem 0; padding: 1.25rem 1.35rem; border: 1px solid #93c5fd; border-inline-start: 5px solid var(--ha-accent); border-radius: 12px; background: var(--ha-accent-soft); }
.ha-answer h2 { margin-top: 0; }

.ha-section { margin: 2rem 0; }
.ha-section-intro { color: var(--ha-muted); }

.ha-card-grid { display: grid; gap: 1rem; }
.ha-card { display: block; padding: 1rem; border: 1px solid var(--ha-line); border-radius: 12px; color: inherit; text-decoration: none; background: #fff; }
.ha-card:hover, .ha-card:focus-visible { border-color: #60a5fa; box-shadow: 0 8px 24px rgb(29 78 216 / 8%); }
.ha-card h3 { margin: 0 0 .35rem; color: var(--ha-accent); }
.ha-card p { margin: 0 0 .5rem; color: var(--ha-muted); font-size: .95rem; }
.ha-card span { color: var(--ha-accent); font-size: .9rem; }
@media (min-width: 720px) { .ha-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ha-text-list, .ha-step-list { padding-inline-start: 1.25rem; }
.ha-text-list li, .ha-step-list li { margin-bottom: .5rem; }

.ha-misconception { padding: 1.1rem 1.25rem; border: 1px solid var(--ha-line); border-radius: 12px; background: #fbfdff; }
.ha-myth { color: var(--ha-muted); }
.ha-fact { margin-bottom: 0; }

.ha-table-wrap { overflow-x: auto; }
.ha-table { width: 100%; border-collapse: collapse; min-width: 32rem; }
.ha-table caption { text-align: start; color: var(--ha-muted); margin-bottom: .6rem; font-size: .92rem; }
.ha-table th, .ha-table td { border: 1px solid var(--ha-line); padding: .65rem .75rem; text-align: start; vertical-align: top; }
.ha-table thead th { background: var(--ha-accent-soft); }

.ha-recommendation { margin-top: 1rem; padding: .9rem 1.05rem; border-inline-start: 4px solid var(--ha-accent); background: var(--ha-accent-soft); border-radius: 0 10px 10px 0; }

.ha-fit-grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .ha-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ha-fit-good, .ha-fit-bad { padding: 1rem 1.15rem; border: 1px solid var(--ha-line); border-radius: 12px; }
.ha-fit-good { background: #f6fdf9; }
.ha-fit-bad { background: #fffaf6; }
.ha-fit-good h3, .ha-fit-bad h3 { margin-top: 0; }

.ha-limits, .ha-checklist { padding: 1.1rem 1.25rem; border: 1px dashed var(--ha-line); border-radius: 12px; }

.ha-entity dl { display: grid; gap: .75rem; margin: 0; }
.ha-entity dt { font-weight: 600; color: var(--ha-accent); }
.ha-entity dd { margin: .2rem 0 0; }
.ha-inline-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.ha-inline-links a { color: var(--ha-accent); }

.ha-faq details { border: 1px solid var(--ha-line); border-radius: 10px; padding: .75rem .95rem; margin-bottom: .6rem; background: #fff; }
.ha-faq summary { cursor: pointer; font-weight: 600; }
.ha-faq p { margin: .6rem 0 0; }

.ha-sources ul { list-style: none; margin: 0; padding: 0; }
.ha-sources li { padding: .5rem 0; border-bottom: 1px dashed var(--ha-line); }
.ha-sources li:last-child { border-bottom: 0; }
.ha-sources span { display: block; color: var(--ha-muted); font-size: .88rem; }

/* 360px is the narrowest phone in the QA matrix. Hausa compounds such as
   "shafin yanar gizo" are long, so tables scroll inside their own box. */
@media (max-width: 400px) {
  body[lang="ha"] h1 { font-size: 1.45rem; }
  .ha-answer { padding: 1rem; }
}