/*
Theme Name:  The Bonus Press
Theme URI:   https://bingonodepositbonus.uk/
Description: A risograph child of Astra: two inks on a paper sheet, flat areas of colour, visible grain, square corners and nothing floating. Switching it on writes the palette, the type, a 1280px sheet and the two menus into Astra's own Customizer values, files the wordmark and the tab icon in the Media Library, and fills Yoast's site representation if nobody has. The header row, the content column and the footer all stand between the same two rules. The theme dresses the frame only; the guides and the ranking are drawn by their own plugins.
Author:      The Bonus Press
Template:    astra
Version:     1.2.1
Requires at least: 6.0
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ris
*/

/* ==========================================================================
   The tokens.

   These are the contract. Both plugins read these names and define none of
   their own, so every value below is written here exactly as TOKENS.md sets
   it down, and nothing in the theme reaches for a colour that is not here.

   Every ratio quoted in this file was computed against the paper rather than
   judged by eye, and is the figure TOKENS.md carries.
   ========================================================================== */
:root {
  /* Paper */
  --tc-paper: #F7F3EC;    /* the sheet */
  --tc-paper-2: #EFE9DF;  /* bands, table stripes */

  /* Type colours */
  --tc-ink: #16181F;      /* body text, headings, 16.03 on paper */
  --tc-ink-2: #4A4F5C;    /* captions, secondary text, 7.40 */
  --tc-navy: #27356B;     /* headings, footer ground, 10.50 */
  --tc-blue-d: #005A90;   /* links, small text carrying meaning, 6.63 */
  --tc-coral-d: #C9263A;  /* emphasis in text, CTA ground, 4.97 */

  /* The two press inks. Flat areas and display figures of 2rem and over, and
     nothing else: coral measures 3.13 on the paper and blue 4.28, so neither
     of them ever carries a sentence or a figure set small. */
  --tc-blue: #0078BF;
  --tc-coral: #F15060;

  /* Tints. Backgrounds only; nothing is written in them. Ink on the blue tint
     measures 14.27 and on the coral tint 14.24. */
  --tc-tint-b: #DCE8F5;
  --tc-tint-c: #FBE0E2;

  /* Hairlines, 1.52 on the paper, which is right for a rule that carries no
     meaning of its own. */
  --tc-rule: #CFC7B8;

  /* The three faces, all served from assets/fonts by assets/fonts.css. */
  --tc-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tc-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tc-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Measure. One width, and it is a gate: the header row, the content column
     and the footer all sit on this sheet with these gutters, so the wordmark,
     the prose and the ranking share one left rule and one right rule. */
  --tc-sheet-w: 1280px;
  --tc-gutter: clamp(20px, 3vw, 40px);
  --tc-gap: clamp(28px, 3.4vw, 46px);
  --tc-radius: 0;         /* a risograph has no rounded corners */

  /* The grain: one feTurbulence as a data URI, defined once and reused by
     background-image. Flat ink areas only, never under text that has to be
     read at a small size. */
  --tc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.3'/%3E%3C/svg%3E");

  /* Astra and the block editor read this for the width of an aligned block. */
  --wp--custom--ast-content-width-size: 1280px;
  color-scheme: light;
}

/* ==========================================================================
   The page: paper, ink, and the three faces
   ========================================================================== */
