/* ===================================================================
   MarkDay.ru - Responsive Mobile Styles (Starter-Kit Adaptivity)
   =================================================================== */

/* Global Fluid & Box Sizing Rules */
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

img, video, iframe, embed, object {
	max-width: 100% !important;
	height: auto !important;
}

/* ===================================================================
   Breakpoint: Tablets and small desktops (<= 1140px)
   =================================================================== */
@media screen and (max-width: 1140px) {
	#container {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 0 24px !important;
		margin: 0 auto !important;
	}

	#container.toolbar-margin #wrapper {
		margin-right: 0 !important;
	}

	.nav.nav-main {
		padding-right: 200px !important;
	}
}

/* ===================================================================
   Breakpoint: Tablets and Large Phones (<= 900px)
   =================================================================== */
@media screen and (max-width: 900px) {
	#container {
		padding: 0 16px !important;
	}

	#wrap {
		height: auto !important;
		min-height: auto !important;
		margin-bottom: 0 !important;
	}

	#push {
		display: none !important;
		height: 0 !important;
	}

	#wrapper {
		padding: 16px 0 30px !important;
		overflow: visible !important;
	}

	/* Stack Content & Sidebar Vertically */
	#content {
		width: 100% !important;
		float: none !important;
		margin-right: 0 !important;
		padding: 0 !important;
	}

	#sidebar {
		width: 100% !important;
		float: none !important;
		margin-top: 30px !important;
		clear: both !important;
	}

	/* Header Responsive */
	#header {
		padding: 12px 0 !important;
	}

	#header #container {
		overflow: visible !important;
	}

	#header .site-name {
		float: left !important;
		font-size: 22px !important;
		line-height: 32px !important;
		margin-right: 15px !important;
		padding-top: 0 !important;
	}

	#header .auth {
		position: static !important;
		float: right !important;
		margin-right: 0 !important;
		line-height: 32px !important;
	}

	#header .auth li {
		margin-left: 12px !important;
		font-size: 13px !important;
	}

	#header .dropdown-user {
		position: static !important;
		float: right !important;
		margin-right: 0 !important;
		top: 0 !important;
	}

	#header .new-messages {
		position: static !important;
		float: right !important;
		margin-top: 8px !important;
		margin-right: 10px !important;
	}

	/* Main Navigation */
	.nav.nav-main {
		clear: both !important;
		float: none !important;
		padding-right: 0 !important;
		margin-top: 10px !important;
		overflow: visible !important;
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px 16px !important;
	}

	.nav.nav-main li {
		float: none !important;
		margin-right: 0 !important;
		line-height: 32px !important;
	}

	.nav.nav-main li a {
		font-size: 20px !important;
		text-decoration: none !important;
		border-bottom: 2px solid transparent !important;
	}

	.nav.nav-main li.active a {
		border-bottom-color: #4e729d !important;
	}

	/* Sub-Navigation Bar */
	#nav {
		min-height: auto !important;
		overflow: visible !important;
		padding: 8px 0 !important;
		border-bottom: 1px solid #eee !important;
	}

	#nav #container {
		overflow: visible !important;
	}

	.nav.nav-menu {
		float: none !important;
		margin-top: 0 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px 14px !important;
	}

	.nav.nav-menu li a {
		margin-right: 0 !important;
		font-size: 13px !important;
	}

	#nav .button.button-write {
		float: none !important;
		display: inline-block !important;
		margin: 8px 0 0 0 !important;
	}

	#nav .search-header {
		float: none !important;
		margin-top: 10px !important;
		width: 100% !important;
	}

	#nav .search-header .search-header-form {
		width: 100% !important;
	}

	#nav .search-header .search-header-form .input-text {
		width: 100% !important;
		max-width: 100% !important;
		font-size: 14px !important;
		height: 34px !important;
	}

	#nav .search-header .search-header-form .input-submit {
		top: 9px !important;
	}

	/* Toolbar on mobile */
	.toolbar {
		display: none !important;
	}
}

/* ===================================================================
   Breakpoint: Smartphones (<= 640px)
   =================================================================== */
