/*
  Простий та сучасний дизайн для сайту з оцінки майна. 
  Мета стилю — забезпечити чистий вигляд без зайвих елементів, 
  щоб контент залишався в центрі уваги. 
*/

html {
  box-sizing: border-box;
}

/*
  Спеціальні стилі для контактних посилань у блоці «Співпраця». Ми робимо
  телефон та email клікабельними за допомогою класу .contact-link,
  налаштовуємо синій колір та підкреслення, а також прибираємо
  виділення/підсвітку при кліку чи тапі на мобільних пристроях.
*/
.contact-link {
  /* Використовуємо !important, щоб перекрити загальні стилі посилань
     і забезпечити синій колір у всіх браузерах, зокрема в Chrome. */
  color: #007bff !important;
  text-decoration: underline;
  /* Прибираємо підсвітку при тапі у Safari/Chrome на iOS та Android */
  -webkit-tap-highlight-color: transparent;
}

.contact-link:active,
.contact-link:focus {
  outline: none;
  color: #0056b3 !important;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  /* Додаємо fallback‑шрифти для кращої підтримки на різних платформах */
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
  color: #2d2d2d;
  background-color: #f4f6f8;
  line-height: 1.6;

  /* Додаємо flex-розкладку, щоб футер завжди притискався до нижнього краю вікна.
     З flex-direction: column контент розтягується вертикально, а футер з
     margin-top: auto стає липким донизу, якщо контенту недостатньо. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Навігація */
nav {
  /* Make the header sticky and give it a subtle shadow */
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Container inside the nav to align content and restrict width */
/* Container to align logo and menu. We reduce its max width to avoid large empty space on
   wide screens and align items to the left. The menu itself will be pushed to the right
   via margin-left: auto on the <ul>. */
/* Navigation container: widened to 1200px to avoid wrapping of long menu items.
   Items are aligned to the left and the navigation list is pushed to the right via
   margin-left: auto on the ul. */
.nav-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem 2rem;
}

/* Push the navigation list to the right of the logo */
.nav-container ul {
  margin-left: auto;
}

nav .logo {
  font-weight: 700;
  /* Збільшуємо розмір шрифту логотипа, щоб назва "Авто Маркет"
     була помітнішою у хедері */
  font-size: 1.5rem;
  color: #00796b;
  text-decoration: none;
}

nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  /* Додаємо проміжок між пунктами меню також у базовому визначенні,
     щоб проміжки були однаковими до появи специфічніших правил. */
  gap: 2rem;
}

nav ul li {
  /* На десктопі відступи між пунктами меню керуються через властивість gap у nav ul.
     Тому лівий відступ для кожного елемента прибираємо, щоб уникнути різної ширини. */
  margin-left: 0;
}

nav ul li a {
  text-decoration: none;
  color: #2d2d2d;
  font-weight: 500;
  transition: color 0.3s ease;

  /* Prevent menu item text from breaking onto multiple lines */
  white-space: nowrap;

  /* Збільшуємо розмір шрифту пунктів навігації, щоб меню легше читалося.
     Значення 1rem приблизно дорівнює 16px. */
  font-size: 1rem;

  /*
    Задаємо однакову висоту для всіх пунктів навігації за допомогою
    явного line-height та вертикальних відступів. Safari та Chrome
    на мобільних пристроях можуть по‑різному інтерпретувати
    line-height елементів меню (особливо коли <a> залишаються
    inline). Для уникнення різниці встановлюємо display: block,
    невеликий line-height та однаковий вертикальний padding. Це
    гарантує, що висота кожного пункту меню є однаковою незалежно
    від браузера або платформи.
  */
  display: block;
  line-height: 1.2;
  padding: 0.5rem 0;
}

/* Underline animation on hover */
nav ul li a {
  position: relative;
}
nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #00796b;
  transition: width 0.3s ease;
}
nav ul li a:hover::after {
  width: 100%;
}

nav ul li a:hover {
  color: #00796b;
}

/* When the user scrolls down, increase the nav shadow */
nav.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Герой (перша секція) */
.hero {
  position: relative;
  background-image: url('images/hero.png');
  background-size: cover;
  background-position: center;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Злегка затемнюємо фон героя для кращої читабельності тексту */
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  /* Обмежуємо ширину текстового блоку, щоб довгі рядки не тягнулися на всю ширину героя */
  max-width: 600px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.btn-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  background-color: #00796b;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;

  /* Додаємо легку тінь для кнопки, щоб вона виглядала об'ємніше */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
  background-color: #009688;
}

