/* SoalSekolah Bank Soal UI */

.bank-soal-ipas,
.bank-soal {
    --ss-blue: #1683e8;
    --ss-blue-dark: #0b67b7;
    --ss-border: #dce3eb;
    --ss-green: #22c55e;
    --ss-green-bg: #dcfce7;
    --ss-green-text: #166534;
    --ss-red: #ef4444;
    --ss-red-bg: #fee2e2;
    --ss-red-text: #991b1b;
    --ss-answer-bg: #eef6ff;
}

.bank-soal-ipas .soal-item,
.bank-soal .soal-item {
    margin: 0 0 32px;
    padding: 0 0 28px;
    border-bottom: 1px solid #e5e7eb;
}

.bank-soal-ipas .nomor-soal,
.bank-soal .nomor-soal {
    display: inline-block;
    padding: 5px 13px;
    margin: 0 0 10px;
    border-radius: 7px;
    background: var(--ss-blue);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.bank-soal-ipas .pertanyaan,
.bank-soal .pertanyaan {
    margin: 5px 0 14px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}

.bank-soal-ipas .pilihan,
.bank-soal .pilihan {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bank-soal-ipas .option,
.bank-soal .option {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #222 !important;
    cursor: pointer !important;
    text-align: left !important;
    font: inherit !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.bank-soal-ipas .option:hover,
.bank-soal .option:hover {
    background: #f5f9ff !important;
    border-color: var(--ss-blue) !important;
}

.bank-soal-ipas .option-letter,
.bank-soal .option-letter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin-right: 12px !important;
    border: 2px solid var(--ss-blue) !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--ss-blue) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.bank-soal-ipas .option.correct,
.bank-soal .option.correct {
    background: var(--ss-green-bg) !important;
    border-color: var(--ss-green) !important;
    color: var(--ss-green-text) !important;
}

.bank-soal-ipas .option.correct .option-letter,
.bank-soal .option.correct .option-letter {
    background: var(--ss-green) !important;
    border-color: var(--ss-green) !important;
    color: #fff !important;
}

.bank-soal-ipas .option.wrong,
.bank-soal .option.wrong {
    background: var(--ss-red-bg) !important;
    border-color: var(--ss-red) !important;
    color: var(--ss-red-text) !important;
}

.bank-soal-ipas .option.wrong .option-letter,
.bank-soal .option.wrong .option-letter {
    background: var(--ss-red) !important;
    border-color: var(--ss-red) !important;
    color: #fff !important;
}

.bank-soal-ipas .hasil,
.bank-soal .hasil {
    display: none;
    margin: 10px 0 0;
    padding: 10px 13px;
    border-radius: 8px;
    font-weight: 700;
}

.bank-soal-ipas .hasil.benar,
.bank-soal .hasil.benar {
    display: block;
    background: var(--ss-green-bg);
    color: var(--ss-green-text);
}

.bank-soal-ipas .hasil.salah,
.bank-soal .hasil.salah {
    display: block;
    background: var(--ss-red-bg);
    color: var(--ss-red-text);
}

.bank-soal-ipas details,
.bank-soal details {
    margin-top: 10px;
    border-radius: 9px;
    background: var(--ss-answer-bg);
    overflow: hidden;
}

.bank-soal-ipas details summary,
.bank-soal details summary {
    padding: 11px 13px;
    cursor: pointer;
    color: var(--ss-blue-dark);
    font-weight: 700;
}

.bank-soal-ipas details summary:hover,
.bank-soal details summary:hover {
    background: #e3efff;
}

.bank-soal-ipas .answer-content,
.bank-soal .answer-content {
    margin: 0 10px 10px;
    padding: 13px;
    border-radius: 8px;
    background: #fff;
}

.bank-soal-ipas .jawaban-benar,
.bank-soal .jawaban-benar {
    margin-top: 0;
    color: #16803c;
    font-weight: 700;
}

.bank-soal-ipas .option:focus-visible,
.bank-soal .option:focus-visible {
    outline: 3px solid rgba(22, 131, 232, .25);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .bank-soal-ipas .pertanyaan,
    .bank-soal .pertanyaan {
        font-size: 16px;
    }

    .bank-soal-ipas .option,
    .bank-soal .option {
        min-height: 50px !important;
        font-size: 14px !important;
    }

    .bank-soal-ipas .option-letter,
    .bank-soal .option-letter {
        flex-basis: 29px !important;
        width: 29px !important;
        height: 29px !important;
        margin-right: 10px !important;
    }
}


/* =========================================================
   SoalSekolah Layout
   Single Post + Soal + Materi: full content, no sidebar
   ========================================================= */

body.single-post .site-content,
body.single-soal .site-content,
body.single-materi .site-content {
    display: block !important;
}

body.single-post .content-area,
body.single-soal .content-area,
body.single-materi .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

body.single-post .widget-area,
body.single-soal .widget-area,
body.single-materi .widget-area {
    display: none !important;
}

body.single-post .site-main,
body.single-soal .site-main,
body.single-materi .site-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.single-post .entry-content,
body.single-soal .entry-content,
body.single-materi .entry-content {
    width: 100% !important;
    max-width: 100% !important;
}

@media (min-width: 769px) {
    body.single-post .content-area,
    body.single-soal .content-area,
    body.single-materi .content-area {
        padding-right: 0 !important;
    }
}


/* =========================================================
   SoalSekolah Typography & Featured Image
   Lebih rapi untuk single Post / Soal / Materi
   ========================================================= */

/* Featured image tidak memenuhi seluruh layar */
body.single-post .post-image,
body.single-post .featured-image,
body.single-post .post-image img,
body.single-post .featured-image img,
body.single-soal .post-image,
body.single-soal .featured-image,
body.single-soal .post-image img,
body.single-soal .featured-image img,
body.single-materi .post-image,
body.single-materi .featured-image,
body.single-materi .post-image img,
body.single-materi .featured-image img {
    max-width: 820px !important;
    width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* GeneratePress featured image */
body.single-post .inside-article > .post-image,
body.single-soal .inside-article > .post-image,
body.single-materi .inside-article > .post-image {
    text-align: center !important;
    margin: 0 auto 28px !important;
}

/* Judul halaman/post lebih proporsional */
body.single-post .entry-title,
body.single-soal .entry-title,
body.single-materi .entry-title {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 36px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

/* Area judul agar tidak terlalu mepet */
body.single-post .page-header,
body.single-soal .page-header,
body.single-materi .page-header {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Jangan membesarkan gambar isi artikel */
body.single-post .entry-content img,
body.single-soal .entry-content img,
body.single-materi .entry-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* Mobile */
@media (max-width: 768px) {
    body.single-post .entry-title,
    body.single-soal .entry-title,
    body.single-materi .entry-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    body.single-post .post-image,
    body.single-post .featured-image,
    body.single-post .post-image img,
    body.single-post .featured-image img,
    body.single-soal .post-image,
    body.single-soal .featured-image,
    body.single-soal .post-image img,
    body.single-soal .featured-image img,
    body.single-materi .post-image,
    body.single-materi .featured-image,
    body.single-materi .post-image img,
    body.single-materi .featured-image img {
        max-width: 100% !important;
    }
}


/* =========================================================
   SoalSekolah Pro Navigation + Breadcrumb + Meta Badges
   ========================================================= */

.ssbsui-top-nav {
    width: 100%;
    margin: 0 0 14px;
    border-bottom: 1px solid #e7edf3;
    background: #fff;
}

.ssbsui-nav-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 10px;
}

.ssbsui-nav-inner a {
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border-radius: 7px;
    color: #334155 !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.ssbsui-nav-inner a:hover {
    background: #eef6ff !important;
    color: #0b67b7 !important;
}

.ssbsui-nav-inner a.is-current {
    background: #1683e8 !important;
    color: #fff !important;
}

.ssbsui-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    max-width: 1000px;
    margin: 0 auto 12px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.ssbsui-breadcrumb a {
    color: #1683e8 !important;
    text-decoration: none !important;
}

.ssbsui-breadcrumb a:hover {
    text-decoration: underline !important;
}

.ssbsui-breadcrumb .current {
    color: #64748b;
    overflow-wrap: anywhere;
}

.ssbsui-meta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-width: 1000px;
    margin: 0 auto 20px;
}

.ssbsui-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #dbe7f2;
    border-radius: 999px;
    background: #f7fbff;
    color: #1769a8;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .ssbsui-nav-inner {
        overflow-x: auto;
        flex-wrap: nowrap;
        max-width: 100%;
        padding: 0 4px 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ssbsui-nav-inner::-webkit-scrollbar {
        display: none;
    }

    .ssbsui-nav-inner a {
        flex: 0 0 auto;
        font-size: 13px;
        padding: 8px 11px;
    }

    .ssbsui-breadcrumb {
        font-size: 12px;
        padding: 0 4px;
    }

    .ssbsui-meta-badges {
        padding: 0 4px;
        margin-bottom: 16px;
    }

    .ssbsui-badge {
        font-size: 12px;
        min-height: 28px;
    }
}


/* =========================================================
   V1.4 - Navigation lives inside GeneratePress header
   ========================================================= */

.ssbsui-header-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 18px;
    padding: 0;
}

.ssbsui-header-menu a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px !important;
    border-radius: 7px;
    background: transparent !important;
    color: inherit !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.ssbsui-header-menu a:hover {
    background: rgba(22, 131, 232, .10) !important;
    color: #1683e8 !important;
}

.ssbsui-header-menu a.is-current {
    background: #1683e8 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .ssbsui-header-menu {
        margin-left: 6px;
        gap: 2px;
        overflow-x: auto;
        max-width: calc(100vw - 20px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ssbsui-header-menu::-webkit-scrollbar {
        display: none;
    }

    .ssbsui-header-menu a {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 6px 10px !important;
        font-size: 13px !important;
    }

    /* The old standalone nav is no longer used. */
    .ssbsui-top-nav {
        display: none !important;
    }
}


/* =========================================================
   V1.5 - Remove custom menu and featured image
   ========================================================= */

/* Custom SoalSekolah header menu is removed. */
.ssbsui-header-menu,
.ssbsui-top-nav {
    display: none !important;
}

/* Hide featured image on single Post / Soal / Materi. */
body.single-post .inside-article > .post-image,
body.single-post .inside-article > .featured-image,
body.single-post .inside-article > figure.post-image,
body.single-soal .inside-article > .post-image,
body.single-soal .inside-article > .featured-image,
body.single-soal .inside-article > figure.post-image,
body.single-materi .inside-article > .post-image,
body.single-materi .inside-article > .featured-image,
body.single-materi .inside-article > figure.post-image {
    display: none !important;
}

body.single-post .post-image,
body.single-post .featured-image,
body.single-soal .post-image,
body.single-soal .featured-image,
body.single-materi .post-image,
body.single-materi .featured-image {
    display: none !important;
}


/* =========================================================
   V1.6 - Crayora-inspired content layout
   Header tetap milik GeneratePress.
   ========================================================= */

/* Soft page background seperti layout Crayora */
body.single-post,
body.single-soal,
body.single-materi {
    background: #f3f5f7 !important;
}

/* Jangan membuat header ikut menjadi card */
body.single-post .site-content,
body.single-soal .site-content,
body.single-materi .site-content {
    background: transparent !important;
    padding-top: 16px !important;
    padding-bottom: 36px !important;
}

/* White content card */
body.single-post .inside-article,
body.single-soal .inside-article,
body.single-materi .inside-article {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 30px !important;
    background: #fff !important;
    border: 1px solid #e8edf2 !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04) !important;
}

/* Breadcrumb */
body.single-post .ssbsui-breadcrumb,
body.single-soal .ssbsui-breadcrumb,
body.single-materi .ssbsui-breadcrumb {
    max-width: none !important;
    margin: 0 0 14px !important;
}

/* Badge row */
body.single-post .ssbsui-meta-badges,
body.single-soal .ssbsui-meta-badges,
body.single-materi .ssbsui-meta-badges {
    max-width: none !important;
    margin: 0 0 18px !important;
}

/* Title */
body.single-post .entry-title,
body.single-soal .entry-title,
body.single-materi .entry-title {
    max-width: none !important;
    margin: 0 0 4px !important;
    font-size: 34px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    letter-spacing: -.4px !important;
}

/* Featured image: shown again, like Crayora */
body.single-post .inside-article > .post-image,
body.single-post .inside-article > .featured-image,
body.single-post .inside-article > figure.post-image,
body.single-soal .inside-article > .post-image,
body.single-soal .inside-article > .featured-image,
body.single-soal .inside-article > figure.post-image,
body.single-materi .inside-article > .post-image,
body.single-materi .inside-article > .featured-image,
body.single-materi .inside-article > figure.post-image {
    display: block !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    text-align: center !important;
}

body.single-post .inside-article > .post-image img,
body.single-post .inside-article > .featured-image img,
body.single-post .inside-article > figure.post-image img,
body.single-soal .inside-article > .post-image img,
body.single-soal .inside-article > .featured-image img,
body.single-soal .inside-article > figure.post-image img,
body.single-materi .inside-article > .post-image img,
body.single-materi .inside-article > .featured-image img,
body.single-materi .inside-article > figure.post-image img {
    display: block !important;
    width: 100% !important;
    max-width: 840px !important;
    height: auto !important;
    margin: 0 auto !important;
}

/* Article typography */
body.single-post .entry-content,
body.single-soal .entry-content,
body.single-materi .entry-content {
    max-width: none !important;
    font-size: 16px;
    line-height: 1.75;
}

body.single-post .entry-content > p:first-child,
body.single-soal .entry-content > p:first-child,
body.single-materi .entry-content > p:first-child {
    margin-top: 0;
}

/* Mobile card */
@media (max-width: 768px) {
    body.single-post .site-content,
    body.single-soal .site-content,
    body.single-materi .site-content {
        padding-top: 8px !important;
        padding-bottom: 20px !important;
    }

    body.single-post .inside-article,
    body.single-soal .inside-article,
    body.single-materi .inside-article {
        max-width: none !important;
        margin: 0 8px !important;
        padding: 18px !important;
        border-radius: 2px !important;
    }

    body.single-post .entry-title,
    body.single-soal .entry-title,
    body.single-materi .entry-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
}

/* Remove the obsolete hide-image rules from V1.5 by overriding them */
body.single-post .post-image,
body.single-post .featured-image,
body.single-soal .post-image,
body.single-soal .featured-image,
body.single-materi .post-image,
body.single-materi .featured-image {
    visibility: visible !important;
}


/* =========================================================
   V1.7 - Clickable colorful metadata badges
   ========================================================= */

body.single-post .ssbsui-meta-badges,
body.single-soal .ssbsui-meta-badges,
body.single-materi .ssbsui-meta-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    max-width: none !important;
    margin: 0 0 22px !important;
}

.ssbsui-meta-badges .ssbsui-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 8px 15px !important;
    border: 0 !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .08) !important;
}

