/*
Theme Name:  Stated and Unstated
Theme URI:   https://bonus-spins.uk/
Description: Plain print for bonus-spins.uk, built on Astra. This site takes every claim an offer makes and files it by one question: where could a reader go and check this before committing anything. Printed on the banner, buried in the terms, held in a public register, shown only once the cashier is open, or not knowable at all until the money is already in. The sheet follows the filing. Stone stock, a warm near-black for whatever has genuinely been put in writing, sea green for a claim that can be checked and dark plum for one that nobody states. Bare paper is left bare on purpose, because on this site an empty space is not spare room, it is the shape of a question nobody has answered. Switching the theme on puts the colours, the faces, the printed width and both menus into settings Astra already keeps, and builds the menus from whatever Stated Terms has published. The theme prints the leaf and stops: Stated Terms writes on it, Term Slips files the comparisons.
Version:     1.0.0
Tags: custom-colors, custom-menu, editor-style, full-width-template, one-column
Requires at least: 6.0
Text Domain: ppr
Requires PHP: 7.4
Template:    astra
License:     GPL-2.0-or-later
License URI: https://spdx.org/licenses/GPL-2.0-or-later.html
Author:      Stated and Unstated
Author URI:  https://bonus-spins.uk/
*/

/* ---------------------------------------------------------------- *\
   HOW TO READ THIS FILE

   It runs in the order a leaf is read: what the leaf is printed with,
   then the leaf, the steps across its head, the lede, the prose, the
   figures, and the helpline that closes it. Each mark is set down
   beside the part of the leaf that uses it rather than collected into
   a pound at the back, so that opening the file at the prose shows
   both the prose and everything the prose is punctuated with.

   Within a rule the declarations go box first, then type, then
   colour: what the thing is, then how it is set, then what it is
   printed in. That is the order a compositor would work in and it is
   the order these rules were decided in.
\* ---------------------------------------------------------------- */

/* ---------------------------------------------------------------- *\
   WHAT THE LEAF IS PRINTED WITH

   One list, read by Stated Terms and Term Slips alike. Neither plugin
   keeps a colour, a face or a space of its own, so everything on
   bonus-spins.uk can be found and altered from here.

   Each bracketed number is a contrast ratio. They were computed with
   the WCAG 2.1 formula for relative luminance, measured against the
   stock a colour is genuinely printed on and not against white, and
   none of them was settled by looking. The bars: 4.5 where lettering
   falls under 24px, 3.0 from 24px up, and 3.0 for a line or an edge
   carrying meaning without help.
\* ---------------------------------------------------------------- */
:root {
  --sl-paper: #F6F3F5;    /* the stone stock the leaf is printed on */
  --sl-panel: #EBE5E9;    /* a banded row, one cell of a comparison */
  --sl-panel-2: #DFD7DD;  /* the cell under the light, and the age stamp */

  --sl-ink: #1B161A;      /* what has been put in writing. 16.20 stock, 14.38 band, 12.67 lit */
  --sl-ink-2: #544B52;    /* what is noted beneath it. 7.61, 6.75, 5.95 */

  --sl-said: #146450;     /* checkable. 6.42, 5.70, 5.02, and white on it 7.07 */
  --sl-said-d: #0D4435;   /* that same claim under the pointer. 10.05 on stock, white on it 11.08 */
  --sl-unsaid: #5A1A52;   /* stated nowhere at all. 11.18, 9.93, 8.74, white on it 12.32 */

  --sl-rule: #7B6C76;     /* 4.49 on stock, over the 3.0 a meaningful edge is held to */
  --sl-hair: #DFD5DC;     /* 1.30: a crease the leaf folds along */
  --sl-hair-5: #C8BCC5;   /* 1.66: the deeper crease, where one part gives way to the next */

  /* Green and plum are a pair of claims and never a pair of ornaments.
     They sit 1.74 apart in lightness as much as in hue, so they stay two
     claims to a reader who cannot separate the hues, and nothing on this
     site leaves colour to carry a meaning unaided: wherever either one
     appears, the words next to it have already said which it is. */

  /* Three faces. Nothing is shipped and nothing is fetched over the
     wire: a serif heads the leaf, the reader's own interface face
     sets the sentences, and a monospace holds the figures so that a
     column of amounts lines up on the digit.

     Each stack names its own middle first. Those are the families a
     machine is likeliest to be carrying; the anchor and the last
     resort are added around them in the stack itself. Written this
     way the three can be compared down the page. */
  --sl-book: "Palatino Linotype", Palatino, "Times New Roman";
  --sl-screen: -apple-system, "Segoe UI", Roboto;
  --sl-slug: Menlo, Consolas, "Liberation Mono";

  --sl-letter: Georgia, "Iowan Old Style", var(--sl-book), serif;
  --sl-prose: system-ui, var(--sl-screen), "Helvetica Neue", Arial, sans-serif;
  --sl-numeral: ui-monospace, SFMono-Regular, "SF Mono", var(--sl-slug), monospace;

  --sl-t-cap: 0.8125rem;  /* 13px: a caption, a cell label, the closing band */
  --sl-t-base: 1.0625rem; /* 17px: anything written in sentences */
  --sl-t-lead: 1.25rem;   /* 20px: the lede that opens a leaf */
  --sl-t-h3: 1.375rem;
  --sl-t-h2: 1.75rem;
  --sl-t-h1: 2.375rem;
  --sl-t-fig: 1.75rem;    /* a figure standing in a cell of a slip */

  --sl-step: 0.5rem;
  --sl-gap: 1rem;
  --sl-gap-2: 1.75rem;
  --sl-gap-3: 2.75rem;

  --sl-leaf: 1140px;      /* the printed width, head to foot */
  --sl-gutter: 32px;      /* the trim, which stays outside the printed width */
  --sl-edge: 2px;         /* the heavy edge, inked */
  --sl-line: 1px;         /* the ordinary edge */
}

