.hero-image-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.9;
  transition: transform 0.7s ease, opacity 0.7s ease;
}

.hero-image-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,10,29,0) 0%, rgba(6,10,29,0.6) 100%);
}

.hero-slider:hover .hero-image-cover {
  transform: scale(1.03);
  opacity: 1;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 .blog-content h2 {
  font-size: 24px; /* text-2xl in Tailwind is 1.5rem (24px) */
  font-weight: 700; /* font-bold */
  line-height: 1.333; /* leading-tight */
  margin-bottom: 1rem; /* mb-4 */
}

.blog-content ol {
  padding-left: 1.5rem;
  list-style-type: disc; /* You can change this to 'circle', 'square', etc., based on your preference */
}

.blog-content li {
  margin-bottom: 0.5rem; /* Space between list items */
  line-height: 1.6; /* Adjust line height for readability */
  color: #333; /* Adjust the color as needed */
  font-size: 1rem; /* Adjust the font size as needed */
}

/* Optional: Style for nested lists */
.blog-content ol ol {
  list-style-type: circle;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* If you want to add custom styling for hyperlinks within list items */
.blog-content li a {
  color: #007bff; /* Example link color */
  text-decoration: underline; /* Example link decoration */
}

/* Teal links for intro content areas */
.intro-content {
  color: #374151; /* Gray-700 for regular text */
}

.intro-content p {
  color: #374151; /* Gray-700 for paragraph text */
}

.intro-content a,
.intro-content p a,
.text-gray-600 a,
.prose a {
  color: #0d9488 !important; /* Teal-600 */
  text-decoration: underline !important;
  font-weight: 500 !important;
  transition: all 0.2s ease;
}

.intro-content a:hover,
.intro-content p a:hover,
.text-gray-600 a:hover,
.prose a:hover {
  color: #0f766e !important; /* Teal-700 */
  text-decoration: underline !important;
}

.category-label {
  transition: background-color 0.2s, color 0.2s;
}

.category-label.selected {
  background-color: #4f46e5; /* Adjust the color as needed */
  color: white;
}

/* ===== Salarissen pagina ===== */

/* Algemeen tekstblok (was: text-gray-700 text-base leading-relaxed) */
.salarissen-content {
  color: #374151;           /* Tailwind gray-700 */
  font-size: 1rem;          /* Tailwind base */
  line-height: 1.625;       /* Tailwind leading-relaxed */
}

/* Verticale ruimte tussen opvolgende secties (was: space-y-10) */
.salarissen-content > * + * {
  margin-top: 2.5rem;       /* 40px = space-y-10 */
}

/* Koppen (was: text-2xl font-semibold text-gray-900 mb-4) */
.salarissen-content h2 {
  font-size: 1.5rem;        /* 24px = text-2xl */
  font-weight: 600;         /* font-semibold */
  color: #111827;           /* Tailwind gray-900 */
  margin-bottom: 1rem;      /* mb-4 */
}

/* Links (was: text-teal-500 hover:text-teal-600) */
.salarissen-content a {
  color: #14b8a6;           /* teal-500 */
  text-decoration: none;
}

.salarissen-content a:hover {
  color: #0d9488;           /* teal-600 */
  text-decoration: underline;
}

/* ===== Pagination styling (globaal) ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;            /* ~8px */
  user-select: none;
}

.pagination a {
  padding: 0.5rem 1rem;  /* 8px 16px */
  border-radius: 0.75rem;/* ~12px */
  border: 1px solid #D1D5DB; /* gray-300 */
  font-size: 0.875rem;   /* text-sm */
  font-weight: 500;      /* medium */
  color: #374151;        /* gray-700 */
  background: #fff;
  transition: background-color 150ms ease;
  text-decoration: none;
}

.pagination a:hover {
  background: #F3F4F6;   /* gray-100 */
}

.pagination .current {
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #0D9488; /* teal-600 */
  background: #0D9488;       /* teal-600 */
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}

.pagination span.gap,
.pagination span.disabled {
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid #E5E7EB; /* gray-200 */
  font-size: 0.875rem;
  color: #9CA3AF;            /* gray-400 */
  background: #F9FAFB;       /* gray-50 */
  cursor: not-allowed;
}

/* ===== Truly mobile-friendly pagination (sticky prev/next + horizontal scroll) ===== */
@media (max-width: 640px) {
  /* Container becomes a horizontal scroller */
  .pagination {
    display: block;                 /* avoid flex wrapping interference */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
    padding: 0.5rem;                /* breathing room around pills */
    gap: 0 !important;              /* spacing managed per item */
    scroll-behavior: smooth;
    position: relative;             /* anchor for sticky children */
    /* subtle edge fade hinting more content */
    mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  }

  /* Normalize both a/span and li > a/span patterns */
  .pagination a,
  .pagination span,
  .pagination li {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    margin-right: 0.375rem;         /* tight pill spacing */
  }
  .pagination li:last-child { margin-right: 0; }

  /* Tap targets: compact but comfy */
  .pagination a,
  .pagination span {
    min-width: 2.25rem;             /* ~36px */
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;           /* ~13px */
    border-radius: 0.75rem;
  }
  .pagination .current {
    font-weight: 700;
  }

  /* Make Prev/Next sticky on edges so numbers scroll under them */
  .pagination .previous_page,
  .pagination li.previous_page > a,
  .pagination li.previous_page > span {
    position: sticky;
    left: 0;
    z-index: 2;
    margin-right: 0.5rem;
    background: #fff;               /* ensures legible over scroller */
    box-shadow: 8px 0 8px -8px rgba(0,0,0,.08);
  }
  .pagination .next_page,
  .pagination li.next_page > a,
  .pagination li.next_page > span {
    position: sticky;
    right: 0;
    z-index: 2;
    margin-left: 0.5rem;
    background: #fff;
    box-shadow: -8px 0 8px -8px rgba(0,0,0,.08);
  }

  /* Disabled/gap pills trimmed so they don’t hog width */
  .pagination span.gap,
  .pagination span.disabled,
  .pagination li.gap > span,
  .pagination li.disabled > span {
    padding: 0.45rem 0.6rem;
    min-width: 2rem;
  }

  /* Ensure no external styles force wrapping */
  .pagination { white-space: nowrap !important; }
}

/* Better focus for keyboard users */
.pagination a:focus-visible {
  outline: 2px solid #0ea5e9;  /* sky-500 */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(14,165,233,.2);
  border-color: #0ea5e9;
}

/* Optional: subtle scrollbar styling */
.pagination::-webkit-scrollbar { height: 6px; }
.pagination::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 9999px; }
.pagination::-webkit-scrollbar-track { background: transparent; }

/* OVERRIDE: Intro content links - must be at end to override Tailwind reset */
div.intro-content a,
div.intro-content p a {
  color: #0d9488 !important; /* Teal-600 */
  text-decoration: underline !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

div.intro-content a:hover,
div.intro-content p a:hover {
  color: #0f766e !important; /* Teal-700 */
}