/* ============================================================
   PENJELASAN (EXPLANATION) MODULE
   ============================================================ */

/* 1. Main Container */
aside.penjelasan {
    background-color: #fff7ed;
    color: #431407;
    border-left: 3px solid #f97316;
    border-top: 1px solid #fed7aa;
    border-right: 1px solid #fed7aa;
    border-bottom: 1px solid #fed7aa;
    border-radius: 0 9px 9px 0;
    padding: 1rem;   /* ini tidak mempengaruhi penjelasan ringkas cukup jelas karena sudah punya aturan sendiri dan muncul belakangan, jadi dia yang menang */
    margin: 1.5rem 0;
}

/* 1b. Compact container for "cukup jelas" — less vertical padding */
aside.penjelasan.penjelasan-ringkas {
    padding: 0.5rem 1rem;
}

/* 2. Inline "cukup jelas" layout */
.penjelasan-inline {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0;
    line-height: 1.5;
}

.label-penjelasan {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.0rem;
    letter-spacing: 0.05em;
    color: #c2410c;
    white-space: nowrap;  /*supaya nggak bikin baris baru*/
}

.cukup-jelas {
    font-weight: 400;
    font-size: 1rem;
    font-style: normal;
    color: #9a3412;
}

/* 3. <details> / <summary> replacing the old <header> */
/* details.penjelasan-details {
    /* No special box styling — inherits from aside.penjelasan */
/*} */

/* Remove native disclosure triangle */
details.penjelasan-details > summary.penjelasan-summary {   /*untuk firefox*/
    list-style: none;
}
details.penjelasan-details > summary.penjelasan-summary::-webkit-details-marker {   /*untuk chrome/Safari*/
    display: none;
}

/* Style summary to look like the old <header> */
summary.penjelasan-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.0rem;
    letter-spacing: 0.05em;
    color: #c2410c;
    border-bottom: 1px solid #fed7aa;
    padding-bottom: 0.5rem;
    margin-bottom: 1.0rem;
}

/* The expand chevron — hidden on desktop, shown on mobile */
.expand-hint {
    font-size: 0.7rem;
    color: #f97316;
    display: none;  /* Hidden by default; shown via mobile media query */
    transition: transform 0.2s ease;
}

/* 4. Text and Paragraph Logic */
.blok-penjelasan-umum p,
.isi-penjelasan-ayat p,
.isi-penjelasan-huruf p {
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.6;
    text-align: left;
}

.blok-penjelasan-umum > *:last-child,
.isi-penjelasan-ayat > *:last-child,
.isi-penjelasan-huruf > *:last-child,
.isi-penjelasan-ayat .blok-penjelasan-huruf:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 5. Ayat Layout */
.blok-penjelasan-ayat {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-top: 1rem;
    border-top: 1px solid rgba(194, 65, 12, 0.1);
    margin-bottom: 0.75rem;
}

.blok-penjelasan-ayat:first-of-type {
    border-top: none;
    padding-top: 0;
}

.blok-penjelasan-umum + .blok-penjelasan-ayat {
    border-top: 1px solid rgba(194, 65, 12, 0.1);
    padding-top: 1rem;
}

.label-ayat {
    flex: 0 0 75px;
    font-weight: bold;
    color: #431407;
    line-height: 1.5;
}

.isi-penjelasan-ayat {
    flex: 1;
}

/* 6. Huruf Layout */
.blok-penjelasan-huruf {
    display: flex;
    align-items: flex-start;
    gap: 0px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(194, 65, 12, 0.1);
}

.isi-penjelasan-ayat > .blok-penjelasan-huruf:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.label-huruf {
    flex: 0 0 65px;
    font-size: 1rem;
    font-weight: 600;
    color: #9a3412;
    line-height: 1.6;
}

.isi-penjelasan-huruf {
    flex: 1;
}

/* 7. Nested Lists */
.isi-penjelasan-ayat ol,
.isi-penjelasan-huruf ol {
    margin-top: 0.5rem;
    padding-left: 2rem;
    margin-bottom: 0 !important;
}

.isi-penjelasan-ayat ol li,
.isi-penjelasan-huruf ol li {
    margin-bottom: 0.3rem;
    line-height: 1.6;
}

.isi-penjelasan-ayat ol li:last-child {
    margin-bottom: 0;
}

.penjelasan p + ol {
    margin-top: -0.2rem;
}

/* ============================================== */
/* DESKTOP (>600px): Force <details> always open  */
/* ============================================== */
@media screen and (min-width: 601px) {
    /* Disable click interaction — behaves like a plain header */
    summary.penjelasan-summary {
        cursor: default;
        pointer-events: none;
    }
}

/* ============================================================
   NO-AYAT VARIANT
   When a pasal's penjelasan has huruf items but no ayat
   division, collapse the empty left column so the huruf labels
   align flush to the left edge instead of being indented.
   ============================================================ */
.penjelasan-tanpa-ayat .blok-penjelasan-ayat {
    display: block;         /* drop the flex row — no left column needed */
}

.penjelasan-tanpa-ayat .label-ayat {
    display: none;          /* hide the empty 75 px cell entirely */
}


/* ============================================== */
/* FREE USER: Label only, content hidden          */
/* ============================================== */

/* Hide "Cukup jelas." text — label remains visible */
[data-access="free"] .cukup-jelas {
    display: none;
}

/* Make simple label look tappable (cursor + pointer-events) */
[data-access="free"] .penjelasan-inline .label-penjelasan {
    cursor: pointer;
}

/* Override the desktop pointer-events: none rule so the
   summary can receive clicks for the upgrade nudge */
[data-access="free"] summary.penjelasan-summary {
    cursor: pointer;
    pointer-events: auto;
}

/* Keep the bottom border hidden when collapsed —
   same treatment as mobile collapsed state */
[data-access="free"] details.penjelasan-details > summary.penjelasan-summary {
    border-bottom-color: transparent;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* ============================================== */
/* MOBILE (≤600px): Collapsible penjelasan        */
/* ============================================== */
@media screen and (max-width: 600px) {
    aside.penjelasan {
        padding: 0.5rem 1rem;
    }

    .blok-penjelasan-ayat {
        gap: 5px;
    }

    /* Show the expand chevron on mobile */
    .expand-hint {
        display: inline-block;
    }

    /* When expanded, flip the chevron */
    details.penjelasan-details[open] .expand-hint {
        transform: rotate(90deg);
    }

    /* When collapsed, hide the bottom border on summary
       so it doesn't look like a floating separator */
    details.penjelasan-details:not([open]) > summary.penjelasan-summary {
        border-bottom-color: transparent;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}