/* ===== Базові стилі ===== */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #fff;
  margin: 0;
  padding: 0;
  color: #111;
}

/* ===== Шапка / Навігація (Grid: ліво | центр | право) ===== */
nav.topnav{
  position: sticky; top: 0; z-index: 1000;
  background: #f4f4f4;
  padding: 10px 20px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* лого | меню | перемикач мов */
  align-items: center;
  column-gap: 20px;
}

/* лого зліва */
.nav-logo { justify-self: start; }
/* За замовчуванням приховуємо логотип на десктопі */
.nav-logo img {
  height: 32px;
  display: none;
}

/* Показуємо логотип тільки на мобільних */
@media (max-width: 768px) {
  .nav-logo img {
    display: block;
  }
}


/* меню по центру (десктоп) */
nav.topnav > .nav-links{
  justify-self: center;
  display: flex; gap: 30px; flex-wrap: wrap;
}
nav.topnav > .nav-links a{
  text-decoration: none; font-size: 20px; font-weight: bold; color: #111; white-space: nowrap;
}
nav.topnav > .nav-links a:hover{ text-decoration: underline; }

/* перемикач мов справа (десктоп) */
nav.topnav > .lang-switch{
  justify-self: end;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.lang-switch a{ text-decoration: none; font-size: 16px; font-weight: bold; color: #111; transition: color .2s; }
.lang-switch a:hover{ color: #555; }
.lang-switch a.active{ text-decoration: underline; color: #000; }
.lang-separator{ color: #888; font-size: 14px; }

/* кнопка гамбургера (показується лише на мобільному) */
.menu-toggle{
  display: none;
  position: absolute; right: 16px; top: 10px;
  background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer;
}

/* mobile drawer за замовчуванням прихований */
.nav-drawer{ display: none; }

/* ===== Контент / Форма / Футер ===== */
header { padding: 40px 20px 20px; text-align: center; }
h1 { font-size: 48px; margin: 0; }
p.slogan { font-size: 18px; margin-top: 10px; color: #444; }

.section { font-size: 18px; max-width: 800px; padding: 20px; margin: 0 auto; }

.contact-form { display: flex; flex-direction: column; gap: 10px; max-width: 400px; margin: 0 auto; }
.contact-form input, .contact-form textarea {
  padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px;
}
.contact-form button {
  background: #111; color: #fff; border: none; padding: 12px; font-size: 16px; border-radius: 4px; cursor: pointer;
}

footer { padding: 30px; font-size: 14px; color: #777; text-align: center; }

/* ===== Адаптив ===== */

/* дрібніші шрифти на дуже вузьких екранах */
@media (max-width: 600px){
  nav.topnav > .nav-links a{ font-size: 16px; }
  .lang-switch a{ font-size: 14px; }
}

/* мобільне меню (гамбургер + випадаюче меню) */
@media (max-width: 768px){
  /* шапка: дві колонки — лого | кнопка */
  nav.topnav{ grid-template-columns: 1fr 40px; position: relative; }

  /* ховаємо десктопні елементи */
  nav.topnav > .nav-links,
  nav.topnav > .lang-switch{ display: none; }

  /* показуємо кнопку і підіймаємо над дровером */
  .menu-toggle{ display: block; z-index: 3000; }

  /* випадаюче меню (drawer) — сховане за замовчуванням */
  .nav-drawer{
    display: none;                              /* ВАЖЛИВО: тільки display:none тут */
    position: absolute;
    left: 16px; right: 16px;
    top: calc(100% + 8px);                      /* під шапкою */
    background: #fff;                           /* контрастний фон */
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    flex-direction: column;                     /* без display:flex тут! */
    gap: 12px;
    z-index: 2000;
  }

  /* відкриття меню: показуємо дровер */
  body.nav-open .nav-drawer{ display: flex; }

  /* вертикальний список посилань */
  .nav-drawer .nav-links{ flex-direction: column; gap: 12px; }
  .nav-drawer .nav-links a{ 
    font-size: 16px; 
    color: #111; 
    text-decoration: none; 
    font-weight: bold; 
    display: block;     /* робимо блочним */
    width: 100%;        /* розтягуємо на всю ширину контейнера */
    padding: 8px 0;     /* додаємо вертикальні відступи */
  }
  
  .nav-drawer .nav-links a:hover {
  background: #f0f0f0; /* підсвітка при наведенні */
  } 

  /* блок мов */
  .nav-drawer .lang-switch{
    border-top: 1px solid #e6e6e6; padding-top: 12px;
  }
  .nav-drawer .lang-switch a{ font-size: 14px; font-weight: bold; }
}