/*
 * EGE-School layout (design B0): header, desktop search, "Предметы" mega
 * panel, mobile menu, footer. Values come from docs/design/b/B-nav-*.dc.html;
 * colours only from base.css tokens. Toggles: assets/js/menu.js.
 * Header switches to the phone layout below 1024px (nav + CTA do not fit).
 */

/*
 * Button rules here are scoped under .es-header / .es-mobile / .es-search-form,
 * so generic button styles (plugins, the browser) do not win over them.
 */

/* panels toggled with the hidden attribute keep display:none over their own display */
.es-search[hidden],
.es-mega[hidden],
.es-mobile[hidden],
.es-mobile__sub[hidden] {
  display: none;
}

.es-no-scroll {
  overflow: hidden;
}

/* ---------- logo ---------- */
.es-logo {
  flex: none;
  color: var(--es-white);
  font-family: var(--es-font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.es-logo:hover {
  color: var(--es-white);
}

.es-logo__dot {
  color: var(--es-acc);
}

/* round icon button on ink */
.es-header .es-icon-btn,
.es-mobile .es-icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--es-r-pill);
  background: color-mix(in srgb, var(--es-white) 12%, transparent);
  color: var(--es-white);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.es-header .es-icon-btn:hover,
.es-header .es-icon-btn[aria-expanded='true'],
.es-mobile .es-icon-btn:hover {
  background: color-mix(in srgb, var(--es-white) 20%, transparent);
}

.es-header .es-icon-btn--acc,
.es-header .es-icon-btn--acc[aria-expanded='true'],
.es-mobile .es-icon-btn--acc {
  background: var(--es-acc);
  color: var(--es-ink);
}

.es-header .es-icon-btn--acc:hover,
.es-mobile .es-icon-btn--acc:hover {
  background: var(--es-acc-h);
  color: var(--es-ink);
}

/* ---------- header ---------- */
.es-header,
.es-mobile,
.es-footer {
  font-family: var(--es-font-text);
  line-height: 1.5;
}

.es-header {
  position: relative;
  z-index: 30;
  border-radius: 0 0 40px 40px;
  background: var(--es-ink);
  color: var(--es-white);
}

.es-header.is-open {
  border-radius: 0;
}

.es-header__bar {
  display: flex;
  align-items: center;
  gap: var(--es-s-8);
  height: 84px;
}

.es-nav {
  flex: 1;
  min-width: 0;
}

.es-nav__list {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
}

.es-header .es-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--es-white);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.es-header .es-nav__link:hover,
.es-header .es-nav__link.is-current,
.es-header .es-nav__toggle[aria-expanded='true'] {
  color: var(--es-acc);
}

.es-nav__toggle .es-icon {
  transition: transform 0.15s;
}

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

.es-header__actions {
  display: flex;
  align-items: center;
  gap: var(--es-s-4);
}

.es-header__cta {
  white-space: nowrap;
}

.es-header .es-header__mobile-btn {
  display: none;
}

/* dimmed page under an open header panel */
.es-scrim::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--es-ink) 35%, transparent);
}

/* ---------- header panels: search, mega ---------- */
.es-search,
.es-mega {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  border-radius: 0 0 40px 40px;
  background: var(--es-ink);
}

.es-search {
  padding: var(--es-s-2) 0 28px;
}

.es-search .es-search-form {
  max-width: 720px;
}

.es-mega {
  max-height: calc(100vh - 84px);
  padding-bottom: 36px;
  overflow-y: auto;
}

/* search form (header panel and mobile menu) */
.es-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 6px 0 18px;
  border-radius: var(--es-r-pill);
  background: var(--es-white);
  color: var(--es-ink);
}

.es-search-form:focus-within {
  outline: 3px solid var(--es-acc);
  outline-offset: 2px;
}

.es-search-form .es-icon {
  flex: none;
}

.es-search-form__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--es-ink);
  font-size: 16px;
}

.es-search-form__input::placeholder {
  color: var(--es-muted);
  opacity: 1;
}

.es-search-form .es-search-form__input:focus,
.es-search-form .es-search-form__input:focus-visible {
  outline: none;
}

.es-search-form__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.es-search-form .es-search-form__submit {
  flex: none;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--es-r-pill);
  background: var(--es-ink);
  color: var(--es-white);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.es-search-form .es-search-form__submit:hover {
  background: var(--es-ink);
  color: var(--es-acc);
}

