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

.footerMain {
  width: 100%;
  padding: 60px 0 32px; /* bawaan 160px bawah = ruang iklan sticky Kompas, tidak dipakai */
}

/* --- Tombol DAFTAR: ikut palet tema --- */
.footerNewsletter-link {
  background: var(--c-btn-gradient);
  border: 1px solid var(--c-btn-border);
  color: var(--c-btn-text);
}

.footerNewsletter-link:hover {
  background: var(--c-btn-gradient-hover);
  color: var(--c-btn-text);
}

/* --- Link menu: umpan balik hover + fokus keyboard --- */
.footerMenu-link:hover,
.footerMenu-link:focus-visible {
  color: var(--c-accent-light);
}

.footerSosmed-link:focus-visible .iconSos,
.footerMenu-link:focus-visible {
  outline: 2px solid var(--c-accent-light);
  outline-offset: 2px;
}

.footerSosmed-link:hover .iconSos {
  background-color: var(--c-accent-mid);
  border-color: var(--c-accent-light);
}

/* --- Kolom kedua: jangan patahkan NAMA BRAND Xxx" per kata --- */
.footerCol-nav.--colNetwork {
  max-width: none;
  flex: 0 0 auto;
}

.footerCol-nav.--colNetwork .footerMenu-link {
  white-space: nowrap;
}

/* --- Responsif: bawaan Kompas hanya 1100px --- */
@media (max-width: 1100px) {
  .footerMain > .container {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .footerWrap {
    gap: 48px;
  }
}

@media (max-width: 900px) {
  .footerWrap {
    flex-wrap: wrap;
    gap: 32px 48px;
  }

  .footerCol-column {
    max-width: none;
    flex: 1 1 100%;
  }

  .footerCol-nav {
    flex: 1 1 260px;
  }

  .footerCol-nav .footerMenu-wrap {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  .footerMain {
    padding: 40px 0 24px;
  }

  .footerCol-nav .footerMenu-wrap,
  .footerCol-nav.--colNetwork .footerMenu-wrap {
    column-count: 1;
  }

  .footerBottom-menu {
    flex-wrap: wrap;
    gap: 8px 20px;
  }
}