/* ================================================================
   Мактаба — Типографика
   Размеры шрифта (5 ступеней) и ширина колонки (3 ступени)
   управляются data-атрибутами на #maktaba-wrapper.
   Языковые правила — через [lang] атрибут на параграфе.
   ================================================================ */

/* ── Базовые размеры и межстрочные через CSS-переменные ── */
#maktaba-wrapper[data-mkt-font-size="xs"] { --mkt-font-size: 15px; --mkt-line-height: 1.7; }
#maktaba-wrapper[data-mkt-font-size="sm"] { --mkt-font-size: 17px; --mkt-line-height: 1.75; }
#maktaba-wrapper[data-mkt-font-size="md"] { --mkt-font-size: 19px; --mkt-line-height: 1.8; }
#maktaba-wrapper[data-mkt-font-size="lg"] { --mkt-font-size: 22px; --mkt-line-height: 1.85; }
#maktaba-wrapper[data-mkt-font-size="xl"] { --mkt-font-size: 26px; --mkt-line-height: 1.9; }

/* ── Ширина колонки контента reader-а ──────────────────── */
#maktaba-wrapper[data-mkt-column-width="narrow"] { --mkt-column-max: 720px; }
#maktaba-wrapper[data-mkt-column-width="medium"] { --mkt-column-max: 1000px; }
#maktaba-wrapper[data-mkt-column-width="wide"]   { --mkt-column-max: 1320px; }
#maktaba-wrapper[data-mkt-column-width="full"]   { --mkt-column-max: 95vw; }

/* ── Семейства шрифтов по языку (применяется на параграфах reader-а) ── */

/* Арабский — Amiri как основной, Scheherazade как fallback */
#maktaba-wrapper [lang="ar"] {
    font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
    font-feature-settings: "calt" 1, "liga" 1, "dlig" 1;
}

/* Урду — Nastaliq, ему нужен увеличенный line-height */
#maktaba-wrapper [lang="ur"] {
    font-family: 'Noto Nastaliq Urdu', 'Amiri', serif;
    line-height: calc(var(--mkt-line-height, 1.8) * 1.25);
}

/* Фарси */
#maktaba-wrapper [lang="fa"] {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
}

/* Русский и английский — Cormorant Garamond для reader-текста */
#maktaba-wrapper [lang="ru"],
#maktaba-wrapper [lang="en"] {
    font-family: 'Cormorant Garamond', 'PT Serif', 'Noto Serif', Georgia, serif;
}

/* ── Размеры параграфов reader-а ────────────────────────── */
.mkt-reader-content .mkt-p {
    font-size: var(--mkt-font-size, 19px);
    line-height: var(--mkt-line-height, 1.8);
    max-width: var(--mkt-column-max, 640px);
    margin: 0 auto 1em;
    padding: 0 4px;
    color: var(--mkt-text);
    /* transition font-size/line-height/max-width удалён: при смене кегля
       СОТНИ параграфов анимировали reflow — дорого и незачем */
}

/* Для арабского, урду, фарси — ступень крупнее */
.mkt-reader-content .mkt-p[lang="ar"] {
    font-size: calc(var(--mkt-font-size, 19px) * 1.15);
}

.mkt-reader-content .mkt-p[lang="ur"] {
    font-size: calc(var(--mkt-font-size, 19px) * 1.2);
}

.mkt-reader-content .mkt-p[lang="fa"] {
    font-size: calc(var(--mkt-font-size, 19px) * 1.15);
}

/* ── Стили параграфов по типу ───────────────────────────── */

.mkt-p-heading-1 {
    font-size: calc(var(--mkt-font-size, 19px) * 1.6) !important;
    font-weight: 700;
    text-align: center;
    margin: 1.5em auto 1em !important;
    color: var(--mkt-accent);
    letter-spacing: 0.5px;
}

.mkt-p-heading-1[lang="ar"] {
    font-size: calc(var(--mkt-font-size, 19px) * 1.8) !important;
    /* трекинг из базового правила разрывает арабскую вязь */
    letter-spacing: normal;
}

