/* ==========================================================================
   OKNO Typography System — candidate (Design Foundations Phase 1 impl)
   Approved family: Mulish (single family: display + body + UI). No serif, no
   second display family, no faux weights. Self-hosted woff2 (OFL), no Google
   Fonts / Play / TildaSans runtime dependency. font-synthesis:none.
   Load this AFTER Tilda CSS + okno-global-shell.css so its scoped overrides win.
   ========================================================================== */

/* ---- @font-face: Mulish variable (wght 400..700), 4 subsets, display:swap ---- */
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/mulish-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/mulish-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/mulish-var-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/mulish-var-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}

/* Metric-matched fallback (reduces CLS on swap). Overrides are MEASURED from Mulish (latin woff2):
   unitsPerEm 1000, typoAscender 1005, typoDescender -250, typoLineGap 0 -> ascent 100.5%, descent 25%, gap 0%.
   size-adjust measured in-browser (Mulish/Arial advance ratio). Applied via a fallback alias so the system
   fallback occupies Mulish's line box before swap. */
@font-face{font-family:'Mulish Fallback';src:local('Arial');
  ascent-override:100.5%;descent-override:25%;line-gap-override:0%;size-adjust:105%;}

/* ---- Design tokens ---- */
:root{
  --font-display:'Mulish','Mulish Fallback',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body:'Mulish','Mulish Fallback',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --font-ui:'Mulish','Mulish Fallback',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --font-logo-keep:'TildaSans','Segoe UI',system-ui,Arial,sans-serif; /* preserve existing wordmark rendering */
  /* weights (no 300; 700 only for rare explicit emphasis) */
  --w-reg:400;--w-med:500;--w-semi:600;--w-bold:700;
  /* type scale */
  --fs-hero:clamp(44px,4.4vw,64px);
  --fs-h1:40px;--fs-h2:30px;--fs-h3:23px;--fs-h4:19px;
  --fs-lead:21px;--fs-body-lg:18px;--fs-body:17px;--fs-body-sm:15px;
  --fs-nav:15px;--fs-btn:15px;--fs-eyebrow:12.5px;--fs-caption:13px;--fs-legal:14px;
  /* line-heights */
  --lh-tight:1.12;--lh-head:1.2;--lh-body:1.6;--lh-lead:1.5;
  /* spacing (8px grid) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
  --measure:66ch;--measure-max:72ch;--measure-legal:70ch;
}

/* ---- Global: kill faux weights/italics everywhere; base body font ---- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;}
body{font-family:var(--font-body);font-weight:var(--w-reg);font-size:var(--fs-body);line-height:var(--lh-body);
  font-synthesis:none;text-rendering:optimizeLegibility;}

/* Apply Mulish to genuine text content only. :where() keeps 0 specificity so
   deliberate component rules still win, but a font-family swap must still beat
   Tilda's Arial -> we override Tilda text classes explicitly below.
   NEVER touch: svg, img, canvas, icon fonts, the logo, or 3rd-party controls. */
:where(h1,h2,h3,h4,h5,h6,p,li,a,span,strong,em,blockquote,figcaption,label,button,input,textarea,select,td,th,dd,dt,summary){
  font-family:inherit;font-synthesis:none;}
/* protect assets from the cascade */
svg,svg *,img,canvas,video,[class*="icon"] i,i[class*="icon"]{font-family:revert;}

/* ---- Logo wordmark: PRESERVE existing rendering (do NOT redesign). Pin to the current stack + weight so the
   Mulish body/chrome cascade cannot restyle it. Geometry (size 19px, ls -.01em, weight 800) is left to the base
   shell CSS; here we only lock the family to what it uses today. ---- */
.okno-gs-hd .okno-gs-logo,.okno-gs-hd .okno-gs-logo *,.okno-gs-drawer .okno-gs-logo,.okno-gs-drawer .okno-gs-logo *{font-family:var(--font-logo-keep)!important;line-height:normal!important;}

/* ===== Global shell chrome (header / drawer / footer / breadcrumb / CTA) ===== */
.okno-gs-hd,.okno-gs-hd *,.okno-gs-drawer,.okno-gs-drawer *,.okno-gs-ft,.okno-gs-ft *,
.okno-gs-bc,.okno-gs-bc *,.okno-gs-scrim{font-family:var(--font-ui)!important;font-synthesis:none;}
.okno-gs-grp>button,.okno-gs-grp>a{font-size:var(--fs-nav);font-weight:var(--w-med);letter-spacing:0;text-transform:none;}
/* Compact mode: tighten button padding so the 15px nav still fits 2 lines at ~1366 AND leaves room for a visible
   group separator (keeps 'compact', avoids early drawer, stays 14px). */
.okno-gs-hd[data-navmode="compact"] .okno-gs-grp>button{font-size:14px;padding:6px 3px;letter-spacing:-.005em;}
/* Patch 2 — clearly visible separation between adjacent L1 groups in compact: a thin vertical divider that sits in
   a small gap, so Недвижимость/Бизнес/Блог · Нерухомість/Бізнес/Блог no longer read as merged. The tighter button
   padding above compensates the divider width, so 1366 stays compact with no overflow / no early drawer. */
.okno-gs-hd[data-navmode="compact"] .okno-gs-nav{gap:6px;}
.okno-gs-hd[data-navmode="compact"] .okno-gs-grp+.okno-gs-grp{border-left:1px solid rgba(20,27,38,.18);padding-left:6px;}
.okno-gs-grp>button[aria-current="page"],.okno-gs-grp>a[aria-current="page"]{font-weight:var(--w-semi);}
.okno-gs-dd a,.okno-gs-acc__p a{font-size:var(--fs-nav);font-weight:var(--w-reg);text-transform:none;letter-spacing:0;}
.okno-gs-acc__disc{font-size:16px;font-weight:var(--w-med);}
.okno-gs-cta{font-size:var(--fs-btn);font-weight:var(--w-semi);text-transform:none;letter-spacing:.005em;}
/* Narrow-width fix (<=360px): the 15px CTA widened the header right cluster past 320px. Scope a smaller CTA +
   tighter header padding at very small widths so scrollWidth===innerWidth. No global overflow-x:hidden. */
/* Patch 3 — <=360px: fix the .okno-gs-right overflow through HEADER-ONLY geometry (reduce header inner padding +
   inter-control gaps). The CTA is NOT shrunk: in drawer mode the header CTA is hidden and the visible CTA lives in
   the drawer at its full size; the header CTA (when shown just above drawer) stays the approved 15px. The drawer
   CTA and widget buttons are untouched. No global overflow-x:hidden. Verified scrollWidth===innerWidth at 320. */
@media(max-width:360px){.okno-gs-hd__in{padding-left:4px!important;padding-right:4px!important;gap:6px!important;}
  .okno-gs-right{gap:5px!important;}
  /* header CTA (visible only when NOT in drawer) uses a tighter internal padding at <=360 while KEEPING 15px */
  .okno-gs-hd:not([data-navmode="drawer"]) .okno-gs-right .okno-gs-cta{padding:8px 9px;}}
.okno-gs-bc,.okno-gs-bc a{font-size:var(--fs-caption);font-weight:var(--w-med);}
.okno-gs-ft,.okno-gs-ft a{font-size:var(--fs-body-sm);font-weight:var(--w-reg);}
/* group / eyebrow labels inside dropdowns (the only sanctioned uppercase) */
.okno-gs-sub{font-size:var(--fs-eyebrow);font-weight:var(--w-semi);letter-spacing:.06em;text-transform:uppercase;}

/* ===== New placeholder pages (LEG/NOT/REA/BUS + p1) — remove Times serif ===== */
.okno-p1{font-family:var(--font-body);font-weight:var(--w-reg);}
.onot-wrap,.oleg-wrap,.orea-wrap,.obus-wrap,.okno-p1 main{font-family:var(--font-body);}
.onot-wrap h1,.oleg-wrap h1,.orea-wrap h1,.obus-wrap h1{
  font-family:var(--font-display);font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:var(--w-semi);letter-spacing:-.005em;text-transform:none;}
.onot-p,.oleg-p,.orea-p,.obus-p{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--w-reg);max-width:var(--measure);}
.onot-back,.oleg-back,.orea-back,.obus-back,.okno-p1 main a{font-weight:var(--w-semi);}
@media(max-width:640px){.onot-wrap h1,.oleg-wrap h1,.orea-wrap h1,.obus-wrap h1{font-size:var(--fs-h1-m,30px);}
  .onot-p,.oleg-p,.orea-p,.obus-p{font-size:16px;}}

