/* ============================================================
   son.css - раздел "Сонник": толкование сна, сны на букву, поиск.
   Разметку рисуют modulesHoro/ucSon*.ascx, подключает Client/Common/Html/SonHtmlHelper.
   Подсказки поиска - js/mm/son.js, листалку длинных списков - js/list.js.

   Палитра раздела: светло-фиолетовая с голубыми полутонами - сон, ночь, сумерки.
   ============================================================ */

.nmSon {
  font: 15px/1.7 Arial, Helvetica, sans-serif;
  color: #3a3550;
  max-width: 100%;
}

.nmSon a { color: #5f4fa8; }
.nmSon a:hover { color: #3f7fc4; }

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

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

.nmSon .nmCrumbs a { color: #8479b8; text-decoration: none; }
.nmSon .nmCrumbs a:hover { color: #4a7fc1; text-decoration: underline; }

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

.nmSonHead {
  padding: 18px 20px 16px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f1ecfd 0%, #e9f1fd 100%);
  border: 1px solid #e2dbf7;
}

.nmSonHead h1,
.nmSonHead h2 {
  margin: 0 0 8px;
  font: 400 27px/1.3 Georgia, "Times New Roman", serif;
  color: #4b3f86;
}

.nmSonHead h2 { font-size: 22px; }

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

.nmSonCount {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 11px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #ded6f6;
  color: #6a5cb0;
  font-size: 12px;
}

/* --- поиск сна --- */

.nmSonSearch {
  position: relative;
  margin: 14px 0 4px;
}

.nmSonSearchBox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  max-width: 560px;
}

.nmSonSearch .search_input,
.nmSonSearch input[type="text"] {
  flex: 1 1 240px;
  min-width: 180px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #d5cbf2;
  border-radius: 6px;
  background: #fff;
  color: #3a3550;
  font: 15px/38px Arial, Helvetica, sans-serif;
  outline: none;
}

.nmSonSearch .search_input:focus,
.nmSonSearch input[type="text"]:focus {
  border-color: #9d8cdd;
  box-shadow: 0 0 0 3px rgba(157, 140, 221, .18);
}

.nmSonSearch .submit8,
.nmSonSearch input[type="submit"] {
  width: auto;
  height: 38px;
  box-sizing: border-box;
  padding: 0 20px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, #7d6cc9 0%, #5f8fd4 100%);
  color: #fff;
  font: 15px/38px Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.nmSonSearch .submit8:hover,
.nmSonSearch input[type="submit"]:hover { background: linear-gradient(135deg, #6d5cbb 0%, #4f80c8 100%); }

.nmSonSearchHint {
  margin: 8px 0 0;
  color: #8f88a8;
  font-size: 12px;
}

/* --- подсказки поиска --- */

.nmSonSuggest {
  position: absolute;
  z-index: 1100;
  left: 0;
  top: 100%;
  width: 100%;
  max-width: 380px;
  margin-top: 4px;
  padding: 4px 0;
  border: 1px solid #ded6f6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(74, 62, 128, .14);
  max-height: 320px;
  overflow-y: auto;
}

.nmSonSuggestItem {
  display: block;
  padding: 7px 14px;
  color: #4b4468 !important;
  font-size: 14px;
  text-decoration: none;
}

.nmSonSuggestItem:hover,
.nmSonSuggestItem.nmSonSuggestOn {
  background: #f2eefc;
  color: #4b3f86 !important;
  text-decoration: none;
}

/* --- алфавит --- */

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

.nmSonAlpha a,
.nmSonAlpha .nmSonAlphaLink {
  display: inline-block;
  min-width: 32px;
  padding: 6px 9px;
  border: 1px solid #e0d9f6;
  border-radius: 6px;
  background: #fff;
  color: #5b5280;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.nmSonAlpha a:hover {
  border-color: #a695e2;
  background: #f6f3fe;
  color: #5340a0;
}

.nmSonAlpha a.nmSonAlphaOn {
  border-color: transparent;
  background: linear-gradient(135deg, #7d6cc9 0%, #5f8fd4 100%);
  color: #fff;
}

/* --- блок с заголовком --- */

.nmSonBlock {
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid #e7e1f8;
  border-radius: 10px;
  background: #fff;
}

.nmSonBlock > h2,
.nmSonBlock > h3,
.nmSonBlockHead {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #efeafb;
  font: 400 19px/1.35 Georgia, "Times New Roman", serif;
  color: #4b3f86;
}

.nmSonBlockGray { background: #fbfaff; }

/* --- список снов в две колонки --- */

.nmSonList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 18px;
}

.nmSonList a {
  display: block;
  padding: 5px 0 5px 14px;
  position: relative;
  color: #4f4779;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px dotted #ece7f8;
}

.nmSonList a:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b7a9e6;
}

.nmSonList a:hover { color: #3f7fc4; }
.nmSonList a:hover:before { background: #6f9ee0; }

/* --- карточка толкования --- */

/* Толкований на странице десяток, и все они об одном слове. Границу карточки
   держит полоса слева: линия между ними терялась, а короткое толкование
   в две строки выглядело обрубком. */

.nmSonCard {
  position: relative;
  margin-bottom: 14px;
  padding: 12px 14px 13px 16px;
  border-left: 3px solid #e4ddf8;
  border-radius: 0 8px 8px 0;
  background: #f9f7ff;
}

/* Начало карточки отбивает тёмный отрезок полосы - на высоту заголовка. */
.nmSonCard:before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  width: 3px;
  height: 42px;
  background: linear-gradient(180deg, #7d6cc9 0%, #5f8fd4 100%);
}

.nmSonCard:last-child { margin-bottom: 0; }

.nmSonCard h2,
.nmSonCard h3,
.nmSonCard h4 {
  margin: 0 0 6px;
  font: 400 20px/1.35 Georgia, "Times New Roman", serif;
  color: #4b3f86;
}

.nmSonCard h4 { font-size: 17px; }

/* Заголовок карточки - название сонника плашкой: только оно и отличает толкования,
   поэтому плашка здесь крупнее, чем в списках. */
.nmSonCard h2.nmSonCardHead {
  margin-bottom: 10px;
  font-size: 18px;
  color: #5f4fa8;
}

.nmSonCardHead .nmSonType {
  margin-left: 0;
  padding: 5px 15px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 21px;
}

.nmSonCard p {
  margin: 0;
  color: #4a4560;
  line-height: 1.75;
}

.nmSonCard p + p { margin-top: 8px; }

/* Текст толкования: абзацы, буквицу и подзаголовки размечает ArticleTextUtils,
   как в разделах имён и примет. Читают его подряд - отсюда крупный кегль и воздух. */

.nmSonText {
  max-width: 72ch;
  font-size: 16px;
  line-height: 29px;
  color: #3f3a58;
  overflow-wrap: break-word;
}

.nmSonText p { margin: 0 0 1.15em; }
.nmSonText p:last-child { margin-bottom: 0; }
.nmSonText a { color: #5f4fa8; }
.nmSonText a:hover { color: #3f7fc4; }

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

/* Подзаголовок внутри текста. */
.nmSonText .nmSonSub {
  clear: both;
  margin: 30px 0 14px;
  padding: 14px 0 0 14px;
  border-top: 1px solid #efeafb;
  border-left: 3px solid #a695e2;
  font: 700 18px/1.35 Georgia, "Times New Roman", serif;
  color: #4b3f86;
}

.nmSonText .nmSonSub:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.nmSonText .nmSonSub + p { margin-top: 0; }

/* --- бейдж сонника --- */

.nmSonType {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 13px;
  border: 1px solid #e0d8f7;
  border-radius: 14px;
  background: #f2eefd;
  color: #5f4fa8;
  font: 14px/20px Arial, Helvetica, sans-serif;
  vertical-align: middle;
  white-space: nowrap;
}

.nmSonTypeBlue { background: #e9f2fd; border-color: #d6e4f7; color: #3f7fc4; }

/* --- анонс и "читать дальше" --- */

.nmSonAnnounce {
  margin: 0;
  color: #4a4560;
  font-size: 14px;
  line-height: 1.7;
}

.nmSonMore {
  display: inline-block;
  margin-top: 6px;
  color: #5f4fa8;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px dashed #c3b6ea;
}

.nmSonMore:hover { color: #3f7fc4; border-bottom-color: #9ec2ea; }

/* --- ничего не найдено --- */

.nmSonEmpty {
  padding: 18px 20px;
  border: 1px dashed #ded6f6;
  border-radius: 10px;
  background: #faf8ff;
  color: #6b6486;
}

/* --- справка на главной --- */

.nmSonIntro {
  margin-top: 6px;
  color: #4a4560;
}

.nmSonIntro p {
  margin: 0 0 12px;
  line-height: 1.8;
}

.nmSonIntro p:first-child:first-letter {
  float: left;
  margin: 4px 8px 0 0;
  font: 400 46px/40px Georgia, "Times New Roman", serif;
  color: #7d6cc9;
}

/* Боковые блоки раздела (.nmSonAside и его внутренности) живут в общем css/style.css:
   они выводятся и на страницах, где son.css не подключается. */

/* --- листалка длинных списков (js/list.js) --- */

.nmSon .nmPager {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
}

.nmSon .nmPager a {
  display: inline-block;
  min-width: 30px;
  padding: 5px 9px;
  border: 1px solid #e0d9f6;
  border-radius: 6px;
  background: #fff;
  color: #5b5280;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.nmSon .nmPager a:hover { border-color: #a695e2; background: #f6f3fe; }

.nmSon .nmPager a.nmPagerOn {
  border-color: transparent;
  background: linear-gradient(135deg, #7d6cc9 0%, #5f8fd4 100%);
  color: #fff;
}

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

@media (max-width: 900px) {
  .nmSonList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .nmSonHead {
    padding: 14px 14px 12px;
  }

  .nmSonHead h1 { font-size: 22px; }
  .nmSonHead h2 { font-size: 19px; }

  .nmSonBlock { padding: 13px 14px; }

  .nmSonList { grid-template-columns: minmax(0, 1fr); }

  .nmSonSearchBox { max-width: 100%; }

  .nmSonSuggest { max-width: 100%; }

  .nmSonCard h2,
  .nmSonCard h3 { font-size: 18px; }

  .nmSonText { font-size: 17px; line-height: 30px; }

  .nmSonText .nmSonDrop { font-size: 38px; }

  .nmSonType {
    display: inline-block;
    margin: 4px 0 0;
  }
}