/* ==========================================================================
   /tools/name-numerology
   Наследует форму/faq/author/share/hero из bmi-calculator.css.
   ========================================================================== */
@import url("/assets/css/bmi-calculator.css");

/* Ссылки в ответах FAQ и в SEO-тексте */
.nn-page .faq-answer-inner p a,
.nn-seo a {
  color: var(--gold-color, #bda000);
  text-decoration: underline;
  text-decoration-color: rgba(189, 160, 0, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}
.nn-page .faq-answer-inner p a:hover,
.nn-seo a:hover { text-decoration-color: var(--gold-color, #bda000); }

/* ==========================================================================
   PAGE & HERO
   ========================================================================== */
.nn-page { background: #fdf7f6 !important; }

.nn-hero {
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(253, 247, 246, 0.55) 0%, rgba(253, 247, 246, 0) 70%),
    url("/assets/images/name-numerology-hero-bg.webp") center / cover no-repeat,
    linear-gradient(180deg, #ffffff 0%, #f7e6e5 100%) !important;
  border-bottom-color: #efc9c8 !important;
}
.nn-hero .mb-hero-title span::after {
  background: linear-gradient(90deg, rgba(247, 203, 202, 0.7), rgba(189, 160, 0, 0.35));
}

.nn-reset { position: static; margin-top: 16px; width: auto; }
.nn-share { margin-bottom: 32px; }

/* ==========================================================================
   РЕЗУЛЬТАТ
   ========================================================================== */
.nn-result { margin-top: 22px; }
.nn-result[hidden] { display: none; }

.nn-card {
  background: #ffffff;
  border: 1px solid #eee6e6;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 18px 40px -26px rgba(60, 30, 30, 0.35);
  animation: nn-fade .4s ease both;
}
@keyframes nn-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* шапка: большое число + архетип */
.nn-head {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid #f2ecec;
}

.nn-num {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 46px;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #d8b43a, #bda000);
  box-shadow: 0 10px 22px -8px rgba(189, 160, 0, 0.6);
}

.nn-headtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nn-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #b58e8a;
}
.nn-arch {
  font-family: "Montserrat", sans-serif;
  font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1;
  color: var(--main-bg-color, #1c1c1c);
}
.nn-keys { font-size: 14px; color: var(--dark-text-color, #6a6a6a); }

/* разбор по буквам */
.nn-calc-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.nn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nn-chip {
  display: inline-flex; align-items: baseline; gap: 2px;
  padding: 6px 10px;
  background: #faf8f8; border: 1px solid #f1ebeb; border-radius: 9px;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 14px;
  color: var(--main-bg-color, #2b2b2b);
}
.nn-chip i { font-style: normal; font-size: 11px; font-weight: 800; color: #c9a93a; }
.nn-sum {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 15px;
  color: var(--gold-color, #bda000); white-space: nowrap;
}

.nn-desc {
  margin: 0 0 14px !important;
  font-size: 15.5px; line-height: 1.7; color: var(--main-bg-color, #2b2b2b);
}
.nn-desc b { color: var(--main-bg-color, #1c1c1c); }

.nn-note {
  margin: 0 !important;
  padding: 12px 16px;
  background: #fbf2f1; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55; color: var(--dark-text-color, #6a6a6a);
}

@media (max-width: 600px) {
  .nn-card { padding: 20px; }
  .nn-head { gap: 16px; }
  .nn-num { width: 76px; height: 76px; font-size: 38px; }
  .nn-arch { font-size: 21px; }
}

/* ==========================================================================
   Таблица букв в SEO-блоке
   ========================================================================== */
.nn-letters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 20px 0;
}
.nn-letters div {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px;
  background: #faf8f8; border: 1px solid #f1ebeb; border-radius: 10px;
  font-size: 15px; line-height: 1.4;
}
.nn-letters b {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 17px;
  color: var(--gold-color, #bda000); min-width: 14px;
}

/* Подзаголовки в SEO-блоке */
.nn-seo h3 {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 17px;
  color: var(--main-bg-color, #1c1c1c); margin: 22px 0 12px;
}

/* Таблица «число популярных имён» */
.nn-names {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin: 12px 0 18px;
}
.nn-names div {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: #faf8f8; border: 1px solid #f1ebeb; border-radius: 10px;
  font-size: 14.5px; color: var(--main-bg-color, #2b2b2b);
}
.nn-names b {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #d8b43a, #bda000);
  color: #fff; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 15px;
}
.nn-names span { font-weight: 600; }