/* ==========================================================================
   Easy Logic — layout.css
   Каркас страницы: контейнер, секции, шапка с мегаменю, подвал, сайдбар.
   ========================================================================== */

/* ==========================================================================
   1. КОНТЕЙНЕР И СЕКЦИИ
   ========================================================================== */

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

/* Секция — горизонтальная полоса страницы со своими вертикальными отступами */
.section {
  padding-block: var(--space-8);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-9);
  }
}

.section--soft {
  background-color: var(--c-bg-soft);
}

.section--tint {
  background-color: var(--c-bg-tint);
}

/* Шапка секции: надзаголовок, заголовок, пояснение */
.section__head {
  margin-bottom: var(--space-7);
}

.section__head--center {
  text-align: center;
}

.section__head--center .section__lead {
  margin-inline: auto;
}

.section__lead {
  max-width: var(--measure);
  margin-top: var(--space-4);
  color: var(--c-ink-soft);
  font-size: var(--fs-lead);
}

/* Сетка на две равные колонки: на телефоне одна, с планшета две.
   Общая заготовка — ею пользуются любые блоки, где рядом стоят две
   карточки одинаковой важности. */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   2. КАРКАС СТРАНИЦЫ
   ========================================================================== */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main {
  flex: 1 0 auto;
}

/* ==========================================================================
   3. ШАПКА САЙТА
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-h);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Кнопка «Начать» уступает место логотипу на узких экранах:
   там достаточно кнопки меню.

   Селектор намеренно двойной — .btn.site-header__cta. Дело в порядке
   подключения файлов: components.css грузится после layout.css, а там у
   .btn стоит display: inline-flex. При одинаковом весе селекторов
   побеждает тот, что идёт позже, и кнопка не пряталась — на экране 320 px
   она вылезала за край и появлялась горизонтальная прокрутка.
   Два класса дают больший вес, и порядок файлов уже ничего не решает. */
.btn.site-header__cta {
  display: none;
}

@media (min-width: 600px) {
  .btn.site-header__cta {
    display: inline-flex;
  }
}

/* --- Логотип ---------------------------------------------------------------
   Знак — SVG, а слова «Easy Logic» набраны обычным текстом. Так они
   отрисованы настоящим шрифтом Manrope, доступны программе чтения экрана
   и попадают в поиск по странице. */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
}

.logo__mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.logo__text {
  font-family: var(--ff-head);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  white-space: nowrap;
}

.logo__accent {
  color: var(--c-blue-700);
}

/* ==========================================================================
   4. ОСНОВНОЕ МЕНЮ И МЕГАМЕНЮ
   На мобильном меню прячется в выдвижную панель, на десктопе выстраивается
   в строку. Граница переключения — 1024 px.
   ========================================================================== */

.main-nav {
  display: none;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
}

/* Пункт меню намеренно не позиционирован: выпадающая панель должна
   отсчитываться от шапки целиком, а не от кнопки. */
.main-nav__item {
  position: static;
}

/* Пункт меню — и ссылка, и кнопка выглядят одинаково */
.main-nav__link,
.main-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-family: var(--ff-head);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.main-nav__link:hover,
.main-nav__toggle:hover {
  background-color: var(--c-bg-soft);
  color: var(--c-blue-700);
}

.main-nav__item.is-open .main-nav__toggle {
  background-color: var(--c-bg-soft);
  color: var(--c-blue-700);
}

.main-nav__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--c-ink-muted);
  transition: transform var(--t-fast);
}

.main-nav__item.is-open .main-nav__chevron {
  transform: rotate(180deg);
}

/* Текущий раздел */
.main-nav__link[aria-current="page"] {
  color: var(--c-blue-700);
}

/* --- Выпадающая панель ------------------------------------------------------
   Панель растянута на всю ширину шапки, а её содержимое выровнено по общему
   контейнеру — так колонки совпадают с сеткой страницы. Отсчёт идёт от
   .site-header: липкий элемент задаёт систему координат для потомков. */

.megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 90;
  transform: translateY(-8px);
  padding-block: var(--space-6);
  background-color: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

.main-nav__item.is-open .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3) var(--space-5);
}

.megamenu__link {
  display: block;
  height: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background-color var(--t-fast);
}

.megamenu__link:hover {
  background-color: var(--c-bg-soft);
}

.megamenu__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-ink);
  font-family: var(--ff-head);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
}

.megamenu__link:hover .megamenu__title {
  color: var(--c-blue-700);
}

.megamenu__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background-color: var(--c-blue-100);
  color: var(--c-blue-700);
  font-size: var(--fs-tiny);
  font-weight: 700;
}

.megamenu__desc {
  margin-top: var(--space-1);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* Нижняя строка панели — ссылка на весь раздел целиком */
.megamenu__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border);
}

