@charset "UTF-8";
/* =========================================================================
   Лебеди — базовые (общие) стили
   Один файл объединяет бывшие style1.css, style12.css, areal.css
   и пять «птичьих» файлов (Chernii/Klikun/Trubach/Para/Photo).
   Частные стили страниц лежат отдельно (например css/gallery.css)
   и только ДОПОЛНЯЮТ этот базовый слой.
   ========================================================================= */

/* --- Дизайн-токены ---------------------------------------------------- */
:root {
  --page-max: 1014px;               /* историческая ширина макета */
  --color-primary: #004b91;         /* заголовки, тёмно-синий */
  --color-text: #2664ae;            /* основной текст */
  --color-text-soft: #205493;       /* текст в боковых блоках */
  --color-link: #1e77c8;
  --color-link-visited: #80bfea;
  --color-accent: #409bca;          /* ховеры/акцент */
  --color-border: #38a3d9;
  --color-white: #fff;
  --font-base: Verdana, Arial, Helvetica, sans-serif;
  --font-head: Georgia, "Times New Roman", Times, serif;
  --fs-base: 12px;
  --space: 8px;
  --radius: 5px;
}

/* --- Сброс/нормализация ----------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll;   /* всегда показывать вертикальный скролл —
                           центрированный макет не «прыгает» между страницами */
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: #fff;
}

img {
  border: 0;
  max-width: 100%;   /* картинки не ломают сетку на узких экранах */
  height: auto;
}

a { color: var(--color-link); }
a:visited { color: var(--color-link-visited); }

/* --- Типографика ------------------------------------------------------ */
h1 {
  font-size: 14px;
  color: var(--color-primary);
  font-weight: bold;
  font-family: var(--font-base);
  text-align: center;
}
h5 {
  color: var(--color-primary);
  text-align: center;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: bold;
}
p { text-indent: 20px; }

/* --- Контейнер -------------------------------------------------------- */
.all {
  width: 100%;
  min-width: 840px;          /* фиксированный диапазон макета */
  max-width: var(--page-max); /* 1014px */
  margin: 0 auto;
  position: relative;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background-image: url("../img/01_20.png");
  background-repeat: no-repeat;
  background-position: right bottom;
}

