/*
Theme Name: Kamensky Corporate
Theme URI: https://example.com/kamensky-corporate
Author: Кáменский
Author URI: https://example.com
Description: Универсальная корпоративная тема: услуги, проекты, новости, портфолио, формы заявок, соцсети, гибкие настройки оформления.
Version: 2.0.1.12
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: kamensky-corporate
Tags: corporate, business, blog, custom-logo, custom-menu, featured-images, translation-ready
*/

:root {
  --c-primary: #1f3a5f;
  --c-heading: #1c1f24;
  --c-accent: #f2a900;
  --c-dark: #1c1f24;
  --c-text: #33363d;
  --c-light: #f5f6f8;
  --c-white: #ffffff;
  --radius: 10px;
  --shadow: 0 6px 20px rgba(0, 0, 0, .08);
  --container: 1200px;
}

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

/* html{scroll-behavior:smooth} убран: он анимировал и программное
   восстановление позиции после закрытия меню — было видно проезд от 0.
   Плавная прокрутка к якорям делается в main.js точечно. */
html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-accent); }

h1, h2, h3, h4 { color: var(--c-heading); line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; }

.container {
  width: 100%;
  max-width: var(--s-container, var(--container));
  margin: 0 auto;
  padding: 0 var(--s-container-pad, 20px);
}

.section {
  padding: var(--s-section-pad, 70px) 0;
}
/* Первая секция под баннером: заголовок не должен уходить под него
   при малом значении «Вертикальные отступы секций». */
.section--first {
  padding-top: max(var(--s-section-pad, 70px), 56px);
  position: relative;
  z-index: 1;
}
/* Когда блок показателей поднят на баннер, он сам создаёт отступ */
.container--stats + .section--first {
  padding-top: max(var(--s-section-pad, 70px), 24px);
}
/* Если карточки поднимаются на баннер, секция начинается ниже них */
.section--after-stats {
  padding-top: max(var(--s-section-pad, 70px), 24px);
}
/* Первая секция после баннера: заголовок не должен прятаться под карточками */
.section--light { background: var(--c-light); }
.section__title { text-align: center; margin-bottom: var(--s-title-gap, 40px); }
.section__title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: var(--c-accent);
  margin: 12px auto 0;
  border-radius: 2px;
}

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.btn--primary { background: var(--c-accent); color: var(--c-dark); }
.btn--primary:hover { background: var(--c-dark); color: var(--c-white); }
.btn--outline { border-color: var(--c-white); color: var(--c-white); background: transparent; }
.btn--outline:hover { background: var(--c-white); color: var(--c-primary); }