.es-search-form .es-search-form__submit:focus-visible {
  outline-color: var(--es-link-h);
}

/* mega card */
.es-mega__card {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) 240px;
  gap: var(--es-s-6);
  padding: var(--es-s-8);
  border-radius: var(--es-r-xl);
  background: var(--es-white);
  color: var(--es-ink);
}

.es-mega__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.es-mega__title {
  margin: 0 0 10px;
  color: var(--es-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.es-mega__title--next {
  margin-top: 18px;
}

.es-mega__list {
  display: flex;
  flex-direction: column;
  gap: var(--es-s-1);
  list-style: none;
}

.es-mega__list--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--es-s-1) var(--es-s-2);
}

.es-mega__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--es-s-2);
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--es-r-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.es-mega__link:hover {
  background: var(--es-ground);
  color: var(--es-ink);
}

.es-mega__name {
  display: inline-flex;
  align-items: center;
  gap: var(--es-s-2);
  min-width: 0;
  hyphens: auto;
}

.es-mega__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.es-mega__count {
  flex: none;
  color: var(--es-muted);
  font-size: 13px;
  font-weight: 700;
}

.es-mega__link--all,
.es-mega__link--all:hover {
  color: var(--es-link-h);
}

.es-mega__promo {
  display: flex;
  flex-direction: column;
  gap: var(--es-s-3);
  padding: var(--es-s-6);
  border-radius: var(--es-r-lg);
  background: var(--es-acc);
  color: var(--es-ink);
}

.es-mega__promo:hover {
  background: var(--es-acc-h);
  color: var(--es-ink);
}

.es-mega__promo-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 28px;
  padding: 0 var(--es-s-3);
  border-radius: var(--es-r-pill);
  background: var(--es-white);
  font-size: 12px;
  font-weight: 800;
}

.es-mega__promo-title {
  font-family: var(--es-font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.es-mega__promo-more {
  color: var(--es-muted-2);
  font-size: 14px;
}

.es-mega__promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: auto;
  border-radius: var(--es-r-pill);
  background: var(--es-ink);
  color: var(--es-white);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 1199px) {
  .es-mega__card {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .es-mega__promo {
    grid-column: 1 / -1;
  }
}

/* Six header links (with «Репетиторы») do not fit the default gaps below ~1100px: tighter
   gaps, and a smaller font on the narrowest desktops, keep «Материалы» off the search button. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .es-header__bar {
    gap: var(--es-s-6);
  }

  .es-nav__list {
    gap: 20px;
  }
}

@media (min-width: 1024px) and (max-width: 1099px) {
  .es-header__bar {
    gap: 20px;
  }

  .es-nav__list {
    gap: 16px;
  }

  .es-header .es-nav__link {
    font-size: 14px;
  }
}

/* ---------- phone header ---------- */
@media (max-width: 1023px) {
  .es-header {
    border-radius: 0 0 32px 32px;
  }

  .es-header__bar {
    justify-content: space-between;
    height: 64px;
  }

  .es-header .es-logo {
    font-size: 17px;
  }

  .es-header .es-nav,
  .es-header .es-header__cta,
  .es-header .es-header__search,
  .es-header .es-search,
  .es-header .es-mega {
    display: none;
  }

  .es-header__actions {
    gap: var(--es-s-2);
  }

  .es-header .es-header__mobile-btn {
    display: inline-flex;
    width: 44px;
    height: 44px;
  }
}

/* ---------- mobile menu ---------- */
.es-mobile {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--es-ink);
  color: var(--es-white);
}

.es-mobile__bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--es-gutter);
}

.es-mobile__logo {
  font-size: 17px;
}

.es-mobile__bar .es-icon-btn {
  width: 44px;
  height: 44px;
}

.es-mobile__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--es-s-2) var(--es-gutter) 28px;
}

.es-mobile .es-search-form {
  margin-bottom: 10px;
}

.es-mobile__list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.es-mobile .es-mobile__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--es-s-3);
  width: 100%;
  min-height: 56px;
  padding: 0 var(--es-s-1);
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--es-white) 12%, transparent);
  background: transparent;
  color: var(--es-white);
  font-family: var(--es-font-display);
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.es-mobile__item .es-icon {
  flex: none;
  color: var(--es-on-dark);
}

