@font-face {
    font-family: "Syne Mono";
    src: url("../fonts/Syne_Mono/SyneMono-Regular.ttf");
}

@font-face {
    font-family: "Ubuntu Mono";
    src: url("../fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf");
}

:root {
    /* Цветовая палитра */
    --bg-main: #070707;
    --bg-nav: #070707;
    --bg-hover: #3a3b3c;
    --bg-active: #04dd00;

    --logo-color: #04dd00;
    --logo-shadow: 0 0 20px rgba(4, 221, 0, 0.7);
    --text-light: #eee;
    --text-muted: #d9d9d9;
    --text-dark: #333333;
    --text-header: #b8b8b8;

    --border-color: rgba(255, 255, 255, 0.08);

    /* Тени */
    --shadow-main: 0px 15px 15px rgba(0, 0, 0, 0.18);

    /* Типографика */
    --font-family: "Ubuntu Mono", sans-serif;
    --font-family-logo: "Syne Mono", sans-serif;
    --font-size-logo: 36px;
    --font-size-nav: 24px;
    --font-size-submenu: 20px;
    --font-size-header: 19px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Размеры, отступы и радиусы */
    --nav-height: 70px;
    --nav-logo: 70px;
    --sidebar-width: 320px;
    --border-radius: 5px;
    --icon-size: 32px;
    --transition-speed: 0.3s;
    --scrollbar-width: 10px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}

body {
    background-color: var(--bg-main);
    font-family: "Ubuntu Mono", sans-serif;
}

/* Кастомизация скроллбара */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}
::-webkit-scrollbar-track {
    background: var(--bg-nav);
}
::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: var(--border-radius);
}

/* Основная навигационная панель */
nav {
    position: fixed;
    z-index: 99;
    width: 100%;
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border-color);
}

nav .logo {
    height: var(--nav-logo);
    display: flex;
    gap: 20px;
}

nav .wrapper {
    position: relative;
    max-width: 1260px;
    padding: 0px 30px;
    height: var(--nav-height);
    line-height: var(--nav-height);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wrapper .logo a {
    color: var(--logo-color);
    text-shadow: var(--logo-shadow);
    font-family: var(--font-family-logo);
    font-size: var(--font-size-logo);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

/* Системные инпуты (скрыты) */
nav input[type="radio"],
nav input[type="checkbox"] {
    display: none;
}

/* Стандарты кнопок (Иконки) */
.wrapper .btn {
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper .btn .material-icons {
    font-size: var(--icon-size);
}

/* Кнопка закрытия внутри сайдбара */
.wrapper .btn.close-btn {
    position: absolute;
    right: 30px;
    top: 20px;
    line-height: normal;
}

/* Боковое меню (Сайдбар) */
.wrapper .nav-links {
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: var(--sidebar-width);
    top: 0;
    left: -100%; /* Скрыто по умолчанию за левым краем */
    background: var(--bg-nav);
    display: block;
    padding: 50px 10px;
    line-height: 50px;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    transition: all var(--transition-speed) ease;
}

/* Стили для названия текущей страницы */
.page-title {
    color: var(--text-header);
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-semibold);
}

/* Подсветка активного пункта меню */
.nav-links li a.active {
    color: var(--bg-active); /* Делаем текст зеленым */
}

/* Логика открытия бокового меню */
#menu-btn:checked ~ .nav-links {
    left: 0%; /* Выезжает при клике */
}
#menu-btn:checked ~ .btn.menu-btn {
    display: none; /* Скрываем гамбургер, когда меню открыто */
}

/* Элементы списка меню */
.nav-links li {
    list-style: none;
    margin: 5px 10px;
}

/* Добавляем относительное позиционирование для основы */
.nav-links li a,
.nav-links .mobile-item {
    position: relative;
    color: var(--text-light);
    text-decoration: none;
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-medium);
    padding: 0 20px 0 15px;
    display: block;
    border-radius: var(--border-radius);
    transition:
        background var(--transition-speed) ease,
        color var(--transition-speed) ease;
    cursor: pointer;
}

/* ::before */
.nav-links li a::before,
.nav-links .mobile-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 0%;
    width: 4px;
    background-color: var(--bg-active);
    transition: height var(--transition-speed) ease;
}

/* При наведении плашка «вырастает» */
.nav-links li a:hover::before,
.nav-links .mobile-item:hover::before {
    height: 60%;
}

/* Контейнеры выпадающих меню (Dropdown) */
.nav-links .drop-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    max-height: 0px; /* Скрыты по умолчанию через высоту */
    overflow: hidden;
    transition: all var(--transition-speed) ease;
}

.nav-links .drop-menu {
    padding-left: 20px;
    width: 100%;
}

/* Раскрытие меню (Аккордеон эффект) */
#showDrop:checked ~ .drop-menu {
    max-height: 1000px; /* Плавное открытие */
}

/* Стили внутренних элементов Dropdown */
.drop-menu li {
    margin: 0;
}

.drop-menu li a {
    border-radius: var(--border-radius);
    font-size: var(--font-size-submenu);
    font-weight: var(--font-weight-regular);
}

/* Тестовый текст в центре экрана */
.body-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    padding: 0 30px;
}

.body-text div {
    font-size: 45px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-dark);
}