/* v19.7 — base layout with gap 20px */
:root{--green:#14532d;--bg:#fffdf5;--dark:#2b2b2b}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:#0f172a}
.container{max-width:1200px;margin:0 auto;padding:20px}

.site-header{position:sticky;top:0;background:#fffefb;border-bottom:1px solid #eef0ea;z-index:10}
.header-inner{display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:0 0 auto}
.brand img{max-height:72px;height:auto;width:auto;object-fit:contain}
.brand-text{font-weight:800;font-size:28px;color:var(--green);white-space:nowrap}
.nav{display:flex;gap:20px;margin-left:16px;flex:0 1 auto;justify-content:flex-start}
.nav a{font-weight:700;color:var(--green);text-decoration:none}
.nav a[aria-current="page"]{color:var(--dark)}
.nav a:hover{opacity:.85}
.lang-switcher{margin-left:auto;display:flex;gap:8px}
.lang-btn{padding:6px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;cursor:pointer}

.hero{padding:28px 0}
.hero-inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:38px;align-items:center}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr}}
.mega{font-size:40px;font-weight:800;color:#14532d;margin-bottom:8px}
h1{font-size:28px;line-height:1.25;margin:0 0 10px}
.lead{margin:0 0 18px;color:#374151}
.hero-cta{display:flex;gap:12px;margin-bottom:10px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;border:0;font-weight:600}
.btn-primary{background:#14532d;color:#fff}
.btn-outline{border:1px solid #cbd5e1;background:#fff;color:#111827}

/* Rectangle photo frame; same scale; shifted 3% right */
.hero-media{height:360px;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06)width:110%;margin-left:-7.5%;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:78% 50%;transform:scale(1.20);transform-origin:center center;display:block}

.about{padding:12px 0 24px}
.about-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:20px}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:#fff;border-radius:14px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.05);text-align:center}
.stat-num{font-size:28px;font-weight:800;color:#14532d}
.stat-label{font-size:14px;color:#14532d;font-weight:700}

.practices{padding:10px 0 28px}
.practices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.practices-grid{grid-template-columns:1fr}}
.practice-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.practice-card h3{margin:0 0 6px;font-size:16px}
.practice-card p,.practice-card ul{margin:0;color:#334155}
.practice-card ul{padding-left:18px}

.contacts-section{padding:20px 0 32px}
.contact-form{background:#f8fbf7;border:1px solid #e3efe6;border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.contact-form label{display:block;font-weight:600;margin:10px 0 6px}
.contact-form input,.contact-form textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px;font-size:14px}
.contact-form button{margin-top:12px}

.footer{padding:32px 0;color:#64748b}

.mega-secondary{font-size:40px;font-weight:800;color:var(--green);margin:4px 0 8px 0;line-height:1.1}

/* v19.9 — header spacing uniform & tighter */
.nav{gap:16px !important;margin-left:16px;justify-content:flex-start}
.nav a{margin:0 !important;white-space:nowrap}
.nav a:last-child{margin-right:0 !important}

/* v19.11 — align nav items to baseline so multi-line links line up cleanly */
.nav{align-items:flex-end}
.nav a{line-height:1.05}

/* v19.12 — top-align nav items; push nav near language pills */
.nav{align-items:flex-start !important; gap:16px !important; margin-left:auto !important; justify-content:flex-end !important;}
/* keep language pills where they are */
.lang-switcher{margin-left:16px !important;}

/* v19.13 – push nav tabs closer to language pills, keep top alignment */
.nav{margin-left:auto !important; justify-content:flex-end !important;}
.lang-switcher{margin-left:8px !important;}

/* v19.14 – lift About text up by ~one line */
.about .about-grid > div:first-child{ margin-top:-18px; }


/* v19.17 – force hero image shift 5% right */
.hero-media img {
  object-position: 78% 50% !important; /* guaranteed right shift */
}


/* v20 – light green background for practice cards */
.practice-card {
  background-color: #f8fbf7 !important;
}


/* v20_final – green link & hero prelead */
.link-green{color:#14532d;text-decoration:underline;font-weight:700}
.prelead{margin:8px 0 12px;color:#334155}


/* v20_final_clean — single spacing below the hero mega line */
.hero .mega{ margin-bottom:24px; }


/* v20_final_aligned — increase hero text spacing & align CTA bottom to photo */
.hero .mega{ margin-bottom:28px !important; }   /* more space under "15+..." */
.hero h1{ margin:0 0 20px 0 !important; }       /* more space under main line */
.hero .prelead{ margin-bottom:28px !important; }/* space before buttons */

/* Make text column equal height to photo and push CTA to bottom */
.hero-inner{ align-items:stretch; }
.hero-text{ display:flex; flex-direction:column; min-height:360px; }
.hero-cta{ margin-top:auto; }                   /* stick buttons to bottom */


/* v20_final_registered_gap — ensure space between hero text and photo */
.hero-text{ padding-right:28px; }            /* gap on desktop */
@media (max-width: 1024px){
  .hero-text{ padding-right:20px; }          /* smaller gap on tablets */
}


/* active lang pill */
.lang-btn.active{background:#14532d;color:#fff;border-color:#14532d}

/* === LIGHT HERO BG ON PHOTO === */
.hero--photo{position:relative;overflow:hidden;border-radius:18px;padding:28px;background-image:url("../assets/bg_hero.jpg");background-size:cover;background-position:center;}
.hero--photo::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,0.89);}
.hero--photo>*{position:relative;z-index:1;}
@media(max-width:900px){.hero--photo{padding:18px;border-radius:14px;}}

/* Full-page background photo */
body.page-photo-bg{ background: transparent !important; position: relative; }
body.page-photo-bg::before{
  z-index:0; pointer-events:none;
  background-attachment: scroll;
  transform: none;
  position: fixed; left:0; top:0; width:100vw; height:100vh;
  content:""; position: fixed;  z-index:0;
  background: url("../assets/bg_site.jpg") center 7% / cover no-repeat !important;
  filter: brightness(75%); opacity: .50 !important;

  
  transform-origin: center;
  background-position: 130% 240px !important;
  }
section.hero{ background-color: transparent !important; }
main, header, footer, section, .container{ position: relative; z-index: 1; background-color: transparent; }

/* About page background (only on about pages) */

.about-bg::before {
inset: 0;

  z-index:0; pointer-events:none;
  
  
  position: absolute; left:0; top: -60px; width:100vw; height: calc(100% + 60px);
  content:""; position: absolute;  z-index:0;
  background: url("../assets/about_bg_sait_2025.png") center 0% / cover no-repeat;
  filter: brightness(75%); opacity: .50 !important;

  
  transform-origin: center;
  background-position: center 0%;
  
}


/* === v19.7 • Services page scoping fix (safe, page-specific) === */
body.page-services .hero--photo{
  background-attachment: fixed !important;
  background-image: url("../assets/1_2_o_komp.jpg") !important;
}
body.page-services.page-photo-bg::before{
  background: none !important;
  opacity: 0 !important;
}
/* Optional: soften the pale overlay for Services only
body.page-services .hero--photo::before{ background: rgba(255,255,255,0.80); }
*/


/* === Brand Header — unified yellow bar === */
:root{
  --brand-green:#005A2D;
  --brand-yellow:#FFFFE1;
  --brand-gray:#414141;
}
.site-header{background-color:var(--brand-yellow)!important;box-shadow:0 1px 0 rgba(0,90,45,.15)}
.site-header .brand-text,.site-header .nav a,.lang-switcher .lang-btn{color:var(--brand-green)!important}
.site-header .nav a:hover,.lang-switcher .lang-btn.active{color:#00381F!important}
.site-header img{filter:none!important}


/* === Unified header sizing across all pages (based on About +6px bottom) === */
.site-header {
  padding-top: 12px !important;
  padding-bottom: 18px !important;
}
/* Ensure inner container does not introduce extra top/bottom gaps */
.site-header .header-inner {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html, body { margin-top: 0 !important; }


/* === Header: global unified size (baseline = Home shifted +6px) === */
.site-header {
  padding-top: 12px !important;
  padding-bottom: 24px !important; /* 18px baseline + 6px down */
  background-color: #FFFFE1 !important;
}
/* Prevent internal containers from re-introducing gaps */
.site-header .header-inner {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html, body { margin-top: 0 !important; }

/* === Minimal page fade-in only (no fade-out) === */
/* Layout, fonts, sizes unchanged */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: __pagefadein 220ms ease-out both;
  }
  @keyframes __pagefadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ================================================
>>> ФИНАЛЬНЫЙ FIX ДЛЯ MACBOOK AIR / SMALL SCREENS (МАКСИМАЛЬНОЕ СЖАТИЕ ШАПКИ)
------------------------------------------------
Этот блок использует самые агрессивные значения для гарантированного
решения проблемы обрезания языкового блока на узких экранах.
================================================
*/
@media (max-width: 1200px) {
  /* Уменьшаем отступы основного контейнера */
  .container {
    padding: 20px 10px; /* Уменьшаем до 10px по бокам */
  }

  /* 1. Максимально сжимаем внутренний контейнер шапки */
  .header-inner {
    gap: 6px; /* Минимальный зазор между элементами */
  }

  /* 2. Сжимаем логотип (текст) */
  .brand-text {
    font-size: 20px !important; /* Уменьшаем до 20px */
    line-height: 1.1;
  }
  .brand img {
    max-height: 55px; /* Слегка уменьшим логотип */
  }

  /* 3. Уменьшаем отступы и размеры навигационных ссылок */
  .nav {
    gap: 6px !important; /* Минимальное расстояние между ссылками */
    margin-left: 6px !important; 
  }
  .nav a {
    font-size: 13px; /* Уменьшаем шрифт навигации */
    padding: 2px 4px; /* Добавляем внутренний отступ, чтобы ссылки не слипались */
  }
  
  /* 4. Максимально сжимаем языковые кнопки */
  .lang-btn {
    padding: 3px 5px; /* Минимальный padding */
    font-size: 12px; /* Минимальный размер шрифта */
  }

  /* 5. Уменьшаем зазор между языковыми кнопками */
  .lang-switcher {
    gap: 3px; /* Минимальный зазор */
    margin-left: 3px !important; 
  }
}

/* Дополнительный медиазапрос для очень узких экранов (планшеты в портрете) */
@media (max-width: 900px) {
  /* Убираем отступы контейнера почти полностью */
  .container {
    padding: 15px 5px; 
  }
  
  /* Дополнительное сжатие бренда на очень узких экранах */
  .brand-text {
    font-size: 18px !important; 
  }
}