/**
 * file: litbu.css
 * @since 2024-03-20
 */

/*
Mobile S: 320px
Mobile M: 375px
Mobile L: 425px
Tablet: 768px <- breakpoint
Laptop: 1024px
Laptop L: 1440px
4K: 2560px
*/


/*
	Lit-Book: Variables (OLD)
*/
:root {
	--width-right-column: 312px;

	--color-green-light: #9ad37a;
	--color-green: #70c041;
	--color-green-dark: #71c244;
	--color-black: #444;
	--color-black2: #242424;
	--color-red: #ec5d57;
	--color-red-light: #ff5750;/* hover */
	--color-white: #fefefd;
	--color-grey: #f0f0f0;

	--color-background-light: var(--color-white);
	--color-background-dark: var(--color-green-light);
	--color-background-dark-hover: var(--color-green);

	--color-border: var(--color-grey);

	--color-text: var(--color-black);
	--color-text-on-dark: var(--color-black2);

	/*--media-sm: max-width: 599px;/* mobile *__/
	--media-md: min-width: 600px;/* tablet *__/
	--media-lg: min-width: 1024px;/* desktop */
}


/*
	LitBu: Variables
*/
:root {
	--media-md: 768px;/* Table & Desktop */
	--media-lg: 992px;/* Desktop */

	--width-page: 1224px;
	--width-padding: 24px;
	--width-column: calc((100% + 24px)/4 - 24px);
	--width-main: calc((100% + 24px)/4*3 - 24px);
	--width-center: calc((100% + 24px)/4*2 - 24px);

	--clr-green: #77c33d;
	--clr-red: #e15d5a;
	--clr-black: #434343;
	--clr-white: #ffffff;

	--clr-green-darker: #69a938;
	--clr-green-dark: #51a014;
	--clr-red-darker: #c94d4a;
	--clr-red-dark: #b81815;
	--clr-white-darker: #f6f8fb;
	--clr-white-dark: #eaeaea;
	--clr-black-dark: #000;

	--rgb-white: 255, 255, 255;
	--rgb-green-dark: 81, 160, 20;
	--rgb-red-darker: 201, 77, 74;
	--rgb-text-lighter: 131, 131, 131;

	--clr-text: var(--clr-black);
	--clr-text-lighter: #838383;
	--clr-text-light: #d4d4d4;
	--clr-text-green: var(--clr-green-dark);
	--clr-text-red: var(--clr-red-darker);

	--clr-border: #eeeeee;
	--clr-border-dark: #626262;

	--clr-background-dark: var(--clr-text-light);
	--clr-background: var(--clr-white-darker);
	--clr-background-white: var(--clr-white);

	--margin-12x: 48px;
	--margin-8x: 32px;
	--margin-6x: 24px;
	--margin-4x: 16px;
	--margin-3x: 12px;
	--margin-2x: 8px;
	--margin-1x: 4px;
}


/*
	LitBu: Fonts
*/
:root {
	--fnt-system-ui: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	--fnt-manrope: 'Manrope';
	--fnt-bold: 700;
	--fnt-semibold: 600;
	--fnt-regular: 400;

	/* Текст: small */
	--font-size--small: 13px;
	--line-height--small: 18px;

	/* Текст: smaller */
	--font-size--smaller: 14px;
	--line-height--smaller: 21px;

	--font-size: 15px;
	--line-height: 24px;

	--font-size--block-head: 17px;
	--line-height--block-head: 26px;

	--font-size--menu: 16px;
	--line-height--menu: 22px;

	--font-size--btn: 16px;
	--line-height--btn: 40px;

	--margin-side: 12px;/* margin с боков  */
}


@font-face {
	font-family: 'Manrope';
	src: url('/templates/litbu/fonts/Manrope-Regular.woff2') format('woff2'),
		url('/templates/litbu/fonts/Manrope-Regular.woff') format('woff');
	/*font-weight: var(--fnt-regular)*/;
	font-weight: 400;
	font-style: bold;
	font-display: swap;
}
@font-face {
	font-family: 'Manrope';
	src: url('/templates/litbu/fonts/Manrope-SemiBold.woff2') format('woff2'),
		url('/templates/litbu/fonts/Manrope-SemiBold.woff') format('woff');
	/*font-weight: var(--fnt-semibold);*/
	font-weight: 600;
	font-style: bold;
	font-display: swap;
}
@font-face {
	font-family: 'Manrope';
	src: url('/templates/litbu/fonts/Manrope-Bold.woff2') format('woff2'),
		url('/templates/litbu/fonts/Manrope-Bold.woff') format('woff');
	font-weight: 700;
	font-style: bold;
	font-display: swap;
}



