/* =========================================================================
   site.css — небольшие дополнения к landing.css для PHP-сайта
   ========================================================================= */

/* учитываем 72px sticky-хедер при якорных переходах */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Material Symbols inline размер по умолчанию */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: -0.15em;
  user-select: none;
}

/* подсветка успешной отправки сразу под формой (для no-JS варианта) */
.sv-form__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--success-container);
  color: var(--neutral-900);
  font-size: var(--fs-body-sm);
  margin-bottom: var(--sp-5);
  border: 1px solid #c8e6c9;
}
.sv-form__alert--err {
  background: var(--error-container);
  border-color: #f5c2c2;
  color: #5a1212;
}
.sv-form__alert .material-symbols-outlined {
  color: var(--success);
  font-size: 22px;
  flex-shrink: 0;
}
.sv-form__alert--err .material-symbols-outlined { color: var(--error); }

/* мобильное меню скрыто по умолчанию, открывается через JS */
.sv-nav--mobile { display: none; }
.sv-nav--mobile.is-open { display: flex; }

/* honeypot — должно быть невидимо для людей, доступно для ботов */
.sv-form__honey {
  position: absolute !important;
  left: -10000px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* доступность: skip-link */
.sv-skip {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.sv-skip:focus {
  position: fixed; left: var(--sp-4); top: var(--sp-4);
  width: auto; height: auto;
  padding: 10px 16px;
  background: var(--primary); color: var(--white);
  border-radius: var(--radius-md);
  z-index: 100;
}

/* =========================================================================
   Всплывающее уведомление о сборе статистики (Яндекс Метрика)
   ========================================================================= */
.sv-metrika-notice {
  position: fixed;
  left: var(--sp-5, 20px);
  bottom: var(--sp-5, 20px);
  z-index: 90;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3, 12px);
  width: min(380px, calc(100vw - 32px));
  padding: 14px 16px;
  background: var(--surface, #ffffff);
  color: var(--fg1, #102846);
  border: 1px solid var(--border, rgba(16, 40, 70, 0.10));
  border-radius: var(--radius-lg, 16px);
  box-shadow:
    0 1px 2px rgba(16, 40, 70, 0.04),
    0 18px 40px -12px rgba(16, 40, 70, 0.22);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-md, 220ms) var(--ease-standard, ease),
    transform var(--dur-md, 220ms) var(--ease-standard, ease);
}
.sv-metrika-notice[hidden] { display: none; }
.sv-metrika-notice.is-visible { opacity: 1; transform: translateY(0); }

.sv-metrika-notice__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-50, #e6f1fb);
  color: var(--primary, #006495);
  border-radius: 10px;
}
.sv-metrika-notice__icon .material-symbols-outlined { font-size: 20px; }

.sv-metrika-notice__body { flex: 1 1 auto; min-width: 0; }
.sv-metrika-notice__title {
  margin: 0 0 2px;
  font-family: var(--font-sans-display, inherit);
  font-weight: var(--w-bold, 600);
  font-size: var(--fs-body, 15px);
  line-height: 1.25;
  color: var(--fg1, #102846);
}
.sv-metrika-notice__text {
  margin: 0;
  font-size: var(--fs-body-sm, 13px);
  line-height: 1.45;
  color: var(--fg2, #4a5b73);
}
.sv-metrika-notice__text a {
  color: var(--primary, #006495);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sv-metrika-notice__text a:hover { text-decoration: none; }

.sv-metrika-notice__ok {
  flex-shrink: 0;
  align-self: center;
  min-width: 56px;
}

@media (max-width: 480px) {
  .sv-metrika-notice {
    left: 12px; right: 12px; bottom: 12px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-metrika-notice {
    transition: none;
    transform: none;
  }
}