/* Tombol bagikan dokumen — common/widgets/ShareButtonWidget.php.
   Dilingkupi .share-button agar tidak menyentuh komponen lain. Dipakai di
   halaman detail peraturan, monografi, putusan, artikel, dan berita. */

/* Dilingkupi .share-button agar tidak menyentuh komponen lain. Warna memakai
   currentColor supaya ikon ikut warna tautan di halaman yang memuatnya. */
.share-button { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.share-button__label {
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: #46586F;
}
.share-button__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.share-button__list li { margin: 0; padding: 0; }
.share-button__list li::before { content: none; }
.share-button__item {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;           /* target sentuh >= 40px */
    border-radius: 6px;
    border: 1px solid #DCE3EC;
    background: #FFFFFF;
    color: #46586F;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.share-button__item:hover,
.share-button__item:focus { color: #FFFFFF; border-color: transparent; }
/* Warna glyph diatur lewat properti `fill` pada <path>, bukan lewat `color`
   yang diwarisi `fill="currentColor"`. Alasannya: halaman frontend memasang
   `#landing-content a { color:#dd4b39 }` dengan spesifisitas ID, sehingga
   `color` pada tautan ikon selalu kalah dan seluruh logo menjadi merah.
   Tidak ada aturan lain yang menyentuh `fill`, jadi aturan ini menang
   di semua halaman yang memuat widget tanpa perlu !important. */
.share-button__item svg path { fill: #46586F; transition: fill .15s ease; }
.share-button__item:hover svg path,
.share-button__item:focus svg path { fill: #FFFFFF; }
@media (prefers-reduced-motion: reduce) {
    .share-button__item svg path { transition: none; }
}
/* Warna merek hanya muncul saat hover/fokus; keadaan diam tetap netral supaya
   panel tidak ramai dan ikon tetap terbaca. */
.share-button__item--whatsapp:hover, .share-button__item--whatsapp:focus { background: #1DA851; }
.share-button__item--telegram:hover, .share-button__item--telegram:focus { background: #2481B7; }
.share-button__item--x:hover,        .share-button__item--x:focus        { background: #16202E; }
.share-button__item--threads:hover,  .share-button__item--threads:focus  { background: #16202E; }
.share-button__item:focus-visible { outline: 3px solid #23313F; outline-offset: 2px; }
.share-button__item svg { display: block; }
/* Teks khusus pembaca layar: tautan ikon wajib punya nama aksesibel. */
.share-button__sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}