@charset "utf-8";
/**
 * FRONTEND-B02 — Header / nav / sidebar / responsive polish
 * + CORRECTIVE PASS R2 (2026-08-30): sidebar RTL icon side,
 *   menu icon via flex ::before (shared middle axis),
 *   hero inline-img gap, ticker/sidebar height reserve,
 *   rightbg shadow position restore.
 * Load AFTER fa.css + fa.polish.css (FA only).
 */

/* ------------------------------------------------------------------ */
/* Desktop top navigation — label + Home/arrow share flex middle axis */
/* ------------------------------------------------------------------ */

.topmenu {
	line-height: 1.3;
	height: 26px;
}

.topmenu > li.menuHome,
.topmenu > li.menuItem {
	height: 26px;
	min-height: 26px;
	margin-top: 2px;
	margin-bottom: 0;
	/* icons moved to a::before — kill li background glyph */
	background-image: none !important;
	text-indent: 0 !important;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.topmenu > li.menuHome > a,
.topmenu > li.menuItem > a {
	display: inline-flex;
	flex-direction: row; /* with RTL .topmenu, ::before sits on the RIGHT */
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 24px;
	padding: 0 8px;
	margin: 0;
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	vertical-align: middle;
	transition: background-color 150ms ease, color 150ms ease;
}

/* Shared vertical-middle rule for Home + separator arrows */
.topmenu > li.menuHome > a::before,
.topmenu > li.menuItem > a::before {
	content: "";
	flex: 0 0 auto;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	/* optical middle with Persian label (same flex line) */
	margin-left: 6px;
	margin-right: 0;
}

.topmenu > li.menuHome > a::before {
	width: 15px;
	height: 14px;
	background-image: url(../Images/fa/homeicon.png);
	/* Opaque glyph has pad-top 2 / pad-bottom 0 in homeicon.png — optical lift */
	transform: translateY(-1px);
}

.topmenu > li.menuItem > a::before {
	width: 6px;
	height: 5px;
	background-image: url(../Images/fa/arrow.png);
	/* Opaque glyph pad-top 1 / pad-bottom 0 */
	transform: translateY(-1px);
}

.topmenu > li.menuHome > a:hover,
.topmenu > li.menuItem > a:hover {
	background-color: rgba(255, 255, 255, 0.18);
	color: #fff;
	text-decoration: none;
}

.topmenu > li.menuHome > a:focus,
.topmenu > li.menuItem > a:focus,
.topmenu > li.menuHome > a:focus-visible,
.topmenu > li.menuItem > a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	background-color: rgba(255, 255, 255, 0.22);
}

.topmenu > li.menuHome > a.is-active,
.topmenu > li.menuItem > a.is-active {
	background-color: rgba(0, 51, 102, 0.35);
	box-shadow: inset 0 -2px 0 #fff;
}

.topmenu > li.menuHome > a > div,
.topmenu > li.menuItem > a > div {
	display: block;
	line-height: 1.2;
	text-align: center;
}

.topmenu ul {
	line-height: 1.5;
}

.topmenu ul a {
	transition: background-color 150ms ease, color 150ms ease;
}

.topmenu ul a:focus-visible {
	outline: 2px solid #036;
	outline-offset: 1px;
}

a.toglemenu {
	transition: opacity 150ms ease, color 150ms ease;
	text-decoration: none;
}