/* ---------------------------------------------------------------- *\
   THE LEAF

   The printed width is held between two trims, and the trims are part
   of the box rather than something switched on at a boundary: the
   outer box is the printed width plus both trims, and the trims are
   padding on that box. Below the point where the whole thing fits,
   the print gives way and the trims stay, which is the behaviour
   wanted and needs no query to get it. Nothing inside the leaf then
   asks for a horizontal inset of its own, and sentences are never set
   to a shorter line than the table standing next to them.

   The ground is deliberately bare. On a site about what has and has
   not been stated, blank stock is carrying an argument: it is what an
   unanswered question looks like. Ruling a pattern across it would be
   printing something this site has not got.
\* ---------------------------------------------------------------- */
body.ppr-leaf {
  font-family: var(--sl-prose);
  font-size: var(--sl-t-base);
  line-height: 1.6;
  background-color: var(--sl-paper);
  color: var(--sl-ink);
}

.ast-container,
.site-content .ast-container {
  box-sizing: border-box;
  max-width: calc(var(--sl-leaf) + var(--sl-gutter) + var(--sl-gutter));
  padding-left: var(--sl-gutter);
  padding-right: var(--sl-gutter);
  margin-left: auto;
  margin-right: auto;
}

/* Astra is told to lay its header and footer rows out at the content width, so those rows
   already come out the printed width and want the trim and nothing more. */
.ast-builder-grid-row-container-inner {
  box-sizing: border-box;
  padding-left: var(--sl-gutter);
  padding-right: var(--sl-gutter);
}

/* ---------------------------------------------------------------- *\
   THE STEPS ACROSS THE HEAD

   Seven of them, one for each place a claim can be checked, running
   from the banner a reader sees first to the things only the passage
   of money reveals. They stand between the wordmark and the age
   stamp. All three are objects of a fixed size, so there is no width
   at which squeezing seven names beats folding them away, and below
   1200 they fold. One filter in functions.php settles that, and it is
   the single width boundary anywhere on bonus-spins.uk.
\* ---------------------------------------------------------------- */
.ast-primary-header-bar,
.main-header-bar {
  border-bottom: var(--sl-edge) solid var(--sl-ink);
  background-color: var(--sl-paper);
}

.main-header-menu > .menu-item > a.menu-link {
  font-family: var(--sl-letter);
  color: var(--sl-ink);
}