/* --- Шапка ------------------------------------------------------------ */
.heder {
  position: relative;
  height: 169px;
  background-image: url(../img/00.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  margin: 0;
  padding: 0;
}

.heder .menu1 {
  width: 560px;
  max-width: 70%;
  padding-top: 145px;
  float: left;
}
.heder .menu1 a,
.heder .menu1 div {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  float: left;
  padding: 4px;
  margin-left: 7px;
}
.heder .menu1 a { color: var(--color-white); }
.heder .menu1 a:hover {
  color: var(--color-accent);
  background-color: var(--color-white);
  border-radius: var(--radius);
}
.heder .menu1 div {           /* активный пункт меню */
  color: var(--color-accent);
  background-color: var(--color-white);
  margin-top: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Птица в шапке — единое положение на ВСЕХ страницах:
   базовая позиция «Образ жизни» (left 560px) + сдвиг вправо → left 620px.
   Раньше «птичьих» css-файлов было 5 — теперь варианты по классу body. */
.heder .pic,
.heder .picPhoto {
  position: absolute;
  top: 0;
  left: 620px;
  display: block;
  height: 206px;
  width: 215px;
  background-repeat: no-repeat;
  background-position: right top;
}
/* страницы, где птица — обычный <img> внутри ссылки «на главную» */
.heder > a img {
  position: absolute;
  top: 0;
  left: 620px;
}
.heder .pic        { background-image: url("../img/01_01.png"); }
.heder .picPhoto   { background-image: url("../img/03.png"); }   /* по умолчанию (ареал) */
body.s-klikun  .heder .picPhoto { background-image: url("../img/04.png"); }
body.s-trubach .heder .picPhoto { background-image: url("../img/05.png"); }
body.s-chernii .heder .picPhoto { background-image: url("../img/06.png"); }
body.s-para    .heder .picPhoto { background-image: url("../img/02_12.png"); }

/* --- Контент (3 колонки) ---------------------------------------------
   .content НЕ позиционируем: абсолютные .menu2 и .info должны отсчитываться
   от .all (как в исходном макете), иначе они «съезжают» вниз на высоту шапки. */
.content { position: static; }

.content .menu2 {
  position: absolute;
  top: 200px;
  left: 21px;
  width: 200px;
  text-align: center;
  z-index: 4;
}
.content .menu2 a { color: var(--color-link); }

.content .cont {
  /* min-height задаётся скриптом (js/site.js) под высоту боковых колонок,
     чтобы футер не «отрывался» на коротких страницах и не налезал на колонки.
     Фолбэк без JS — небольшой. */
  min-height: 200px;
  /* box-sizing: border-box → ширина включает padding.
     Исходный макет: 550px текста + 241px левого отступа = 791px. */
  width: 791px;
  padding-left: 241px;
  padding-top: 20px;
  position: relative;
  z-index: 2;
}
.cont p {
  color: var(--color-text);
  text-indent: 20px;
  font-size: var(--fs-base);
  text-align: justify;
  margin: var(--space);
}

.content .info {
  position: absolute;
  left: 830px;
  top: 170px;
  width: 150px;
  z-index: 24;
}
.info img { display: block; margin: 0 auto -10px; } /* по центру колонки */
.content .info p {
  font-size: 11px;
  color: var(--color-text-soft);
  text-align: justify;
  display: block;
  margin-bottom: 30px;
}

/* Картинки в среднем столбце — по центру по горизонтали.
   Фотоальбом (.gallery) не трогаем — у него своя сетка. */
.content .cont img {
  display: block;
  margin: 10px auto;
}
.content .cont .gallery img { margin: 0; }

/* таблицы (ареал / строение) */
.all .content div table { margin: 20px 0 0 20px; }
.content div table tr td a img { display: block; margin: 20px; }

/* =========================================================================
   Кликабельные картинки (внутри ссылок) — вид как карточки фотоальбома:
   рамка, скруглённые углы, лёгкий ховер. Размеры самих картинок не меняем.
   Исключения: шапка (.heder — не входит в .content) и сами карточки
   галереи (.gallery__item, у них рамка уже на ссылке).
   ========================================================================= */
.content a:not(.gallery__item) img {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #eef6fc;
  transition: transform .2s ease, box-shadow .2s ease;
}
.content a:not(.gallery__item):hover img {
  transform: scale(1.04);
  box-shadow: 0 2px 12px rgba(0, 30, 60, .25);
}

/* --- Подвал ----------------------------------------------------------- */
.footer {
  position: relative;
  height: 145px;
  margin-top: -18px;
  clear: both;
  background-image: url("../img/01_29.png");
  background-repeat: no-repeat;
  background-position: left top;
}
.footer > div {
  float: left;
  margin-top: 125px;
  font-size: var(--fs-base);
}
.footer .menu3 {
  float: right;
  height: 20px;
  color: var(--color-white);
  text-align: right;
  padding-right: 10px;
}
/* левый блок — имя-ссылка, как обычная ссылка сайта, но без подчёркивания */
.footer .copyright { padding-left: 20px; }
.footer .copyright a {
  color: var(--color-link);
  text-decoration: none;
}
/* правое меню — белые, не жирные; при наведении синие (цвет текста) и жирные */
.footer .menu3 a {
  color: var(--color-white);
  font-weight: normal;
  text-decoration: none;
}
.footer .menu3 a:hover {
  color: var(--color-text);
  font-weight: bold;
}

/* =========================================================================
   Легаси-классы из старого style12.css (нужны существующей разметке)
   ========================================================================= */
.style12 {
  color: var(--color-text);
  margin: var(--space) 0 0;
  text-indent: 20pt;
  font-family: var(--font-base);
  font-size: var(--fs-base);
}
.style6,
.style16 { color: #369; font-size: 10px; font-weight: bold; font-family: var(--font-base); }
.style16 { color: #069; font-weight: normal; }
.style14 { color: var(--color-text-soft); font-size: 11px; font-family: var(--font-base); }

.a1:link, .a1:visited,
.a2:link, .a2:visited { font-size: var(--fs-base); font-family: var(--font-base); }
.a1:link { color: var(--color-primary); }
.a1:visited { color: #06c; }
.a2:link { color: var(--color-white); }
.a2:visited { color: #06c; }

/* =========================================================================
   Лайтбокс — общий компонент (используется на главной, в разделах и альбоме).
   Логика — в js/site.js (срабатывает на любых ссылках a[data-lightbox]).
   ========================================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 30, 60, .9);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
  border-radius: 4px;
  background: #fff;
}
.lightbox__btn {
  position: absolute;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  font-size: 28px;
  line-height: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .28); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__caption {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  color: #cfe6f7;
  font-size: 12px;
}