/* Header + nav template: perbaikan di atas aturan bawaan update-article.min.css.
   Dimuat SETELAH vendor CSS agar menimpa. Warna dari /css-assets/base/theme.css */

/* --- Logo: lebar mengikuti gambar --- */
.logo,
.logo img {
  width: auto;
}

/* --- Tombol DAFTAR (header) & LOGIN (nav sticky): ikut palet tema --- */
.kid__button,
.menu-plus-sticky {
  background: var(--c-btn-gradient);
  border: 1px solid var(--c-btn-border);
  color: var(--c-btn-text);
}

.kid__button:hover,
.menu-plus-sticky:hover {
  background: var(--c-btn-gradient-hover);
  color: var(--c-btn-text);
}

/* Tombol LOGIN sticky: lebar mengikuti teks (bawaan Kompas memaksa 172px) */
.menu-plus-sticky {
  width: auto;
  flex-basis: auto;
  padding: 0 14px;
  white-space: nowrap;
  text-transform: uppercase;
}

/* --- Nav: item terakhir (burger "Lainnya") tidak boleh keluar baris --- */
.nav__row {
  flex-wrap: nowrap;
  min-width: 0;
}

.nav__row > .nav__item {
  flex: 0 1 auto;
  min-width: 0;
}

.nav__link--lainnya {
  padding: 0 12px;
}

/* --- Nav sticky: beri jarak tepi agar logo kecil tidak terpotong --- */
.header--sticky .nav .container {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.header--sticky .logo--sticky {
  flex: 0 0 auto;
  width: auto;
  max-width: 160px;
}

/* --- Responsif: bawaan Kompas memaksa 1100px --- */
@media (max-width: 1100px) {
  .header,
  .nav,
  .header--sticky .nav {
    width: 100%;
  }

  .header .container,
  .nav .container {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .nav__wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }

  .nav__wrap::-webkit-scrollbar {
    display: none;
  }

  .nav__row {
    width: max-content;
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  .header__row > .row {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .header__row > div > div,
  .header__row > div > div:last-child {
    width: 100%;
    justify-content: space-between;
  }

  .logo {
    height: 40px;
  }

  .logo img {
    height: 40px;
  }

  .header__row .col-bs12-8 {
    flex: 1 1 auto;
    min-width: 0;
  }

  .kid__wrap {
    margin: 0 0 0 10px;
  }

  .kid__button {
    width: auto;
    padding: 8px 12px;
  }

  .dark-header-item {
    order: 4;
  }
}