/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Voor Sticky Posts */
.sticky:before {
  content: "Fijne Kerstdagen!";
  color: #FFF;
  background: #dc3545;
  padding: 10px;
  display: inline-block;
  text-align: right;
  float: right;
  font-weight: normal;
  text-transform: capitalize;
}
/* sticky post stop*/

/*
 * CSS voor Verhaal van de Week (Tag: vvdw)
 * Label verschijnt binnen de 'inside-article' als de tag 'tag-vvdw' op de parent staat.
 */
.tag-vvdw .inside-article:before {
  content: "vvdw!";
  color: #FFF;
  background: #dc3545;
  padding: 10px;
  display: inline-block;
  text-align: right;
  float: right;
  font-weight: normal;
  text-transform: capitalize;
}

/* stop vvdw*/

.separate-containers .inside-article, .comments-area, .sidebar .widget, .paging-navigation, .page-header, .site-footer {
    border: 1px solid #cacaca;
}

.entry-title a {
    color: #666666
}

.site-footer {
    background-color: #000000; /* --base-2 */
    color: #b2b2be;      /* --contrast-2 */
}
.site-info {
    background-color: #1a1a1a; /* --base */
    color: #b2b2be;      /* --contrast-2 */
}
.site-info a {
    color: #575760;      /* --contrast-3 */
}

/* Link colors */
.um a.um-link,
.um .um-tip:hover,
.um .um-field-radio.active:not(.um-field-radio-state-disabled) i,
.um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i,
.um .um-member-name a:hover,
.um .um-member-more a:hover,
.um .um-member-less a:hover,
.um .um-members-pagi a:hover,
.um .um-cover-add:hover,
.um .um-profile-subnav a.active,
.um .um-item-meta a,
.um-account-name a:hover,
.um-account-nav a.current,
.um-account-side li a.current span.um-account-icon,
.um-account-side li a.current:hover span.um-account-icon,
.um-dropdown li a:hover,
i.um-active-color,
span.um-active-color
{
    color: #BE1F2E !important;
	/* #C92A39 en #BE1F2E zijn betere SEO kleuren  - #dc3545 was de hoofdkleur!*/
}

/* was #44b0ec*/
.um a.um-link:hover,
.um a.um-link-hvr:hover {
    color: #cacaca !important;
}

/* Button colors */
.um .um-field-group-head,
.picker__box,
.picker__nav--prev:hover,
.picker__nav--next:hover,
.um .um-members-pagi span.current,
.um .um-members-pagi span.current:hover,
.um .um-profile-nav-item.active a,
.um .um-profile-nav-item.active a:hover,
.upload,
.um-modal-header,
.um-modal-btn,
.um-modal-btn.disabled,
.um-modal-btn.disabled:hover,
div.uimob800 .um-account-side li a.current,
div.uimob800 .um-account-side li a.current:hover,
.um .um-button,
.um a.um-button,
.um a.um-button.um-disabled:hover,
.um a.um-button.um-disabled:focus,
.um a.um-button.um-disabled:active,
.um input[type=submit].um-button,
.um input[type=submit].um-button:focus,
.um input[type=submit]:disabled:hover
{
    background: #BE1F2E !important;
}

.um .um-field-group-head:hover,
.picker__footer,
.picker__header,
.picker__day--infocus:hover,
.picker__day--outfocus:hover,
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted,
.picker__list-item:hover,
.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted,
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected,
.um .um-button:hover,
.um a.um-button:hover,
.um input[type=submit].um-button:hover{
    background: #cacaca !important;
}

/* Button alt colors */
.um .um-button.um-alt, 
.um input[type=submit].um-button.um-alt {
    background: #eeeeee !important;
}

.um .um-button.um-alt:hover,
.um input[type=submit].um-button.um-alt:hover {
    background: #e5e5e5 !important;	
}

.um-account-side li a {
	background: #ffffff;
	
}

.um-follow-btn um-button um-alt {
	color: #ffffff;
	background: #e5e5e5;
}
.um-name {
    float: left;
    font-size: 24px;
	color: #BE1F2E;
    font-weight: 700;
    margin-right: 30px;
    line-height:1.7em;
}

.um-name a {
    font-size:28px;
	color: #cacaca !important;
}
=====================
/*
 * .card-footer {
display: none;	
	}
*/
.card-title {
	color: #666666;
	text-decoration: none;
	margin: 0 0 0.5rem 0;

	}

.card-title h3 a:hover{
	color: #666666;
	text-decoration: none;
	margin: 0 0 0.5rem 0;
	}

.uwp-profile-item-summary {

	}

/* Auteurs info onder elk verhaal */
.author_bio_section{
background: none repeat scroll 0 0 #F5F5F5;
padding: 15px;
border: 1px solid #cacaca;
min-height: 200px;
}
 
.author_name{
font-size:16px;
font-weight: bold;
color: #BE1F2E;
}
 
.author_details img {
width: 125px;
height: 125px;
border: 1px solid #cacaca;
/*border-radius: 8px;*/
padding: 5px;
float: left;
margin: 0 10px 10px 0;
}

