/*!
 * contactMenu — меню «⋮» карточки записи каталога, окно QR-кода и сообщение «Скопировано».
 * Общий модуль CMS: /jscript/contactMenu/ (README.md там же). Разметка — /inc/xsl/contactMenu.xsl,
 * поведение — contactMenu.js. Файл — исходник, без сборки (как /jscript/search-suggest/search-suggest.css).
 *
 * Цвета — только токены. Значения по умолчанию берутся из токенов CMS --cms-* (/main/css/layout.css,
 * _cms/main/css/layout.scss/base/3_theme.scss) — меню само следует светлой и тёмной теме сайта.
 * Сайт или блок переопределяет любой --cm-* обычным селектором, например на odin.ru /phone/:
 *   .phones { --cm-accent: var(--phones-accent); … }   (версия для слабовидящих меняет --phones-*)
 * Значения по умолчанию объявлены через :where() — нулевая специфичность, порядок подключения не важен.
 *
 * Кнопка «⋮» и меню выглядят как общий блок cms-more (/main/css/layout.css, blocks/cms-more.scss): токены --cm-*
 * относятся к окну QR и сообщению. Положение кнопки в карточке задаёт сайт (свой класс в параметре class шаблона
 * cms-contact-menu, например .phones-list__more { position: absolute; top: …; right: … }).
 */

:where(:root) {
	--cm-text: var(--cms-text, #222);
	--cm-muted: var(--cms-text-muted, #666);
	--cm-accent: var(--cms-accent-strong, #1f6e9a);	/* фон кнопки окна QR под белым текстом (было --cms-link: в тёмной теме светлый — белый текст не читался) */
	--cm-on-accent: var(--cms-on-accent, #fff);
	--cm-border: var(--cms-border-light, #e0e0e0);
	--cm-surface: var(--cms-surface, #fff);
	--cm-shadow: 0 .5em 1.5em var(--cms-shadow, rgb(0 0 0 / .16));
	--cm-backdrop: var(--cms-overlay, rgb(0 0 0 / .45));
	--cm-tap: 44px; /* минимальная область касания (WCAG 2.5.5, рекомендации iOS/Android): кнопка окна QR */
	--cm-radius: 6px;
}


/* ---------- Кнопка «⋮» и меню ----------

   Вид кнопки, меню и пунктов — общий блок «⋮» CMS cms-more (/main/css/layout.scss/blocks/cms-more.scss): классы
   .contact-menu, __toggle, __list, __action там синонимы .cms-more, __btn, __menu, __item (25.10.2026; до этого здесь
   был свой вид — узкая кнопка 32×44 и акцентные пункты, и «⋮» карточки отличалось от «⋮» комментариев).
   Здесь — только то, чего у cms-more нет.
*/

.contact-menu {
	z-index: 2;
}

.contact-menu[open] {
	z-index: 20; /* открытое меню — над соседними карточками */
}

/* Прежний значок-SVG (до 25.10.2026, теперь cms-i--dots-vertical): страницы из кэша prepost. Удалить через сутки после выкладки */
.contact-menu__icon {
	fill: currentColor;
}

/* Подпись кнопки для скринридера: «Действия с контактом: …» */
.contact-menu__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Свои пункты страницы (параметр items шаблона): группа отделена чертой — отступы и черта как у .cms-more__sep */
.contact-menu__group {
	display: flex;
	flex-direction: column;
	margin-top: .375rem;
	padding-top: .375rem;
	border-top: 1px solid var(--cm-border);
}

/* Мелкий текст внизу меню (параметр note): даты, просмотры */
.contact-menu__note {
	margin: .375rem 0 0;
	padding: .5rem 1rem .25rem;
	border-top: 1px solid var(--cm-border);
	color: var(--cm-muted);
	font-size: .85em;
	line-height: 1.35;
	white-space: normal;
}

/* QR-код нужен, чтобы перенести контакт с компьютера в телефон: пункт — только с мышью.
   Два класса — сильнее display: flex пункта меню (cms-more.scss) при любом порядке подключения CSS */
.contact-menu .contact-menu__action--qr {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.contact-menu .contact-menu__action--qr {
		display: flex;
	}
}


/* ---------- Окно QR-кода ----------
   С 26.10.2026 — общее окно CMS cmsDialog (.cms-dialog.contact-qr-dialog, стили окна — cms-dialog.scss): заголовок, ✕,
   лист снизу на телефоне, как все окна. Здесь — только содержимое .contact-qr__body. Своё окно .contact-qr — запасное,
   если на странице нет common.js. */

.contact-qr__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75em;
	text-align: center;
}

.contact-qr__body .contact-qr__name,
.contact-qr__body .contact-qr__hint,
.contact-qr__body .contact-qr__error {
	margin: 0;
}

.contact-qr__body .contact-qr__hint {
	color: var(--cms-text-muted);
}


.contact-qr {
	box-sizing: border-box;
	width: min(24rem, calc(100vw - 2em));
	max-height: calc(100vh - 2em);
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: var(--cm-surface);
	color: var(--cm-text);
	box-shadow: var(--cm-shadow);
}

.contact-qr::backdrop {
	background-color: var(--cm-backdrop);
}

.contact-qr__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75em;
	margin: 0;
	padding: 1.5em;
	text-align: center;
}

.contact-qr__title {
	margin: 0;
	font-size: 1.25em;
}

.contact-qr__name {
	margin: 0;
	font-weight: bold;
	overflow-wrap: anywhere;
}

/* Код всегда чёрный на белом с белым полем (/main/catalog-qr.asp) — и в тёмной теме, и в версии для слабовидящих */
.contact-qr__img {
	display: block;
	width: 100%;
	max-width: 18rem;
	height: auto;
	aspect-ratio: 1;
}

.contact-qr__hint {
	margin: 0;
	color: var(--cm-muted);
	font-size: .95em;
}

.contact-qr__error {
	margin: 0;
}

.contact-qr__close {
	min-height: var(--cm-tap);
	padding: 0 1.5em;
	border: 0;
	border-radius: var(--cm-radius);
	background-color: var(--cm-accent);
	color: var(--cm-on-accent);
	font: inherit;
	cursor: pointer;
}

.contact-qr__close:focus-visible {
	outline: 2px solid var(--cms-focus, var(--cm-accent));
	outline-offset: 2px;
}


/* ---------- Сообщение «Контакт скопирован» (role="status" — его же читает скринридер) ---------- */

.contact-toast {
	position: fixed;
	bottom: 1.5em;
	left: 50%;
	z-index: 1000;
	max-width: calc(100vw - 2em);
	padding: .75em 1.25em;
	border-radius: var(--cm-radius);
	background-color: var(--cm-text);
	color: var(--cm-surface);
	box-shadow: var(--cm-shadow);
	opacity: 0;
	transform: translate(-50%, 1em);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}

.contact-toast--show {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.contact-toast {
		transition: none;
	}
}


/* ---------- Печать: меню, окно и сообщение не печатаются ---------- */

@media print {
	.contact-menu,
	.contact-qr,
	.contact-qr-dialog,
	.contact-toast {
		display: none !important;
	}
}