/* ux-fixes.css - правки мобильного UX и багов вёрстки lakol-adhesive.com.
   Подключать ПОСЛЕ style.css и responsive.css, ПЕРЕД product.css.
   Файл отдельный намеренно: исходные стили шаблона не трогаем. */

/* 1. Якоря не уезжают под фиксированную шапку */
section[id], [id="contact"] { scroll-margin-top: 90px; }
@media (max-width: 767px) { section[id], [id="contact"] { scroll-margin-top: 70px; } }

/* 2. Первый экран не дёргается при показе/скрытии адресной строки.
   Раньше высоту на каждый resize пересчитывал JS (bannerHeight), из-за чего экран
   прыгал на мобильном при появлении адресной строки. Теперь высота в CSS.
   Оригинальную схему table/table-cell не трогаем - она центрирует контент по
   вертикали и держит блок слева; задаём только высоты и отступ под шапку. */
.hero-image.freelancer { height: auto !important; min-height: 100vh; min-height: 100svh; }
.hero-image.freelancer .container { height: auto; min-height: 100vh; min-height: 100svh; }
.hero-image.freelancer .content-wrapper { height: auto; min-height: 100vh; min-height: 100svh; padding-top: 90px; padding-bottom: 40px; }
@media (max-width: 767px) {
    .hero-image.freelancer,
    .hero-image.freelancer .container,
    .hero-image.freelancer .content-wrapper { min-height: 88vh; min-height: 88svh; }
    .hero-image.freelancer .content-wrapper { padding-top: 70px; }
}

/* 3. Заголовок первого экрана на маленьких телефонах */
@media (max-width: 479px) {
    .hero-image .content-wrapper { max-width: 100%; padding-right: 10px; }
    .hero-image h1 { font-size: 32px; line-height: 38px; }
    .type-text { font-size: 16px; line-height: 24px; margin-bottom: 20px; }
}

/* 4. Тап-зоны: минимум 44px */
.btn, .btn-default, .btn-primary { min-height: 48px; padding: 13px 26px; }
@media (max-width: 767px) {
    .header .navbar-nav li a { padding: 14px 15px; min-height: 48px; }
    .navbar-toggle { min-width: 48px; min-height: 48px; margin-top: 12px; }
}

/* 5. Меню капсом во всех местах */
.header .navbar-nav li a,
.footer-nav a { text-transform: uppercase; letter-spacing: 0.05em; font-size: 13px; }
@media (max-width: 991px) { .header .navbar-nav li a, .footer-nav a { font-size: 12.5px; } }
.header .navbar-nav li.nav-phone a { letter-spacing: 0.02em; color: #659CD5; font-weight: 700; }
.header .navbar-nav li.nav-phone a:hover { color: #fff; }

/* 6. Воздух между секциями на мобильном */
@media (max-width: 767px) {
    section { padding-top: 40px; padding-bottom: 40px; }
    .heading { margin-bottom: 25px; }
}

/* 8. Характеристики (.skills) в одну колонку на узких экранах */
@media (max-width: 560px) {
    .skills div[class*="col-xs-6"] { float: none; width: 100%; }
    .skills h4 { font-size: 15px; line-height: 22px; }
}

/* 9. Иконки контактов больше не налезают на текст */
.contact .address,
.contact .phone,
.contact .email {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
    text-align: left; gap: 14px;
}
.contact .address span[class^="pe-7s"],
.contact .phone span[class^="pe-7s"],
.contact .email span[class^="pe-7s"] {
    position: static; margin-left: 0; font-size: 30px; line-height: 1; -ms-flex-negative: 0; flex-shrink: 0;
}
.contact .contact-body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.contact .contact-body p { margin-bottom: 6px; }
.contact a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.contact a:hover { color: #659CD5; }
@media (max-width: 767px) {
    .contact .address, .contact .phone, .contact .email { margin-bottom: 26px; }
    .contact .col-sm-4:last-child .email { margin-bottom: 0; }
}

/* 10. Блоки «ПРОФИЛЬ»: убираем горизонтальный сдвиг на мобильном */
@media (max-width: 767px) {
    .education, .experience { margin-left: 0; margin-right: 0; box-shadow: 6px 6px 0 0 #e7e7e7; }
    .experience { box-shadow: 6px 6px 0 0 #4a4c5d; }
    .box { padding: 18px; }
    .box .year { margin-top: -34px; }
}

/* 11. Подвал: правовой блок */
.footer-legal { background: #23242c; padding: 26px 0 22px; color: #9096a5; font-size: 13px; line-height: 21px; }
.footer-nav { text-align: center; margin-bottom: 16px; }
.footer-nav a { display: inline-block; color: #cfd3dd; font-weight: 600; margin: 0 12px 8px; }
.footer-nav a:hover { color: #659CD5; }
.footer-docs { text-align: center; margin-bottom: 14px; }
.footer-docs a { display: inline-block; color: #9096a5; margin: 0 10px 6px; text-decoration: underline; text-underline-offset: 3px; }
.footer-docs a:hover { color: #cfd3dd; }
.footer-consent { text-align: center; max-width: 820px; margin: 0 auto 8px; font-size: 12.5px; line-height: 20px; color: #7d8393; }
.footer-consent a { color: #9096a5; text-decoration: underline; text-underline-offset: 3px; }
.footer-consent-list { margin-bottom: 0; }
.copyright p { margin-bottom: 6px; font-size: 13px; }
.copyright .copyright-ru { font-size: 11px; color: #5a5d6b; margin-bottom: 0; }

/* 12. Мобильное меню без bootstrap.js */
@media (max-width: 767px) {
    .navbar-collapse.collapse { display: none !important; }
    .navbar-collapse.collapse.is-open { display: block !important; }
    #myNavbar { border-top: 1px solid #e7e7e7; max-height: 80vh; overflow-y: auto; }
}

/* 13. Мелочи */
img { max-width: 100%; height: auto; }
.type-text .type:empty::after { content: "\00a0"; }
a:focus-visible, button:focus-visible { outline: 2px solid #659CD5; outline-offset: 2px; }