/* stop auteursbox */

/* custom meta data */
.byline img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

.comments-link,
.posted-on {
	border-left: 1px solid #ddd;
	padding-left: 10px;
	margin-left: 10px;
}
.cat-links {
	border-left: 1px solid #ddd;
	padding-left: 10px;
	margin-left: 10px;	
}
/*
.cat-links:before {
    content: "\f318";
    font-family: dashicons;
	margin: 0 5px 0 0;
}
*/

/* Categorie icoon (SVG in plaats van Dashicons) */
.cat-links:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
    background-color: #757575; /* Kleur van het icoontje in Light Mode */
    /* Dit is een 'tag' icoontje in SVG-vorm */
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLjQ3IDJhMS41IDEuNSAwIDAgMC0xLjA2LjQ0bC05IDlhMS41IDEuNSAwIDAgMCAwIDIuMTJsOC41IDguNWExLjUgMS41IDAgMCAwIDIuMTIgMGw5LTlhMS41IDEuNSAwIDAgMC0xLjA2LTIuNTZIMTguNWEuNS41IDAgMCAxLS41LS41VjMuNWExLjUgMS41IDAgMCAwLTEuNS0xLjV6bTQuNTMgNC41YTEuNSAxLjUgMCAxIDEgMCAzIDEuNSAxLjUgMCAwIDEgMC0zeiIvPjwvc3ZnPg==") no-repeat center;
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLjQ3IDJhMS41IDEuNSAwIDAgMC0xLjA2LjQ0bC05IDlhMS41IDEuNSAwIDAgMCAwIDIuMTJsOC41IDguNWExLjUgMS41IDAgMCAwIDIuMTIgMGw5LTlhMS41IDEuNSAwIDAgMC0xLjA2LTIuNTZIMTguNWEuNS41IDAgMCAxLS41LS41VjMuNWExLjUgMS41IDAgMCAwLTEuNS0xLjV6bTQuNTMgNC41YTEuNSAxLjUgMCAxIDEgMCAzIDEuNSAxLjUgMCAwIDEgMC0zeiIvPjwvc3ZnPg==") no-repeat center;
}

/* Dark Mode kleur aanpassing */
html[data-theme="dark"] .cat-links:before {
    background-color: var(--contrast-2);
}
.author-name::before {
    content: ''; /* Verwijder de oude Dashicon */
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    width: 16px;
    height: 16px;
    background-color: currentColor; /* Neemt de tekstkleur aan */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>') no-repeat center;
}

.story-hits:before {
    content: "\f177";
    font-family: dashicons;
	margin: 0 5px 0 0;
}

.dashicons-chart-bar:before {
    content: "\f185";
    font-family: dashicons;
	margin: 0 5px 0 0;
}

.comments-link:before {
    content: "\f101";
    font-family: dashicons;
	margin: 0 5px 0 0;	
	
}

.dashicons-rss:before {
    content: "\f303";
    font-family: dashicons;
	margin: 0 5px 0 0;	
	font-size: 16px;
    color: #dc3545;
	
}

.dashicons-info-outline:before {
    content: "\f14c";
    font-family: dashicons;
	margin: 0 5px 0 0;	
	
}
.read-time:before {
    content: "\f469";
	color: #BE1F2E !important;
    font-family: dashicons;
	margin: 0 5px 0 0;	
	
}
/* stop custom meta data */

/* dashicons in hoofdmenu start
.main-navigation:before { 
font-family: dashicons;
	content: "\f102"
    font-family: dashicons;
	margin: 0 5px 0 0;
}

.main-navigation li a {
    display:flex;
    align-items: center;
}
.main-navigation li span {
    margin-right: 8px;
}
/* dashicons in hoofdmenu stop */

/* aangeven of een verhaal nieuw is of niet */
.new-article { 
background: #FAFAD2;
padding: 3px;
border: 1px solid #cacaca;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-left:5px;
font-size: small;
font-weight: bold;
}
/* stop aangeven nieuw verhaal */

/* Breadcrumbs start */
#breadcrumbs, 
#breadcrumbs a,
.trending-count {
    color: #222222 !important; /* Bijna zwart voor 100% score */
    text-decoration: none !important;
	margin-bottom: 25px;
}

/*DARK MODE breadcrumbs */
[data-theme="dark"] #breadcrumbs, 
[data-theme="dark"] #breadcrumbs a,
[data-theme="dark"] .trending-count {
    color: #ffffff !important; /* Spierwit voor in het donker */
}

/* Separator */
[data-theme="dark"] #breadcrumbs .separator {
    color: #aaaaaa !important;
}
/* Breadcrumbs stop */

/*tagcloud kleuren en grootte */
.widget_tag_cloud .tagcloud a {
	background-color: #eee;
	border-radius: 3px;
	color: #000;
	display: inline-block;
	font-size: 12px !important;
	margin: 0 5px 5px 0;
	padding: 2px 5px;
	text-decoration: none;
}

