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

/* Amharic (አማርኛ) — Ethiopic script.
   Ethiopic is an ABUGIDA: every codepoint is already a full consonant+vowel
   syllable, so unlike the Indic locales on this site there are no stacked
   vowel signs, no reph, and no conjuncts to clip. What Ethiopic needs instead
   is (a) a font that actually has the glyphs, because fallback to a boxy
   default is the common real-world failure, and (b) slightly generous leading
   for its tall, dense, uniform-height letterforms. */

:root {
  --am-ink: #1b1f1c;
  --am-muted: #566b5c;
  --am-accent: #166534;
  --am-accent-soft: #f0fdf4;
  --am-line: #dbe7dd;
}

body[lang="am"] {
  color: var(--am-ink);
  font-family: "Noto Sans Ethiopic", "Noto Serif Ethiopic", "Abyssinica SIL", "Nyala", "Kefa", system-ui, sans-serif;
  overflow-wrap: anywhere;
  text-rendering: optimizeLegibility;
}

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

/* Ethiopic syllables are wide and of near-uniform height; headings read better
   with a little extra block padding but do not need the heavy padding the
   Indic locales use to protect above-baseline marks. */
body[lang="am"] h1,
body[lang="am"] h2,
body[lang="am"] h3 { padding-block: .08em; }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 360px is the narrowest phone in the QA matrix. Ethiopic words are long and
   do not hyphenate, so tables scroll inside their own box rather than forcing
   the page to scroll sideways. */
@media (max-width: 400px) {
  body[lang="am"] h1 { font-size: 1.45rem; }
  .am-answer { padding: 1rem; }
}