@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;800&display=swap');

/* Custom Styles for VDZ Mediation */

body {
  font-family: 'Figtree', sans-serif; /* Changed font */
  color: #333; /* Dark gray for text */
  line-height: 1.6;
  font-weight: 400; /* Default body weight */
}

/* Top Bar Styles */
#top-bar {
  background-color: #04ddc0; /* Specific background color */
  padding: 0.5rem 0;
  font-size: 0.9em;
}

  #top-bar a {
    color: #ffffff; /* White text/links */
    text-decoration: none;
  }

    #top-bar a:hover {
      color: rgba(255, 255, 255, 0.8); /* Slightly faded white on hover */
      text-decoration: none;
    }

  #top-bar i {
    color: #ffffff; /* White icons */
    /* Optional: Adjust icon size or alignment if needed */
    /* font-size: 1em; */
  }

/* Sticky Header Wrapper */
#sticky-header-wrapper.sticky-top {
  /* Ensure the wrapper itself has a background when sticky 
       so content doesn't show through the gap between top-bar and navbar */
  background-color: #ffffff; /* Match navbar background */
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); /* Optional: add shadow when sticky */
  /* Adjust z-index if needed, Bootstrap's sticky-top default (1020) is usually sufficient */
  z-index: 1020;
}

/* Navbar Styling */
.navbar {
  /* Remove default light background */
  background-color: #ffffff !important; /* White background */
  border-bottom: 1px solid #e7e7e7; /* Subtle border */
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.navbar-brand {
  font-weight: 600;
  color: #0d6efd; /* Use Bootstrap primary blue for now */
}

.nav-link {
  color: #555; /* Slightly lighter gray for nav links */
}

  .nav-link:hover,
  .nav-link:focus {
    color: #0056b3; /* Darker blue on hover */
  }

/* Style for active top-level nav link */
.navbar-nav .nav-link.active {
  color: #0c71c3; /* Footer blue color */
  font-weight: 600; /* Make it slightly bolder */
}

/* Style for active dropdown item */
.navbar-nav .dropdown-item.active,
.navbar-nav .dropdown-item:active { /* Add :active pseudo-class for consistency */
  background-color: #0c71c3; /* Footer blue background */
  color: #ffffff; /* White text */
  font-weight: normal; /* Reset font weight if not needed */
}

/* Keep dropdown toggle active when child is active */
.navbar-nav .nav-item .dropdown-toggle.active {
  color: #0c71c3;
}

.dropdown-menu {
  border: 1px solid #e7e7e7;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Header Call-to-Action Button */
.navbar .btn-primary {
  background-color: #0d6efd; /* Example: Bootstrap primary blue */
  border-color: #0d6efd;
  /* Consider adding more contrast/different color later */
}

/* Main Content Area */
main.container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Figtree', sans-serif; /* Changed font */
  color: #2c3e50;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  font-weight: 800; /* Use ExtraBold for headings - Correct weight already set */
}

h1 {
  font-size: 2.2rem;
}

h2 {
  font-size: 1.8rem;
}

/* Footer */
footer#main-footer {
  background-color: #0c71c3; /* New background color */
  color: rgba(255, 255, 255, 0.8); /* Lighter text color for body */
  font-size: 0.9em;
}

  footer#main-footer h5 {
    color: #ffffff; /* White headings */
    font-weight: bold;
    margin-bottom: 1.2rem;
  }

  footer#main-footer a {
    text-decoration: none;
    color: #ffffff; /* White links */
  }

    footer#main-footer a:hover {
      color: rgba(255, 255, 255, 0.8); /* Slightly transparent white on hover */
      text-decoration: underline;
    }

  footer#main-footer hr {
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Lighter hr color */
  }

  /* Keep using primary color for specific branding if needed, otherwise remove/adjust */
  /* footer#main-footer .text-primary {
    color: #0d6efd !important; 
} */

  footer#main-footer i {
    width: 20px; /* Align icons nicely */
    color: #ffffff; /* Ensure icons are white */
  }

/* Sub-footer (Copyright/KVK row) styling */
#sub-footer {
  padding: 1rem 0;
  background-color: #f8f9fa; /* Light background */
  color: #6c757d; /* Darker text */
  font-size: 0.85em;
}

  #sub-footer a {
    color: #495057; /* Darker links */
    text-decoration: none;
  }

    #sub-footer a:hover {
      color: #0c71c3; /* Link color on hover */
      text-decoration: underline;
    }

/* Widget Bar Styles */
#widget-bar {
  background-color: #ffffff; /* White background, or maybe a light grey like #f8f9fa */
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