.widget_tag_cloud .tagcloud a:hover {
	background-color: #fff;
	color: #c3251d;
}

.contributor {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing:      border-box;
  display: inline-block;
  padding: 48px 10px;
}
.contributor p {
  margin-bottom: 1rem;
}
.contributor-info {
  margin: 0 auto 0 168px;
}
.contributor-avatar {
  border: 1px solid rgba(0, 0, 0, 0.1);
  float: left;
  line-height: 0;
  margin: 0 30px 0 -168px;
  padding: 2px;
}
.contributor-avatar img{
  border-radius: 0;
}
.contributor-summary {
  float: left;
}
.contributor-name{
  font-weight: normal;
  margin: 0 !important;
}
.contributor-posts-link {
  background-color: #24890d;
  border: 0 none;
  border-radius: 0;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  padding: 10px 30px 11px;
  text-transform: uppercase;
  vertical-align: bottom;
}
.contributor-posts-link:hover {
  color: #000;
  text-decoration: none;
}

/* partner overzicht weergave */
.partnerblock {
  overflow: hidden;
  background: #fff;
  padding: 1rem;
  max-width: 100rem;
  margin: 0 0 1rem 0;
  border: 1px solid #cacaca
}
.partnerblock img {
  width: 140px;
  height: 140px;
  float: left;
  margin: 0 2rem 0 0;
}

/* categorieen overzicht weergave */
.catblock {
  overflow: hidden;
  background: #fff;
  padding: 1rem;
  max-width: 100rem;
  margin: 0 0 1rem 0;
  border: 1px solid #cacaca
}
.catblock img {
  width: 50px;
  height: 50px;
  float: left;
  margin: 0 1rem 0 0;
}
.catmaand:before {
    content: "\f101";
    font-family: dashicons;
	margin: 0 5px 0 0;
}
.catjaar:before {
    content: "\f101";
    font-family: dashicons;
	margin: 0 5px 0 0;
}

.catblock h2 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}

.catblock h3{
	color: #666666;
	text-decoration: none;
	margin: 0 0 0.5rem 0;
	}

.catblock h3:hover{
	color: #BE1F2E;
	text-decoration: none;
	margin: 0 0 0.5rem 0;
	}

.catblock > div {
  padding-left: calc(1px + 1rem);
}
/* categorieen overzicht weergave STOP */

/* start banner shop */
.adblock {
  overflow: hidden;
  background: #fff;
  padding: 1rem;
  max-width: 100rem;
  margin: 0 0 1rem 0;
  border: 1px solid #cacaca
}
.adblock img {
  width: 468px;
  height: 60px;
  float: left;
  margin: 0 1rem 0 0;
}
.admaand:before {
    content: "\f101";
    font-family: dashicons;
	margin: 0 5px 0 0;
}
.adjaar:before {
    content: "\f101";
    font-family: dashicons;
	margin: 0 5px 0 0;
}

.adblock h2 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}
.adblock > div {
  padding-left: calc(1px + 1rem);
}
/* stop bannershop */

.catimage img {
  width: 360px;
  height: 360px;
  float: left;
  margin: 0 1rem 0 0;
}

/* start 3 columns op de Top 10 pagina */
 /* stop 3 columns op de Top 10 pagina */

/* categorieen overzicht weergave */
.seksverhalencategorieen {
  overflow: hidden;
  background: #fff;
  padding: 1rem;
  max-width: 100rem;
  margin: 0 0 1rem 0;
  border: 1px solid #cacaca
}
.seksverhalencategorieen img {
  width: 150px;
  height: 150px;
  float: left;
  margin: 0 1rem 0 0;
}

.seksverhalencategorieen h2 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}

.seksverhalencategorieen h3{
	color: #666666;
	text-decoration: none;
	margin: 0 0 0.5rem 0;
	}

.seksverhalencategorieen h3:hover{
	color: #ef565c;
	text-decoration: none;
	margin: 0 0 0.5rem 0;
	}

.seksverhalencategorieen > div {
  padding-left: calc(1px + 1rem);
}
/* categorieen overzicht weergave STOP */

.related-posts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
    max-width: 1000px;
    margin: 60px auto;
}
.related-posts-grid img {
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
}
.related-posts-grid h5 {
    margin: 0;
}
.related-posts-grid h5 a {
    text-decoration: none;
}

/* Over mij velden naast elkaar weergeven start
.um-profile.um-viewing .um-field {
        clear: both;
    }

    .um-profile.um-viewing  .um-field-label {
        border:none;
        padding-bottom: 0;
        display: inline-block;
        float: left;
        margin-right: 100px;
    }

    .um-profile.um-viewing .um-field-label .um-clear {
        display: none;
        clear: none;
    }

    .um-profile.um-viewing .um-field-area {
        display: inline-block;
        float: left;
		margin-left: 10px;
    }
/* Over mij velden naast elkaar weergeven stop */
/* styles.css */
/* Change the "Verified" badge color */
i.um-verified {
	color: #22dd00 !important;
}

