/* ====== Токены бренда ====== */
:root {
  --sm-red: #B44646;
  --sm-primary: #00A8A8;
  --sm-jade: #0C6980;
  --sm-jade-hover: #075062;
  --sm-pistachio: #EBF0F1;
  --sm-pistachio-hover: #DFE9EC;
}

/* ====== База типографики ====== */
body { font-family: Inter, sans-serif; font-size: 16px; line-height: 24px; }
strong { font-weight: 800; }
.h1, h1 { font-weight: 500; font-size: 32px; line-height: 40px; }
.h2, h2 { font-weight: 600; font-size: 28px; line-height: 36px; }
.h3, h3 { font-weight: 600; font-size: 22px; line-height: 28px; }
span.site-logo { font-weight: 900; font-size: 28px; line-height: 60px; text-transform: uppercase; }

.logo { width: 48px; height: 48px; border: 0 solid rgba(0,0,0,.1); border-radius: 8px; }
img.lang { border: 1px solid rgba(0,0,0,.1); border-radius: 4px; margin-right: 8px; }
a.navbar-brand { font-size: 16px; }

/* ====== Шапка/футер/плашки ====== */
.footer { background: rgba(0,0,0,.85); color: var(--sm-pistachio); }
a.footer-link { color: var(--sm-pistachio); }
a.footer-link:hover { color: var(--sm-pistachio-hover); }

