/*
Theme Name:  The Clearing Clock
Theme URI:   https://mobile-free-spins.uk/
Author:      The Clearing Clock
Author URI:  https://mobile-free-spins.uk/
Template:    astra
Requires at least: 6.0
Version:     1.0.0
Requires PHP: 7.4
Tags: accessibility-ready, custom-colors, custom-menu, full-width-template, translation-ready
License:     GNU General Public License, version 2 or later
Text Domain: chr
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Description: A stopwatch laid over free spins, for readers on mobile-free-spins.uk. A phone session is spent in minutes, so this site quotes an offer as a duration before it quotes it as a number: how long before the first spin, how quickly a pile of spins goes, how many evenings a wagering requirement wants, how many days the money sits once it is won. The sheet is ruled like tape coming off a stopwatch. Grey ground kept cool, a very dark blue for anything read off the dial, indigo for a span this site has put a clock on and carmine for a span the reader spends and never recovers. Turning the theme on writes those readings, the three faces, the 1140px run and both menus into settings Astra already owns, then builds the menus from whatever the pages plugin has published. Beyond ruling the sheet the theme does nothing: Minute Notes writes what stands on it and Offer Timers puts the clock on the offers.
*/

/* =========================================================================
   HOW THIS FILE IS SET OUT

   Six parts, in the order a reader meets them: the readings first, then
   the run they are printed down, the row of sections above it, the words
   inside it, the marks the words are punctuated with, and the block that
   closes it.

   Inside a rule the declarations run in alphabetical order. On a sheet of
   figures that is the cheapest ordering to check against, because the
   place a property ought to be is the place it is, and nobody has to hold
   a private grouping in mind to see that one is missing.
   ========================================================================= */

/* -------------------------------------------------------------------------
   PART ONE. THE READINGS

   Every colour, face, height and space this site uses is named here and
   nowhere else. Minute Notes and Offer Timers both read these names and
   keep no values of their own, so a change made here is a change made to
   the whole of mobile-free-spins.uk.

   The bracketed numbers are contrast ratios, worked out with the WCAG 2.1
   luminance formula against the surface each colour is actually printed
   on rather than against white, and worked out rather than judged. The
   bars they clear: 4.5 for lettering under 24px, 3.0 at 24px and over,
   3.0 for any line or edge that is carrying meaning by itself.
   ------------------------------------------------------------------------- */