.ssbsui-meta-badges .ssbsui-badge:hover {
    transform: translateY(-1px) !important;
    filter: brightness(.97) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .13) !important;
}

/* Kelas - blue */
.ssbsui-meta-badges .badge-kelas {
    background: #e0f2fe !important;
    color: #075985 !important;
}

/* Mapel - green */
.ssbsui-meta-badges .badge-mapel {
    background: #dcfce7 !important;
    color: #166534 !important;
}

/* Kurikulum - purple */
.ssbsui-meta-badges .badge-kurikulum {
    background: #f3e8ff !important;
    color: #6b21a8 !important;
}

/* Semester - orange */
.ssbsui-meta-badges .badge-semester {
    background: #ffedd5 !important;
    color: #9a3412 !important;
}

/* Content type - pink/red */
.ssbsui-meta-badges .badge-type {
    background: #ffe4e6 !important;
    color: #9f1239 !important;
}

@media (max-width: 768px) {
    body.single-post .ssbsui-meta-badges,
    body.single-soal .ssbsui-meta-badges,
    body.single-materi .ssbsui-meta-badges {
        gap: 8px !important;
        margin-bottom: 18px !important;
    }

    .ssbsui-meta-badges .ssbsui-badge {
        min-height: 36px !important;
        padding: 8px 13px !important;
        font-size: 13px !important;
    }
}