a.toglemenu:hover,
a.toglemenu:focus-visible {
	color: #e8f4ff;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Sidebar — RTL: icon on RIGHT before title; align to FIRST line     */
/* DOM order is img + text. With direction:rtl + flex-direction:row,  */
/* main-start is RIGHT → icon correctly precedes Persian title.       */
/* row-reverse was wrong here (pushed icon to the LEFT).              */
/* ------------------------------------------------------------------ */

.rightbox .title {
	height: auto;
	min-height: 35px;
	line-height: 1.45;
	padding: 8px 12px 8px 10px;
	text-indent: 0;
	box-sizing: border-box;
}

/*
 * Desktop sidebar section-header curve (matches legacy $("#roundedTL").corner("20px tr")).
 * Do not rely solely on jquery.corner: Production HTTPS blocks http:// Google jQuery CDN
 * (mixed-content) → corner never runs → square 90° edge. CSS is the durable render source.
 * Tablet/mobile keep fa.css border-radius: 18px 0 0 0 @max-width:1030.
 */
@media only screen and (min-width: 1031px) {
	.rightbox .title {
		border-top-right-radius: 20px;
	}
}

.rightbox .title img {
	margin-left: 6px;
	vertical-align: -1px;
}

.rightbox .item {
	display: flex;
	flex-direction: row; /* NOT row-reverse — item is direction:rtl */
	align-items: flex-start; /* first-line, not mid multi-line block */
	gap: 6px;
	direction: rtl;
	height: auto;
	min-height: 0;
	line-height: 1.45;
	padding: 6px 10px 6px 8px;
	text-indent: 0;
	width: auto;
	max-width: 237px;
	box-sizing: border-box;
	border-bottom: 1px dotted #666;
}

.rightbox .item img {
	flex: 0 0 auto;
	width: 8px;
	height: 7px;
	margin: 0.35em 0 0 0; /* optical first-line with Vazirmatn */
	padding: 0;
	order: 0;
}

.rightbox .item a {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
}

/* When title text is direct child (not only in <a>) */
.rightbox a.HrefTumbItemList {
	display: block;
	color: #222;
	text-decoration: none;
	transition: color 150ms ease, background-color 150ms ease;
}

.rightbox a.HrefTumbItemList:hover .item,
.rightbox .item:hover {
	background-color: rgba(0, 102, 255, 0.06);
}

.rightbox a.HrefTumbItemList:hover,
.rightbox .item a:hover {
	color: #06F;
}

.rightbox a.HrefTumbItemList:focus-visible,
.rightbox .item a:focus-visible,
.rightbox a.HrefTumbItemList:focus,
.rightbox .item a:focus {
	outline: 2px solid #036;
	outline-offset: 1px;
}

.rightmenu ul li {
	height: auto;
	min-height: 32px;
	line-height: 1.45;
	padding: 4px 0;
	box-sizing: border-box;
}

.rightmenu ul li a {
	transition: color 150ms ease;
}

.rightmenu ul li a:focus-visible {
	outline: 2px solid #036;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Hero / ticker — compact geometry + sidebar-stable ticker band       */
/* Root cause of white above hero: .slide img was inline (line-box).  */
/* Root cause of sidebar jump: ticker height:auto grew mainhead.left. */
/* ------------------------------------------------------------------ */

.main .mainhead .left {
	/* absorb reserved 2-line ticker + hero gap without pushing .container
	   (+6px matches ticker margin-top 14→20 micro bump) */
	min-height: 332px !important;
	box-sizing: border-box;
}

.slide {
	/* Shared baseline for all pages (train/official/about/contact).
	   Explicit value prevents page-to-page collapse differences. */
	margin-top: 8px;
	line-height: 0;
	font-size: 0;
}

.slide img {
	display: block; /* removes baseline gap that shifted hero down */
	width: 746px;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
}

.ticker {
	display: flex;
	flex-direction: row; /* direction:rtl → icon on RIGHT */
	align-items: flex-start;
	gap: 0;
	width: 735px;
	max-width: 100%;
	/* Fixed band height: 1-line and 2-line share the same layout footprint.
	   overflow:visible avoids clipping glyphs; does not expand document flow. */
	height: 44px;
	min-height: 44px;
	overflow: visible;
	position: relative;
	/* Clear breathing gap below hero — must not overlap slide image.
	   Micro +6px (14→20): smallest value that clears hero bottom edge. */
	margin-top: 20px;
	padding: 2px 10px 4px;
	box-sizing: border-box;
	direction: rtl;
	text-align: right;
	line-height: 1.35;
	color: #09F;
	/* Collapse literal &nbsp;&nbsp; so it does not inflate the right gutter */
	font-size: 0;
}

.ticker > img {
	position: absolute;
	top: 0.45em;
	right: 8px;
	left: auto;
	flex: none;
	width: 9px;
	height: 9px;
	margin: 0;
	padding: 0;
	z-index: 2;
	pointer-events: none;
}

#tickerAnchor,
a.MainHrefIframeTitle {
	flex: 1 1 auto;
	display: block;
	min-width: 0;
	font-size: 12.5px !important;
	line-height: 1.35 !important;
	font-family: inherit !important;
	color: #036 !important;
	text-align: right !important;
	text-decoration: none;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

/* Desktop-only typed-text vertical nudge (~5px from original accepted position). */
@media only screen and (min-width: 1031px) {
	#tickerAnchor,
	a.MainHrefIframeTitle {
		padding-top: 5px;
	}
}

#tickerAnchor .tickls {
	/* lead nbsp caused first-line-only indent — neutralize */
	display: none !important;
}

#tickerAnchor:hover,
a.MainHrefIframeTitle:hover {
	color: #930 !important;
	text-decoration: underline;
}

#tickerAnchor:focus-visible,
a.MainHrefIframeTitle:focus-visible {
	outline: 2px solid #036;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Inner page title (pathway / HrefNavigationList) — not body links   */
/* ------------------------------------------------------------------ */

.contentbox .pathway,
.contentbox > .content .pathway {
	text-align: center !important;
	margin: 0.35em 0 0.85em;
	padding: 0.25em 0.5em;
	line-height: 1.4;
}

/* Beat legacy `.contenttop * { text-align:right !important }` on mobile/desktop */
.contentbox .pathway,
.contentbox .pathway *,
.contentbox > .content .pathway,
.contentbox > .content .pathway *,
.contenttop .pathway,
.contenttop .pathway *,
tr.contenttop .pathway,
tr.contenttop .pathway *,
tr.contenttop td .pathway,
tr.contenttop td .pathway *,
#contactus-form .pathway,
#contactus-form .pathway *,
.aboutus-form .pathway,
.aboutus-form .pathway * {
	text-align: center !important;
}

.contentbox .pathway a.HrefNavigationList,
.contentbox > .content .pathway a.HrefNavigationList,
.contentbox .pathway a.HrefNavigationList:link,
.contentbox .pathway a.HrefNavigationList:visited,
.contentbox .pathway .PageTitleText {
	display: inline-block;
	font-family: "Vazirmatn", Tahoma, Geneva, sans-serif !important;
	font-size: 1.35em !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #036 !important;
	text-decoration: none !important;
	text-align: center;
	padding: 0.15em 0.4em;
}

.contentbox .pathway a.HrefNavigationList:hover,
.contentbox .pathway a.HrefNavigationList:focus-visible {
	color: #930 !important;
	text-decoration: underline !important;
}

.contentbox .pathway .UnderLine {
	font-family: "Vazirmatn", Tahoma, Geneva, sans-serif !important;
	font-size: 0.85em !important;
	color: #6B6A6B !important;
	padding: 0 0.35em;
}

/* ------------------------------------------------------------------ */
/* Main content column continuity (desktop shell)                     */
/* ------------------------------------------------------------------ */

@media only screen and (min-width: 1031px) {
	.main > .container {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		width: 965px;
	}

	.main > .container > .left {
		float: none;
		width: 761px;
		display: flex;
		flex-direction: column;
	}

	.main > .container > .right {
		float: none;
		width: 204px;
		align-self: stretch;
		min-height: 589px;
		height: auto;
		/* rightbg.jpg soft edge must hug LEFT of sidebar (content boundary).
		   Prior B02 `background-position: top` resolved to 50% 0% and
		   recentered the 235px strip, hiding the seam. */
		background-image: url(../Images/fa/rightbg.jpg);
		background-repeat: repeat-y;
		background-position: left top !important;
		background-color: #fff;
	}

	.main > .container > .left > .contentbox {
		flex: 1 1 auto;
		height: auto;
		min-height: 447px;
		width: 761px;
	}

	.main > .container > .clear {
		display: none;
	}

	.main > .container > .footer {
		flex: 0 0 100%;
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Tablet + hamburger @ 1030                                          */
/* ------------------------------------------------------------------ */

@media only screen and (max-width: 1030px) {
	.toglemenu#toglemenu,
	button.toglemenu {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 10px;
		margin: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		vertical-align: middle;
		box-sizing: border-box;
		appearance: none;
		-webkit-appearance: none;
	}

	.toglemenu#toglemenu svg,
	button.toglemenu svg {
		width: 26px;
		height: 26px;
		display: block;
		position: relative;
		z-index: 5;
		pointer-events: none;
	}

	button.toglemenu:focus-visible,
	.toglemenu#toglemenu:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
		border-radius: 4px;
	}

	button.toglemenu.open:after,
	.toglemenu#toglemenu.open:after {
		content: "";
		background: rgba(0, 0, 0, 0.35);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 4;
	}

	.topmenu {
		position: absolute;
		z-index: 6;
		width: calc(100% - 20px);
		max-width: 746px;
		background: #64b7f9;
		padding: 12px 10px 14px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		border-radius: 0 0 18px 18px;
		left: 10px;
		right: auto;
		height: auto !important;
		margin-top: 0;
		box-sizing: border-box;
		transition: opacity 160ms ease, visibility 160ms ease;
	}

	.topmenu.open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.topmenu > li.menuHome,
	.topmenu > li.menuItem {
		width: 100%;
		float: none;
		display: flex;
		margin: 0;
		height: auto;
		min-height: 44px;
		background-image: none !important;
		line-height: 1.4;
	}

	.topmenu > li.menuHome > a,
	.topmenu > li.menuItem > a {
		display: flex;
		height: auto;
		min-height: 44px;
		padding: 12px 12px 12px 12px;
		justify-content: flex-start;
		text-align: right;
		border-radius: 4px;
		box-sizing: border-box;
		width: 100%;
	}

	.ticker {
		width: auto;
		/* Mobile single-line lock lives in fa.mobile.css (overrides height:auto). */
		height: 40px;
		min-height: 40px;
		max-height: 40px;
		margin-top: 10px;
		padding: 0 4px;
		overflow: hidden;
	}

	.slide {
		margin-top: 0;
	}

	.main .mainhead .left {
		min-height: 0 !important;
	}
}

@media only screen and (max-width: 767px) {
	.topmenu > li.menuHome > a,
	.topmenu > li.menuItem > a {
		padding: 12px 28px 12px 12px;
	}

	.rightbox .item {
		max-width: none;
	}
}