:root {
            --pernix-orange: #f9a825;
            --pernix-dark: #333333;
            --pernix-text: #333333;
            --pernix-muted: #666666;
            --pernix-red: #c0392b;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: "Open Sans", Arial, sans-serif;
            color: var(--pernix-text);
            background-color: #ffffff;
        }

        /* Header balken */
        .top-bar {
            background-color: var(--pernix-orange);
            color: #ffffff;
            padding: 16px 32px;
            font-size: 1.2rem;
            font-weight: 700;
        }

        .nav-bar {
            background-color: var(--pernix-dark);
            color: #ffffff;
            padding: 12px 32px;
            font-size: 0.95rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-bar span {
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .nav-link {
            color: #ffffff;
            text-decoration: none;
            font-size: 0.95rem;
        }

        .nav-link:hover,
        .nav-link:focus {
            text-decoration: underline;
        }

        .container {
            max-width: 960px;
            margin: 32px auto 40px auto;
            padding: 0 16px;
        }

        h1, h2, h3 {
            font-weight: 700;
            margin-top: 0;
        }

        h1 {
            font-size: 1.4rem;
            margin-bottom: 0.4rem;
        }

        h2 {
            font-size: 1.2rem;
            margin-top: 0.4rem;
            margin-bottom: 0.4rem;
        }

        p {
            line-height: 1.5;
            margin: 0 0 0.7rem 0;
        }

        .intro-block {
            margin-bottom: 1.6rem;
        }

        .small-muted {
            font-size: 0.9rem;
            color: var(--pernix-muted);
        }

        /* Lijsten & bullets */
        .archive-section {
            margin-top: 1.2rem;
        }

        .archive-section ul {
            list-style: none;
            padding-left: 0;
            margin-left: 0;
        }

        /* Inspringing voor sublijsten onder Jubileum PO's */
        .archive-section ul.indent-1 {
            margin-left: 1.5rem;   /* echte inspringing */
        }

        .archive-section ul.indent-2 {
            margin-left: 3rem;
        }

        .archive-section ul.indent-3 {
            margin-left: 4.5rem;
        }


        .archive-section li {
            margin: 0.18rem 0;
        }

        /* Reset witruimte voor lijsten in het archief */
        .archive-section ul {
            margin: 0;
            padding-left: 0;
        }

        .archive-section li {
            margin: 1px 0;      /* WAS vaak ~8px */
            padding: 0;
            line-height: 1.5;   /* compacter maar nog leesbaar */
        }

        /* Sub-lijsten extra compact */
        .archive-section ul.sub-list {
            margin-top: 4px;
            margin-bottom: 4px;
        }

        .archive-section ul.indent-1 { margin-left: 1.2rem; }
        .archive-section ul.indent-2 { margin-left: 2.4rem; }
        .archive-section ul.indent-3 { margin-left: 3.6rem; }

        .archive-section li span.status-red {
            margin-left: 6px;
            font-size: 0.85em;
        }

/* ===== Oranje bullet ALLEEN voor echte PO-regels ===== */

/* Standaard: geen bullet */
.archive-section ul.sub-list > li {
    position: relative;
    padding-left: 0;
}

/* Alleen als de PDF-knop een DIRECT child is */
.archive-section ul.sub-list > li:has(> button[data-type="pdf"]) {
    padding-left: 14px;
}

.archive-section ul.sub-list > li:has(> button[data-type="pdf"])::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0.1em;
    color: #f9a825;
    font-size: 1.2em;
    line-height: 1;
}




        /* Frontpage/intro compacter, zonder de PO-lijsten te raken */
        .intro-block {
            margin-bottom: 0.9rem;   /* was 1.6rem */
        }

        .intro-block h1,
        .intro-block h2 {
            margin-bottom: 0.3rem;
        }

        .intro-block p {
            margin-bottom: 0.5rem;
            line-height: 1.4;
        }


        .indent-1 {
            padding-left: 1.5rem;
        }

        .indent-2 {
            padding-left: 3rem;
        }

        .status-red {
            color: var(--pernix-red);
            font-style: italic;
        }

        /* Pernix Icoon voor pdf-knoppen */
        .pernix-btn-icon {
            height: 14px;          /* gelijk aan hoogte van het driehoekje (12px + marge) */
            width: auto;           /* behoudt de juiste verhoudingen van jouw logo */
            display: inline-block;
            vertical-align: middle;
            margin-left: 6px;      /* zelfde afstand als driehoekjes */
        }

        .triangle-btn[data-type="pdf"] {
        -webkit-appearance: none;
            appearance: none;
            background: none;
            border: none;
            padding: 0;
            margin: 0;
        }


        /* Oranje driehoek “icoon” */
        .triangle-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            margin-left: 6px;
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
        }

/* Specifiek voor PDF-knoppen: geen rand, geen iOS-styling */
.triangle-btn[data-type="pdf"] {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    box-shadow: none;
    border-radius: 0;
    width: auto;
    height: auto;
    cursor: pointer;
}

/* Logo binnen pdf-knop */
.triangle-btn[data-type="pdf"] .pdf-btn-icon {
    height: 14px;      /* speel evt. met 12–16px */
    width: auto;       /* verhoudingen van het logo blijven goed */
    display: inline-block;
    vertical-align: middle;
}

