/* ==========================================================================
   Панель мобільного меню — вміст притиснутий до лівого краю.

   У styles.css панель центрує все по горизонталі (.header__nav має
   justify-content: center, .nav і .nav__sub — align-items: center).
   Тут це перекривається лише в межах бургер-меню, тобто до 1200px:
   від 75em навігація стає горизонтальною смугою в шапці, і її розкладку
   файл не торкається.

   Сам styles.css не змінений.
   ========================================================================== */

@media (max-width: 74.99em) {
  .header__nav {
    justify-content: flex-start;
  }

  .nav {
    align-items: flex-start;
    text-align: left;
  }

  /* Підпункти «Services» стоять під ним, теж по лівому краю. */
  .nav__sub {
    align-items: flex-start;
  }

  /* Кнопка CONTACT — по контенту, а не на всю ширину панелі. */
  .nav__item--cta .btn {
    width: auto;
  }

  /* --- «Services»: розкривний пункт --------------------------------------
     За замовчуванням підпункти згорнуті. Замість підкреслення в пункта
     стрілка — видно, що він розгортається. Керує ним assets/js/ak-nav.js.
     -------------------------------------------------------------------- */
  .nav__item--has-sub > .nav__link {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  /* ::after у макеті — це лінія підкреслення; тут вона стає стрілкою,
     тому окремо гасити підкреслення не потрібно. */
  .nav__item--has-sub > .nav__link::after,
  .nav__item--has-sub > .nav__link:hover::after,
  .nav__item--has-sub > .nav__link.is-active::after {
    position: static;
    width: 0.375rem;
    height: 0.375rem;
    margin-bottom: 0.125rem;
    background-color: transparent;
    border-right: 1px solid currentcolor;
    border-bottom: 1px solid currentcolor;
    transform: rotate(45deg);
    transition: transform var(--transition);
  }

  .nav__item--has-sub.is-sub-open > .nav__link::after {
    margin-bottom: -0.125rem;
    transform: rotate(-135deg);
  }

  .nav__sub {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height var(--transition),
      opacity var(--transition),
      margin-top var(--transition);
    margin-top: 0;
  }

  .nav__item--has-sub.is-sub-open .nav__sub {
    max-height: 14rem;
    margin-top: var(--space-3xs);
    opacity: 1;
  }
}