/* **** H1 simulatie in Joaktree **** */
div#jt-content div.jt-h1 {
    font-family: 'Castellar', 'Engraved', 'Times New Roman', serif;
    font-size: 2em !important;
    font-weight: bold !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

div#jt-content div.jt-h1 a {
    text-decoration: none;
}

/* **** Tabbladen in Joaktree **** */
/* Container voor de tabs */
#jt-tabbar {
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
    border-bottom: 2px solid #E6C655 !important;
    margin-bottom: 5px !important;
    padding: 0 5px !important;
    background: transparent !important;
}

/* Verberg de standaard vertikale scheidingsstreepjes */
#jt-tabbar .jt-tabline {
    display: none !important;
}

/* Algemene stijl: afgeronde bovenhoeken en kleiner lettertype */
#jt-tabbar a.jt-tab-active,
#jt-tabbar a.jt-tab-inactive {
    display: inline-block !important;
    padding: 6px 16px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}

/* Niet-actieve tabs */
#jt-tabbar a.jt-tab-inactive {
    background-color: var(--cassiopeia-color-hover-light, #f4f5f7) !important;
    color: #454C43 !important;
    border: 1px solid #ccc !important;
    border-bottom: none !important;
}

/* Hover-effect: achtergrond blijft gelijk, alleen de tekstkleur verandert naar #E6C655 */
#jt-tabbar a.jt-tab-inactive:hover {
    background-color: var(--cassiopeia-color-hover-light, #f4f5f7) !important;
    color: #E6C655 !important;
}

/* Actieve tab (#E6C655 met #454C43 tekst) */
#jt-tabbar a.jt-tab-active {
    background-color: #E6C655 !important;
    color: #454C43 !important;
    border: 1px solid #E6C655 !important;
    border-bottom: 2px solid #E6C655 !important;
    margin-bottom: -2px !important;
}

/* **** Joaktree Tab-inhoud Fix (Details / Voorouders / Nakomelingen) **** */

/* Verberg standaard de niet-actieve tab-secties */
#jt-content .jt-hide,
#jt-tabbar-content>div:not(.jt-showr),
div[id^="jt-tab"]:not(.jt-showr) {
    display: none !important;
}

/* Toon uitsluitend het actief gekozen tabblad */
#jt-content .jt-showr {
    display: block !important;
}

/* Alleen de tekstblokken binnen de persoonsinformatie laten zakken */
.jt-person-info>div:first-child {
    padding-top: 30px !important;
}

/* 1. Ruimte onder de kopteksten (Ouders, Echtgenote, Kinderen) naar de eerste naam */
.jt-left-col-label.jt-h3 {
    display: inline-block !important;
    margin-bottom: 12px !important;
}

/* 2. Duidelijke stippellijn boven de Echtgenote (gelijk aan Ouders en Kinderen) */
.jt-clearfix:has(> .jt-left-col-label.jt-h3) {
    border-top: 1px dashed #a6a6a6 !important;
    padding-top: 10px !important;
    margin-top: 15px !important;
}

/* **** Joaktree Index Overzicht Layout Fixes **** */

/* Zorg dat de tabel de ruimte flexibel en netjes gebruikt */
#jt-content #jt-accordion table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

/* Kolommen verticaal uitlijnen en overbodige padding verwijderen */
#jt-content #jt-accordion th.jt-content-th {
    vertical-align: middle !important;
    padding: 8px 0 !important;
}

/* Centraliseer de gehele kopbalk (Locations + Indexen) */
#jt-content .jt-h3-th {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

#jt-content .jt-h3-th .jt-label {
    float: none !important;
    margin-right: 12px !important;
    padding: 0 !important;
    font-weight: bold !important;
}

/* 'Locations' label met kleine tussenruimte */
#jt-content .jt-index-left {
    float: none !important;
    display: inline-block !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    margin-right: 25px !important;
}

/* Container van de indexen netjes gecentreerd op 1 rij */
#jt-content .jt-index-right {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    margin-left: 0 !important;
}

/* Letterreeksen (-A, B-D, E-H, etc.) strak op 1 lijn houden */
#jt-content span.jt-content-accordion {
    display: inline-block !important;
    margin-right: 12px !important;
    float: none !important;
    cursor: pointer !important;
    font-weight: bold !important;
    white-space: nowrap !important;
}

/* **** Universele Browser Fix voor Joaktree Index Accordion **** */

/* 1. Verberg alle AJAX-blokken die (nog) niet actief zijn of verborgen moeten zijn */
#jt-accordion .content .jt-ajax,
#jt-accordion .content .jt-hide {
    display: none !important;
}

/* 2. Toon uitsluitend het blok dat actief is gemaakt (jt-showr) */
#jt-accordion .content .jt-showr {
    display: block !important;
}

/* 3. Voorkom dat niet-actieve containers witruimte of hoogte innemen */
#jt-accordion div.content {
    display: block;
    margin: 0;
    padding: 0;
}

/* **** Joaktree Pop-ups & Standaard Modals **** */

/* Verberg de Bootstrap Modal (Wijzigingsgeschiedenis) standaard als hij niet actief is */
#jt-content .modal:not(.show),
div[id*="modal"]:not(.show) {
    display: none !important;
}

/* Verberg losse AJAX-laadteksten onderaan de persoonskaart */
#jt-content .jt-ajax-loader,
#jt-content .jt-loading {
    display: none !important;
}

/* Zet de voetregel (Laatst bijgewerkt / Joaktree status) netjes op 1 lijn */
#jt-content .jt-update,
#jt-content .jt-stamp {
    display: inline-block !important;
    margin-top: 10px !important;
}

/* **** Joomla Pagination Fix **** */

/* Pagination container centreren */
.pagination__wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 15px !important;
}

/* Paginering knoppenrij horizontaal uitlijnen */
ul.pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 10px 0 !important;
    gap: 3px !important;
}

/* Elk los lijst-item horizontaal houden */
ul.pagination li.page-item {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Vormgeving van de blokjes/knoppen */
ul.pagination li.page-item .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    color: #454C43 !important;
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Hover-effect op de knoppen */
ul.pagination li.page-item a.page-link:hover {
    background-color: #f4f5f7 !important;
    border-color: #E6C655 !important;
    color: #454C43 !important;
}

/* Actieve pagina (het gekozen paginanummer) */
ul.pagination li.page-item.active .page-link {
    background-color: #E6C655 !important;
    border-color: #E6C655 !important;
    color: #454C43 !important;
    font-weight: bold !important;
}

/* Inactieve / uitgeschakelde knoppen */
ul.pagination li.page-item.disabled .page-link {
    color: #aaaaaa !important;
    background-color: #f9f9f9 !important;
    border-color: #e0e0e0 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Pijltjes-iconen fallback indien Joomla font-icons niet in het template geladen zijn */
.icon-angle-left::before {
    content: "‹";
    font-weight: bold;
}

.icon-angle-right::before {
    content: "›";
    font-weight: bold;
}

.icon-angle-double-left::before {
    content: "«";
    font-weight: bold;
}

.icon-angle-double-right::before {
    content: "»";
    font-weight: bold;
}