/* KJ Core - two languages (inc/i18n.php). Loaded on every page: the Persian typeface and the language switch. */

/* ---------- Persian typeface ----------
   Vazirmatn is declared under the names of the site's own fonts, but only for Arabic-script letters
   (unicode-range). So wherever a rule says Raleway or Open Sans, Latin letters keep that font and Persian
   letters come from Vazirmatn - no rule of the theme or of Elementor has to be overridden, and a page with
   no Persian letter on it never downloads the file.
   Each copy must carry exactly the weight / stretch / style of a face that family already has (Raleway 700,
   Open Sans 400, Roboto and Roboto Slab 100-900): the browser only joins faces whose descriptors are the same.
   Do not add a weight the Latin family lacks - Latin text of that weight would then lose its font. */
@font-face { font-family: "Vazirmatn"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Raleway"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Open Sans"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 400; font-stretch: 100%; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 100; font-stretch: 100%; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 100; font-stretch: 100%; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 200; font-stretch: 100%; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 200; font-stretch: 100%; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 300; font-stretch: 100%; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 300; font-stretch: 100%; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 400; font-stretch: 100%; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 400; font-stretch: 100%; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 500; font-stretch: 100%; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 500; font-stretch: 100%; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 600; font-stretch: 100%; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 600; font-stretch: 100%; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 700; font-stretch: 100%; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 700; font-stretch: 100%; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 800; font-stretch: 100%; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 800; font-stretch: 100%; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 900; font-stretch: 100%; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 900; font-stretch: 100%; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto Slab"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 100; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto Slab"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 200; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto Slab"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto Slab"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto Slab"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto Slab"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto Slab"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto Slab"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Roboto Slab"; src: url(fonts/Vazirmatn-Variable.woff2) format("woff2"); font-weight: 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

/* ---------- the language switch ----------
   No words on it: a small track with a globe for a knob. The knob rests on the left while the page is English
   and on the right while it is Persian (the side each language starts from), and leans toward the other side
   under the pointer - that is where a click goes. */
.kj-lang {
	--kj-lang-w: 46px;
	--kj-lang-h: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 4px;              /* a finger-sized target around a small switch */
	line-height: 1;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
}
.kj-lang__track {
	position: relative;
	display: block;
	width: var(--kj-lang-w);
	height: var(--kj-lang-h);
	border-radius: 999px;
	background: rgba(255, 255, 255, .10);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
	transition: background .25s ease, box-shadow .25s ease;
}
.kj-lang__knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(var(--kj-lang-h) - 4px);
	height: calc(var(--kj-lang-h) - 4px);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #4175fc, #084af3);
	box-shadow: 0 2px 8px rgba(8, 74, 243, .45);
	transition: transform .32s cubic-bezier(.3, 1.3, .5, 1);
}
.kj-lang__knob svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.7;
	stroke-linecap: round;
}
.kj-lang--fa .kj-lang__knob { transform: translateX(calc(var(--kj-lang-w) - var(--kj-lang-h))); }
.kj-lang:hover .kj-lang__track,
.kj-lang:focus-visible .kj-lang__track { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.kj-lang--en:hover .kj-lang__knob,
.kj-lang--en:focus-visible .kj-lang__knob { transform: translateX(6px); }
.kj-lang--fa:hover .kj-lang__knob,
.kj-lang--fa:focus-visible .kj-lang__knob { transform: translateX(calc(var(--kj-lang-w) - var(--kj-lang-h) - 6px)); }
.kj-lang:focus-visible { outline: 2px solid #4175fc; outline-offset: 2px; border-radius: 999px; }

/* In the menu bar: after the last item, with a little air. Astra's hover underline and paddings do not apply. */
.main-header-menu > .kj-lang-item { display: flex; align-items: center; margin-left: 14px; }
.main-header-menu > .kj-lang-item::before,
.main-header-menu > .kj-lang-item::after { content: none !important; }
/* Beside the phone menu button. */
.kj-lang--phone { margin-right: 6px; }
/* Astra prints the bar menu inside the phone header on some widths; the switch is already beside the button there. */
#ast-mobile-header .kj-lang-item { display: none; }

@media (prefers-reduced-motion: reduce) {
	.kj-lang__knob, .kj-lang__track { transition: none; }
}