/**
 * Frontend Citation and Tooltip Styles for Zotero WP Cite
 * Designed to seamlessly inherit active theme typography and styling (docs/05).
 */

:root {
	--zotero-cite-bg: rgba(15, 23, 42, 0.05);
	--zotero-cite-hover-bg: rgba(15, 23, 42, 0.12);
	--zotero-cite-border: rgba(15, 23, 42, 0.45);
	--zotero-tooltip-bg: #0f172a;
	--zotero-tooltip-text: #f8fafc;
	--zotero-section-border: rgba(15, 23, 42, 0.12);
}

@media (prefers-color-scheme: dark) {
	:root {
		--zotero-cite-bg: rgba(248, 250, 252, 0.08);
		--zotero-cite-hover-bg: rgba(248, 250, 252, 0.18);
		--zotero-cite-border: rgba(248, 250, 252, 0.5);
		--zotero-tooltip-bg: #0f172a;
		--zotero-tooltip-text: #f8fafc;
		--zotero-section-border: rgba(248, 250, 252, 0.15);
	}
}

/* 1. In-Text Citation Base (87,5% do tamanho do texto envolvente) */
cite.zotero-citation,
.zotero-citation {
	font-style: normal;
	background-color: inherit;
	padding: 0.1em 0.25em;
	border-radius: 4px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	color: inherit;
	font-size: 0.875em;
	line-height: inherit;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Nas legendas padrão do WordPress (imagens, tabelas, galerias, etc.): mantém o tamanho da legenda */
figcaption cite.zotero-citation,
figcaption .zotero-citation,
.wp-caption cite.zotero-citation,
.wp-caption .zotero-citation,
.wp-caption-text cite.zotero-citation,
.wp-caption-text .zotero-citation,
caption cite.zotero-citation,
caption .zotero-citation,
.gallery-caption cite.zotero-citation,
.gallery-caption .zotero-citation,
.wp-block-table figcaption cite.zotero-citation,
.wp-block-table figcaption .zotero-citation,
.wp-block-image figcaption cite.zotero-citation,
.wp-block-image figcaption .zotero-citation,
.wp-block-gallery figcaption cite.zotero-citation,
.wp-block-gallery figcaption .zotero-citation,
.wp-block-audio figcaption cite.zotero-citation,
.wp-block-audio figcaption .zotero-citation,
.wp-block-video figcaption cite.zotero-citation,
.wp-block-video figcaption .zotero-citation,
.wp-block-embed figcaption cite.zotero-citation,
.wp-block-embed figcaption .zotero-citation {
	font-size: inherit;
}

cite.zotero-citation.has-tooltip {
	position: relative;
	cursor: help;
	border-bottom: 1.5px dotted var(--zotero-cite-border);
	padding-bottom: 1px;
}

cite.zotero-citation.has-tooltip:hover,
cite.zotero-citation.has-tooltip:focus,
cite.zotero-citation.has-tooltip:focus-visible {
	background-color: var(--zotero-cite-hover-bg);
	border-bottom-color: var(--wp--preset--color--primary, currentColor);
}

cite.zotero-citation.has-tooltip:focus-visible,
cite.zotero-citation a.zotero-cite-jump:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, currentColor);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 2. Accessible Floating Tooltip */
.zotero-tooltip {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: min(320px, calc(100vw - 24px));
	box-sizing: border-box;
	word-break: break-word;
	overflow-wrap: break-word;
	background-color: var(--zotero-tooltip-bg);
	color: var(--zotero-tooltip-text);
	border: 1px solid rgba(255, 255, 255, 0.12);
	text-align: left;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 0.8125rem;
	line-height: 1.5;
	font-family: inherit;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
	z-index: 99999;
	pointer-events: none;
	transition: opacity 0.2s ease, bottom 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
	white-space: normal;
}

.zotero-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: var(--zotero-tooltip-bg) transparent transparent transparent;
}

cite.zotero-citation.has-tooltip:hover .zotero-tooltip,
cite.zotero-citation.has-tooltip:focus .zotero-tooltip,
cite.zotero-citation.has-tooltip:focus-visible .zotero-tooltip,
cite.zotero-citation.has-tooltip:focus-within .zotero-tooltip {
	visibility: visible;
	opacity: 1;
	bottom: calc(100% + 12px);
}

