/*
Theme Name: VZOR AI Theme
Theme URI: https://vzor.ai/
Author: VZOR AI Team
Author URI: https://vzor.ai/
Description: Официальная тема для сайта компании "Промышленные интеллектуальные технологии", разработанная на основе лендинга. Тема включает в себя все необходимые разделы для демонстрации продуктов и услуг компании в области AI.
Version: 1.1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, custom-menu, block-styles, landing-page
Text Domain: vzor-theme
*/

/* Применение шрифта Inter ко всему сайту */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Светло-серый фон */
}
/* Плавная прокрутка */
html {
    scroll-behavior: smooth;
}
/* Стили для градиентного текста */
.gradient-text {
    background: linear-gradient(90deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* --- Custom Tooltip Styles --- */
.tooltip {
  position: relative;
  display: inline-block;
  text-decoration: underline;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: #1e293b; /* slate-800 */
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 50; /* Выше чем оверлей */
  bottom: 140%; 
  left: 50%;
  margin-left: -90px; /* Use half of the width to center the tooltip */
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 1rem;
  line-height: 1.4;
  pointer-events: none;
}

/* Tooltip Arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1e293b transparent transparent transparent;
}

/* Показываем подсказку, когда у родителя есть активный класс (для мобильных) */
.tooltip.tooltip-active .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Показываем подсказку при наведении (для десктопа) */
@media (min-width: 601px) {
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
}


/* --- Backdrop for Tooltip --- */
#tooltip-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40; /* Ниже чем подсказка */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

#tooltip-backdrop.active {
    opacity: 1;
    visibility: visible;
}


/* Адаптация под мобильные устройства */
@media (max-width: 600px) {
	.tooltip .tooltiptext {
        position: fixed; /* Позиционирование относительно окна браузера */
		width: 90vw;
		left: 5vw; /* Отступ 5% слева */
        bottom: auto; /* Сбрасываем позиционирование снизу */
        top: 20%; /* Позиционируем сверху */
		transform: none; /* Сбрасываем трансформацию */
		margin-left: 0; /* Сбрасываем отступ */
	}
    /* Скрываем стрелку на мобильных */
    .tooltip .tooltiptext::after {
        display: none;
    }
}