/*
 * Theme additions
 *
 * Written by hand and loaded after style.css. It is not compiled from the Sass
 * in assets/stylesheets/, because those sources are no longer complete -
 * recompiling style.scss produces roughly 15% of the shipped stylesheet and
 * drops every button and nav rule. Until the sources are restored, style.css
 * cannot be regenerated, so later work goes here.
 */

/* Blog pagination ------------------------------------------------------- */

.pagination-nav {
  margin-top: 3rem;
}

.pagination-nav .nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination-nav .nav-item {
  margin: 0;
}

.pagination-nav .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 1em;
  border: 1px solid var(--dark-green-color);
  border-radius: 2em;
  color: var(--dark-green-color);
  font-family: var(--sans-serif);
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s linear, color .15s linear;
}

.pagination-nav a.page-numbers:hover,
.pagination-nav a.page-numbers:focus-visible {
  background-color: var(--dark-green-color);
  color: var(--extra-light-green-color);
}

.pagination-nav .page-numbers.current {
  background-color: var(--dark-green-color);
  color: var(--extra-light-green-color);
}

.pagination-nav .page-numbers.dots {
  min-width: 1.5rem;
  padding: 0;
  border-color: transparent;
}

/* Blog tiles ------------------------------------------------------------ */

/* These rules are scoped to the tile itself, not to the blog grid, because the
   same tile is reused in the homepage carousel. Scoping them to the grid left
   the carousel headings with the browser default underline. */

.tiles-grid {
  align-items: stretch;
}

.post-grid-tile {
  position: relative;
  height: 100%;
}

.post-grid-tile .copy-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.post-grid-tile .content-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .75rem;
}

/* Titles run to 103 characters, so cap them rather than let one long title
   set the height of its whole row. */
.post-grid-tile .heading {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-grid-tile .heading a {
  color: inherit;
  text-decoration: none;
}

.post-grid-tile .heading a:hover,
.post-grid-tile .heading a:focus-visible {
  text-decoration: underline;
}

.post-grid-tile .content-container p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Reads as a cue rather than a control, since the whole tile is clickable. */
.post-grid-tile .button.with-arrow {
  align-self: flex-start;
  margin-top: auto;
}

/* The theme sets ".grid-tile a { position: relative }", which is more specific
   than ".area-link" and collapses the click overlay to zero height. */
.post-grid-tile .area-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Links inside the copy sit above the overlay so they stay focusable. */
.post-grid-tile .copy-wrapper a {
  position: relative;
  z-index: 4;
}

/* 404 pages ------------------------------------------------------------- */

.error-section {
  padding-block: 4rem;
}

.error-section .error-code {
  margin: 0 0 .25rem;
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1;
  color: var(--corn-yellow-color);
}

.error-section h1 {
  margin: 0 0 .5rem;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

.error-actions .button.is-ghost {
  background-color: transparent;
  border-color: currentColor;
}

/* The sorting line */

.error-line-section {
  overflow: hidden;
  padding-bottom: 0;
}

.error-line-section .conveyor {
  position: relative;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
}

/* The belt itself: a dark band with tread marks running across it. */
.error-line-section .conveyor::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background-color: var(--extra-dark-green-color);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, .07) 0 2px,
    transparent 2px 22px
  );
  border-top: 3px solid rgba(255, 255, 255, .16);
}

.error-line-section .conveyor-belt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  width: max-content;
  padding-bottom: 26px;
  animation: atv-conveyor 34s linear infinite;
}

/* A slatted produce crate rather than a plain box. */
.error-line-section .crate {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 86px;
  background-color: #c9a26b;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, .13) 0 3px,
    transparent 3px 17px
  );
  border: 3px solid #8a6a33;
  border-radius: 4px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .16);
}

/* Sized on both axes. The icons vary a lot in shape - carrots are 28x66,
   cabbage is 66x60 - so constraining width alone made the tall ones tower
   out of the crate. */
.error-line-section .crate-produce {
  width: auto;
  height: auto;
  max-width: 70px;
  max-height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .12));
}

/* The one that came off the line: empty, tipped, and dropped a little. */
.error-line-section .crate.is-empty {
  background-color: transparent;
  background-image: none;
  border-style: dashed;
  border-color: var(--corn-yellow-color);
  box-shadow: none;
  transform: rotate(-6deg) translateY(6px);
}

@keyframes atv-conveyor {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .error-line-section .conveyor-belt { animation: none; }
}

@media screen and (max-width: 600px) {
  .error-line-section .crate { width: 84px; height: 68px; }
  .error-line-section .crate-produce { max-width: 54px; max-height: 46px; }
}