:root {
  /* Three surfaces. Grey and cool rather than warm, because a dial is
     read off a cold ground and nine other sites on this network have
     already taken the warm ones. */
  --cl-paper: #F4F5F7;    /* the tape */
  --cl-panel: #E7EAEE;    /* a banded row, one cell of a reading */
  --cl-panel-2: #D9DEE4;  /* the cell being called out, and the age stamp */

  /* Two inks, neither of them black, because a dial is printed in a very
     dark blue. The first carries what is read, the second what is said
     underneath it. */
  --cl-ink: #15191F;      /* 16.17 on tape, 14.61 on a row, 13.03 when called */
  --cl-ink-2: #4A525C;    /* 7.26, 6.56 and 5.85 on those same three */

  /* Two spans, and they never trade jobs. Indigo is a span this site has
     timed, and the links and the buttons go with it. Carmine is a span
     the reader pays out and does not get back, which is the one thing
     this site exists to put a number on, so it is kept off every piece
     of decoration. The pair stands 1.71 apart in contrast as well as in
     hue, so it survives a reader who cannot sort the hues, and no span
     anywhere is left to colour on its own: the caption beside a figure
     always says which of the two it is. */
  --cl-read: #1F3A6E;     /* 10.19, 9.21, 8.22. White on it 11.12 */
  --cl-read-d: #15284D;   /* 13.34 on tape, white on it 14.56. Under the pointer */
  --cl-cost: #A8324E;     /* 5.96, 5.39, 4.80. White on it 6.50 */

  /* Three weights of line. Only the first may carry meaning, and at 4.37
     on the tape it clears the 3.0 that asks for; it is kept away from
     lettering under 24px. The two tick weights state nothing at all,
     which is precisely why they are allowed to be this faint. */
  --cl-rule: #687481;     /* 4.37: a rule under a heading, the edge of a reading */
  --cl-hair: #D5DBE1;     /* 1.28: the minute tick */
  --cl-hair-5: #B9C2CB;   /* 1.65: the five minute tick */

  /* How far apart those ticks are ruled down the ground. */
  --cl-tick: 20px;
  --cl-tick-5: 100px;

  /* Three faces, none of them shipped and none of them fetched. Headings
     take a serif, sentences take whatever interface face the reader's own
     machine is set in, and figures take a monospace so that two durations
     printed one above the other line up on the digit.

     Each stack is assembled rather than spelled out. The families in the
     middle are the ones a given machine is most likely to actually hold,
     so they are named once and the three stacks are built over them; the
     families at either end are the anchor and the last resort. Putting a
     particular cut of any of this on the wire would add files ahead of
     the first paint, and on a page whose point is a column of elapsed
     times the column has to be straight on that first paint. */
  --cl-serif-held: "Iowan Old Style", "Palatino Linotype", Palatino;
  --cl-ui-held: "Segoe UI", Roboto, "Helvetica Neue";
  --cl-mono-held: SFMono-Regular, "SF Mono", Menlo;

  --cl-letter: Georgia, var(--cl-serif-held), "Times New Roman", serif;
  --cl-prose: system-ui, -apple-system, var(--cl-ui-held), Arial, sans-serif;
  --cl-figurine: ui-monospace, var(--cl-mono-held), Consolas, "Liberation Mono", monospace;

  /* Seven heights, settled once. Sentences sit at 17px and nothing on
     this site is set below the caption step. */
  --cl-t-cap: 0.8125rem;  /* 13px, a caption or a cell label */
  --cl-t-base: 1.0625rem; /* 17px, sentences */
  --cl-t-lead: 1.25rem;   /* 20px, the standfirst under a title */
  --cl-t-h3: 1.375rem;
  --cl-t-h2: 1.75rem;
  --cl-t-h1: 2.375rem;
  --cl-t-fig: 1.75rem;    /* a duration standing in a cell of the schedule */

  /* One step and three multiples of it. Every vertical space on the site
     is one of these four and no fifth one is invented anywhere. */
  --cl-step: 0.5rem;
  --cl-gap: 1rem;
  --cl-gap-2: 1.75rem;
  --cl-gap-3: 2.75rem;

  /* The run: the single column this site is printed down, one width from
     the masthead to the foot, with the gutter held outside it so that no
     block within the run ever wants a horizontal inset of its own. */
  --cl-run: 1140px;
  --cl-gutter: 32px;
  --cl-edge: 2px;         /* the heavy line, struck in the first ink */
  --cl-line: 1px;         /* the ordinary rule */
}

/* -------------------------------------------------------------------------
   PART TWO. THE RUN

   One column, one width, and behind it a ground ruled across like tape
   leaving a stopwatch: a tick every 20px and a heavier one on every
   fifth, so there is something for the eye to count elapsed depth
   against.

   The ground hangs off a class rather than off the bare element. It
   belongs behind this site and has no business behind a login screen or
   inside an oEmbed card, and functions.php is what decides.
   ------------------------------------------------------------------------- */
body.chr-timed {
  background-color: var(--cl-paper);
  background-image:
    repeating-linear-gradient(180deg, var(--cl-hair-5) 0 1px, transparent 1px var(--cl-tick-5)),
    repeating-linear-gradient(180deg, var(--cl-hair) 0 1px, transparent 1px var(--cl-tick));
  color: var(--cl-ink);
  font-family: var(--cl-prose);
  font-size: var(--cl-t-base);
  line-height: 1.6;
}

/*
   The width, in one declaration with no boundary behind it: 1140px of run
   wherever 1140px and two gutters will fit, and whatever is left once the
   two gutters are taken off when they will not. Because it is one rule
   there is no width that applies on only one side of a line, and no
   second, narrower measure anywhere. The masthead, the reading column and
   the closing block are the same box.

   Astra is handed the same 1140 as a setting on the first run. What is
   below says it a second time, so the run survives a visit to the
   Customizer.
   */
