/**
 * benja/contact-channels — list (directory rows), inline (footer line), icons (round buttons).
 * WeChat QR in a Popover API panel; plain link fallback when popovers are unsupported.
 */

.benja-channels {
	--bj-ink: var(--wp--preset--color--contrast, #1c1915);
	--bj-surface: var(--wp--preset--color--surface, #fbf9f4);
	--bj-muted: var(--wp--preset--color--muted, #6f665b);
	--bj-secondary: var(--wp--preset--color--secondary, #4b453d);
	--bj-gold: var(--wp--preset--color--accent, #b08d57);
	--bj-gold-strong: var(--wp--preset--color--accent-strong, #7a5f2e);
	--bj-hairline: var(--wp--custom--hairline, 1px solid rgb(28 25 21 / 0.14));
	--bj-hairline-gold: var(--wp--custom--hairline-gold, 1px solid rgb(176 141 87 / 0.55));
	--bj-ease: var(--wp--custom--ease, cubic-bezier(0.22, 1, 0.36, 1));
	--bj-radius: var(--wp--custom--radius, 2px);
	--bj-tracking: var(--wp--custom--tracking, 0.18em);
	--bj-plinth: var(--wp--custom--plinth, radial-gradient(120% 90% at 50% 30%, #fffdf8 0%, #f6f0e4 55%, #ece3d2 100%));
	--bj-sans: var(--wp--preset--font-family--sans, "Jost", "Noto Sans Thai", "Noto Sans SC", system-ui, sans-serif);
	--bj-display: var(--wp--preset--font-family--display, "Cormorant Garamond", "Noto Serif Thai", "Noto Serif SC", serif);
	--bj-xs: var(--wp--preset--font-size--xs, 0.75rem);
	--bj-sm: var(--wp--preset--font-size--sm, 0.875rem);
	--bj-md: var(--wp--preset--font-size--md, 1.25rem);
}

.benja-channels__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.benja-channels__item {
	margin: 0;
	padding: 0;
}

.benja-channels__link {
	appearance: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.benja-channels__link.is-static {
	cursor: default;
}

.benja-channels__link:focus-visible {
	outline: 2px solid var(--bj-gold-strong);
	outline-offset: 3px;
	border-radius: var(--bj-radius);
}

.benja-channels__icon {
	display: inline-grid;
	place-items: center;
	flex: none;
}

.benja-channels__icon svg {
	width: 1.15rem;
	height: 1.15rem;
}

.benja-channels__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.benja-channels__label {
	font-family: var(--bj-sans);
	font-size: var(--bj-xs);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--bj-tracking);
	text-transform: uppercase;
	color: var(--bj-muted);
}

.benja-channels__label:lang(th),
.benja-channels__label:lang(zh) {
	font-size: var(--bj-sm);
	letter-spacing: 0.02em;
	text-transform: none;
}

.benja-channels__value {
	overflow-wrap: anywhere;
}

.benja-channels__arrow {
	display: inline-grid;
	place-items: center;
	flex: none;
	color: var(--bj-muted);
	transition: translate 500ms var(--bj-ease), color 500ms var(--bj-ease);
}

.benja-channels__arrow svg {
	width: 1rem;
	height: 1rem;
}

/* WeChat popover vs. fallback link. */
.benja-channels__qr-js {
	display: none;
}

.benja-channels__qr-nojs {
	display: contents;
}

.benja-channels__popover {
	display: none;
}

@supports selector(:popover-open) {
	.benja-channels__qr-js {
		display: contents;
	}

	.benja-channels__qr-nojs {
		display: none;
	}

	.benja-channels__popover:popover-open {
		display: grid;
	}
}

/* ------------------------------------------------------------------ */
/* Layout: list                                                         */
/* ------------------------------------------------------------------ */

.benja-channels--list .benja-channels__list {
	border-top: var(--bj-hairline);
}

.benja-channels--list .benja-channels__item {
	border-bottom: var(--bj-hairline);
}

.benja-channels--list .benja-channels__link {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	width: 100%;
	padding: 1.05rem 0.25rem;
	transition: padding 600ms var(--bj-ease), background-color 600ms var(--bj-ease);
}

.benja-channels--list .benja-channels__link:not(.is-static):hover {
	padding-inline-start: 0.85rem;
	background-color: color-mix(in srgb, var(--bj-surface) 70%, transparent);
}

.benja-channels--list .benja-channels__icon {
	width: 2.75rem;
	height: 2.75rem;
	border: var(--bj-hairline-gold);
	border-radius: 50%;
	color: var(--bj-gold-strong);
	background: var(--bj-surface);
}

.benja-channels--list .benja-channels__text {
	flex: 1 1 auto;
}

.benja-channels--list .benja-channels__value {
	font-family: var(--bj-display);
	font-size: var(--bj-md);
	line-height: 1.3;
	color: var(--bj-ink);
	font-variant-numeric: lining-nums;
}

.benja-channels--list.benja-channels--no-labels .benja-channels__value {
	font-size: var(--wp--preset--font-size--lg, clamp(1.5rem, 1.25rem + 1vw, 2rem));
}

.benja-channels--list .benja-channels__link:hover .benja-channels__arrow {
	translate: 0.25rem 0;
	color: var(--bj-gold-strong);
}

/* ------------------------------------------------------------------ */
/* Layout: inline                                                       */
/* ------------------------------------------------------------------ */

.benja-channels--inline .benja-channels__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.75rem;
}

.benja-channels--inline .benja-channels__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	font-family: var(--bj-sans);
	font-size: var(--bj-sm);
	letter-spacing: 0.03em;
}

.benja-channels--inline .benja-channels__icon {
	color: var(--bj-gold-strong);
}

.benja-channels--inline .benja-channels__text {
	flex-direction: row;
}

.benja-channels--inline .benja-channels__arrow {
	display: none;
}

.benja-channels--inline.benja-channels--labels .benja-channels__value {
	display: none;
}

.benja-channels--inline .benja-channels__label:not(.benja-sr-only) {
	font-size: var(--bj-xs);
	color: inherit;
}

.benja-channels--inline .benja-channels__text > span:not(.benja-sr-only) {
	background: linear-gradient(var(--bj-gold), var(--bj-gold)) 0 100% / 0 1px no-repeat;
	transition: background-size 500ms var(--bj-ease);
}

.benja-channels--inline .benja-channels__link:not(.is-static):hover .benja-channels__text > span:not(.benja-sr-only) {
	background-size: 100% 1px;
}

/* ------------------------------------------------------------------ */
/* Layout: icons                                                        */
/* ------------------------------------------------------------------ */

.benja-channels--icons .benja-channels__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.benja-channels--icons .benja-channels__link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	min-width: 3.25rem;
}

.benja-channels--icons .benja-channels__icon {
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid color-mix(in srgb, var(--bj-ink) 30%, transparent);
	border-radius: 50%;
	color: var(--bj-ink);
	transition: background-color 500ms var(--bj-ease), color 500ms var(--bj-ease), border-color 500ms var(--bj-ease);
}

.benja-channels--icons .benja-channels__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.benja-channels--icons .benja-channels__link:not(.is-static):hover .benja-channels__icon {
	color: var(--bj-surface);
	background-color: var(--bj-ink);
	border-color: var(--bj-ink);
}

.benja-channels--icons .benja-channels__text {
	align-items: center;
	text-align: center;
}

.benja-channels--icons .benja-channels__value,
.benja-channels--icons .benja-channels__arrow {
	display: none;
}

.benja-channels--icons .benja-channels__label {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
}

/* ------------------------------------------------------------------ */
/* WeChat QR popover                                                    */
/* ------------------------------------------------------------------ */

.benja-channels__popover {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: min(20rem, calc(100% - 2rem));
	height: fit-content;
	max-height: calc(100% - 2rem);
	margin: auto;
	padding: 1.75rem 1.75rem 1.25rem;
	overflow: auto;
	justify-items: center;
	gap: 0.85rem;
	border: 0;
	border-top: 2px solid var(--bj-gold);
	border-radius: var(--bj-radius);
	color: var(--bj-ink);
	background: var(--bj-surface);
	box-shadow: 0 40px 80px -36px rgb(28 25 21 / 0.5), 0 0 0 1px rgb(28 25 21 / 0.06);
	text-align: center;
	opacity: 0;
	translate: 0 0.75rem;
	transition: opacity 400ms var(--bj-ease), translate 600ms var(--bj-ease);
	transition: opacity 400ms var(--bj-ease), translate 600ms var(--bj-ease), overlay 400ms allow-discrete, display 400ms allow-discrete;
}

.benja-channels__popover:popover-open {
	opacity: 1;
	translate: 0 0;
}

@starting-style {
	.benja-channels__popover:popover-open {
		opacity: 0;
		translate: 0 0.75rem;
	}
}

.benja-channels__popover::backdrop {
	background-color: rgb(28 25 21 / 0.35);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.benja-channels__qr-eyebrow {
	margin: 0;
	font-family: var(--bj-sans);
	font-size: var(--bj-xs);
	font-weight: 500;
	letter-spacing: var(--bj-tracking);
	text-transform: uppercase;
	color: var(--bj-gold-strong);
}

.benja-channels__qr-frame {
	width: 100%;
	max-width: 14rem;
	padding: 0.75rem;
	background: #fff;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--bj-gold) 55%, transparent);
}

.benja-channels__qr-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

.benja-channels__qr-text {
	margin: 0;
	font-family: var(--bj-display);
	font-size: var(--bj-md);
	font-style: italic;
	line-height: 1.35;
	color: var(--bj-secondary);
}

.benja-channels__qr-id {
	margin: 0;
	font-family: var(--bj-sans);
	font-size: var(--bj-sm);
	color: var(--bj-ink);
}

.benja-channels__qr-id-label {
	font-size: var(--bj-xs);
	font-weight: 500;
	letter-spacing: var(--bj-tracking);
	text-transform: uppercase;
	color: var(--bj-muted);
}

.benja-channels__qr-id-value {
	letter-spacing: 0.04em;
	user-select: all;
}

.benja-channels__qr-close {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin: 0.25rem 0 0;
	padding: 0 1rem;
	border: 0;
	border-radius: var(--bj-radius);
	background: none;
	font-family: var(--bj-sans);
	font-size: var(--bj-xs);
	font-weight: 500;
	letter-spacing: var(--bj-tracking);
	text-transform: uppercase;
	color: var(--bj-ink);
	cursor: pointer;
}

.benja-channels__qr-close svg {
	width: 0.9rem;
	height: 0.9rem;
}

.benja-channels__qr-close:hover {
	background-color: color-mix(in srgb, var(--bj-ink) 6%, transparent);
}

.benja-channels__qr-close:focus-visible {
	outline: 2px solid var(--bj-gold-strong);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.benja-channels__link,
	.benja-channels__arrow,
	.benja-channels__icon,
	.benja-channels__text > span,
	.benja-channels__popover {
		transition-duration: 0.01ms !important;
	}

	.benja-channels__popover {
		translate: none;
	}
}

/* "Copy WeChat ID" (revealed by view.js where the Clipboard API exists) — SPEC §12. */
.benja-channels__copy {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 1.1rem;
	border: var(--bj-hairline);
	border-radius: var(--bj-radius);
	background: none;
	font-family: var(--bj-sans);
	font-size: var(--bj-xs);
	font-weight: 500;
	letter-spacing: var(--bj-tracking);
	text-transform: uppercase;
	color: var(--bj-ink);
	cursor: pointer;
	transition: background-color 350ms var(--bj-ease), border-color 350ms var(--bj-ease);
}

.benja-channels__copy[hidden] {
	display: none;
}

.benja-channels__copy:lang(th),
.benja-channels__copy:lang(zh) {
	font-size: var(--bj-sm);
	letter-spacing: 0.02em;
	text-transform: none;
}

.benja-channels__copy svg {
	width: 0.95rem;
	height: 0.95rem;
	color: var(--bj-gold-strong);
	opacity: 0;
	transition: opacity 300ms var(--bj-ease);
}

.benja-channels__copy.is-copied svg {
	opacity: 1;
}

.benja-channels__copy:hover {
	border-color: var(--bj-ink);
}

.benja-channels__copy:focus-visible {
	outline: 2px solid var(--bj-gold-strong);
	outline-offset: 2px;
}