/* renderStacks - the parts only WordPress needs.
 *
 * rs-theme.css and rs-site.css are shared verbatim with the static prototype,
 * and the prototype had no editor, no search and no pagination.  Everything
 * WordPress brings with it that those two have never had to style lives here,
 * so the shared pair stay byte-identical to their source.
 *
 * It loads after both and almost entirely adds.  The two places it adjusts a
 * shared rule are marked where they happen.
 */

/* --------------------------------------------- what the editor writes -- */

/* The classic editor's alignment classes.  Content on this site uses
   alignnone and size-full almost everywhere, with a handful of floats in the
   older posts. */
.rs-prose .alignnone,
.rs-prose .aligncenter { display: block; margin: 1.6rem auto; }

.rs-prose .alignleft {
  float: left;
  margin: .4rem 1.6rem 1rem 0;
}

.rs-prose .alignright {
  float: right;
  margin: .4rem 0 1rem 1.6rem;
}

/* A float must not run past the end of its section. */
.rs-prose > .rs-wrap::after {
  content: "";
  display: block;
  clear: both;
}

/* Phones are too narrow for a float to leave usable text beside it. */
@media (max-width: 40em) {
  .rs-prose .alignleft,
  .rs-prose .alignright {
    float: none;
    margin: 1.6rem auto;
  }
}

/* [caption] and the image block's own figure. */
.rs-prose .wp-caption,
.rs-prose figure.wp-block-image {
  max-width: 100%;
  margin: 1.8rem 0;
}

.rs-prose .wp-caption img,
.rs-prose figure img { display: block; }

.rs-prose .wp-caption-text,
.rs-prose figcaption {
  margin: .6rem 0 0;
  font-size: .92rem;
  color: var(--rs-muted);
}

/* An image in the prose column should not be able to force it wider. */
.rs-prose img,
.rs-prose iframe,
.rs-prose video { max-width: 100%; height: auto; }

/* Galleries are rare here - two posts - so this is deliberately plain. */
.rs-prose .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.8rem 0;
  padding: 0;
  list-style: none;
}

/* WordPress' own accessibility helper, used by core markup and by plugins. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------- forms in content -- */

/* Two pages carry a real form: the checkout details above the Paddle
   buttons, and the Download Link plugin's own form. Neither is the theme's
   markup, so they are styled by element rather than by class. Without this
   they render at the browser default - a 150px white box on a dark page. */

.rs-prose label {
  display: inline-block;
  margin: .9rem .6rem .3rem 0;
  font-weight: 600;
}

.rs-prose input[type="text"],
.rs-prose input[type="email"],
.rs-prose input[type="search"],
.rs-prose textarea,
.rs-prose select {
  display: block;
  width: 100%;
  max-width: 32rem;
  padding: .6rem .8rem;
  font: inherit;
  color: var(--rs-text);
  background: var(--rs-band);
  border: 1px solid var(--rs-line);
  border-radius: 6px;
}

.rs-prose input::placeholder,
.rs-prose textarea::placeholder {
  color: var(--rs-muted);
  /* these placeholders are whole sentences of instruction, so they have to
     stay readable rather than fade into the field */
  opacity: 1;
}

.rs-prose input:focus-visible,
.rs-prose textarea:focus-visible,
.rs-prose select:focus-visible {
  outline: 2px solid var(--rs-accent);
  outline-offset: 1px;
}

.rs-prose input[type="submit"],
.rs-prose button[type="submit"] {
  margin-top: .9rem;
  padding: .55rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: var(--rs-ink);
  background: var(--rs-accent);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

/* --------------------------------------------------------- the Buy page -- */

/* The details asked for before a tier is picked. Boxed, because it is a step
   rather than a note: nothing below it works until it is filled in. */
.rs-buy__details,
.rs-buy__download {
  margin: 1.6rem 0 2.2rem;
  padding: 1.2rem 1.4rem;
  background: var(--rs-surface);
  border: 1px solid var(--rs-line);
  border-radius: 10px;
}

/* Both fields on one line, because they are one step: the order cannot be
   placed until each is filled in. They stack below 34em, where two columns
   would leave neither wide enough to read its own placeholder. */
.rs-buy__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0 1.2rem;
}

.rs-field { margin: 0; min-width: 0; }
.rs-field label { margin-top: 0; }

/* The field is as wide as its column - the 32rem cap in the forms-in-content
   rules above is for a single field in a column of prose, and here it would
   leave the pair ragged. ADJUSTS that rule. */
.rs-buy__fields input[type="text"],
.rs-buy__fields input[type="email"] { max-width: none; }

/* Said before the fields rather than after a failed click, so it is a
   condition of ordering rather than a telling-off. */
.rs-buy__required {
  margin: 0 0 1rem;
  padding-left: .9rem;
  border-left: 3px solid var(--rs-accent);
  color: var(--rs-muted);
  font-size: .95rem;
}

.rs-buy__required strong { color: var(--rs-text); }

.rs-buy__error {
  margin: 1rem 0 0;
  color: var(--rs-accent);
  font-weight: 600;
}

.rs-prose [aria-invalid="true"] { border-color: var(--rs-accent); }

/* The order column holds one button and should not take a share of the
   width. ADJUSTS rs-site.css, which right-aligns this cell. */
.rs-table td:last-child {
  width: 1%;
  white-space: nowrap;
}

/* ADJUSTS .rs-btn from rs-site.css: a full-size button makes every row of a
   nine-row table as tall as a hero button. */
.rs-table .rs-btn {
  padding: .42rem .95rem;
  font-size: .92rem;
}

/* ------------------------------------------------------------ search -- */

.rs-search {
  display: flex;
  gap: .6rem;
  margin: 1.2rem 0 2rem;
  max-width: 32rem;
}

.rs-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: .6rem .8rem;
  font: inherit;
  color: var(--rs-text);
  background: var(--rs-band);
  border: 1px solid var(--rs-line);
  border-radius: 6px;
}

.rs-search input[type="search"]:focus-visible {
  outline: 2px solid var(--rs-accent);
  outline-offset: 1px;
}

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

/* the_posts_pagination() nests its links in a nav; the listing passes
   .rs-note so the type already matches the page. */
.rs-note .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: 2rem;
}

.rs-note .page-numbers {
  display: inline-block;
  padding: .35rem .7rem;
  border: 1px solid var(--rs-line);
  border-radius: 6px;
  text-decoration: none;
}

.rs-note .page-numbers.current {
  border-color: var(--rs-accent);
  color: var(--rs-accent);
}

.rs-note .page-numbers.dots { border-color: transparent; }