/* =============================================================
   kbli.css  —  KBLI 2025 page-specific styles
   Requires: global.css, headings.css, tooltip.css, daftar-isi.css
   Add one line to <head>:
       <link rel="stylesheet" href="../_css/kbli.css">
   ============================================================= */


/* ----------------------------------------------------------------
   COLOUR TOKENS
   ---------------------------------------------------------------- */
:root {
    --kbli-kategori-color   : #0f172a;   /* h2 — darkest navy         */
    --kbli-gol-pokok-color  : #1e3a8a;   /* h3 — deep blue            */
    --kbli-golongan-color   : #1d4ed8;   /* h4 — rich blue            */
    --kbli-subgol-color     : #2563eb;   /* h5 — medium blue          */
    --kbli-kelompok-color   : #3b82f6;   /* h6 — lighter blue         */

    --kbli-kategori-bg      : #e0e7ff;   /* h2 — indigo-100           */
    --kbli-gol-pokok-bg     : #dbeafe;   /* h3 — blue-100             */
    --kbli-golongan-bg      : #f1f5f9;   /* h4 — slate-100, neutral   */
    --kbli-subgol-bg        : #f8fafc;   /* h5 — slate-50, barely-there */

    --kbli-border-strong    : #1e3a8a;
    --kbli-border-mid       : #3b82f6;
    --kbli-border-soft      : #93c5fd;
    --kbli-border-whisper   : #bfdbfe;

    --kbli-text             : #1a1a1a;
    --kbli-text-muted       : #475569;
}


/* ----------------------------------------------------------------
   H2  —  KATEGORI  (single letter, e.g. "A - PERTANIAN …")
   Wide banner treatment — anchors a whole category section
   ---------------------------------------------------------------- */
.batang-tubuh h2 {
    font-size         : 1.55rem;
    color             : var(--kbli-kategori-color);
    text-align        : left;
    text-transform    : uppercase;
    letter-spacing    : 0.04em;
    font-weight       : 800;

    background-color  : var(--kbli-kategori-bg);
    border-left       : 6px solid var(--kbli-border-strong);
    border-radius     : 0 8px 8px 0;

    padding           : 0.9rem 1.25rem;
    margin-top        : 3rem;
    margin-bottom     : 0.75rem;
}


/* ----------------------------------------------------------------
   H3  —  GOLONGAN POKOK  (2-digit, e.g. "01 - PERTANIAN TANAMAN …")
   ---------------------------------------------------------------- */
.batang-tubuh h3 {
    font-size         : 1.3rem;
    color             : var(--kbli-gol-pokok-color);
    font-weight       : 700;

    background-color  : var(--kbli-gol-pokok-bg);
    border-left       : 5px solid var(--kbli-border-strong);
    border-radius     : 0 6px 6px 0;

    padding           : 0.65rem 1rem;
    margin-top        : 2.25rem;
    margin-bottom     : 0.5rem;
}


/* ----------------------------------------------------------------
   H4  —  GOLONGAN  (3-digit, e.g. "011 - PERTANIAN TANAMAN SEMUSIM")
   ---------------------------------------------------------------- */
.batang-tubuh h4 {
    font-size         : 1.15rem;
    color             : var(--kbli-golongan-color);
    font-weight       : 700;

    border-left       : 4px solid var(--kbli-border-mid);
    border-radius     : 0 4px 4px 0;
    padding           : 0.45rem 0.9rem;
    margin-top        : 1.75rem;
    margin-bottom     : 0.4rem;
    background-color  : var(--kbli-golongan-bg);
}


/* ----------------------------------------------------------------
   H5  —  SUBGOLONGAN  (4-digit, e.g. "0111 - PERTANIAN SEREALIA …")
   ---------------------------------------------------------------- */
.batang-tubuh h5 {
    font-size         : 1.05rem;
    color             : var(--kbli-subgol-color);
    font-weight       : 700;

    border-left       : 3px solid var(--kbli-border-soft);
    border-radius     : 0 4px 4px 0;
    padding           : 0.35rem 0.8rem;
    margin-top        : 1.5rem;
    margin-bottom     : 0.35rem;
    background-color  : var(--kbli-subgol-bg);
}


/* ----------------------------------------------------------------
   H6  —  KELOMPOK  (5-digit, e.g. "01111 - PERTANIAN JAGUNG")
   Leaf node — boxed card to signal "this is the base unit"
   ---------------------------------------------------------------- */
.batang-tubuh h6 {
    font-size         : 1rem;
    color             : var(--kbli-kelompok-color);
    font-weight       : 600;

    border            : 1px solid var(--kbli-border-whisper);
    border-left       : 3px solid var(--kbli-border-whisper);
    border-radius     : 0 4px 4px 0;
    background-color  : #f8fbff;

    padding           : 0.3rem 0.75rem;
    margin-top        : 1.25rem;
    margin-bottom     : 0.25rem;
}


