/*
 * Печатный слой издания "Казан басмасы" - canvas поверх текста аята,
 * подставляет assets/controllers/kazan-print.js. Классы .kazan-print и
 * .kazan-visually-hidden навешивает сам рендерер (assets/vendor/
 * kazan-print-renderer.js, mountKazanAyah), здесь только их вид.
 *
 * Ширину, шрифт и цвет контейнер (.it-koran__arabic, .it-mushaf__verse-arabic)
 * уже задаёт свой файл блока - canvas просто заполняет её собой.
 */

.kazan-print {
    position: relative;
    width: 100%;
}

/* 🛑 Рендерер ставит canvas ширину в px инлайном (style.width), это перебивает
   width: 100%. Без max-width canvas держал контейнер (flex-элемент с
   min-width: auto) и при сужении окна вылезал за карточку, а ResizeObserver
   рендерера не срабатывал - контейнер не мог стать уже (15.10.2026).
   max-width сильнее инлайновой ширины: контейнер сжимается, рендерер ловит
   изменение и перерисовывает текст под новую ширину. */
.kazan-print canvas {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Каноничный текст для чтения с экрана и копирования - на странице остаётся,
   просто не показывается (сам рисунок из canvas текстом не является). */
.kazan-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}