/*
Theme Name: GridPlay
Theme URI: http://eco-home.local/
Author: Hakeem
Author URI: http://eco-home.local/
Description: Lightweight troubleshooting micro-niche theme for GridPlay.
Version: 0.1
Text Domain: gridplay
*/
/* --------
   ARTICLE TYPOGRAPHY TUNING
   -------- */

.prose {
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Paragraf lebih lega */
.prose p {
    margin-bottom: 0.9rem;
}

/* Heading level 2 – section utama */
.prose h2 {
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #e5e7eb; /* sedikit lebih terang */
}

/* Heading level 3 – sub-bagian */
.prose h3 {
    margin-top: 1.4rem;
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #cbd5f5;
}

/* Kalau ada list sebelum heading, jangan terlalu nempel */
.prose ul + h2,
.prose ol + h2,
.prose blockquote + h2 {
    margin-top: 2rem;
}

.prose ul + h3,
.prose ol + h3,
.prose blockquote + h3 {
    margin-top: 1.6rem;
}

/* List sedikit rapih */
.prose ul,
.prose ol {
    margin-bottom: 0.9rem;
}

/* Desktop: sedikit lebih besar */
@media (min-width: 768px) {
    .prose {
        font-size: 1rem;
    }

    .prose h2 {
        font-size: 1.35rem;
    }

    .prose h3 {
        font-size: 1.1rem;
    }
}

/* Highlight box for manual related issues inside content */
.gp-highlight-related {
    position: relative;
    border-radius: 0.9rem;
    border: 1px solid rgba(52, 211, 153, 0.4); /* emerald-400/40 */
    background: rgba(15, 23, 42, 0.96); /* slate-900/96 */
    padding: 1rem 1.1rem 1rem 1.2rem;
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
    font-size: 0.8rem;
}

/* Accent bar di sisi kiri */
.gp-highlight-related::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(to bottom, #22c55e, #a855f7);
}

@media (min-width: 768px) {
    .gp-highlight-related {
        font-size: 0.85rem;
    }
}

.gp-highlight-related-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: #e5e7eb; /* lebih terang untuk kontras */
}

.gp-highlight-related-header span.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.1); /* emerald soft */
    border: 1px solid rgba(52, 211, 153, 0.7);
    font-size: 0.7rem;
    color: #bbf7d0;
}

.gp-highlight-related ul {
    list-style: none;
    padding-left: 0;
    margin: 0.2rem 0 0;
}

.gp-highlight-related li + li {
    margin-top: 0.25rem;
}

.gp-highlight-related a {
    color: #bfdbfe; /* biru muda */
    text-decoration: none;
}

.gp-highlight-related a:hover {
    color: #6ee7b7; /* emerald-300 */
}

/* Pastikan list di dalam artikel tampil normal */
.prose ul,
.prose ol {
    margin-bottom: 0.9rem;
    padding-left: 1.25rem;       /* jarak masuk dari kiri */
    list-style-position: outside;
}

/* Bullet list */
.prose ul {
    list-style-type: disc;
}

/* Numbered list */
.prose ol {
    list-style-type: decimal;
}

/* Jarak antar item list */
.prose li + li {
    margin-top: 0.15rem;
}