/*
 * Vocabulary lesson widgets (Om oss): help-language bar (tv-vocab-bar), lesson text with word
 * tooltips (tv-vocab-text) and word list (tv-vocab-glossary).
 * Mirrors .translation-bar, .vocab-* and .glossary-item in the Lovable design. Colours that the
 * owner can change in the panel are CSS variables set by the widgets' style controls.
 */
.tv-vocab-bar,
.tv-vocab-glossary-wrap,
.tv-vocab-text {
	--tv-navy: var(--e-global-color-primary, #051644);
	--tv-steel: var(--e-global-color-secondary, #2d6ca9);
	--tv-bright: var(--e-global-color-b1a8e7f, #44a8e7);
	--tv-cream: var(--e-global-color-e33c8be, #fcfaf6);
	--tv-soft-gold: var(--e-global-color-722ed5d, #efd686);
}

/* ---------------------------------------------------------------- sticky band
 * "Fäst under sidhuvudet" (tv-vocab-bar--pin-yes): the top-level container holding the bar
 * sticks under the 80px header, like .translation-bar. Background and borders are the container's. */
.elementor > .e-con:has(.tv-vocab-bar--pin-yes) {
	position: sticky;
	top: 5rem;
	z-index: 30;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.admin-bar .elementor > .e-con:has(.tv-vocab-bar--pin-yes) { top: calc(5rem + 32px); }
@media (max-width: 782px) {
	.admin-bar .elementor > .e-con:has(.tv-vocab-bar--pin-yes) { top: calc(5rem + 46px); }
}

/* ---------------------------------------------------------------- help-language bar */
.tv-vocab-bar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
@media (min-width: 768px) {
	.tv-vocab-bar { flex-direction: row; align-items: center; }
}
.tv-vocab-bar .tv-vocab-bar__label {
	display: block;
	margin: 0;
	color: var(--tv-navy);
	font: 600 17px/1.7 "Outfit", sans-serif;
	vertical-align: baseline;
}
.tv-vocab-bar .tv-vocab-bar__select {
	display: block;
	width: auto;
	min-height: 2.7rem;
	margin: 0;
	border: 1px solid color-mix(in oklab, var(--tv-navy) 15%, transparent);
	border-radius: 8px;
	padding: .35rem 2.5rem .35rem .8rem;
	background-color: var(--tv-cream);
	color: var(--tv-navy);
	font: 600 17px/normal "Outfit", sans-serif;
	transition: none;
	cursor: pointer;
}
.tv-vocab-bar .tv-vocab-bar__select:focus { border-color: color-mix(in oklab, var(--tv-navy) 15%, transparent); }
.tv-vocab-bar .tv-vocab-bar__help {
	margin: 0;
	color: rgba(14, 35, 56, .65);
	font: 400 14px/20px "Open Sans", sans-serif;
}

/* ---------------------------------------------------------------- lesson text widget
 * Paragraph spacing comes from the widget's "Avstånd mellan stycken" control. */
.elementor-widget-tv-vocab-text .tv-vocab-text > * { margin-block: 0; }
.elementor-widget-tv-vocab-text .tv-vocab-text > * + * { margin-top: var(--tv-vocab-paragraph-gap, 0); }

/* ---------------------------------------------------------------- marked words in the lesson text */
.tv-vocab-text strong,
.tv-vocab-text b,
.tv-vocab-text .tv-vocab-word {
	display: inline;
	margin: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
	color: var(--tv-vocab-word, var(--tv-steel));
	font: inherit;
	font-weight: 700;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: none;
	white-space: normal;
	text-decoration: underline dotted var(--tv-vocab-underline, var(--tv-bright)) 2px;
	text-underline-offset: .2em;
	transition: none;
	-webkit-user-select: text;
	user-select: text;
	cursor: pointer;
}
.tv-vocab-text strong.tv-vocab-plain,
.tv-vocab-text b.tv-vocab-plain {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
	cursor: auto;
}
.tv-vocab-text .tv-vocab-word:hover,
.tv-vocab-text .tv-vocab-word:focus {
	background: none;
	color: var(--tv-vocab-word, var(--tv-steel));
	text-decoration: underline dotted var(--tv-vocab-underline, var(--tv-bright)) 2px;
}
.tv-vocab-text .tv-vocab-word:focus:not(:focus-visible) { box-shadow: none; outline: none; }
.tv-vocab-text .tv-vocab-word:focus-visible {
	border-radius: 3px;
	box-shadow: none;
	outline: 2px solid var(--tv-bright);
	outline-offset: 2px;
}
.tv-vocab-wrap {
	position: relative;
	display: inline;
}

/* ---------------------------------------------------------------- tooltip */
.tv-vocab-tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + .65rem);
	z-index: 40;
	display: grid;
	width: min(17rem, 80vw);
	transform: translateX(-50%);
	border: 1px solid color-mix(in oklab, var(--tv-navy) 10%, transparent);
	border-radius: 12px;
	padding: 1rem;
	background: var(--tv-vocab-tip-bg, var(--tv-navy));
	color: var(--tv-vocab-tip-text, var(--tv-cream));
	box-shadow: 0 20px 58px color-mix(in oklab, var(--tv-navy) 10%, transparent), 0 3px 10px color-mix(in oklab, var(--tv-navy) 5%, transparent);
	font-weight: 400;
	text-align: left;
	text-decoration: none;
	white-space: normal;
}
.tv-vocab-tooltip::after {
	content: "";
	position: absolute;
	left: calc(50% - .4rem);
	top: 100%;
	border: .4rem solid transparent;
	border-top-color: var(--tv-vocab-tip-bg, var(--tv-navy));
}
.tv-vocab-tooltip > .tv-vocab-close {
	position: absolute;
	top: .5rem;
	right: .5rem;
	display: block;
	width: 15px;
	height: 15px;
	margin: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
	color: color-mix(in oklab, var(--tv-vocab-tip-text, var(--tv-cream)) 62%, transparent);
	line-height: 0;
	transition: none;
	cursor: pointer;
}
.tv-vocab-tooltip > .tv-vocab-close:hover,
.tv-vocab-tooltip > .tv-vocab-close:focus {
	background: none;
	color: color-mix(in oklab, var(--tv-vocab-tip-text, var(--tv-cream)) 62%, transparent);
}
.tv-vocab-tooltip > .tv-vocab-close svg { display: block; }
.tv-vocab-tooltip strong {
	padding-right: 1.2rem;
	color: var(--tv-vocab-tip-text, var(--tv-cream));
	font-family: "Outfit", sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	text-decoration: none;
	cursor: auto;
}
.tv-vocab-tooltip small {
	color: var(--tv-vocab-tip-accent, var(--tv-soft-gold));
	font-size: 80%;
}
.tv-vocab-tooltip > span {
	margin-top: .45rem;
	color: color-mix(in oklab, var(--tv-vocab-tip-text, var(--tv-cream)) 80%, transparent);
	font-size: .8rem;
	line-height: 1.5;
}
@media (max-width: 640px) {
	.tv-vocab-tooltip {
		position: fixed;
		left: 1rem;
		right: 1rem;
		top: 6rem;
		bottom: auto;
		width: auto;
		transform: none;
	}
	.tv-vocab-tooltip::after { display: none; }
}

/* ---------------------------------------------------------------- glossary */
.tv-vocab-glossary {
	display: grid;
	grid-template-columns: repeat(var(--tv-glossary-cols, 4), minmax(0, 1fr));
	column-gap: 2rem;
	margin: 0;
	padding: 0;
}
/* Tailwind sm: two columns from 640px, below Elementor's tablet breakpoint ("Kolumner på stor mobil"). */
@media (min-width: 640px) and (max-width: 767px) {
	.tv-vocab-glossary { grid-template-columns: repeat(var(--tv-glossary-cols-sm, 2), minmax(0, 1fr)); }
}
.tv-vocab-glossary__item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	border-bottom: 1px solid var(--tv-glossary-line, color-mix(in oklab, var(--tv-navy) 10%, transparent));
	padding-block: .85rem;
}
.tv-vocab-glossary dt,
.tv-vocab-glossary dd {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
}
.tv-vocab-glossary dt {
	color: var(--tv-navy);
	font-family: "Outfit", sans-serif;
	font-weight: 600;
}
.tv-vocab-glossary dd {
	color: rgba(14, 35, 56, .62);
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
}

/* ---------------------------------------------------------------- editor only: checks
 * Bold words that are not in the Ordlista get a red outline, and the Ordlista lists problems. */
.elementor-editor-active .tv-vocab-text .tv-vocab-plain {
	outline: 1px dashed #d63638;
	outline-offset: 2px;
}
.tv-vocab-notice {
	margin-top: 1rem;
	border: 1px solid #d63638;
	border-radius: 8px;
	padding: .75rem 1rem;
	background: #fcf0f1;
	color: #1d2327;
	font: 400 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tv-vocab-notice strong { display: block; margin-bottom: .25rem; }
.tv-vocab-notice ul { margin: 0; padding-left: 1.1rem; }