body {
  background-color: var(--tc-paper);
  color: var(--tc-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Said again after Astra's own rule, so running text and form controls keep
   the face whatever string the Customizer ends up holding for it. */
body,
button,
input,
select,
textarea {
  font-family: var(--tc-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
  font-family: var(--tc-display);
  color: var(--tc-navy);
}

/* Figures are read down a column and compared, so they are lined and tabular
   wherever they appear. */
h1, h2, h3, h4, h5, h6 {
  font-variant-numeric: lining-nums tabular-nums;
}

code, kbd, samp, pre {
  font-family: var(--tc-mono);
}

/* Nothing is rounded. The weakest selector there is, so it flattens what the
   browser rounds by default and settles nothing a plugin has decided for
   itself; Astra's own corners are written to zero on the first run. */
* {
  border-radius: var(--tc-radius);
}

::selection {
  background: var(--tc-tint-c);
  color: var(--tc-ink);
}

/* Links: deep blue at 6.63, underlined, and deep coral at 4.97 under the
   pointer. The bright inks stay out of running text. */
a {
  color: var(--tc-blue-d);
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--tc-coral-d);
  text-decoration-thickness: 2px;
}

hr,
.wp-block-separator {
  border-color: var(--tc-rule);
}

/* Fields: a printed box, square, with an ink edge rather than a grey one. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
  background-color: var(--tc-paper);
  border: 2px solid var(--tc-ink);
  color: var(--tc-ink);
}

input::placeholder,
textarea::placeholder {
  color: var(--tc-ink-2);
  opacity: 1;
}

/* Buttons. Grounded in deep coral, which carries white at 5.49, and in deep
   blue under the pointer, which carries it at 7.33. Never in the bright ink:
   white on coral measures 3.47 and on blue 4.73. Flat, square, no lift. */
.ast-button,
.button,
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
  font-family: var(--tc-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 0;
  box-shadow: none;
  transition: background-color 0.14s ease;
}

.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  box-shadow: none;
}

/* One ring for the whole site: three points of deep coral, which reads at
   4.97 on the paper and 4.55 on the second paper. The two dark grounds the
   site has, the footer and the strip below it, take the paper colour
   instead, where it reads at 10.50 and 16.03. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tc-coral-d);
  outline-offset: 2px;
  box-shadow: none;
}

.site-footer :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--tc-paper);
}

/* Astra dots a thin outline, and dots the border of a field, on plain :focus
   as well. The ring above is for the keyboard, so a pointer press is left to
   pass without a mark of its own. These selectors carry one class more than
   Astra's, so they settle it rather than tie with it. */
.ast-menu-toggle:focus:not(:focus-visible),
.menu-toggle:focus:not(:focus-visible),
.menu-toggle-close:focus:not(:focus-visible),
.ast-header-navigation-arrow:focus:not(:focus-visible),
.ast-button:focus:not(:focus-visible),
.ast-custom-button:focus:not(:focus-visible),
#ast-scroll-top:focus:not(:focus-visible),
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
}

/* A field being typed into keeps its solid edge and takes the ring, rather
   than going dotted. */
input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.wp-block-search__input:focus {
  border-style: solid;
  border-width: 2px;
  border-color: var(--tc-ink);
}

.skip-link.screen-reader-text:focus {
  background: var(--tc-coral-d);
  color: #FFFFFF;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
}

/* ==========================================================================
   The one width.

   Three wrappers carry the sheet: the content container, the header row and
   the footer row. Each is the sheet plus a gutter on either side, so the
   content inside all three begins and ends on the same two rules at every
   width. Astra's own content width is written to 1280 on the first run; this
   carries the same measure to a site set up by an earlier version, and gives
   the header and the footer the identical box.
   ========================================================================== */
.ast-container,
.site-header .ast-builder-grid-row-container-inner,
.site-footer .ast-builder-grid-row-container-inner {
  width: 100%;
  max-width: calc(var(--tc-sheet-w) + var(--tc-gutter) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tc-gutter);
  padding-right: var(--tc-gutter);
  box-sizing: border-box;
}

/* Astra nests one of these wrappers inside the other in some header and
   footer rows. A sheet inside a sheet would inset the row twice and put the
   wordmark a gutter in from the prose, which is the one fault this build is
   not allowed to have, so the inner one gives up its gutter whichever way
   round the nesting happens to be. */
.ast-container .ast-builder-grid-row-container-inner,
.ast-builder-grid-row-container-inner .ast-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Nothing between the sheet and the prose adds an inset of its own. */
.site-content #primary,
.site-content #secondary,
.site-content .ast-article-single,
.site-content .ast-article-post,
.site-content .entry-content {
  padding-left: 0;
  padding-right: 0;
}

/* Room under the header row and above the footer: every page prints its own
   heading, so there is no page title to stand in the gap. */
.ast-plain-container .site-content > .ast-container > #primary {
  margin-top: var(--tc-gap);
  margin-bottom: calc(var(--tc-gap) * 1.4);
}

/* Back to the top: a coral chip carrying white at 5.49. */
#ast-scroll-top {
  width: 44px;
  height: 44px;
  background-color: var(--tc-coral-d);
  color: #FFFFFF;
}

