/* ============================================================
   PERUBAHAN.CSS  —  regulasiku.id
   Visual tracking of legislative amendments and deletions.
   (Replaces old .perubahan.p-1 system and absorbs dihapus.css)

   STRUCTURE:
     .riwayat-perubahan[data-jenis][data-ke][data-version]
       └── .versi-berlaku   — current/active content
       └── .versi-lama      — original content (hidden by default,
                               revealed by pill click for premium users)

   DATA ATTRIBUTES:
     data-jenis   : "diubah" | "disisipkan" | "dihapus"
     data-ke      : "1"–"5"  (amendment round — drives color for diubah/disisipkan)
     data-version : "UU No. 6/2023" (shown in pill label)

   NOTE: .judul-perubahan also uses .riwayat-perubahan for color
   but overrides the border shape and has no pill.
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */
.riwayat-perubahan {
    position: relative;
    border: 1px solid;
    border-left-width: 3px;
    padding: 5px 10px 30px 8px;
    /*padding-bottom: 30px;*/
    border-radius: 9px;
    display: block;
    overflow: visible;
    line-height: 1.6;
}

.riwayat-perubahan:has(aside.penjelasan) {
    border-radius: 0 9px 9px 0;
}

/* ============================================================
   DIUBAH / DISISIPKAN — Green progression by data-ke
   ============================================================ */
.riwayat-perubahan[data-ke="1"] {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.riwayat-perubahan[data-ke="2"] {
    background-color: #dcfce7;
    border-color: #86efac;
    color: #14532d;
}

.riwayat-perubahan[data-ke="3"] {
    background-color: #bbf7d0;
    border-color: #4ade80;
    color: #064e3b;
}

.riwayat-perubahan[data-ke="4"] {
    background-color: #86efac;
    border-color: #22c55e;
    color: #052e16;
}

.riwayat-perubahan[data-ke="5"] {
    background-color: #4ade80;
    border-color: #15803d;
    color: #052e16;
    box-shadow: 0 2px 8px rgba(21, 128, 61, 0.15);
}

/* mengatur margin atas kalau di dalam perubahan */
.riwayat-perubahan h2,
.riwayat-perubahan h3,
.riwayat-perubahan h4,
.riwayat-perubahan h5,
.riwayat-perubahan h6 {
    margin-top: 0;
}

/* ============================================================
   DIHAPUS — Single red, no progression.
   Placed after data-ke rules so it overrides them even if
   VBA also writes a data-ke attribute on deletion blocks.
   ============================================================ */
.riwayat-perubahan[data-jenis="dihapus"] {
    background-color: #fff5f5;
    border-color: #fecaca;
    color: #7f1d1d;
}

.riwayat-perubahan[data-jenis="dihapus"] .teks-dihapus {
    font-style: italic;
    opacity: 0.7;
}

.riwayat-perubahan:has(.perubahan-pill) {
    padding-bottom: 5px; 
}

/* jaga jarak dengan pasal yang mengikuti */
.riwayat-perubahan + article.blok-pasal {
    margin-top: 1rem;
}

/* jaga jarak kalau dua perubahan saling berdekatan */
.riwayat-perubahan + article.blok-pasal,
.riwayat-perubahan + .riwayat-perubahan,
article.blok-pasal + .riwayat-perubahan {
    margin-top: 1rem;
}

/* ============================================
/*  perubahan penjelasan 
/* ==========================================*/
.riwayat-perubahan[data-jenis="diubah"]:has(aside.penjelasan),
.riwayat-perubahan[data-jenis="dihapus"]:has(aside.penjelasan),
.riwayat-perubahan[data-jenis="disisipkan"]:has(aside.penjelasan) {
    background-color: #fff7ed;
    border-color: #fed7aa;
    border-left-color: #f97316;
    color: #431407;
    padding: 0;
    overflow: hidden;
}

.riwayat-perubahan:has(aside.penjelasan) aside.penjelasan {
    margin: 0;
    border: none;
    border-radius: 0;
    /*border-bottom: 1px solid #fed7aa;*/
}

/* Restore padding for the article and headings inside dihapus/diubah blocks
   that contain a penjelasan. The wrapper has padding: 0 in this variant
   so the article (whether direct child or inside .versi-berlaku) needs
   its own padding. Descendant selector handles both cases. */
.riwayat-perubahan[data-jenis="dihapus"]:has(aside.penjelasan) article,
.riwayat-perubahan[data-jenis="diubah"]:has(aside.penjelasan) article {
    padding: 10px;
}

.riwayat-perubahan[data-jenis="dihapus"]:has(aside.penjelasan) h2,
.riwayat-perubahan[data-jenis="dihapus"]:has(aside.penjelasan) h3,
.riwayat-perubahan[data-jenis="dihapus"]:has(aside.penjelasan) h4,
.riwayat-perubahan[data-jenis="dihapus"]:has(aside.penjelasan) h5 {
    padding: 10px 10px 0;
}

.riwayat-perubahan:has(aside.penjelasan) .perubahan-pill {
    margin: 6px 10px;
}

.riwayat-perubahan:has(aside.penjelasan) .perubahan-pill.is-open {
    margin: 6px auto 0 auto;
    border-radius: 8;
    width: 98%;
}

/* =========================================================
   Mengatur tampilan ayat kalau ada perubahan
   ========================================================*/
.ayat > .riwayat-perubahan {
    flex: 1;
}

.ayat:has(> .riwayat-perubahan) > .nomor-ayat {
    padding-top: 5px;
}

/* ============================================================
   JUDUL PERUBAHAN
   Always visible, no pill, no data-version badge.
   Overrides the left-only border from the base rule.
   ============================================================ */
.judul-perubahan {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.8;
    font-size: 1.8rem;
}

.judul-perubahan p {
    margin-top: 5px;
    margin-bottom: 5px;
}

.judul-kecil {
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    opacity: 0.75;
    margin-top: 0;
}

.judul-perubahan::after {
    display: none;
}

/* data-jenis untuk elemen yang dihapus */
[data-jenis="dihapus"] article h6,
[data-jenis="dihapus"] h2,
[data-jenis="dihapus"] h3,
[data-jenis="dihapus"] h4,
[data-jenis="dihapus"] h5 {
    color: #7f1d1d;
    border-bottom-color: #fecaca;
}

[data-jenis="dihapus"] article h6 .teks-dihapus {
    font-style: italic;
    font-weight: 400;
    font-size: 0.9em;
    margin-left: 6px;
}

/* ============================================================
   VERSI LAMA
   Hidden by default. Revealed when premium user clicks pill.
   ============================================================ */
.versi-lama {
    display: none;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    opacity: 0.8;
}

.versi-lama.is-visible {
    display: block;
    margin-top: 0;
}


/* ============================================================
   PILL BUTTON — injected by perubahan.js
   ============================================================ */
.perubahan-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: sans-serif;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, 0.5);
    color: inherit;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, background 0.2s ease;
    user-select: none;
}

