/*
 * NUIT - Jezik stripa: language selector next to the strip.
 * px units, no !important (except the screen reader helper): two-ID selectors (#top #main, #top #nuit-jezik-sheet)
 * win over Enfold. The panel sits under the button on wider screens and becomes a bottom sheet below 768 px.
 */

/* size-adjust brings each script to about the height of the Latin text (measured at 14px).
   Historic scripts for own names (𒀝𒅗𒁺𒌑, ⱈⱃⰲⰰⱅⱄⰽⰻ …): Noto fonts cut down to the characters used, see fonts/fonts.txt.
   unicode-range means a file is downloaded only when its script appears, i.e. when the list is opened. */
@font-face {
	font-family: "NUIT Jezik Scripts";
	src: url("fonts/noto-cuneiform.woff") format("woff");
	font-display: swap;
	size-adjust: 84%;
	unicode-range: U+12000-1254F;
}
@font-face {
	font-family: "NUIT Jezik Scripts";
	src: url("fonts/noto-egyptian.woff") format("woff");
	font-display: swap;
	size-adjust: 68%;
	unicode-range: U+13000-1345F;
}
@font-face {
	font-family: "NUIT Jezik Scripts";
	src: url("fonts/noto-linear-a.woff") format("woff");
	font-display: swap;
	size-adjust: 84%;
	unicode-range: U+10600-1077F;
}
@font-face {
	font-family: "NUIT Jezik Scripts";
	src: url("fonts/noto-linear-b.woff") format("woff");
	font-display: swap;
	size-adjust: 88%;
	unicode-range: U+10000-100FF;
}
@font-face {
	font-family: "NUIT Jezik Scripts";
	src: url("fonts/noto-cypriot.woff") format("woff");
	font-display: swap;
	size-adjust: 97%;
	unicode-range: U+10800-1083F;
}
@font-face {
	font-family: "NUIT Jezik Scripts";
	src: url("fonts/noto-runic.woff") format("woff");
	font-display: swap;
	size-adjust: 100%;
	unicode-range: U+16A0-16FF;
}
@font-face {
	font-family: "NUIT Jezik Scripts";
	src: url("fonts/noto-gothic.woff") format("woff");
	font-display: swap;
	size-adjust: 88%;
	unicode-range: U+10330-1034F;
}
@font-face {
	font-family: "NUIT Jezik Scripts";
	src: url("fonts/noto-glagolitic.woff") format("woff");
	font-display: swap;
	size-adjust: 125%;
	unicode-range: U+2C00-2C5F;
}
@font-face {
	font-family: "NUIT Jezik Scripts";
	src: url("fonts/piqad-hasta.woff") format("woff");
	font-display: swap;
	size-adjust: 88%;
	unicode-range: U+F8D0-F8FF;
}
#top .nuit-jezik-native,
#top .nuit-jezik-own,
#top .nuit-jezik-current {
	font-family: "NUIT Jezik Scripts", source-sans-pro, Helvetica, Arial, sans-serif;
}

#top #main .nuit-jezik {
	position: relative;
	margin: -14px 0 0; /* the row sits in Enfold's empty space under the header; the strip has its own white margin */
	scroll-margin-top: 90px;
	font-size: 13px;
	line-height: 1.4;
	color: #222;
}
#top #main .nuit-jezik-row {
	position: relative;
	top: -6px; /* lifts only the button; the strip below keeps its place */
	display: flex;
	flex-wrap: nowrap; /* one line; a long language name is shortened instead of wrapping */
	justify-content: flex-end;
	align-items: center;
	gap: 8px 10px;
	min-height: 32px;
}
#top .nuit-jezik-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* colours: quiet grey chip; with a translation shown it is white next to a grey "Croatian original" part; hover is black with white text */
#top #main .nuit-jezik,
#top #nuit-jezik-sheet {
	--np-bg: #f8f8f8; --np-fg: #444; --np-border: 1px solid #ececec; --np-shadow: none;
	--np-on-bg: #fff; --np-on-fg: #111; --np-on-border: 1px solid #222;
	--np-badge-bg: transparent; --np-badge-fg: #999;
	--np-panel-border: 1px solid #e1e1e1; --np-panel-shadow: 0 14px 40px rgba(0, 0, 0, .2);
}