.mkt-p-heading-2 {
    font-size: calc(var(--mkt-font-size, 19px) * 1.3) !important;
    font-weight: 600;
    margin: 1.6em auto 0.6em !important;
    color: var(--mkt-text);
    border-bottom: 1px solid var(--mkt-border);
    padding-bottom: 8px;
}

.mkt-p-heading-2[lang="ar"] {
    font-size: calc(var(--mkt-font-size, 19px) * 1.45) !important;
}

.mkt-p-heading-3 {
    font-size: calc(var(--mkt-font-size, 19px) * 1.1) !important;
    font-weight: 600;
    margin: 1.2em auto 0.5em !important;
    color: var(--mkt-accent);
    font-style: italic;
}

.mkt-p-body {
    text-align: justify;
    text-indent: 1.2em;
}

/* justify без переносов даёт «дыры» в русской прозе —
   lang проставлен на параграфах, браузер переносит сам */
.mkt-p-body[lang="ru"],
.mkt-p-body[lang="en"] {
    hyphens: auto;
    -webkit-hyphens: auto;
}

.mkt-p-body[lang="ar"],
.mkt-p-body[lang="ur"],
.mkt-p-body[lang="fa"] {
    /* RTL: выравнивание по ПРАВОМУ краю. `end` в rtl = левый край (был баг). */
    text-align: right;
    text-indent: 0;
}

.mkt-p-quote {
    padding: 12px 20px;
    margin-top: 1.2em !important;
    margin-bottom: 1.2em !important;
    background: var(--mkt-bg-inset);
    border-radius: 6px;
    border-inline-start: 3px solid var(--mkt-accent);
    color: var(--mkt-text-muted);
    font-style: italic;
}

.mkt-p-quote[lang="ar"] {
    font-style: normal;
    border-inline-start: 3px solid var(--mkt-accent);
}

/* Аят Корана: особая типографика, обрамление */
.mkt-p-verse {
    font-family: 'Scheherazade New', 'Amiri', serif !important;
    font-size: calc(var(--mkt-font-size, 19px) * 1.5) !important;
    text-align: center;
    padding: 18px 24px;
    margin: 1.6em auto !important;
    background: var(--mkt-bg-elevated);
    border-radius: 10px;
    border: 1px solid var(--mkt-border-strong);
    color: var(--mkt-text);
    line-height: 1.9;
    position: relative;
}

.mkt-p-verse::before,
.mkt-p-verse::after {
    content: '﴿';
    color: var(--mkt-accent);
    font-size: 1.1em;
    margin: 0 0.4em;
    vertical-align: middle;
}

.mkt-p-verse::after {
    content: '﴾';
}

/* Хадис: рамка и Naskh-шрифт */
.mkt-p-hadith {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    padding: 14px 18px;
    margin: 1.2em auto !important;
    background: var(--mkt-bg-elevated);
    border-radius: 8px;
    border-inline-start: 4px solid var(--mkt-highlight);
    box-shadow: var(--mkt-shadow);
}

/* Стихи: парные строки, центрирование */
.mkt-p-poetry {
    text-align: center;
    font-style: italic;
    color: var(--mkt-text);
    line-height: 2;
    margin: 1em auto !important;
}

/* Сноска: мелкий шрифт */
.mkt-p-footnote {
    font-size: calc(var(--mkt-font-size, 19px) * 0.78) !important;
    color: var(--mkt-text-muted);
    padding-top: 8px;
    margin-top: 1em !important;
    border-top: 1px dashed var(--mkt-border);
}

/* Элемент списка */
.mkt-p-list-item {
    padding-inline-start: 1.5em;
    position: relative;
    text-indent: 0;
}

.mkt-p-list-item::before {
    content: '•';
    color: var(--mkt-accent);
    position: absolute;
    inset-inline-start: 0.4em;
    font-weight: bold;
}

/* ── Мас'аля (нумерованный фикх-пункт) и хашия мухаккика ────────────── */
.mkt-p-masala {
    padding-block: 0.4em;
    text-indent: 0;
}

