/* ==========================================================================
   1. ШАПКА И НАВИГАЦИЯ (HEADER & NAVIGATION) - ФИКС ДЛЯ CHROME И FIREFOX
   ========================================================================== */

/* Темно-синий фон шапки и сброс Grid Joomla */
header.header {
  background-color: #001B4C !important;
  display: block !important;
}

/* Выравнивание логотипа, меню и переключателя языков в один ряд */
header.header .container-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 10px 20px !important;
}

/* Сброс свойств сетки Joomla для всех дочерних элементов */
header.header .grid-child {
  display: flex !important;
  align-items: center !important;
  grid-column: auto !important;
  margin: 0 !important;
}

/* Контейнер меню и языков (правая часть) */
header.header .container-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 25px !important;
  flex-grow: 1 !important;
}

/* Меню навигации */
header.header ul.mod-menu,
header.header ul[id^="mod-menu"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
}

header.header ul.mod-menu li a,
header.header ul.mod-menu li span,
header.header ul[id^="mod-menu"] li a,
header.header ul[id^="mod-menu"] li span {
  color: #ffffff !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
}

header.header ul.mod-menu li.active > a,
header.header ul.mod-menu li:hover > a {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Переключатель языков (Флаги - фиксируем СПРАВА) */
header.header .mod-languages {
  display: flex !important;
  align-items: center !important;
  margin-left: 15px !important;
}

header.header .mod-languages ul.lang-inline {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Выпадающие списки (Dropdown) */
header.header ul.mod-menu li {
  position: relative !important;
}

header.header ul.mod-menu li ul,
header.header ul[id^="mod-menu"] li ul {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background-color: #001B4C !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  min-width: 220px !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.4) !important;
  z-index: 9999 !important;
  border-radius: 0 0 6px 6px !important;
}

header.header ul.mod-menu li:hover > ul,
header.header ul[id^="mod-menu"] li:hover > ul {
  display: block !important;
}

header.header ul.mod-menu li ul li a,
header.header ul.mod-menu li ul li span {
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  padding: 8px 16px !important;
  display: block !important;
  white-space: nowrap !important;
}

header.header ul.mod-menu li ul li:hover > a {
  background-color: #0056b3 !important;
}
/* ==========================================================================
   ПРИНУДИТЕЛЬНЫЙ ПЕРЕНОС ИНЛАЙН-СТИЛЕЙ ИЗ HTML В ТЁМНУЮ ТЕМУ
   ========================================================================== */

/* 1. Обнуление светлых фонов и текста, заданных через style="" */
.com-content-article__body div[style*="background"],
.com-content-article__body div[style*="background-color"] {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

/* 2. Переопределение цвета заголовков внутри HTML */
.com-content-article__body h1[style],
.com-content-article__body h2[style],
.com-content-article__body h3[style],
.com-content-article__body p[style],
.com-content-article__body span[style] {
  color: #f8fafc !important;
}

.com-content-article__body p[style*="color: #556980"],
.com-content-article__body p[style*="color: #475569"] {
  color: #94a3b8 !important;
}

/* 3. Сброс фиксированной высоты (height: 380px / 630px) для контейнеров видео/фото */
.com-content-article__body div[style*="height"] {
  height: auto !important;
  min-height: 240px !important;
  background: #0f172a !important;
}

/* 4. Принудительное растягивание картинок и видео по размеру карточек */
.com-content-article__body img,
.com-content-article__body .youtuber-widget {
  width: 100% !important;
  height: auto !important;
  max-height: 350px !important;
  object-fit: cover !important;
}
/* ==========================================================================
   4. ПРОМЫШЛЕННЫЕ РЕШЕНИЯ (INDUSTRIAL SOLUTIONS / VENTILATION / PUMPS)
   ========================================================================== */

/* Темный background для карточек Industrial Solutions */
.com-content-article__body div[style*="background: #ffffff"],
.com-content-article__body div[style*="background:#ffffff"],
.com-content-article__body div[style*="background: white"],
.com-content-article__body div[style*="background-color: #ffffff"] {
  background-color: #1e293b !important;
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* Перекрашиваем светлые внутренние карточки и подложки схем */
.com-content-article__body div[style*="background: #f8fafc"],
.com-content-article__body div[style*="background:#f8fafc"],
.com-content-article__body div[style*="background: #e2e8f0"] {
  background-color: #0f172a !important;
  background: #0f172a !important;
  border-color: #1e293b !important;
}

/* Исправление цвета текста для темной темы */
.com-content-article__body h1, 
.com-content-article__body h2, 
.com-content-article__body h3, 
.com-content-article__body h4 {
  color: #f8fafc !important;
}

.com-content-article__body p,
.com-content-article__body span,
.com-content-article__body li {
  color: #cbd5e1 !important;
}

/* Подсветка мелких надписей и подписей под схемами */
.com-content-article__body div[style*="color: #64748b"],
.com-content-article__body div[style*="color: #475569"],
.com-content-article__body p[style*="color: #475569"] {
  color: #94a3b8 !important;
}

/* Картинки и графики схем вентиляции */
.com-content-article__body img {
  border-radius: 6px;
  max-width: 100%;
  height: auto;
}
/* ==========================================================================
   5. ПРИНУДИТЕЛЬНЫЙ ТЕМНЫЙ СТИЛЬ ДЛЯ СТРАНИЦЫ RENAULT TWIZY
   ========================================================================== */

/* Корневой контейнер статьи Twizy */
.item-page .com-content-article__body,
body.itemid-184 .com-content-article__body {
  background-color: #0b192f !important;
  color: #e2e8f0 !important;
  padding: 30px !important;
  border-radius: 12px !important;
}

/* Все карточки внутри Twizy */
.item-page .com-content-article__body div[style*="background"],
body.itemid-184 .com-content-article__body div[style*="background"] {
  background: #172a46 !important;
  background-color: #172a46 !important;
  border-color: #243b5e !important;
}

/* Перекрашивание текста */
.item-page .com-content-article__body h1,
.item-page .com-content-article__body h2,
.item-page .com-content-article__body h3,
body.itemid-184 .com-content-article__body h1,
body.itemid-184 .com-content-article__body h2,
body.itemid-184 .com-content-article__body h3 {
  color: #ffffff !important;
}

.item-page .com-content-article__body p,
.item-page .com-content-article__body span,
body.itemid-184 .com-content-article__body p,
body.itemid-184 .com-content-article__body span {
  color: #94a3b8 !important;
}
/* ==========================================================================
   6. СТИЛИ ГЛАВНОЙ СТРАНИЦЫ (HOME PAGE STYLES)
   ========================================================================== */

/* Hero баннер */
.hero-section {
  position: relative;
  background-color: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 40px;
  border: 1px solid #1e293b;
}

.hero-image-wrapper img.hero-bg-img {
  width: 100% !important;
  max-height: 380px !important;
  object-fit: cover !important;
  display: block;
}

.hero-content {
  padding: 30px;
  color: #ffffff;
}

.hero-content h1 {
  color: #ffffff !important;
  font-size: 2.2rem;
  margin: 15px 0;
}

.hero-content p {
  color: #94a3b8 !important;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Метки (Tags) */
.card-tag {
  display: inline-block;
  background-color: #0284c7;
  color: #ffffff !important;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* Кнопки */
.hero-buttons {
  display: flex;
  gap: 15px;
  margin-top: 25px;
  flex-wrap: wrap;
}

.btn-primary {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  display: inline-block;
}

.btn-primary:hover {
  background-color: #0369a1 !important;
}

.btn-secondary {
  background-color: transparent !important;
  color: #38bdf8 !important;
  border: 1px solid #38bdf8 !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  display: inline-block;
}

.btn-secondary:hover {
  background-color: rgba(56, 189, 248, 0.1) !important;
}

/* Заголовки секций */
.section-title {
  text-align: center;
  margin-bottom: 30px;
}

.section-title h2 {
  color: #ffffff !important;
  font-size: 1.8rem;
}

.section-title p {
  color: #94a3b8 !important;
}

/* Сетки карточек (Grid) */
.grid-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 50px;
}

.grid-three {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 50px;
}

/* Карточки */
.home-card, .product-box {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 10px !important;
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-card h3, .product-box h4 {
  color: #ffffff !important;
  margin-top: 10px;
}

.home-card p, .product-box p {
  color: #cbd5e1 !important;
  font-size: 0.95rem;
  flex-grow: 1;
}

/* Изображения внутри карточек */
.card-img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  margin-bottom: 15px !important;
}

/* Ссылки на карточках */
.card-link {
  color: #38bdf8 !important;
  text-decoration: none !important;
  font-weight: 600;
  margin-top: 15px;
  display: inline-block;
}

.card-link:hover {
  text-decoration: underline !important;
}

/* Блок призыва к действию (CTA) */
.contact-cta-block {
  background-color: #0f172a !important;
  border: 1px solid #0284c7 !important;
  padding: 40px 20px !important;
  border-radius: 12px !important;
  text-align: center !important;
  margin-top: 40px;
}

.contact-cta-block h2 {
  color: #ffffff !important;
}

.contact-cta-block p {
  color: #94a3b8 !important;
  margin-bottom: 20px;
}
/* ==========================================================================
   ИСПРАВЛЕНИЕ ВЫПАДАЮЩЕГО СТУПЕНЧАТОГО МЕНЮ (MULTI-LEVEL DROPDOWN FIX)
   ========================================================================== */

/* Ограничиваем позиционирование для пунктов меню */
header.header ul.mod-menu li,
header.header ul[id^="mod-menu"] li {
  position: relative !important;
}

/* 1-Й УРОВЕНЬ ВЫПАДАЮЩЕГО МЕНЮ (Появляется под главной шапкой) */
header.header ul.mod-menu > li > ul,
header.header ul[id^="mod-menu"] > li > ul {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background-color: #001B4C !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  min-width: 220px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
  z-index: 9999 !important;
  border-radius: 0 0 6px 6px !important;
}

/* Показываем первый уровень при наведении */
header.header ul.mod-menu > li:hover > ul,
header.header ul[id^="mod-menu"] > li:hover > ul {
  display: block !important;
}

/* 2-Й И ПОСЛЕДУЮЩИЕ УРОВНИ (Ступенчатые выпадающие подменю - выезжают ВПРАВО) */
header.header ul.mod-menu li ul li ul,
header.header ul[id^="mod-menu"] li ul li ul {
  display: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 100% !important; /* Выезд вправо от родителя */
  margin-top: -6px !important;
  background-color: #001337 !important; /* Чуть темнее для визуального разделения */
  padding: 6px 0 !important;
  min-width: 200px !important;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4) !important;
  border-radius: 4px !important;
}

/* Показываем дочернее подменю (E-Bike, Twizy...) при наведении на родитель (E-Mobility) */
header.header ul.mod-menu li ul li:hover > ul,
header.header ul[id^="mod-menu"] li ul li:hover > ul {
  display: block !important;
}

/* Стилизация всех ссылок выпадающих списков */
header.header ul.mod-menu li ul li,
header.header ul[id^="mod-menu"] li ul li {
  width: 100% !important;
  display: block !important;
  position: relative !important;
}

header.header ul.mod-menu li ul li a,
header.header ul.mod-menu li ul li span,
header.header ul[id^="mod-menu"] li ul li a,
header.header ul[id^="mod-menu"] li ul li span {
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  padding: 9px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

/* Стрелочка-указатель для пунктов, имеющих подменю (например, E-Mobility) */
header.header ul.mod-menu li ul li:has(ul) > a::after,
header.header ul.mod-menu li ul li:has(ul) > span::after {
  content: "›" !important;
  font-size: 1.1rem !important;
  font-weight: bold !important;
  margin-left: 10px !important;
}

/* Ховер эффекты для подпунктов */
header.header ul.mod-menu li ul li:hover > a,
header.header ul.mod-menu li ul li:hover > span {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}
/* ==========================================================================
   ИСПРАВЛЕНИЕ ФЛАГОВ ДЛЯ FIREFOX И ЦВЕТА ЗАГОЛОВКОВ (FINAL FIXES)
   ========================================================================== */

/* 1. ФИКС ФЛАГОВ ДЛЯ FIREFOX */
header.header .container-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

header.header .container-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
  order: 2 !important;
}

/* Принудительный порядок элементов внутри container-nav в Firefox */
header.header .container-nav > *:nth-child(1),
header.header .container-nav ul.mod-menu,
header.header .container-nav ul[id^="mod-menu"] {
  order: 1 !important; /* Меню первее */
}

header.header .container-nav .mod-languages {
  order: 2 !important; /* Флаги правее */
  margin-left: auto !important;
}

/* 2. ФИКС ТЕМНЫХ ЗАГОЛОВКОВ (Core Hardware & Traction Motors и др.) */
.com-content-article__body h1,
.com-content-article__body h2,
.com-content-article__body h3,
.com-content-article__body h4,
.item-page h1,
.item-page h2,
.item-page h3,
.item-page h4 {
  color: #ffffff !important; /* Принудительно делаем белым */
}

/* Светло-голубой цвет для подзаголовков и описывающего текста под h1/h2 */
.com-content-article__body h1 + p,
.com-content-article__body h2 + p,
.com-content-article__body p.lead,
.com-content-article__body div[style*="color"] {
  color: #94a3b8 !important;
}
/* Перекрашиваем страницу контактов Joomla в тёмный стиль */
.contact {
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
  padding: 32px;
  border-radius: 12px;
  border: 1px solid #1e293b;
}

.contact h1, .contact h2, .contact h3, .contact .page-header {
  color: #ffffff !important;
}

.contact dl.dl-horizontal dt, .contact .contact-category, .contact-field-name {
  color: #38bdf8 !important;
}

.contact dl.dl-horizontal dd, .contact-field-value {
  color: #cbd5e1 !important;
}

/* Стилизация формы обратной связи (если включена) */
.contact form input, 
.contact form textarea {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

.contact form button {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
}