/* ============================================================
   Balance Codex — Base layer
   ------------------------------------------------------------
   Resets and minimal global defaults. Loaded after tokens.css
   and fonts.css. Component CSS (chrome.css, main-page.css,
   calculator.css) loads on top of this and overrides where
   needed.
   
   Philosophy: do as little as possible here. The site's visual
   character lives in components. Base only handles things every
   page needs: box-sizing, body typography, focus visibility,
   image/media sane defaults, and the .bct-container utility.
   ============================================================ */


/* ─── Reset ──────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Prevents iOS Safari from inflating font sizes on landscape. */
  -webkit-text-size-adjust: 100%;
  /* No smooth scroll by default — explicit decision, not default UA behavior. */
  scroll-behavior: auto;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ─── Body baseline ──────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: 1.62;
  color:       var(--text-primary);
  background:  var(--surface-canvas);
  /* Prevent unintended horizontal scroll on overflow content. */
  overflow-x: hidden;
  /* Better rendering on macOS/Safari, no effect elsewhere. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Tabular numbers for any numerical data in body copy. */
  /* (Pyramid SVG sets this on its own group; this is a body-level safety net.) */
  font-variant-numeric: lining-nums;
}


/* ─── Headings (very light defaults, components override) ─ */

/* Modern Editorial v12 — Typography system v1 applied globally.
   Serif at weight 400 with the seven-level scale from tokens.css. */
/* Blocksy задаёт word-wrap:break-word глобально; на крупном кегле это
   рвёт слова по буквам («Волшебни / к»). Заголовки не переносятся. */
h1, h2, h3, h4 {
  overflow-wrap: normal;
  word-wrap:     normal;
  word-break:    normal;
  hyphens:       none;
}

h1 {
  font-family:    var(--font-display);
  font-weight:    400;
  font-size:      var(--type-display);
  line-height:    .96;
  letter-spacing: -.045em;
  margin-bottom:  32px;
  max-width:      850px;
  /* 2.11.4: наследование задано ЯВНО. Простое отсутствие цвета (2.11.3)
     не сработало: родительская Blocksy красит заголовки собственным
     правилом, и без нашей строки оно всплывало — заголовок оставался
     тёмным на тёмных лентах. color:inherit при той же специфичности,
     но позже по каскаду, возвращает семантику прототипов: заголовок
     всегда берёт цвет своей секции. */
  color: inherit;
}
h2 {
  font-family:    var(--font-display);
  font-weight:    400;
  font-size:      var(--type-section);
  line-height:    1;
  letter-spacing: -.035em;
  margin-bottom:  24px;
  color: inherit;
}
h3, h4 {
  font-family:    var(--font-display);
  font-weight:    400;
  font-size:      var(--type-card);
  line-height:    1.08;
  letter-spacing: -.02em;
  color: inherit;
}
@media (max-width: 760px) {
  h1 { line-height: .98; letter-spacing: -.035em; }
  h2 { line-height: 1.02; }
  h3, h4 { line-height: 1.12; }
}


/* ─── Links ──────────────────────────────────────────────── */

a {
  color: var(--text-meta);
  text-decoration: underline;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 0.18em;
  transition: opacity 120ms ease;
}

a:hover {
  color: var(--text-primary);
  opacity: 1;
}


/* ─── Focus visibility (keyboard a11y) ──────────────────── */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--state-focus);
  outline-offset: 2px;
  /* No border-radius — sharp corners match design system. */
}


/* ─── Text selection ─────────────────────────────────────── */

::selection {
  background: var(--accent-primary);
  color:      var(--text-on-accent);
}


/* ─── Container utility ──────────────────────────────────── */
/* Used by navbar, footer, and every section of the main page  */
/* to keep content aligned to a consistent horizontal frame.   */

.bct-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

@media (min-width: 768px) {
  .bct-container {
    padding-inline: var(--container-pad-desktop);
  }
}


/* ─── Visually hidden (a11y) ─────────────────────────────── */
/* For screen-reader-only text, like labels on icon buttons.   */

.bct-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}