div.warning { background: var(--sm-red); color: #fff; }

/* ====== Hero / landing ====== */
div.landing { background: var(--sm-jade); color: #fff; }
div.landing-pistachio { background: var(--sm-pistachio); }
div.landing .container { background: url("/images/top-bg.png") no-repeat right top; }

/* Единый блок для подписи в герое */
.landing .caption{
  font-weight: 500;
  font-size: clamp(18px, 5vw, 32px);
  line-height: 1.25;
  max-width: 800px;
  hyphens: none;
  word-break: normal;
  overflow-wrap: anywhere;
  margin-bottom: 0; /* дальше управляем через .landing-links */
}

/* Зазор между caption и кнопками — fluid */
.landing-links{ margin-top: clamp(16px, 6vw, 118px); margin-bottom: 0; }

/* Кнопки-CTA: flex + gap вместо маргинов */
.call-to-action{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  padding: 0;
}

/* База для кнопок в hero */
.call-to-action .btn{
  border-radius: 12px;
  padding: 12px 16px;
  background: #fff;
  color: rgba(0,0,0,.85);
  border: 0;
  font-size: 20px;
  line-height: 28px;
  text-decoration: none;
}
.call-to-action .btn:hover{
  background: rgba(255,255,255,.9);
  color: rgba(0,0,0,.85);
}

/* Варианты цветов CTA */
.call-to-action .btn.action-extra{ color: #fff; background: rgba(255,255,255,.15); }
.call-to-action .btn.action-extra:hover{ color: #fff; background: rgba(255,255,255,.05); }

.call-to-action .btn.link-pistachio{ background: var(--sm-pistachio); }
.call-to-action .btn.link-pistachio:hover{ background: var(--sm-pistachio-hover); }

.call-to-action .btn.link-jade{ color: #fff; background: var(--sm-jade); }
.call-to-action .btn.link-jade:hover{ color: #fff; background: var(--sm-jade-hover); }

/* Эмодзи/иконка в кнопке магазина */
.call-to-action .btn.shop{ display: inline-flex; align-items: center; gap: .5rem; }

/* ====== Навигация (пилюли) ====== */
li.level-1 > a,
a.social-top{
  border-radius: 12px;
  margin-left: 4px;
  background: #fff;
  padding: 12px 6px;
  color: rgba(0,0,0,.85);
  text-decoration: none;
}
li.level-1 > a:hover,
a.social-top:hover{ background: rgba(0,0,0,.05); }

/* Зеленая пилюля в меню (отдельно от CTA) */
li.level-1 > a.link-jade{ background: var(--sm-jade); color: #fff; }
li.level-1 > a.link-jade:hover{ background: var(--sm-jade-hover); color: #fff; }

li.nav-item i{ color: rgba(0,0,0,.85); font-size: 22px; line-height: 28px; }

/* Пункты dropdown 2-го уровня в меню */
li.level-2 > a{
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
}

/* ====== Dropdown caret (split) как «оверлей» ====== */
li.level-1.dropdown > a.btn,
li.level-1.dropdown > a{ padding-right: 2rem; } /* место под caret */

button.dropdown-toggle-split{
  margin-left: -2rem;  /* накрываем край ссылки */
  width: 2rem;
  padding: 12px 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}
.navbar .dropdown-toggle-split::after{
  border-top: .35em solid currentColor;
  border-right: .35em solid transparent;
  border-left: .35em solid transparent;
  margin-left: 0;
  vertical-align: .15em;
  transition: transform .15s ease-in-out;
}
.navbar .show > .dropdown-toggle-split::after,
.navbar .dropdown-toggle-split[aria-expanded="true"]::after{
  transform: rotate(180deg);
}

/* Hover/active — фон у ссылки, не у стрелки */
li.level-1 > a:hover{ background: rgba(0,0,0,.05); }

/* RTL: зеркалим отступы */
[dir="rtl"] li.level-1.dropdown > a.btn,
[dir="rtl"] li.level-1.dropdown > a{
  padding-right: 6px;
  padding-left: 2rem;
}
[dir="rtl"] button.dropdown-toggle-split{
  margin-left: 0;
  margin-right: -2rem;
}

/* ====== Контентные мелочи ====== */
dd.category, dd.category a{ color: rgba(0,0,0,.6); font-size: 16px; line-height: 24px; }
h2.card-title a, h3.card-title a{ color: rgba(0,0,0,.85); }
div.card-border{ border: 2px solid var(--sm-pistachio); }
div.article-header{ background: var(--sm-pistachio); }

/* Сброс отступов у картинок в заголовках */
div.lead-pic figure,
div.header-image figure{ margin: 0; }

/* Bootstrap-твики */
.row-no-marg{
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
}
.navbar{ --bs-navbar-brand-margin-end: 0; }

/* ====== Адаптив ====== */
@media (max-width: 991.98px){
  .call-to-action .btn{
    padding: .85rem 1rem;
    font-size: 18px;
    line-height: 1.35;
    border-radius: 14px;
  }
}

@media (max-width: 575.98px){
  /* Кнопки в колонку на всю ширину */
  .call-to-action{
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .call-to-action .btn{
    width: 100%;
    min-width: 0;
    padding: .9rem 1rem;
    font-size: 17px;
    border-radius: 16px;
  }
  /* поджать зазор и нижний отступ у caption */
  .landing-links{ margin-top: 20px; }
  .landing .caption{ margin-bottom: .5rem; }
}

/* <= 576px: компактная шапка */
@media (max-width: 575.98px){
  /* уменьшаем вертикаль у самой навбар */
  .header .navbar{
    --bs-navbar-padding-y: .15rem;      /* было ~.5–.75rem */
  }
/* чуть ужмём и на планшетах, если нужно */
@media (min-width: 576px) and (max-width: 991.98px){
  .header .navbar{ --bs-navbar-padding-y: .25rem; }
}
  /* убираем лишние p-2 внутри .navbar-brand */
  .header .navbar .navbar-brand .p-2{
    padding: .125rem .25rem !important; /* или 0, если хочешь максимально плоско */
  }

  /* бургер — компактней, но остаётся удобным для тапа */
  .header .navbar .navbar-toggler{
    padding: .375rem .5rem;   /* hit area ~44px */
    border-radius: 12px;
  }
  /* безопасная зона под вырезы (iOS) */
  .header{ padding-top: env(safe-area-inset-top); }
}