/**
 * Tamilmanam Language
 *
 * <html data-tmk-lang="en|both|ta"> decides which half of each pair is shown:
 *   .l-en / .l-ta   English / Tamil text (span, or div.l-block for paragraphs)
 *   .l-both         shown only when both languages are
 * The Journal Kit and the Tamilmanam theme style the "both" layout of their
 * own pieces; the zero-specificity rules below cover everything else.
 */

/* ---------- Which language is shown ---------- */

html[data-tmk-lang="en"] .l-ta,
html[data-tmk-lang="en"] .l-both,
html[data-tmk-lang="ta"] .l-en,
html[data-tmk-lang="ta"] .l-both { display: none !important; }

/* "English + Tamil", headings only: Tamil paragraphs are left out. */
html[data-tmk-lang="both"][data-tmk-both="compact"] .l-2.l-block { display: none !important; }

/* Fallback "both" layout for other content: Tamil under the English. */
:where(html:not([data-tmk-lang="en"]):not([data-tmk-lang="ta"])) :where(.l-2:not(.l-block)) { display: block; font-size: .86em; }
:where(html:not([data-tmk-lang="en"]):not([data-tmk-lang="ta"])) :where(.l-2.l-block) { margin-top: .6em; padding-left: .9em; border-left: 3px solid #e6b54e; }
.l-ta, [lang="ta"] { letter-spacing: normal; }

/* ---------- Switcher ---------- */

.tml-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: 999px;
	border: 1px solid rgba(230, 181, 78, .5);
	background: rgba(255, 255, 255, .06);
	font-family: "Manam Sans", "Noto Sans", "Noto Sans Tamil", system-ui, sans-serif;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	white-space: nowrap;
}
.tml-switch .tml-switch__opt {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: .25rem .7rem;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .15s, color .15s;
}
.tml-switch .tml-switch__opt:hover { background: rgba(255, 255, 255, .14); color: inherit; text-decoration: none; }
.tml-switch .tml-switch__opt:focus-visible { outline: 2px solid #e6b54e; outline-offset: 1px; }
.tml-switch .tml-switch__opt.is-active,
.tml-switch .tml-switch__opt[aria-current="true"] { background: #e6b54e; color: #5a1a2b; }

.tml-short { display: none; }
.tml-labels--short .tml-long { display: none; }
.tml-labels--short .tml-short { display: inline; }

/* Tamilmanam theme header: next to the header button on computers … */
.tml-switch--masthead { color: #5a1a2b; background: #fcf8f1; border-color: #e8d9c6; font-size: .82rem; }
.tml-switch--masthead .tml-switch__opt { min-height: 34px; padding: .35rem .85rem; }
.tml-switch--masthead .tml-switch__opt:hover { background: #f4eadb; }
.tml-switch--masthead .tml-switch__opt.is-active,
.tml-switch--masthead .tml-switch__opt[aria-current="true"] { background: #5a1a2b; color: #fff; }
/* … and in the dark top bar on tablets and phones. */
.tml-switch--topbar { color: #e3cdd3; }
.tml-mobile-only { display: none !important; }
@media (max-width: 1024px) {
	.tml-desktop-only { display: none !important; }
	.tml-mobile-only { display: inline-flex !important; }
}

/* In page content (light background) */
.tml-inline { display: flex; }
.tml-align--center { justify-content: center; }
.tml-align--right { justify-content: flex-end; }
.tml-switch--inline { color: #5a1a2b; background: #fcf8f1; border-color: #e8d9c6; font-size: .9rem; }
.tml-switch--inline .tml-switch__opt { min-height: 32px; padding: .35rem .95rem; }
.tml-switch--inline .tml-switch__opt:hover { background: #f4eadb; }
.tml-switch--inline .tml-switch__opt.is-active,
.tml-switch--inline .tml-switch__opt[aria-current="true"] { background: #5a1a2b; color: #fff; }

/* Floating button */
.tml-float { position: fixed; z-index: 9990; bottom: 18px; right: 18px; }
.tml-float--left { right: auto; left: 18px; }
.tml-float .tml-switch {
	color: #fff;
	background: #5a1a2b;
	border-color: rgba(230, 181, 78, .65);
	box-shadow: 0 12px 28px -12px rgba(40, 10, 20, .6);
	font-size: .82rem;
}
.tml-float .tml-switch__opt { min-height: 32px; padding: .35rem .8rem; }

@media (max-width: 767px) {
	.tml-labels--auto .tml-long { display: none; }
	.tml-labels--auto .tml-short { display: inline; }
	.tml-float { bottom: 12px; right: 12px; }
	.tml-float--left { right: auto; left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.tml-switch .tml-switch__opt { transition: none; }
}

@media print {
	.tml-switch, .tml-float { display: none !important; }
}

/* Form labels and legends: "English / தமிழ்" on one line. */
:where(html:not([data-tmk-lang="en"]):not([data-tmk-lang="ta"])) form :is(legend, label) .l-2 { display: inline; font-size: .92em; }
:where(html:not([data-tmk-lang="en"]):not([data-tmk-lang="ta"])) form :is(legend, label) .l-2::before { content: " / "; opacity: .5; }