/* ============================================================
   «Энергия Любви» — единый базовый слой стилей
   Добавляется поверх исторических табличных стилей (css/*.css).
   Содержит: переменные, типовые компоненты (меню, футер),
   адаптивность и мелкие современные улучшения.
   ============================================================ */

:root {
	--site-accent: #329CDC;
	--color-link: #0000FF;
	--color-link-visited: #000066;
	--color-link-hover: #FF0000;
	--color-menu-bg: #330066;
	--color-menu-hover: #00CC00;
	--color-footer-bg: #ab66ff;
	--color-copyright: #FFFFFF;
	--font-main: "Times New Roman", Times, serif;
	--menu-height: 30px;
}

/* ---------- Сброс и база ---------- */
html {
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-width: 320px;
	font-family: var(--font-main);
}

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

a {
	outline-offset: 2px;
}

/* ссылки в списках (меню стихов и т.п.) — без подчёркивания */
ul li a {
	text-decoration: none;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid #FF0000;
}

/* ---------- Компонент: меню ---------- */
.site-menu {
	font-family: var(--font-main);
	background-color: var(--site-accent);
}

.site-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-menu > ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	padding: 0;
	margin: 0;
}

.site-menu > ul > li {
	flex: 0 0 auto;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-menu .menu-item > a {
	display: block;
}

.site-menu .menu-item > a:focus-visible,
.site-menu .menu-item > a:hover {
	opacity: 0.85;
}

.site-menu img {
	display: block;
	border: 0;
}

/* выпадающее подменю («Стихи и песни») */
.site-menu .submenu {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 999;
	min-width: 220px;
	background-color: #FFFFCC;
	border: 1px solid #000000;
	padding: 0;
}

.site-menu .has-submenu:hover > .submenu,
.site-menu .has-submenu.submenu-open > .submenu,
.site-menu .has-submenu:focus-within > .submenu {
	display: block;
}

.site-menu .submenu a {
	display: block;
	padding: 4px 10px;
	font-weight: normal;
	text-decoration: none;
	color: #0000FF;
	white-space: nowrap;
}

.site-menu .submenu a:hover,
.site-menu .submenu a:focus-visible {
	background-color: #CC99FF;
	color: #000000;
}

/* ---------- Компонент: футер ---------- */
.site-footer {
	font-family: var(--font-main);
	width: 100%;
}

.site-footer .footer-nav {
	background-color: var(--footer-accent, #00B9B9);
	text-align: center;
	padding: 8px 4px;
	line-height: 1.9;
}

.site-footer .footer-nav a {
	font-weight: bold;
	color: #0000FF;
	text-decoration: none;
	padding: 2px 6px;
	white-space: nowrap;
}

.site-footer .footer-nav a:hover,
.site-footer .footer-nav a:focus-visible {
	color: var(--color-link-hover);
}

.site-footer .footer-nav img {
	vertical-align: middle;
}

.site-footer .footer-copy {
	background-color: var(--footer-copy-bg, #ab66ff);
	color: var(--color-copyright);
	text-align: center;
	padding: 4px 8px;
	font-size: 14px;
}

/* Счётчик LiveInternet (собирается js/main.js) */
.li-counter img {
	border: 0;
	width: 88px;
	height: 31px;
}

/* Кнопка «Наверх» */
.to-top {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 1000;
	padding: 8px 14px;
	font-family: var(--font-main);
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.65);
	border: 1px solid #FFFFFF;
	border-radius: 6px;
	cursor: pointer;
}

.to-top:hover,
.to-top:focus-visible {
	background-color: rgba(0, 0, 0, 0.85);
}

/* ---------- Адаптивность ---------- */
@media (max-width: 1024px) {
	table {
		max-width: 100%;
	}

	table[width="1024"],
	table[width="1024px"] {
		width: 100%;
	}

	td,
	th {
		word-wrap: break-word;
	}
}

/* ---------- Галерея: лайтбокс ---------- */
#gallery-lightbox { display: none; }
.lightbox-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.92); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close {
  position: absolute; top: 6px; right: 14px;
  font-size: 52px; color: #fff; background: rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.3); border-radius: 4px;
  width: 56px; height: 56px; cursor: pointer; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0; margin: 0;
  transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255,0,0,0.6); border-color: #ff4444; }
.lightbox-close:hover { color: #ff6600; }
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 56px; color: #fff; background: rgba(0,0,0,0.4);
  border: none; cursor: pointer; padding: 30px 12px; z-index: 10001;
  transition: background 0.2s;
}
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(0,0,0,0.7); }
.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }
.lightbox-content {
  max-width: 90%; max-height: 85vh; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.lightbox-image {
  max-width: 100%; max-height: 75vh; object-fit: contain;
  border: 2px solid #fff; border-radius: 2px;
}
.lightbox-caption {
  color: #fff; font-size: 18px; margin-top: 12px;
  text-align: center; padding: 0 20px;
  font-family: var(--font-main);
}
.lightbox-counter {
  color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 4px;
}

/* Галерея: фото-страница навигация */
.photo-nav {
  text-align: center; padding: 8px 0 16px;
}
.photo-nav a {
  color: #0000FF; font-weight: bold; text-decoration: none;
  padding: 6px 16px; margin: 0 8px;
  background: rgba(255,255,255,0.85); border: 1px solid #999;
  border-radius: 4px; font-size: 15px; display: inline-block;
}
.photo-nav a:hover { background: #3399ff; color: #fff; }

/* Галерея: заголовок фото */
.photo-title {
  text-align: center; padding: 0 20px 10px;
  font-size: 22px; color: #000;
  font-family: var(--font-main);
}

/* Галерея: main page grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  padding: 24px;
  max-width: 1024px;
  margin: 0 auto;
}
.gallery-grid-item {
  text-align: center;
}
.gallery-grid-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gallery-grid-item img {
  width: 100%;
  max-width: 320px;
  height: auto;
  border: 3px solid #333;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}
.gallery-grid-item img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.gallery-grid-item .grid-title {
  margin-top: 10px;
  font-size: 22px;
  font-weight: bold;
  color: #0000FF;
  text-decoration: none;
}
.gallery-grid-item .grid-desc {
  font-size: 14px;
  color: #333;
  margin-top: 4px;
}

@media (max-width: 768px) {
	.site-menu > ul {
		flex-direction: column;
	}

	.site-menu .submenu {
		position: static;
		min-width: 0;
	}

	.site-footer .footer-nav {
		line-height: 2.2;
	}

	.site-footer .footer-nav a {
		display: inline-block;
	}

	h1 {
		font-size: 1.5em;
	}

	h2 {
		font-size: 1.25em;
	}

	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		padding: 12px;
	}
	.gallery-grid-item img {
		max-width: 100%;
	}
	.lightbox-prev, .lightbox-next {
		font-size: 36px;
		padding: 20px 6px;
	}
}

@media (max-width: 480px) {
	body {
		font-size: 16px;
	}

	.site-footer .footer-nav a {
		display: block;
		padding: 3px 2px;
	}
}