/* ===============================
   BLOG GRID
   =============================== */

.eppel-archive-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}

.eppel-archive-card{
  background:#fff;
  border-radius:6px;
  overflow:hidden;
}

.eppel-archive-card__link{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.eppel-archive-card__media{
  aspect-ratio:3 / 2;
  background-size:cover;
  background-position:center;
}

.eppel-archive-card__body{
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.eppel-archive-card__meta,
.eppel-archive-card__title,
.eppel-archive-card__excerpt{
  margin:0;
}

.eppel-archive-card__cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
}

/* Responsive */
@media (max-width:1024px){
  .eppel-archive-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .eppel-archive-grid{ grid-template-columns:1fr; }
}

/* ===============================
   PAGINATION (WordPress core)
   Works with: the_posts_pagination()
   =============================== */

/* Verberg "Berichten paginering" */
.screen-reader-text{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.eppel-pagination{
  width:100%;
  clear:both;
  display:block;
  margin-top:3rem;
}

/* WP: <nav class="navigation pagination"><div class="nav-links">..</div></nav> */
.eppel-pagination .navigation.pagination{
  width:100%;
  margin:0;
}

.eppel-pagination .navigation.pagination .nav-links{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.eppel-pagination .navigation.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .9rem;
  border-radius:999px;
  text-decoration:none;
  line-height:1;
}

.eppel-pagination .navigation.pagination .page-numbers.current{
  font-weight:600;
}

/* HARD FIX: pagination kan NOOIT boven de grid komen */
.eppel-archive-wrap{
  display:flex;
  flex-direction:column;
}

.eppel-archive-wrap > .eppel-archive-grid{
  order:1;
}

.eppel-archive-wrap > .eppel-pagination{
  order:2;
  margin-top:3rem;
  width:100%;
  position:static !important;
  float:none !important;
  clear:both;
}

/* =========================================
   HARD FIX: pagination mag nooit omhoog springen
   (neutraliseert position/float van theme/plugins)
   ========================================= */

.blog .eppel-pagination,
.home.blog .eppel-pagination{
  position: static !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  display: block !important;
  margin-top: 3rem !important;
}

.blog .eppel-pagination .navigation.pagination,
.home.blog .eppel-pagination .navigation.pagination{
  position: static !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin: 0 !important;
}

.blog .eppel-pagination .nav-links,
.home.blog .eppel-pagination .nav-links{
  position: static !important;
  float: none !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Voor de zekerheid: niks mag boven de grid gaan zweven */
.blog .eppel-archive-grid,
.home.blog .eppel-archive-grid{
  position: relative !important;
  z-index: 1;
}

/* =========================================
   HARD FIX: pagination ook op archives/tags/categories
   ========================================= */

.archive .eppel-pagination,
.tag .eppel-pagination,
.category .eppel-pagination,
.search .eppel-pagination{
  position: static !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  display: block !important;
  margin-top: 3rem !important;
}

.archive .eppel-pagination .navigation.pagination,
.tag .eppel-pagination .navigation.pagination,
.category .eppel-pagination .navigation.pagination,
.search .eppel-pagination .navigation.pagination{
  position: static !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin: 0 !important;
}

.archive .eppel-pagination .nav-links,
.tag .eppel-pagination .nav-links,
.category .eppel-pagination .nav-links,
.search .eppel-pagination .nav-links{
  position: static !important;
  float: none !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Z-index zekerheid */
.archive .eppel-archive-grid,
.tag .eppel-archive-grid,
.category .eppel-archive-grid,
.search .eppel-archive-grid{
  position: relative !important;
  z-index: 1;
}

/* =========================================
   Hamburger menu zichtbaar maken op blog & archives
   ========================================= */

/* Zorg dat het menu-icoon donker is op lichte headers */
.blog .navbar-toggler,
.archive .navbar-toggler,
.tag .navbar-toggler,
.category .navbar-toggler,
.search .navbar-toggler{
  color: #111 !important;
}

/* Voor SVG / icon bars (Bootstrap style) */
.blog .navbar-toggler-icon,
.archive .navbar-toggler-icon,
.tag .navbar-toggler-icon,
.category .navbar-toggler-icon,
.search .navbar-toggler-icon{
  filter: invert(1) brightness(0) !important;
}

/* Als je custom hamburger spans gebruikt */
.blog .hamburger span,
.archive .hamburger span,
.tag .hamburger span,
.category .hamburger span,
.search .hamburger span{
  background-color: #111 !important;
}