.mkt-masala-num {
    display: inline-block;
    min-width: 2.6em;
    font-weight: 700;
    color: var(--mkt-accent);
    margin-inline-end: 0.4em;
    direction: rtl;
    unicode-bidi: isolate;
}

.mkt-masala-text {
    display: inline;
}

/* Матн (فراза Канза, которую разбирает шарх) — подсветка ведущей леммы (قوله) */
.mkt-matn {
    font-weight: 700;
    color: var(--mkt-accent);
    background: var(--mkt-accent-bg);
    border-radius: 4px;
    padding: 0 0.25em;
}

/* Кнопка раскрытия хашии (такхридж хадиса мухаккиком) */
.mkt-takhrij-toggle {
    display: inline-flex;
    gap: 0.3em;
    align-items: center;
    margin-inline-start: 0.5em;
    padding: 0.15em 0.6em;
    font: inherit;
    font-size: 0.75em;
    background: transparent;
    border: 1px solid var(--mkt-border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--mkt-text-muted);
    transition: background-color 120ms, color 120ms, border-color 120ms;
    vertical-align: middle;
}

.mkt-takhrij-toggle:hover {
    background: var(--mkt-accent-bg);
    color: var(--mkt-accent);
    border-color: var(--mkt-accent);
}

.mkt-takhrij-toggle[aria-expanded="true"] {
    background: var(--mkt-accent-bg);
    color: var(--mkt-accent);
    border-color: var(--mkt-accent);
}

.mkt-takhrij-icon {
    line-height: 1;
}

.mkt-takhrij-label {
    font-size: 0.95em;
}

/* Раскрытый блок хашии — отдельным блоком после кнопки.
   ВАЖНО: НЕ задавать `display: block` — это перебивает HTML5 атрибут [hidden]
   (div по умолчанию уже block; при hidden браузер применяет display: none). */
.mkt-takhrij-list {
    margin-block: 0.7em 0.4em;
    padding: 0.7em 0.95em;
    background: var(--mkt-bg-inset);
    border-inline-start: 3px solid var(--mkt-accent);
    border-radius: 3px;
    font-size: calc(var(--mkt-font-size, 19px) * 0.82);
    line-height: 1.75;
    color: var(--mkt-text-muted);
}
.mkt-takhrij-list[hidden] { display: none !important; }

.mkt-takhrij-item {
    margin-block: 0.45em;
}

