/* ===========================
   TYPOGRAPHY BASE — LEGO HEROES
   (fixed px sizes + responsive)
=========================== */

/* ====== Desktop ≥ 1200px ====== */
.defaultH1{
  font-size: 110px !important;
  line-height: 1.04 !important;
  letter-spacing: 0.10em;
  margin: 0;
  text-transform: uppercase;
}

.defaultH2 {
  font-size: 44px !important;
  line-height: 1.08 !important;
  letter-spacing: 0.12em;
  margin: 0;
  font-weight: bold;
  text-transform: uppercase;
  font-family: "Baloo 2", cursive;
}

.defaultH3{
  font-size: 32px !important;
  line-height: 1.12 !important;
  margin: 0 0 6px;
}

.defaultH4 {
  font-size: 24px !important;
  line-height: 1.15 !important;
  margin: 0 0 4px;
}



  .section__content .section__text {
    color: var(--text-muted);
}


.defaultP {
   font-size: 20px !important;
   margin: 0;

}


.section__text,
.hero__text,
.panel__text,
.hero-card__text,
.footer__text{
  font-size: 20px !important;
  line-height: 1.6 !important;
}

/* Отступы секций (h2 + первый параграф) */
section h2,
.section__title {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

section h2 + p,
.section__title + .section__subtitle {
  margin: 0 !important;
  margin-bottom: 20px !important;
}

/* Внутренние секции в левом layout (если используешь .left) */
.left section {
  padding: 10px 0 !important;
  margin-bottom: 0 !important;
}

.left-title {
  margin-block: 36px;
  font-size: 64px !important;
  font-weight: bold;
  color: var(--accent-yellow);
}

/* ====== ≤ 1200px ====== */
@media screen and (max-width: 1200px) {
  .defaultH1,
  .hero__title {
    font-size: 46px !important;
    line-height: 1.06;
  }

  .defaultH2,
  .section__title {
    font-size: 30px !important;
    line-height: 1.08;
  }

  .defaultH3
  {
    font-size: 22px !important;
  }

  .defaultH4 {
    font-size: 17px !important;
  }

  .defaultP,
  .section__text,
  .hero__text,
  .panel__text,
  .hero-card__text,
  .footer__text,
  li {
    font-size: 15px !important;
  }

  section h2,
  .section__title {
    margin-bottom: 18px !important;
  }

  .left-title {
  margin-block: 36px;
  font-size: 40px !important;
  font-weight: bold;
  color: var(--accent-yellow);
}
}

/* ====== ≤ 900px (планшеты) ====== */
@media screen and (max-width: 900px) {
  .defaultH1,
  .hero__title {
    font-size: 40px !important;
    letter-spacing: 0.08em;
  }

  .defaultH2,
  .section__title {
    font-size: 28px !important;
  }

  .defaultH3{
    font-size: 20px !important;
  }

  .defaultH4 {
    font-size: 16px !important;
  }

  .defaultP,
  .section__text,
  .hero__text,
  .panel__text,
  .hero-card__text,
  .footer__text,
  li {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  .left section {
    padding: 10px 0 !important;
  }

  
.left-title {
  margin-block: 36px;
  font-size: 40px !important;
  font-weight: bold;
  color: var(--accent-yellow);
}
}

/* ====== ≤ 700px (малые планшеты / большие телефоны) ====== */
@media screen and (max-width: 700px) {
  .defaultH1,
  .hero__title {
    font-size: 34px !important;
    letter-spacing: 0.07em;
  }

  .defaultH2,
  .section__title {
    font-size: 24px !important;
  }

  .defaultH3{
    font-size: 18px !important;
  }

  .defaultH4 {
    font-size: 15px !important;
  }

  .defaultP,
  .section__text,
  .hero__text,
  .panel__text,
  .hero-card__text,
  .footer__text,
  li {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  section h2,
  .section__title {
    margin-bottom: 16px !important;
  }

  .left-title {
  margin-block: 36px;
  font-size: 40px !important;
  font-weight: bold;
  color: var(--accent-yellow);
}
}

/* ====== ≤ 500px (телефоны) ====== */
@media screen and (max-width: 500px) {
  .defaultH1,
  .hero__title {
    font-size: 50px !important;
  }

  .defaultH2,
  .section__title {
    font-size: 32px !important;
  }

  .defaultH3 {
    font-size: 24px !important;
  }

  .defaultH4 {
    font-size: 22px !important;
  }

  .defaultP,
  .section__text,
  .hero__text,
  .panel__text,
  .hero-card__text,
  .footer__text,
  li {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  section h2,
  .section__title {
    margin-bottom: 14px !important;
  }

  .left-title {
  margin-block: 36px;
  font-size: 40px !important;
  font-weight: bold;
  color: var(--accent-yellow);
}
}

/* ====== ≤ 380px (малые экраны) ====== */
@media screen and (max-width: 380px) {
  .defaultH1,
  .hero__title {
    font-size: 40px !important;
  }

  .defaultH2,
  .section__title {
    font-size: 32px !important;
  }

  .defaultH3 {
    font-size: 22px !important;
  }

  .defaultH4 {
    font-size: 18px !important;
  }

  .defaultP,
  .section__text,
  .hero__text,
  .panel__text,
  .hero-card__text,
  .footer__text,
  li {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .left-title {
  margin-block: 36px;
  font-size: 40px !important;
  font-weight: bold;
  color: var(--accent-yellow);
}
}




/* ===========================
   LINKS INSIDE LEFT SECTIONS
   (green / yellow accent)
=========================== */

.left a {
  color: var(--accent-yellow);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease,
    filter 0.2s ease;
}

.left a:hover {
  color: var(--accent-green);
  text-decoration-color: var(--accent-green);
  filter: brightness(1.1);
}

.left a:focus-visible {
  outline: 2px solid rgba(255, 214, 50, 0.7);
  outline-offset: 2px;
  color: var(--accent-yellow);
  text-decoration-color: var(--accent-yellow);
}

/* ===========================
   CUSTOM SCROLLBAR — LEGO HERO
=========================== */

::-webkit-scrollbar {
  width: 8px;
}

/* дорожка */
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
  margin: 10px 0;
}

/* ползунок */
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--accent-yellow),
    var(--accent-green)
  );
  border-radius: 999px;
  transition:
    background 0.2s ease,
    opacity 0.2s ease;
}

/* hover */
::-webkit-scrollbar-thumb:hover {
  opacity: 0.95;
}

/* active */
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(
    180deg,
    var(--accent-green),
    var(--accent-red)
  );
}