/* ===== Legacy Tilda content — typography-only scoped overrides (family + weight,
        no layout geometry change). Kill Arial + weight 300 + giant uppercase. ===== */
.t-text,.t-descr,.t-name,.t-title,.t-heading,.t-uptitle,.t-btn,.t-btn__lbl,.t-submit,
.t-feed__post-title,.t-feed__post-descr,.t-store__prod-popup__name,.t-card__title,
.t-input,.t-form__errorbox-middle,.t-checkbox__labelbox,.t-radio__labelbox,
.t123__title,.t123__descr,.tn-atom{font-family:var(--font-body)!important;font-synthesis:none;}
/* replace weight-300 body with regular; never below 400. NOTE: .tn-atom removed from this rule so it does NOT
   flatten intentional Zero Block heading/UI weight hierarchy (patch 1). */
.t-text,.t-descr,.t-feed__post-descr{font-weight:var(--w-reg)!important;}
/* Genuine prose body -> 17px desktop / 16px mobile, weight 400, line-height ~1.6. Targets Tilda body text-size
   classes only (t-text_md / t-descr_md / impact / block prose). Captions & metadata (_sm/_xs/_xxs) and leads
   (_lg/_xl) keep their approved roles; headings and decorative atoms are untouched (patch 1). */
.t-text.t-text_md,.t-descr.t-descr_md,.t-text-impact.t-text-impact_md,.t-store__descr,.t-feed__post-popup__text,
.t230__text.t-text_md{font-size:var(--fs-body)!important;line-height:var(--lh-body)!important;font-weight:var(--w-reg)!important;}
@media(max-width:640px){.t-text.t-text_md,.t-descr.t-descr_md,.t-text-impact.t-text-impact_md,.t-store__descr,
  .t-feed__post-popup__text,.t230__text.t-text_md{font-size:16px!important;}}