.main-header-menu .sub-menu {
  border: var(--sl-line) solid var(--sl-rule);
  background-color: var(--sl-panel);
}

/* A step with pages under it opens a fold. One column of a fold hangs
   off the bottom of the window somewhere past nine entries, so
   functions.php counts what is published and asks here for the wider
   cut rather than guessing from the plan. */
.menu-item.ppr-fold--pair > .sub-menu {
  width: 32rem;
  columns: 2;
}

.menu-item.ppr-fold--triple > .sub-menu {
  width: 46rem;
  columns: 3;
}

/* The last steps sit close to the right-hand trim, so their folds open
   inwards and nothing opens past the glass. */
.menu-item.ppr-fold--inward > .sub-menu {
  right: 0;
  left: auto;
}

/* A step's own page is the first line of its fold. */
.menu-item .ppr-fold__own > .menu-link {
  font-weight: 700;
}

/* ---------------------------------------------------------------- *\
   THE LEDE

   A title, and beneath it the sentence that says what this leaf will
   and will not be able to tell anybody. Headings take the serif;
   everything else is the reader's own face.

   Heights are fluid between two rungs of the ladder rather than
   switched at a width, so a title shrinks as the glass narrows and
   this file keeps no type boundary at all. Both ends of every clamp
   are rungs already on the ladder, so nothing is ever set to a height
   the ladder does not hold.
\* ---------------------------------------------------------------- */
body.ppr-leaf h1,
body.ppr-leaf h2,
body.ppr-leaf h3,
body.ppr-leaf h4 {
  font-family: var(--sl-letter);
  font-weight: 600;
  color: var(--sl-ink);
  line-height: 1.22;
}

body.ppr-leaf h1 { font-size: clamp(var(--sl-t-h2), 5vw, var(--sl-t-h1)); }
body.ppr-leaf h2 { font-size: clamp(var(--sl-t-h3), 3.6vw, var(--sl-t-h2)); }
body.ppr-leaf h3 { font-size: var(--sl-t-h3); }

/* The caption mark, which labels a cell or a column. It is set down
   here because the lede is where a reader first runs into one. */
.sl-caption {
  display: block;
  letter-spacing: 0.09em;
  font-family: var(--sl-prose);
  font-size: var(--sl-t-cap);
  text-transform: uppercase;
  color: var(--sl-ink-2);
}

/* ---------------------------------------------------------------- *\
   THE PROSE, AND THE TWO MARKS SET INTO IT

   Sentences, the links through them, a clause lifted out into the
   margin and an exhibit under a frame. A link goes somewhere the
   reader can check for themselves, which is the reason links take the
   green and nothing else in a sentence does.
\* ---------------------------------------------------------------- */
body.ppr-leaf a {
  text-decoration-thickness: 1px;
  color: var(--sl-said);
  text-underline-offset: 2px;
}

body.ppr-leaf a:hover,
body.ppr-leaf a:focus {
  color: var(--sl-said-d);
}

/* The margin note: a clause taken out of the terms and stood against
   the edge it had been sitting behind. */
.sl-margin {
  border-left: 3px solid var(--sl-rule);
  margin: var(--sl-gap-2) 0;
  padding: var(--sl-gap);
  background-color: var(--sl-panel);
}

.sl-margin p:last-child {
  margin-bottom: 0;
}

/* The exhibit: a picture of the thing being quoted, framed, with its
   caption under the picture and inside the same frame. Two insets are
   allowed on this leaf and no others, this one and a table cell, both
   of them objects whose edge the reader can actually see. */
.sl-panel {
  border: var(--sl-line) solid var(--sl-rule);
  margin: var(--sl-gap-2) 0;
  padding: var(--sl-step);
  background-color: var(--sl-paper);
}

.sl-panel img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sl-panel figcaption {
  padding: var(--sl-step) var(--sl-step) 0;
  font-size: var(--sl-t-cap);
  color: var(--sl-ink-2);
}

/* ---------------------------------------------------------------- *\
   THE FIGURES

   Everything numeric takes the monospace and tabular digits, so a
   column of amounts lines up on the digit. The two coloured figure
   marks are the written form of this site's one distinction, and they
   are the only places either signal colour is ever spent.
\* ---------------------------------------------------------------- */
.sl-plateau,
.sl-said-fig,
.sl-unsaid-fig,
.sl-rev,
.sl-tel {
  font-variant-numeric: tabular-nums;
  font-family: var(--sl-numeral);
}