/*
	LitBu: Site Styles
*/


body {
	font-weight: var(--fnt-regular);
	font-family: var(--fnt-manrope), var(--fnt-system-ui);
	color: var(--clr-black);
	font-size: 15px;
	line-height: 1.6;
	background-color: var(--clr-background);
}

/* Заголовки */
h1,h2,h3,h4,.h1,.h2,.h3,.h4 {
	font-weight: var(--fnt-semibold);
}
h1, .h1 {/* Mobile only  */
	font-size: 24px;
	line-height: 32px;
}
h2, .h2 {
	font-size: 26px;
	line-height: 40px;
}
h3, .h3 {
	font-size: 18px;
	line-height: 27px;
}
h4, .h4 {
	font-size: 16px;
	line-height: 24px;
}
h5,h6,.h5,.h6 {
	font-weight: var(--fnt-regular);
}
h5, .h5 {
	font-size: 15px;
	line-height: 18px;
}
h6, .h6 {
	font-size: 13px;
	line-height: 18px;
}
/* Tablet & Desktop  */
@media (min-width: 768px) {
	h1, .h1 {
		font-size: 36px;
		line-height: 40px;
	}
}



/* Типографика */
p, dl, dd, pre, ul, ol,
blockquote, table, fieldset {
	margin-bottom: var(--margin-2x);
}
p:last-child {
	margin-bottom: 0;	
}
p + br {
	display: block;
	margin-bottom: 16px;
}

/* Ссылки */
a {}
a:link {
	color: var(--clr-text-green);
	text-decoration: none;
}
a:visited {
	color: var(--clr-text-green);
}
a:focus {}
a:hover {
	color: var(--clr-text-red);
}
a:active {}
.content a:not(.btn):not(.link--img):link,
/* .content.link--img:link .link--text,*/
a.link--text:link,
a:link .link--text {
	border-bottom: 1px solid rgb(var(--rgb-green-dark), .25);
}
.comment .meta a:link {
	border-bottom: none;
}
.content a:not(.btn):not(.link--img):hover,
/*.content .link--img:hover .link--text,*/
a.link--text:hover,
a:hover .link--text {
	border-color: rgb(var(--rgb-red-darker), .5);
}
.content a[data-class="link--img"]:link,
.content a.link--img:link {
	border-bottom-style: none;
}
[data-class="link--img"],
.link--img {
	display: inline-block;
}
/*[data-class="link--img"]:not(.highslide):hover,*/
.link--img:not(.highslide):hover {
	opacity: .85;
}
[data-class="link--img"] img,
.link--img img {
	vertical-align: top;
}
.quite-links a:not(.link--clean):link,
.quite-links a:not(.link--clean):visited {
	color: currentColor;
}
.quite-links a:not(.link--clean):hover {
	color: var(--clr-text-red);
}


/* Формы  */
input[type="text"],
input[type="search"] {
	font-weight: var(--fnt-regular);
	font-family: var(--fnt-manrope), var(--fnt-system-ui);
	color: var(--clr-black);
	font-size: 15px;
	line-height: 1.6;
	border: 1px solid var(--clr-border);
	box-sizing: border-box;
	border-radius: 6px;
	padding: 7px 16px;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="text"]:hover,
input[type="search"]:hover,
input[type="text"]:active,
input[type="search"]:active {
	border-color: var(--clr-border-dark);
}