.megamenu__all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-blue-700);
  font-family: var(--ff-head);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
}

.megamenu__all:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   5. МОБИЛЬНОЕ МЕНЮ
   ========================================================================== */

/* В кнопке лежат обе иконки — «бургер» и крестик. Видна та, что
   соответствует состоянию aria-expanded. Так состояние кнопки задано
   в одном месте и не может разойтись с тем, что видит человек.

   Двойной селектор — по той же причине, что и у .btn.site-header__cta:
   без него .icon-btn из components.css перебивал display: none, и на
   десктопе рядом с меню висела лишняя нерабочая кнопка. */
.icon-btn.burger {
  display: inline-flex;
}

.burger__icon--close {
  display: none;
}

.burger[aria-expanded="true"] .burger__icon--open {
  display: none;
}

.burger[aria-expanded="true"] .burger__icon--close {
  display: block;
}

/* Панель занимает всё окно ниже шапки. Отсчёт идёт от окна браузера, а не
   от шапки, — ради этого блок и вынесен в разметке за пределы <header>
   (там backdrop-filter, а он перехватывает отсчёт у fixed-потомков).

   К высоте шапки прибавлен 1 px её нижней границы: без этого под шапкой
   оставалась тонкая щель с просвечивающим текстом страницы. */
.mobile-nav {
  position: fixed;
  top: calc(var(--header-h) + 1px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding: var(--space-5) var(--gutter) var(--space-8);
  overflow-y: auto;
  background-color: var(--c-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav__group + .mobile-nav__group {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border);
}

.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) 0;
  color: var(--c-ink);
  font-family: var(--ff-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  text-align: left;
}

.mobile-nav__toggle .icon {
  color: var(--c-ink-muted);
  transition: transform var(--t-fast);
}

.mobile-nav__toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.mobile-nav__panel {
  display: none;
  padding-bottom: var(--space-3);
}

.mobile-nav__panel.is-open {
  display: block;
}

.mobile-nav__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-sm);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  text-decoration: none;
}

.mobile-nav__link:hover {
  background-color: var(--c-bg-soft);
  color: var(--c-blue-700);
}

/* Прямая ссылка верхнего уровня, без вложенного списка */
.mobile-nav__direct {
  display: block;
  padding: var(--space-3) 0;
  color: var(--c-ink);
  font-family: var(--ff-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  text-decoration: none;
}

/* Пока открыто мобильное меню, страница под ним не прокручивается */
body.is-menu-open {
  overflow: hidden;
}

/* ==========================================================================
   6. ПЕРЕКЛЮЧЕНИЕ НА ДЕСКТОП
   ========================================================================== */

@media (min-width: 1024px) {
  .main-nav {
    display: block;
  }

  .icon-btn.burger {
    display: none;
  }

  .mobile-nav {
    display: none;
  }
}

/* ==========================================================================
   РАСКЛАДКА ВНУТРЕННЕЙ СТРАНИЦЫ
   Слева — список страниц этапа, справа — текст. На телефоне список
   сворачивается в одну строку с кнопкой: он длинный и на маленьком экране
   отодвинул бы саму статью за нижний край.
   ========================================================================== */

/* minmax(0, 1fr), а не просто 1fr: по умолчанию колонка сетки не сжимается
   уже своего содержимого, и широкая таблица внутри статьи растягивала всю
   страницу — появлялась горизонтальная прокрутка на телефоне. С нулевым
   минимумом колонка сжимается, а таблица прокручивается внутри себя. */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

/* Элемент сетки по умолчанию не сжимается уже своего содержимого. Внутри
   статьи есть таблица шириной 480 px, и колонка растягивалась до неё —
   на телефоне появлялась прокрутка вбок, причём вместе со статьёй уезжало
   и боковое меню. Явный нулевой минимум разрешает колонке сжаться, а
   таблица прокручивается внутри своей обёртки. */
.page-layout > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .page-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

/* --- Боковое меню страниц этапа --------------------------------------------
   На десктопе оно липкое: отсчёт от верха окна плюс высота шапки, иначе
   заголовок раздела уезжал бы под неё. */

@media (min-width: 1024px) {
  .sidebar-nav {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}

/* Кнопка нужна только на узком экране. Второй класс — чтобы правило
   пересилило .btn из components.css: там display: inline-flex, и без
   этого кнопка осталась бы видимой на десктопе. */
.btn.sidebar-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sidebar-nav__toggle .icon {
  transition: transform var(--t-fast);
}

.sidebar-nav__toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.sidebar-nav__panel {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background-color: var(--c-bg);
}

.sidebar-nav__panel.is-open {
  display: block;
}

@media (min-width: 1024px) {
  .btn.sidebar-nav__toggle {
    display: none;
  }

  .sidebar-nav__panel {
    display: block;
    margin-top: 0;
  }
}

.sidebar-nav__title {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-border);
  font-family: var(--ff-head);
  font-size: var(--fs-small);
  font-weight: 700;
}

.sidebar-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  counter-reset: sidebar;
  list-style: none;
}