#ast-scroll-top:hover {
  background-color: var(--tc-blue-d);
  color: #FFFFFF;
}

#ast-scroll-top .ast-icon svg {
  fill: currentColor;
}

/* ==========================================================================
   The 18+ stamp: a printed mark, in the header row, in the drawer and on the
   strip. Ink on the coral tint, which measures 14.24, inside a coral rule.
   One definition, reused on every ground the site has.
   ========================================================================== */
.ris-18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 48px;
  height: 30px;
  padding: 0 9px;
  border: 2px solid var(--tc-coral-d);
  background: var(--tc-tint-c);
  color: var(--tc-ink);
  font-family: var(--tc-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ast-header-html-1 .ast-builder-html-element {
  line-height: 1;
}

#ast-desktop-header .ast-header-html-1 {
  margin-left: 18px;
}

/* The name is drawn into the wordmark, so Astra's gap for a site title beside
   it is not wanted. */
.site-header .ast-logo-title-inline .site-logo-img,
.site-header .site-logo-img {
  padding-right: 0;
}

/* ==========================================================================
   The header row

   A paper row closed by a four point ink rule, with a run of each press ink
   laid along the left of that rule, starting on the sheet's own left rule so
   the inks line up with the wordmark above them.
   ========================================================================== */
#masthead {
  position: relative;
  z-index: 99;
  background-color: var(--tc-paper);
  border-bottom: 4px solid var(--tc-ink);
}

/* The rule belongs to the whole row, drawn once, on #masthead. */
#masthead .main-header-bar,
#masthead .ast-primary-header-bar {
  border-bottom: 0;
}

/* The two runs of ink sit over that rule, the first of them starting on the
   sheet's own left rule, so the inks line up under the wordmark. */
#masthead::before,
#masthead::after {
  content: "";
  position: absolute;
  bottom: -4px;
  height: 4px;
  pointer-events: none;
}

#masthead::before {
  left: max(var(--tc-gutter), (100% - var(--tc-sheet-w)) / 2);
  width: 150px;
  background-color: var(--tc-coral);
}

#masthead::after {
  left: calc(max(var(--tc-gutter), (100% - var(--tc-sheet-w)) / 2) + 150px);
  width: 110px;
  background-color: var(--tc-blue);
}

/* ==========================================================================
   The sections menu and its racks (Astra hands the row to the drawer at 922px)
   ========================================================================== */
