@import "colors.css";

.header {
   padding: 0;
   background-color: var(--color-primary);
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 2px 16px rgba(32, 28, 23, 0.18);
}

.header .container {
   padding: 0;
}

.logo-container {
   display: grid;
}

.logo {
   display: block;
   width: 100%;
   max-inline-size: 100%;
   height: auto;
   color: var(--color-text);
}



.header_link {
   padding-left: 20px;
   position: relative;
   width: 300px;
   box-sizing: border-box;
   object-fit: cover;
}

/* Текст під логотипом */
.logo-subtitle {
   margin: 0;
   color: #000;
   font-size: 15px;
   font-weight: 400;
   letter-spacing: 1px;
   font-family: "Rubik Glitch", system-ui;

   z-index: 1;
   display: flex;
   align-items: flex-end;
   justify-self: end;
   transform: translate(-22px, -20px);
   text-transform: uppercase;
}

.logo,
.logo-subtitle {
   grid-area: 1 / 1;
   /* Обидва елементи займають 1-й рядок і 1-у колонку */
}

.header__body {
   display: flex;
   justify-content: space-between;
}

.header__menu {
   display: flex;
   justify-content: center;
   padding-right: 20px;
}

.menu__list {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0;

   flex-wrap: wrap;
   column-gap: 32px;
   row-gap: 5px;
}

.menu__item {
   max-height: fit-content;
}

.menu__link {
   width: 180px;
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 15px 0px;
   color: #1a1f22;
   text-decoration: none;
   font-family: sans-serif;
   line-height: 1.5;
   font-weight: 600;
   font-size: 15px;
   letter-spacing: 1px;
   text-transform: uppercase;
   background: transparent;
   z-index: 1;
   transition: color 0.25s ease;
}

/* ЗОВНІШНІЙ ШАР (Створює білу рамку) */
.menu__link::before {
   content: "";
   position: absolute;
   inset: 0;
   /* Розтягується на всю площу */
   background-color: var(--color-text);
   /* Колір рамки */
   /* Координати точок для зрізу верхнього лівого та нижнього правого кутів на 12px */
   clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
   z-index: -2;
}

/* ВНУТРІШНІЙ ШАР (Перекриває фон, залишаючи лінію товщиною 1px) */
.menu__link::after {
   content: "";
   position: absolute;
   inset: 2px; /* Товщина лінії рамки */
   background: var(--color-button-bg); /* Колір внутрішнього фону (має збігатися з тлом шапки) */
   /* Внутрішній clip-path зміщений на 1px для компенсації товщини рамки */
   clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
   z-index: -1;
   transition: background 0.25s ease;
}

/* Ефект Hover (анімація при наведенні курсора) */
.menu__link:hover {
   color: var(--color-secondary);
   /* Інверсія кольору тексту */
}

.menu__link:hover::after {
   background: var(--color-text);
   /* Повна заливка елемента кольором */
}