/* button */
#top #main .nuit-jezik-pill,
#top #main .nuit-jezik-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	height: 32px;
	margin: 0;
	padding: 0 11px 0 9px;
	border: var(--np-border);
	border-radius: 999px;
	background: var(--np-bg);
	color: var(--np-fg);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	font-family: inherit;
	text-transform: none;
	text-decoration: none;
	letter-spacing: 0;
	box-shadow: var(--np-shadow);
	cursor: pointer;
	/* Enfold's standard fade (transition: all .3s ease-out), limited to colours so sizes never animate */
	transition: background-color .3s ease-out, border-color .3s ease-out, color .3s ease-out;
}
#top #main .nuit-jezik-back {
	justify-content: center;
	width: auto;
	height: 32px;
	padding: 0 12px 0 9px;
	gap: 6px;
	border: 1px solid #d5d5d5;
	border-right: 0;
	border-radius: 999px 0 0 999px;
	font-weight: 600;
	font-size: 12px;
	white-space: nowrap;
	background: #f8f8f8;
	color: #444;
}
/* joined to the "Croatian original" part while a translation is shown; the chip alone stays a full pill */
#top #main .nuit-jezik-back:not([hidden]) + .nuit-jezik-pill { margin-left: -10px; border-radius: 0 999px 999px 0; }
#top #main .nuit-jezik-pill:disabled { cursor: default; }
#top #main .nuit-jezik-pill.is-on { border-color: #d5d5d5; background: #fff; color: #111; font-weight: 700; }
#top #main .nuit-jezik-pill[aria-expanded="true"] { border-color: #222; }
/* hover last, so it wins over every state: black with white text */
#top #main .nuit-jezik-pill:hover:not(:disabled),
#top #main .nuit-jezik-back:hover { background: #000; border-color: #000; color: #fff; }
#top #main .nuit-jezik-pill:hover .nuit-jezik-badge { color: #ccc; }
/* line-height above 1: with overflow hidden a line box of 1 cuts the descenders (g, j, y, p) */
#top #main .nuit-jezik-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
#top #main .nuit-jezik-badge {
	padding: 3px 6px;
	border-radius: 999px;
	background: var(--np-badge-bg);
	color: var(--np-badge-fg);
	font-size: 11px;
	font-weight: 700;
}
#top #main .nuit-jezik-globe,
#top #main .nuit-jezik-chevron { flex: none; display: block; }
#top #main .nuit-jezik-spin {
	display: none;
	flex: none;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: nuit-jezik-spin .7s linear infinite;
}
#top #main .nuit-jezik.is-busy .nuit-jezik-spin { display: inline-block; }
#top #main .nuit-jezik.is-busy .nuit-jezik-globe { display: none; }
@keyframes nuit-jezik-spin { to { transform: rotate(360deg); } }
#top #main .nuit-jezik-flash { margin-right: auto; color: #d63e2d; font-size: 12.5px; }

/* toggle for 1–3 translations */
#top #main .nuit-jezik-toggle {
	display: inline-flex;
	padding: 2px;
	border: 1px solid #000;
	border-radius: 999px;
	background: #fff;
}
#top #main .nuit-jezik-toggle button {
	margin: 0;
	padding: 7px 13px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #000;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	font-family: "NUIT Jezik Scripts", source-sans-pro, Helvetica, Arial, sans-serif;
	cursor: pointer;
}
#top #main .nuit-jezik-toggle button[aria-pressed="true"] { background: #222; color: #fff; }