/* ---------- Header ---------- */
.site-topbar {
  background: var(--c-dark);
  color: #cfd3da;
  font-size: .9rem;
  padding: 8px 0;
}
.site-topbar .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-topbar a { color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.site-logo { font-size: 1.4rem; font-weight: 800; color: var(--c-primary); }
.site-logo span { color: var(--c-accent); }

/* Логотип из настроек WordPress и текстовая ссылка — одинаковые размеры.
   .custom-logo-link нужен, потому что the_custom_logo() выводит свою обёртку. */
.site-logo img,
.custom-logo-link img,
.custom-logo {
  max-height: var(--s-logo-size, 52px);
  max-width: calc(var(--s-logo-size, 52px) * 4);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.custom-logo-link { display: inline-flex; align-items: center; }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.main-nav a { color: var(--c-dark); font-weight: 500; }
.main-nav a:hover,
.main-nav .current-menu-item > a { color: var(--c-accent); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--c-dark);
  margin: 5px 0;
  border-radius: 2px;
  transition: .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: var(--c-white);
  background:
    linear-gradient(120deg, rgba(31, 58, 95, .92), rgba(28, 31, 36, .85)),
    var(--hero-bg, none) center/cover no-repeat;
  padding: 120px 0;
}
.hero h1 { color: var(--c-white); max-width: 720px; }
.hero p { font-size: 1.15rem; max-width: 620px; opacity: .92; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Stats ---------- */
/* Подъём на баннер действует только когда блок показателей реально выведен */
.container--stats {
  margin-top: calc(var(--s-stats-lift, 50px) * -1);
  position: relative;
  z-index: 2;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--s-card-min, 180px), 1fr));
  gap: var(--s-grid-gap, 24px);
  text-align: center;
}
.stat {
  background: var(--c-white);
  padding: 30px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat strong {
  display: block;
  font-size: var(--s-stat-value-size, 2.2rem);
  color: var(--s-stat-value-color, var(--c-primary));
  font-weight: var(--s-stat-value-weight, 700);
}
.stat span { font-size: var(--s-stat-label-size, 1rem); }

/* ---------- Cards / Grids ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--s-card-min, 260px), 1fr));
  gap: var(--s-grid-gap, 28px);
}
.card {
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card__thumb { aspect-ratio: 4 / 3; background: var(--c-light); overflow: hidden; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.card__body p { color: var(--c-text); font-size: .95rem; flex: 1; }
.card__meta { font-size: .85rem; color: #8a8f99; margin-bottom: 8px; }
.card__link { font-weight: 600; margin-top: 12px; }

.service-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(242, 169, 0, .15);
  display: grid; place-items: center;
  font-size: 1.6rem;
  margin-bottom: 16px;
}

/* ---------- Portfolio filter ---------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.filter-btn {
  border: 2px solid var(--c-primary);
  background: transparent;
  color: var(--c-primary);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: .2s;
}
.filter-btn.is-active,
.filter-btn:hover { background: var(--c-primary); color: var(--c-white); }
.project-item[hidden] { display: none; }

/* ---------- Contact / CTA ---------- */
.cta {
  background: linear-gradient(120deg, var(--c-primary), #2a5285);
  color: var(--c-white);
  text-align: center;
  padding: 70px 0;
}
.cta h2 { color: var(--c-white); }

.lead-form {
  max-width: 640px;
  margin: 0 auto;
  background: var(--c-white);
  padding: 34px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
}
.lead-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.lead-form input,
.lead-form textarea,
.lead-form select {
  padding: 12px 14px;
  border: 1px solid #d5d9e0;
  border-radius: 6px;
  font: inherit;
}
.lead-form input:focus,
.lead-form textarea:focus { outline: 2px solid var(--c-accent); border-color: transparent; }
.lead-form .btn { justify-self: start; }
.form-notice { padding: 12px 16px; border-radius: 6px; }
.form-notice--ok { background: #e7f7ec; color: #186a34; }
.form-notice--err { background: #fdecea; color: #a4262c; }

/* ---------- Single / Page ---------- */
.page-header {
  background: var(--c-light);
  padding: 50px 0;
  border-bottom: 1px solid #e6e8ec;
}
/* На служебных страницах заголовок — последний элемент, отступ снизу не нужен */
.page-header h1 { margin-bottom: 0; }
.page-header .card__meta + h1 { margin-top: .15em; }
.entry-content { max-width: 800px; margin: 0 auto; }
.entry-content > * + * { margin-top: 1em; }
.entry-content img { border-radius: var(--radius); }

.project-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 30px 0;
  background: var(--c-light);
  padding: 24px;
  border-radius: var(--radius);
}
.project-facts dt { font-size: .85rem; color: #7d828c; }
.project-facts dd { margin: 0; font-weight: 700; color: var(--c-dark); }

.pagination { margin-top: 40px; text-align: center; }
.pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  border-radius: 6px;
  background: var(--c-light);
  color: var(--c-dark);
}
.pagination .current { background: var(--c-primary); color: var(--c-white); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-dark); color: #b7bcc6; padding: 60px 0 20px; }
.site-footer h4 { color: var(--c-white); }
.site-footer a { color: #b7bcc6; }
.site-footer a:hover { color: var(--c-accent); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
}
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .9rem;
  text-align: center;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  /* Меню прячется через visibility, а не только сдвигом:
     translateY в процентах считается от высоты меню, и при коротком
     меню его нижний край оставался над шапкой белой полосой. */
  /* Меню позиционируется ОТНОСИТЕЛЬНО ШАПКИ, а не от вычисленного JS-отступа.
     Шапка sticky, поэтому меню оказывается под ней в любой ситуации:
     при прокрутке, когда верхняя полоса уже уехала, когда полоса выключена,
     и когда её содержимое переносится на две строки. Никаких замеров — значит
     настройки шапки и полосы можно менять без пересчёта. */
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-white);
    box-shadow: var(--shadow);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform var(--s-menu-speed, .3s) cubic-bezier(.22, .61, .36, 1),
      opacity var(--s-menu-speed, .3s) ease,
      visibility 0s linear var(--s-menu-speed, .3s);
    padding: 20px;
    z-index: 99;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      transform var(--s-menu-speed, .3s) cubic-bezier(.22, .61, .36, 1),
      opacity var(--s-menu-speed, .3s) ease,
      visibility 0s linear 0s;
  }
  .main-nav ul { flex-direction: column; gap: 14px; }
  .hero { padding: min(var(--s-hero-h, 120px), 80px) 0; }
  .section { padding: max(calc(var(--s-section-pad, 70px) * .7), 24px) 0; }
}

@media (max-width: 600px) {
  .site-topbar .container { justify-content: center; text-align: center; }
  .lead-form { padding: 22px; }
}

/* Анимации наведения управляются из «Стиль сайта → Эффекты».
   Глобальное отключение переходов здесь больше не задаётся:
   раньше правило с !important на * убивало плавность у всех,
   из-за чего карточки «подскакивали» вместо плавного подъёма. */