/* "Verified" badge kleur per rol 
.um-role-subscriber i.um-verified {
	color: #0000ff !important;
}
.um-role-author i.um-verified {
	color: #dc3545 !important;
}
.um-role-administrator i.um-verified {
	color: #FFC300 !important;
}
/* "Verified" badge kleur per rol */


/* Aangeven reeds bestaande titel start */
.usp-error {
color: #ff0000;
border: 1px solid #cacaca;
font-size: 25px;
font-weight: bold;
text-align: center;
}
/* Aangeven reeds bestaande titel stop */

/* Main Container for 3-Column Post Layout */
.three-column-posts {
    /* Keep existing styles: display, flex-wrap, gap, etc. */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin: 0; /* Keep margin-top/left/right at 0 */
    border: none;
    /* ADD THIS: */
    margin-bottom: 20px; /* Add space below each container */
}

/* Styling for each post column */
.post-column {
    /* --- Sizing --- */
    /* Default (Desktop - 3 columns) */
    /* Let flex-grow handle distribution, basis approx 1/3 minus gap effect */
    flex: 1 1 30%; /* Adjust basis slightly below 33.3% to help ensure 3 columns fit with gap */

    /* --- Internal Flex Layout --- */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the top */

    /* --- Appearance --- */
    box-sizing: border-box;
    border: 1px solid #d3d3d3;
    padding: 15px;
    background-color: #f5f5f5;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    /* margin-top is not needed when using gap */
}

/* REMOVED overly broad/redundant rules */
/* .three-column-posts > .post-column { } */
/* .three-column-posts > * { } */


/* --- Inner Content Styling (Keep As Is) --- */
.post-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.post-thumbnail {
    max-width: 300px;
    height: auto;
    margin-bottom: 10px;
}
.post-title {
    margin: 10px 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    text-align: center;
}
.post-title a {
    text-decoration: none;
    color: inherit;
}
.post-title a:hover {
    color: #dc3545;
}
.post-excerpt {
    margin: 10px 0;
    font-size: 1rem;
    color: #555;
    text-align: left;
}
.post-meta {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #777;
    line-height: 1.5;
    text-align: left;
}
/* --- End Inner Content Styling --- */
/* --- Responsive Styling --- */
@media screen and (max-width: 768px) { /* iPad portrait/Tablet */
    /* Increase specificity by adding the parent container */
    .um-ajax-items .post-column { /* <--- CHANGE IS HERE */
        /* 2 columns */
         flex-basis: 45%; /* Or calc(50% - 10px) */
         /* If this doesn't work, try adding !important here for testing */
         /* flex-basis: 45% !important; */
    }
}

@media screen and (max-width: 480px) { /* Mobile */
     /* Increase specificity by adding the parent container */
    .um-ajax-items .post-column { /* <--- CHANGE IS HERE */
        /* 1 column */
        flex-basis: 100%;
         /* If this doesn't work, try adding !important here for testing */
         /* flex-basis: 100% !important; */
    }
}

@media screen and (max-width: 1024px) and (min-width: 769px) { /* Larger Tablets (like iPad Pro Portrait) */
    .um-ajax-items .three-column-posts {
        display: flex;
        flex-wrap: wrap; /* Keep the wrap behavior */
        gap: 20px; /* Maintain the gap */
    }

    .um-ajax-items .post-column {
        flex-basis: calc(50% - 10px); /* Two columns with gap */
        /* You might need to adjust the calculation based on your exact gap */
    }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) { /* iPad Pro Landscape (Example) */
    .um-ajax-items .post-column {
        flex-basis: calc(33.333% - 13.333px); /* Back to three columns with gap */
        /* Adjust the calculation based on your exact gap */
    }
}

/* Hoogte van de user header */
.um-header.no-cover {
	background: #000000;
    max-height: 180px !important; /* was 180px Adjust this value lower, e.g., 120px, 100px */
}
/* Q&A overzicht weergave */
.qena {
  overflow: hidden;
  background: #fff;
  padding: 1rem;
  max-width: 100rem;
  margin: 0 0 1rem 0;
  border: 1px solid #cacaca
}
.qena img {
  width: 150px;
  height: 150px;
  float: left;
  margin: 0 1rem 0 0;
}

.qena h2 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}

.qena h3{
	color: #666666;
	text-decoration: none;
	margin: 0 0 0.5rem 0;
	}

.qena h3:hover{
	color: #ef565c;
	text-decoration: none;
	margin: 0 0 0.5rem 0;
	}

.qena > div {
  padding-left: calc(1px + 1rem);
}
/* Q&A overzicht weergave STOP */

/* ============================================= */
/* Styling voor de Prijzen-tabel                 */
/* ============================================= */

/* De container voor de kolommen */
.pricing-table-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolommen naast elkaar */
    gap: 30px; /* Ruimte tussen de kolommen */
    margin: 2em 0;
}

/* Stijl voor een enkele kolom */
.pricing-column {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* <-- VOEG DEZE REGEL TOE */
}

