/* =========================================================
   Акустична варта — Лабораторна робота №2
   Чистий CSS: селектори, каскад, specificity, Box Model,
   display, position, transition, transform.
   Flexbox/Grid навмисно НЕ використовуються (тема ЛР3).
   ========================================================= */

/* ---------- 1. Універсальний селектор + box-sizing ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;   /* width включає padding і border */
  margin: 0;
  padding: 0;
}

/* ---------- 2. Селектори елементів ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1f2937;
  background: #f7f9fb;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Групування селекторів: однакова гарнітура/колір для всіх заголовків */
h1, h2, h3 {
  color: #0f1b33;
  line-height: 1.2;
}

p {
  color: #4b5563;           /* базовий колір абзаців (див. конфлікт нижче) */
}

/* ---------- 3. Контейнер (Box Model) ---------- */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;           /* центрування блочного елемента */
  padding: 0 24px;
}

/* ---------- 4. Header ---------- */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 18px 0;
}

/* inline-block-розкладка: прибираємо пробіли між inline-block через font-size:0 */
.site-header .container {
  font-size: 0;
}

.brand,
.main-nav {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}

.brand {
  width: 40%;
}

.brand__name {
  display: block;           /* посилання стає блоком */
  font-size: 24px;
  font-weight: 700;
  color: #0f1b33;
}

.brand__slogan {
  font-size: 14px;
}

.main-nav {
  width: 60%;
  text-align: right;
}

.main-nav__link {
  display: inline-block;    /* можна задати padding/margin по вертикалі */
  margin-left: 28px;
  padding: 6px 2px;
  font-weight: 500;
  color: #0f1b33;
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.main-nav__link:hover {
  color: #2f7d32;
}

.main-nav__link--active {
  color: #2f7d32;
  font-weight: 600;
  border-bottom-color: #2f7d32;
}

/* ---------- 5. Hero (Backgrounds) ---------- */
.hero {
  position: relative;
  min-height: 300px;
  padding: 44px 0;
  background:
    linear-gradient(90deg, #eef2f6 0%, #eef2f6 58%, rgba(238, 242, 246, 0) 76%),
    url("../images/hero-sensor.jpg") right 30% / auto 150% no-repeat,
    #eef2f6;
  overflow: hidden;
}

.hero__content {
  width: 55%;
}

.hero__title {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 12px;
}

.hero__text {
  font-size: 18px;
  color: #1f2937;
  margin-bottom: 26px;
}

/* ---------- 6. Кнопки (Transitions) ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: #2f7d32;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
  background: #1b5e20;      /* при наведенні кнопка змінює колір */
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(47, 125, 50, 0.3);
}

/* ---------- 7. Декоративний датчик (transform) ---------- */
.sensor-deco {
  position: absolute;
  right: 330px;
  top: 60px;
  width: 120px;
  height: 120px;
}

.sensor-deco__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.75) transparent transparent transparent;
  border-radius: 50%;
  transform: rotate(-60deg) scale(0.5);
}

.sensor-deco__wave:nth-child(2) {
  transform: rotate(-60deg) scale(0.75);
}

.sensor-deco__wave:nth-child(3) {
  transform: rotate(-60deg) scale(1);
}

/* ---------- 8. Секції ---------- */
.section {
  padding: 28px 0 8px;
}

.section__title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 16px;
}

.section__lead {
  margin: -8px 0 18px;
}

/* ---------- 9. Показники моніторингу (inline-block) ---------- */
.stats {
  font-size: 0;             /* прибирає «пробіл» між inline-block */
}

.stat {
  display: inline-block;
  vertical-align: top;
  width: calc((100% - 4 * 16px) / 5);
  height: 120px;            /* фіксована висота картки (Box Model) */
  box-sizing: border-box;   /* явно для картки вимірювання: 120px = контент + padding + border */
  margin-right: 16px;
  padding: 16px 18px;
  font-size: 16px;
  background: #f4f7fb;
  border: 1px solid #dfe5ec;
  border-radius: 6px;
}

.stat:last-child {
  margin-right: 0;
}

.stat__label {
  font-size: 13px;
  margin-bottom: 6px;
}

.stat__value {
  font-size: 20px;
  font-weight: 700;
  color: #0f1b33;
  white-space: nowrap;
  margin-bottom: 10px;
}

.stat__value--small {
  font-size: 17px;
  white-space: normal;
}

.stat__note {
  font-size: 13px;
}

.badge {
  display: block;
  padding: 3px 12px;
  font-size: 13px;
  border-radius: 3px;
}