/* Voor de zekerheid: verberg oude driehoek-icon in pdf-knoppen */
.triangle-btn[data-type="pdf"] .triangle-icon {
    display: none;
}



        .triangle-btn:focus-visible {
            outline: 2px solid var(--pernix-orange);
            outline-offset: 2px;
        }

        .triangle-icon {
            width: 0;
            height: 0;
            border-left: 0 solid transparent;
            border-right: 9px solid transparent;
            border-bottom: 12px solid var(--pernix-orange);
            transform-origin: 50% 60%;
            transition: transform 0.2s ease;
        }

        .triangle-btn[data-type="toggle"][aria-expanded="true"] .triangle-icon {
            transform: rotate(90deg);
        }

        .sub-list {
            display: none;
            margin-top: 0.3rem;
        }

        .sub-list.visible {
            display: block;
        }

        /* Teller */
        .counter {
            margin-top: 2.5rem;
            padding-top: 0.8rem;
            border-top: 1px solid #dddddd;
            font-size: 0.85rem;
            color: var(--pernix-muted);
        }

        @media (max-width: 600px) {
            .top-bar, .nav-bar {
                padding: 12px 16px;
            }

            .container {
                margin-top: 24px;
            }
        }

        .oranje-lijn-hr {
            border: none; /* Verwijder standaard browserstijlen */
            border-top: 2px solid orange;
            width: 70%; /* Bijvoorbeeld 70% breed */
            margin-left: 0; /* Linker uitlijning */
        }

        /* Standaard link */
        a {
            color: #f9a825;           /* Pernix-oranje */
            text-decoration: underline;
        }

        /* Bezochte link */
            a:visited {
            color: #f9a825;           /* ook oranje */
        }

        /* Hover (optioneel iets donkerder) */
            a:hover {
            color: #e08e00;
        }

        /* Footer algemene stijl */
        footer {
            margin-top: 40px;
        }

        /* Oranje balk in footer */
        .footer-bar {
            font-size: 0.8rem;          /* kleiner lettertype */
            font-weight: 400;           /* niet vet */
            text-align: center;         /* gecentreerd */
            line-height: 1.4;
        }

        /* Mailadres in footer: altijd wit */
        .footer-mail,
        .footer-mail:visited {
            color: #ffffff;             /* wit */
            font-weight: 400;
            text-decoration: underline;
        }

        /* Hover-effect (optioneel subtiel) */
        .footer-mail:hover {
        text-decoration: none;
        }

        /* Gecentreerde tekst met brede lijnen erboven en eronder */
        /* Compacte gecentreerde tekst met lijnen */
        .coming-soon {
            text-align: center;
            color: #f9a825;
            font-size: 1rem;
            font-weight: 700;
            margin: 16px 0;          /* minder ruimte erboven/eronder */
            line-height: 1.2;
        }

        .coming-soon::before,
        .coming-soon::after {
            content: "";
            display: block;
            width: 420px;
            max-width: 90%;
            height: 1px;
            background-color: #f9a825;
            margin: 6px auto;        /* minder ruimte tussen lijn en tekst */
        }

        /* Alleen frontpage-overzicht compacter maken */
.frontpage-overview p {
    margin-bottom: 0.6rem;
}

.frontpage-overview ul {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.frontpage-overview li {
    margin: 0.15rem 0;   /* minder verticale ruimte */
    line-height: 1.4;
}

/* Coming-soon blok in frontpage nog compacter */
.frontpage-overview .coming-soon {
    margin: 12px 0;
}

.frontpage-overview .coming-soon::before,
.frontpage-overview .coming-soon::after {
    margin: 4px auto;
}

.latest-posts {
    display: inline-block;        /* 👈 niet volle breedte */
    background: #f9a825;          /* oranje */
    color: #000;                  /* zwart */
    padding: 8px 12px;            /* compacter */
    border-radius: 6px;
    margin: 0 0 12px 0;
}

.latest-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.latest-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.latest-list li {
    margin: 2px 0;
    line-height: 1.25;
    font-size: 0.9rem;
}

.latest-date {
    margin-left: 8px;
    color: #c0392b;               /* rood */
    font-style
}

/* Titel direct onder latest-posts compacter */
.latest-posts + h1,
.latest-posts + h2 {
    margin-top: 6px;   /* was groot, nu strak */
}

/* 1) Nooit browser-bullets in je archief */
.archive-section ul,
.archive-section ul.sub-list {
    list-style: none !important;
    margin: 0;
    padding-left: 0;
}


/* 1) Inspringing hoort bij de UL (niveau), niet bij de LI */
.archive-section ul.indent-1 { margin-left: 1.2rem; }
.archive-section ul.indent-2 { margin-left: 2.4rem; }
.archive-section ul.indent-3 { margin-left: 3.6rem; }

/* Basis */
.archive-section ul.sub-list > li {
    position: relative;
    padding-left: 0;
}

/* Bullet voor echte PO-regels:
   - ofwel direct een pdf-knop
   - ofwel handmatig gemarkeerd als .po-item (bijv. volgt later) */
.archive-section ul.sub-list > li:has(> button[data-type="pdf"]),
.archive-section ul.sub-list > li.po-item {
    padding-left: 14px;
}

.archive-section ul.sub-list > li:has(> button[data-type="pdf"])::before,
.archive-section ul.sub-list > li.po-item::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0.1em;
    color: #f9a825;
    font-size: 1.2em;
    line-height: 1;
}