@media screen and (max-width: 640px) {
	body {
		font-size: 14px !important;
		line-height: 1.5 !important;
		-webkit-text-size-adjust: 100% !important;
	}

	#container {
		padding: 0 12px !important;
	}

	/* Header */
	#header .site-name {
		font-size: 19px !important;
		max-width: 60% !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}

	#header .site-name a {
		display: block !important;
	}

	.nav.nav-main {
		gap: 4px 12px !important;
		margin-top: 8px !important;
	}

	.nav.nav-main li a {
		font-size: 17px !important;
		line-height: 28px !important;
	}

	/* Topic Adaptivity */
	.topic {
		margin-bottom: 35px !important;
	}

	.topic .topic-header .topic-title {
		font-size: 19px !important;
		line-height: 1.3em !important;
		word-break: break-word !important;
	}

	.topic .topic-header .topic-info {
		font-size: 12px !important;
		line-height: 1.4 !important;
		margin-bottom: 10px !important;
	}

	.topic .topic-content {
		font-size: 15px !important;
		line-height: 1.6em !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
	}

	.topic .topic-content p {
		margin-bottom: 12px !important;
	}

	.topic .topic-content pre,
	.topic .topic-content code {
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		font-size: 12px !important;
		white-space: pre !important;
		display: block !important;
	}

	.topic .topic-content table {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	/* Topic Footer Meta */
	.topic .topic-footer .topic-tags {
		font-size: 12px !important;
		line-height: 1.5 !important;
	}

	.topic .topic-footer .topic-info {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 6px 10px !important;
		padding: 10px 0 !important;
	}

	.topic .topic-footer .topic-info li {
		float: none !important;
		padding: 2px 0 !important;
		margin-right: 0 !important;
	}

	.topic .topic-footer .topic-info li.topic-info-vote {
		float: none !important;
		margin-left: auto !important;
	}

	/* Polls */
	.topic .poll .poll-result li dl dt {
		width: 70px !important;
		font-size: 12px !important;
	}

	.topic .poll .poll-result li dl dd {
		width: calc(100% - 75px) !important;
		max-width: 100% !important;
		float: left !important;
	}

	/* Comments Tree */
	.comments {
		overflow: hidden !important;
	}

	.comment-wrapper {
		padding-left: 8px !important;
		margin-left: 0 !important;
		border-left: 2px solid #eef1f5 !important;
	}

	.comment-child {
		margin-left: 0 !important;
	}

	.comment .comment-content {
		font-size: 14px !important;
		line-height: 1.5 !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
	}

	.comment .comment-info {
		font-size: 11px !important;
		flex-wrap: wrap !important;
	}

	.comment-preview {
		font-size: 14px !important;
	}

	/* Forms & Inputs */
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		max-width: 100% !important;
		font-size: 15px !important;
	}

	/* Modals & Popups */
	.modal,
	.modal.modal-login {
		width: 92% !important;
		max-width: 360px !important;
		left: 50% !important;
		margin-left: 0 !important;
		transform: translateX(-50%) !important;
		-webkit-transform: translateX(-50%) !important;
		padding: 15px !important;
	}

	.modal .input-text {
		width: 100% !important;
	}

	/* Pagination */
	.pagination ul {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 4px !important;
	}

	.pagination ul li {
		margin-right: 2px !important;
	}

	.pagination ul li span,
	.pagination ul li a {
		padding: 5px 8px !important;
		font-size: 13px !important;
	}

	/* Footer */
	#footer {
		height: auto !important;
		padding: 20px 0 25px !important;
		background: #f7f7f7 !important;
	}

	#footer .footer-list {
		float: none !important;
		width: 100% !important;
		padding-right: 0 !important;
		margin-bottom: 15px !important;
	}

	#footer .copyright {
		float: none !important;
		width: 100% !important;
		text-align: left !important;
		margin-top: 15px !important;
	}

	/* Hide Skinswitch Floating Overlay on Mobile */
	#skinswitch-container {
		display: none !important;
	}
}