.sidebar-nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.sidebar-nav__link:hover {
  background-color: var(--c-bg-tint);
  color: var(--c-blue-700);
}

/* Текущая страница отмечена и цветом, и полосой слева: одного цвета мало,
   если человек различает цвета плохо. */
.sidebar-nav__link[aria-current="page"] {
  border-left: 3px solid var(--c-blue-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background-color: var(--c-bg-tint);
  color: var(--c-ink);
  font-weight: 600;
}

/* --- Раскладка с оглавлением ----------------------------------------------
   У мануалов и статей теории слева нет списка страниц раздела: они не идут
   друг за другом, каждый читают отдельно. Вместо списка справа встаёт
   оглавление самой страницы. Колонки заданы через grid-column, а не
   порядком в разметке: в коде оглавление идёт первым, потому что на узком
   экране его место — над статьёй, а не под ней. */

@media (min-width: 1024px) {
  .page-layout--toc {
    grid-template-columns: minmax(0, 1fr) 240px;
  }

  .page-layout--toc > .article {
    grid-row: 1;
    grid-column: 1;
  }

  .page-layout--toc > .toc {
    grid-row: 1;
    grid-column: 2;
  }
}

/* --- Контакты: форма и карточка автора -------------------------------------
   Колонки неравные: форма — главное на странице, карточка рядом. Порядок
   в разметке тот же, что на экране, поэтому переставлять ничего не нужно —
   на телефоне карточка просто уезжает под форму. */

@media (min-width: 1024px) {
  .page-layout--contacts {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-8);
  }
}

/* --- Оглавление страницы --------------------------------------------------
   Стоит рядом с боковым меню, потому что делает то же самое: это рельс
   навигации на краю статьи, а не блок внутри текста.

   На десктопе липкое, как и меню этапа. Максимальная высота — остаток окна
   под шапкой: у длинной статьи оглавление иначе уходит за нижний край.
   Прокрутка внутри блока клавиатуре не мешает: внутри только ссылки,
   и фокус прокручивает список сам. */

@media (min-width: 1024px) {
  .toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    max-height: calc(100vh - var(--header-h) - var(--space-7));
    overflow-y: auto;
  }
}

/* Кнопка — только для узкого экрана. Второй класс, чтобы правило пересилило
   .btn из components.css: там display: inline-flex, и на десктопе кнопка
   осталась бы висеть над оглавлением (правило 7 раздела 8 спецификации). */
.btn.toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.toc__toggle .icon {
  transition: transform var(--t-fast);
}

.toc__toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.toc__panel {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background-color: var(--c-bg);
}

.toc__panel.is-open {
  display: block;
}

@media (min-width: 1024px) {
  .btn.toc__toggle {
    display: none;
  }

  /* На широком экране рамка не нужна: оглавление и так стоит на отдельном
     поле у края статьи. Остаётся только рельс слева. */
  .toc__panel {
    display: block;
    margin-top: 0;
    padding: 0;
    border: 0;
  }
}

.toc__title {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-ink-soft);
  font-family: var(--ff-head);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* Рельс: тонкая линия слева, на которой отмечается текущий пункт. */
.toc__list {
  padding-left: 0;
  border-left: 2px solid var(--c-border);
  list-style: none;
}

.toc__link {
  display: block;
  margin-left: -2px;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid transparent;
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.toc__link:hover {
  color: var(--c-blue-700);
}

/* Подзаголовки внутри раздела — мельче и с отступом: видно вложенность */
.toc__item--h3 .toc__link {
  padding-left: var(--space-6);
  font-size: var(--fs-tiny);
}

/* Пункт, до которого дочитали. Отмечен и цветом, и отрезком рельса:
   одного цвета мало, если человек различает цвета плохо. */
.toc__link.is-current {
  border-left-color: var(--c-blue-500);
  color: var(--c-ink);
  font-weight: 600;
}

/* ==========================================================================
   7. ПОДВАЛ
   ========================================================================== */

.site-footer {
  padding-block: var(--space-8) var(--space-6);
  background-color: var(--c-bg-soft);
  border-top: 1px solid var(--c-border);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-6);
  }
}

.site-footer__about {
  max-width: 34ch;
  margin-top: var(--space-4);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
}

.site-footer__title {
  margin-bottom: var(--space-4);
  color: var(--c-ink);
  font-family: var(--ff-head);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.site-footer__link {
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--c-blue-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-border);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
}