/* v3.13.0 — Telegram bot calls to action (inc/class-am-telegram-cta.php).
   Telegram blue on the theme's ink-and-paper style: hard borders and
   offset shadows, like the floating button. */

:root {
	--am-tg: #229ED9;
	--am-tg-dark: #1a85b8;
	--am-tg-ink: #0d3b52;
}

.am-tgc-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; display: block; }

/* ---- Shared button look ---------------------------------------------- */
.am-tgc-header,
.am-tgc-hero-btn,
.am-tgc-band-btn,
.am-tgc-nudge-btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: var(--am-tg);
	color: #fff;
	border: 1.5px solid var(--am-ink);
	border-radius: var(--am-radius-sm);
	box-shadow: 3px 3px 0 var(--am-ink);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.am-tgc-header:hover,
.am-tgc-hero-btn:hover,
.am-tgc-band-btn:hover,
.am-tgc-nudge-btn:hover,
.am-tgc-header:focus-visible,
.am-tgc-hero-btn:focus-visible,
.am-tgc-band-btn:focus-visible,
.am-tgc-nudge-btn:focus-visible {
	background: var(--am-tg-dark);
	color: #fff;
	text-decoration: none;
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--am-ink);
}
:root[data-theme="dark"] .am-tgc-header,
:root[data-theme="dark"] .am-tgc-hero-btn,
:root[data-theme="dark"] .am-tgc-band-btn,
:root[data-theme="dark"] .am-tgc-nudge-btn { border-color: #f3ece0; box-shadow: 3px 3px 0 #f3ece0; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .am-tgc-header,
	:root:not([data-theme="light"]) .am-tgc-hero-btn,
	:root:not([data-theme="light"]) .am-tgc-band-btn,
	:root:not([data-theme="light"]) .am-tgc-nudge-btn { border-color: #f3ece0; box-shadow: 3px 3px 0 #f3ece0; }
}

/* ---- Header ------------------------------------------------------------ */
.am-tgc-header { padding: .5rem .8rem .5rem .55rem; font-size: .85rem; white-space: nowrap; margin-right: .25rem; }
@media (max-width: 1100px) {
	.am-tgc-header-label { display: none; }
	.am-tgc-header { padding: .45rem; box-shadow: 2px 2px 0 var(--am-ink); }
	.am-tgc-header .am-tgc-icon { width: 1.45rem; height: 1.45rem; }
}

/* ---- Top strip --------------------------------------------------------- */
.am-tgc-masthead {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--am-tg-dark);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.am-tgc-masthead .am-tgc-icon { width: .95rem; height: .95rem; }
.am-tgc-masthead:hover { color: var(--am-tg); text-decoration: underline; }
:root[data-theme="dark"] .am-tgc-masthead { color: #6cc7f0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .am-tgc-masthead { color: #6cc7f0; } }
@media (max-width: 560px) {
	.am-masthead-strip-inner > span:first-child { display: none; }
}

/* ---- Tool page hero ---------------------------------------------------- */
.am-tgc-hero { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.35rem; }
.am-tgc-hero-btn { padding: .75rem 1.15rem .75rem .85rem; font-size: 1rem; }
.am-tgc-hero-btn .am-tgc-icon { width: 1.5rem; height: 1.5rem; }
.am-tgc-hero-note { font-size: .84rem; color: var(--am-text-muted); }

/* ---- Band above the footer -------------------------------------------- */
.am-tgc-band {
	position: relative;
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	background:
		radial-gradient(circle at 92% 18%, rgba(255,255,255,.16) 0 7rem, transparent 7.1rem),
		radial-gradient(circle at 8% 110%, rgba(255,255,255,.1) 0 9rem, transparent 9.1rem),
		var(--am-tg);
	color: #fff;
	border-top: 3px solid var(--am-ink);
	overflow: hidden;
}
.am-tgc-band-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2.5rem;
	padding-top: clamp(2.25rem, 5vw, 3.5rem);
	padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.am-tgc-band-eyebrow {
	display: inline-flex; align-items: center; gap: .45rem;
	margin: 0 0 .75rem;
	padding: .3rem .65rem .3rem .35rem;
	background: #fff;
	color: var(--am-tg-ink);
	border-radius: 999px;
	font-family: var(--am-font-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.am-tgc-band-eyebrow .am-tgc-icon { width: 1.1rem; height: 1.1rem; }
.am-tgc-band h2 { margin: 0; color: #fff; font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.02; max-width: 22ch; }
.am-tgc-band-lead { margin: .9rem 0 0; font-size: 1.08rem; color: rgba(255,255,255,.92); max-width: 58ch; }
.am-tgc-band-points { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.am-tgc-band-points li { padding: .35rem .7rem; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; font-size: .84rem; font-weight: 600; }
.am-tgc-band-btn {
	margin-top: 1.5rem;
	padding: .95rem 1.4rem .95rem 1rem;
	font-size: 1.08rem;
	background: #fff;
	color: var(--am-tg-ink);
	box-shadow: 4px 4px 0 var(--am-ink);
}
.am-tgc-band-btn .am-tgc-icon { width: 1.6rem; height: 1.6rem; }
.am-tgc-band-btn:hover,
.am-tgc-band-btn:focus-visible { background: #fff; color: var(--am-tg-ink); box-shadow: 6px 6px 0 var(--am-ink); }
:root[data-theme="dark"] .am-tgc-band-btn { border-color: var(--am-ink); box-shadow: 4px 4px 0 #0b0a08; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .am-tgc-band-btn { border-color: #16130f; box-shadow: 4px 4px 0 #0b0a08; } }
.am-tgc-band-handle { margin: .8rem 0 0; font-size: .88rem; color: rgba(255,255,255,.85); }
.am-tgc-band-handle strong { color: #fff; }

.am-tgc-band-qr { display: none; text-align: center; }
.am-tgc-band-qr.has-qr { display: block; }
.am-tgc-qr-box svg { display: block; width: 100%; height: auto; }
.am-tgc-band-qr .am-tgc-qr-box {
	width: 168px;
	padding: 10px;
	background: #fff;
	border: 1.5px solid var(--am-ink);
	border-radius: var(--am-radius);
	box-shadow: 5px 5px 0 var(--am-ink);
	transform: rotate(2deg);
}
.am-tgc-band-qr p { margin: .9rem 0 0; max-width: 170px; font-size: .8rem; color: rgba(255,255,255,.9); }
@media (max-width: 860px) {
	.am-tgc-band-inner { grid-template-columns: 1fr; }
	.am-tgc-band-qr, .am-tgc-band-qr.has-qr { display: none; }
	.am-tgc-band-btn { width: 100%; justify-content: center; }
}

/* ---- Slide-in card ----------------------------------------------------- */
.am-tgc-nudge {
	position: fixed;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 1520;
	width: 340px;
	max-width: calc(100vw - 2rem);
	padding: 1.1rem 1.15rem 1.15rem;
	background: var(--am-surface-raised);
	color: var(--am-text);
	border: 1.5px solid var(--am-border-strong);
	border-top: 6px solid var(--am-tg);
	border-radius: var(--am-radius);
	box-shadow: 6px 6px 0 var(--am-border-strong);
	transform: translateY(calc(100% + 2rem));
	opacity: 0;
	transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s ease;
}
.am-tgc-nudge.is-in { transform: none; opacity: 1; }
.am-tgc-nudge[hidden] { display: none; }
.am-tgc-nudge-close {
	position: absolute; top: .3rem; right: .45rem;
	background: none; border: 0;
	font-size: 1.4rem; line-height: 1;
	color: var(--am-text-muted);
	cursor: pointer;
	padding: .25rem .4rem;
}
.am-tgc-nudge-close:hover { color: var(--am-text); }
.am-tgc-nudge-head { display: flex; align-items: center; gap: .7rem; padding-right: 1.4rem; }
.am-tgc-nudge-badge {
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	width: 2.6rem; height: 2.6rem;
	font-size: 1.4rem;
	background: var(--am-bg-soft);
	border: 1.5px solid var(--am-border-strong);
	border-radius: 50%;
}
.am-tgc-nudge-badge .am-tgc-icon { width: 100%; height: 100%; }
.am-tgc-nudge-title { margin: 0; font-family: var(--am-font-display); font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.am-tgc-nudge-text { margin: .65rem 0 0; font-size: .9rem; color: var(--am-text-muted); }
.am-tgc-nudge-qr { display: none; align-items: center; gap: .75rem; margin-top: .8rem; font-size: .78rem; color: var(--am-text-muted); }
.am-tgc-nudge-qr.has-qr { display: flex; }
.am-tgc-nudge-qr .am-tgc-qr-box { width: 84px; padding: 4px; background: #fff; border: 1px solid var(--am-border); border-radius: var(--am-radius-sm); }
.am-tgc-nudge-actions { display: flex; align-items: center; gap: .75rem; margin-top: .95rem; }
.am-tgc-nudge-btn { flex: 1; justify-content: center; padding: .7rem .9rem; font-size: .92rem; }
.am-tgc-nudge-later { background: none; border: 0; padding: .5rem; color: var(--am-text-muted); font: inherit; font-size: .86rem; cursor: pointer; text-decoration: underline; }
.am-tgc-nudge-later:hover { color: var(--am-text); }
@media (max-width: 780px) {
	.am-tgc-nudge {
		left: .75rem; right: .75rem;
		width: auto; max-width: none;
		bottom: calc(86px + env(safe-area-inset-bottom, 0));
	}
	body.am-tgc-nudge-open .am-telegram-fab { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
	.am-tgc-nudge { transition: opacity .2s ease; transform: none; }
}

/* ---- After articles ---------------------------------------------------- */
.am-tgc-article {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 2.5rem 0 1rem;
	padding: 1.25rem 1.35rem;
	background: #e8f5fc;
	color: #10324a;
	border: 1.5px solid var(--am-ink);
	border-left: 8px solid var(--am-tg);
	border-radius: var(--am-radius);
	box-shadow: 4px 4px 0 var(--am-ink);
}
.am-tgc-article-icon { width: 2.8rem; height: 2.8rem; flex-shrink: 0; }
.am-tgc-article p { margin: 0 0 .5rem; color: inherit; }
.am-tgc-article-title { font-family: var(--am-font-display); font-size: 1.2rem; font-weight: 800; }
.am-tgc-article-btn { font-weight: 700; color: var(--am-tg-dark); }
.am-tgc-article-btn:hover { color: var(--am-tg-ink); }
:root[data-theme="dark"] .am-tgc-article { background: #10283a; color: #dceefa; border-color: #f3ece0; box-shadow: 4px 4px 0 #f3ece0; }
:root[data-theme="dark"] .am-tgc-article-btn { color: #6cc7f0; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .am-tgc-article { background: #10283a; color: #dceefa; border-color: #f3ece0; box-shadow: 4px 4px 0 #f3ece0; }
	:root:not([data-theme="light"]) .am-tgc-article-btn { color: #6cc7f0; }
}