.perubahan-pill:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.85);
}

.perubahan-pill.is-open {
    display: flex;              /* full width instead of inline-flex */
    width: 100%;
    box-sizing: border-box;
    opacity: 1;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;         /* flatten — no longer a pill shape */
    border-top: 1px solid currentColor;  /* the separator line */
    margin-top: 0.75rem;
    padding-top: 8px;
}

.pill-icon {
    font-style: normal;
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.65rem;
}

.perubahan-pill.is-open .pill-icon {
    transform: rotate(90deg);
}

/* Free user — locked pill */
.perubahan-pill.is-locked {
    opacity: 0.8;
}

/* Informational badge for disisipkan — no click */
.perubahan-badge {
    display: inline-block;
    margin-top: 0;
    padding: 3px 5px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: sans-serif;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, 0.4);
    color: inherit;
    opacity: 0.7;
    letter-spacing: 0.04em;
}

.riwayat-perubahan > .perubahan-badge {
    position: absolute;
    bottom: 5px;   /* Small gap from bottom border */
    right: 10px;    /* Small gap from right border */
}


/* ============================================================
   NESTED AMENDMENTS
   ============================================================ */
.riwayat-perubahan .riwayat-perubahan {
    margin: 1rem 0 1rem 1rem;
    border-left-width: 3px;
    padding: 10px 15px;
    font-size: 0.95em;
}

.riwayat-perubahan article {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

/* ============================================================
   PEMBUKAAN GRID CONTEXT
   full-row-perubahan spans both columns of the pembukaan grid
   and applies the amendment color via data-ke.
   ============================================================ */
.full-row-perubahan {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    position: relative;
    border-left-width: 4px;
    border-left-style: solid;
    padding: 10px;
    margin: 10px 0;
}

.full-row-perubahan .perubahan-badge {
    position: static;   /* Back to normal flow */
    grid-column: 2;     /* Keep it in the text column */
    justify-self: end;  /* Push to the right */
    margin-top: 0;   /* Add space above so it doesn't touch the text */
}

.full-row-perubahan .label { grid-column: 1; }
.full-row-perubahan .content { grid-column: 2; }


/* ============================================================
   MOBILE  (≤ 600px)
   ============================================================ */
@media screen and (max-width: 600px) {

    .riwayat-perubahan {
        border-left-width: 4px;
        padding: 5px;
        padding-top: 5px;
        margin: 1rem 0;
    }

    .judul-perubahan {
        max-width: 100%;
        padding: 15px;
    }

    .pembukaan-grid .full-row-perubahan {
        display: none;
    }

    .pembukaan-grid .label.is-open ~ .full-row-perubahan {
        display: grid;
        grid-template-columns: 1fr;
    }

    .pembukaan-grid .label.is-open ~ .full-row-perubahan .item-content {
        display: block;
    }

     .pembukaan-grid .label.is-open ~ .full-row-perubahan .label {
        display: none;
    }

    .full-row-perubahan .perubahan-badge {
        grid-column: 1;
    }

    .full-row-perubahan .label::after {
        display: none;
    }

    .ayat:has(> .riwayat-perubahan) > .nomor-ayat {
    padding-top: 22px;
}
}