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

/* Assamese (অসমীয়া) — Bengali-Assamese script.
   The script stacks vowel signs above and below the baseline, uses a
   headstroke (matra) that visually joins letters, and forms tall conjuncts
   (ণ্ট, ব্ৰ, ষ্ঠ, ক্ত). It therefore needs more leading than Latin at the
   same size, and it must not be letter-spaced — spacing breaks the matra. */

:root {
  --as-ink: #1f1b1d;
  --as-muted: #6b5a60;
  --as-accent: #9f1239;
  --as-accent-soft: #fff1f2;
  --as-line: #ecdfe2;
}

body[lang="as"] {
  color: var(--as-ink);
  font-family: "Noto Sans Bengali", "Noto Serif Bengali", "Nirmala UI", "Shonar Bangla", "Vrinda", "Mukti Narrow", system-ui, sans-serif;
  overflow-wrap: anywhere;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
}

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

/* Conjuncts and the reph sit above the headstroke; without this padding they
   are clipped by tight heading line boxes. */
body[lang="as"] h1,
body[lang="as"] h2,
body[lang="as"] h3 { padding-block: .14em; }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 360px is the narrowest phone width in the QA matrix; Assamese conjuncts are
   wide, so tables must scroll rather than force the page to scroll. */
@media (max-width: 400px) {
  body[lang="as"] h1 { font-size: 1.5rem; }
  .as-answer { padding: 1rem; }
}