/* Загальна структура секцій */
section {
  /* Зменшено верхній та нижній відступи у секціях для скорочення
     вертикальних інтервалів між якорями. Було 3rem, стало 1.5rem (50% менше). */
  padding: 1.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;

  /* Offset section anchors by the height of the sticky navigation bar to
     ensure that headings are not hidden beneath the header when navigating
     via anchor links (e.g., Партнери, Рекомендації). */
  /* Зменшено відступ для якорів: тепер секція відступає на 20px від верху при навігації
     за якорями, щоб заголовки залишались видимими під шапкою і відступи були компактнішими. */
  scroll-margin-top: 20px;
}

section h2 {
  font-size: 2rem;
  /* Скидаємо верхній відступ заголовку, щоб інтервали між секціями були однаковими. */
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: #00796b;
}

section p {
  margin-bottom: 1.25rem;
}

/* Секція послуг */
.services {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.service {
  flex: 1 1 280px;
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;

  /* Фіксована мінімальна висота карток послуг для уніфікованого вигляду */
  min-height: 250px;
}

.service:hover {
  transform: translateY(-5px);
}

.service h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: #00796b;
  font-size: 1.25rem;
}

.service p {
  font-size: 0.95rem;
  color: #555555;
}

.service a {
  display: inline-block;
  margin-top: 1rem;
  color: #00796b;
  font-weight: 600;
  text-decoration: none;
}

.service a:hover {
  text-decoration: underline;
}

/* Блок з тарифами в секції послуг */
.service-prices-block {
  background-color: #e0f2f1;
  border-left: 4px solid #00796b;
  /* Збільшуємо внутрішні відступи та додаємо зовнішні, щоб блок був більш вираженим */
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 8px;
  font-size: 0.95rem;
  /* Легка тінь для глибини */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Заголовок для тарифного блоку */
.tariff-title {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: #00796b;
  text-align: left;
}

/* Для якорів основних розділів на головній сторінці задаємо більший відступ
   зверху (80px), щоб заголовки не потрапляли під шапку при переході по меню. */
#partners,
#testimonials,
#cooperation {
  scroll-margin-top: 80px;
}
.service-prices-block .price-item + .price-item {
  margin-top: 0.5rem;
}
.service-prices-block strong {
  color: #00796b;
}

/* Стилізація пунктів у тарифному списку: іконка та горизонтальне вирівнювання */
.service-prices-block .price-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-prices-block .price-item::before {
  content: '💰';
  font-size: 1rem;
  color: #00796b;
}

/* Стиль для примітки під тарифами */
.price-note {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #555555;
}

/* Кнопка після тарифів */
.price-btn {
  margin-top: 1rem;
}

