/* -----------------------------------------------
   Front Page — Reverse-Chron Post List
   ----------------------------------------------- */

.valencia-content {
  /* padding-block, NOT the two-value shorthand. This sheet prints after
     the mobile gutter rule, so a shorthand zeroed the 7.5% side padding
     and list pages rendered flush to the screen edge below 1000px. */
  padding-block: var(--wp--preset--spacing--xxl);
}

/* A full-bleed colour band as the last child ends the page: the wrapper's
   80px bottom padding otherwise shows as a strip of page background
   between the band and the footer, which reads as a gap rather than a
   join. The band's own bottom padding already spaces its contents.
   Top padding is untouched -- only the closing edge is at issue. */
.valencia-content:has(> .alignfull.has-background:last-child) {
  padding-bottom: 0;
}

.valencia-post-item {
  border-top: 1px solid var(--wp--custom--hairline);
  padding: var(--wp--preset--spacing--sm) 0;
}

.valencia-post-item:first-child {
  border-top: none;
}

.valencia-post-item-title {
  font-size: var(--wp--preset--font-size--medium);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  margin: 0;
}

.valencia-post-item-title a {
  border-bottom: 1px solid transparent;
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
}

.valencia-post-item-title a:hover {
  border-bottom-color: currentColor;
}

.valencia-post-item-date {
  color: var(--wp--preset--color--muted);
  white-space: nowrap;
  font-size: var(--wp--preset--font-size--small);
  margin: 0;
}

.valencia-pagination {
  margin-top: var(--wp--preset--spacing--xxxl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--xs);
}

/* Numbered pill row. Every page number is a pill sized off the xs step;
   the current page is filled solid and the rest are outlined at the
   theme's hairline weight, so the row reads as one control rather than a
   line of loose links. Core prints the numbers inside their own wrapper,
   so the gap above governs prev/next spacing and this one governs the
   numbers between them. */
.valencia-pagination .wp-block-query-pagination-numbers {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
}

/* One rule for every pill: the number links, the current-page marker and
   the two ghost arrows. Core gives each a different class, so they are
   listed rather than matched by a shared one. */
.valencia-pagination .page-numbers,
.valencia-pagination .wp-block-query-pagination-previous,
.valencia-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 2.25rem square, the size the approved mockup uses
     (valencia-mockups/pagination-options.html, option 2). Height is set,
     not min-height: the padding below governs the horizontal size so a
     two-digit page number still fits, while the box stays 36px tall. */
  /* border-box so 2.25rem is the rendered size, not 2.25rem plus the
     padding and border on each side (that arithmetic is what made the
     nav overlay 620px wide in a 570px viewport, PRD item 21). The theme
     has no global reset, so state it here. */
  box-sizing: border-box;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--wp--preset--spacing--xs);
  border: 1px solid var(--wp--custom--hairline);
  border-radius: 2em;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1;
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Prev/next are ghosts: the same pill, no outline, so the numbers carry
   the row and the arrows sit either side without competing. */
.valencia-pagination .wp-block-query-pagination-previous,
.valencia-pagination .wp-block-query-pagination-next {
  border-color: transparent;
  color: var(--wp--preset--color--muted);
}

/* Current page: filled, and the ink/surface pair keeps the contrast in
   the palette rather than in a hardcoded pair. */
.valencia-pagination .page-numbers.current {
  background: var(--wp--preset--color--ink-deep);
  border-color: var(--wp--preset--color--ink-deep);
  color: var(--wp--preset--color--surface);
}

/* The ellipsis core prints between distant page runs is not a control. */
.valencia-pagination .page-numbers.dots {
  border-color: transparent;
  color: var(--wp--preset--color--muted);
}

.valencia-pagination .page-numbers:hover,
.valencia-pagination .wp-block-query-pagination-previous:hover,
.valencia-pagination .wp-block-query-pagination-next:hover {
  background: var(--wp--preset--color--wash);
  border-color: var(--wp--custom--hairline);
  color: var(--wp--preset--color--ink-deep);
}

.valencia-pagination .page-numbers:focus-visible,
.valencia-pagination .wp-block-query-pagination-previous:focus-visible,
.valencia-pagination .wp-block-query-pagination-next:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink-deep);
  outline-offset: 2px;
}