.footer-widget-logo {
  max-height: 80px; /* Limit logo height */
  max-width: 100%; /* Ensure responsiveness */
  width: auto; /* Maintain aspect ratio */
  opacity: 0.8; /* Slightly fade logos */
  transition: opacity 0.2s ease-in-out;
}

#widget-bar a:hover .footer-widget-logo {
  opacity: 1; /* Full opacity on hover */
}

/* RN T.b.v. widget met 5 items */
#widget-bar .row > div {
  flex: 0 0 100%;
  max-width: 100%;
}

/* mobiel (>576px) */
@media (min-width: 576px) {
  #widget-bar .row > div {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* tablet (>768px) */
@media (min-width: 768px) {
  #widget-bar .row > div {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

/* desktop (>992px) */
@media (min-width: 992px) {
  #widget-bar .row > div {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* Markdown Body specific styles (if needed) */
.markdown-body {
  /* Add specific styles for markdown content if necessary */
}

/* Keep images inside the main column (sanitizer may strip utility classes; wide assets still scale down) */
.markdown-body img,
.markdown-body picture img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Soft reveal for native lazy-loaded markdown images (see ~/js/lazy-image-reveal.js, html.fe-lazy-img) */
.fe-lazy-img .markdown-body img[loading="lazy"]:not(.is-loaded) {
  opacity: 0;
  transform: translateY(0.35rem);
}

.fe-lazy-img .markdown-body img[loading="lazy"].is-loaded {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .fe-lazy-img .markdown-body img[loading="lazy"]:not(.is-loaded) {
    opacity: 1;
    transform: none;
  }

  .fe-lazy-img .markdown-body img[loading="lazy"].is-loaded {
    transition: none;
  }
}

.markdown-body figure {
  margin: 1rem 0;
}

.markdown-body > img:first-child,
.markdown-body > p:first-child img:only-of-type {
  margin-bottom: 1rem;
}

/* --- Consistent List Spacing --- */

/* Spacing for main numbered list items */
main > ol > li {
  margin-bottom: 1rem; /* More space between main steps */
}

/* Spacing for nested bullet points */
main ol ul li {
  margin-bottom: 0.25rem; /* Tighter spacing for sub-points */
}

/* Add space *above* the nested list to separate from parent item text */
main ol > li > ul {
  margin-top: 0.5rem;
  margin-bottom: 0; /* Remove bottom margin as parent li handles it */
}

/* Control paragraph spacing within lists */
main li p {
  margin-bottom: 0.25rem; /* Default small margin for paragraphs in lists */
}

  /* Remove margin from the last paragraph within any list item */
  main li p:last-child {
    margin-bottom: 0;
  }
/* --- End Consistent List Spacing --- */

/* Hero Section Styles */
.hero-section {
  position: relative;
  min-height: 400px; /* Use min-height instead of height */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
  /* display: flex; align-items: center; justify-content: center; are no longer needed */
  text-align: center;
  display: flex; /* Keep flex to easily center content vertically if needed */
  align-items: center; /* Vertically center content */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 4rem 1rem; /* Add significant vertical padding, adjust as needed */
  margin-left: auto; /* Center the content container */
  margin-right: auto;
}

.hero-title {
  font-size: 2.8rem;
  font-weight: 800; /* Ensure hero title uses the ExtraBold weight */
  font-family: 'Figtree', sans-serif; /* Match headings */
  color: #fff !important; /* Ensure white color overrides, important might be needed */
  margin-top: 0; /* Reset heading margin */
  margin-bottom: 1rem;
  display: none !important; /* RN Hero-title uit het plaatje halen */
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero-button {
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  display: none !important; /* RN Hero-button uit het plaatje halen */  
  /* Style further as needed */
}

/* You might want to apply Outfit to buttons too */
.btn {
  font-family: 'Figtree', sans-serif; /* Updated font */
}

/* Scroll to Top Button Styles */
#scrollToTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed position */
  bottom: 20px; /* Distance from bottom */
  right: 30px; /* Distance from right */
  z-index: 1030; /* Make sure it's above most content, below modals maybe */
  border: none; /* Remove default border */
  outline: none; /* Remove outline */
  background-color: #0c71c3; /* Use footer blue */
  color: white; /* White icon */
  cursor: pointer; /* Pointer cursor on hover */
  padding: 10px 15px; /* Padding */
  border-radius: 50%; /* Make it round */
  font-size: 18px; /* Adjust icon size */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Add shadow */
  transition: background-color 0.2s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transitions */
}

  #scrollToTopBtn:hover {
    background-color: #084f8a; /* Darker blue on hover */
  }

/* === Dropdown on Hover (Desktop) === */
@media (min-width: 992px) { /* Corresponds to Bootstrap's lg breakpoint */
  .navbar .dropdown:hover > .dropdown-menu {
    display: block; /* Show dropdown on hover */
    margin-top: 0; /* Adjust if needed to align with navbar */
  }

  /* Optional: Hide the default dropdown arrow */
  .navbar .dropdown-toggle::after {
    display: none;
  }
}

/* Optional: Add a slight delay or transition for smoother feel */
/*
.navbar .dropdown-menu {
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

@media (min-width: 992px) {
    .navbar .dropdown .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        display: block; 
        margin-top: 0;
    }

    .navbar .dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
    }

    .navbar .dropdown-toggle::after {
        display: none;
    }
}
*/

/* === Breadcrumb Styles === */
.breadcrumb-container {
  /* Optional: Adjust padding if needed */
  padding-left: 0;
  padding-right: 0;
}

.breadcrumb {
  background-color: transparent; /* Remove default Bootstrap background */
  padding: 0.5rem 0; /* Adjust vertical padding */
  margin-bottom: 1rem; /* Space below breadcrumb */
  font-size: 0.9em; /* Slightly smaller font */
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #6c757d; /* Gray color for the separator */
}

.breadcrumb-item a {
  color: #0c71c3; /* Use a standard link color */
  text-decoration: none;
}

  .breadcrumb-item a:hover {
    text-decoration: underline;
  }

.breadcrumb-item.active {
  color: #6c757d; /* Standard text color for the active item */
}


/* Optional: Add a slight delay or transition for smoother feel */
/*
.navbar .dropdown-menu {
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

@media (min-width: 992px) {
    .navbar .dropdown .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        display: block; 
        margin-top: 0;
    }

    .navbar .dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
    }

    .navbar .dropdown-toggle::after {
        display: none;
    }
}
*/

/* >>> Additions for Blog Detail Page & Sidebar <<< */

.blog-detail-page {
  display: flex;
  gap: 30px; /* Space between content and sidebar */
  margin-top: 20px;
  margin-bottom: 40px;
}

.blog-post-content {
  flex: 1; /* Takes up remaining space */
  min-width: 0; /* Prevent flex item overflow */
}

  .blog-post-content .featured-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 5px;
  }

  .blog-post-content .post-meta {
    color: #6c757d; /* Bootstrap secondary color */
    font-size: 0.9em;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }

  .blog-post-content .post-tags {
    margin-top: 30px;
    font-size: 0.9em;
	display: none;
  }

  .blog-post-content .tag {
    display: inline-block;
    background-color: #e9ecef; /* Bootstrap light gray */
    color: #495057;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 5px;
  }

.blog-sidebar {
  flex: 0 0 300px; /* Fixed width sidebar, doesn't grow or shrink */
  /* Or use percentage: flex: 0 0 30%; */
  border-left: 1px solid #eee;
  padding-left: 30px;
}

  .blog-sidebar h4 {
    margin-bottom: 15px;
    font-size: 1.2em;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
  }

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

  .recent-posts-list li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f8f9fa; /* Very light border */
  }

    .recent-posts-list li:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

  .recent-posts-list a {
    display: flex; /* Align image and text */
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 10px;
  }

    .recent-posts-list a:hover .recent-post-title {
      text-decoration: underline;
      color: var(--vdz-primary-color, #0056b3); /* Use variable or default */
    }

.recent-post-thumbnail {
  width: 60px; /* Adjust size as needed */
  height: 60px;
  object-fit: cover; /* Crop image nicely */
  border-radius: 4px;
  flex-shrink: 0; /* Prevent image from shrinking */
}

.recent-post-title {
  font-size: 0.95em;
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .blog-detail-page {
    flex-direction: column;
    gap: 20px;
  }

  .blog-sidebar {
    flex-basis: auto; /* Allow sidebar to take full width */
    width: 100%;
    border-left: none;
    border-top: 1px solid #eee;
    padding-left: 0;
    padding-top: 20px;
    margin-top: 20px;
  }
}

/* >>> End Blog Detail Page & Sidebar Additions <<< */

/* >>> Blog Index Post Item Styling <<< */

.blog-post-item {
  border: 1px solid #eef0f2;
  transition: 0.3s;
  background-color: #fff; /* Ensure white background */
  /* Removed height: 100% as h-100 utility class is used */
}

  .blog-post-item .post-img {
    /* height: 240px; /* Fixed height for images */
    /* Consider aspect-ratio instead for responsiveness */
    aspect-ratio: 16 / 10; /* Maintain a 16:10 aspect ratio */
  }

    .blog-post-item .post-img img {
      /* Ensure image covers the container */
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.3s;
    }

  .blog-post-item .post-date {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 10px;
    border-radius: 4px;
    position: absolute;
    right: 15px;
    bottom: 15px;
  }

  .blog-post-item .post-content {
    padding: 30px;
  }

  .blog-post-item .post-title {
    font-size: 1.2rem; /* Adjusted from example */
    font-weight: 700; /* Bold title */
    margin-top: 0;
    margin-bottom: 15px;
    transition: 0.3s;
    font-family: var(--heading-font, 'Figtree', sans-serif); /* Use heading font */
  }

    .blog-post-item .post-title a {
      color: var(--heading-color, #2c3e50);
      text-decoration: none;
    }

  .blog-post-item .meta {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 15px;
  }

    .blog-post-item .meta i {
      margin-right: 6px;
      color: var(--accent-color, #0056b3); /* Use accent or primary color */
    }

  .blog-post-item .post-excerpt {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 20px;
  }

  .blog-post-item hr {
    border-color: #f0f0f0; /* Lighter separator */
    /* mt-auto utility class pushes this down */
  }

  .blog-post-item .readmore {
    display: inline-flex; /* Use inline-flex for icon alignment */
    align-items: center;
    font-size: 0.9em;
    font-weight: 600;
    color: #555;
    transition: 0.3s;
    text-decoration: none;
  }

    .blog-post-item .readmore i {
      margin-left: 8px;
      font-size: 0.8em;
      position: relative;
      top: -1px; /* Slight alignment adjustment */
    }

  .blog-post-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: transparent;
  }

    .blog-post-item:hover .post-title a {
      color: var(--accent-color, #0056b3); /* Use accent or primary color on hover */
    }

    .blog-post-item:hover .post-img img {
      transform: scale(1.05);
    }

    .blog-post-item:hover .readmore {
      color: var(--accent-color, #0056b3);
    }

/* >>> End Blog Index Post Item Styling <<< */

/* >>> Tag Link Styling (Blog Detail) <<< */

a.tag-link {
    display: inline-block;
    background-color: #e9ecef; /* Match sidebar category style or choose another */
    color: #495057;
    padding: 4px 10px;
    margin: 2px 4px 2px 0;
    border-radius: 4px;
    font-size: 0.85em;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

a.tag-link:hover {
    background-color: #0c71c3; /* Footer blue on hover */
    color: #ffffff;
    text-decoration: none;
}

/* >>> Sidebar Category List Styling <<< */

.sidebar-item.categories ul {
    list-style: none;
    padding-left: 0;
}

.sidebar-item.categories ul li {
    margin-bottom: 0.5rem;
}

.sidebar-item.categories ul li a {
    text-decoration: none;
    color: #555; /* Or inherit */
    transition: color 0.2s ease-in-out;
}

.sidebar-item.categories ul li a:hover {
    color: #0c71c3; /* Footer blue on hover */
    text-decoration: underline;
}

/* >>> End Tag/Category Styling <<< */


/* RN Added below */

/* Verberg publicatie- en wijzigingsdatums van artikelen */
.page-meta-dates {
    display: none !important;
} 

/* Verberg hele meta-balk in blog 
 .blog-post-content .post-meta {
  display: none !important;
} 
*/

/* Verberg de datums in blog overzicht */
.post-date,
article time[datetime] {
  display: none !important;
}

/* Detailpagina van blog: verberg alléén de eerste span (de publicatiedatum) */
.blog-post-content .post-meta span.me-2:first-child {
  display: none !important;
}

/* Verberg de featured image alleen op dit ene artikel */
.featured-image[src="/images/blog/kinderenscheidenmee.png"] {
    display: none !important;
}

/* Verberg zoekbalk in de blog-sidebar */
.blog-sidebar .sidebar-item.search {
    display: none !important;
}

.fullwidth-wrapper img {
    width: 100%;
    height: 55vh;
    display: block;
    object-fit: cover;
}

@media (max-width: 768px) {
    .fullwidth-wrapper img {
        height: 35vh;
    }
}

/* Cookie / analytics consent bar (NetCms) */
.netcms-cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  padding: 0.75rem 0;
  background: rgba(33, 37, 41, 0.97);
  color: #fff;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}
.netcms-cookie-bar[hidden] {
  display: none !important;
}
.netcms-cookie-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.netcms-cookie-text {
  flex: 1 1 16rem;
  font-size: 0.9rem;
  line-height: 1.45;
}
.netcms-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.netcms-cookie-bar .btn-link {
  color: #9eeaf9;
}
.netcms-cookie-bar .btn-link:hover {
  color: #fff;
  
}