/* Секція партнерів */
.partners-list {
  /* Використовуємо CSS Grid для рівномірного розташування логотипів партнерів */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.partner-item {
  flex: 1 1 200px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.partner-item h4 {
  margin-top: 0;
  color: #00796b;
  font-size: 1rem;
}

.partner-item p {
  font-size: 0.9rem;
  color: #555555;
}

/* Додаємо стилі для логотипів партнерів */
.partner-item img {
  width: 90px;
  height: auto;
  margin-bottom: 0.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Стилі для зображень у розділі рекомендацій */
.testimonial img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  object-fit: cover;
}

/* Секція рекомендацій */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.testimonial {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.testimonial p {
  font-style: italic;
  margin-bottom: 1rem;
}

.testimonial .author {
  font-weight: 600;
  color: #00796b;
  font-size: 0.9rem;
}

/* Футер */
footer {
  background-color: #00796b;
  color: #ffffff;
  padding: 2rem;

  /* Додаємо автоматичний верхній відступ, щоб футер притискався донизу при
     недостатній висоті контенту. */
  margin-top: auto;
}

footer .footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

footer .footer-section {
  flex: 1 1 200px;
}

footer h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  color: #ffffff;
}

footer p, footer a {
  font-size: 0.9rem;
  /* Білий колір для посилань у футері забезпечує достатній контраст на темному фоні */
  color: #ffffff;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  /* Show the hamburger and hide the standard nav list on small screens */
  .hamburger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }
  .hamburger span {
    height: 3px;
    width: 25px;
    background: #00796b;
    margin: 4px 0;
    transition: 0.4s;
  }

  /* hide nav items by default on mobile. The list is within .nav-container */
  .nav-container ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 0;
    border-top: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .nav-container ul.open {
    display: flex;
  }
  .nav-container ul li {
    margin: 0;
    /*
      Виправляємо непослідовну висоту пунктів мобільного меню на різних
      браузерах. Прибираємо внутрішній padding з <li>, щоб
      вертикальні відступи задавалися безпосередньо на <a>. Так
      елементи меню мають однакову висоту та вертикальний відступ у
      Chrome та Safari на iOS та Android.
    */
    padding: 0;
    border-bottom: 1px solid #eee;
  }

  /*
    Застосовуємо однакові відступи до посилань меню в мобільній
    версії. Встановлюємо горизонтальний та вертикальний padding
    безпосередньо для <a>, що дозволяє контролювати висоту кожного
    пункту та робить розміри однаковими у Chrome і Safari.
  */
  .nav-container ul li a {
    /*
      Зменшуємо розмір шрифту та явно задаємо line-height і відступи,
      щоб усі рядки мобільного меню мали більш компактну висоту.
      Навіть якщо текст переноситься на два рядки, верхній і нижній
      відступи будуть однаковими для всіх пунктів.
    */
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 0.5rem 1rem;
  }

  /*
    Розміщуємо гамбургер‑іконку праворуч у мобільній версії. За замовчуванням
    nav ul має margin-left: auto, що штовхає решту елементів, включно з
    гамбургером, у центр. На мобільних екранах ми приховуємо список меню,
    тому скидаємо margin-left і використовуємо space-between для розміщення
    логотипа зліва та гамбургера праворуч.
  */
  .nav-container {
    justify-content: space-between;
  }
  .nav-container ul {
    margin-left: 0;
  }
  .hero h1 {
    font-size: 1.8rem;
  }
  .hero p {
    font-size: 1rem;
  }

  /* Зменшуємо висоту героя на мобільних, щоб контент був ближче до верхньої частини сторінки */
  .hero {
    height: 40vh;
  }
  section {
    /* На мобільних екранах також зменшуємо вертикальні відступи секцій,
       щоб інтервали між якорями були компактніші. Було 2rem, стало 1rem. */
    padding: 1rem 1rem;
  }
  /* Тарифний блок на мобільних екранах трохи збільшуємо: більші шрифти та
     відступи для кращої читабельності на малих екранах. */
  .service-prices-block {
    font-size: 1rem;
    padding: 1.25rem;
  }
  .tariff-title {
    font-size: 1.2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .services {
    flex-direction: column;
  }
  .footer-content {
    flex-direction: column;
    gap: 1rem;
  }

  /* Оновлена мобільна версія: відображаємо секцію рекомендацій та 
     формуємо сітку 2×2 для листів; адаптуємо блок партнерів під різні 
     ширини телефону. */
  /* Відображаємо секцію "Рекомендації" на мобільних та робимо 2‑х
     колонкову сітку сканів листів. */
  #testimonials {
    display: block !important;
  }
  #testimonials .testimonials {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }
  #testimonials .testimonial img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
  }
  #testimonials .testimonial .author {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
  }

  /* Переформатовуємо блок "Наші партнери" в мобільній версії: 
     елементи розміщуються рядками з перенесенням замість кожного окремо. 
     Зображення та описи приховані для компактності. */
  #partners .partners-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  #partners .partner-item {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #ffffff;
    margin: 0;
    /*
      Не дозволяємо елементам розтягуватись на всю ширину, щоб
      чіпи залишались компактними та відображались у ряд із перенесенням.
      Властивість flex: 0 1 auto означає, що елемент може звужуватись
      (basis = auto), але не росте більше необхідного.
    */
    flex: 0 1 auto;
    /*
      Центруємо вміст всередині чіпа, щоб назви вирівнювались по центру.
    */
    justify-content: center;
  }
  #partners .partner-item h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    /*
      Центруємо текст у назві партнера та дозволяємо переносити
      довгі назви на кілька рядків. Так короткі назви залишаються на
      одному рядку, а довгі не виходять за межі чіпа.
    */
    text-align: center;
    white-space: normal;
  }
  #partners .partner-item img {
    display: none !important;
  }
  #partners .partner-item p {
    display: none;
  }
}

/* === Мобільна адаптація підпису "АвтоКредит" ===
   Відображаємо повну назву "АвтоКредит ПЛЮС" на десктопі і коротку
   "АвтоКредит" на мобільних. Налаштовуємо перенесення та
   запобігаємо перенесенню назви на декілька рядків. */
.author.avtokredit .full-name {
  display: inline;
}
.author.avtokredit .mobile-name {
  display: none;
}
@media (max-width: 768px) {
  .author.avtokredit .full-name {
    display: none;
  }
  .author.avtokredit .mobile-name {
    display: inline;
    white-space: nowrap;
  }
}