/* Tarjuman — reader-facing styles. Loaded only on single posts. */

/* Button and bar.
 * Themes (tagDiv included) often reset <button> styles inside their elements, and browsers do not
 * make buttons inherit text color. These rules give both buttons the same look everywhere.
 * Colors come from the plugin settings through CSS variables; empty settings inherit. */
body :is(a, button).tjm-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	font: inherit;
	font-size: .875rem;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	color: var(--tjm-btn-color, inherit);
	background: var(--tjm-btn-bg, transparent);
	cursor: pointer;
}
body button.tjm-btn:not(.tjm-btn--plugin) { padding: 0; border: 0; }
body :is(a, button).tjm-btn.tjm-btn--plugin {
	padding: .45em .9em;
	border: 1px solid var(--tjm-btn-border, currentColor);
	border-radius: 4px;
	font-weight: 600;
	transition: background-color .15s ease, color .15s ease;
}
body :is(a, button).tjm-btn.tjm-btn--plugin:hover,
body :is(a, button).tjm-btn.tjm-btn--plugin:focus-visible {
	background: var(--tjm-btn-hover, rgba(127, 127, 127, .14));
	color: var(--tjm-btn-color, inherit);
	text-decoration: none;
}
body :is(a, button).tjm-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
body :is(a, button).tjm-btn * { color: inherit; }
.tjm-btn[lang="ar"] { font-family: var(--tjm-font, "Segoe UI", Tahoma, Arial, sans-serif); }

.tjm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .9em; margin: .5em 0; font-size: .875rem; }
.tjm-bar, .tjm-bar .tjm-notice, .tjm-bar .tjm-stale { font-family: var(--tjm-font, "Segoe UI", Tahoma, Arial, sans-serif); }
.tjm-notice { opacity: .75; }
.tjm-stale { padding: .15em .5em; border-radius: 3px; background: #fff3cd; color: #664d03; }
.tjm-pilot { padding: .15em .5em; border-radius: 3px; background: #e7f1ff; color: #084298; font-size: .8em; }

/* Arabic content: the theme has no RTL styles, so these do the work. */
body.tjm-view-ar .tjm-ar-content {
	direction: rtl;
	text-align: right;
	font-family: var(--tjm-font);
	line-height: var(--tjm-line, 1.8);
}
body.tjm-view-ar .tjm-ar-content :is(p, li, dd, blockquote, figcaption, td, th) {
	font-family: var(--tjm-font);
	line-height: var(--tjm-line, 1.8);
}
body.tjm-view-ar .tjm-ar-content :is(p, li) { font-size: calc(var(--tjm-scale, 1) * 1em); }
body.tjm-view-ar .tjm-ar-content li li, body.tjm-view-ar .tjm-ar-content li p { font-size: 1em; }
body.tjm-view-ar .tjm-ar-content :is(h1, h2, h3, h4, h5, h6) { font-family: var(--tjm-font); text-align: right; }
body.tjm-view-ar .tjm-ar-content :is(ul, ol) { padding-inline-start: 1.5em; padding-inline-end: 0; margin-inline-start: 0; }
body.tjm-view-ar .tjm-ar-content blockquote {
	border-inline-start: 3px solid currentColor;
	border-inline-end: 0;
	padding-inline-start: 1em;
	padding-inline-end: 0;
	text-align: right;
}
body.tjm-view-ar .tjm-ar-content table { direction: rtl; }
body.tjm-view-ar .tjm-ar-content :is(th, td) { text-align: right; }
body.tjm-view-ar .tjm-ar-content figcaption { text-align: right; }
body.tjm-view-ar .tjm-ar-content .alignleft { float: right; margin-inline: 1em 0; }
body.tjm-view-ar .tjm-ar-content .alignright { float: left; margin-inline: 0 1em; }
body.tjm-view-ar .tjm-ar-content :is(pre, code, kbd, samp) { direction: ltr; unicode-bidi: isolate; text-align: left; }
body.tjm-view-ar .tjm-ar-content pre { text-align: left; }
body.tjm-view-ar bdi { unicode-bidi: isolate; }

/* Language switch fixed at the top of the page, and the note on an article with no Arabic version. */
.tjm-switch-float { position: fixed; top: 12px; z-index: 99999; }
.tjm-switch-float--right { right: 14px; }
.tjm-switch-float--left { left: 14px; }
body.admin-bar .tjm-switch-float { top: 46px; }
body :is(a, button).tjm-btn.tjm-btn--float {
	display: inline-block;
	padding: .35em .9em;
	border-radius: 4px;
	background: var(--tjm-btn-bg, rgba(15, 15, 15, .88));
	color: var(--tjm-btn-color, #fff);
	border: 1px solid var(--tjm-btn-border, rgba(255, 255, 255, .35));
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
}
.tjm-untranslated {
	position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 99999;
	max-width: 92%; padding: 8px 16px; border-radius: 6px;
	background: rgba(15, 15, 15, .92); color: #fff; font-size: 14px; line-height: 1.7; text-align: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
	animation: tjm-fade .6s ease 9s forwards;
}
@keyframes tjm-fade { to { opacity: 0; visibility: hidden; } }