/* ══════════════════════════════════════════════════════════════
   PAGINATION — shared structure for resources/views/shared/pagination.blade.php

   Every domain renders the same markup, so the layout lives here once. Themes
   only restate colour and type through the --pg-* properties below, set on their
   own wrapper or on :root. Nothing here hard-codes a palette, so a new site needs
   a variable block and no new rules.
   ══════════════════════════════════════════════════════════════ */

.site-pagination {
  --pg-font:          inherit;
  --pg-size:          11px;
  --pg-tracking:      .88px;
  --pg-gap:           6px;
  --pg-pad-y:         8px;
  --pg-pad-x:         12px;
  --pg-radius:        0px;
  --pg-fg:            #55534e;
  --pg-bg:            transparent;
  --pg-border:        #e2ded6;
  --pg-hover-fg:      #1a1a18;
  --pg-hover-bg:      #efece6;
  --pg-current-fg:    #ffffff;
  --pg-current-bg:    #1a1a18;
  --pg-current-border:#1a1a18;
  --pg-disabled-fg:   #b8b4ac;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--pg-gap);
  margin: 3rem 0 1rem;
  font-family: var(--pg-font);
}

.site-pagination-pages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pg-gap);
}

.site-pagination-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--pg-pad-y) var(--pg-pad-x);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius);
  background: var(--pg-bg);
  color: var(--pg-fg);
  font-size: var(--pg-size);
  letter-spacing: var(--pg-tracking);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  /* Keeps every box the same height whether it holds "1" or "Next →". */
  min-width: 36px;
  justify-content: center;
  transition: color .15s, background-color .15s, border-color .15s;
}

a.site-pagination-link:hover {
  color: var(--pg-hover-fg);
  background: var(--pg-hover-bg);
  border-color: var(--pg-hover-fg);
}

.site-pagination-link.is-current {
  color: var(--pg-current-fg);
  background: var(--pg-current-bg);
  border-color: var(--pg-current-border);
}

.site-pagination-link.is-disabled {
  color: var(--pg-disabled-fg);
  border-color: var(--pg-border);
  cursor: default;
}

/* The arrows sit in their own <span> so screen readers can skip them, which
   exposes them to whatever a theme does to a bare span — RealityBlow gives every
   one 8px of padding, which pushed the Prev/Next boxes half again as tall as the
   numbers beside them. Decorative, so it is reset outright rather than inherited. */
.site-pagination-link > span {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: 1;
}

.site-pagination-gap {
  color: var(--pg-disabled-fg);
  font-size: var(--pg-size);
  padding: 0 2px;
}

@media (max-width: 640px) {
  .site-pagination {
    --pg-pad-x: 9px;
    --pg-size: 10px;
  }
}