/* Формы: Кнопки  */
/*.btn, .bbcodes {
	border: 0 none;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	height: 32px;
	border-radius: 15px;
	line-height: 32px;
	outline: none;
	color: rgba(51, 51, 51, 1) !important;
	padding: 0 15px;
	text-decoration: none !important;

	background-color: rgba(113, 194, 68, 1);/*#95c00e;*__/
	box-sizing: border-box;
	font-size: 14px;
}*/
/** overwrite `engine.css` */
input[type="submit"],
.btn {
	text-shadow: none;
	box-shadow: none;
	transition: all ease-out .15s;
}
	input[type="button"],
	input[type="submit"],
	button,
	.btn, .btn:link {
		padding: 0 40px;
		appearance: none;
		color: var(--clr-white);
		font-weight: var(--fnt-semibold);
		font-size: var(--font-size--btn);
		line-height: var(--line-height--btn);
		background-color: var(--clr-green);
		border: 0 none;
		border-radius: 8px;
	}
	.btn:visited {
		color: var(--clr-white);
	}
	input[type="button"]:focus,
	input[type="button"]:hover,
	input[type="submit"]:focus,
	input[type="submit"]:hover,
	button:focus,
	button:hover,
	.btn:focus,
	.btn:hover {
		background-color: var(--clr-green-darker);
	}
	input[type="button"]:active,
	input[type="submit"]:active,
	button:active,
	.btn:active {
		background-color: var(--clr-green-dark);
	}
	.btn {
		display: inline-block;
	}
	input[type="button"].btn--primary,
	input[type="submit"].btn--primary,
	button.btn--primary,
	.btn.btn--primary, .btn.btn--primary:link {
		background-color: var(--clr-red);
	}
	input[type="button"].btn--primary:focus,
	input[type="button"].btn--primary:hover,
	input[type="submit"].btn--primary:focus,
	input[type="submit"].btn--primary:hover,
	button.btn--primary:focus,
	button.btn--primary:hover,
	.btn.btn--primary:focus,
	.btn.btn--primary:hover {
		background-color: var(--clr-red-darker);
	}
	.btn--small,
	.btn--small:link {
		line-height: 32px;
		padding: 0 16px 2px;
	}
	input[type="button"].btn--rounded,
	input[type="submit"].btn--rounded,
	button.btn--rounded,
	.btn.btn--rounded, .btn.btn--rounded:link {
		padding: 0 16px 2px;/* верт.-выравнивание по центру */
		line-height: 32px;
		border-radius: 34px;
	}
	.ui-button { padding: 4px 12px; height: 30px; font-size: 11px; margin: 2px; }
	/*.btn:hover, */.bbcodes:hover, .ui-button:hover {
		filter: saturate(1.25);
	}
	/*.btn:active, */.bbcodes:active, .ui-button:active {
		color: rgb(0, 0, 0);
		box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14); -webkit-box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14);
	}
	.btn > .icon { fill: #fff; }


/*
	Litbu: Global
*/

/* Блок */
.block {
	margin: 0 var(--margin-side);
	margin-bottom: 8px;/* Mobile */
}
/* Tablet & Desktop */
@media (min-width: 768px) {
	.block {
		margin-bottom: 16px;
	}
}

/* Mobile only */
@media (max-width: 767px) {
	.sm-hidden {
		display: none;
	}
}
/* Tablet & Desktop */
@media (min-width: 768px) {
	.md-hidden {
		display: none;
	}
}


/*
	LitBu: Layout
*/

.body {
	overflow: hidden;
	padding-left: 48px;
	position: relative;
}
	/* Хлебные крошки */
	.breadcrumbs {
		margin-top: 6px;
		margin-bottom: 20px;
		font-size: var(--font-size--small);
		line-height: var(--line-height--small);
		color: var(--clr-text-lighter);
	}
		.breadcrumbs a {}
		.breadcrumbs a:link,
		.breadcrumbs a:visited {
			color: var(--clr-text-lighter);
			border-bottom: 1px solid rgb(var(--rgb-text-lighter), .25);
		}
		.breadcrumbs a:link {
			/*text-decoration: none;*/
		}
		.breadcrumbs a:focus {}
		.breadcrumbs a:hover {
			border-color: rgb(var(--rgb-red-darker), .5);
			color: var(--clr-text-red);
		}
		.breadcrumbs a:active {}


	#body_left {
		width: 48px;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		border-right: 1px solid #f0f0f0;
	}
	.body_right { width: 100%; }

	.structure {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
		.rightside-menu {
			order: 1;
			margin-bottom: var(--margin-6x);
		}
		.rightside-menu.block--collapsed {
			margin-bottom: var(--margin-3x);
		}
		.str_left {
			order: 2;
		}
		.str_right {
			order: 3;
		}

/*--- времено, пока есть боковой toolbar ---begin-*/
.site-header {
	margin-top: 48px;
}
/*--- времено, пока есть боковой toolbar ---end-*/

/* Tablet & Desktop */
@media (min-width: 768px) {
	/*--- времено, пока есть боковой toolbar ---begin-*/
	#body_left #header {
		padding-top: 58px;
	}
	.site-header {
		margin-top: 0;
	}
	/*--- времено, пока есть боковой toolbar ---end-*/

	.structure {
		display: grid;
		grid-template:  "m g"
						"m p";
		grid-template-columns: 3fr 1fr;
		grid-template-rows: auto 1fr;
		width: auto;
	}
		.str_left {
			grid-area: m;
		}
		.rightside-menu {
			grid-area: g;
			margin-top: 44px;
		}
		.str_right {
			grid-area: p;
		}
}

