/*
 Theme Name:   Fluida Child
 Template:     fluida
 Description:  Custom styling for Content Views (panel layout) + choir media layout
 Author:       Hans
 Version:      1.1
*/

/* --------------------------------------------------------------
   1. BASISLAYOUT VOOR CONTENT VIEWS
-------------------------------------------------------------- */

.pt-cv-view {
    font-family: inherit;
    color: #222;
    line-height: 1.6;
    margin: 2rem 0;
}

/* --------------------------------------------------------------
   2. PANEL / ITEM-CONTAINER (COLLAPSIBLE LAYOUT)
-------------------------------------------------------------- */

.pt-cv-content-item.panel {
    border-radius: 12px;
    overflow: hidden; /* voorkomt uitsteken van heading of thumbnail */
    border: 1px solid #ddd;
    margin-bottom: 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease;
}

.pt-cv-content-item.panel:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* --------------------------------------------------------------
   3. PANEL-HEADING (TITELBALK)
-------------------------------------------------------------- */

.pt-cv-content-item .panel-heading {
    background: #f5f7fa;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e2e2;
}

.pt-cv-content-item .panel-heading a {
    font-size: 1.35rem;
    font-weight: 600;
    color: #003366;
    text-decoration: none;
    display: block;
}

.pt-cv-content-item .panel-heading a:hover {
    color: #0055aa;
}

/* --------------------------------------------------------------
   4. PANEL-BODY (INHOUD)
-------------------------------------------------------------- */

.pt-cv-content-item .panel-body {
    padding: 18px;
    background: #fff;
}

/* --------------------------------------------------------------
   5. THUMBNAILS
-------------------------------------------------------------- */

.pt-cv-thumbnail {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    display: block;
}

.pt-cv-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------
   6. TAXONOMIE / CATEGORIE LABEL
-------------------------------------------------------------- */

.pt-cv-taxoterm {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.pt-cv-taxoterm a {
    color: #666;
    text-decoration: none;
    font-weight: 500;
}

.pt-cv-taxoterm a:hover {
    color: #333;
}

/* --------------------------------------------------------------
   7. EXCERPT / INHOUD
-------------------------------------------------------------- */

.pt-cv-content {
    font-size: 1rem;
    color: #333;
    margin-top: 10px;
}

/* --------------------------------------------------------------
   8. LEES-MEER KNOP
-------------------------------------------------------------- */

.pt-cv-readmore {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 14px;
    background: #0066cc;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s ease;
}

.pt-cv-readmore:hover {
    background: #004c99;
}

/* --------------------------------------------------------------
   9. MUZIEK / PDF SPECIFIEKE STYLING
-------------------------------------------------------------- */

.pt-cv-content a[href$=".mp3"] {
    display: inline-block;
    padding: 6px 10px;
    background: #444;
    color: #fff !important;
    border-radius: 4px;
    margin-top: 8px;
}

.pt-cv-content a[href$=".pdf"] {
    color: #b30000;
    font-weight: 600;
}

/* --------------------------------------------------------------
   10. RESPONSIVE TWEAKS
-------------------------------------------------------------- */

@media (max-width: 600px) {
    .pt-cv-content-item .panel-heading a {
        font-size: 1.2rem;
    }

    .pt-cv-content-item .panel-body {
        padding: 14px;
    }
}

/* --------------------------------------------------------------
   FLUIDA BOXEN (POSTS / ARTIKELEN) – ZELFDE STIJL ALS CONTENT VIEWS
-------------------------------------------------------------- */

/* Buitenste container van een bericht */
.article-inner {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    margin-bottom: 30px;
    transition: box-shadow 0.2s ease;
}

.article-inner:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Titelbalk */
.article-header {
    background: #f5f7fa;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e2e2;
}

.article-header .entry-title a {
    font-size: 1.35rem;
    font-weight: 600;
    color: #003366;
    text-decoration: none;
}

.article-header .entry-title a:hover {
    color: #0055aa;
}

/* Featured image */
.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px 12px 0 0;
}

/* Inhoud */
.article-content {
    padding: 20px;
    font-size: 1rem;
    color: #333;
}

/* Footer (categorieën, tags, reacties) */
.article-footer {
    padding: 14px 20px;
    background: #fafafa;
    border-top: 1px solid #e2e2e2;
    font-size: 0.9rem;
    color: #666;
}

/*	Om te zorgen dat fluida-berichten niet ongewenst links en rechts naar andere berichten
	kunnen (previous/next post) gaan volgende code 
	*/
nav.post-navigation,
.navigation.post-navigation,
.nav-links,
.previous-post,
.next-post,
.post-nav,
.single .navigation,
.single .post-nav {
    display: none !important;
}


.kks-koorlid-bio {
    background: #f7f7f7;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin-top: 20px;
}

.kks-edit-btn, .kks-save-btn {
    background: #3366cc;
    color: white;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 15px;
}

.kks-edit-btn:hover, .kks-save-btn:hover {
    background: #254a99;
}

.kks-username {
    margin-top: -10px;
    margin-bottom: 10px;
    font-size: 0.95em;
    color: #666;
    font-style: italic;
}

/*
*	een randje om de foto's op de landingspagina
*	te plaatsen in de extra css van de foto
*/
.mijn-randje {
  border: 1px solid #000;
  border-radius: 10px;
}

.kadence-testimonial-item a {
    color: var(--color-primary) !important;
}
.kadence-testimonial-item a:hover {
    color: var(--color-secondary) !important;
}

/* Container rond de PDF.js iframe wit maken */
#pdfjs-viewer-skip {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#pdfjs-viewer-skip iframe {
    display: block;
    background: #ffffff !important;
}



.tablepress thead td {
	font-family: Garamond;
	text-align: center;
	font-weight: normal;
	font-style: normal;
}

.tablepress tbody td {
	font-family: Arial;
	font-size: 15px;
	font-weight: normal;
	text-align: left;
	font-style: normal;
	text-decoration: none;
}

.tablepress {
	--head-text-color: #2b411b;
	--head-active-text-color: #2b411b;
	--odd-text-color: #2b411b;
	--even-text-color: #2b411b;
}

.tablepress a {
	display: inline-block;
	padding: 0 3px;
	border: 1px solid #607966;
	background: #607966;
	color: #fff !important;
	border-radius: 4px;
	text-decoration: none !important;
	font-size: small;
	transition: background .2s ease;
}

.tablepress a:hover {
	background: #ba2025;
}

/* Verwijder automatisch chain-icoon bij documentlinks */
.tablepress-id-3 a.icon-link::before {
	content: none !important;
}


/*
Om een achtergrond-afbeelding te voorzien van auteursnaam
De sectie met achtergrondafbeelding is de referentie
Daar in de extra css-klasse de kks-bg-section zetten
*/
.auteur-bg-section {
    position: relative !important;
}
/* 
En in het tekstvak bij extra css-klasse corner-text
Er verschijnt dan over de achtergrond, rechtsonder,
de tekst in het zwart.
*/
.auteur-bg-section .corner-text {
    position: absolute !important;
    bottom: 12px;
    right: 12px;
    color: #000000;      /* zwarte tekst */
    font-size: 14px;
    padding: 0;
    background: none !important;
    border: none !important;
}