/* panel: under the button */
#top .nuit-jezik-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	width: 340px;
	max-width: 100%;
	max-height: 440px;
	border: var(--np-panel-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--np-panel-shadow);
	color: #222;
	text-align: left;
}
#top .nuit-jezik-panel[hidden] { display: none; }
#top .nuit-jezik-head { display: none; }
#top .nuit-jezik-search { padding: 10px 12px; border-bottom: 1px solid #e1e1e1; }
#top #main .nuit-jezik-search input,
#top #nuit-jezik-sheet .nuit-jezik-search input {
	width: 100%;
	margin: 0;
	padding: 6px 2px;
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	color: #222;
	font-family: inherit;
	font-size: 15px;
}
#top .nuit-jezik-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	border-bottom: 1px solid #e1e1e1;
}
#top #main .nuit-jezik-quick button,
#top #nuit-jezik-sheet .nuit-jezik-quick button {
	margin: 0;
	padding: 5px 10px;
	border: 1px solid #e1e1e1;
	border-radius: 999px;
	background: #f8f8f8;
	color: #444;
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.2;
	font-family: "NUIT Jezik Scripts", source-sans-pro, Helvetica, Arial, sans-serif;
	cursor: pointer;
}
#top #main .nuit-jezik-quick button[aria-pressed="true"],
#top #nuit-jezik-sheet .nuit-jezik-quick button[aria-pressed="true"] { border: var(--np-on-border); background: var(--np-on-bg); color: var(--np-on-fg); }
#top #main .nuit-jezik-list,
#top #nuit-jezik-sheet .nuit-jezik-list {
	position: relative;
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 2px 0 8px;
	overflow: auto;
	overscroll-behavior: contain;
	list-style: none;
}
#top #main .nuit-jezik-group,
#top #nuit-jezik-sheet .nuit-jezik-group {
	margin: 0;
	padding: 14px 14px 6px;
	color: #d63e2d;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	list-style: none;
}
#top #main .nuit-jezik-opt,
#top #nuit-jezik-sheet .nuit-jezik-opt {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding: 7px 14px;
	font-size: 14px;
	list-style: none;
	cursor: pointer;
}
#top .nuit-jezik-opt[hidden],
#top .nuit-jezik-group[hidden],
#top .nuit-jezik-quick[hidden],
#top .nuit-jezik-empty[hidden],
#top .nuit-jezik-flash[hidden],
#top .nuit-jezik-back[hidden] { display: none; }
#top .nuit-jezik-opt:hover { background: #f6f6f6; }
#top .nuit-jezik-opt.is-active { background: #eee; }
#top .nuit-jezik-opt[aria-selected="true"] > span:first-child { font-weight: 700; }
#top .nuit-jezik-opt[aria-selected="true"] > span:first-child::after { content: " ✓"; color: #d63e2d; }
#top .nuit-jezik-opt > span:first-child { flex: 0 0 auto; white-space: nowrap; }
#top .nuit-jezik-native {
	line-height: 1.4;
	flex: 1 1 auto;
	text-align: right;
	min-width: 0;
	overflow: hidden;
	color: #8e8e8e;
	font-size: inherit;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#top .nuit-jezik-empty { margin: 0; padding: 16px 14px; color: #8e8e8e; font-size: 14px; }

/* panel: bottom sheet on phones */
#top #nuit-jezik-sheet {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: rgba(0, 0, 0, .38);
}
#top #nuit-jezik-sheet[hidden] { display: none; }
#top #nuit-jezik-sheet .nuit-jezik-panel {
	position: static;
	width: 100%;
	max-width: none;
	height: 80%;
	max-height: none;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	border: 0;
	border-radius: 18px 18px 0 0;
}
#top #nuit-jezik-sheet .nuit-jezik-head {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 16px 8px;
	font-size: 15px;
}
#top #nuit-jezik-sheet .nuit-jezik-head { touch-action: none; cursor: grab; }
#top #nuit-jezik-sheet .nuit-jezik-grab {
	position: absolute;
	top: 7px;
	left: 50%;
	width: 38px;
	height: 4px;
	margin-left: -19px;
	border-radius: 2px;
	background: #d5d5d5;
}
#top #nuit-jezik-sheet:not([hidden]) .nuit-jezik-panel { animation: nuit-jezik-up .22s ease-out; }
@keyframes nuit-jezik-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
	#top #nuit-jezik-sheet:not([hidden]) .nuit-jezik-panel { animation: none; }
}
#top #nuit-jezik-sheet .nuit-jezik-close {
	margin: 0;
	padding: 6px 2px;
	border: 0;
	background: none;
	color: #d63e2d;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	font-family: inherit;
	cursor: pointer;
}
#top #nuit-jezik-sheet .nuit-jezik-opt { padding: 12px 16px; font-size: 15px; }
#top #nuit-jezik-sheet .nuit-jezik-quick button { padding: 9px 13px; font-size: 13.5px; }
html.nuit-jezik-locked { overflow: hidden; }