/* ── Режим مقارنة: кнопка «شرح» на матн-фразе хребта Канза + панель масаиль Бахра ── */
.mkt-shuruh-toggle {
    display: inline-flex;
    gap: 0.3em;
    align-items: center;
    margin-inline-start: 0.5em;
    padding: 0.15em 0.6em;
    font: inherit;
    font-size: 0.75em;
    background: var(--mkt-accent-bg);
    border: 1px solid var(--mkt-accent);
    border-radius: 4px;
    cursor: pointer;
    color: var(--mkt-accent);
    transition: background-color 120ms, color 120ms, filter 120ms;
    vertical-align: middle;
}
.mkt-shuruh-toggle:hover { filter: brightness(0.95); }
.mkt-shuruh-toggle[aria-expanded="true"] {
    background: var(--mkt-accent);
    color: var(--mkt-on-primary, #fff);
}
.mkt-shuruh-icon { line-height: 1; }
.mkt-shuruh-label { font-size: 0.95em; }

.mkt-shuruh-panel {
    margin-block: 0.7em 0.5em;
    padding: 0.5em 0.9em;
    background: var(--mkt-bg-inset);
    border-inline-start: 3px solid var(--mkt-accent);
    border-radius: 3px;
}
.mkt-shuruh-panel[hidden] { display: none !important; }

.mkt-shuruh-masala {
    margin-block: 0.55em;
    font-size: calc(var(--mkt-font-size, 19px) * 0.9);
    line-height: 1.9;
    text-align: right;
}
.mkt-shuruh-masala .mkt-masala-num { font-size: 0.8em; }
.mkt-shuruh-fn {
    font-size: 0.78em;
    color: var(--mkt-text-muted);
    white-space: nowrap;
}
.mkt-shuruh-loading, .mkt-shuruh-empty {
    padding: 0.4em 0;
    color: var(--mkt-text-muted);
    font-size: 0.85em;
    text-align: center;
}

.mkt-takhrij-item:not(:last-child) {
    padding-block-end: 0.45em;
    border-bottom: 1px dashed var(--mkt-border-strong);
}

/* ══ Фатвы (Махмудия): структура كتاب/باب/فصل/عنوان + вопрос/ответ ══
   Всё скоупится через [data-struct]/[data-role] — их проставляет ТОЛЬКО
   импорт Махмудии, другие книги не затрагиваются.
   Иерархия выделения:  باب  >  فصل  >  عنوان  >  заголовок ответа. */

/* كتاب — верхний уровень: ПЛАШКА (заливка акцентом, контрастный текст),
   очень крупно, по центру. Заливка var(--mkt-accent) + текст var(--mkt-bg)
   даёт «тёмный фон / светлая надпись» в СВЕТЛОЙ теме и читаемую плашку в тёмной. */
.mkt-p[data-struct="kitab"] {
    text-align: center;
    font-weight: 700;
    font-size: calc(var(--mkt-font-size, 19px) * 2.1) !important;
    color: var(--mkt-bg);
    background: var(--mkt-accent);
    border-radius: 8px;
    padding: 0.5em 0.8em !important;
    margin: 0.2em auto 1.4em !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.14);
    letter-spacing: normal;
}
/* باб — менее грандиозно чем китаб: крупно, по центру, подчёркивание снизу */
.mkt-p[data-struct="bab"] {
    text-align: center;
    color: var(--mkt-accent);
    font-weight: 700;
    font-size: calc(var(--mkt-font-size, 19px) * 1.55) !important;
    border: none !important;
    padding-bottom: 0.3em;
    margin: 1.3em auto 1em !important;
    position: relative;
}
.mkt-p[data-struct="bab"]::after {
    content: "";
    display: block;
    width: 56%;
    max-width: 320px;
    margin: 0.45em auto 0;
    border-top: 2px solid var(--mkt-accent);
    border-bottom: 1px solid var(--mkt-accent);
    padding-top: 3px;
    opacity: 0.6;
}

/* فصل — раздел: меньше баба, подчёркнут по всей ширине */
.mkt-p[data-struct="fasl"] {
    color: var(--mkt-text);
    font-weight: 700;
    font-size: calc(var(--mkt-font-size, 19px) * 1.28) !important;
    border-bottom: 2px solid var(--mkt-border-strong);
    padding-bottom: 0.3em;
    margin: 1.9em 0 0.8em !important;
    text-align: start;
}

/* عنوان — заголовок фетвы: меньше фасля; ДРУГАЯ форма выделения —
   акцентная полоса сбоку + пунктирное подчёркивание (не как у فصل). */
/* ── Карточка фатвы: عنوان+вопрос+الجواب+ответ+сноски в ОДНОМ блоке с
   чёткими границами. Отделяет фатвы друг от друга (было «сплошным текстом»).
   Границы карточки задаёт группировщик по номеру фатвы (renderParagraphsGrouped). */
