/* ==========================================================================
   THE GENESYS - shared components

   Small pieces used by more than one redesigned screen. They live here rather
   than in a screen stylesheet so a second user of a component cannot end up
   rendering its markup with no styles - which is exactly what happened when
   the product card lived in shop.css, and again when the stat tile lived in
   reserved.css and the creator store reused its classes.

   Currently: the stat tile (reserved-area overview, creator store).
   ========================================================================== */

.gns-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.gns-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
}
.gns-stat__num {
  font-family: var(--gns-font);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--gns-text);
}
.gns-stat__label {
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gns-muted);
}

/* ------------------------------------------------------ appearance switch - */
/*
 * The three-option Chiaro / Scuro / Auto group this block used to style is
 * gone: the control is now a single sun/moon icon button rendered by
 * genesys_redesign_theme_switch() and styled in header.css, where the rest of
 * the bar lives.
 *
 * Removed with it: .gns-theme__label, .gns-theme__opts, .gns-theme__opt and
 * .gns-theme__host - none of those elements are emitted any more, and
 * .gns-theme itself is a <button>, so the old `flex-direction: column` base
 * and the `margin-right: 14px` that came with the account-menu placement were
 * both fighting the bar's own spacing.
 */

/* ========================================================================
   Pagination
   ------------------------------------------------------------------------
   Shared by the secondary archives (best-seller, sales, favourites,
   printers) and the shop, which render the same parent markup -
   woocommerce/loop/pagination.php - under different roots. It lived in
   archive.css until the shop, which does not load that file and does not
   carry `body.gns-archive`, was found showing all 21 page numbers in the
   parent's #7D7D7D: 3.81:1 against the light ground, and only 4.52 against
   the dark one, so it was marginal in both themes rather than wrong in one.

   Scoped to the two redesigned roots even though this file is global, so
   pagination on any page that has not been redesigned is left alone.
   ===================================================================== */

body.gns-archive .pagination-container,
.gns-shop .pagination-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/*
 * The parent paints the ACTIVE state on the wrapping div (#0F0F10), not on
 * its link. Styling only the <a> left dark text on a near-black wrapper in
 * the light theme - 1.78:1. The wrapper is neutralised and the state moved
 * onto the link, so it flips with the palette.
 */
body.gns-archive .pagination-container > div,
.gns-shop .pagination-container > div {
  display: inline-flex;
  /*
   * ⚠️ The parent gives this wrapper a FIXED box - `.pagination-container div
   * { width: 32px; height: 32px }`, and 26px inside its own
   * `@media (max-width: 576px)`. It has to size to the link instead; see the
   * note on the link below for what the fixed box was doing on a phone.
   */
  width: auto;
  height: auto;
  background: none !important;
  border-radius: 10px;
}

body.gns-archive .pagination-container a,
.gns-shop .pagination-container a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*
   * ⚠️ `position: static` is the load-bearing one. The parent takes the link
   * out of the flow -
   *
   *     .pagination-container div a { position: absolute; top: 6px; left: 0;
   *                                   width: 100%; height: 100% }
   *
   * - so it contributes NO width to the wrapper above, which stayed at the
   * parent's fixed 32px (26px under 576px) while the redesign gave the link a
   * real 34px / 44px target. On a phone that put the cells on a 26 + 8 = 34px
   * pitch under 44px-wide pills: every page number overlapped its neighbour by
   * 10px, which is the collision on the printers archive. Back in the flow the
   * wrapper sizes to the link and the 8px gap is the gap.
   *
   * `top: 6px` went with it - that offset is what dropped the numerals below
   * the centre of their own cell.
   */
  position: static;
  width: auto;
  /* 34px keeps the design's density on desktop; the touch floor below raises
     it to 44 where a finger is the pointer. */
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--gns-border-strong);
  border-radius: 10px;
  font-size: 13px;
  color: var(--gns-body) !important;
  text-decoration: none !important;
  transition: border-color .15s ease, color .15s ease;
}
body.gns-archive .pagination-container a:hover,
.gns-shop .pagination-container a:hover {
  border-color: var(--gns-cyan);
  color: var(--gns-text) !important;
}
body.gns-archive .pagination-container .active-page-pagination a,
.gns-shop .pagination-container .active-page-pagination a {
  background: var(--gns-cyan-tint-2);
  border-color: var(--gns-border-cyan);
  color: var(--gns-text) !important;
  font-weight: 700;
}

/*
 * Coarse pointers get the 44px target the WCAG 2.2 target-size rule asks for.
 * Gated on the pointer, not on a width breakpoint, so a small laptop window
 * keeps the dense design and a tablet does not.
 */
@media (pointer: coarse) {
  body.gns-archive .pagination-container a,
  .gns-shop .pagination-container a {
    min-width: 44px;
    height: 44px;
  }
}