@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Open+Sans:wght@400;600&display=swap');

/*
Theme Name: Smart Solar Theme
Description: Тема WordPress, вдохновленная дизайном Smart Solar Homes. Современная тема для компаний в сфере солнечной энергетики.
Version: 1.0
Author: Smart Solar Developer
Text Domain: smart-solar-theme
*/

/* CSS Variables для цветовой схемы */
:root {
    --primary-color: #2c7a2c;
    --secondary-color: #1e5a96;
    --accent-color: #ff6b35;
    --solar-yellow: #ffd700;
    --text-color: #333333;
    --light-gray: #f8f9fa;
    --border-color: #e0e0e0;
    --white: #ffffff;
    --success-color: #28a745;
    --shadow: rgba(0, 0, 0, 0.08);
}

/* Global Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6, .site-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a, button, input[type="submit"] {
    transition: all 0.3s ease-in-out;
}

/* Header Styles */
.site-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    height: 64px; /* <--- Устанавливаем точную высоту */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px var(--shadow);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 101; /* Чтобы шапка была поверх открытого меню */
}

.site-title {
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--white);
}

/* Стили для ссылок в шапке */
.main-nav a {
    color: var(--text-color); /* Белый цвет в обычном состоянии */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Желтый цвет при наведении курсора */
.main-nav a:hover {
    color: #EA580C; 
}

/* ... (остальные ваши стили без изменений) ... */
.hero-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    text-align: center;

    /* Устанавливаем минимальную высоту в 80% от высоты экрана */
    min-height: 80vh;

    /* Эти свойства идеально центрируют контент по вертикали */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Добавляем небольшой отступ для безопасности */
    padding: 2rem 0;
}.hero-content h1{font-size:3rem;margin-bottom:1rem;font-weight:700}.hero-content p{font-size:1.2rem;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}.cta-button{display:inline-block;padding:1rem 2rem;text-decoration:none;border-radius:8px;font-weight:600;transition:all .3s ease;background:var(--accent-color);color:var(--white);box-shadow:0 4px 15px rgba(255,107,53,.3)}.cta-button:hover{background:#e55a2b;transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,107,53,.4)}.services-section{padding:4rem 0;background:var(--light-gray)}.section-title{font-size:2.5rem;margin-bottom:3rem;text-align:center;color:var(--primary-color)}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:3rem}.service-card{padding:2rem;border-radius:8px;text-align:center;background:var(--white);box-shadow:0 4px 15px var(--shadow);transition:transform .3s ease,box-shadow .3s ease}.service-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.12)}.service-icon{font-size:3rem;margin-bottom:1rem}.service-card h3{font-size:1.5rem;margin-bottom:1rem;color:var(--primary-color)}.stats-section{padding:4rem 0;background:var(--primary-color);color:var(--white)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;text-align:center}.stat-item h3{font-size:3rem;margin-bottom:.5rem;color:var(--solar-yellow)}.stat-item p{font-size:1.1rem;opacity:.9}.content-area{padding:2rem 0}.entry-header{margin-bottom:2rem}.entry-title{font-size:2.5rem;margin-bottom:1rem;color:var(--primary-color)}.entry-meta{margin-bottom:1rem;color:#666}.entry-content{line-height:1.8}.entry-content h2{margin:2rem 0 1rem;color:var(--primary-color)}.entry-content h3{margin:1.5rem 0 1rem;color:var(--secondary-color)}.site-footer{padding:3rem 0 1rem;background:var(--text-color);color:var(--white)}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}.footer-section h3{margin-bottom:1rem;color:var(--solar-yellow)}.footer-section ul{list-style:none}.footer-section a{text-decoration:none;transition:color .3s ease;color:var(--white)}.footer-section a:hover{color:var(--solar-yellow)}.footer-bottom{padding-top:2rem;text-align:center;border-top:1px solid #555;opacity:.7}.skip-link{position:absolute;top:1rem;left:-9999px;padding:.5rem 1rem;text-decoration:none;border-radius:5px;background:var(--primary-color);color:var(--white);z-index:999999}.skip-link:focus{left:1rem}.wp-block-button__link{border-radius:8px;background:var(--accent-color)}.wp-block-quote{border-left:4px solid var(--primary-color);padding-left:1rem;margin:2rem 0}.alignwide,.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}

/* --- Стили для кнопок раскрытия подменю --- */
.main-navigation .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}
.main-navigation .menu-item-has-children > a {
    flex-grow: 1;
}
.submenu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    width: 50px; 
    height: 50px;
    padding: 15px;
    margin-left: auto;
}
.submenu-toggle::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-color);
    border-bottom: 2px solid var(--text-color);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}
.submenu-toggle.is-active::before {
    transform: rotate(-135deg);
}

/* === Responsive Design === */

/* --- ДЕСКТОПНАЯ ВЕРСИЯ МЕНЮ (ИСПРАВЛЕННАЯ) --- */
@media (min-width: 769px) {
  /*
  * Используем более конкретный селектор, чтобы гарантированно показать меню.
  */
  .site-header .main-nav .primary-menu {
    display: flex !important; /* Гарантируем, что на десктопе меню видно */
    list-style: none;
    gap: 32px; /* или ваше настроенное значение */
  }
  
  /* Скрываем мобильные кнопки на десктопе */
  .nav-toggle,
  .submenu-toggle {
      display: none !important;
  }
}

