/**
 * VYBE Journal Theme Kit – language switch
 *
 * <html data-vjk-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 VYBE Journal theme style the "both" layout of their
 * own pieces; the zero-specificity rules below cover everything else.
 */

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

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

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

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

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

.vjl-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: 999px;
	border: 1px solid rgba(201, 162, 39, .5);
	background: rgba(255, 255, 255, .06);
	font-family: "Journal 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;
}
.vjl-switch .vjl-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;
}
.vjl-switch .vjl-switch__opt:hover { background: rgba(255, 255, 255, .14); color: inherit; text-decoration: none; }
.vjl-switch .vjl-switch__opt:focus-visible { outline: 2px solid var(--vj-gold, #c9a227); outline-offset: 1px; }
.vjl-switch .vjl-switch__opt.is-active,
.vjl-switch .vjl-switch__opt[aria-current="true"] { background: var(--vj-gold, #c9a227); color: var(--vj-navy, #14365d); }

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

/* VYBE Journal theme header (top bar) … */
.vjl-switch--masthead { color: var(--vj-navy, #14365d); background: var(--vj-mist, #f4f6f9); border-color: var(--vj-line, #d9dfe8); font-size: .82rem; }
.vjl-switch--masthead .vjl-switch__opt { min-height: 34px; padding: .35rem .85rem; }
.vjl-switch--masthead .vjl-switch__opt:hover { background: var(--vj-sand, #e9edf3); }
.vjl-switch--masthead .vjl-switch__opt.is-active,
.vjl-switch--masthead .vjl-switch__opt[aria-current="true"] { background: var(--vj-navy, #14365d); color: #fff; }
/* … and in the dark top bar on tablets and phones. */
.vjl-switch--topbar { color: var(--vj-on-dark, #d9e2ef); }
.vjl-mobile-only { display: none !important; }
@media (max-width: 1024px) {
	.vjl-desktop-only { display: none !important; }
	.vjl-mobile-only { display: inline-flex !important; }
}

/* In page content (light background) */
.vjl-inline { display: flex; }
.vjl-align--center { justify-content: center; }
.vjl-align--right { justify-content: flex-end; }
.vjl-switch--inline { color: var(--vj-navy, #14365d); background: var(--vj-mist, #f4f6f9); border-color: var(--vj-line, #d9dfe8); font-size: .9rem; }
.vjl-switch--inline .vjl-switch__opt { min-height: 32px; padding: .35rem .95rem; }
.vjl-switch--inline .vjl-switch__opt:hover { background: var(--vj-sand, #e9edf3); }
.vjl-switch--inline .vjl-switch__opt.is-active,
.vjl-switch--inline .vjl-switch__opt[aria-current="true"] { background: var(--vj-navy, #14365d); color: #fff; }

/* Floating button */
.vjl-float { position: fixed; z-index: 9990; bottom: 18px; right: 18px; }
.vjl-float--left { right: auto; left: 18px; }
.vjl-float .vjl-switch {
	color: #fff;
	background: var(--vj-navy, #14365d);
	border-color: rgba(201, 162, 39, .65);
	box-shadow: 0 12px 28px -12px rgba(15, 39, 71, .5);
	font-size: .82rem;
}
.vjl-float .vjl-switch__opt { min-height: 32px; padding: .35rem .8rem; }

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

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

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

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