/* =====================================================================
   Vik-on child theme — global look (tokens, typography, Kadence header/footer overrides).
   ===================================================================== */
:root{
  --vk-ink:#151313;--vk-red:#d12c1f;--vk-red-h:#b8241a;--vk-bg:#f7f5f5;--vk-text2:#3b3838;--vk-muted:#676564;--vk-muted2:#8b8989;--vk-line:#d9d9d9;
  --vk-font:'Montserrat','Montserrat Fallback',Arial,sans-serif;
  --vk-circuit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%23DECFCF' stroke-opacity='.42' stroke-width='1.5'%3E%3Cpath d='M0 40h52l18 18h60M130 58l20-20h90M20 0v22l16 16M96 0v30l-14 14v38M82 82l-20 20H0M150 38V0M200 0v18l-18 18M0 150h34l22 22v68M56 172h48l16-16h42M162 156l22 22v62M120 240v-34l-16-16M240 110h-40l-20 20h-32M148 130l-14-14h-30M240 190h-26l-14 14v36M0 210h24M170 84h34l16-16h20'/%3E%3Cg fill='%23DECFCF' fill-opacity='.42' stroke='none'%3E%3Ccircle cx='130' cy='58' r='4'/%3E%3Ccircle cx='82' cy='82' r='4'/%3E%3Ccircle cx='162' cy='156' r='4'/%3E%3Ccircle cx='104' cy='116' r='4'/%3E%3Ccircle cx='24' cy='210' r='4'/%3E%3Ccircle cx='170' cy='84' r='4'/%3E%3Ccircle cx='36' cy='38' r='3'/%3E%3Ccircle cx='182' cy='36' r='3'/%3E%3Ccircle cx='104' cy='190' r='3'/%3E%3Ccircle cx='200' cy='204' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
/* Fallback face with Montserrat's metrics (measured: width ratio to Arial by weight, ascent .975 / descent .25) —
   text set in Arial before the web font arrives occupies the same lines, so no layout shift on swap. */
@font-face{font-family:'Montserrat Fallback';src:local('Arial'),local('ArialMT');font-weight:100 400;size-adjust:112.6%;ascent-override:86.6%;descent-override:22.2%;line-gap-override:0%}
@font-face{font-family:'Montserrat Fallback';src:local('Arial'),local('ArialMT');font-weight:500;size-adjust:114.3%;ascent-override:85.3%;descent-override:21.9%;line-gap-override:0%}
@font-face{font-family:'Montserrat Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600;size-adjust:108.2%;ascent-override:90.1%;descent-override:23.1%;line-gap-override:0%}
@font-face{font-family:'Montserrat Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700 900;size-adjust:109.9%;ascent-override:88.7%;descent-override:22.7%;line-gap-override:0%}
body,h1,h2,h3,h4,h5,h6,button,input,select,textarea,.button,.wp-block-button__link,.site-header,.site-footer{font-family:var(--vk-font)}
html{scroll-behavior:smooth;scroll-padding-top:0;-webkit-text-size-adjust:100%}
@media (min-width:1366px){html{scroll-padding-top:116px}}
body{font-family:var(--vk-font);background:var(--vk-bg);color:var(--vk-ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.vk-card-page .site{background:var(--vk-bg) var(--vk-circuit)} /* service and text pages: the same circuit texture as the home page (owner's request 06.10.2026; the Tilda original had a plain #f7f5f5 here) */
a{color:var(--vk-red)}
a:hover{color:var(--vk-red-h)}
:focus-visible{outline:3px solid var(--vk-red);outline-offset:3px}
img{height:auto}

/* Kadence content area: our blocks are full-bleed sections, no extra padding */
.content-area{margin:0}
.content-wrap .content-container{padding:0}
.site-main .entry-content-wrap,.site-main .entry-content{padding:0;margin:0}
.entry-content>*{max-width:none}
.entry-content > .vk-sec,.entry-content > .vk-hero,.entry-content > .vk-toc{margin:0}
.single-vikon_case .entry-content-wrap{padding:32px var(--vk-gut,24px)}
.content-bg{background:transparent}
/* Rows span the full window width (as on Tilda); only the inner container is limited to 1276 px of content. */
.site-header-wrap .site-header-inner-wrap,.site-header-row-container-inner,.site-footer-row-container-inner{max-width:none}
.site-header-row-container-inner>.site-container,.site-footer-row-container-inner>.site-container{max-width:calc(1276px + 80px);margin:0 auto;padding:0 40px}
.site-container{max-width:calc(1276px + 80px)}
/* page content: sections are full-bleed like Tilda records (backgrounds, maps, dark bands reach the window edges); each block limits its own content */
.content-container.site-container{max-width:none}

/* ---------- header (measured on vik-on.com: 1440 px — 40 px top bar + 76 px main bar = 116 px) ---------- */
#masthead{box-shadow:none;position:relative;z-index:1000} /* above page content, so dropdowns are never covered (Tilda header: z-index 970) */
/* Sticky header, as on the original: the whole header (top bar + main bar) is fixed from 1366 px
   (Tilda: position:fixed, @media max-width:1365px → relative). /almaty has its own header, fixed from 480 px. */
@media (min-width:1366px){#masthead{position:sticky;top:0;z-index:1000}.admin-bar #masthead{top:32px}}
@media (min-width:480px){body.vk-page-almaty #masthead{position:sticky;top:0;z-index:1000}body.vk-page-almaty.admin-bar #masthead{top:var(--wp-admin--admin-bar--height,32px)}}
/* Mobile header (up to 1199 px, owner's request 05.10.2026): the logo/phone/button row and the section menu stay at the top while
   scrolling; the hours/city/top-menu row scrolls away (sticky with a negative top = that row's height, kept exact by front.js). */
@media (max-width:1199px){#masthead{position:sticky;top:calc(-1 * var(--vk-hdr-hide,53px));z-index:1000}}
@media (max-width:479px){body.vk-page-almaty #masthead{top:calc(-1 * var(--vk-hdr-hide,28px))}}
.site-top-header-wrap{background:#f7f5f5 var(--vk-circuit)!important;background-size:160px!important;font-size:13px}
body.vk-page-almaty .site-top-header-wrap{background:#fff!important}
.site-top-header-wrap .site-header-row{min-height:40px}
.site-top-header-wrap .site-header-section{gap:0}
.site-main-header-wrap{background:#fff;box-shadow:0 8px 24px rgba(21,19,19,.08)}
.site-main-header-wrap .site-header-row{min-height:76px;padding:0 0 6px}
.site-header-item{display:flex;align-items:center}
.site-branding .custom-logo{width:184px;height:56px;max-height:none}
.site-branding{padding:0}
/* top links: 13/400, 20 px apart */
.site-top-header-wrap .header-navigation .header-menu-container>ul>li>a{padding:4px 20px 4px 0;font-size:13px;color:var(--vk-ink);font-weight:400;line-height:1.4}
.site-top-header-wrap .header-navigation .header-menu-container>ul>li>a:hover{color:var(--vk-red)}
/* primary nav: 17/500, ~34 px between items, first item 40 px after the logo */
.site-main-header-wrap .header-navigation .header-menu-container>ul>li>a{padding:6px 17px;font-size:17px;font-weight:500;color:var(--vk-ink);line-height:1.2}
/* Kadence already puts 10 px between logo and menu: +13 px → first item text 40 px after the logo (Tilda: 266 → 306) */
.site-main-header-wrap .site-header-item-main-navigation{margin-left:13px}
/* no room reserved for the (hidden) dropdown arrow: items keep Tilda's 34 px rhythm */
.header-navigation .header-menu-container>ul>li>a .nav-drop-title-wrap{padding-right:0}
.site-main-header-wrap .header-navigation .header-menu-container>ul>li>a:hover{color:var(--vk-red)}
/* dropdown (Tilda: 200 px card centered under the item, 25 px below it, 14/600 items).
   The ::before strip fills exactly that 25 px gap, so the pointer never leaves item+submenu on the way down. */
.header-navigation .header-menu-container ul li.menu-item-has-children{position:relative}
.header-navigation .header-menu-container ul ul.sub-menu{background:#fff;border-radius:12px;box-shadow:0 0 7px rgba(0,0,0,.2);padding:12px 20px;width:200px;min-width:0;border:0;margin:0;top:calc(100% + 25px);left:50%;right:auto;transform:translateX(-50%)}
.header-navigation .header-menu-container ul ul.sub-menu::before{content:"";position:absolute;left:0;right:0;top:-25px;height:25px}
.header-navigation .header-menu-container ul ul.sub-menu li{width:100%}
.header-navigation .header-menu-container ul ul.sub-menu li a{width:auto;padding:6px 0;font-size:14px;font-weight:600;line-height:1.35;color:#222;background:none}
.header-navigation .header-menu-container ul ul.sub-menu li a:hover,.header-navigation .header-menu-container ul ul.sub-menu li.current-menu-item>a{color:var(--vk-red);background:none}
.header-navigation .header-menu-container ul li.menu-item-has-children>a .dropdown-nav-toggle{display:none}
.header-navigation .header-menu-container ul li.vk-open>ul.sub-menu{display:block;opacity:1;visibility:visible;clip:auto;height:auto;overflow:visible}
/* phone + button */
.vk-phone{font-size:20px;font-weight:500;line-height:1.4;color:var(--vk-ink);text-decoration:none;white-space:nowrap;margin-right:16px}
.vk-phone:hover{color:var(--vk-red)}
.header-button-wrap .button{background:var(--vk-red);color:#fff;border-radius:12px;padding:13px 27px;font-size:17px;font-weight:500;line-height:1.2;border:0;min-height:46px;display:inline-flex;align-items:center;box-shadow:none}
.header-button-wrap .button:hover{background:var(--vk-red-h);color:#fff;box-shadow:none}
/* top bar right: socials · hours · city */
.vk-header-topbar{display:flex;align-items:center;font-size:14px}
.vk-header-topbar .vk-soc{margin-right:24px}
.vk-hours{border-bottom:1px solid var(--vk-red);font-size:14px;font-weight:500;line-height:20px;white-space:nowrap}
.vk-city{background:none;border:0;padding:0;margin-left:16px;font:500 15px/21px var(--vk-font);color:var(--vk-red);display:inline-flex;align-items:center;gap:1px;cursor:pointer;white-space:nowrap}
.vk-city .vk-ico{width:15px;height:15px}
.vk-soc{display:flex;gap:8px}
.vk-soc a{width:28px;height:28px;border-radius:7px;background:var(--vk-ink);display:grid;place-items:center;color:#fff;transition:background .2s}
.vk-soc a:hover{background:var(--vk-red);color:#fff}
.vk-soc .vk-ico{width:16px;height:16px}
.site-header-section-right .vk-header-topbar{justify-content:flex-end}
@media (min-width:1200px) and (max-width:1279px){.site-branding .custom-logo{width:138px;height:42px}.site-main-header-wrap .header-navigation .header-menu-container>ul>li>a{padding:6px 10px;font-size:15px}.vk-phone{font-size:16px}.header-button-wrap .button{padding:11px 16px;font-size:15px;min-height:42px}}

/* ---------- mobile header (≤1024): Tilda layout — grey bar [hours · city · socials / anchor links],
   white bar [logo · phone · button / main menu]; 339 px wide content, centered ---------- */
/* phone header = Tilda 320-grid record: the content keeps its 339 px width and is centred; on a 320 px screen it is cropped at both sides exactly like the original (Tilda does not shrink it) */
/* no overflow-x:clip on #masthead: Safari/iOS clips BOTH axes for it (WebKit bug, still in iOS 18) and cut off the dropdowns hanging below the header;
   the 339 px phone header is cropped at 320 px by .site{overflow:clip} and body{overflow-x:hidden} instead (06.10.2026) */
#mobile-header .site-header-row-container-inner>.site-container{box-sizing:border-box;width:363px;max-width:none;margin:0 0 0 calc(50% - 181.5px);padding:0 12px}
#mobile-header .site-header-row{min-height:0}
#mobile-header .site-top-header-wrap .site-header-row{padding:8px 0 2px}
#mobile-header .site-main-header-wrap{box-shadow:none}
#mobile-header .site-main-header-wrap .site-header-row{padding:15px 0 0;align-items:flex-start}
#mobile-header .site-main-header-wrap .site-header-section{align-items:flex-start}
#mobile-header .site-header-main-section-right>.site-header-item{margin:0}
#mobile-header .mobile-header-button-wrap{margin-top:1px}
#mobile-header .site-header-main-section-right>.vk-header-phone{margin-top:9px}
#mobile-header{position:relative;z-index:0}
#mobile-header::after{content:"";position:absolute;left:0;right:0;top:53px;bottom:0;z-index:-1;box-shadow:0 0 50px 0 rgb(207,207,207);pointer-events:none}
#mobile-header .site-bottom-header-wrap{background:#fff;box-shadow:none}
#mobile-header .site-bottom-header-wrap .site-header-row{padding:15px 0 8px}
#mobile-header .site-header-top-section-left,#mobile-header .site-header-bottom-section-left{flex:1 1 auto;min-width:0}
.vk-header-topbar--m{display:block;width:100%}
.vk-topbar-row{display:flex;align-items:center}
.vk-header-topbar--m .vk-hours{font-size:12px;line-height:17px}
.vk-header-topbar--m .vk-city{font-size:13px;line-height:18px;margin-left:10px}
.vk-header-topbar--m .vk-soc{margin:0 0 0 auto;gap:4px}
.vk-header-topbar--m .vk-soc a{width:17px;height:17px;border-radius:4px}
.vk-header-topbar--m .vk-soc .vk-ico{width:11px;height:11px}
#mobile-header .site-branding .custom-logo{width:105px;height:32px;max-width:none}
#mobile-header .site-header-top-section-right:empty,#mobile-header .site-header-bottom-section-right:empty,#mobile-header .site-header-top-section-center:empty,#mobile-header .site-header-bottom-section-center:empty{display:none}
#mobile-header .site-top-header-inner-wrap,#mobile-header .site-bottom-header-inner-wrap{grid-template-columns:100%}
#mobile-header .vk-phone{font-size:15px;line-height:21px;margin-right:8px}
#mobile-header .mobile-header-button-wrap .button{width:98px;justify-content:center;background:var(--vk-red);color:#fff;border-radius:12px;padding:10px 0;font-size:13px;font-weight:500;line-height:1.2;min-height:36px;border:0;box-shadow:none}
.vk-header-menus{display:block;width:100%}
.vk-inline-nav>ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:0 6px;justify-content:space-between}
.vk-inline-menu a{text-decoration:none;color:var(--vk-ink);display:block;white-space:nowrap}
.vk-inline-menu--top{margin-top:7px!important}
.vk-inline-menu--top a{font-size:10px;line-height:14px;font-weight:400;padding:2px 0}
.vk-inline-menu--main>li>a{font-size:12px;line-height:14.4px;font-weight:500;padding:3px 0}
.vk-inline-menu li.current-menu-item>a,.vk-inline-menu a:hover{color:var(--vk-red)}
/* inline menu dropdown: same card as desktop; opened by tap (touch) or hover (mouse), positioned by front.js */
.vk-inline-nav li{position:relative}
.vk-inline-nav ul ul{display:none;position:absolute;z-index:1001;top:calc(100% + 25px);left:0;width:200px;list-style:none;margin:0;padding:12px 20px;background:#fff;border-radius:12px;box-shadow:0 0 7px rgba(0,0,0,.2)}
.vk-inline-nav ul ul::before{content:"";position:absolute;left:0;right:0;top:-25px;height:25px}
.vk-inline-nav ul ul a{font-size:14px;font-weight:600;line-height:1.35;color:#222;padding:6px 0;white-space:normal}
.vk-inline-nav li.vk-open>ul{display:block}
.vk-inline-nav li.vk-open>a,.vk-inline-nav li.vk-open>a:hover{color:var(--vk-ink)} /* Tilda keeps the opened item black */
@media (hover:hover) and (pointer:fine){.vk-inline-nav li.menu-item-has-children:hover>ul{display:block}}

/* ---------- footer (vik-on.com: 1276 px container; left — copyright + requisites, right — service line,
   policy, cookie text, right-aligned; one 320 px column below 640 px) ---------- */
#colophon{background:var(--vk-ink);color:#fff;margin-top:0} /* Tilda: the footer record follows the last record directly */
.site-footer-wrap .site-footer-row{padding:0;min-height:0}
.vk-footer{display:flex;justify-content:space-between;gap:32px;padding:40px 0 80px}
.vk-footer p{margin:0}
.vk-footer__l{flex:0 1 586px;min-width:0;text-align:left}
#colophon .footer-html-inner,#colophon .site-footer-section{text-align:left}
.vk-footer__r{flex:0 1 520px;min-width:0;text-align:right}
.vk-footer__copy{font-size:18px;line-height:25px;color:#fff}
.vk-footer__req{font-size:14px;line-height:20px;color:rgba(255,255,255,.6);margin-top:20px!important}
.vk-footer__svc{font-size:18px;line-height:25px;color:#fff;max-width:392px;margin-left:auto!important;font-weight:400}
.vk-footer__pol{font-size:14px;line-height:20px;margin-top:4px!important}
.vk-footer__pol a{color:var(--vk-red);text-decoration:underline;text-underline-offset:2px;border:0}
.vk-footer__pol a:hover{color:#ff4b3e}
.vk-footer__cookie{font-size:14px;line-height:20px;color:rgba(255,255,255,.6);margin-top:6px!important}
/* 640–1199 px: Tilda's own tablet footer is broken (the right column is placed outside the screen);
   here both columns are stacked, left-aligned, with the desktop sizes and the original 586 / 520 px text widths */
@media (min-width:640px) and (max-width:1199px){
  .vk-footer{flex-direction:column;gap:24px}
  .vk-footer__l,.vk-footer__r{flex:none;text-align:left}
  .vk-footer__req{max-width:586px}
  .vk-footer__svc{margin-left:0!important}
  .vk-footer__pol,.vk-footer__cookie{max-width:520px}
}
@media (max-width:639px){
  .vk-footer{flex-direction:column;gap:0;max-width:320px;margin:0 auto;padding:32px 0 44px;text-align:left}
  .vk-footer__l,.vk-footer__r{display:contents;text-align:left}
  .vk-footer__svc{text-align:left}
  .vk-footer__svc{order:1;margin-left:0!important;max-width:314px}
  .vk-footer__req{order:2;font-size:13px;line-height:18px;margin-top:13px!important}
  .vk-footer__pol{order:3;margin-top:24px!important;text-align:left}
  .vk-footer__cookie{order:4;margin-top:12px!important;text-align:left}
  .vk-footer__copy{order:5;font-size:17px;line-height:24px;margin-top:40px!important}
  .site-footer-row-container-inner>.site-container{padding:0 16px}
}
.footer-html{width:100%;margin:0!important}
#colophon .footer-html .footer-html-inner{width:100%}

/* ---------- cases (CPT) default templates ---------- */
.single-vikon_case .entry-header,.single-vikon_case .entry-content{max-width:900px;margin-left:auto;margin-right:auto}
.vk-case-meta{background:#fff;border-radius:16px;padding:20px 24px;margin:0 0 24px;display:grid;gap:8px;font-size:15px}
.vk-case-meta b{font-weight:600}
.post-type-archive-vikon_case .content-area{padding:32px var(--vk-gut,24px)}

/* ---------- Kadence default page title (kept for non-card pages) ---------- */
.entry-hero .entry-header{padding:32px 0 8px}
.entry-title{font-family:var(--vk-font);font-weight:700;letter-spacing:-.01em}

.site-main-header-wrap .header-navigation .header-menu-container>ul>li.current-menu-ancestor>a,.site-main-header-wrap .header-navigation .header-menu-container>ul>li.current-menu-item>a,.site-main-header-wrap .header-navigation .header-menu-container>ul>li.current-menu-parent>a{color:var(--vk-ink)}
.site-main-header-wrap .header-navigation .header-menu-container>ul>li.current-menu-ancestor>a:hover{color:var(--vk-red)}
.vk-inline-menu li.current-menu-item>a{color:var(--vk-ink)}


/* ---------- /almaty phone header = vik-on.com/almaty rec886946503 (different from the home one) ---------- */
body.vk-page-almaty #mobile-header::after{top:2px}
body.vk-page-almaty #mobile-header .site-top-header-wrap .site-header-row{padding:10px 0 0}
body.vk-page-almaty #mobile-header .site-top-header-wrap .site-container{position:relative}
body.vk-page-almaty .vk-header-topbar--m .vk-city{margin-left:auto}
body.vk-page-almaty .vk-header-topbar--m .vk-soc{display:none}
body.vk-page-almaty .vk-header-topbar--m .vk-inline-menu--top{position:absolute;left:12px;right:12px;top:92px;margin:0!important}
body.vk-page-almaty #mobile-header .site-main-header-wrap .site-header-row{padding-top:14px}
body.vk-page-almaty #mobile-header .vk-phone{margin-right:5px}
body.vk-page-almaty #mobile-header .site-bottom-header-wrap .site-header-row{padding:43px 0 6px}
/* phone top row: the band colour/pattern is on the wrap (as Tilda: #f7f5f5 + BG.svg on /, white on /almaty) — the Kadence row colour must not cover it */
#mobile-header .site-top-header-wrap .site-header-row-container-inner{background:transparent}
#mobile-header .mobile-header-button-wrap .button{display:inline-flex;align-items:center}
body.vk-page-ram .site{background:var(--vk-bg) var(--vk-circuit)} /* the WordPress edition of /ram keeps its circuit background */
/* phone footer: the 320 px text column sits on the Tilda 320 grid (x = 0 on a 320 px screen, like the original) */
@media (max-width:639px){
  .site-footer-row-container-inner>.site-container{padding:0}
  .vk-footer{width:320px;max-width:none;margin:0 calc(50% - 160px)}
}
#colophon{overflow-x:clip}

/* rating badge in the desktop top bar → reviews on Yandex Maps (06.10.2026) */
.vk-ya-badge{display:inline-flex;align-items:center;gap:7px;align-self:center;height:28px;margin-right:8px;padding:0 11px 0 5px;border-radius:7px;background:#151313;color:#fff;font-size:13px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;flex:none}
.vk-ya-badge:hover{color:#fff;background:#2a2727}
.vk-ya-badge b{font-size:14px;font-weight:700}
.vk-ya-badge__logo{width:20px;height:20px;flex:none}
.vk-ya-badge__stars{display:inline-flex;gap:2px;color:#ffb800;line-height:0}
.vk-ya-badge__stars .vk-ico{width:11px;height:11px}
.vk-ya-badge__cnt{color:#d9d6d6}
@media (max-width:1365px){.vk-ya-badge__cnt{display:none}} /* below 1366 px the top row would wrap with the count */