.es-mobile .es-mobile__item:hover,
.es-mobile .es-mobile__item.is-current {
  color: var(--es-acc);
}

.es-mobile .es-mobile__toggle[aria-expanded='true'] {
  border-bottom: 0;
  color: var(--es-acc);
}

.es-mobile__toggle[aria-expanded='true'] .es-icon {
  color: currentColor;
  transform: rotate(180deg);
}

.es-mobile__sub {
  display: flex;
  flex-direction: column;
  gap: var(--es-s-3);
  padding: var(--es-s-3) 0 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--es-white) 12%, transparent);
}

.es-mobile__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--es-s-2);
  list-style: none;
}

.es-mobile__subject {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 100%;
  min-height: 56px;
  padding: var(--es-s-2) 14px;
  border-left: 6px solid transparent;
  border-radius: 18px;
  background: color-mix(in srgb, var(--es-white) 8%, transparent);
  color: var(--es-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.es-mobile__subject:hover {
  color: var(--es-acc);
}

.es-mobile__subject span {
  color: var(--es-on-dark);
  font-size: 12px;
  font-weight: 600;
}

.es-mobile__all {
  align-self: flex-start;
  color: var(--es-acc);
  font-size: 14px;
  font-weight: 700;
}

.es-mobile__all:hover {
  color: var(--es-acc-h);
}

.es-mobile__badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--es-r-pill);
  background: var(--es-acc);
  color: var(--es-ink);
  font-family: var(--es-font-text);
  font-size: 12px;
  font-weight: 800;
}

.es-mobile__contact {
  display: flex;
  flex-direction: column;
  gap: var(--es-s-3);
  margin-top: 20px;
  padding: 20px;
  border-radius: var(--es-r-lg);
  background: color-mix(in srgb, var(--es-white) 8%, transparent);
}

.es-mobile__phone {
  align-self: flex-start;
  color: var(--es-white);
  font-family: var(--es-font-display);
  font-size: 20px;
  font-weight: 800;
}

.es-mobile__phone:hover {
  color: var(--es-acc);
}

.es-mobile__note {
  color: var(--es-on-dark);
  font-size: 14px;
}

.es-mobile__contact .es-btn {
  min-height: 52px;
}

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

/* ---------- footer ---------- */
.es-footer {
  margin-top: var(--es-s-16);
  border-radius: 40px 40px 0 0;
  background: var(--es-ink);
  color: var(--es-on-dark);
}

.es-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--es-s-12);
  padding-top: var(--es-s-16);
  padding-bottom: 40px;
}

.es-footer a:not(.es-btn) {
  color: var(--es-on-dark);
  font-size: 14px;
}

.es-footer a:not(.es-btn):hover {
  color: var(--es-acc);
}

.es-footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--es-s-6);
  padding: 28px var(--es-s-8);
  border-radius: var(--es-r-xl);
  background: color-mix(in srgb, var(--es-white) 8%, transparent);
}

.es-footer__phone-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 15px;
}

.es-footer a.es-footer__phone {
  color: var(--es-white);
  font-family: var(--es-font-display);
  font-size: 24px;
  font-weight: 800;
}

.es-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--es-s-3);
}

.es-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: var(--es-s-8);
}

.es-footer__about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  line-height: 1.55;
}

.es-footer a.es-footer__logo {
  color: var(--es-white);
  font-size: 22px;
}

.es-footer__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.es-footer__menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.es-footer__title {
  color: var(--es-white);
  font-family: var(--es-font-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.es-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.es-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--es-s-4);
  padding-top: var(--es-s-6);
  border-top: 1px solid color-mix(in srgb, var(--es-white) 12%, transparent);
  font-size: 13px;
}

@media (max-width: 900px) {
  .es-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--es-s-6) var(--es-s-4);
  }

  .es-footer__about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .es-footer {
    border-radius: var(--es-r-xl) var(--es-r-xl) 0 0;
  }

  .es-footer__inner {
    gap: var(--es-s-6);
    padding-top: var(--es-s-8);
    padding-bottom: 28px;
  }

  .es-footer__contact {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    border-radius: var(--es-r-md);
  }

  .es-footer a.es-footer__phone {
    font-size: 18px;
  }

  .es-footer__actions .es-btn {
    flex: 1 1 auto;
  }

  .es-footer__title {
    font-size: 14px;
  }

  .es-footer a.es-footer__logo {
    font-size: 20px;
  }
}