/**
 * Blog Pagination Styles
 * Styles for the blog view pagination to match legacy site design
 */

/* Blog page pagination container - more specific selectors */
body.path-blog .pager,
.views-element-container .pager,
nav.pager {
  margin: 30px 0 !important;
  text-align: center !important;
  clear: both !important;
  display: block !important;
}

/* Pagination list styling */
body.path-blog .pager__items,
.views-element-container .pager__items,
nav.pager .pager__items {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Individual pagination items */
body.path-blog .pager__item,
.views-element-container .pager__item,
nav.pager .pager__item {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}

/* Pagination links styling */
body.path-blog .pager__item a,
.views-element-container .pager__item a,
nav.pager .pager__item a {
  display: inline-block !important;
  padding: 8px 12px !important;
  background: #f5f5f5 !important;
  border: 1px solid #ddd !important;
  color: #253980 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-family: ClearSans-Regular, Arial, sans-serif !important;
  border-radius: 3px !important;
  transition: all 0.3s ease !important;
  min-width: 40px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/* Pagination link hover state */
body.path-blog .pager__item a:hover,
.views-element-container .pager__item a:hover,
nav.pager .pager__item a:hover {
  background: #253980 !important;
  color: #fff !important;
  border-color: #253980 !important;
}

/* Current page styling */
body.path-blog .pager__item.is-active a,
.views-element-container .pager__item.is-active a,
nav.pager .pager__item.is-active a {
  background: #253980 !important;
  color: #fff !important;
  border-color: #253980 !important;
  cursor: default !important;
  font-weight: bold !important;
}

/* Hide visually-hidden text spans in screen readers but keep accessible */
body.path-blog .pager__item .visually-hidden,
.views-element-container .pager__item .visually-hidden,
nav.pager .pager__item .visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  overflow: hidden !important;
  height: 1px !important;
  width: 1px !important;
  word-wrap: normal !important;
}

/* Next/Previous/First/Last button styling */
body.path-blog .pager__item--first a,
body.path-blog .pager__item--previous a,
body.path-blog .pager__item--next a,
body.path-blog .pager__item--last a,
.views-element-container .pager__item--first a,
.views-element-container .pager__item--previous a,
.views-element-container .pager__item--next a,
.views-element-container .pager__item--last a,
nav.pager .pager__item--first a,
nav.pager .pager__item--previous a,
nav.pager .pager__item--next a,
nav.pager .pager__item--last a {
  background: #e3e3e3 !important;
  color: #253980 !important;
  font-weight: normal !important;
  padding: 8px 15px !important;
}

body.path-blog .pager__item--first a:hover,
body.path-blog .pager__item--previous a:hover,
body.path-blog .pager__item--next a:hover,
body.path-blog .pager__item--last a:hover,
.views-element-container .pager__item--first a:hover,
.views-element-container .pager__item--previous a:hover,
.views-element-container .pager__item--next a:hover,
.views-element-container .pager__item--last a:hover,
nav.pager .pager__item--first a:hover,
nav.pager .pager__item--previous a:hover,
nav.pager .pager__item--next a:hover,
nav.pager .pager__item--last a:hover {
  background: #253980 !important;
  color: #fff !important;
  border-color: #253980 !important;
}

/* Ensure pagination is visible and not hidden by other styles */
body.path-blog .pager,
.views-element-container .pager,
nav.pager {
  position: relative !important;
  z-index: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make sure pagination appears below content */
.views-element-container .pager {
  margin-top: 40px !important;
  border-top: 1px solid #e5e5e5 !important;
  padding-top: 30px !important;
}

/* Responsive pagination */
@media (max-width: 768px) {
  body.path-blog .pager__items,
  .views-element-container .pager__items,
  nav.pager .pager__items {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  body.path-blog .pager__item a,
  .views-element-container .pager__item a,
  nav.pager .pager__item a {
    padding: 6px 8px !important;
    font-size: 13px !important;
    min-width: 35px !important;
  }
}

/* Fix for potential CSS conflicts - highest specificity */
.left-part .pager * {
  box-sizing: border-box !important;
}

/* Legacy browser support */
.views-element-container .pager__items {
  /* Fallback for browsers that do not support flexbox */
  text-align: center !important;
}

.views-element-container .pager__item {
  /* Fallback display for inline layout */
  display: inline-block !important;
  margin-right: 5px !important;
}

.views-element-container .pager__item:last-child {
  margin-right: 0 !important;
}

/* Override reset.css that removes nav ul styling */
nav.pager ul.pager__items {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Very specific override for navigation elements */
nav.pager ul.pager__items li.pager__item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}

/* Ensure the pagination is always horizontal */
nav.pager ul.pager__items {
  flex-direction: row !important;
  justify-content: center !important;
}