/* === МОБИЛЬНАЯ ВЕРСИЯ (экраны до 768px) === */
@media (max-width: 768px) {

  /* --- Стили для мобильного меню --- */

  /* Показываем кнопку-гамбургер */
  .nav-toggle {
    display: block;
    background: none; border: none; cursor: pointer; padding: 10px; z-index: 101;
  }
  .nav-toggle .bar {
    display: block; width: 25px; height: 3px; background-color: var(--white); margin: 5px 0; transition: all 0.3s ease-in-out;
  }
  /* Анимация гамбургера в крестик */
  .nav-toggle.is-active .bar:nth-child(2) { opacity: 0; }
  .nav-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Гарантированно скрываем меню по умолчанию */
  .main-nav .primary-menu {
    display: none !important;
  }

  /* Показываем меню только с классом .menu--open */
  .main-nav .primary-menu.menu--open {
    display: flex !important;
    flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    padding-top: 64px; /* Отступ равен высоте шапки */
    background: var(--white); z-index: 100; gap: 0;
  }
  .main-nav .primary-menu.menu--open a {
      padding: 15px 25px; font-size: 1.2rem; color: var(--text-color); border-bottom: 1px solid #f0f0f0; text-align: left;
  }
  .main-nav .primary-menu.menu--open .menu-item-has-children > a { padding-right: 0; }
  .main-nav .primary-menu.menu--open ul.sub-menu { display: none; background: #f0f0f0; }
  .main-nav .primary-menu.menu--open ul.sub-menu.sub--open { display: block; }
  .main-nav .primary-menu.menu--open ul.sub-menu a { padding-left: 40px; }
  .submenu-toggle { display: block; }
  .submenu-toggle::before { border-color: var(--text-color); }
  
  
  /* --- Адаптивные стили для Hero блока --- */

  /* Уменьшаем заголовок на мобильных */
  .hero-content h1 {
    font-size: 1.5rem; /* Изначально было 3rem */
  }

  /* Уменьшаем описание под заголовком */
  .hero-description {
    font-size: 1rem; /* Изначально было 1.2rem */
  }

  /* Уменьшаем кнопки на мобильных */
  .hero-section .cta-button {
    padding: 0.7rem 1.3rem; /* Уменьшаем отступы */
    font-size: 0.7rem;      /* Уменьшаем шрифт текста на кнопке */
  }

}
  .nav-toggle.is-active .bar:nth-child(2) { opacity: 0; }
  .nav-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ГАРАНТИРОВАННО СКРЫВАЕМ МЕНЮ ПО УМОЛЧАНИЮ */
  .main-nav .primary-menu {
    display: none !important;
  }

  /* ПОКАЗЫВАЕМ МЕНЮ ТОЛЬКО С КЛАССОМ .menu--open */
  .main-nav .primary-menu.menu--open {
    display: flex !important;
    flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    padding-top: 80px; background: var(--white); z-index: 100; gap: 0;
  }
  .main-nav .primary-menu.menu--open a {
      padding: 15px 25px; font-size: 1.2rem; color: var(--text-color); border-bottom: 1px solid #f0f0f0; text-align: left;
  }
  .main-nav .primary-menu.menu--open .menu-item-has-children > a { padding-right: 0; }
  .main-nav .primary-menu.menu--open ul.sub-menu { display: none; background: #f0f0f0; }
  .main-nav .primary-menu.menu--open ul.sub-menu.sub--open { display: block; }
  .main-nav .primary-menu.menu--open ul.sub-menu a { padding-left: 40px; }

  /* Стили для стрелочек подменю на мобильных */
  .submenu-toggle {
      display: block; /* Показываем стрелочки на мобильных */
  }
  .submenu-toggle::before { border-color: var(--text-color); }
}
/* --- Стили для обновленного Hero блока --- */

/* Стиль для цветной части заголовка */
.hero-content h1 .highlight {
    color: var(--solar-yellow); /* Используем ваш фирменный желтый цвет */
}

/* Стиль для текста-описания под заголовком */
.hero-description {
    font-size: 1.2rem; /* Размер шрифта */
    font-weight: 400; /* Стандартная толщина */
    line-height: 1.7;
    max-width: 650px; /* Ограничиваем ширину для лучшей читаемости */
    margin: 20px auto 30px auto; /* Отступы сверху и снизу */
    opacity: 0.9; /* Делаем текст чуть менее ярким, чем заголовок */
}
@media (min-width: 769px) {

  /* 1. Убираем растягивание для родительского блока */
  .header-content {
    /* Мы больше не используем space-between, так как меню будет позиционироваться отдельно */
    justify-content: flex-start; 
  }

  /* 2. Позиционируем само меню */
  .main-nav {
    position: absolute;
    left: 50%; /* Сдвигаем левый край меню ровно на 50% ширины экрана */
    
    /* Эти два свойства выравнивают меню по вертикали внутри шапки */
    top: 50%;
    transform: translateY(-50%);
  }
}
/* Скругление для кнопок в Hero блоке */
.hero-section .cta-button {
   border-radius: 6px !important;  /* Вы можете попробовать значения от 4px до 8px */
}