@media (min-width: 922px) {
  /* Astra's link box runs the full height of the row. Leaving it that tall
     means a pointer travelling towards a rack never crosses dead ground. */
  /* Six section names, and they are words rather than labels: "Outside the licence" is the long
     one. At 13px a side they measured 943px against the 934px the row has for them, so the last
     name wrapped to a second line at every width from 930 up to 1920, and the header stood 172px
     tall on every page of the site. Nine pixels. At 8px a side the six come to 883 and the row
     has fifty to spare, which is enough that a later rename does not quietly put it back. */
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
    position: relative;
    padding-left: 8px;
    padding-right: 8px;
    font-family: var(--tc-body);
    font-weight: 600;
  }

  /* The section the open page belongs to, ruled in coral along its foot. */
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 50%;
    height: 3px;
    margin-bottom: -20px;
    background-color: transparent;
  }

  #ast-desktop-header .main-header-menu > .menu-item:hover > .menu-link::after,
  #ast-desktop-header .main-header-menu > .menu-item.focus > .menu-link::after,
  #ast-desktop-header .main-header-menu > .current-menu-ancestor > .menu-link::after,
  #ast-desktop-header .main-header-menu > .current-menu-item > .menu-link::after {
    background-color: var(--tc-coral-d);
  }

  /* Astra holds the arrow ten points clear of the name; six sections, a
     wordmark and the stamp share one row and that spacing is worth more to
     the row than to the arrow. */
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle {
    margin-left: 0;
  }

  #ast-desktop-header .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle .ast-arrow-svg {
    margin-left: 4px;
  }

  /* The rack: a sheet of paper with a two point ink edge, and the second ink
     laid under it a few points out of register. That offset block is what a
     press leaves behind and is doing the work a drop shadow would do on a
     site that had one. */
  #ast-desktop-header .main-header-menu > .menu-item > .sub-menu {
    top: calc(100% - 8px);
    width: 320px;
    padding: 12px;
    border: 2px solid var(--tc-ink);
    background-color: var(--tc-paper);
    box-shadow: none;
    /* No isolation here. The second ink below is drawn with z-index: -1 so that it sits behind
       this panel and shows only as the offset edge. A stacking context of its own would make the
       panel the root of that context, and a negative child paints above the root's own background
       rather than below it: the coral filled the whole rack and every section name was read off
       red. It is the panel's background that has to stay on top of it, which it does as long as
       the panel is not the one holding the context. */
  }

  /* A lip as deep as the gap, so a rack does not close mid reach. */
  #ast-desktop-header .main-header-menu > .menu-item > .sub-menu::before {
    height: 8px;
  }

  /* The second ink landing off register under the rack. It was drawn as a pseudo-element at
     z-index -1 so it would sit behind the panel. It never could: the panel is positioned with a
     z-index of its own, which makes it the root of a stacking context, and inside that context a
     negative child paints above the root's own background rather than below it. The coral filled
     the rack and every section name was being read off red.
     A hard shadow with no blur is the same mark and cannot have the fault: it is painted outside
     the border box, behind the element, and takes no part in the stacking of the panel's
     children. It is not a drop shadow in the sense the brief bars; there is no blur and no
     softness, it is the second pass of the press. */
  #ast-desktop-header .main-header-menu > .menu-item > .sub-menu {
    box-shadow: 7px 7px 0 0 var(--tc-coral);
  }

  /* Past nine guides a section needs a second column, past eighteen a third,
     or the rack runs off the foot of the window. Which class a section
     carries is worked out while the menu is built, not guessed here. */
  #ast-desktop-header .main-header-menu > .ris-rack--two > .sub-menu {
    width: min(560px, 48vw);
    column-count: 2;
    column-gap: 14px;
  }

  #ast-desktop-header .main-header-menu > .ris-rack--wide > .sub-menu {
    width: min(800px, 64vw);
    column-count: 3;
    column-gap: 14px;
  }

  #ast-desktop-header .main-header-menu > .ris-rack--two > .sub-menu > .menu-item,
  #ast-desktop-header .main-header-menu > .ris-rack--wide > .sub-menu > .menu-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }

  /* The closing sections stand near the right rule, so their racks hang
     leftwards from their own name and no rack reaches past the glass. */
  #ast-desktop-header .main-header-menu > .ris-rack--left:hover > .sub-menu,
  #ast-desktop-header .main-header-menu > .ris-rack--left.focus > .sub-menu,
  #ast-desktop-header .main-header-menu > .ris-rack--left > .sub-menu.toggled-on {
    left: auto;
    right: 0;
  }

  #ast-desktop-header .main-header-menu > .ris-rack--left > .sub-menu::after {
    left: -7px;
    right: 7px;
  }

  /* An entry in the rack: a line in a price list, flat, ruled only where the
     pointer is. */
  #ast-desktop-header .main-header-menu .sub-menu .menu-item {
    border: 0;
  }

  #ast-desktop-header .main-header-menu .sub-menu .menu-link {
    display: block;
    padding: 6px 10px;
    background-color: transparent;
    box-shadow: inset 3px 0 0 transparent;
    color: var(--tc-ink);
    font-family: var(--tc-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.34;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
  }

  #ast-desktop-header .main-header-menu .sub-menu .menu-link > .ast-icon {
    display: none;
  }

  /* The section's own page, standing at the head of its rack. */
  #ast-desktop-header .main-header-menu .sub-menu .ris-head > .menu-link {
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tc-ink);
    font-family: var(--tc-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  #ast-desktop-header .main-header-menu .sub-menu .menu-item:hover > .menu-link,
  #ast-desktop-header .main-header-menu .sub-menu .menu-item > .menu-link:focus-visible {
    background-color: var(--tc-tint-c);
    box-shadow: inset 3px 0 0 var(--tc-coral-d);
    color: var(--tc-ink);
  }

  #ast-desktop-header .main-header-menu .sub-menu .current-menu-item > .menu-link {
    background-color: var(--tc-tint-b);
    box-shadow: inset 3px 0 0 var(--tc-blue-d);
    font-weight: 600;
  }
}

