/**
 * @file
 * PGF Accordion Item Styling - Met opvallende typografie en ronde actie-bullet
 */

.pgf-accordion-item {
    background-color: var(--color-white);
    border: 1px solid rgba(68, 33, 0, 0.12);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(68, 33, 0, 0.04);
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

/* Accent-rand en schaduw als het item is opengeklapt */
.pgf-accordion-item[open] {
    border-color: var(--color-accent);
    box-shadow: 0 6px 20px rgba(68, 33, 0, 0.08);
}

/* Klikbare Header / Summary */
.pgf-accordion-item__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-m) var(--spacing-l);
    cursor: pointer;
    user-select: none;
    list-style: none; /* Verberg standaard browser-driehoek */
    background-color: var(--color-white);
    transition: background-color var(--transition-speed) ease;
}

/* Verberg Safari / WebKit standaard driehoekje */
.pgf-accordion-item__trigger::-webkit-details-marker {
    display: none;
}

.pgf-accordion-item__trigger:hover {
    background-color: rgba(68, 33, 0, 0.03);
}

.pgf-accordion-item[open] .pgf-accordion-item__trigger {
    background-color: rgba(68, 33, 0, 0.02);
}

/* VRAAG TYPOGRAFIE: Duidelijk, Vet & Cursief */
.pgf-accordion-item__title {
    flex-grow: 1;
    padding-right: var(--spacing-m);
    font-family: var(--font-heading);
    font-weight: 700;      /* Vet */
    font-style: italic;    /* Cursief */
    font-size: 1.12rem;    /* Iets groter voor betere leesbaarheid */
    line-height: 1.35;
    color: var(--color-primary);
}

.pgf-accordion-item__title .field__label {
    display: none !important;
}

/* DUIDELIJKE RONDE BULLET / ICOON */
.pgf-accordion-item__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(68, 33, 0, 0.06);
    border: 1px solid rgba(68, 33, 0, 0.12);
    flex-shrink: 0;
    transition: transform var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

/* Pijl-icoon (Chevron) binnen het rondje */
.pgf-accordion-item__icon::before {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

/* Bij uitklappen: rondje wordt accentkleur en pijl wijst omhoog */
.pgf-accordion-item[open] .pgf-accordion-item__icon {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.pgf-accordion-item[open] .pgf-accordion-item__icon::before {
    border-color: var(--color-white);
    transform: rotate(-135deg);
    margin-top: 3px;
}

/* ANTWOORD INHOUD */
.pgf-accordion-item__content {
    padding: 0 var(--spacing-l) var(--spacing-l) var(--spacing-l);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--phi);
    color: var(--color-text-main);
    border-top: 1px solid transparent;
}

.pgf-accordion-item[open] .pgf-accordion-item__content {
    border-top: 1px solid rgba(68, 33, 0, 0.08);
    padding-top: var(--spacing-m);
}

.pgf-accordion-item__content p:first-child { margin-top: 0; }
.pgf-accordion-item__content p:last-child { margin-bottom: 0; }