/**
 * Header nav-tools: language link (English <-> Bangla /bn/ page), search
 * overlay trigger and mobile-menu icon shown to the right of the main
 * navigation.
 *
 * @package Perview
 */

/*==========================
    NAV TOOLS GROUP
============================*/

.nav-tools {
	display: flex;
	align-items: center;
	margin-left: 20px;
}

.nav-tools .nav-tool-btn,
.nav-tools .navbar-toggler {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: 0;
	padding: 0 !important;
	margin-left: 20px;
	color: rgba(0, 0, 0, 0.55);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.nav-tools .nav-tool-btn:first-child {
	margin-left: 0;
}

.nav-tools .nav-tool-btn:hover,
.nav-tools .nav-tool-btn:focus,
.nav-tools .navbar-toggler:hover,
.nav-tools .navbar-toggler:focus {
	color: #1cbf73;
	outline: none;
	box-shadow: none;
}

/* Language link (globe icon + বাংলা / English label) -- plain, no pill
 * background, matching the other icon buttons in the group. It is a real
 * <a href> (to the /bn/ version of the page and back), so it also needs the
 * link resets below. */
.nav-lang-toggle {
	background-color: transparent !important;
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.55) !important;
	text-decoration: none !important;
}

.nav-lang-toggle:hover,
.nav-lang-toggle:focus {
	color: #1cbf73 !important;
	text-decoration: none !important;
}

.nav-lang-toggle .fa-globe {
	font-size: 15px;
	margin-right: 6px;
	color: inherit;
}

.nav-lang-toggle.lang-active,
.nav-lang-toggle.lang-active .fa-globe {
	color: #1cbf73 !important;
}

.nav-lang-text {
	white-space: nowrap;
}

/* The mobile toggler is reused as the third icon; it should stay visible at
 * every breakpoint, overriding Bootstrap's .navbar-expand-lg rule that
 * hides it at >=992px. */
.custom-nav .nav-tools .navbar-toggler {
	color: rgba(0, 0, 0, 0.55);
	font-size: 19px;
}

.custom-nav.stickyadd .nav-tools .nav-tool-btn,
.custom-nav.stickyadd .nav-tools .navbar-toggler {
	color: rgba(0, 0, 0, 0.55);
}

@media (max-width: 991.98px) {
	.nav-tools {
		margin-left: auto;
	}

	.nav-tools .nav-tool-btn,
	.nav-tools .navbar-toggler {
		margin-left: 18px;
	}
}

@media (max-width: 420px) {
	.nav-lang-toggle .nav-lang-text {
		display: none;
	}

	.nav-lang-toggle .fa-globe {
		margin-right: 0;
	}

	.nav-tools .nav-tool-btn,
	.nav-tools .navbar-toggler {
		margin-left: 14px;
	}
}

/*==========================
    SEARCH OVERLAY
============================*/

.perview-search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.98);
	z-index: 1080;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-15px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.perview-search-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.perview-search-inner {
	width: 100%;
	max-width: 600px;
	padding: 0 20px;
}

.perview-search-inner .search-form {
	display: flex;
	align-items: center;
	border-bottom: 2px solid #212529;
	padding-bottom: 12px;
}

.perview-search-inner .search-form label {
	flex: 1 1 auto;
	margin-bottom: 0;
}

.perview-search-inner .search-field {
	width: 100%;
	border: 0;
	outline: none;
	font-size: 26px;
	padding: 6px 0;
	background: transparent;
}

.perview-search-inner .search-submit {
	background: transparent;
	border: 0;
	font-size: 22px;
	color: #212529;
	cursor: pointer;
	padding: 0 0 0 15px;
}

.perview-search-inner .search-submit:hover {
	color: #1cbf73;
}

.perview-search-close {
	position: absolute;
	top: 30px;
	right: 30px;
	background: transparent;
	border: 0;
	font-size: 26px;
	color: #212529;
	cursor: pointer;
}

.perview-search-close:hover {
	color: #1cbf73;
}

body.perview-search-open {
	overflow: hidden;
}

/*==========================
    BANGLA VERSION (/bn/ pages)
============================*/

/* Bangla web font (enqueued by functions.php on /bn/ pages only). The
 * theme's English fonts have no Bangla letters. */
body.lang-bn,
body.lang-bn h1,
body.lang-bn h2,
body.lang-bn h3,
body.lang-bn h4,
body.lang-bn h5,
body.lang-bn h6,
body.lang-bn .h1,
body.lang-bn .h2,
body.lang-bn .h3,
body.lang-bn .h4,
body.lang-bn .h5,
body.lang-bn .h6 {
	font-family: 'Hind Siliguri', 'Noto Sans Bengali', 'Nirmala UI', 'Nunito', sans-serif;
}

/* The Google Translate widget itself stays hidden off-screen (it only exists
 * on /bn/ pages); it translates the page without the default banner, gadget
 * or any layout shift. */
.perview-google-translate,
.perview-google-translate * {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	visibility: hidden !important;
}

/* Google injects an inline "top" offset on <html>/<body> to make room for
 * its banner -- force it back to 0 so the page never shifts down. */
html,
body {
	top: 0 !important;
}

/* Hide EVERY trace of Google Translate's own interface, so nothing on the
 * page shows that it was translated by a machine:
 *  - the little spinning Google-Translate logo that appears at the left edge
 *    of the screen while (and after) translating,
 *  - the top banner iframe,
 *  - the "Original text" pop-up with the Google logo that appears when the
 *    mouse is over a translated sentence, and the blue highlight box.
 * Google renames these classes from time to time, hence the prefix selectors
 * for its current ("VIpgJd-") and old ("goog-") class names. */
[class^="VIpgJd-"],
[class*=" VIpgJd-"],
[class^="goog-te-"],
[class*=" goog-te-"],
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-balloon-frame,
.goog-te-spinner-pos,
.goog-logo-link,
.goog-tooltip,
.goog-tooltip:hover,
#goog-gt-tt,
body > .skiptranslate,
.skiptranslate > iframe {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	box-shadow: none !important;
	pointer-events: none !important;
}

.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}

/* Google wraps every translated phrase in <font>; keep it invisible to the
 * design (same look as the surrounding text). */
font {
	vertical-align: inherit;
}

/* While the automatic translation is still loading, the page is kept
 * invisible for a moment and then faded in already in Bangla, so visitors
 * never watch English turn into Bangla. (The class is added by the small
 * script in <head> and always removed after 3.5 s at the latest.) */
html[lang="bn"] body {
	transition: opacity 0.35s ease;
}

html.perview-translating body {
	opacity: 0;
}