/* chrome-unified.v1.css
   v1.5
   Goal: unify HEADER + BREADCRUMBS everywhere (except main) to match /interactive-typography/ (the reference chosen by user).
   Notes:
   - No font-family forcing (use page's Inter when available).
   - Fix breadcrumb vertical rhythm by setting explicit line-height (independent from article body line-height).
   - Remove aggressive layout helpers that were breaking pages that use .page for internal layouts.
*/

html{ overflow-y: scroll; }

/* Anti-jump (FOIT-like): hide until JS confirms Inter is ready (or after timeout).
   Keeps layout intact (opacity only), avoids visible font swap.
*/
body{
  opacity: 0 !important;
  transition: opacity .12s ease;
  animation: chromeWFFallbackShow 0s 2.6s forwards;
}
body.wf-ready{ opacity: 1 !important; animation: none; }

@keyframes chromeWFFallbackShow{ to{ opacity: 1; } }

@media (prefers-reduced-motion: reduce){
  body{ transition: none; }
}

/* Header */
body.chrome-unified header.site{
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #fff !important;
  border-bottom: 1px solid #e6e7eb !important;
}

body.chrome-unified .site__inner{
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 14px !important;
}

body.chrome-unified .site__title{
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  color: #0b0b0b !important;
  text-decoration: none !important;
}

/* Wrapper */
body.chrome-unified .wrapper{
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 14px !important;
  padding-top: 2px !important;
}

/* Breadcrumbs (reference: /interactive-typography/)
   Important: explicit line-height so breadcrumbs look одинаково на статьях с большим line-height.
*/
body.chrome-unified .breadcrumbs{
  font-size: 12px !important;
  line-height: 1.45 !important; /* 12px * 1.45 = 17.4px */
  color: #6b7280 !important;
  margin: 12px 0 12px !important;
  font-weight: 400 !important;
}

body.chrome-unified .breadcrumbs a{
  color: #6b7280 !important;
  text-decoration: none !important;
}

body.chrome-unified .breadcrumbs a:visited{
  color: #6b7280 !important;
}

body.chrome-unified .breadcrumbs a:hover{
  text-decoration: underline !important;
}

body.chrome-unified .breadcrumbs__sep{ margin: 0 4px !important; }

body.chrome-unified .breadcrumbs__current{ color: #111 !important; }

/* Reference spacing rule: gap below breadcrumbs should be controlled by breadcrumbs margin only */
body.chrome-unified .wrapper > .breadcrumbs + *{
  margin-top: 0 !important;
}


/* Sidenav hover/focus (resources page lacked hover highlight)
   Matches the left navigation feel on /tools/ and other resources pages.
*/
body.chrome-unified .sidenav a:hover{
  background: var(--soft, #f3f4f6) !important;
  border-color: var(--line, #e6e7eb) !important;
  text-decoration: none !important;
}

body.chrome-unified .sidenav a:focus-visible{
  outline: 2px solid var(--acc, #2563eb) !important;
  outline-offset: 2px !important;
}

/* Footer
   Default: align to wrapper left edge.
   Modifiers:
   - .footer--maincol : align to the main cards column (after sidebar)
   - .footer--center  : centered footer with required spacing (40px above, 12px below)
*/
body[data-resources="1"] .footer,
body[data-resources="1"] footer.footer{
  max-width: 1100px !important;
  margin: 18px auto 18px !important;
  padding: 0 14px 18px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: left !important;
  border: 0 !important;
}

body[data-resources="1"] .footer__inner{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
}

body[data-resources="1"] .footer a{
  color: inherit !important;
  text-decoration: none !important;
}
body[data-resources="1"] .footer a:hover{
  text-decoration: underline !important;
}

/* Centered footer: required spacing */
body[data-resources="1"] .footer.footer--center,
body[data-resources="1"] footer.footer.footer--center{
  margin: 40px auto 0 !important;
  padding: 0 14px 12px !important;
  text-align: center !important;
}

/* Align footer text to the main cards column (desktop only) */
@media (min-width: 980px){
  body[data-resources="1"] .footer.footer--maincol,
  body[data-resources="1"] footer.footer.footer--maincol{
    padding-left: calc(14px + 260px + 18px) !important;
    padding-right: 14px !important;
  }
}

/* Sidenav typography normalization:
   /tools/ had a larger base font (15px/1.65), which leaked into the left navigation.
   Keep sidenav consistent with the unified chrome (14px / 1.45) across pages. */
body.chrome-unified .sidenav{
  font-size: 14px !important;
  line-height: 1.45 !important;
}
body.chrome-unified .sidenav a{
  font-size: inherit !important;
  line-height: inherit !important;
}