/* Хлебные крошки */
#breadcrumbs1 {
	margin-top: 8px;
	margin-bottom: 4px;
}
@media (min-width: 768px) {
	#breadcrumbs1 {
		margin-top: 12px;
		margin-bottom: -12px;
	}
}

/*
	LitBu: Layout: Header
*/
/*--- Шапка сайта ---begin-*/
.site-header {
	background-color: var(--clr-background-white);
	border-bottom: 1px solid #f0f0f0;
}
	.site-header__holder {
		align-items: center;
		max-width: var(--width-page);
		max-width: calc(48px + var(--width-page));/* временно, по ка есть праввый toolbar */
		min-height: 58px;
		margin: 0 var(--margin-side);
		box-sizing: border-box;
	}
	/* Tablet & Desktop */
	@media (min-width: 768px) {
		.site-header__holder {
			margin: 0 auto;
			padding-left: 48px;
		}
	}
	.site-header .logotype {
		height: auto;
		max-width: 205px;
		width: auto;
		font-size: 18px;
		line-height: 1.25em;
		text-align: left;
		box-shadow: none;
	}
		.site-header .logotype:hover,
		.site-header .logotype:focus,
		.site-header .logotype:active {
			filter: saturate(1.25);
		}
/*--- Шапка сайта ---end-*/



.site-header__holder {
	grid-template: "m r"
	               "s s";
	display: grid;
	grid-template-columns: 3fr 1fr;
	position: relative;
}
.site-header__holder .site-header_logo {
	grid-area: m;
}
.header__social-block {
	grid-area: r;
}
#q_search {
	grid-area: s;
}
/* Tablet & Desktop */
@media (min-width: 768px) {
	.site-header__holder {
		grid-template: "m r"
		               "m s";
		display: grid;
		grid-template-columns: 3fr 1fr;
		position: relative;
	}
	.header__social-block {
		margin-left: 18px;
		position: absolute;
		top: calc(100% + 38px);
		z-index: 1;
	}
	#q_search {
		position: absolute;
		top: calc(50% - 35px);
		width: calc(100% - 18px);
		margin-left: 18px;
	}
}
/*
	LitBu: Layout: Footer
*/

.page-footer {
	border-top: 1px solid var(--clr-border);
}
.page-footer_top {
	background-color: var(--clr-white);
	text-align: center;
}
.page-footer_logo {
	padding: 36px 0;
}
	.page-footer_logo .logo_img {
		display: inline-block;
	}
.logo_img {
	width: auto;
	height: 50px;
}
.footer__social-block {
	padding: 18px 0;
}
	.footer__social-block .social_block {
		display: flex;
		justify-content: center;
	}
.page-footer_bottom {
	height: 22px;
	background-color: var(--clr-green);
	color: var(--clr-white);
	text-align: center;
	font-weight: var(--fnt-semibold);
	font-size: var(--font-size--smaller);
	line-height: var(--line-height--smaller);
}

/*
	Tablet & Desktop
*/
@media (min-width: 768px) {
	.page-footer_top .wrp {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.page-footer_logo {
		margin-left: 44px;/* Временно, пока не уберётся left-menu-bar */
		padding: 0;
		padding-left: 16px;
	}
	.footer__social-block {
		padding-right: 16px;
	}
}


/*
	LiBu: Search
*/
/* Поиск */
#q_search {
	margin-top: 8px;
	margin-bottom: 8px;
}
@media (min-width: 768px) {
	#q_search {
		margin-top: 0;
		margin-bottom: 0;
	}
}

