/* ===== БАЗА / ПЕРЕМЕННЫЕ ===== */
:root {
  /* высота фикс-хедера по умолчанию (мобайл) */
  --header-h: 100px;
}
@media (min-width: 768px) {
  :root { --header-h: 100px; }
}
@media (min-width: 992px) {
  /* подгони под реальную высоту хедера на десктопе */
  :root { --header-h: 120px; }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  background-color: #fff;
  color: #333;
  line-height: 1.5;
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; }

/* ===== КОНТЕНТ ===== */
main {
  /* центрируем весь контент main относительно окна минус хедер */
  display: flex;
  flex-direction: column;
  justify-content: center;              /* по вертикали */
  align-items: center;                  /* по горизонтали */
  min-height: calc(100dvh - var(--header-h));
  padding: 20px;
  box-sizing: border-box;
}

h1, h2, h3 { font-weight: bold; color: #1a3a5a; }
section { margin-bottom: 30px; }

/* ===== КНОПКИ ===== */
button, .btn {
  display: inline-block;
  background-color: #ffcc00;
  color: #000;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover, .btn:hover { background-color: #e6b800; }

/* ===== МОДАЛКА ===== */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 60px;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%; max-width: 500px;
  border-radius: 8px;
}
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover { color: #000; }

/* ===== ФОРМЫ ===== */
form { display: flex; flex-direction: column; gap: 10px; }
input, select, textarea { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; }
textarea { resize: vertical; }
input[type="submit"] { background-color: #ffcc00; color: #000; font-weight: bold; cursor: pointer; }
input[type="submit"]:hover { background-color: #e6b800; }

/* ===== СОЦСЕТИ (внутри main) ===== */
#social-links {
  /* не тянем собственную высоту — центр делает main */
  margin: 0;
  padding: 0;
  text-align: center;
}

#social-links .social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0;
}

#social-links a.facebook,
#social-links a.x {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
  overflow: hidden;
}

#social-links a.facebook svg,
#social-links a.x svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
  flex-shrink: 0;
  color: #1a3a5a;
}

#social-links a:hover { transform: scale(1.1); }

#social-links .business-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  text-align: center;
  margin-top: 6px;
}
#social-links .business-links a {
  color: #1a3a5a;
  display: inline-block;
  padding: 10px 16px;
  margin: 6px 0;
  font-size: 16px;
  min-height: 48px;
  line-height: 1.4;
  border-radius: 6px;
  background-color: #f9f9f9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: background-color 0.3s, color 0.3s ease;
}
#social-links .business-links a:hover { background-color: #ffcc00; color: #000; }

/* Десктоп/планшет — чуть крупнее «пилюли» */
@media (min-width: 992px) {
  #social-links .social-icons { gap: 20px; }
  #social-links a.facebook, #social-links a.x { width: 56px; height: 56px; }
  #social-links a.facebook svg, #social-links a.x svg { width: 26px !important; height: 26px !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #social-links a.facebook, #social-links a.x { width: 52px; height: 52px; }
  #social-links a.facebook svg, #social-links a.x svg { width: 24px !important; height: 24px !important; }
}

/* ===== ФУТЕР ===== */
footer {
  text-align: center;
  padding: 20px;
  background-color: #1a3a5a;
  color: #fff;
  font-size: 14px;
}

/* ===== ПРОЧЕЕ МОБ. ===== */
@media (max-width: 767.98px) {
  main { padding: 15px; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
}