/* style.css */

/* Сброс стандартных стилей и базовые настройки */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* Учитываем padding и border в ширине элемента */
}

body {
	font-family: Arial, sans-serif;
	line-height: 1.6;
}

/* Стили для header и контейнера меню */
header {
	background: #2c3e50;
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ МЕНЮ */
.cd-dropdown-wrapper {
	position: relative; /* Для позиционирования выпадающего меню */
	display: inline-block;
}

/* КНОПКА-ТРИГГЕР ОТКРЫТИЯ МЕНЮ */
.cd-dropdown-trigger {
	display: inline-block;
	padding: 10px 20px;
	background: #3498db;
	color: white;
	text-decoration: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.3s;
}

.cd-dropdown-trigger:hover {
	background: #2980b9;
}

/* САМО ВЫПАДАЮЩЕЕ МЕНЮ */
.cd-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 300px;
	background: white;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	border-radius: 4px;
	opacity: 0;
	visibility: hidden; /* Скрываем меню по умолчанию */
	transform: translateY(-10px);
	transition: all 0.3s ease;
	z-index: 1000;
}

/* Когда меню активно (открыто) */
.cd-dropdown.dropdown-is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Заголовок меню (только для mobile) */
.cd-dropdown h2 {
	padding: 15px 20px;
	background: #34495e;
	color: white;
	font-size: 1.2rem;
	display: none; /* Скрыт на desktop */
}

/* Кнопка закрытия (только для mobile) */
.cd-close {
	position: absolute;
	top: 10px;
	right: 10px;
	color: white;
	text-decoration: none;
	font-size: 1.5rem;
	display: none; /* Скрыта на desktop */
}

/* ОСНОВНОЕ СОДЕРЖИМОЕ МЕНЮ */
.cd-dropdown-content {
	list-style: none;
	max-height: 400px;
	overflow-y: auto; /* Прокрутка если много пунктов */
}

.cd-dropdown-content li a {
	display: block;
	padding: 12px 20px;
	color: #333;
	text-decoration: none;
	border-bottom: 1px solid #ecf0f1;
	transition: background 0.3s;
}

.cd-dropdown-content li a:hover {
	background: #f8f9fa;
}

/* ПУНКТЫ МЕНЮ С ПОДМЕНЮ */
.has-children > a {
	position: relative;
	padding-right: 40px; /* Место для стрелочки */
}

/* Стрелочка для пунктов с подменю */
.has-children > a::after {
	content: "▶";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.8rem;
}

/* ПОДМЕНЮ (второй уровень) */
.cd-secondary-dropdown {
	position: absolute;
	top: 0;
	left: 100%;
	width: 300px;
	background: white;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-10px);
	transition: all 0.3s ease;
}

/* Когда подменю активно */
.cd-secondary-dropdown:not(.is-hidden) {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* Кнопка "Назад" в подменю */
.go-back a {
	background: #34495e;
	color: white !important;
	position: relative;
	padding-left: 40px;
}

.go-back a::before {
	content: "◀";
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}

/* Разделитель в меню */
.cd-divider {
	padding: 10px 20px;
	background: #ecf0f1;
	color: #7f8c8d;
	font-size: 0.9rem;
	font-weight: bold;
	border-top: 1px solid #bdc3c7;
	border-bottom: 1px solid #bdc3c7;
}

/* СТИЛИ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ (адаптивность) */
@media (max-width: 768px) {
	/* На mobile меню становится полноэкранным */
	.cd-dropdown {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
		transform: translateY(-100%);
		z-index: 10000;
	}
	
	/* Показываем заголовок и кнопку закрытия на mobile */
	.cd-dropdown h2,
	.cd-close {
		display: block;
	}
	
	/* Подменю на mobile */
	.cd-secondary-dropdown {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		transform: translateX(100%);
	}
	
	/* Стрелочки меняем на mobile */
	.has-children > a::after {
		content: "▼";
	}
	
	.go-back a::before {
		content: "▲";
	}
}

/* Стили для основного контента */
.cd-main-content {
	padding: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}