.q_search {
	position: relative;
}
.site-header .q_search {
	/*margin-left: 12px;*/
	/*margin-right: 12px;*/
}
.q_search > input {
	width: 100%;
	line-height: 24px;
	color: inherit;
	display: block;
}
.q_search > input:focus {
	background-color: var(--color-background-light);
}
.q_search > input[type="search"] {
	background-color: transparent;
	padding-right: 40px;
}
.q_search > input[type="search"]:focus {
	background-color: var(--color-background-light);
}
.q_search input:-webkit-input-placeholder {
	color: inherit;
}
.q_search > .q_search_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	background: none;
	border: 0 none;
	color: var(--clr-black);
	cursor: pointer;
	opacity: .7;
}
.q_search > .q_search_btn .ico {
}
/*.q_search_btn > .icon {
	fill: currentColor;
	position: absolute;
	left: 50%; top: 50%;
	margin: -9px 0 0 -9px;
	width: 18px; height: 18px;
}*/
.q_search_btn:hover { opacity: 1; }

/*@media (min-width: 768px) {
	#q_search { position: relative; }
	.q_search > input { padding-left: 20px; }
	.q_search > .q_search_btn { margin-right: 9px; }
}*/


/** overwrite `engine.css` */
#searchsuggestions {
	overflow: auto;
	max-height: calc(100vh - 154px);
	width: calc(100vw - 24px);
}
@media (min-width: 768px) {
	#searchsuggestions {
		overflow: auto;
		max-height: calc(100vh - 58px);
		width: 282px;
	}
}

#menu .greenmenu {
}
#menu .menu {
	max-height: calc(100vh - 88px);
	overflow: auto;
}


/*
	LitBu: Blocks
*/

/** shortstory */
.shortstory {
	/*margin: 16px 0;*/
}

/** shortstory: nowinki */
.shortstory .text .nowinki {
	flex-direction: column-reverse;
}
@media (min-width: 768px) {
	.shortstory .text .nowinki {
		flex-direction: row;
	}
}
/***
.content .book-list--list a:link {/* @todo: добавить в шаблон `shortstory` a.link-img *__/
	border-bottom-style: none;
	display: inline-block;
}
.content .book-list__item a:link {
	border-bottom-style: solid;	
}
.book-list--list a img {
	vertical-align: top;
}
***/





/*
	Story Toolbar
	Иконки новости «В закладки» и «Редактировать»
*/
.story_icons {
	position: absolute;
	right: -4px;
	/*float: right;*/
	padding: 0;
	margin: 0;
	list-style: none;
}
.content .story_icons a:link,
.content .date.grey a:link {/* OPTIMIZE: поправить стили времени редактирования новости */
	border-bottom: none !important;
}
	.story_icons > li { text-align: center; margin: 0 0 10px 0; }

	/* Кнопка «В закладки» */
	.fav_btn > a, .edit_btn > a {
		display: inline-block;
		width: 30px; height: 26px;
		padding-top: 4px;
	}
	.fav_btn .icon {
		width: 19px; height: 26px;
		vertical-align: top;
	}
	.fav_btn .icon-fav { fill: #919191; }
	.fav_btn:hover .icon-fav { fill: #1a1a1a; }
	.fav_btn .icon-fav_del { fill: #ffde27; }

	/* Кнопка «Редактировать» */
	.edit_btn > a { position: relative; overflow: hidden; }
		.edit_btn > a > i, .edit_btn > a:after, .edit_btn > a:before { 
			padding-top: 3px;
			width: 19px; height: 0;
			background-color: #1a1a1a;
			overflow: hidden;
			display: block;
			border-radius: 2px;
			margin: 3px 0 0 6px;
			opacity: .4;
			-webkit-transition: all ease .2s; transition: all ease .2s;
		}
		.edit_btn > a:before { margin-top: 2px; }
		.edit_btn > a:after, .edit_btn > a:before { content: ""; }
		.edit_btn > a:hover > i, .edit_btn > a:hover:after, .edit_btn > a:hover:before {
			opacity: 1;
		}
		.edit_btn > a:hover > i { margin-left: 0; }


/*
	LitBu: Постраничная Навигация
	@todo OPTIMIZE
*/
/* overwrite: link styles */
.pages a {
	color: inherit;
}
.content .pages a:link {
	border-bottom-width: 3px !important;
	border-color: transparent !important;
}
.pages a:visited {
	border-color: transparent !important;
}
.pages a:focus {}
/*.pages a:hover {
	color: inherit;
	border-color: inherit;
}*/
.content .pages a:hover {
	border-color: #95c00e !important;
}
.pages a:active {}
.content .page_next-prev a:link {
	border: none !important;
}