/* The row carries a wordmark, six section names and the stamp. Below the full
   sheet the names close up a step at a time and the wordmark gives way,
   rather than any of it dropping to a second line. Measured at 1920, 1440,
   1280, 1100, 1024 and 960: one row at every one of them. */
/* Between the phone header and a sheet wide enough for the six names at full size, the row has to
   be worked for. Measured, not guessed: the six names wrap to a second row below 1366 at the
   desktop size, below 1200 at 15px, and below 1000 at 14px, so the band is cut where each one
   actually stops fitting rather than at a round number. */
@media (min-width: 1100px) and (max-width: 1365px) {
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 15px;
  }

  #ast-desktop-header .main-header-menu > .menu-item > .menu-link::after {
    left: 7px;
    right: 7px;
  }
}

@media (min-width: 922px) and (max-width: 1099px) {
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 13.5px;
    letter-spacing: -0.005em;
  }

  #ast-desktop-header .main-header-menu > .menu-item > .menu-link::after {
    left: 5px;
    right: 5px;
  }
}

@media (min-width: 922px) and (max-width: 1279px) {

  #ast-desktop-header .ast-header-html-1 {
    margin-left: 12px;
  }
}

@media (min-width: 922px) and (max-width: 1099px) {
  #ast-desktop-header .custom-logo-link img {
    width: 196px;
    max-width: 196px;
  }

  #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 14.5px;
  }

  #ast-desktop-header .main-header-menu > .menu-item > .menu-link::after {
    left: 7px;
    right: 7px;
  }
}

@media (min-width: 922px) and (max-width: 1023px) {
  #ast-desktop-header .custom-logo-link img {
    width: 168px;
    max-width: 168px;
  }

  #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 14px;
  }

  #ast-desktop-header .main-header-menu > .menu-item > .menu-link::after {
    left: 5px;
    right: 5px;
  }

  #ast-desktop-header .ast-header-html-1 {
    margin-left: 8px;
  }

  #ast-desktop-header .ris-18 {
    min-width: 44px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
  }
}

/* ==========================================================================
   The phone row and the drawer
   ========================================================================== */
#ast-mobile-header .ast-header-html-1 {
  margin-right: 10px;
  padding: 0;
}

#ast-mobile-header .ris-18 {
  min-width: 44px;
  height: 28px;
  padding: 0 6px;
  font-size: 12px;
}

#ast-mobile-header .ast-button-wrap {
  flex: none;
}

#ast-mobile-header .menu-toggle.main-header-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
}

#ast-mobile-header .menu-toggle .mobile-menu-wrap {
  display: inline-flex;
}

#ast-mobile-header .menu-toggle .mobile-menu-wrap .mobile-menu {
  padding: 0;
  color: #FFFFFF;
  font-family: var(--tc-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Small phones: the row keeps to one line, and under 361px the button is the
   icon alone, with its name left in the markup for anyone listening. */
@media (max-width: 420px) {
  #ast-mobile-header .ast-builder-grid-row {
    column-gap: 10px;
  }

  #ast-mobile-header .custom-logo-link img {
    width: 168px;
    max-width: 168px;
  }

  #ast-mobile-header .ast-header-html-1 {
    margin-right: 8px;
  }

  #ast-mobile-header .menu-toggle.main-header-menu-toggle {
    padding: 8px 12px;
  }
}

@media (max-width: 360px) {
  #ast-mobile-header .custom-logo-link img {
    width: 140px;
    max-width: 140px;
  }

  #ast-mobile-header .ris-18 {
    min-width: 40px;
    padding: 0 5px;
    font-size: 11px;
  }

  #ast-mobile-header .menu-toggle .mobile-menu-wrap {
    display: none;
  }
}

.ast-mobile-popup-drawer .ast-mobile-popup-inner {
  max-width: min(92%, 420px);
  background-color: var(--tc-paper);
  border-left: 4px solid var(--tc-ink);
  box-shadow: none;
}

.ast-mobile-popup-drawer .ast-mobile-popup-header {
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 8px 18px;
}

.ast-mobile-popup-drawer .ast-mobile-popup-header::before {
  content: "Sections";
  color: var(--tc-ink-2);
  font-family: var(--tc-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tc-ink);
  background: var(--tc-paper);
  color: var(--tc-ink);
}