/* headings: 600, sentence case, drop huge uppercase + heavy tracking */
.t-title,.t-name,.t-heading,.t-feed__post-title,.t-card__title{font-weight:var(--w-semi)!important;letter-spacing:normal!important;}
.t-title_xxl,.t-title_xl,.t-title_lg,.t-hero__title,.t396__elem .t-title{text-transform:none!important;letter-spacing:normal!important;}
/* buttons: sentence case, no uppercase, 600 */
.t-btn,.t-btn__lbl,.t-submit{font-weight:var(--w-semi)!important;text-transform:none!important;letter-spacing:normal!important;}
/* eyebrow/uptitle stays as the sanctioned uppercase label */
.t-uptitle{font-weight:var(--w-semi)!important;letter-spacing:.06em!important;}

/* ===== Homepage / blog giant hero: remove 150px all-caps display treatment ===== */
/* Generic heading normalization: no uppercase, sentence case, tokenized sizes.
   (Placeholder .orea/.oleg/.onot/.obus h1 rules above have higher specificity and keep 40px/600.) */
h1{font-size:var(--fs-h1)!important;line-height:var(--lh-tight)!important;font-weight:var(--w-semi)!important;
  text-transform:none!important;letter-spacing:normal!important;}
h2{font-size:var(--fs-h2)!important;line-height:var(--lh-head)!important;font-weight:var(--w-semi)!important;text-transform:none!important;letter-spacing:normal!important;}
h3{font-size:var(--fs-h3)!important;line-height:var(--lh-head)!important;font-weight:var(--w-semi)!important;text-transform:none!important;letter-spacing:normal!important;}
/* Cover / hero blocks keep a larger display size (still not 150px, no uppercase) */
.t-cover h1,.t-cover__wrapper h1,.t-cover__title,.t-cover__title .t-title,.t396__artboard h1,[class*="cover"] h1{
  font-size:var(--fs-hero)!important;line-height:var(--lh-tight)!important;font-weight:var(--w-med)!important;text-transform:none!important;letter-spacing:-.01em!important;}
@media(max-width:640px){
  h1{font-size:30px!important;}
  .t-cover h1,.t-cover__title,.t-cover__title .t-title,[class*="cover"] h1{font-size:clamp(32px,9vw,38px)!important;}
}

/* legal notes never below 14px */
.t-text_xs,.okno-legal,.t-descr_xxs{font-size:var(--fs-legal)!important;}

/* ===== Existing widget (okno-start-widget): typography INHERITANCE ONLY — font-family so the widget text is
   Mulish (no fallback). NO change to widget logic, fields, routing, sizes, layout or integrations. ===== */
#osw-ov,#osw-ov *,.osw-w,.osw-w *{font-family:var(--font-ui)!important;font-synthesis:none;}