/*
Мобильная и планшетная вёрстка seo.kr.ua (IVA-67).
Подключается после style.css и style.php (functions.php). Всё, кроме скрытой кнопки «Меню», лежит внутри media-запросов:
от 1000px остаётся прежний десктоп (макет темы — 925px, планшет в альбомной ориентации 1024px тоже видит его).
- до 999px — планшет в портретной ориентации и телефон в альбомной: резиновая колонка, меню за кнопкой «Меню»;
- до 599px — телефон: одна колонка, крупнее текст и поля ввода (16px — иначе iOS увеличивает страницу при вводе).
!important — только против встроенных стилей (style="" в текстах страниц, то, что ставит скрипт подменю superfish)
и против !important в style.php.
*/

.nav-toggle {display: none;}

@media (max-width: 999px) {

html {-webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
img, iframe, video, embed, object {max-width: 100%;}

/* Шапка: логотип, поиск, соцсети, языки и кнопка «Меню» в строку, меню — под ними */
.header {display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: auto; padding: 14px 24px;}
.header #logoname {order: 1; float: none; width: auto; margin: 0;}
.header #logoname img {display: block;}
.header #search {order: 2; flex: 1 1 140px; min-width: 0; max-width: 300px; float: none; height: auto; margin: 0;}
.header #searchform {display: flex; width: auto; height: auto; margin: 0; float: none;}
.header #searchbox {flex: 1 1 auto; width: 0; min-width: 0; height: 40px; padding: 0 12px; box-sizing: border-box; font-size: 16px;}
.header #searchbutton {flex: 0 0 auto; width: 38px; height: 40px; box-sizing: border-box; background-position: 6px center;}
.header #twit-rss {order: 3; display: flex; gap: 8px; float: none; margin: 0;}
.header #twit-rss > a {display: block; margin: 0;}
.header #twit-rss img {display: block;}
.header #lang-switch {order: 4; display: flex; float: none; margin: 0;}
.header #lang-switch li {float: none; margin: 0 0 0 4px;}
.header #lang-switch a {padding: 9px 10px; line-height: 20px;}

.nav-toggle {order: 5; display: flex; align-items: center; gap: 10px; min-height: 40px; margin-left: auto; padding: 0 14px; border: 0; border-radius: 4px; background: #d34646; color: #fff; font: 16px/20px "Open Sans", Helvetica, Arial, sans-serif; cursor: pointer;}
.nav-toggle:focus-visible, .header a:focus-visible {outline: 2px solid #fff; outline-offset: 2px;}
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after {display: block; width: 18px; height: 2px; background: #fff; border-radius: 1px;}
.nav-toggle-icon {position: relative;}
.nav-toggle-icon::before, .nav-toggle-icon::after {content: ""; position: absolute; left: 0;}
.nav-toggle-icon::before {top: -6px;}
.nav-toggle-icon::after {top: 6px;}
.nav-open .nav-toggle-icon {background: transparent;}
.nav-open .nav-toggle-icon::before {top: 0; transform: rotate(45deg);}
.nav-open .nav-toggle-icon::after {top: 0; transform: rotate(-45deg);}

.header .navigation {order: 6; flex: 0 0 100%; float: none; height: auto; margin: 0;}
.header.nav-ready:not(.nav-open) .navigation {display: none;}
.header #navbar {float: none; height: auto; padding: 0; border-top: 1px solid rgba(255, 255, 255, .3);}
.header #navbar li {float: none; display: block; margin: 0;}
#navbar > li > a {padding: 12px 8px; font-size: 16px; line-height: 20px; border-bottom: 1px solid rgba(255, 255, 255, .3);}
#navbar > li > a:hover, #navbar > li:hover > a, #navbar > li.current-menu-item > a {border-radius: 0;}
/* Подменю «Послуги» — сразу раскрытым списком: наведения на телефоне и планшете нет */
#navbar li ul, #navbar > li ul {position: static; display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; width: auto; margin: 0; padding: 0 0 0 20px; background: none; border-radius: 0;}
#navbar > li ul li {padding-top: 0;}
#navbar > li ul a {display: block; padding: 10px 8px; font-size: 15px; line-height: 20px; border-bottom: 1px solid rgba(255, 255, 255, .2);}

/* Баннер главной */
.hero {padding: 0 24px 24px;}
.hero-link {width: auto; max-width: 500px; height: auto;}
.hero-mark {margin: 20px auto 0;}
.hero-title {left: 0; margin-top: 16px;}
.hero-text {width: auto; max-width: 470px;}

/* Колонки: вместо фиксированных 925px — ширина экрана */
#wrapper, #homepage-wrapper, #big-column, #column-top, #column-content, #sub-column, #sub-top, #sub-content, .content, .no-sidebar .content, #comments {width: auto; float: none; margin-left: 0; margin-right: 0;}
#portfolio .content {width: auto !important;}
#wrapper {min-height: 0;}
#sub-top {height: auto; margin-top: 0;}
.breadcrumb {float: none; padding: 12px 24px 0;}
.content {padding: 10px 24px; overflow-wrap: break-word;}
.sidebar {width: auto; float: none; margin: 0; padding: 0 24px;}

/* Главная: три колонки в сетку, на узком планшете — две; по ширине не выравниваем — в узких колонках дыры между словами */
#column-content {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; padding: 0 24px 20px;}
.feat-post, div.latest-posts {width: auto; float: none; padding: 10px 0;}
ul.latest-posts {width: auto; float: none;}
.feat-post p, .feat-post h3, .latest-posts h3, .latest-posts p {text-align: left;}

/* Тексты страниц и записей */
.content {font-size: 14px;}
.post ul {margin: 16px 0 10px 0;}
.content img {max-width: 100%; height: auto; box-sizing: border-box;}
.content img.size-full {max-width: 100%;}
.content iframe {max-width: 100%;}
.content table, .content pre {float: none; display: block; max-width: 100%; overflow-x: auto;}
.content .with_image img, .content .with_image p {float: none; width: auto; margin-left: 0;}
.post_meta .date, .post_meta .comment_meta, .post_meta .category a {font-size: 12px;}

/* «Нам довіряють», «SEOБлондинки»: карточки по 300px — в резиновую сетку (.content — сильнее «.content div {display: block}» темы) */
.content .trust-us-wrap, .content .seoblondinki-video-wrap, .content .seoblondinki-text-wrap {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px;}
.content .trust-us-wrap {grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
.trust-us, .seoblondinki-video, .seoblondinki-text {float: none; width: auto; margin-right: 0;}
.trust-us img {max-width: 100%;}
.seoblondinki-video iframe {display: block; width: 100%; height: auto; aspect-ratio: 300 / 170;}

/* Контакты: карта (style="" в тексте страницы: 600×400, float:right) — под контактами во всю ширину */
.content .vcard {display: flex; flex-direction: column;}
.vcard .geo {order: 2; display: block; float: none !important; margin-top: 24px;}
#gmap_canvas {display: block; width: 100% !important; height: 360px !important;}
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form textarea {width: 100%; max-width: 480px; box-sizing: border-box; font-size: 16px;}
.gsubm input {margin-left: 0; padding: 10px 24px; font-size: 16px;}
.content input[type=text], .content input[type=search] {font-size: 16px;}

/* Форма комментария: подписи над полями */
#respond form {padding: 10px 16px 0;}
#respond label {float: none; width: auto; padding-bottom: 6px;}
#respond .required {float: none;}
#respond input[type=text], #respond input[type=email], #respond input[type=url], #respond textarea {width: 100%; max-width: 100%; box-sizing: border-box; font-size: 16px;}
#respond .comment-form-cookies-consent {display: flex; align-items: flex-start; gap: 8px;}
#respond .comment-form-cookies-consent label {display: inline; padding: 0;}
#respond input[type=submit] {padding: 10px 16px; font-size: 16px;}

/* Подвал */
#footer {width: auto; height: auto; padding: 10px 24px;}

}

@media (max-width: 599px) {

/* Первая строка — логотип, языки, «Меню»: помещается и в 320px */
.header {column-gap: 10px; padding: 10px 16px;}
.header #lang-switch {order: 2; margin-left: auto;}
.header #lang-switch li {margin-left: 2px;}
.header #lang-switch a {padding: 9px 8px;}
.nav-toggle {order: 3; gap: 8px; margin-left: 0; padding: 0 10px;}
.header #search {order: 4; flex: 1 1 160px; max-width: none;}
.header #twit-rss {order: 5;}

.hero {padding: 0 16px 20px;}
.hero-text {font-size: 14px; line-height: 22px;}

.breadcrumb {padding: 12px 16px 0; font-size: 13px;}
.content {padding: 10px 16px; font-size: 15px;}
.sidebar {padding: 0 16px;}
.content h2 {font-size: 18px; line-height: 24px;}
.content h3 {font-size: 16px; line-height: 22px;}
.post_meta, .post_meta .date, .post_meta .comment_meta, .post_meta .category a {font-size: 13px; line-height: 24px;}
.content .alignleft, .content .alignright, .content img.alignleft, .content img.alignright {float: none; display: block; margin: 10px 0;}

/* Главная — одна колонка */
#column-content {display: block; padding: 0 16px 20px;}
.feat-post p, .feat-post h3, .latest-posts h3, .latest-posts p {font-size: 15px; line-height: 24px;}
.uslugi ul li, .latest-posts ul li {margin-bottom: 8px;}
.uslugi ul li a, .latest-posts ul li, .homepage-seoblondinki li {font-size: 15px; line-height: 22px;}
.homepage-seoblondinki a {font-size: 15px !important;}

.trust-us h3, .gray-italic, .seoblondinki-text li {font-size: 15px; line-height: 22px;}
.contacts-page h3, .address, .phones, .contact-form {font-size: 15px; line-height: 24px;}
#gmap_canvas {height: 300px !important;}
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form textarea {max-width: 100%;}

#footer {padding: 10px 16px;}
.footer-wrap p.tagline {font-size: 13px; line-height: 20px;}

}