.pricing-column:hover {
    transform: translateY(-5px); /* Beweegt de kolom 5px omhoog */
    box-shadow: 0 15px 25px rgba(0,0,0,0.15); /* Maakt de schaduw groter voor een 'zweef'-effect */
}

    /* Optionele, aangepaste schaduw voor de hover in dark mode */
    .pricing-column:hover {
        box-shadow: 0 15px 25px rgba(0,0,0,0.5);
    }

    /* Optionele, aangepaste schaduw voor de hover in dark mode */
    .pricing-column.recommended:hover {
        box-shadow: 0 15px 25px rgba(0,0,0,0.5);
    }

/* Speciale stijl voor de aanbevolen kolom */
.pricing-column.recommended {
    border-color: #dc3545; /* Gebruikt je accentkleur */
    border-width: 1px;
/*    transform: scale(1.05); /* Maakt hem net iets groter */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.pricing-header {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.pricing-header h3 {
    margin-bottom: 10px;
    font-size: 1.5em;
}

.pricing-header .price {
    font-size: 2.5em;
    font-weight: bold;
    margin: 0;
}

.pricing-header .price span {
    font-size: 0.4em;
    font-weight: normal;
    color: #666;
    display: block;
}

/* De lijst met features */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
    flex-grow: 1; /* Zorgt dat de knop onderaan blijft */
}

.feature-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

/* Vinkjes en kruisjes (gebruikt GeneratePress iconen) */
.feature-list .gp-icon {
    margin-right: 10px;
    font-size: 20px;
}
.feature-list .gp-icon-check {
    color: #17BA0B; /* Groen */
}
.feature-list .gp-icon-close {
    color: #dc3545; /* Rood */
}
.feature-list li.disabled {
    color: #999;
    text-decoration: line-through;
}

/* De knop onderaan */
.cta-button {
    display: inline-block;
    width: 100%;
    padding: 15px;
    background-color: #dc3545;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.cta-button:hover {
    background-color: #222222;
    color: #ffffff;
}

.pricing-footer p {
    font-style: italic;
    color: #666;
}

/* Responsive: op mobiel worden de kolommen onder elkaar gezet */
@media (max-width: 900px) {
    .pricing-table-container {
        grid-template-columns: 1fr; /* 1 kolom */
    }
    .pricing-column.recommended {
        transform: scale(1); /* Effect uitzetten op mobiel */
    }
}

/* Voegt een ster toe voor een menu-item met de class 'menu-item-star' */
.menu-item-star > a::after {
    content: '★';
    color: #BE1F2E;
    margin-left: 8px;
    font-size: 0.8em;
    vertical-align: middle; 
}

/*Verbeterstappen CLS score */
img[data-lazyloaded], .avatar {
  aspect-ratio: 1 / 1;
  display: block;
  height: auto;
}
/* leestijd bovenaan verhalen */
.rmp-widgets-container {
  min-height: 120px;
}
.comment .avatar {
  aspect-ratio: 1 / 1;
  display: block;
  width: 50px;
  height: auto;
}
.yarpp-related {
  min-height: 160px;
  margin-top: 2em;
}


/* Basisstijl: zorgt dat het vinkje klein blijft, ook in grote koppen */
i.um-verified {
    display: inline-block;
    font-style: normal !important;
    font-size: 16px !important; /* Forceer kleine grootte */
    line-height: 1;
    vertical-align: baseline;
    margin-left: 8px;
}

/* Het vinkje karakter zelf */
i.um-verified::before {
    content: "✔" !important;
    font-family: inherit !important;
    font-weight: bold !important;
}

/* --- KLEUREN PER ROL --- */

/* Subscriber (Blauw) - Samengevoegd */
.role-is-subscriber i.um-verified,
.um-role-subscriber i.um-verified,
.role-is-subscriber i.um-verified::before {
    color: #0000ff !important;
}
/* Auteur (Smaragd groen) - Samengevoegd */
.role-is-author i.um-verified,
.um-role-author i.um-verified,
.role-is-author i.um-verified::before,
.role-is-author.um-verified {
    color: #50C878 !important;
}
/* Beheerder (Goud/Geel) - Samengevoegd */
.role-is-administrator i.um-verified,
.um-role-administrator i.um-verified,
.role-is-administrator i.um-verified::before,
.role-is-administrator.um-verified {
    color: #FFC300 !important;
}
/* Premium Leden (Koninklijk Paars) */
.role-is-premium i.um-verified,
.um-role-premium i.um-verified,
.role-is-premium i.um-verified::before,
.role-is-premium.um-verified {
    color: #9C27B0 !important;
}

/* Donateurs (Robijn Rood) */
.role-is-donateur i.um-verified,
.um-role-donateur i.um-verified,
.role-is-donateur i.um-verified::before,
.role-is-donateur.um-verified {
    color: #D81B60 !important;
}

/* ============================================= */
/* Styling voor de Wedstrijden Archief-tabel     */
/* ============================================= */
.wedstrijd-archive-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    font-size: 0.9em;
    border: 1px solid #e9e9e9; /* Subtiele rand om de hele tabel */
    border-radius: 4px;
    overflow: hidden; /* Zorgt dat de border-radius werkt */
}

