/* =====================================================================
   KID-FRIENDLY PAGINATION  🎈
   Styles the standard Plone / Bootstrap pagination markup:
   <nav><ul class="pagination"><li class="page-item"><a class="page-link">…
   Embed this globally and it will theme pagination across every view.
   Optional playful font (safe to remove this @import line):
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap");

/* center the wrapping <nav> (Plone already adds d-flex justify-content-center,
   this makes it work even where that wrapper is missing) */
nav:has(> .pagination) { display: flex; justify-content: center; width: 100%; }

.pagination {
  /* ---- palette (tweak these to recolor) ---- */
  --pg-accent:   #ff6b6b;   /* primary bubble colour */
  --pg-accent-2: #4dabf7;   /* secondary bubble colour */
  --pg-bg:       #ffffff;   /* idle bubble background */
  --pg-text:     #4a90d9;   /* idle number colour */
  --pg-border:   #cfe2ff;   /* idle border + 3D shadow */
  --pg-hover-bg: #eaf4ff;

  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;   /* center the page bubbles */
  align-items: center;
  gap: 10px;
  width: 100%;                          /* span the page so centering is true */
  padding: 8px 0;
  margin: 24px auto;                    /* also center the list box itself */
  list-style: none;
  font-family: 'Fredoka', 'Comic Sans MS', system-ui, sans-serif;
}

/* kill Bootstrap's overlapping negative margins so bubbles sit apart */
.pagination .page-item { margin: 0 !important; display: inline-flex; }

.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px !important;               /* circle for 1 digit, pill for more */
  background: var(--pg-bg) !important;
  color: var(--pg-text) !important;
  border: 2px solid var(--pg-border) !important;
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: 0 4px 0 var(--pg-border);          /* chunky 3D base */
  transition: transform .15s ease, box-shadow .15s ease,
              background-color .15s ease, color .15s ease;
  cursor: pointer;
}

/* hover / keyboard focus: gentle pop */
.pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.pagination .page-item:not(.active):not(.disabled) .page-link:focus {
  transform: translateY(-3px);
  background: var(--pg-hover-bg) !important;
  color: var(--pg-accent) !important;
  box-shadow: 0 7px 0 var(--pg-border);
  outline: none;
}

/* pressed: squish the 3D shadow */
.pagination .page-item:not(.active):not(.disabled) .page-link:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--pg-border);
}

/* current page: filled gradient bubble, slightly bigger */
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .12);
  transform: scale(1.08);
  font-weight: 700;
}

/* disabled (e.g. greyed prev/next) */
.pagination .page-item.disabled .page-link {
  background: #f1f3f7 !important;
  color: #a9b4c4 !important;
  border-color: #e5e9f0 !important;
  box-shadow: 0 4px 0 #e5e9f0;
  cursor: not-allowed;
  transform: none;
}

/* Prev / Next pills — a touch wider, arrow a bit bolder */
.pagination .page-item.next .page-link,
.pagination .page-item.previous .page-link { padding: 0 18px; }
.pagination .page-item .page-link span[aria-hidden="true"] { font-size: 20px; font-weight: 700; }

/* the wordy "Next 1 items" label: keep it small, hide on phones */
.pagination .page-item .label { font-size: 13px; font-weight: 600; }
@media (max-width: 576px) {
  .pagination .page-item .label { display: none; }
  .pagination .page-link { min-width: 40px; height: 40px; font-size: 16px; }
}

/* keep screen-reader text hidden if the theme hasn't already */
.pagination .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .pagination .page-link { transition: none; }
}