.ast-builder-grid-row-container-inner,
.site-content .ast-container,
.ast-container {
  margin-inline: auto;
  max-width: 100%;
  width: min(var(--cl-run), 100% - 2 * var(--cl-gutter));
}

/* -------------------------------------------------------------------------
   PART THREE. THE ROW ABOVE THE RUN

   The wordmark on the left, seven section names across the middle, the
   age stamp on the right. Each of the three is as wide as what it holds
   and none of them will compress, so below 1200 the names fold away
   whole rather than being set in type nobody can read. That boundary is
   Astra's, moved up by a filter in functions.php, and it is the only
   boundary this site keeps.
   ------------------------------------------------------------------------- */
.site-header .main-header-bar,
.ast-primary-header-bar {
  background-color: var(--cl-paper);
  border-bottom: var(--cl-edge) solid var(--cl-ink);
}

body.chr-timed .main-header-menu > .menu-item > .menu-link {
  color: var(--cl-ink);
  font-family: var(--cl-letter);
}

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

/*
   A section name opens the list of splits beneath it. One column of them
   runs off the foot of a laptop window at around ten entries, so
   functions.php counts what has actually been published and asks here for
   a second column or a third. The width follows the count rather than the
   plan.
   */
.menu-item.chr-splits--two > .sub-menu {
  columns: 2;
  width: 36rem;
}

.menu-item.chr-splits--three > .sub-menu {
  columns: 3;
  width: 50rem;
}

/* The closing names stand near the right-hand rule of the run, so their
   splits open back towards the middle and stay on the glass. */
.menu-item.chr-splits--back > .sub-menu {
  left: auto;
  right: 0;
}

