/* ========================================
   VSA Base — конструктор (все страницы)
   Шрифты, переменные, header, footer, мобильное меню, утилиты
   ======================================== */

/* --- Font-Face declarations --- */
@font-face { font-family:"RobotoRegular"; src:url("/wp-content/themes/blank_theme_2.0/fonts/RobotoRegular/RobotoRegular.eot"); src:url("/wp-content/themes/blank_theme_2.0/fonts/RobotoRegular/RobotoRegular.eot?#iefix")format("embedded-opentype"),url("/wp-content/themes/blank_theme_2.0/fonts/RobotoRegular/RobotoRegular.woff") format("woff"),url("/wp-content/themes/blank_theme_2.0/fonts/RobotoRegular/RobotoRegular.ttf") format("truetype"); font-style:normal; font-weight:normal; font-display:swap }
@font-face { font-family:"RobotoLight"; src:url("/wp-content/themes/blank_theme_2.0/fonts/RobotoLight/RobotoLight.eot"); src:url("/wp-content/themes/blank_theme_2.0/fonts/RobotoLight/RobotoLight.eot?#iefix")format("embedded-opentype"),url("/wp-content/themes/blank_theme_2.0/fonts/RobotoLight/RobotoLight.woff") format("woff"),url("/wp-content/themes/blank_theme_2.0/fonts/RobotoLight/RobotoLight.ttf") format("truetype"); font-style:normal; font-weight:normal; font-display:swap }
@font-face { font-family:"RobotoMedium"; src:url("/wp-content/themes/blank_theme_2.0/fonts/RobotoMedium/RobotoMedium.eot"); src:url("/wp-content/themes/blank_theme_2.0/fonts/RobotoMedium/RobotoMedium.eot?#iefix")format("embedded-opentype"),url("/wp-content/themes/blank_theme_2.0/fonts/RobotoMedium/RobotoMedium.woff") format("woff"),url("/wp-content/themes/blank_theme_2.0/fonts/RobotoMedium/RobotoMedium.ttf") format("truetype"); font-style:normal; font-weight:normal; font-display:swap }
@font-face { font-family:"RobotoBold"; src:url("/wp-content/themes/blank_theme_2.0/fonts/RobotoBold/RobotoBold.eot"); src:url("/wp-content/themes/blank_theme_2.0/fonts/RobotoBold/RobotoBold.eot?#iefix")format("embedded-opentype"),url("/wp-content/themes/blank_theme_2.0/fonts/RobotoBold/RobotoBold.woff") format("woff"),url("/wp-content/themes/blank_theme_2.0/fonts/RobotoBold/RobotoBold.ttf") format("truetype"); font-style:normal; font-weight:normal; font-display:swap }
@font-face { font-family:'Panton'; src:url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Regular.eot'); src:url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Regular.eot?#iefix') format('embedded-opentype'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Regular.woff2') format('woff2'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Regular.woff') format('woff'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Regular.ttf') format('truetype'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Regular.svg#Panton-Regular') format('svg'); font-weight:normal; font-style:normal; font-display:swap }
@font-face { font-family:'Panton'; src:url('/wp-content/themes/blank_theme_2.0/fonts/Panton-SemiBold.eot'); src:url('/wp-content/themes/blank_theme_2.0/fonts/Panton-SemiBold.eot?#iefix') format('embedded-opentype'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-SemiBold.woff2') format('woff2'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-SemiBold.woff') format('woff'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-SemiBold.ttf') format('truetype'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-SemiBold.svg#Panton-SemiBold') format('svg'); font-weight:600; font-style:normal; font-display:swap }
@font-face { font-family:'Panton'; src:url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Bold.eot'); src:url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Bold.eot?#iefix') format('embedded-opentype'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Bold.woff2') format('woff2'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Bold.woff') format('woff'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Bold.ttf') format('truetype'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Bold.svg#Panton-Bold') format('svg'); font-weight:bold; font-style:normal; font-display:swap }
@font-face { font-family:'Panton'; src:url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Heavy.eot'); src:url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Heavy.eot?#iefix') format('embedded-opentype'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Heavy.woff2') format('woff2'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Heavy.woff') format('woff'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Heavy.ttf') format('truetype'),url('/wp-content/themes/blank_theme_2.0/fonts/Panton-Heavy.svg#Panton-Heavy') format('svg'); font-weight:900; font-style:normal; font-display:swap }
/* --- Aliases: код использует "Roboto" (generic) без суффикса --- */
@font-face { font-family:"Roboto"; src:url("/wp-content/themes/blank_theme_2.0/fonts/RobotoRegular/RobotoRegular.woff") format("woff"),url("/wp-content/themes/blank_theme_2.0/fonts/RobotoRegular/RobotoRegular.ttf") format("truetype"); font-style:normal; font-weight:normal; font-display:swap }
@font-face { font-family:"Roboto Regular"; src:url("/wp-content/themes/blank_theme_2.0/fonts/RobotoRegular/RobotoRegular.woff") format("woff"),url("/wp-content/themes/blank_theme_2.0/fonts/RobotoRegular/RobotoRegular.ttf") format("truetype"); font-style:normal; font-weight:normal; font-display:swap }

/* --- CSS Variables --- */
:root {
  --vsa-color-active: #3dbeca;
  --vsa-color-hover: #ff184c;
  --vsa-color-text: gray;
  --header-h: 96px;
}
.vp-color-brand { color: var(--vsa-color-active); }

/* --- Reset / Base --- */
* {
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

body#portfolio_vsa,
body {
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  overflow-x: hidden;
  line-height: 1.5;
}

a, a:visited { color: var(--vsa-color-active); text-decoration: none; outline: none !important; }
a:hover { color: var(--vsa-color-hover); }

img { max-width: 100%; height: auto; }
::selection { background: var(--vsa-color-active); color: #fff; }

/* --- Spacers (shared) --- */
.spacer-100 { height: 100px; }
.spacer-80 { height: 80px; }
.spacer-40 { height: 40px; }
.spacer-20 { height: 20px; }

/* --- Container --- */
.vsa_row { width: 100%; max-width: 1820px; min-width: 340px; margin: 0 auto; padding: 0 25px; }

/* --- Header / Nav --- */
#vsaHeader { width: 100%; height: var(--header-h); position: absolute; left: 0; z-index: 4; top: -100px; opacity: 0; transition: top 5s ease, opacity 5s ease; }
#vsaHeader.animate { opacity: 1; top: 0; }

.vsa_header_site { display: flex; flex-wrap: wrap; align-items: center; }
.vsa_header_site > div:nth-child(1) { width: 100px; padding: 39px 10px 10px 0; }
.vsa_header_site > div:nth-child(2) { width: calc(100% - 100px); padding: 29px 0 10px 10px; display: flex; justify-content: flex-end; align-items: center; }

.vsa_logo { display: inline-block; padding-bottom: 10px; }
.vsa_logo img { display: block; width: auto; height: 30px; }
.vsa_logo.scroll { display: none; }

/* --- Primary Menu --- */
#primary-menu, ul.vsa_footer_nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
#primary-menu > li { font-size: 18px; text-transform: uppercase; font-weight: 400; padding: 10px 50px 10px 0; }
#primary-menu a { color: var(--vsa-color-text); font-weight: 400; text-align: left; line-height: 30px; transition: color 0.5s; }
#primary-menu a:hover { color: var(--vsa-color-hover); font-weight: bold; }
#primary-menu .current_page_item a { color: var(--vsa-color-active); font-weight: bold; }
#primary-menu a:focus { outline: none; }

/* --- Languages (.languages — main page EN|RU) --- */
.languages { display: flex; align-items: center; justify-content: flex-start; }
.languages > li { font-size: 18px; text-transform: uppercase; padding: 10px 0; position: relative; display: flex; align-items: center; justify-content: center; }
.languages > li:first-child { margin-right: 5px; }
.languages li a { color: var(--vsa-color-text); line-height: 30px; transition: color 0.5s; }
.languages a:hover { color: var(--vsa-color-hover); }
.languages > li.current-lang a { color: var(--vsa-color-active); font-weight: bold; }
.languages a:focus { outline: none; }
.languages > li:before { content: "/"; display: block; font-size: 16px; line-height: 30px; color: black; margin: 0 2px; }
.languages > li:first-child:before { display: none; }
.languages > li:nth-child(2):before { display: none; }

/* --- VSA Lang Nav (.vsa_lang_nav — inner pages EN|RU) --- */
.vsa_lang_nav { display: flex; align-items: center; margin: 0 -6px; }
.vsa_lang_nav li { padding: 0 8px 2px 4px; position: relative; list-style: none; }
.vsa_lang_nav li:after { display: block; content: "/"; font-family: Roboto; font-weight: 300; font-size: 18px; line-height: 29px; letter-spacing: -0.04em; text-transform: uppercase; position: absolute; top: 0; right: -3px; }
.vsa_lang_nav li:last-child:after { display: none; }
.vsa_lang_nav li a { font-family: Roboto; font-weight: 300; font-size: 20px; line-height: 29px; letter-spacing: -0.04em; text-transform: uppercase; text-decoration: none; }
.vsa_lang_nav li.current-lang a { font-weight: 800; }

/* --- Mobile / Responsive nav --- */
.respNavBox { display: none; }
#respNav { display: flex; align-items: center; }
.resp_inline { display: none; }
.closeNav { display: none; position: absolute; top: 20px; right: 20px; cursor: pointer; z-index: 10; font-size: 24px; background: none; border: none; }
.resp_btn { display: inline-block; cursor: pointer; }
.resNavList { list-style: none; padding: 0; }
.resp_vsa_lang_nav { display: flex; justify-content: center; }
.resp_vsa_lang_nav .lang-item { padding: 0 10px; }
.lang-item { list-style: none; }
.lang-item a { color: var(--vsa-color-text); text-transform: uppercase; font-size: 14px; }
.lang-item-first { margin-right: 5px; }
.site-branding { flex-grow: 1; }
.custom-logo { max-height: 57px; width: 100px; }
.site { position: relative; }

/* --- Content wrappers --- */
.site-content { position: relative; }
.content-area { position: relative; }
.content-page { position: relative; }
.content-box { position: relative; }
.site-main { position: relative; }
#portfolio_vsa #content { margin-bottom: 10em; }

/* --- FOOTER --- */
.footer_section { padding: 27px 0 0 0; }
.vsa_footer_top_row { display: flex; padding: 17px 0; }
.vsa_footer_top_row > div:nth-child(1) { width: 150px; padding: 4px 0 0 0; }
.vsa_footer_top_row > div:nth-child(2) { width: calc(100% - 150px); padding: 0 10px; }
.vsa_footer_logo { display: inline-block; vertical-align: top; width: 60px; }
.vsa_footer_logo img { display: block; width: auto; height: auto; max-width: 100%; }
.vsa_footer_nav { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0 -22px; }
.vsa_footer_nav li { padding: 0 22px; list-style: none; }
.vsa_footer_nav li a { font-family: 'Panton'; font-weight: 500; font-size: 20px; line-height: 24px; letter-spacing: -0.04em; text-transform: uppercase; color: #000; text-decoration: none; transition: color 0.3s ease; }
.vsa_footer_nav li a:hover { color: var(--vsa-color-active); }
.vsa_footer_img { margin: 5px 0; }
.vsa_footer_img img { display: block; width: auto; height: auto; max-width: 100%; }
.vsa_footer_two_cols { display: flex; flex-wrap: wrap; }
.vsa_footer_two_cols > div:nth-child(1) { width: calc(100% - 515px); padding: 10px 10px 10px 0; }
.vsa_footer_two_cols > div:nth-child(2) { width: 515px; padding: 10px 0 10px 10px; }
.vsa_text_box p { padding: 10px 0; font-family: "RobotoRegular"; font-weight: 400; font-size: 16px; line-height: 19px; letter-spacing: -0.04em; text-transform: uppercase; color: #000; }
.vsa_text_box p a { font-family: "RobotoRegular"; font-weight: 400; font-size: 16px; line-height: 19px; letter-spacing: -0.04em; text-transform: uppercase; color: #000; text-decoration: none; border-bottom: 1px solid transparent; transition: border 0.3s ease; }
.vsa_text_box p a:hover { border-bottom: 1px solid #000; }
.vsa_subscribe_desc p { padding: 10px 0; font-family: Roboto; font-weight: 400; font-size: 16px; line-height: 19px; text-align: justify; color: #000; }
.vsa_subscribe_form { display: flex; height: 50px; margin-top: 15px; border: 1px solid #000; }
.vsa_subscribe_form > div:nth-child(1) { width: calc(100% - 185px); }
.vsa_subscribe_form > div:nth-child(2) { width: 185px; }
.vsa_subscribe_form input { display: block; width: 100%; height: 48px; padding: 0 20px; border: none; background: transparent; font-family: Roboto; font-weight: 400; font-size: 16px; line-height: 47px; letter-spacing: -0.04em; color: #B0B0B0; }
.vsa_subscribe_form .vsa_black_pill { width: 100%; max-width: 100%; min-height: 49px; position: relative; right: -1px; }
.vsa_footer_img_resp { display: none; }
.vsa_footer_contacts_resp { display: none; }
.vsa_corp { padding: 35px 0 37px 0; }
.vsa_corp p { font-family: Roboto; font-weight: 500; font-size: 20px; line-height: 24px; letter-spacing: -0.04em; text-transform: uppercase; color: #000; }

/* --- Black pill button (general) --- */
.vsa_black_pill, a.vsa_black_pill {
  display: flex; justify-content: center; align-items: center;
  padding: 10px 34px; max-width: 406px; min-height: 52px;
  background: #000; color: #fff; border: none;
  font-family: Roboto; font-weight: 500; font-size: 20px;
  line-height: 23px; letter-spacing: -1px; text-transform: uppercase;
  cursor: pointer; transition: background 0.3s ease;
}
.vsa_black_pill:hover, a.vsa_black_pill:hover { background: #a4a1a1; }

/* --- Form messages --- */
.success-message, .error-message { display: none; margin-top: 10px; font-size: 16px; }
.successMessage, .errorMessage, .successMessageContact, .errorMessageContact { display: none; }


/* --- Popup (from combined.css) --- */
.popup { display:none; position:fixed; z-index:1; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.5); }
#popup .popup-content { background-color:#fefefe; margin:15% auto; padding:40px 30px; border:1px solid #888; width:80%; max-width:650px; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2); animation:fadeIn 0.4s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.close { color:#aaa; float:right; font-size:28px; font-weight:bold; cursor:pointer; }
.close:hover,.close:focus { color:black; text-decoration:none; cursor:pointer; }
#popup form { display:flex; flex-direction:column; }
#popup input, #popup textarea { margin-top:5px; margin-bottom:20px; padding:5px 0px !important; font-size:16px; border:none !important; color:#000 !important; border-radius:0 !important; border-bottom:1px solid black !important; width:100%; box-sizing:border-box; }
#popup input::placeholder, #popup textarea::placeholder { color:#000; }
#popup button[type="submit"] { margin-top:20px; padding:15px 40px; font-size:16px; cursor:pointer; border:none !important; }
.popup-wrapper { display:flex; justify-content:space-between; align-items:center; }
.popup-wrapper span { font-size:10px; text-align:right; max-width:300px; }
.success-message,.error-message { display:none; margin-top:10px; font-size:16px; }

/* --- Headings --- */
h1 { font-size: 45px; line-height: 1em; margin: 0.67em 0; padding: 0 25px; text-transform: uppercase; }

/* --- Footer button --- */
.footer__btn { display: inline-block; color: #fff; text-decoration: none; font-size: 14px; border: 1px solid transparent; transition: all 0.3s; cursor: pointer; }
.footer__btn:hover { border-color: var(--vsa-color-active); color: var(--vsa-color-active); }

/* --- Parallax fixes --- */
.wp-block-cover.has-parallax,
.wp-block-cover-image.has-parallax,
.wp-block-cover__image-background.has-parallax { overflow: visible !important; }
.wp-block-cover__image-background.has-parallax { background-attachment: fixed !important; }
.parallax-css { background-repeat: no-repeat; background-attachment: scroll !important; }

/* --- Project post: hero cover full-viewport (like article-template .article-hero) ---
   Выбираем именно ПЕРВЫЙ cover записи (хиро-картинка), заданный контентом поста.
   Инлайн min-height в блоке перебивал CSS — поэтому !important и прицельный селектор,
   чтобы не задеть прочие cover-блоки внутри текста. */
body.single-post .entry-content > .wp-block-cover:first-child {
  min-height: 100vh !important;
  min-height: 100svh !important;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .vsa_footer_nav { margin: 0 -10px; }
  .vsa_footer_nav li { padding: 5px 10px; }
  .vsa_footer_nav li a { font-size: 16px; line-height: 21px; }
}
@media (max-width: 768px) {
  .vsa_row { padding: 0 15px; }
  h1 { padding: 0 15px; }
  .vsa_header_site > div:nth-child(1) { width: 70px; padding: 25px 10px 10px 0; }
  .vsa_header_site > div:nth-child(2) { width: calc(100% - 70px); padding: 20px 0 10px 10px; }
}

/* --- .thin-block (base layout container) --- */
.thin-block {
    max-width:1820px;
    padding:0 5%;
    margin-left:auto;
    margin-right:auto
}

@media only screen and (max-width:740px) {
    .thin-block {
        width:100%;
        padding-left:5%;
        padding-right:5%
    }
}

/* --- ntv-poster thumb: prevent VP lazyload from blowing up images --- */
a.ntv-poster .ntv-poster__img img {
    position: static !important;
    max-width: 100% !important;
    height: auto !important;
}

/* --- About page (page-id-3749 RU, page-id-4198 EN) — hero fullscreen, no page-header --- */
.page-id-3749 .page-header,
.page-id-4198 .page-header {
    display: none;
}

/* Regular pages: the header is absolutely positioned (for the hero overlay) only on
   the homepage and the hero 'About' pages. On all other pages it must sit in the flow
   so content/.page-header never slides under it. */
body.page:not(.home):not(.page-id-3749):not(.page-id-4198) #vsaHeader,
body:not(.home):not(.page-id-3749):not(.page-id-4198) #vsaHeader {
    position: relative;
    top: 0;
    left: 0;
}
body:not(.home):not(.page-id-3749):not(.page-id-4198) .page-header {
    margin-top: 0;
}

.page-id-3749 .site-main .wp-block-spacer:first-of-type,
.page-id-4198 .site-main .wp-block-spacer:first-of-type {
    display: none;
}

.page-id-3749 .site-main .content-box,
.page-id-4198 .site-main .content-box {
    position: static !important;
    overflow: hidden;
}

/* The fullscreen hero cover is the FIRST .fullscreen-background cover directly under
   .content-box (RU: index 1, EN: index 0). Pull it up under the absolute header. */
.page-id-3749 .site-main > .content-box > .wp-block-cover.fullscreen-background,
.page-id-4198 .site-main > .content-box > .wp-block-cover.fullscreen-background {
    min-height: calc(100vh + var(--header-h)) !important;
    height: calc(100vh + var(--header-h)) !important;
    max-height: none !important;
    margin-top: calc(-1 * var(--header-h)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.page-id-3749 .site-main > .content-box > .wp-block-cover.fullscreen-background .wp-block-cover__video-background,
.page-id-4198 .site-main > .content-box > .wp-block-cover.fullscreen-background .wp-block-cover__video-background {
    z-index: -1 !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.page-id-3749 .site-main > .content-box > .wp-block-cover.fullscreen-background .wp-block-cover__background,
.page-id-4198 .site-main > .content-box > .wp-block-cover.fullscreen-background .wp-block-cover__background {
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
}

.page-id-3749 .site-main > .content-box > .wp-block-cover.fullscreen-background .wp-block-cover__inner-container,
.page-id-4198 .site-main > .content-box > .wp-block-cover.fullscreen-background .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 1 !important;
}

/* ===== Migrated from header.php <style> blocks ===== */

/* Mobile menu button */
.header__menu-btn{
    display: none;
    cursor: pointer;
}
.header__menu-btn img{
    width: 30px;
    margin-bottom: 30px;						
}

/* Mobile menu bar (slide-in) */
.header__menuBar{
    height: 100vh;
    width: 70vw;
    height: 100%;
    display: none;
    padding: 50px 30px 40px 30px;
    position: fixed;
    z-index: 999;
    background: #FFFFFF;
    left: -70vw;
    top: 0;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.15);
    transition: .3s ease-in;
}
.header__menuBar.active{
    left: 0;
}
.header__menuBar .menu *{
    list-style: none !important;
    text-decoration: none !important;
    color: #535253 !important;
}
.header__menuBar .menu li{
    display: block !important;
    margin-top: 20px !important;
}
.header__menuBar .languages{
    width: max-content;
    display: flex !important;
    padding-left: 0 !important;
    position: fixed;
    bottom: 10vh;
}
.header__menuBar .menu ul{
    margin: 60px 0px 120px 0px !important;
    padding-left: 0 !important;
}
.header__menuBar-btn{
    width: 30px;
    cursor: pointer;
}

@media (max-width: 770px){
    .header__menu-btn{
        display: block;
    }
    .resp_btn {
        margin-top:-10px !important;
    }
    .resp_inline, .vsa_header_site {
        align-items: flex-start !important;
    }
    .header__menuBar{
        display: block;
    }
    body.rtl .header__menuBar .languages {
        display: flex !important;
    }
}

/* RTL support */
body.rtl .mobHead{
    float: none;
}
body.rtl .logoHead{
    float: left;
}
body.rtl .phoneLtr, .contact-info{
    direction: ltr !important;
}
body.rtl .navigation{
    width: 460px;
    right: 0 !important;
    padding: 0 !important;
}
body.rtl .menu > li{
    width: 120px !important;
}
body.rtl .menu > li:nth-last-child(1){
    width: max-content !important;
}
body.rtl .main-navigation, .navigation{ 
    right: 0 !important;
}
body.rtl .fw-container > .fw-container{
    padding: 0 !important;
}
body.rtl .menu-top-he-container{
    float: right !important;
    margin-left: 30px;
}
body.rtl .languages li > img{
    margin-left: 15px;
}
body.rtl .languages{
    display: flex !important;
    justify-content: flex-end !important;
}

@media (max-width: 600px){
    body.rtl .languages{
        display: none !important;
    }
    body.rtl .logoHead{
        float: right;
        margin-bottom: 30px !important;
    }
}

/* Lottie */
.lottie-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999999999999;
}
#lottie-animation g:nth-child(1),#lottie-animation g:nth-child(2) {
    display:block !important;
}
.lottie-controls {
    display:none !important;
}

/* =========================================================================
   2026-11-11 (Иван): хиро статей и проектов портфолио — на весь экран,
   меню/логотип/название лежат ПОВЕРХ хиро. Раньше меню было отдельным
   белым блоком, а под ним начинался хиро — сверху белая полоса.
   Скоупим: статьи (body.single-article) и проекты портфолио
   (single-post, у которого в контенте есть .page-header.content-header).
   ========================================================================= */
body.single-article #vsaHeader,
body.single-post.vsa-hero-page #vsaHeader {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    z-index: 60 !important;
}
body.single-article #vsaHeader #primary-menu a,
body.single-article #vsaHeader .vsa_lang_nav li a,
body.single-post.vsa-hero-page #vsaHeader #primary-menu a,
body.single-post.vsa-hero-page #vsaHeader .vsa_lang_nav li a,
body.single-article #vsaHeader #primary-menu a:hover,
body.single-post.vsa-hero-page #vsaHeader #primary-menu a:hover {
    color: #ffffff !important;
}
body.single-article #vsaHeader .vsa_lang_nav li:after,
body.single-post.vsa-hero-page #vsaHeader .vsa_lang_nav li:after {
    color: rgba(255, 255, 255, 0.7) !important;
}
body.single-article #vsaHeader .vsa_logo img,
body.single-post.vsa-hero-page #vsaHeader .vsa_logo img {
    filter: brightness(0) invert(1);
}
/* мягкая тень сверху — чтобы белое меню читалось на светлых фото */
body.single-article #vsaHeader::before,
body.single-post.vsa-hero-page #vsaHeader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: -1;
}
/* мобильный «прилипший» заголовок остаётся белым с тёмным текстом */
body.single-article #vsaHeader.scroll,
body.single-post.vsa-hero-page #vsaHeader.scroll {
    background: #fff !important;
    position: fixed !important;
    top: 0 !important;
}
body.single-article #vsaHeader.scroll::before,
body.single-post.vsa-hero-page #vsaHeader.scroll::before { display: none; }
body.single-article #vsaHeader.scroll #primary-menu a,
body.single-article #vsaHeader.scroll .vsa_lang_nav li a,
body.single-post.vsa-hero-page #vsaHeader.scroll #primary-menu a,
body.single-post.vsa-hero-page #vsaHeader.scroll .vsa_lang_nav li a {
    color: #000 !important;
}
body.single-article #vsaHeader.scroll .vsa_logo img,
body.single-post.vsa-hero-page #vsaHeader.scroll .vsa_logo img {
    filter: none;
}

/* --- Статья: хиро занимает весь экран от самого верха --- */
body.single-article #content,
body.single-article #primary,
body.single-article .site-main { padding-top: 0 !important; margin-top: 0 !important; }
body.single-article .article-hero {
    min-height: 100vh !important;
    margin-top: 0 !important;
}

/* --- Проект портфолио: заголовок проекта поверх картинки --- */
body.single-post.vsa-hero-page #content,
body.single-post.vsa-hero-page #primary,
body.single-post.vsa-hero-page .site-main,
body.single-post.vsa-hero-page .container-post,
body.single-post.vsa-hero-page .container-post > .fw-row,
body.single-post.vsa-hero-page .tile-first-box {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.single-post.vsa-hero-page .page-header.content-header {
    position: absolute;
    /* 2026-11-11: заголовок проекта — у нижнего края первого экрана.
       Раньше был top: calc(var(--header-h) + .5rem) — висел под меню и перекрывал
       фото; для параллакс-cover это выглядело «резаным» хиро.
       Абсолютный блок растягиваем на 100vh и прижимаем заголовок вниз:
       bottom здесь не годится — заголовок лежит в контейнере высотой 16k,
       и bottom считался бы от его низа. */
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: flex-end;
    margin: 0 !important;
    padding: 0 0 64px !important;
    background: transparent;
    z-index: 55;
    pointer-events: none;
}
body.single-post.vsa-hero-page .page-header.content-header .fw-container {
    width: 100%;
}
body.single-post.vsa-hero-page .page-header.content-header .post-name,
body.single-post.vsa-hero-page .page-header.content-header .post-name span {
    color: #ffffff !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
/* первая cover-картинка проекта — на весь экран от верха страницы */
body.single-post.vsa-hero-page .entry-content > .wp-block-cover:first-child {
    min-height: 100vh !important;
    height: 100vh !important;
    margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
   2026-11-11 (Иван): полноэкранный хиро проекта (template-parts/content-post.php
   добавляет .vsa-hero-fullscreen + inline background-image = featured image).
   Заголовок прижат к низу, поверх фото — градиент для читаемости.
   ------------------------------------------------------------------------- */
.page-header.content-header.vsa-hero-fullscreen {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
}
.page-header.content-header.vsa-hero-fullscreen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 100%);
    pointer-events: none;
}
.page-header.content-header.vsa-hero-fullscreen .fw-container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 64px;
}
.page-header.content-header.vsa-hero-fullscreen .post-name {
    color: #fff !important;
    margin: 0;
}
@media (max-width: 767px) {
    .page-header.content-header.vsa-hero-fullscreen { min-height: 100svh; height: 100svh; }
    .page-header.content-header.vsa-hero-fullscreen .fw-container { padding-bottom: 32px; }
    body.single-post.vsa-hero-page .page-header.content-header { padding-bottom: 32px !important; }
}