/* Базовые стили */
.primary-menu, .primary-menu ul { list-style:none; margin:0; padding:0; }
.primary-menu > li               { display:inline-block; position:relative; }
.primary-menu a                  { display:block; padding:14px 18px; }

/* Подменю */
.primary-menu ul        { position:absolute; left:0; top:100%; min-width:220px;
                          background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.08);
                          transform-origin:top; transform:scaleY(0);
                          opacity:0; transition:.25s ease; pointer-events:none; }
.primary-menu li:hover  > ul,
.primary-menu .sub--open        { transform:scaleY(1); opacity:1; pointer-events:auto; }
.primary-menu ul li             { display:block; }
.primary-menu ul a              { padding:12px 20px; }

/* Гамбургер */
.nav-toggle { display:none; background:none; border:0; cursor:pointer; }
.nav-toggle .bar { width:24px; height:2px; margin:5px 0; background:#333; transition:.3s; }

/* Мобильная точка останова */
@media (max-width:768px){
  .nav-toggle { display:block; }
  .primary-menu          { display:none; flex-direction:column; }
  .menu--open            { display:flex; }
  .primary-menu > li     { display:block; }
  .primary-menu ul       { position:static; transform:none; opacity:1; box-shadow:none; }
  .primary-menu ul       { display:none; }
  .sub--open             { display:block; }
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Логотип */
.site-header .logo {
  flex: 0 0 auto;        /* не растягивается и не сжимается */
  margin-right: 20px;     /* отступ между логотипом и меню */
}

/* Меню */
.site-header .main-nav {
  flex: 1 1 auto;         /* меню занимает оставшееся пространство */
}

.primary-menu {
  display: flex;          /* пункты меню в ряд */
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-menu > li {
  margin-left: 30px;      /* расстояние между пунктами */
  position: relative;
}

/* --- Стили для Hero блока --- */

.hero-section {
  position: relative; /* Необходимо для позиционирования оверлея */
  height: 60vh; /* Высота блока - 60% от высоты экрана. Можете изменить. */
  width: 100%;
  background-size: cover; /* Картинка полностью покроет блок */
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff; /* Цвет текста по умолчанию - белый */
}

/* Эффект затемнения. Для забеления измените цвет на rgba(255, 255, 255, 0.6) */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Черный с 50% прозрачности */
  z-index: 1;
}

.hero-content {
  position: relative; /* Чтобы контент был поверх оверлея */
  z-index: 2;
  padding: 20px;
}

.hero-content h1 {
  font-size: 3rem; /* Размер заголовка */
  margin-bottom: 30px;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6); /* Тень для лучшей читаемости */
}

.hero-buttons .button {
  border: 2px solid #fff;
  padding: 12px 25px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  display: inline-block;
  margin: 0 10px;
}

/* Стили для кнопок, которые будут меняться из админки */
.button.button-primary {
  background-color: #0073aa; /* Цвет по умолчанию */
  color: #fff;
}

.button.button-secondary {
  background-color: transparent;
  color: #fff;
}

.button.button-primary:hover {
  background-color: #fff;
  color: #0073aa;
}

.button.button-secondary:hover {
  background-color: #fff;
  color: #000;
}