.ast-mobile-popup-drawer.active .ast-mobile-popup-header .menu-toggle-close:focus,
#ast-scroll-top:focus {
  border-color: var(--tc-ink);
}

/* The accordion: one block per section, opened by its own name. */
#ast-hf-mobile-menu {
  padding: 6px 14px 4px;
  background: transparent;
}

#ast-hf-mobile-menu > .menu-item {
  margin-bottom: 10px;
  border: 2px solid var(--tc-ink);
  background: var(--tc-paper);
}

#ast-hf-mobile-menu > .menu-item > .menu-link {
  padding: 14px 54px 14px 16px;
  background: var(--tc-paper);
  color: var(--tc-navy);
  font-family: var(--tc-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

#ast-hf-mobile-menu > .ast-submenu-expanded > .menu-link {
  background: var(--tc-paper-2);
  border-bottom: 2px solid var(--tc-ink);
}

#ast-hf-mobile-menu > .current-menu-ancestor > .menu-link,
#ast-hf-mobile-menu > .current-menu-item > .menu-link {
  box-shadow: inset 4px 0 0 var(--tc-coral-d);
}

#ast-hf-mobile-menu > .menu-item > .ast-menu-toggle {
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--tc-coral-d);
}

#ast-hf-mobile-menu > .menu-item > .ast-menu-toggle .ast-icon svg {
  margin-top: 0;
}

#ast-hf-mobile-menu .sub-menu {
  padding: 0 0 6px;
  background: var(--tc-paper);
}

#ast-hf-mobile-menu .sub-menu .menu-item {
  border: 0;
}

#ast-hf-mobile-menu .sub-menu .menu-link {
  padding: 11px 16px;
  border-top: 1px solid var(--tc-rule);
  background: var(--tc-paper);
  color: var(--tc-ink);
  font-family: var(--tc-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}

#ast-hf-mobile-menu .sub-menu .menu-link > .ast-icon {
  display: none;
}

#ast-hf-mobile-menu .sub-menu .ris-head > .menu-link {
  border-top: 0;
  font-weight: 600;
}

#ast-hf-mobile-menu .sub-menu .current-menu-item > .menu-link {
  background: var(--tc-tint-b);
  box-shadow: inset 4px 0 0 var(--tc-blue-d);
  font-weight: 600;
}

/* What stands under the sections once the drawer is open. */
.ris-drawer-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 20px;
  color: var(--tc-ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.ris-drawer-note a {
  color: var(--tc-blue-d);
  font-weight: 600;
}

.ris-drawer-note .ris-tel {
  white-space: nowrap;
}

.ast-mobile-popup-content .ast-header-html-2 {
  padding: 4px 18px 0;
}

/* ==========================================================================
   The footer: a navy ground with the grain over it, three columns, and the
   compliance strip that closes the page.

   Paper on navy measures 10.50 and the blue tint on it 9.35, both computed
   from the same table the tokens come from.
   ========================================================================== */
.site-footer {
  color: var(--tc-paper);
}

.site-footer .site-primary-footer-wrap {
  position: relative;
  padding-top: 52px;
  padding-bottom: 42px;
  background-color: var(--tc-navy);
  background-image: var(--tc-grain);
  background-repeat: repeat;
  border-top: 4px solid var(--tc-coral);
}

.site-footer .site-primary-footer-wrap .ast-builder-grid-row {
  gap: 36px 52px;
}

.site-footer .ast-builder-html-element {
  color: var(--tc-tint-b);
  font-size: 15px;
  line-height: 1.62;
}

.site-footer .ast-builder-html-element a,
.site-footer .ast-footer-copyright a {
  color: var(--tc-paper);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.site-footer .ast-builder-html-element a:hover,
.site-footer .ast-footer-copyright a:hover {
  color: var(--tc-tint-c);
}

.ris-foot-mark {
  margin: 0 0 16px;
}

.ris-foot-mark img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
}

.ris-foot-mark--plain {
  color: var(--tc-paper);
  font-family: var(--tc-display);
  font-size: 24px;
  font-weight: 700;
}

.ris-foot-blurb {
  max-width: 32em;
  margin: 0;
}

.ris-foot-head,
.site-footer .footer-nav-wrap::before {
  display: block;
  margin: 2px 0 14px;
  color: var(--tc-paper);
  font-family: var(--tc-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.site-footer .footer-nav-wrap::before {
  content: "Pages";
  margin-top: 0;
}

.site-footer .ast-builder-html-element .ris-foot-head {
  margin-top: 0;
}

.ris-foot-help {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ris-foot-help li {
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid var(--tc-blue);
}

.ris-foot-help li:first-child {
  padding-top: 0;
  border-top: 0;
}

.ris-foot-help strong {
  color: var(--tc-paper);
  font-weight: 600;
}

.ris-tel {
  font-family: var(--tc-mono);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-footer #astra-footer-menu {
  gap: 2px;
}

.site-footer #astra-footer-menu .menu-item {
  margin: 0;
}

.site-footer #astra-footer-menu .menu-link {
  display: inline-block;
  padding: 5px 0;
  color: var(--tc-paper);
  font-family: var(--tc-body);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
}

.site-footer #astra-footer-menu .menu-link:hover,
.site-footer #astra-footer-menu .current-menu-item > .menu-link {
  color: var(--tc-tint-c);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The compliance strip. Ink ground, paper on it at 16.03, and the grain over
   it as well: the two dark bands are the one place on the site where a flat
   area is big enough to show what the press does to it. */
.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
  position: relative;
  padding-top: 20px;
  padding-bottom: 22px;
  background-color: var(--tc-ink);
  background-image: var(--tc-grain);
  background-repeat: repeat;
  border-top: 3px solid var(--tc-blue);
}

/* Astra runs the copyright field through wpautop(), so the strip arrives as
   spans inside one paragraph. That paragraph is the row. */
.ast-footer-copyright p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin: 0;
  color: var(--tc-paper);
}