/* ----------------------------------------------------------------
   PARAGRAPHS
   ---------------------------------------------------------------- */
.batang-tubuh p {
    margin-top        : 0;
    margin-bottom     : 0.55rem;
    padding-left      : 0.75rem;
    color             : var(--kbli-text);
    line-height       : 1.75;
}

/* When a <p> immediately precedes a <ul>,
   pull them closer — the <p> is the list's intro sentence */
.batang-tubuh p + ul {
    margin-top        : -0.25rem;
}

/* After a list, give the next paragraph a bit of breathing room */
.batang-tubuh ul + p {
    margin-top        : 0.5rem;
}


/* ----------------------------------------------------------------
   UNORDERED LISTS  (list-style-type: '-' is set inline by the macro)
   ---------------------------------------------------------------- */
.batang-tubuh ul {
    padding-left      : 2.25rem;
    margin-top        : 0.2rem;
    margin-bottom     : 0.75rem;
}

.batang-tubuh ul li {
    margin-bottom     : 0.35rem;
    line-height       : 1.7;
    padding-left      : 0.4rem;
    color             : var(--kbli-text);
}

.batang-tubuh ul li:last-child {
    margin-bottom     : 0;
}


/* ----------------------------------------------------------------
   LINKS INSIDE CONTENT  (tooltip triggers inherit from tooltip.css)
   Make them slightly more visible in this denser document
   ---------------------------------------------------------------- */
.batang-tubuh a.tooltip-trigger[data-type="ref"] {
    color             : var(--kbli-subgol-color);
    border-bottom-color: var(--kbli-subgol-color);
    font-weight       : 500;
}


/* ----------------------------------------------------------------
   TOOLTIP  —  better sizing and readability
   ---------------------------------------------------------------- */
#live-tooltip {
    font-size         : 0.85rem;
    line-height       : 1.55;
    max-width         : 420px;
    padding           : 10px 14px;
    border-radius     : 8px;
    box-shadow        : 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Override the .batang-tubuh p left-padding inside tooltips */
#live-tooltip p {
    padding-left      : 0;
    margin-bottom     : 0.35rem;
    line-height       : 1.55;
}

#live-tooltip p:last-child {
    margin-bottom     : 0;
}

/* Tighten list inside tooltip if it ever appears */
#live-tooltip ul {
    padding-left      : 1.25rem;
    margin            : 0.25rem 0 0 0;
}

#live-tooltip li {
    padding-left      : 0;
    margin-bottom     : 0.25rem;
}

/* Reset heading styles that bleed into tooltips */
    #live-tooltip h2,
    #live-tooltip h3,
    #live-tooltip h4,
    #live-tooltip h5,
    #live-tooltip h6 {
        font-size     : 0.82rem;
        font-weight   : 600;
        color         : inherit;
        background    : none;
        border        : none;
        border-radius : 0;
        padding       : 0;
        margin        : 0 0 0.3rem 0;
        letter-spacing: normal;
        text-transform: none;
        cursor        : default;
    }


/* ----------------------------------------------------------------
   SCROLL MARGIN  —  headings hidden under sticky header when linked
   ---------------------------------------------------------------- */
.batang-tubuh h2,
.batang-tubuh h3,
.batang-tubuh h4,
.batang-tubuh h5,
.batang-tubuh h6 {
    scroll-margin-top : calc(var(--header-height) + 24px);
}


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

    .batang-tubuh h2 {
        font-size     : 1.2rem;
        padding       : 0.7rem 0.9rem;
        margin-top    : 2rem;
    }

    .batang-tubuh h3 {
        font-size     : 1.1rem;
        padding       : 0.55rem 0.8rem;
    }

    .batang-tubuh h4 {
        font-size     : 1.05rem;
    }

    .batang-tubuh h5 {
        font-size     : 1rem;
    }

    .batang-tubuh h6 {
        font-size     : 0.95rem;
    }

    .batang-tubuh p {
        padding-left  : 0.25rem;
    }

    .batang-tubuh ul {
        padding-left  : 1.5rem;
    }

    /* ACCORDION — mobile only */
    .batang-tubuh h2,
    .batang-tubuh h3,
    .batang-tubuh h4,
    .batang-tubuh h5,
    .batang-tubuh h6 {
        cursor        : pointer;
        user-select   : none;
    }

    .batang-tubuh h2:active,
    .batang-tubuh h3:active,
    .batang-tubuh h4:active,
    .batang-tubuh h5:active,
    .batang-tubuh h6:active {
        filter        : brightness(0.93);
    }

    .kbli-chevron {
        display       : inline-block;
        margin-right  : 0.4rem;
        font-size     : 0.75em;
        opacity       : 0.65;
        vertical-align: middle;
        font-style    : normal;
    }

    
    #live-tooltip .kbli-chevron {
        display       : none;
    }

    #live-tooltip {
        font-size     : 0.8rem;
        max-width     : calc(100vw - 32px);
        padding       : 8px 10px;
    }
}