/* love8.me — /mn/ (Монгол хэл) pilot stylesheet.
 *
 * SCOPE. This sheet is loaded AFTER /assets/css/en/header-footer.css and
 * /assets/css/en/main.css, exactly like the other Cyrillic-LTR locales (kk, ky).
 * The site header is therefore styled by the SHARED BLOCK that
 * scripts/sync-shared-header-block.mjs keeps byte-identical, and nothing here
 * touches .header, .brand*, .nav or .footer. Adding /mn/ rules for those would
 * fork the managed header for one locale, which is the failure that block exists
 * to prevent.
 *
 * Everything /mn/ can reuse, it reuses: .page-head, .page-section,
 * .highlight-box and .context-links all come from assets/css/en/main.css. Only
 * four things are genuinely Mongolian-specific or genuinely missing upstream:
 *
 *   1. WORD WRAPPING. Mongolian is agglutinative. A single orthographic word
 *      carries case, number, possessive and reflexive suffixes at once, so
 *      ordinary prose produces tokens far longer than English or Russian ones
 *      (e.g. "тохиргоонуудаасаа", "баталгаажуулалтынхаа"). At 360px those
 *      overflow headings, cards and buttons. `overflow-wrap: anywhere` on the
 *      text containers is the fix; inserting spaces or hyphens inside Mongolian
 *      words to force a break would be an orthography error, not a layout fix.
 *   2. Breadcrumbs — assets/css/en/main.css has no breadcrumb rule.
 *   3. The direct-answer label — .highlight-box supplies the box, not the label.
 *   4. The entity-frame definition list.
 *
 * FONTS. No font-family is declared here on purpose. The body stack inherited
 * from the shared header sheet (system-ui, -apple-system, Segoe UI, Roboto,
 * Arial, sans-serif) already resolves ө U+04E9 and ү U+04AF on Windows, macOS,
 * iOS, Android and mainstream Linux, and redeclaring a stack for one locale is
 * how the en/zh-hans header drifted apart before. If ө/ү ever fail to render,
 * the fix belongs in the shared stack, not here.
 */

/* ── Breadcrumbs ─────────────────────────────────────────────────────── */
.mn-crumbs {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    overflow-wrap: anywhere;
}

.mn-crumbs a {
    color: var(--soft-hot);
    text-decoration: none;
}

.mn-crumbs a:hover,
.mn-crumbs a:focus-visible {
    text-decoration: underline;
}

.mn-crumbs .crumb-sep {
    color: var(--border);
}

.mn-crumbs [aria-current="page"] {
    color: var(--muted);
}

/* ── Direct answer ───────────────────────────────────────────────────── */
/* The box itself is .highlight-box from assets/css/en/main.css. Only the
   label and the answer paragraphs are added here. The answer sits above the
   first H2 so that an answer engine extracting one passage gets the whole
   answer, not an introduction. */
.mn-answer-label {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.mn-answer-text {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.75;
}

.mn-answer-text:last-child {
    margin-bottom: 0;
}

/* ── Entity frame ────────────────────────────────────────────────────── */
.mn-entity dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.mn-entity dl > div {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 4px 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.mn-entity dl > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mn-entity dt {
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

.mn-entity dd {
    margin: 0;
    font-size: 14px;
}

.mn-entity ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.mn-entity a {
    color: var(--soft-hot);
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
/* Plain headings and paragraphs, not <details>: a collapsed <details> hides the
   answer from the rendered text an extraction pass reads, and these answers are
   the point of the page. */
.mn-faq-item + .mn-faq-item {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.mn-faq-item h3 {
    font-size: 16px;
    margin: 0 0 6px;
}

.mn-faq-item p {
    margin: 0;
}

/* ── Agglutinative word wrapping ─────────────────────────────────────── */
/* Applied to the text containers rather than to * so it cannot reach the
   shared header or footer markup. */
.main .page-head h1,
.main .page-head p,
.main .page-section h2,
.main .page-section h3,
.main .page-section p,
.main .page-section li,
.main .highlight-box p,
.main .context-links a,
.main .context-links .link-title,
.main .context-links .link-note,
.main .mn-entity dt,
.main .mn-entity dd {
    overflow-wrap: anywhere;
    word-break: normal;
}

.main .context-links a {
    /* .context-links a is display:block upstream; keep long anchors inside the
       card at 360px rather than letting the shadow box expand past the viewport. */
    max-width: 100%;
}

/* ── Narrow viewports ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .mn-entity dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .page-head h1 {
        font-size: 24px;
    }
}