/* De tabel-header */
.wedstrijd-archive-table thead tr {
    background-color: #f8f8f8; /* Lichte grijze achtergrond voor header */
    color: #333;
    text-align: left;
    font-weight: bold;
}

.wedstrijd-archive-table th {
    padding: 12px 15px;
}

.wedstrijd-archive-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f1f1; /* Zeer lichte lijn tussen rijen */
}

/* De titel van de wedstrijd */
.wedstrijd-archive-table .wedstrijd-title {
    font-weight: bold;
    font-size: 1.1em;
}

/* Zebra-strepen voor de rijen in de body */
.wedstrijd-archive-table tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}

.wedstrijd-archive-table tbody tr:last-of-type {
    border-bottom: 2px solid #009688; /* Accentkleur onderaan, kun je aanpassen */
}

/* Status badges (hebben we al, maar dit is de bijbehorende plek) */
.wedstrijd-status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}
.wedstrijd-status-badge.status-open { background-color: #28a745; }
.wedstrijd-status-badge.status-gesloten { background-color: #dc3545; }
.wedstrijd-status-badge.status-binnenkort { background-color: #ffc107; color: #212529; }

.button.button-small {
    padding: 5px 10px;
    font-size: 0.9em;
}

/* Responsive weergave voor mobiel */
@media screen and (max-width: 768px) {
    .wedstrijd-archive-table {
        border: none;
    }
    .wedstrijd-archive-table thead { 
        display: none; 
    }
    .wedstrijd-archive-table tr { 
        display: block; 
        margin-bottom: 1em; 
        border: 1px solid #ddd; 
        border-radius: 4px;
    }
    .wedstrijd-archive-table td { 
        display: block; 
        text-align: right; 
        border-bottom: 1px dotted #ccc; 
    }
    .wedstrijd-archive-table td:last-child { 
        border-bottom: none; 
    }
    .wedstrijd-archive-table td:before { 
        content: attr(data-label); 
        float: left; 
        font-weight: bold; 
        text-transform: uppercase;
    }
}

/* Verberg de resultaten van Rate My Post, maar ALLEEN op enkele 'inzending'-pagina's */
.single-inzending p.rmp-rating-widget__results {
    display: none !important;
}
/* opmaak voor de wedstrijd links */
.inzending-parent-contest-link {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 2em;
    font-size: 0.9em;
}
/* Styling voor de wedstrijd-uitslag balk */
.contest-result-footer {
    background-color: transparent !important;
	margin-top: 2em;
    padding: 1em;
    border: 1px solid #cacaca;
    text-align: center;
    font-size: 1.1em;
}
/* Voegt een zoek-icoon toe voor een menu-item met de class 'menu-item-search-icon' */
.menu-item-search-icon > a::after {
    content: '🔎';
    margin-left: 8px;
    font-size: 0.9em;
    vertical-align: middle;
}
/* Now Trending icoon in het verhalen menu*/
.dashicons-megaphone-kut::after {
    content: "\f488";
    color: #BE1F2E;
 /*   margin-left: 4px;*/
    font-size: 0.8em;
/*    vertical-align: middle;*/
    font-family: dashicons;
}
/* Award menu item wedstrijden*/
.dashicons-awards-kut::after {
    content: "\f313";
    color: #BE1F2E;
    margin-left: 8px;
    font-size: 0.8em;
    vertical-align: middle;
    font-family: dashicons;
}

/**
 * =========================================================================
 * Story Meta & Font Size Controls
 * =========================================================================
 */
.story-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
    gap: 20px; 
    padding: 1em 1.5em;
    border: 1px solid #cacaca;
    background-color: #ffffff; /* Forceer witte achtergrond */
    margin-bottom: 2em;
}

/* Dark Mode override voor de achtergrond */
body.dark-mode .story-meta-bar {
    background-color: var(--base-3);
    border-color: var(--contrast-3);
}

.story-stats,
.font-size-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.story-stats span {
    margin-right: 10px;
    white-space: nowrap;
}

.font-size-controls .control-label {
    margin-right: 5px;
}

.font-size-controls a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    cursor: pointer;
    line-height: 1;
    border-radius: 3px;
}

/* Kleuren overnemen van thema variabelen in Dark Mode */
body.dark-mode .font-size-controls a {
    border-color: var(--contrast-3);
    color: var(--contrast);
}

.font-size-controls a:hover {
    background-color: var(--accent, #BE1F2E);
    color: #ffffff;
    border-color: var(--accent, #BE1F2E);
}
/* Past de hoogte van de Ultimate Member cover foto aan */
.um-profile .um-cover {
    max-height: 95px !important; /* dit was 105px */
	background-color: #000;
	}

/* Selecteer de specifieke elementen binnen de cover */
.um-profile .um-cover-e,
.um-profile .um-cover-e .um-cover-add {
    height: 160px !important; /* dit was 160px */
    min-height: 100px !important; /* Forceer een minimum hoogte */
}
/* Verbergt de dubbele 'Vriendschap aanvragen'-knop op de cover
.um-profile .um-friends-coverbtn {
    display: none !important;
}
/* Verbergt de dubbele 'Vriendschap aanvragen'-knop op de cover stop */

/* ============================================= */
/* Moderne Styling voor Accordion Menu Widget    */
/* ============================================= */
/* Richt zich op submenu's binnen een 'Navigatiemenu'-widget */
/* Fade-in animatie */
/* Fade-in animatie */
@keyframes fadeInMenu {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.widget_nav_menu .sub-menu.toggled-on {
    max-height: 800px;
    animation: fadeInMenu 0.4s ease-out forwards;
}

.widget_nav_menu .sub-menu {
    display: block !important;
    max-height: 0;
    transition: max-height 0.4s ease-in-out; /*was 300ms*/
    overflow: hidden !important;
    visibility: visible !important;
}

/* Optioneel: submenu-links iets stijlvoller */
.widget_nav_menu .sub-menu li a {
    padding: 10px 20px;
    display: block;
    font-size: 0.95em;
    color: #444;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.widget_nav_menu .sub-menu li a:hover {
    background-color: #BE1F2E;
    color: #FFFFFF;
    border-radius: 2px;
}
/*Weergave link naar de Hub onder elk verhaal */
.hub-cta-block {
    margin-top: 0.5em;
    padding: 0.5em;
    background-color: #fff;
    text-align: left;
    font-size: 15px;
}
html[data-theme="dark"] .hub-cta-block {
    background-color: var(--base-2);
}

/* Styling voor de nieuwe custom meta bar */
.inside-article .gb-custom-meta-bar {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
    font-size: 0.9em;
    color: #757575;
}
.inside-article .gb-custom-meta-bar li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.inside-article .gb-custom-meta-bar li:not(:last-child)::after {
    content: '|';
    color: #e0e0e0;
    margin-left: 10px;
}
/* Deze regel is nu veel specifieker en zal winnen */
.inside-article .gb-custom-meta-bar svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Dark Mode */
html[data-theme="dark"] .inside-article .gb-custom-meta-bar {
    color: var(--contrast-2);
}
html[data-theme="dark"] .inside-article .gb-custom-meta-bar li:not(:last-child)::after {
    color: var(--contrast-3);
}

/*layout voor de 'series' navigatie */
.series-navigation-box {
    margin: 2em 0;
    padding: 1.5em 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}
.series-navigation-box .series-title {
    font-size: 1.2em;
    margin-bottom: 1em;
    font-weight: bold;
}
.series-navigation-box .series-pagination {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.series-navigation-box .series-next {
    text-align: right;
}
/* Dark Mode */
html[data-theme="dark"] .series-navigation-box {
    border-color: var(--contrast-3);
}

/* Bokenkast Icons*/
.boekenplank-map-item.hoofdmap h3::before {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    content: '';
}
.hoofdmap.icon-star h3::before {
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>') no-repeat center;
}
.hoofdmap.icon-folder h3::before {
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></svg>') no-repeat center;
}
.hoofdmap.icon-new h3::before {
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>') no-repeat center;
}

/* Definitieve styling voor Website Overzicht - Sitemap Pagina */
.sitemap-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    margin: 2em 0;
    align-items: stretch; /* Zorgt dat de grid-cellen even hoog zijn */
}

/* DE FIX: Forceer elke kaart om een flex-container te zijn */
.sitemap-list-card {
    border: 1px solid #cacaca;
    border-radius: 3px;
    background-color: #ffffff;
    display: flex; /* Maak de kaart zelf een flexbox */
    flex-direction: column; /* Stapel de elementen (header, lijst, footer) verticaal */
}

/* Zorg ervoor dat de lijst de resterende ruimte opvult */
.sitemap-card-list {
    flex-grow: 1; 
}

/* --- De rest van je styling --- */
.sitemap-card-header {
    padding: 12px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    font-weight: bold;
    font-size: 1.1em;
}
.sitemap-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sitemap-card-list li a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #444444;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.sitemap-card-list li a:hover {
    color: #ffffff;
    background-color: #BE1F2E;
}
.sitemap-card-list li:last-child a {
    border-bottom: none;
}
.sitemap-card-footer {
    padding: 10px 15px;
    background-color: #f8f9f8;
    text-align: right;
    border-top: 1px solid #f0f0f0;
}

/* --- Uitdaging Archief Pagina --- */
.post-type-archive-uitdaging .uitdagingen-grid .uitdaging-item {
    margin-bottom: 10px; /* Voeg ruimte toe onder elk uitdaging-blok */
    padding-bottom: 10px; /* Voeg ruimte toe binnen de border als die er is */
}

.post-type-archive-uitdaging .uitdagingen-grid .uitdaging-item:last-child {
    margin-bottom: 0; /* Geen extra ruimte na het laatste item */
    padding-bottom: 0;
    border-bottom: none;
}

/* Styling voor de scheidingslijn in Uitdaging verhalen */
hr.uitdaging-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin: 2em 0; /* Extra ruimte boven en onder */
}

/* Meta data voor ongepubliceerde uitdagingen */
.uitdaging-meta-ongepubliceerd {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 1em;
}

/* Stijlen voor berichten binnen single-uitdaging */
.single-uitdaging .uitdaging-bericht {
     border-left-width: 4px;
     border-left-style: solid;
     padding: 10px 20px;
     margin: 1.5em 0;
}
.single-uitdaging .uitdaging-bericht.info {
     border-color: blue; background: #f0f0ff;
}

/* ==========================================================================
   Styling Gepubliceerde Uitdaging Auteur Box (Compact v3 - Data Theme)
   ========================================================================== */

/* --- Standaard (Light Mode) --- */
.uitdaging-auteurs-box.published-authors {
    background-color: #f8f9fa;
    color: #495057;
    padding: 20px;
    border-radius: 5px;
    margin: 1.5em 0;
    border: 1px solid #dee2e6;
    /* transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; */ /* Optioneel: vloeiende overgang */
}

.uitdaging-auteurs-box .authors-box-title {
    display: none;
}

.uitdaging-auteurs-box .authors-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.uitdaging-auteurs-box .auteur-deel {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-basis: calc(50% - 10px);
    min-width: 220px;
}

.uitdaging-auteurs-box .auteur-avatar img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 3px;
    display: block;
    border: 1px solid #ddd;
    padding: 2px;
    background-color: #fff;
    flex-shrink: 0;
    /* transition: background-color 0.3s ease, border-color 0.3s ease; */ /* Optioneel */
}

.uitdaging-auteurs-box .auteur-info {
    font-size: 1em;
    line-height: 1.4;
    text-align: left;
    /* transition: color 0.3s ease; */ /* Optioneel */
}

.uitdaging-auteurs-box .auteur-info strong {
    color: #6c757d;
    display: block;
    margin-bottom: 2px; /* Dichter bij elkaar */
    font-size: 0.9em;
    font-weight: normal;
    /* transition: color 0.3s ease; */ /* Optioneel */
}

.uitdaging-auteurs-box .auteur-info .author a {
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: none;
    color: #BE1F2E; /* Huiskleur */
    /* transition: color 0.3s ease; */ /* Optioneel */
}
.uitdaging-auteurs-box .auteur-info .author a:hover {
    text-decoration: underline;
}

.uitdaging-auteurs-box .auteur-plus {
    display: none;
}

.uitdaging-auteurs-box .authors-box-footer {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 1em;
    color: #495057;
    border-top: 1px solid #e9ecef;
    padding-top: 15px;
    text-align: center;
    /* transition: color 0.3s ease, border-color 0.3s ease; */ /* Optioneel */
}
.uitdaging-auteurs-box .authors-box-footer a {
    font-weight: bold;
    color: #BE1F2E; /* Huiskleur */
    text-decoration: none;
    /* transition: color 0.3s ease; */ /* Optioneel */
}
.uitdaging-auteurs-box .authors-box-footer a:hover {
    text-decoration: underline;
}

/* Verberg standaard auteur box */
.single-uitdaging .author_bio_section {
    display: none !important;
}

/* Mobiele weergave */
@media (max-width: 600px) {
    .uitdaging-auteurs-box .authors-container {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    .uitdaging-auteurs-box .auteur-deel {
        flex-basis: 100%;
        justify-content: center;
        max-width: none;
    }
     .uitdaging-auteurs-box .auteur-avatar img {
         width: 100px !important;
         height: 100px !important;
     }
}

/* --- Dark Mode (gebruikt data-theme attribuut) --- */
html[data-theme="dark"] .uitdaging-auteurs-box.published-authors {
    background-color: var(--base-3, #2a2a2a); /* Gebruik variabelen met fallback */
    color: var(--contrast-2, #b2b2be);
    border-color: var(--contrast-3, #575760);
}

html[data-theme="dark"] .uitdaging-auteurs-box .auteur-avatar img {
    border-color: var(--contrast-3, #575760);
    background-color: var(--base-2, #222222);
}

html[data-theme="dark"] .uitdaging-auteurs-box .auteur-info strong {
    color: var(--contrast-2, #b2b2be); /* Iets lichter label */
}

html[data-theme="dark"] .uitdaging-auteurs-box .authors-box-footer {
    color: var(--contrast-2, #b2b2be);
    border-top-color: var(--contrast-3, #575760);
}

/* Link kleuren blijven #BE1F2E, tenzij je een aparte dark mode kleur wilt */
html[data-theme="dark"] .uitdaging-auteurs-box .auteur-info .author a,
html[data-theme="dark"] .uitdaging-auteurs-box .authors-box-footer a {
     color: #fff; /* Voorbeeld: lichtere variant van rood * /
}
	
/* main nav effect*/