.mkt-fatwa {
    background: var(--mkt-bg-elevated);
    border: 1px solid var(--mkt-border-strong);
    border-radius: 10px;
    padding: 1.1em 1.3em;
    margin: 0 0 2.2em;                 /* расстояние между фатвами */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.mkt-fatwa > .mkt-p:first-child { margin-top: 0 !important; }
.mkt-fatwa > .mkt-p:last-child { margin-bottom: 0 !important; }

/* عنوان — ПЛАШКА заголовка вопроса на всю ширину карточки (внутри её полей):
   заливка + пунктир СВЕРХУ и СНИЗУ. Заливка производна от акцента → свой цвет
   в каждой теме. НЕ вылезает за карточку (без отрицательных margin). */
.mkt-p[data-struct="onvan"] {
    font-style: normal;
    color: var(--mkt-accent);
    font-weight: 700;
    font-size: calc(var(--mkt-font-size, 19px) * 1.1) !important;
    background: color-mix(in srgb, var(--mkt-accent) 15%, transparent);
    border-top: 1px dashed var(--mkt-accent);
    border-bottom: 1px dashed var(--mkt-accent);
    border-radius: 5px;
    padding: 0.45em 0.75em;
    margin: 0 0 0.9em !important;
    text-align: start;
}

/* Вопрос — обычный текст (никакого блока/подсветки) */
.mkt-p[data-role="question"] {
    text-indent: 0;
    margin: 0 0 0.85em;
}

/* الجواب — ПЛАШКА заголовка ответа: заливка ЯРЧЕ عنوان (легко отличить) +
   пунктир сверху и снизу. Внутри полей карточки, без вылета. */
.mkt-p[data-role="answer-head"] {
    font-weight: 700;
    color: var(--mkt-accent);
    font-size: calc(var(--mkt-font-size, 19px) * 1.05) !important;
    background: color-mix(in srgb, var(--mkt-accent) 28%, transparent);
    border-top: 1px dashed var(--mkt-accent);
    border-bottom: 1px dashed var(--mkt-accent);
    border-radius: 5px;
    padding: 0.45em 0.75em;
    margin: 1.1em 0 0.85em !important;
    text-indent: 0;
    text-align: start;
}

/* Ответ — обычный текст. Арабские цитаты отличаются только шрифтом (см. lang). */
.mkt-p[data-role="answer"] {
    text-indent: 0;
    margin: 0 0 0.85em;
}

/* ── Хашии — секция внизу ответа: пунктир-разделитель + заголовок «حواشی»,
   под ним строки-сноски (каждая — свой блок, интерактив). ── */
.mkt-hashiya-label {
    margin: 1.4em 0 0.5em !important;
    padding-top: 0.7em;
    border-top: 1px dashed var(--mkt-accent);
    color: var(--mkt-accent);
    font-weight: 700;
    font-size: calc(var(--mkt-font-size, 19px) * 0.9);
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    text-align: start;
    letter-spacing: 0.02em;
}
.mkt-p-footnote {
    display: flex;
    gap: 0.55em;
    align-items: flex-start;
    font-size: calc(var(--mkt-font-size, 19px) * 0.82);
    line-height: 1.75;
    color: var(--mkt-text-muted);
    background: var(--mkt-bg-inset);
    border-inline-start: 3px solid var(--mkt-border-strong);
    border-radius: 4px;
    padding: 0.5em 0.8em;
    margin: 0.4em 0 !important;
    text-indent: 0;
    transition: border-color 0.15s, background 0.15s;
}
/* Первая хашия идёт сразу под заголовком «حواشی» — без большого верхнего отступа */
.mkt-hashiya-label + .mkt-p-footnote { margin-top: 0.2em !important; }
.mkt-p-footnote:first-of-type { margin-top: 0.4em; }
.mkt-p-footnote .mkt-fn-num {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--mkt-accent);
    font-family: 'Amiri', serif;
}
.mkt-p-footnote .mkt-fn-text { flex: 1 1 auto; }
/* Хашия со ссылкой на книгу-первоисточник (есть у нас в БД) — активная */
.mkt-p-footnote[data-linkable="1"] {
    cursor: pointer;
    border-inline-start-color: var(--mkt-accent);
}
.mkt-p-footnote[data-linkable="1"]:hover {
    background: var(--mkt-accent-bg);
    border-inline-start-width: 4px;
}
.mkt-fn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin-inline-start: 0.5em;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.86em;
    direction: rtl;
    padding: 0.05em 0.5em;
    color: var(--mkt-accent);
    background: var(--mkt-accent-bg);
    border: 1px solid var(--mkt-accent);
    border-radius: 20px;
    white-space: nowrap;
}