/* A section's own page heads its list, above the splits under it. */
.menu-item .chr-splits__own > .menu-link {
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   PART FOUR. THE WORDS IN THE RUN

   A title, the standfirst beneath it, the numbered parts and the
   sentences between them. The serif does the headings and whatever
   interface face the machine is set in does the rest, which is how a
   timing sheet gets headed and then filled in.
   ------------------------------------------------------------------------- */
body.chr-timed h1,
body.chr-timed h2,
body.chr-timed h3,
body.chr-timed h4 {
  color: var(--cl-ink);
  font-family: var(--cl-letter);
  font-weight: 600;
  line-height: 1.22;
}

body.chr-timed h1 { font-size: var(--cl-t-h1); }
body.chr-timed h2 { font-size: var(--cl-t-h2); }
body.chr-timed h3 { font-size: var(--cl-t-h3); }

/* A link goes somewhere this site has already timed, so it wears the
   indigo and keeps its underline tucked close under the baseline. */
body.chr-timed a {
  color: var(--cl-read);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

body.chr-timed a:hover,
body.chr-timed a:focus {
  color: var(--cl-read-d);
}

/* At Astra's phone boundary the top of the ladder comes down one notch.
   The notch is taken on the tokens, so the pages and the ranking come
   down with it in the same breath instead of being told separately. */
@media (max-width: 921px) {
  :root {
    --cl-t-h1: 1.875rem;
    --cl-t-h2: 1.5rem;
    --cl-t-fig: 1.5rem;
  }
}

/* -------------------------------------------------------------------------
   PART FIVE. THE MARKS

   Seven devices, printed over and over: a label in small capitals, any
   figure at all, a timed span against a span that costs, a reading ruled
   off alone, a framed drawing, a noted condition and the age stamp.
   Settling them here is what keeps a duration drawn one way whether it
   turns up in a page, in the ranking or in the furniture. Both plugins
   restate the few they use, off these same readings, which is how a page
   holds its shape in the moment before this file lands.
   ------------------------------------------------------------------------- */

/* The small capital label standing over a cell or under a figure. */
.cl-legend {
  color: var(--cl-ink-2);
  display: block;
  font-family: var(--cl-prose);
  font-size: var(--cl-t-cap);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Anything numeric, anywhere. Tabular digits, so a column of durations
   lines up on the digit however long the column runs. */
.cl-figurine,
.cl-read-fig,
.cl-cost-fig,
.cl-rev,
.cl-scale__fig,
.cl-tel {
  font-family: var(--cl-figurine);
  font-variant-numeric: tabular-nums;
}

/* The timed span and the span that costs. Neither is ever left to the
   colour by itself; the words beside it already say which it is. */
.cl-read-fig { color: var(--cl-read); }
.cl-cost-fig { color: var(--cl-cost); }

/* A helpline is dialled straight off the screen, so its number is never
   allowed to break across two lines. */
.cl-tel { white-space: nowrap; }

/* A reading: one measured span standing alone between two rules, the way
   a split is ruled off down a timing sheet. */
.cl-scale {
  border-bottom: var(--cl-line) solid var(--cl-rule);
  border-top: var(--cl-line) solid var(--cl-rule);
  margin: var(--cl-gap-2) 0;
  padding: var(--cl-step) 0;
  text-align: center;
}

.cl-scale__fig {
  color: var(--cl-ink-2);
  font-size: var(--cl-t-cap);
  letter-spacing: 0.04em;
}

/* A framed drawing, captioned inside its own frame. A frame is one of
   only two places on this site where an inset is allowed, because the
   reader can see the edge the inset is measured off. */
.cl-chart {
  background-color: var(--cl-paper);
  border: var(--cl-line) solid var(--cl-rule);
  margin: var(--cl-gap-2) 0;
  padding: var(--cl-step);
}

.cl-chart img {
  display: block;
  height: auto;
  width: 100%;
}

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

/* A noted condition: the clause a duration turns on, banded and ruled
   down its leading edge so that the inset it carries is visibly measured
   off something. */
.cl-aside {
  background-color: var(--cl-panel);
  border-left: 3px solid var(--cl-rule);
  margin: var(--cl-gap-2) 0;
  padding: var(--cl-gap);
}

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

/* The age stamp, struck in a box rather than set as words. */
.cl-18 {
  background-color: var(--cl-panel-2);
  border: var(--cl-line) solid var(--cl-ink);
  display: inline-block;
  font-family: var(--cl-figurine);
  font-size: var(--cl-t-cap);
  font-weight: 700;
  margin-right: 0.5em;
  padding: 0 0.35em;
}

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

/* -------------------------------------------------------------------------
   PART SIX. THE BLOCK THAT CLOSES THE RUN

   Under the last part comes what this sheet times, what it times from,
   the unit it reckons in, and where a reader who wants to stop can go.
   The fields reflow on their own. The band beneath them is Astra's
   copyright element, which arrives already through wpautop() and
   wp_kses_post(), so functions.php hands it spans on a single line and
   the arrangement is settled down here instead.
   ------------------------------------------------------------------------- */
.chr-block {
  border-top: var(--cl-edge) solid var(--cl-ink);
  display: grid;
  gap: var(--cl-gap-2);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  padding-top: var(--cl-gap-2);
}

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

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

.chr-field__val--fig {
  font-family: var(--cl-figurine);
}

/* Three short fields abreast: the unit, the revision of the sheet and
   the stamp. */
.chr-field-row {
  display: grid;
  gap: var(--cl-gap);
  grid-template-columns: repeat(3, 1fr);
}

.chr-foot-mark {
  font-family: var(--cl-letter);
  font-size: var(--cl-t-h3);
  margin: 0 0 var(--cl-step);
}

.chr-foot-help {
  font-size: var(--cl-t-cap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chr-foot-help li {
  margin-bottom: var(--cl-step);
}

/* The band across the very foot. */
.chr-band {
  border-top: var(--cl-line) solid var(--cl-rule);
  display: block;
  font-size: var(--cl-t-cap);
  padding-top: var(--cl-step);
}

.chr-band-small {
  color: var(--cl-ink-2);
  display: block;
  font-size: var(--cl-t-cap);
}

/* The same words again, printed under the sections once the drawer on a
   phone has been opened. */
.chr-drawer-note {
  font-size: var(--cl-t-cap);
  padding: var(--cl-gap);
}

/* A reader whose machine has asked for stillness gets it. Nothing in
   this file moves to begin with, so what follows is a standing guard
   over whatever a block or a plugin may add later. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}