/* Start custom CSS */.es-main { width: auto; max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 60px; padding-right: 60px; background: #ffffff; }
@media (max-width: 1024px) { .es-main { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 600px) { .es-main { padding-left: 20px; padding-right: 20px; } }
.es-section { padding: 60px 0; border-bottom: 1px solid #e4e7eb; }
.es-section.es-section-last { border-bottom: none; }
.es-section-label { font-family: 'Josefin Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #7b8794; margin-bottom: 32px; }
.es-lead { display: grid; grid-template-columns: 130px 1fr; gap: 28px; align-items: start; }
@media (max-width: 639px) { .es-lead { grid-template-columns: 1fr; } }
.es-avatar { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; filter: grayscale(15%); }
.es-lead-text { font-family: 'Domine', Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1.7; color: #243444; margin: 0; }
.es-role { margin-bottom: 40px; }
.es-role:last-child { margin-bottom: 0; }
.es-role-header { display: grid; grid-template-columns: 150px 1fr; gap: 24px; margin-bottom: 14px; }
@media (max-width: 639px) { .es-role-header { grid-template-columns: 1fr; gap: 2px; } }
.es-role-period { font-family: 'Domine', Georgia, serif; font-size: 14px; color: #7b8794; padding-top: 4px; }
.es-role-title { font-family: 'Josefin Sans', sans-serif; font-size: 20px; font-weight: 600; color: #243444; line-height: 1.35; }
.es-role-company { font-family: 'Domine', Georgia, serif; font-size: 15px; color: #7b8794; margin-top: 2px; }
.es-role-desc { font-family: 'Domine', Georgia, serif; font-size: 16px; line-height: 1.88; color: #4a5561; margin-top: 10px; padding-left: calc(150px + 24px); }
@media (max-width: 639px) { .es-role-desc { padding-left: 0; } }
.es-role-separator { width: 100%; height: 1px; background: #e4e7eb; margin-top: 40px; }
.es-details { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
@media (max-width: 499px) { .es-details { grid-template-columns: 1fr; } }
.es-detail-heading { font-family: 'Josefin Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #7b8794; margin-bottom: 10px; }
.es-detail-item { font-family: 'Domine', Georgia, serif; font-size: 16px; color: #243444; line-height: 1.55; margin-bottom: 6px; }
.es-contact-row { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.es-contact-item { font-family: 'Domine', Georgia, serif; font-size: 16px; color: #243444 !important; -webkit-text-fill-color: #243444; text-decoration: none; transition: color 0.2s; }
.es-contact-item:hover { color: #2c3e50 !important; -webkit-text-fill-color: #2c3e50; }
.es-footer { text-align: center; padding: 48px 0; font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 600; color: #7b8794; letter-spacing: 0.1em; text-transform: uppercase; }

/* =========================================================
   Фон страницы за пределами секций — тёмно-синий #243444
   (тот же цвет, что у секций темы), вместо чёрного.
   Чёрный задан глобально в Elementor-ките (#000000) на body;
   здесь его переопределяем. Белые секции, картинки и контент
   остаются поверх — меняется только «подложка» в промежутках.
   Вставлять в Elementor → Site Settings → Custom CSS.
   ========================================================= */
 
body {
    background-color: #243444 !important;
}
 


/* =========================================================
   ЕДИНЫЙ ФАЙЛ ПОВЕДЕНИЯ ШАПКИ/МЕНЮ — заменяет прошлые
   home-sticky-menu.css и menu-header-consistent.css
   (их из Custom CSS удалите, оставьте только этот).

   Логика:
   • Страницы С ОБЛОЖКОЙ (главная, блог, записи): шапка прозрачная
     сверху, тёмно-синяя при скролле (липкое меню не теряется).
   • Страницы БЕЗ ОБЛОЖКИ (О себе и любые Elementor-страницы без
     cover): тема не включает «липкость», поэтому делаем шапку
     тёмно-синей ВСЕГДА, а контент сдвигаем вниз под неё.

   Тема при скролле вешает класс `typology-header-sticky` на сам
   элемент шапки; наличие обложки определяем через :has(#typology-cover).
   Вставлять в Elementor → Site Settings → Custom CSS.
   ========================================================= */

/* 1. Страницы БЕЗ обложки — сплошная тёмно-синяя шапка всегда */
body:not(:has(#typology-cover)) .typology-header {
    background-color: #243444 !important;
}

/* 2. ...и сдвиг контента вниз, чтобы сплошная фикс-шапка не перекрывала */
body:not(:has(#typology-cover)) {
    padding-top: 100px;
}

/* 3. Главная (с обложкой): при скролле всплывающее меню — тёмно-синее.
      Перебивает правило `body.home .typology-header{transparent !important}`,
      которое иначе держит шапку прозрачной даже при скролле. */
body.home .typology-header.typology-header-sticky {
    background-color: #243444 !important;
}

/* На телефоне можно подобрать свой отступ, если шапка ниже:
@media (max-width: 767px) {
    body:not(:has(#typology-cover)) { padding-top: 80px; }
}
*/

/* =========================================================
   «О себе»: поднять белый блок и текст вверх, ближе к меню.
 
   Причина пустоты НАД белой зоной: в HTML-блоке страницы перед
   белым блоком (.es-main) идут технические абзацы — три «пустых»
   <p> (внутри <br>, поэтому :empty их не берёт) и один <p> с
   CSS-кодом. Они занимают ~170px над белой зоной.
   Скрываем именно прямые дочерние <p> этого блока — содержательный
   текст внутри .es-main не затрагивается.
   Вставлять в Elementor → Site Settings → Custom CSS.
   (Прежний about-page-spacing.css с `p:empty` замените на этот.)
   ========================================================= */
 
.elementor-2513 .elementor-element-3d3c01ed > p {
    display: none !important;
}
 /* =========================================================
   «О себе»: ширина белой зоны = ширине записей блога (гомогенность).
   В блоге белая «карточка» 1170px по центру, текст 800px внутри.
   На «О себе» белая зона .es-main была всего 800px — расширяем до
   1170px по центру, текст внутри оставляем 800px (как в блоге).
   Проверено: белый блок left 130 / right 1300 / 1170px, текст 800px
   по центру — точь-в-точь как записи блога.
   Вставлять в Elementor → Site Settings → Custom CSS.
   ========================================================= */

/* Расширяем контейнер страницы до ширины блога */
.elementor-2513 .elementor-element-3d3c01ed,
.elementor-2513 .e-con-inner {
    max-width: 1170px !important;
}

/* Белая зона — 1170px по центру; внутренние отступы дают текст 800px */
.elementor-2513 .es-main {
    width: auto !important;
    max-width: 1170px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 185px !important;   /* (1170 - 800) / 2 = текст 800 по центру */
    padding-right: 185px !important;
}

/* Адаптив: на узких экранах уменьшаем боковые отступы, чтобы текст не сжимался */
@media (max-width: 1024px) {
    .elementor-2513 .es-main {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
}
@media (max-width: 600px) {
    .elementor-2513 .es-main {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* =========================================================
   «О себе»: белая зона 1170px (как блог) + «разрядка» контента
   внутри, чтобы тексты стали шире, боковые метки (период/компания)
   ушли влево, а описание должности получило больше ширины.

   Заменяет файл about-width-match.css (этот делает и то, и другое).
   Проверено: белый блок 1170 по центру; описание расширяется с
   566px до ~876px; метки периода — у левого края.
   Вставлять в Elementor → Site Settings → Custom CSS.
   ========================================================= */

/* 1. Белая зона = ширине записей блога (1170px, по центру) */
.elementor-2513 .elementor-element-3d3c01ed,
.elementor-2513 .e-con-inner {
    max-width: 1170px !important;
}
.elementor-2513 .es-main {
    width: auto !important;
    max-width: 1170px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 60px !important;    /* меньше отступ → контент шире */
    padding-right: 60px !important;
}

/* 2. Снимаем жёсткие фикс-ширины внутренних блоков (были 740/800),
      чтобы они заполняли всю ширину белой зоны */
.elementor-2513 .es-section,
.elementor-2513 .es-lead,
.elementor-2513 .es-role,
.elementor-2513 .es-role-header,
.elementor-2513 .es-role-desc {
    width: auto !important;
    max-width: none !important;
}

/* 3. Колонки растягиваются: период/аватар фиксированы, текст — на всё остальное */
.elementor-2513 .es-role-header {
    grid-template-columns: 150px 1fr !important;
}
.elementor-2513 .es-lead {
    grid-template-columns: 130px 1fr !important;
}

/* Адаптив: на узких экранах уменьшаем отступы и складываем колонки */
@media (max-width: 1024px) {
    .elementor-2513 .es-main {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}
@media (max-width: 600px) {
    .elementor-2513 .es-main {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .elementor-2513 .es-role-header,
    .elementor-2513 .es-lead {
        grid-template-columns: 1fr !important;   /* период/аватар над текстом */
    }
    .elementor-2513 .es-role-desc {
        padding-left: 0 !important;               /* описание на всю ширину */
    }
}

/* =========================================================
   «О себе»: ссылки email и LinkedIn были белыми (тот же белый
   Accent Elementor) и терялись на белом фоне. Красим их в тот же
   тёмный цвет, что и основной текст (#243444), + ховер.
   Вставлять в Elementor → Site Settings → Custom CSS.
   ========================================================= */

.elementor-2513 a.es-contact-item {
    color: #243444 !important;
    -webkit-text-fill-color: #243444 !important;
}

.elementor-2513 a.es-contact-item:hover {
    color: #2c3e50 !important;
    -webkit-text-fill-color: #2c3e50 !important;
}/* End custom CSS */