/*!
 * 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() — нулевая специфичность, порядок подключения не важен.
 *
 * Положение кнопки «⋮» в карточке задаёт сайт (свой класс в параметре class шаблона cms-contact-menu,
 * например .phones-list__more { position: absolute; top: …; right: … }); здесь — только :where() по умолчанию.
 */

:where(:root) {
	--cm-text: var(--cms-text, #222);
	--cm-muted: var(--cms-text-muted, #666);
	--cm-accent: var(--cms-link, #06b);
	--cm-on-accent: var(--cms-on-accent, #fff);
	--cm-border: var(--cms-border-light, #e0e0e0);
	--cm-hover-bg: var(--cms-surface-3, #eee);
	--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) */
	--cm-toggle-width: 32px; /* кнопка «⋮»: узкая, не отнимает ширину у текста (WCAG 2.5.8 — не меньше 24px) */
	--cm-radius: 6px;
}


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

:where(.contact-menu) {
	position: relative;
	display: inline-block;
	z-index: 2;
}

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

.contact-menu__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cm-toggle-width);
	height: var(--cm-tap);
	border-radius: calc(var(--cm-toggle-width) / 2);
	color: var(--cm-muted);
	list-style: none;
	cursor: pointer;
}

.contact-menu__toggle::-webkit-details-marker {
	display: none;
}

.contact-menu__toggle::marker {
	content: "";
}

.contact-menu__toggle:hover,
.contact-menu[open] > .contact-menu__toggle {
	background-color: var(--cm-hover-bg);
	color: var(--cm-accent);
}

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

.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;
}

.contact-menu__list {
	position: absolute;
	top: 100%;
	right: 0;
	display: flex;
	flex-direction: column;
	min-width: 15em;
	margin-top: .25em;
	padding: .35em 0;
	border: 1px solid var(--cm-border);
	border-radius: var(--cm-radius);
	background-color: var(--cm-surface);
	box-shadow: var(--cm-shadow);
	text-align: left;
}

/* Пункт меню: ссылка (vCard, QR) или кнопка (копирование — добавляет contactMenu.js) */
.contact-menu__action {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--cm-tap);
	margin: 0;
	padding: 0 1em;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--cm-text);
	font: inherit;
	font-size: .95em;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.contact-menu__action:hover,
.contact-menu__action:focus-visible {
	background-color: var(--cm-hover-bg);
	color: var(--cm-accent);
}

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

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

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

/* QR-код нужен, чтобы перенести контакт с компьютера в телефон: пункт — только с мышью */
.contact-menu__action--qr {
	display: none;
}

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


/* ---------- Окно QR-кода (<dialog>, создаёт contactMenu.js) ---------- */

.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(--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-toast {
		display: none !important;
	}
}