/* Dismissed tooltip on Escape (WCAG 1.4.13) */
cite.zotero-citation.has-tooltip.is-dismissed .zotero-tooltip {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Edge-aligned tooltips (prevent viewport overflow) */
cite.zotero-citation.is-align-left .zotero-tooltip {
	left: 0 !important;
	transform: none !important;
}

cite.zotero-citation.is-align-left .zotero-tooltip::after {
	left: 16px !important;
	transform: none !important;
}

cite.zotero-citation.is-align-right .zotero-tooltip {
	left: auto !important;
	right: 0 !important;
	transform: none !important;
}

cite.zotero-citation.is-align-right .zotero-tooltip::after {
	left: auto !important;
	right: 16px !important;
	transform: none !important;
}

@media (max-width: 480px) {
	.zotero-tooltip {
		max-width: min(280px, calc(100vw - 20px));
		left: 0;
		transform: none;
	}

	.zotero-tooltip::after {
		left: 20px;
		transform: none;
	}
}

/* 3. Final Bibliography Section */
.zotero-bibliography-section {
	margin-top: 3.5rem;
	border-top: 1px solid var(--zotero-section-border);
	padding-top: 2rem;
}

.zotero-bibliography-section .wp-block-heading,
.zotero-bibliography-section h2 {
	margin-bottom: 1.5rem;
	font-family: inherit;
	color: inherit;
}

.zotero-bibliography-section .csl-bib-body {
	line-height: 1.65 !important;
	color: inherit;
	font-size: 0.875em;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

cite.zotero-citation a.zotero-cite-jump {
	color: inherit;
	text-decoration: none !important;
	cursor: pointer;
}

cite.zotero-citation a.zotero-cite-jump:hover,
cite.zotero-citation a.zotero-cite-jump:focus {
	text-decoration: underline;
}

.zotero-bibliography-section .csl-entry {
	margin: 0;
	text-indent: -1.27cm;
	padding-left: 1.27cm;
	position: relative;
	border-radius: 4px;
	transition: background-color 0.3s ease;
	scroll-margin-top: 2rem;
	overflow-wrap: break-word;
	word-break: break-word;
}

.zotero-bibliography-section .csl-entry.zotero-highlighted {
	background-color: rgba(254, 240, 138, 0.65);
	box-shadow: 0 0 0 4px rgba(254, 240, 138, 0.65);
	border-radius: 4px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

@media (prefers-color-scheme: dark) {
	.zotero-bibliography-section .csl-entry.zotero-highlighted {
		background-color: rgba(234, 179, 8, 0.3);
		box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.3);
	}
}

cite.zotero-citation.zotero-pulse {
	animation: zotero-cite-pulse 2s ease-out;
}

@keyframes zotero-cite-pulse {
	0% {
		background-color: rgba(254, 240, 138, 0.8);
	}
	50% {
		background-color: rgba(254, 240, 138, 0.4);
	}
	100% {
		background-color: inherit;
	}
}

.zotero-backlink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 4px;
	margin-left: 3px;
	color: var(--wp--preset--color--contrast-2, #94a3b8);
	border-radius: 4px;
	text-decoration: none;
	opacity: 0.7;
	transition: all 0.15s ease-in-out;
	vertical-align: middle;
	line-height: 1;
}

.zotero-backlink:hover,
.zotero-backlink:focus {
	opacity: 1;
	color: var(--wp--preset--color--primary, #2563eb);
	background-color: var(--zotero-cite-hover-bg, rgba(15, 23, 42, 0.08));
	transform: translateY(-1px);
	text-decoration: none;
}

.zotero-tooltip-entry {
	display: block;
}

.zotero-tooltip-separator {
	display: block;
	width: 100%;
	height: 1px;
	margin: 8px 0;
	background-color: rgba(255, 255, 255, 0.2);
	border: 0;
}

.zotero-bibliography-section .csl-entry a:not(.zotero-backlink):not(.zotero-bib-link) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-all;
}

@media (max-width: 640px) {
	.zotero-bibliography-section .csl-entry {
		text-indent: -1rem;
		padding-left: 1rem;
	}
}

/* 4. Formatting helper for True Italics */
.zotero-citation i,
.zotero-citation em,
.zotero-tooltip i,
.zotero-tooltip em,
.zotero-bibliography-section i,
.zotero-bibliography-section em,
.csl-entry i,
.csl-entry em {
	font-style: italic;
	font-family: inherit;
}

/* 5. Bibliography Export Actions */
.zotero-bibliography-actions {
	margin-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.8125rem;
}

.zotero-export-label {
	color: var(--wp--preset--color--contrast-2, #64748b);
}

.zotero-export-link {
	text-decoration: underline;
	color: inherit;
}

.zotero-export-link:hover,
.zotero-export-link:focus {
	text-decoration: none;
}

/* 6. Entry Actions (Copy Reference / DOI) */
.zotero-entry-actions {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 6px;
	vertical-align: middle;
}

.zotero-copy-btn,
.zotero-bib-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 2px 4px;
	margin: 0;
	font-size: 0.7rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--contrast-2, #94a3b8);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	opacity: 0.7;
	transition: all 0.15s ease-in-out;
	text-decoration: none !important;
	vertical-align: middle;
}

.zotero-copy-btn:hover,
.zotero-copy-btn:focus,
.zotero-bib-link:hover,
.zotero-bib-link:focus {
	opacity: 1;
	color: var(--wp--preset--color--foreground, var(--wp--preset--color--contrast, inherit));
	background-color: var(--zotero-cite-hover-bg, rgba(15, 23, 42, 0.08));
	border-color: rgba(15, 23, 42, 0.08);
	text-decoration: none !important;
}

.zotero-copy-btn:focus-visible,
.zotero-bib-link:focus-visible,
.zotero-backlink:focus-visible,
.zotero-export-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, currentColor);
	outline-offset: 2px;
}

.zotero-copy-btn.is-copied {
	opacity: 1;
	color: #16a34a !important;
	background-color: #dcfce7 !important;
	border-color: #86efac !important;
}

.zotero-copy-btn svg,
.zotero-backlink svg,
.zotero-bib-link svg {
	display: inline-block;
	vertical-align: middle;
}