/* loading line on the strip */
#top .nuit-jezik-holder { position: relative; }
#top .nuit-jezik-progress {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 0;
	height: 3px;
	background: #d63e2d;
	pointer-events: none;
}
#top .nuit-jezik-holder.is-loading .nuit-jezik-progress { animation: nuit-jezik-progress 1.2s ease-out forwards; }
#top .nuit-jezik-holder.is-loading img { opacity: .6; transition: opacity .15s; }
@keyframes nuit-jezik-progress { from { width: 0; } to { width: 90%; } }

/* focus */
#top .nuit-jezik button:focus-visible,
#top #nuit-jezik-sheet button:focus-visible,
#top .nuit-jezik-panel:focus-visible { outline: 2px solid #d63e2d; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	#top #main .nuit-jezik-spin { animation: none; border-right-color: currentColor; opacity: .5; }
	#top .nuit-jezik-holder.is-loading .nuit-jezik-progress { animation: none; width: 90%; }
	#top .nuit-jezik-holder.is-loading img { transition: none; }
	#top #main .nuit-jezik-pill, #top #main .nuit-jezik-back { transition: none; }
}

#top .nuit-jezik-count { margin-left: 4px; color: #b5b5b5; font-weight: 600; letter-spacing: 0; }

/* hidden wins over the display values above (same two IDs plus the attribute) */
#top #main .nuit-jezik [hidden],
#top #nuit-jezik-sheet [hidden] { display: none; }

/* group heading: Croatian in red, English in grey */
#top .nuit-jezik-group-en { color: #9a9a9a; }

/* code-like own names: binary, COBOL, Morse */
#top .nuit-jezik-own.is-mono,
#top .nuit-jezik-native.is-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .93em; } /* monospace looks wider */

/* Bosančica: own family only for that name, so Russian, Bulgarian and Serbian keep normal Cyrillic */
@font-face {
	font-family: "NUIT Jezik Bosancica";
	src: url("fonts/bosancica-arvatica.woff") format("woff");
	font-display: swap;
}
#top #main .nuit-jezik-toggle button[lang="hr-x-bosancic"],
#top .nuit-jezik-native[lang="hr-x-bosancic"],
#top .nuit-jezik-own[lang="hr-x-bosancic"],
#top #main .nuit-jezik-quick button[lang="hr-x-bosancic"],
#top #nuit-jezik-sheet .nuit-jezik-quick button[lang="hr-x-bosancic"] {
	font-family: "NUIT Jezik Bosancica", source-sans-pro, Helvetica, Arial, sans-serif;
}


/* narrower columns before the phone layout: a smaller button */
@media (max-width: 1100px) {
	#top #main .nuit-jezik-pill { height: 30px; padding: 0 9px 0 8px; gap: 6px; font-size: 12px; }
	#top #main .nuit-jezik-back { height: 30px; font-size: 12px; }
	#top #main .nuit-jezik-badge { padding: 2px 5px; font-size: 10px; }
	#top #main .nuit-jezik-row { min-height: 30px; }
}

/* the return button says "Croatian original"; on phones the short word is enough */
#top .nuit-jezik-back-short { display: none; }
@media (max-width: 767px) {
	#top #main .nuit-jezik-row { top: -14px; } /* more air between the button and the strip on phones */
	#top .nuit-jezik-back-long { display: none; }
	#top .nuit-jezik-back-short { display: inline; }
}

/* the button never wraps: it may shrink, the back part keeps its size */
#top #main .nuit-jezik-pill { flex: 0 1 auto; min-width: 0; }
#top #main .nuit-jezik-back { flex: none; }
#top #main .nuit-jezik-pill.is-short .nuit-jezik-sep,
#top #main .nuit-jezik-pill.is-short .nuit-jezik-own { display: none; }