.badge--ok {
  color: #1b5e20;
  background: #dcf1dd;
}

/* ---------- 10. Картки напрямів (спільний клас + inline-block) ---------- */
.cards {
  font-size: 0;
}

.card {
  display: inline-block;
  vertical-align: top;
  width: calc((100% - 3 * 14px) / 4);
  min-height: 84px;
  margin-right: 14px;
  padding: 18px;
  font-size: 16px;
  background: #f4f7fb;
  border: 1px solid #dfe5ec;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:last-child {
  margin-right: 0;
}

.card:hover {
  transform: translateY(-4px);
  border-color: #2f7d32;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.08);
}

.card__text {
  font-size: 14px;
}

/* ---- КОНФЛІКТ ПРАВИЛ №1 (для аналізу cascade/specificity) ----
   Обидва правила задають color для заголовка картки:
   .card__title          → specificity (0,1,0)
   #services .card__title → specificity (1,1,0) — ПЕРЕМАГАЄ,
   хоча записане ВИЩЕ у файлі. У DevTools перше буде перекреслене. */
#services .card__title {
  color: #0f1b33;
}

.card__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #2f7d32;           /* перекреслиться у DevTools */
}

/* ---------- 11. Попередження (position relative/absolute) ---------- */
.warning {
  position: relative;       /* точка відліку для .warning__tag */
  margin: 28px 0 8px;
  padding: 18px 20px;
  background: #fde8e8;
  border: 1px solid #f19a9a;
  border-radius: 6px;
}

.warning__tag {
  position: absolute;       /* позначка статусу в куті блока */
  top: -11px;
  right: 18px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: #d32f2f;
  border-radius: 10px;
}

.warning__title {
  font-size: 22px;
  color: #d32f2f;
  margin-bottom: 4px;
}

/* ---- КОНФЛІКТ ПРАВИЛ №2 ----
   p              → (0,0,1)  color: #4b5563
   .warning__text → (0,1,0)  color: #1f2937  — перемагає клас.
   А #warning p   → (1,0,1)  ще сильніше і задає font-size. */
.warning__text {
  color: #1f2937;
}

#warning p {
  font-size: 15px;
}

/* ---------- 12. Таблиця вимірювань ---------- */
.log {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid #dfe5ec;
  font-size: 14px;
}

.log th,
.log td {
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.log th {
  font-weight: 600;
  background: #e8edf3;
}

.log tbody tr {
  transition: background-color 0.2s ease;
}

.log tbody tr:hover {
  background: #f4f7fb;
}

.level {
  font-weight: 600;
}

.level--high,
.status--high {
  color: #d32f2f;
}

.status--ok {
  color: #2f7d32;
}

/* ---------- 13. Форма ---------- */
.order-form {
  font-size: 0;
}

.order-form__col {
  display: inline-block;
  vertical-align: top;
  width: calc((100% - 2 * 24px) / 3);
  margin-right: 24px;
  font-size: 16px;
}

.order-form__col:nth-child(3) {
  margin-right: 0;
}

.field {
  margin-bottom: 14px;
}

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}

.req {
  color: #d32f2f;
}

/* Селектори атрибутів */
input[type="text"],
input[type="email"],
select,
textarea {
  display: block;
  width: 100%;
  height: 42px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: #1f2937;
  background: #ffffff;
  border: 1px solid #cfd6de;
  border-radius: 5px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea {
  height: 98px;
  resize: vertical;
}

input[required]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #2f7d32;
  box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.15);
}

.btn--submit {
  display: block;
  margin-top: 6px;
  padding: 12px 36px;
  font-size: 16px;
}

/* ---------- 14. Footer ---------- */
.site-footer {
  margin-top: 36px;
  padding: 28px 0;
  background: #2b3542;
  color: #e5e7eb;
}

.site-footer .container {
  font-size: 0;
}

.site-footer__brand,
.site-footer__meta {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  font-size: 16px;
}

.site-footer__meta {
  text-align: right;
}

.site-footer__name {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

/* Групування: кольори тексту футера перекривають базове p { color } */
.site-footer__slogan,
.site-footer__copy,
.site-footer__contacts {
  font-size: 14px;
  font-style: normal;
  color: #c7ced8;
}

.site-footer__contacts {
  margin-top: 8px;
}

.site-footer__contacts a:hover,
.footer-nav a:hover {
  color: #8fd694;
}

.footer-nav {
  margin-bottom: 10px;
}

.footer-nav a {
  display: inline;          /* inline-елемент: вертикальні margin не впливають */
  margin-left: 24px;
  transition: color 0.2s ease;
}