/*
Theme Name: detsad-2026
Description: Редизайн темы detsad (семантический HTML5 + responsive CSS), тот же внешний вид на десктопе.
*/

:root {
	--color-link: #4997C1;
	--color-link-hover: #2c6e94;
	--color-heading: #464646;
	--color-body: #6F6F6F;
	--color-contact: #545A5B;
	--color-phone: #F23846;
	--color-tagline: #237C12;
	--color-accent-green: #66CC00;
	--color-pagenavi-active: #DF4344;
	--color-footer-text: #A7A8AB;
	--font-heading: 'Trebuchet MS', sans-serif;
	--font-body: Arial, Helvetica, sans-serif;
	--font-footer: Tahoma, sans-serif;
	--content-width: 1300px;
}

/* === Reset / base === */
*, *::before, *::after { box-sizing: border-box; }

body { background: #FFFFFF; margin: 0; padding: 0; font-family: var(--font-body); }

a { color: var(--color-link); cursor: pointer; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

h1 { font-family: var(--font-heading); font-size: 24px; color: var(--color-heading); margin: 0 0 .5em; }
h2 { font-family: var(--font-heading); font-size: 20px; color: var(--color-heading); margin: 0 0 .5em; }
h3 { font-family: var(--font-heading); font-size: 16px; color: var(--color-heading); margin: 0 0 .5em; }

ul { margin: 1em 0; padding-left: 2em; }

blockquote { font-style: italic; }

img { max-width: 100%; height: auto; }

.alignleft { float: left; margin: 0 15px 10px 0; }
.alignright { float: right; margin: 0 0 10px 15px; }
.aligncenter { display: block; margin: 0 auto; text-align: center; }

.clearfix::after { content: ""; display: table; clear: both; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Image captions (unchanged from original) */
.wp-caption { background-color: #EFEFED; border: 1px solid #D0D0CE; margin: 10px; padding: 3px; text-align: center; max-width: 470px !important; }
.wp-caption img { border: none; height: auto !important; }
.wp-caption-text { color: #676F51; font-size: .85em; margin: 0; padding: 4px 0; }

/* === Header === */
.site-header {
	width: 100%;
	min-height: 442px;
	background: url(images/header.jpg) repeat-x;
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 30px;
	max-width: var(--content-width);
	margin: 0 auto;
	min-height: 250px;
	padding-top: 20px;
	background: url(images/headerleft.jpg) no-repeat left top, url(images/headerright.jpg) no-repeat right top;
}

.logo { flex: 0 0 auto; }
.logo img { display: block; }

.header-contacts { flex: 1 1 auto; padding-top: 20px; }

.toptext {
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--color-contact);
	max-width: 320px;
	margin-bottom: 16px;
}

.topadres {
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--color-contact);
}
.topadres p { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.topadres span { font-family: var(--font-body); font-size: 17px; color: var(--color-phone); }

.toptext2 {
	flex: 0 0 auto;
	padding-top: 60px;
	padding-right: 10px;
	font-family: var(--font-body);
	font-size: 20px;
	color: var(--color-tagline);
	text-align: right;
	white-space: nowrap;
	text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 10px #fff;
}
.toptext2 span { font-size: 14px; }

/* Group icons row */
.gruppy {
	max-width: var(--content-width);
	margin: 0 auto;
}
.gruppy__title {
	padding: 8px 0 4px;
	border-bottom: #AD7661 dotted 1px;
	font-family: var(--font-heading);
	font-size: 14px;
	color: #0D0D0D;
}
.gruppy__list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}
.gruppy__list li {
	flex: 1 1 16%;
	text-align: center;
	padding: 4px;
}
.gruppy__list a {
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 14px;
	color: #686868;
	display: block;
	padding: 10px 8px;
	border-radius: 10px;
	transition: background-color .15s ease;
}
.gruppy__list a:hover { text-decoration: none; color: var(--color-heading); background-color: #FFF6D9; }

/* === Layout: sidebar + content === */
.layout {
	max-width: var(--content-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 265px 1fr;
	grid-template-areas: "sidebar main";
	gap: 30px;
	padding-top: 30px;
}

.site-main { grid-area: main; min-width: 0; font-family: var(--font-body); font-size: 12px; color: var(--color-body); padding-bottom: 60px; }
.site-sidebar { grid-area: sidebar; min-width: 0; padding-bottom: 30px; }

.text { font-family: var(--font-heading); font-size: 16px; color: var(--color-body); margin-bottom: 20px; }
.text img { margin: 5px; }

/* Legacy content tables (staff bios etc.) authored in the classic editor
   years ago — no layout CSS existed for these before. Auto table layout
   otherwise collapses the photo column to near-zero width, because an
   img with max-width:100% looks infinitely shrinkable to the column-width
   algorithm; pin it back to its real size instead. */
.text table { border-collapse: collapse; margin-bottom: 20px; max-width: 100%; }
.text table td { vertical-align: top; padding: 6px 10px 6px 0; }
.text table img.alignleft,
.text table img.size-thumbnail {
	max-width: none;
	width: 150px;
	height: auto;
}
@media (max-width: 480px) {
	.text table img.alignleft,
	.text table img.size-thumbnail { width: 90px; }
}

.prev { float: left; width: 120px; height: 100px; margin-right: 20px; margin-bottom: 10px; }

.lastnews { width: 100%; }
.lastnewstop { display: flex; align-items: center; justify-content: space-between; }

article.lastnews { padding: 10px 0; border-bottom: #949494 dotted 1px; }
.lnprev { float: left; width: 120px; min-height: 100px; margin-right: 20px; }
.lntext { font-family: var(--font-heading); font-size: 14px; color: var(--color-body); }
.lntext img { margin: 5px; }
.lntext p { margin: 0 0 .75em; }
.lninfo { background: url(images/info.jpg) no-repeat; min-height: 15px; padding-left: 20px; font-family: var(--font-heading); font-size: 10px; color: #949494; }
.lninfo a { color: var(--color-link); }
.zag { display: block; font-family: var(--font-heading); font-size: 16px; margin-bottom: 4px; }

.newfoto { min-height: 204px; margin-top: 40px; background: url(images/lastfoto.jpg) no-repeat; padding: 50px 0 0 50px; }
.nf { margin-left: 170px; margin-top: -40px; }


.pagenav { clear: both; padding-top: 30px; }

/* === Sidebar === */
.incontent { width: 100%; margin: 0 0 30px; overflow: hidden; }
.site-sidebar .lefttitle { margin-bottom: 5px; }
.site-sidebar .leftmenu { list-style: none; margin: 0 0 20px; padding: 0; font-family: var(--font-body); font-size: 12px; line-height: 160%; }
.site-sidebar .leftmenu li a { color: var(--color-body); text-decoration: none; }
.site-sidebar .leftmenu li a:hover { color: var(--color-link); text-decoration: underline; }

/* Simplified login box (original background-image layout couldn't fit real accessible fields) */
.login-box {
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--color-heading);
	margin-bottom: 30px;
	padding: 12px 15px;
	background: #F7F7F5;
	border: 1px solid #E3E3E0;
	border-radius: 6px;
}
.login-box a { color: var(--color-accent-green); }
.login-box p { margin: 0 0 8px; }
.login-box label { display: block; font-size: 11px; margin-bottom: 2px; }
.login-box input[type="text"],
.login-box input[type="password"] {
	width: 100%;
	padding: 5px 6px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	font-family: var(--font-body);
	font-size: 12px;
}
.login-box input[type="submit"] {
	background: var(--color-link);
	color: #fff;
	border: 0;
	border-radius: 3px;
	padding: 6px 14px;
	font-size: 12px;
	cursor: pointer;
}
.login-box input[type="submit"]:hover { background: var(--color-link-hover); }
.login-box--in { background: none; border: 0; padding: 0; }

.sobitiya, .opros, .versiya { margin-bottom: 30px; }
.sobtitle, .oprostitle { font-family: var(--font-heading); font-size: 18px; color: var(--color-heading); float: left; line-height: 125%; }
.sobtitle span, .oprostitle span { font-size: 27px; }
.sobimg, .oprosimg { float: right; }
.sobtext, .oprostext, .versiyatext { clear: both; padding-top: 10px; font-family: var(--font-body); font-size: 12px; color: #717171; }
.sobtext a, .oprostext a { color: var(--color-accent-green); }
.sobtext ul { margin: 0; padding: 0; }
.sobtext li { margin: 10px 0 0; padding: 0; list-style: none; }
.oprostext p { font-family: var(--font-body); font-size: 12px; color: var(--color-heading); font-weight: normal; text-align: left; }

.links { margin-bottom: 20px; }
.links img { max-width: 130px; }

/* === Footer === */
.site-footer {
	position: relative;
	width: 100%;
	background-color: #FFFECE;
	background-image: url(images/footer.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	/* Full-bleed background (like .site-header), content kept at the same
	   position it would have at max-width:1300px/margin:auto — just via
	   padding instead of a second wrapper element. */
	padding-right: calc((100% - var(--content-width)) / 2 + 170px);
	padding-left: calc((100% - var(--content-width)) / 2 + 20px);
}
/* "Юла" — decorative corner illustration. Taller than the (intentionally
   compact) footer band, so it pokes up above the footer's own top edge
   instead of forcing the whole band to stretch to fit it. */
.site-footer::after {
	content: "";
	position: absolute;
	right: 20px;
	bottom: 0;
	width: 130px;
	height: 148px;
	background: url(images/footerright.jpg) no-repeat bottom right / contain;
	pointer-events: none;
}

.footertext { font-family: var(--font-footer); font-size: 11px; color: var(--color-footer-text); flex: 1 1 auto; }
.footercounter { flex: 0 0 auto; }
.footercounter img { margin-right: 5px; }

.footersearch {
	flex: 0 0 auto;
}
.footersearch .searchform {
	display: flex;
	align-items: stretch;
}
.footersearch input {
	width: 180px;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-right: 0;
	border-radius: 3px 0 0 3px;
	font-family: var(--font-footer);
	font-size: 12px;
}
.footersearch button {
	padding: 6px 14px;
	border: 0;
	border-radius: 0 3px 3px 0;
	background: var(--color-link);
	color: #fff;
	font-family: var(--font-footer);
	font-size: 12px;
	cursor: pointer;
}
.footersearch button:hover { background: var(--color-link-hover); }

/* === [gallery] shortcode grid ===
   Needed because add_theme_support('html5', ['gallery']) tells WP the
   theme supplies its own gallery CSS instead of core's inline fallback. */
.gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 20px 0;
	list-style: none;
	padding: 0;
}
.gallery-columns-1 { grid-template-columns: repeat(1, 1fr); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7, .gallery-columns-8, .gallery-columns-9 { grid-template-columns: repeat(6, 1fr); }
.gallery-item { margin: 0; text-align: center; }
.gallery-icon a { display: block; }
.gallery-icon img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 4px; display: block; }
.gallery-caption {
	font-family: var(--font-body);
	font-size: 11px;
	color: var(--color-body);
	margin: 4px 0 0;
	padding: 0;
}

@media (max-width: 600px) {
	.gallery, .gallery-columns-4, .gallery-columns-5, .gallery-columns-6,
	.gallery-columns-7, .gallery-columns-8, .gallery-columns-9 { grid-template-columns: repeat(2, 1fr); }
}

/* === Lightbox === */
.dou-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .85);
	padding: 40px;
}
.dou-lightbox[hidden] { display: none; }
.dou-lightbox img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.dou-lightbox__close, .dou-lightbox__prev, .dou-lightbox__next {
	position: fixed;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	border-radius: 50%;
}
.dou-lightbox__close { top: 20px; right: 20px; width: 44px; height: 44px; }
.dou-lightbox__prev, .dou-lightbox__next { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.dou-lightbox__prev { left: 20px; }
.dou-lightbox__next { right: 20px; }
.dou-lightbox__close:hover, .dou-lightbox__prev:hover, .dou-lightbox__next:hover { background: rgba(0, 0, 0, .8); }

/* === Pagination (wp-pagenavi, unchanged) === */
.wp-pagenavi { clear: both; font-family: var(--font-body); font-size: 12px; color: #5C5C5C; }
.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border: 1px solid #C0C0C0;
	padding: 3px 5px;
	margin: 2px;
	color: #5C5C5C;
	display: inline-block;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #C0C0C0;
	background: var(--color-pagenavi-active);
	color: #FFFFFF;
}
.wp-pagenavi span.current { font-weight: bold; }

/* === Comments === */
#respond { clear: both; margin-top: 30px; padding-top: 20px; border-top: 1px solid #E3E3E0; }
#commentform p { margin: 0 0 10px; }
#commentform label { display: block; font-size: 12px; color: var(--color-body); margin-bottom: 2px; }
#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea { width: 100%; max-width: 400px; padding: 6px; font-family: var(--font-body); }
.commentlist { list-style: none; margin: 0; padding: 0; }

/* === Gallery archive (year hierarchy) === */
.gallery-years { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 15px; }
.gallery-years li a {
	display: block;
	padding: 20px 30px;
	background: #F7F7F5;
	border: 1px solid #E3E3E0;
	border-radius: 6px;
	font-family: var(--font-heading);
	font-size: 20px;
	color: var(--color-heading);
	text-decoration: none;
}
.gallery-years li a:hover { background: #EFEFED; color: var(--color-link); }
.gallery-events { list-style: none; margin: 20px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.gallery-events li a { display: block; text-decoration: none; color: var(--color-heading); }
.gallery-events li img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 4px; }
.gallery-events li .zag { margin-top: 8px; }

/* === Responsive === */
@media (max-width: 1340px) {
	.site-header__inner, .gruppy, .layout { max-width: 100%; padding-left: 30px; padding-right: 30px; }
	.site-footer { padding-left: 30px; padding-right: 170px; padding-top: 25px; padding-bottom: 25px; }
}

@media (max-width: 1000px) {
	.layout {
		grid-template-columns: 1fr;
		grid-template-areas: "main" "sidebar";
		padding-left: 15px;
		padding-right: 15px;
	}

	.site-header__inner, .gruppy { padding-left: 15px; padding-right: 15px; }
	.site-footer { padding-left: 15px; }

	.site-header__inner { min-height: 300px; }
}

@media (max-width: 600px) {
	.site-header { min-height: auto; }

	.site-header__inner { flex-direction: column; align-items: center; min-height: 0; padding: 15px; text-align: center; background-image: none; }

	.header-contacts { padding-top: 0; }

	.toptext { max-width: none; }

	.topadres p { justify-content: center; }

	.toptext2 { padding-top: 0; text-align: center; white-space: normal; }

	.gruppy__list li { flex-basis: 33%; }

	.site-footer {
		flex-direction: column;
		align-items: flex-start;
		background-image: none;
		min-height: 0;
		padding: 15px;
	}
	.site-footer::after { display: none; }

	.footersearch { width: 100%; }
	.footersearch input { flex: 1; width: auto; }

	.incontent { max-width: 100%; }
}