/* =========================================================
   V2.1 - Full width taxonomy/archive pages
   Applies to Mata Pelajaran, Jenjang, Semester and other
   SoalSekolah taxonomy archive pages.
   ========================================================= */

/* Remove GeneratePress sidebar and make archive content full width */
body.taxonomy-mata_pelajaran .site-content,
body.taxonomy-jenjang .site-content,
body.taxonomy-semester .site-content,
body.taxonomy-kategori .site-content,
body.taxonomy-mapel .site-content,
body.archive .site-content {
    display: block !important;
}

body.taxonomy-mata_pelajaran .content-area,
body.taxonomy-jenjang .content-area,
body.taxonomy-semester .content-area,
body.taxonomy-kategori .content-area,
body.taxonomy-mapel .content-area,
body.archive .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding-right: 0 !important;
}

body.taxonomy-mata_pelajaran .widget-area,
body.taxonomy-jenjang .widget-area,
body.taxonomy-semester .widget-area,
body.taxonomy-kategori .widget-area,
body.taxonomy-mapel .widget-area,
body.archive .widget-area {
    display: none !important;
}

body.taxonomy-mata_pelajaran .site-main,
body.taxonomy-jenjang .site-main,
body.taxonomy-semester .site-main,
body.taxonomy-kategori .site-main,
body.taxonomy-mapel .site-main,
body.archive .site-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Keep the archive content centered and readable */
body.taxonomy-mata_pelajaran .site-main,
body.taxonomy-jenjang .site-main,
body.taxonomy-semester .site-main,
body.taxonomy-kategori .site-main,
body.taxonomy-mapel .site-main,
body.archive .site-main {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Archive title card */
body.taxonomy-mata_pelajaran .page-header,
body.taxonomy-jenjang .page-header,
body.taxonomy-semester .page-header,
body.taxonomy-kategori .page-header,
body.taxonomy-mapel .page-header {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Mobile */
@media (max-width: 768px) {
    body.taxonomy-mata_pelajaran .site-main,
    body.taxonomy-jenjang .site-main,
    body.taxonomy-semester .site-main,
    body.taxonomy-kategori .site-main,
    body.taxonomy-mapel .site-main,
    body.archive .site-main {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}