.ris-strip-care {
  display: flex;
  flex: 1 1 32em;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
}

.ris-strip-small {
  display: block;
  flex: 1 1 100%;
  color: var(--tc-tint-b);
  font-size: 13px;
  line-height: 1.6;
}

/* The drawer header takes its side space from its own setting and holds it at a flat 20px however
   a child theme writes the rule. Rather than fight that and leave the wordmark a few pixels off
   the paragraph under it, the sheet takes the same 20 for as long as the drawer is the header on
   screen. This boundary therefore has to track ris_drawer_breakpoint() in functions.php: the two
   are one decision written in two places, so moving one without the other puts the wordmark and
   the prose back on different rules, which is exactly how it went wrong at 1100 and 1024. */
@media (max-width: 1199px) {
  :root {
    --tc-gutter: 20px;
  }
}

@media (max-width: 921px) {
  .site-footer .site-primary-footer-wrap {
    padding-top: 40px;
    padding-bottom: 30px;
  }

  .site-footer .site-primary-footer-wrap .ast-builder-grid-row {
    gap: 30px 28px;
  }
}

@media (max-width: 544px) {
  .site-footer .site-primary-footer-wrap .site-footer-section {
    margin-bottom: 0;
  }

  .site-footer #astra-footer-menu {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }

  .ris-strip-care {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Print: no header furniture, no drawer, no footer columns. The strip stays,
   because a printed page carrying the site is still carrying the offers.
   ========================================================================== */
@media print {
  #masthead::before,
  #masthead::after,
  .ast-header-html-1,
  .ast-mobile-popup-drawer,
  .site-footer .site-primary-footer-wrap {
    display: none;
  }

  body,
  .site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
    background: #FFFFFF;
    background-image: none;
  }

  body,
  .ast-footer-copyright p,
  .ris-strip-care,
  .ris-strip-small,
  .site-footer .ast-footer-copyright a {
    color: #000000;
  }

  .ris-18 {
    border-color: #000000;
    background: none;
    color: #000000;
  }
}

/* The grain, the offset block and the ruled underlines are all decoration, so
   a reader in forced colours gets the plain frame underneath them. */
@media (forced-colors: active) {
  .site-footer .site-primary-footer-wrap,
  .site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
    background-image: none;
  }

  #ast-desktop-header .main-header-menu > .menu-item > .sub-menu::after {
    display: none;
  }
}

/* Nothing moves for a reader who has asked their system for stillness. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }
}