.sl-said-fig { color: var(--sl-said); }
.sl-unsaid-fig { color: var(--sl-unsaid); }

/* A helpline number is dialled off the screen, so it holds one line. */
.sl-tel { white-space: nowrap; }

/* The ruler: a single figure between two edges, which is how a
   quantity is quoted here when it is the point of the paragraph above
   it rather than a detail inside one. */
.sl-ruler {
  border-top: var(--sl-line) solid var(--sl-rule);
  border-bottom: var(--sl-line) solid var(--sl-rule);
  margin: var(--sl-gap-2) 0;
  padding: var(--sl-step) 0;
  text-align: center;
}

.sl-ruler__fig {
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  font-family: var(--sl-numeral);
  font-size: var(--sl-t-cap);
  color: var(--sl-ink-2);
}

/* The age stamp, struck rather than written. */
.sl-18 {
  display: inline-block;
  border: var(--sl-line) solid var(--sl-ink);
  padding: 0 0.3em;
  margin-right: 0.4em;
  background-color: var(--sl-panel-2);
  font-family: var(--sl-numeral);
  font-size: var(--sl-t-cap);
  font-weight: 700;
}

/* Read out to a screen reader, printed for nobody. */
.sl-offscreen {
  position: absolute;
  clip-path: inset(50%);
  overflow: hidden;
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- *\
   THE HELPLINE, WHICH CLOSES THE LEAF

   Past the last question comes what this leaf is, what it was checked
   against, and where somebody who wants to stop should go. The fields
   are laid out as a line of panels that wraps when it runs out of
   room, each one taking an equal share of whatever line it lands on.

   Astra puts its copyright element through wpautop() and
   wp_kses_post() before a page ever sees it, so that element is given
   one line of spans in functions.php and arranged into a band here.
\* ---------------------------------------------------------------- */
.ppr-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-gap-2);
  border-top: var(--sl-edge) solid var(--sl-ink);
  padding-top: var(--sl-gap-2);
}

.ppr-block > * {
  flex: 1 1 16rem;
}

.ppr-field__cap {
  display: block;
  border-bottom: var(--sl-line) solid var(--sl-rule);
  padding-bottom: var(--sl-step);
  margin-bottom: var(--sl-step);
  letter-spacing: 0.09em;
  font-size: var(--sl-t-cap);
  text-transform: uppercase;
  color: var(--sl-ink-2);
}

.ppr-field__val {
  display: block;
  font-size: var(--sl-t-cap);
}

.ppr-field__val--fig {
  font-family: var(--sl-numeral);
}

/* Three short fields on one line: what the leaf reckons in, which
   revision it is, and the stamp. */
.ppr-field-trio {
  display: flex;
  gap: var(--sl-gap);
}

.ppr-field-trio > * {
  flex: 1 1 0;
}

.ppr-imprint {
  margin: 0 0 var(--sl-step);
  font-family: var(--sl-letter);
  font-size: var(--sl-t-h3);
}

.ppr-where {
  margin: 0;
  padding: 0;
  font-size: var(--sl-t-cap);
  list-style: none;
}

.ppr-where li {
  margin-bottom: var(--sl-step);
}

/* The closing band, creased off above with the deeper of the two
   folds, because this is where the leaf stops being about an offer. */
.ppr-closing {
  display: block;
  border-top: var(--sl-line) solid var(--sl-hair-5);
  padding-top: var(--sl-step);
  font-size: var(--sl-t-cap);
}

.ppr-closing-small {
  display: block;
  font-size: var(--sl-t-cap);
  color: var(--sl-ink-2);
}

/* The same words again, under the folded steps once a phone has
   opened the drawer. */
.ppr-drawer-note {
  padding: var(--sl-gap);
  font-size: var(--sl-t-cap);
}

/* Nothing on this leaf moves of its own accord. What follows is a
   promise kept rather than a fault patched: whatever a block or a
   plugin adds later, a reader who has asked for stillness gets it. */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}