/* ============================================================
   imena.css - раздел "Тайна имени": имя, имена на букву, поиск.
   Разметку рисуют modulesImena/*.ascx, подключает Client/Common/Html/ImenaHtmlHelper.
   Листает длинные списки js/list.js.
   ============================================================ */

.nmImena {
  font: 15px/1.7 Arial, Helvetica, sans-serif;
  color: #2f3a44;
  max-width: 100%;
}

/* --- крошки --- */

.nmCrumbs {
  font-size: 12px;
  color: #8d9aa6;
  margin-bottom: 12px;
}

.nmCrumbs a { color: #7d94a8; text-decoration: none; }
.nmCrumbs a:hover { color: #2b6ca3; text-decoration: underline; }
.nmCrumbsSep { margin: 0 6px; color: #c8d6e2; }
.nmCrumbsCurrent { color: #48586a; }

/* --- шапка раздела --- */

.nmImenaHead {
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid #e3eff8;
}

.nmImenaHead h1 {
  margin: 0 0 10px;
  font: 400 28px/1.3 Georgia, "Times New Roman", serif;
  color: #1e4c72;
}

.nmImenaIntro {
  margin: 0;
  max-width: 70ch;
  color: #667889;
  font-size: 14px;
  line-height: 1.65;
}

.nmImenaCount {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 11px;
  border-radius: 12px;
  background: #eaf4fc;
  color: #4b7fa8;
  font-size: 12px;
}

/* --- алфавит и переключатель пола --- */

.nmImenaTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 16px;
}

.nmImenaTabs a {
  display: inline-block;
  min-width: 32px;
  padding: 6px 9px;
  border: 1px solid #d9e7f2;
  border-radius: 3px;
  background: #fff;
  color: #4b6579;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.nmImenaTabs a:hover { border-color: #7fb4dc; background: #f4fafe; color: #2b6ca3; }

/* Общий style.css вешает на a.hrs:hover шрифт large и свой padding - кнопка прыгала
   под курсором. Перебиваем весом селектора, размеры держим одинаковыми во всех состояниях. */
.nmImenaTabs a,
.nmImenaTabs a:visited,
.nmImenaTabs a:hover,
.nmImenaTabs a.hr, .nmImenaTabs a.hr:hover,
.nmImenaTabs a.hrs, .nmImenaTabs a.hrs:hover,
.nmImenaTabs a.hred, .nmImenaTabs a.hred:hover,
.nmImenaTabs a.hrsed, .nmImenaTabs a.hrsed:hover {
  font-size: 14px;
  padding: 6px 9px;
  text-decoration: none;
}

.nmImenaTabs a.hrsed,
.nmImenaTabs a.hred,
.nmImenaTabs a.nmImenaTabOn {
  border-color: #2b6ca3;
  background: #2b6ca3;
  color: #fff;
  font-weight: 700;
}

/* пол: те же кнопки, но пошире - в них слова, а не буквы */
.nmImenaTabsGender { margin-bottom: 20px; }

.nmImenaTabsGender a,
.nmImenaTabsGender a:hover,
.nmImenaTabsGender a.hr, .nmImenaTabsGender a.hr:hover,
.nmImenaTabsGender a.hred, .nmImenaTabsGender a.hred:hover { min-width: 0; padding: 6px 13px; }

/* --- сетка имён --- */

.nmImenaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.nmImenaCard {
  display: block;
  padding: 11px 14px;
  border: 1px solid #e0ecf6;
  border-radius: 4px;
  background: #fff;
  color: #23628f;
  text-decoration: none;
  font: 700 16px/1.35 Georgia, "Times New Roman", serif;
  min-width: 0;
  overflow-wrap: break-word;
}

.nmImenaCard:hover {
  border-color: #a9cfec;
  background: #f7fbfe;
  color: #2b6ca3;
  text-decoration: none;
  box-shadow: 0 1px 5px rgba(43, 108, 163, .10);
}

/* --- список найденного: имя и кусок описания --- */

.nmImenaFound { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.nmImenaFoundItem {
  padding: 14px 16px;
  border: 1px solid #e0ecf6;
  border-radius: 4px;
  background: #fff;
}

.nmImenaFoundItem h2 {
  margin: 0 0 6px;
  font: 400 20px/1.3 Georgia, "Times New Roman", serif;
}

.nmImenaFoundItem h2 a { color: #1e4c72; text-decoration: none; }
.nmImenaFoundItem h2 a:hover { color: #2b6ca3; text-decoration: underline; }

.nmImenaFoundText { margin: 0; font-size: 14px; line-height: 1.6; color: #667889; }

.nmImenaFoundMore { margin-left: 6px; white-space: nowrap; color: #4b7fa8; }

/* --- листалка длинных списков --- */

.nmPager {
  display: none;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 16px;
}

.nmPager a,
.nmPager a:visited,
.nmPager a:hover {
  display: inline-block;
  min-width: 32px;
  padding: 6px 9px;
  border: 1px solid #d9e7f2;
  border-radius: 3px;
  background: #fff;
  color: #4b6579;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.nmPager a:hover { border-color: #7fb4dc; background: #f4fafe; color: #2b6ca3; }

.nmPager a.nmPagerOn,
.nmPager a.nmPagerOn:hover {
  border-color: #2b6ca3;
  background: #2b6ca3;
  color: #fff;
  font-weight: 700;
}

/* --- страница одного имени --- */

.nmImenaAlone h1 {
  margin: 0 0 8px;
  font: 400 30px/1.3 Georgia, "Times New Roman", serif;
  color: #1e4c72;
}

.nmImenaMeta {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8f1f8;
  font-size: 13px;
  color: #93a7b8;
}

.nmImenaMetaSep { margin: 0 6px; color: #c8d6e2; }

/* Текст: крупный, с воздухом - значение имени читают подряд. */
.nmImenaText {
  max-width: 72ch;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 29px;
  color: #333c45;
  overflow-wrap: break-word;
}

.nmImenaText p { margin: 0 0 1.15em; }

.nmImenaText p:last-child { margin-bottom: 0; }

/* Подзаголовок внутри текста: "Характер", "Судьба". */
.nmImenaText .nmImenaSub {
  clear: both;
  margin: 34px 0 14px;
  padding: 14px 0 0 14px;
  border-top: 1px solid #e3eff8;
  border-left: 3px solid #7fb4dc;
  font: 700 19px/1.35 Georgia, "Times New Roman", serif;
  color: #1e4c72;
  letter-spacing: .01em;
}

.nmImenaText .nmImenaSub:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.nmImenaText .nmImenaSub + p { margin-top: 0; }

/* Буквица: первая буква абзаца, как в книге. */
.nmImenaText .nmImenaDrop {
  float: left;
  margin: 6px 2px 0 0;
  font-family: "Old Standard TT", Georgia, "Times New Roman", serif;
  font-size: 38px;
  line-height: 0.5;
  color: #2b6ca3;
}

/* --- блоки снизу: день ангела и совместимость --- */

.nmImenaBlock {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 2px solid #e3eff8;
}

.nmImenaBlock h2 {
  margin: 0 0 12px;
  font: 400 20px/1.3 Georgia, "Times New Roman", serif;
  color: #1e4c72;
}

.nmImenaAngel {
  margin: 0;
  padding: 12px 16px;
  border-radius: 4px;
  background: #f2f8fd;
  color: #3c5769;
  font-size: 15px;
  line-height: 1.7;
}

.nmImenaGroup { margin-bottom: 14px; }

.nmImenaGroupName {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  color: #93a7b8;
}

.nmImenaChips { display: flex; flex-wrap: wrap; gap: 6px; }

.nmImenaChips a,
.nmImenaChips a:visited,
.nmImenaChips a:hover {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid #dceaf5;
  border-radius: 14px;
  background: #fff;
  color: #3f6f95;
  font-size: 14px;
  text-decoration: none;
}

.nmImenaChips a:hover { border-color: #7fb4dc; background: #f4fafe; color: #2b6ca3; }

/* --- поиск имени --- */

.nmImenaSearch {
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid #dceaf5;
  border-radius: 4px;
  background: #f7fbfe;
}

/* Поле и кнопка стоят рядом: расширитель подсказок вставляет между ними свой
   пустой div, из-за него в таблице зияла дырка. */
.nmImenaSearchBox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nmImenaSearch .search_input {
  width: 260px;
  max-width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #cfe0ee;
  border-radius: 3px;
  background: #fff;
  font: 14px Arial, Helvetica, sans-serif;
  color: #2f3a44;
  box-sizing: border-box;
}

/* Общий style.css держит .submit8 на картинке размером 83x22 - рядом с полем
   кнопка выходила ниже. Внутри раздела задаём размеры сами, остальной сайт не трогаем. */
.nmImenaSearch .submit8 {
  width: auto;
  height: 34px;
  padding: 0 18px;
  border: 1px solid #2b6ca3;
  border-radius: 3px;
  background: #2b6ca3;
  color: #fff;
  font: 700 14px Arial, Helvetica, sans-serif;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
}

.nmImenaSearch .submit8:hover { background: #23628f; }



/* --- справка в начале статьи (ArticleHtmlHelper.Facts) --- */

.nmFacts {
  width: 100%;
  max-width: 72ch;
  margin: 0 0 22px;
  border-collapse: collapse;
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  color: #333c45;
}

.nmFacts tr { border-bottom: 1px solid #eef4f9; }

.nmFacts tr:last-child { border-bottom: none; }

.nmFacts tr:nth-child(odd) { background: #f7fbfe; }

.nmFacts th {
  width: 220px;
  padding: 10px 14px;
  color: #7d94a8;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.nmFacts td {
  padding: 10px 14px;
  vertical-align: top;
}

/* женское имя - розовая гамма, как остальной раздел */
.nmImenaW .nmFacts tr { border-bottom-color: #f9e8f0; }
.nmImenaW .nmFacts tr:nth-child(odd) { background: #fdf5f9; }
.nmImenaW .nmFacts th { color: #b1789a; }

/* на телефоне вместо колонок - название над значением */
@media (max-width: 700px) {
  .nmFacts, .nmFacts tbody, .nmFacts tr, .nmFacts th, .nmFacts td { display: block; width: auto; }

  .nmFacts tr { padding: 8px 0; }

  .nmFacts th {
    padding: 0 0 2px;
    font-size: 13px;
    white-space: normal;
  }

  .nmFacts td { padding: 0; }
}

/* --- подсказки при наборе имени (js/mm/imena.js) --- */

.nmImenaSuggestBox { position: relative; display: inline-block; }

.nmImenaSuggest {
  display: none;
  position: absolute;
  z-index: 1100;
  left: 0;
  top: 100%;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 2px;
  border: 1px solid #cfe0ee;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(43, 108, 163, .15);
  text-align: left;
}

.nmImenaSuggest a.nmImenaSuggestItem,
.nmImenaSuggest a.nmImenaSuggestItem:visited {
  display: block;
  padding: 7px 12px;
  border-bottom: 1px solid #f0f6fb;
  color: #23628f;
  font: 14px Arial, Helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}

.nmImenaSuggest a.nmImenaSuggestItem:last-child { border-bottom: none; }

.nmImenaSuggest a.nmImenaSuggestItem:hover,
.nmImenaSuggest a.nmImenaSuggestOn,
.nmImenaSuggest a.nmImenaSuggestOn:hover {
  background: #eaf4fc;
  color: #1e4c72;
  text-decoration: none;
}


/* женская подсказка - розовая, как весь раздел для женских имён */
.nmImenaSuggest a.nmImenaSuggestItem.nmImenaW,
.nmImenaSuggest a.nmImenaSuggestItem.nmImenaW:visited { color: #a8386f; }

.nmImenaSuggest a.nmImenaSuggestItem.nmImenaW:hover,
.nmImenaSuggest a.nmImenaSuggestItem.nmImenaW.nmImenaSuggestOn {
  background: #fdeef5;
  color: #8f2e5e;
}

/* --- буквы имени: справочная табличка на главной раздела --- */

.nmImenaLetters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.65;
  color: #4b5c6b;
}

.nmImenaLetters a { font-weight: 700; color: #2b6ca3; text-decoration: none; }
.nmImenaLetters a:hover { color: #1e4c72; text-decoration: underline; }

/* --- пусто --- */

.nmImenaEmpty {
  padding: 18px;
  border: 1px dashed #d9e7f2;
  border-radius: 4px;
  color: #8194a5;
  text-align: center;
}


/* ============================================================
   Цвет по полу: мужские имена - голубые (базовая тема выше), женские - розовые.
   Класс вешается на корень раздела (страница имени, список с выбранным полом)
   и на каждую карточку, когда показываем всех подряд. Считает его
   ImenaHelper.GetGenderClass, значок рисует ImenaHtmlHelper.Sex.
   ============================================================ */

/* --- значок пола --- */

.nmImenaSex {
  margin-right: 5px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
}

.nmImenaSexM { color: #5aa2d6; }
.nmImenaSexW { color: #d76ba0; }

/* --- карточка женского имени --- */

.nmImenaCard.nmImenaW {
  border-color: #f3dbe7;
  color: #a8386f;
}

.nmImenaCard.nmImenaW:hover {
  border-color: #e6a9c6;
  background: #fef7fa;
  color: #c4457f;
  box-shadow: 0 1px 5px rgba(168, 56, 111, .10);
}

.nmImenaFoundItem.nmImenaW { border-color: #f3dbe7; }
.nmImenaFoundItem.nmImenaW h2 a { color: #a8386f; }
.nmImenaFoundItem.nmImenaW h2 a:hover { color: #c4457f; }

/* --- кнопка выбранного пола --- */

.nmImenaTabs a.hred.nmImenaW,
.nmImenaTabs a.hrsed.nmImenaW,
.nmImenaTabs a.hred.nmImenaW:hover,
.nmImenaTabs a.hrsed.nmImenaW:hover {
  border-color: #c4457f;
  background: #c4457f;
  color: #fff;
}

.nmImenaTabs a.hred.nmImenaW .nmImenaSex,
.nmImenaTabs a.hrsed.nmImenaW .nmImenaSex { color: #fff; }

.nmImenaTabs a.nmImenaW:hover { border-color: #e6a9c6; background: #fef7fa; color: #c4457f; }

/* --- раздел целиком в розовых тонах --- */

.nmImenaW.nmImenaAlone h1,
.nmImenaW .nmImenaHead h1,
.nmImenaW .nmImenaBlock h2 { color: #8f2e5e; }

.nmImenaW .nmImenaHead { border-bottom-color: #f7e2ec; }

.nmImenaW .nmImenaCount { background: #fdeef5; color: #a8386f; }

.nmImenaW .nmCrumbs a:hover { color: #c4457f; }

.nmImenaW .nmImenaMeta { border-bottom-color: #f7e2ec; }

.nmImenaW .nmImenaText .nmImenaDrop { color: #c4457f; }

.nmImenaW .nmImenaText .nmImenaSub {
  border-top-color: #f7e2ec;
  border-left-color: #e6a9c6;
  color: #8f2e5e;
}

.nmImenaW .nmImenaBlock { border-top-color: #f7e2ec; }

.nmImenaW .nmImenaAngel { background: #fdeef5; color: #6e4356; }

.nmImenaW .nmImenaChips a,
.nmImenaW .nmImenaChips a:visited { border-color: #f3dbe7; color: #a8386f; }

.nmImenaW .nmImenaChips a:hover { border-color: #e6a9c6; background: #fef7fa; color: #c4457f; }

.nmImenaW .nmImenaTabs a:hover { border-color: #e6a9c6; background: #fef7fa; color: #c4457f; }

.nmImenaW .nmImenaTabs a.hrsed,
.nmImenaW .nmImenaTabs a.hrsed:hover {
  border-color: #c4457f;
  background: #c4457f;
  color: #fff;
}

.nmImenaW .nmPager a:hover { border-color: #e6a9c6; background: #fef7fa; color: #c4457f; }

.nmImenaW .nmPager a.nmPagerOn,
.nmImenaW .nmPager a.nmPagerOn:hover {
  border-color: #c4457f;
  background: #c4457f;
  color: #fff;
}


/* --- посещённые ссылки на страницу имени --- */

.nmImenaCard.hdet:visited,
.nmImenaFoundItem h2 a.hdet:visited,
.nmImenaChips a.hdet:visited { color: #7a6ca6; }

/* у женских имён оттенок теплее, чтобы не спорил с розовой гаммой */
.nmImenaCard.nmImenaW.hdet:visited,
.nmImenaW .nmImenaFoundItem h2 a.hdet:visited,
.nmImenaFoundItem.nmImenaW h2 a.hdet:visited { color: #9c6b8a; }

.nmImenaSuggest a.nmImenaSuggestItem.hdet:visited { color: #7a6ca6; }

/* --- телефон --- */

@media (max-width: 700px) {
  .nmImena { font-size: 16px; }
  .nmImenaHead h1 { font-size: 23px; }
  .nmImenaAlone h1 { font-size: 24px; }
  .nmImenaText { font-size: 16px; line-height: 28px; }
  .nmImenaGrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .nmImenaTabs a { min-width: 34px; padding: 8px 10px; }
  .nmImenaLetters { grid-template-columns: minmax(0, 1fr); }
}