/* svvaul.ru on Laravel — additions on top of the original template CSS (engine.css, style.css, k2.css).
   Sections: fonts · CSS main menu · template fixes · comments · gallery · lists/forms · mobile (≤ 1000px) */

/* ============================== Fonts (self-hosted, SIL OFL) ============================== */
@font-face { font-family: "Open Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap;
	src: url(/tpl/fonts/open-sans-condensed-cyrillic-700-normal.woff2) format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face { font-family: "Open Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap;
	src: url(/tpl/fonts/open-sans-condensed-latin-700-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Open Sans Condensed"; font-style: normal; font-weight: 300; font-display: swap;
	src: url(/tpl/fonts/open-sans-condensed-cyrillic-300-normal.woff2) format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face { font-family: "Open Sans Condensed"; font-style: normal; font-weight: 300; font-display: swap;
	src: url(/tpl/fonts/open-sans-condensed-latin-300-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }

/* ============================== Main menu drawn in CSS (html.menu-css) ==============================
   Geometry and colours measured from the old topmenu.png / topmenu-link.png sprites. */
.menu-css #topmenu { position: relative; background: none; padding-right: 0; height: 77px }
.menu-css #topmenu::before { content: ""; position: absolute; inset: 0; z-index: 0;
	clip-path: polygon(16px 0, calc(100% - 10px) 0, calc(100% - 5px) 56px, calc(100% - 22px) 100%, 9px 100%, 0 22px);
	background: linear-gradient(to bottom,
		#0f1417 0, #0f1417 2px, #b1bbc2 2px, #b1bbc2 3px, #42525e 3px, #4c5d69 4px, #435561 5px,
		#3c4e5b 7px, #3c4d59 9px, #39495a 12px, #364756 16px, #344350 20px, #314150 23px, #2f3e49 27px,
		#2f3e49 68px, #374650 68px, #3f4d57 69px, #48555f 70px, #505d66 71px, #505d66 73px,
		#2f3e49 73px, #2f3e49 74px, #69747c 74px, #69747c 75px, #2f3e49 75px) }
.menu-css #hMenu { position: relative; z-index: 1; background: none; height: 58px; padding: 19px 0 0 45px; margin-right: 45px }
.menu-css #hMenu li > a, .menu-css #hMenu li:first-child > a { background: none; position: relative }
.menu-css #hMenu > li > a b, .menu-css #hMenu > li:hover > a b, .menu-css #hMenu > li > a:hover b { background: none; position: relative; z-index: 1 }
/* separator before every top-level item except the first: 3 vertical hairlines (light, dark, light) */
.menu-css #hMenu > li + li > a::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 42px;
	background:
		linear-gradient(to bottom, #344450 0, #39495a 10px, #9da3a9 20px, #4a5a66 28px, #2f3e49 40px) 0 0 / 1px 100% no-repeat,
		linear-gradient(to bottom, #344450 0, #2b3943 10px, #1f2930 20px, #283540 30px, #2f3e49 40px) 1px 0 / 1px 100% no-repeat,
		linear-gradient(to bottom, #344450 0, #3b4c57 10px, #55626a 20px, #2e3d48 30px, #2f3e49 40px) 2px 0 / 1px 100% no-repeat }
/* blue hover pill */
.menu-css #hMenu > li > a::after { content: ""; position: absolute; left: 4px; right: 2px; top: 5px; height: 32px; border-radius: 4px; opacity: 0;
	background: linear-gradient(to bottom, #7bc5ef 0, #7bc5ef 1px, #59b6ec 1px, #59b6ec 17px, #38a2e1 17px, #1d92d6 29px, #4ba8df 29px, #4ba8df 31px, #6eb9e3 31px);
	box-shadow: 0 1px 0 #212b33, inset 1px 0 0 #7bc5ef, inset -1px 0 0 #7bc5ef }
.menu-css #hMenu > li:first-child > a::after { left: 1px }
.menu-css #hMenu > li:hover > a::after, .menu-css #hMenu > li > a:focus-visible::after, .menu-css #hMenu > li.active > a::after { opacity: 1 }
.menu-css #fMenu a, .menu-css #footmenu, .menu-css #fMenu { /* footer bar keeps its PNGs; only the top bar was redrawn */ }

/* ============================== Template fixes ============================== */
.btl2, .btl, .ui-dialog-title, .abtl, #mapSite h4 { font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif }
.btl span, .abtl span { font-weight: 700 }
#hSlider .slide p { margin-bottom: 10px }
.slides_container { display: block }
.slides_container .slide { display: none }
.slides_container .slide.is-active { display: block }
.js .slides_container .slide { position: absolute; left: 0; top: 0; display: block; visibility: hidden }
.js .slides_container .slide.is-active { position: relative; visibility: visible }
.slides_container { transition: height .3s }
.slide-anim { transition: transform .35s ease }
#vSlider .caption { transition: bottom .3s }
#vSlider.animating .caption { bottom: -100px !important }
#vSlider .caption { bottom: 0 }
.pagination li a { text-indent: -9999px }
.pt-body .itemFullText img, .pt-body img { height: auto }
.itemVideo iframe, .pt-body iframe, .pt-body video { max-width: 100% }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
#toTop { width: 100px; z-index: 10; border: 1px solid #333; background: #121212; text-align: center; padding: 5px; position: fixed; bottom: 0; right: 0; cursor: pointer; display: none; color: #fff; text-transform: lowercase; font-size: .7em }
#toTop.visible { display: block }
.flash { margin: 0 0 20px; padding: 10px 16px; border-radius: 6px; background: #e5f3fb; color: #1d6fa5 }
.flash.error { background: #fce5ba; color: #a76846 }
.inner-content { width: 100% }
.inner-content .post { width: auto }

/* login dialog (was jQuery UI) */
.dialog-backdrop { position: fixed; inset: 0; background: rgba(191,191,191,.4); z-index: 1000; display: none }
.dialog-backdrop.open { display: block }
#lg-dialog.ui-dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1001; display: none; width: 300px; max-width: calc(100vw - 32px) }
#lg-dialog.ui-dialog.open { display: block }
.ui-dialog-titlebar-close { font-size: 22px; line-height: 26px; color: #fff; background: #333; border-radius: 13px; text-align: center }
.ui-dialog-titlebar-close:hover { background: #929292 }
.ui-dialog-titlebar::after { content: ""; display: table; clear: both }

/* logged-in pane */
#loginPane.loginEnter { margin-top: 30px; padding-left: 20px; max-width: 220px; line-height: 1.5 }
#loginPane.loginEnter .user-name { display: block; font-weight: bold; color: #444 }
#loginPane.loginEnter a { float: none; margin-right: 10px; font-size: .9em }

/* ============================== Comments (JComments look) ============================== */
#jc { margin-top: 20px }
#jc h4 { font-size: 16px; margin: 0 0 10px }
.comment-box .comment-anchor { color: #919191; margin-right: 8px }
.comment-box .comment-author { font-weight: bold; margin-right: 8px }
.comment-box .comment-date { color: #919191; font-size: .85em }
#comments .comment-avatar { display: none }
#comments .avatar-indent { margin-left: 0 }
.comment-body blockquote { margin: 6px 0 8px; padding: 4px 10px; border-left: 4px solid #d7d7d7; font-size: .95em }
.comment-body .quote { display: block; color: #919191; font-style: italic; font-size: .9em }
.comment-body .smiley { vertical-align: middle }
.comments-list-footer, .comments-pager { margin: 10px 0 }
.comments-pager a, .comments-pager span { display: inline-block; padding: 2px 7px; margin-right: 3px; border-radius: 6px }
.comments-pager span.current { background: #2395d9; color: #fff }
.comment-vote { float: right; white-space: nowrap; font-size: .9em }
.comment-vote button { border: 0; background: none; cursor: pointer; color: #2e99d7; font-weight: bold; padding: 0 3px }
.comment-vote .score { font-weight: bold }
.comment-vote .score.good { color: #3a8d1c } .comment-vote .score.poor { color: #c21d1d }
.comments-actions { font-size: .85em; margin-top: 6px }
.comments-actions button { border: 0; background: none; color: #2e99d7; cursor: pointer; padding: 0; margin-right: 12px; font: inherit }
.comments-actions button:hover { text-decoration: underline }
.comment-item { padding: 12px 14px; margin-bottom: 10px; border-radius: 6px; background: #f5f3ef }
.comment-item.odd { background: #fbfaf8 }
.comment-item:target { box-shadow: 0 0 0 2px #8cc4e0 }
#comments-form label { display: block; margin: 8px 0 4px }
#comments-form .field { width: 100%; max-width: 420px }
#comments-form textarea.field { max-width: 100%; height: 150px; color: #333 }
.bbcode-toolbar { margin: 6px 0 4px }
.bbcode-toolbar button { min-width: 28px; height: 26px; margin: 0 2px 4px 0; border: 1px solid #cdd1d2; border-radius: 4px; background: #fff; cursor: pointer; font-weight: bold }
.bbcode-toolbar .smilies img { cursor: pointer; vertical-align: middle; margin: 0 2px }
.comment-counter { color: #919191; font-size: .85em }
.consent-line { font-size: .9em; margin: 10px 0 }
.form-errors { color: #bf0000; margin: 8px 0 }

/* ============================== Gallery ============================== */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 18px; margin: 0 0 30px; padding: 0; list-style: none }
.album-grid li { margin: 0 }
.album-card a.cover { display: block; border: 6px solid #e8e2d8; background: #f5f3ef; aspect-ratio: 4 / 3; overflow: hidden }
.album-card a.cover:hover { border-color: #404040 }
.album-card img { width: 100%; height: 100%; object-fit: cover; display: block }
.album-card .album-title { display: block; margin-top: 6px; font-weight: bold; line-height: 1.3 }
.album-card .album-count { color: #919191; font-size: .85em }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0 0 30px; padding: 0; list-style: none }
.photo-grid li { margin: 0 }
.photo-grid a { display: block; border: 6px solid #e8e2d8; aspect-ratio: 4 / 3; overflow: hidden; background: #f5f3ef }
.photo-grid a:hover { border-color: #404040 }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block }
.photo-grid .photo-meta { display: block; font-size: .8em; color: #919191; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.photo-view { text-align: center; margin-bottom: 20px }
.photo-view img { max-width: 100%; height: auto; border: 6px solid #e8e2d8 }
.photo-nav { display: flex; justify-content: space-between; margin: 10px 0 20px }
.pswp__custom-caption { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100% - 32px); background: rgba(0,0,0,.6); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 14px; text-align: center }
.pswp__custom-caption a { color: #9fd3f5; text-decoration: underline }
.pswp__custom-caption:empty { display: none }
img.lightbox-zoom, .pt-body a.jcepopup img { cursor: zoom-in }

/* ============================== Lists, Q&A, files, forms ============================== */
.layoutform .field { width: 100%; max-width: 360px }
.layoutform textarea.field { max-width: 100%; height: 160px }
.form-row { margin-bottom: 15px }
.form-row label { display: block; margin-bottom: 4px }
.form-row .hint { color: #919191; font-size: .85em }
.required-mark { color: #bf0000 }
.faq-item { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #e5e5e5 }
.faq-question { font-weight: bold; margin-bottom: 6px }
.faq-meta { color: #919191; font-size: .85em; margin-bottom: 8px }
.faq-answer { padding: 10px 14px; background: #f5f3ef; border-radius: 6px }
.faq-vote { margin-top: 8px; font-size: .9em; color: #666 }
.faq-vote button { border: 0; background: none; color: #2e99d7; cursor: pointer; font: inherit; padding: 0 4px }
.download-line .size { margin-left: 8px }
.cat-list { margin: 0 0 30px; padding: 0; list-style: none }
.cat-list li { margin-bottom: 8px }
.search-results .post { padding-bottom: 15px; margin-bottom: 15px }
.upload-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 0; list-style: none }
.upload-list li { font-size: .85em }
.upload-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 4px solid #e8e2d8 }
.status-pending { color: #b36b00 } .status-approved { color: #3a8d1c } .status-rejected { color: #c21d1d }
.mobile-only { display: none }

/* ============================== Mobile (≤ 1000px) ============================== */
@media (max-width: 1000px) {
	html, body, #headbg, #wrp { min-width: 0 }
	#wrp { width: auto; max-width: none; margin: 0 8px }
	html { background-size: 1000px auto }
	/* helicopter strip (1980×219) scaled to 1100px, fully visible above the header; sky below continues at the same scale */
	body { background-position: 50% 122px; background-size: 1100px auto }
	#headbg { padding-top: 130px; background-size: 1100px auto; background-position: 50% 0 }
	.mobile-only { display: block }
	.desktop-only { display: none !important }

	/* header: emblem + СЫЗРАНСКОЕ + search icon + ☰ */
	#header { height: auto; min-height: 72px; padding: 0 8px; display: flex; align-items: center; gap: 8px; border-radius: 10px }
	#logo { width: auto; height: 72px; background: none; flex: 1 1 auto; min-width: 0 }
	#logo:after { display: none }
	#logo a { margin-top: 8px; padding-left: 70px; float: none; display: block }
	#logo b { width: 146px; height: 140px; left: -6px; top: -26px; transform: scale(.5); transform-origin: 0 0 }
	#logo h1 { transform: scale(.75); transform-origin: 0 50%; margin-top: 6px }
	#logo p { display: none }
	#quicksearch:after, .quicksearch, #loginPane { display: none }
	#quicksearch { float: none }
	.mobile-btn { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid #1b91d5; border-radius: 8px; color: #fff; font-size: 22px; line-height: 42px; text-align: center; cursor: pointer;
		background: linear-gradient(to bottom, #59b6ec 0%, #59b6ec 50%, #38a2e1 50%, #188fd5 100%) }
	.mobile-search { display: none; padding: 8px; background: #f2f2f2; border-radius: 10px; margin-top: 6px }
	.mobile-search.open { display: flex; gap: 6px }
	.mobile-search input { flex: 1; min-width: 0; height: 40px; font-size: 16px }

	/* menu becomes a slide-down panel */
	#topmenu, .menu-css #topmenu, .menu-png #topmenu { height: auto; background: none; padding: 0; margin-top: 6px }
	.menu-css #topmenu::before { display: none }
	#hMenu, .menu-css #hMenu, .menu-png #hMenu { display: none; height: auto; padding: 6px 0; margin: 0; background: #2f3e49; border-radius: 10px }
	#topmenu.open #hMenu { display: block }
	#hMenu li { float: none; display: block }
	#hMenu li > a, .menu-css #hMenu li > a, #hMenu li:first-child > a { float: none; display: block; height: auto; background: none !important; padding: 0 }
	#hMenu li > a b, #hMenu li:first-child > a b { float: none; display: block; padding: 12px 16px; line-height: 20px; background: none !important }
	.menu-css #hMenu > li > a::before, .menu-css #hMenu > li > a::after { display: none }
	#hMenu ul, #hMenu li:hover > ul { position: static; opacity: 1; visibility: visible; display: none; margin: 0 0 0 16px; box-shadow: none; background: none; border-radius: 0; transition: none }
	#hMenu ul ul { left: 0; margin-left: 16px }
	#hMenu li.expanded > ul { display: block }
	#hMenu ul a { width: auto; padding: 10px 16px; white-space: normal; color: #d9e6ee }
	#hMenu ul li:first-child > a:after { display: none }
	#hMenu .sub-toggle { position: absolute; right: 0; top: 0; z-index: 3; width: 48px; height: 44px; border: 0; background: none; color: #fff; font-size: 18px; cursor: pointer }
	#hMenu li { position: relative }
	#hMenu li > a b { padding-right: 52px }
	.mobile-account { padding: 10px 16px; border-top: 1px solid #23313a; color: #d9e6ee }
	.mobile-account a { color: #fff; margin-right: 14px; display: inline-block; padding: 6px 0 }

	#toolbar { height: auto; min-height: 40px; padding: 8px 12px; margin-top: 6px }
	#breadcrumb { margin: 4px 0; padding-left: 30px; float: none }
	.irss { display: none }
	#toolbar:after { display: none }

	.ibluebox-l, .ibluebox-r { background: #2f8fd0; border-radius: 10px; max-height: none }
	.ibluebox-r:after, .ibluebox-l:after, #infobluebox:after { display: none }
	#infobluebox { padding: 6px 0 }
	#infobluebox .ibluebox-l > div { padding: 0 10px }

	.bPad, #content .bPad, #content #footbox .bPad { padding: 16px 12px }
	.grid-1-3, .grid-1-2, #conteiner .grid-1-3, #conteiner .grid-1-2, .grid .grid-1-3:first-child { float: none; width: auto; margin: 0 0 24px }
	#vSlider .slides_container, #vSlider .slide, #hSlider .slides_container, #hSlider .slide { width: 100% }
	.imgslide { height: auto; aspect-ratio: 1 / 1 }
	.imgslide img { width: 100%; height: 100%; object-fit: cover }
	#hSlider { padding: 0 48px 10px }
	.next, .prev { transform: scale(.8) }
	.home-layout #cont-side { order: 1 } .home-layout #left-side { order: 2 }
	.home-layout { display: flex; flex-direction: column }
	#left-side iframe { width: 100%; height: auto; aspect-ratio: 350 / 240 }

	.pt-body { padding-left: 0 }
	.pt-thumb { float: left; margin: 3px 12px 6px 0; width: 96px }
	.pt-thumb img { height: 96px; object-fit: cover }
	.shorttext { float: none; width: auto }
	.pt-head .arg { float: none; display: block; margin: 0 0 4px }
	.pt-foot .arg { float: none; display: inline-block; margin: 6px 12px 0 0 }
	.readmore { float: none; display: inline-block; margin: 8px 0 0 }
	.post { overflow-wrap: anywhere }
	.pt-body table { display: block; overflow-x: auto; max-width: 100% }
	.pt-body img { max-width: 100% !important; height: auto !important }
	.pt-body iframe, .pt-body video, .pt-body object, .pt-body embed { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 }
	.pt-body table td img { width: auto }
	.pager { float: none } .next-prev { float: none; margin: 10px 0 0 } #pager .pager * { margin-bottom: 4px }

	.gallery { margin: 0 }
	.gallery .thumb { width: 33.33%; margin: 0; padding: 0 4px 8px; box-sizing: border-box }
	.gallery .thumb .mosaic { width: auto !important; float: none !important; padding: 0 !important }
	.thumb a { width: auto; height: auto; aspect-ratio: 1 / 1 }
	.thumb a img { width: 100%; height: 100%; object-fit: cover }
	#footbox:after, #footbox:before { display: none }

	#footmenu, #fMenu { background: #2f3e49; height: auto; padding: 6px 12px; border-radius: 10px; margin-top: 8px }
	#fMenu * { float: none; display: inline-block }
	#fMenu a { background: none; padding: 4px 8px; margin: 0; height: auto; line-height: 1.6 }
	#mapSite { padding: 16px 12px; border-radius: 10px 10px 0 0 }
	#mapSite .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
	#mapSite .grid-1-6 { width: auto; float: none; background: none }
	#mapSite .grid-1-6:empty { display: none }
	.bluesep { display: none }
	.footer { padding: 16px 12px }
	.copyright { float: none; padding-left: 60px }
	.counts { padding: 10px 0; height: auto }
	.helicopter { height: 100px; overflow: hidden }
	.helicopter .ico { transform: scale(.7); top: -24px }

	.album-grid { grid-template-columns: repeat(2, 1fr); gap: 10px }
	.photo-grid { grid-template-columns: repeat(3, 1fr); gap: 6px }
	.photo-grid a { border-width: 3px }
	.lf-1, .lf-2 { float: none; width: auto; margin: 0 0 6px }
	.lf-2 .field, .captcha, .layoutform .field, #comments-form .field { width: 100%; max-width: none; font-size: 16px }
	.field { height: 40px }
	.btn { min-height: 40px }
	#lg-dialog.ui-dialog { width: calc(100vw - 32px) }
}