/* ====================================================================
 * TYPE ON NARROW SCREENS
 * assets/ccx-mobtype31.css, belongs to inc/ccx-mobtype31.php
 *
 * Two things happen below 1025 pixels, and only below 1025 pixels:
 *
 *   1  a contour word is filled in            (this file)
 *   2  small reading text is lifted           (assets/ccx-mobtype31.js)
 *
 * WHY 1025 AND NOT 768
 * Every desktop-only refinement of this site switches at the same line:
 * the dot field, the glass lens, the availability badge and the mobile
 * section order all ask for 1025 and up. A tablet held upright shows the
 * same picture a phone shows, so the contour words switch where all the
 * rest switches. Above that line the desktop keeps its contour words
 * unchanged, which is what they were built for.
 *
 * ------------------------------------------------------------------
 * 1  A CONTOUR WORD IS FILLED IN
 *
 * On the wide screen one word per headline is drawn as an outline: the
 * letters are hollow, only the outer line of each glyph is painted, and
 * the page shows through. Measured on the published pages at 375 pixels,
 * 45 words on ten pages are drawn that way, between 18 and 40 pixels
 * tall, with a line between 0.72 and 1.6 pixels wide.
 *
 * At arm's length on a phone that line is thinner than a hair. The word
 * reads as a rendering fault rather than as an accent, and it is the one
 * thing on the page that is harder to read than its neighbours.
 *
 * WHAT REPLACES IT
 * Not a new colour and not a second gradient: the headline the word sits
 * in already carries the gradient text of the site, and the browser
 * paints that gradient across every glyph of the line INCLUDING the
 * glyphs of a child span, as long as the child asks for no fill and no
 * background of its own. So the word simply stops painting itself and
 * lets the line paint it. Measured on /it-security/ at 375: the share of
 * brand orange inside the word box goes from 5.8 to 18.5 percent, and
 * the orange that arrives is exactly rgb(255,142,43), the accent of the
 * site. The travelling sheen of the headline crosses the word in the
 * same movement as its neighbours, because it IS the same gradient - a
 * gradient of its own would run across a single short word far faster
 * than across the line and read as a separate blink.
 *
 * THE ONE WORD THAT CANNOT DO THAT
 * On /about/ the word sits in a headline that carries no gradient of its
 * own (the accent is on the word, not on the line). A word that asks for
 * no fill in such a line would disappear. The base rule below therefore
 * fills every contour word with a solid colour first, and only a word
 * whose line really carries the gradient is handed over to it. Same
 * reasoning for a reader who asked the system for less movement: the
 * gradient of the line is switched off for them, so the fill comes back.
 *
 * WHICH COLOUR
 * The colour the contour already had, taken from the variable that
 * carries it (--ccx-outline-color). A word inside the orange part of a
 * headline was outlined in orange and is filled in orange; a word in the
 * silver part was outlined in silver and is filled in silver. Nothing
 * has to be decided per word, and no headline can end up with two orange
 * runs that were never meant to sit next to each other - measured on the
 * published pages, four of the words sit directly in front of or behind
 * an orange passage (/services/ "versatile", /about/ "Behind", the two
 * charity lines), and orange there would have merged the accent into the
 * sentence around it.
 *
 * WEIGHT OF THE SELECTORS
 * The contour look in assets/cc-fx.css stands on seven repetitions of
 * the class name with !important, so that it beats the six repetitions
 * of the gradient rule in assets/mm-rb.css. Eight repetitions here beat
 * both, in whatever order the classes end up on the element. The file is
 * queued behind assets/ccfx-v3.css as well, so an equal weight would
 * still fall this way.
 *
 * Nothing in this block changes a box: no size, no padding, no margin,
 * no line height. A filled word occupies exactly the space its outline
 * occupied.
 * ==================================================================== */

@media (max-width: 1024px) {

  /* Base: the word paints itself, solid, in the colour of its contour.
   * This is what a word gets when its headline has no gradient to give,
   * and it is what every word falls back to when the gradient is off. */
  .ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline {
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: var(--ccx-outline-color, #d7dce8) !important;
    paint-order: normal;
  }

  /* Handover: the headline carries the gradient, so the word stops
   * painting and lets the line paint through its glyphs. The rule needs
   * the parent in the selector, which is exactly the condition it tests:
   * only a word whose own line carries the gradient may go transparent.
   *
   * The background of the word itself is already switched off by the
   * contour block in assets/cc-fx.css (background-image: none), so there
   * is nothing of its own left in front of the gradient of the line. */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .mmrb-gradtext > .ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline {
      -webkit-text-fill-color: transparent !important;
    }
  }
}

/* Less movement asked for: assets/mm-rb.css takes the gradient off every
 * headline in that case and paints the line in its plain colour. A word
 * that had handed its painting over would have nothing left to paint it,
 * so it takes the job back. Written after the handover and with the same
 * weight plus one, so the order of the two files can never decide it. */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .mmrb-gradtext > .ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline.ccx-outline {
    -webkit-text-fill-color: var(--ccx-outline-color, #d7dce8) !important;
  }
}

/* ------------------------------------------------------------------
 * 2  SMALL READING TEXT IS LIFTED
 *
 * The sizes themselves are written by assets/ccx-mobtype31.js, one
 * element at a time, because they cannot be written here: measured on
 * the published pages, the small sizes come from about two hundred
 * separate rules, one per widget, and the same carrier class holds 13,
 * 14 and 16 pixels on the same page. A rule here would have to name all
 * two hundred or flatten the three sizes into one.
 *
 * A page whose script does not run keeps the sizes of today, which is a
 * working page. While the pass is applied the script marks the document
 * with ccmt31-on and takes the mark off again above 1024 pixels; the
 * only rule that reads the mark is the one below, which must not fire
 * where the lift did not happen.
 *
 * ------------------------------------------------------------------
 * 3  THE ONE MARKER THAT HAS TO FOLLOW
 *
 * A taller line box moves the middle of the first line down, and a
 * marker that is placed at a fixed distance from the top of its item
 * stays where it was. Asked of every lifted block on sixteen pages, that
 * is true in exactly one place: the twelve bullet items of the step
 * lists on /it-security/, whose dot is drawn as an absolutely placed
 * ::before at top: 7px.
 *
 * The arithmetic, measured: the item goes from 13/22 to 15/25.4 pixels,
 * so the middle of the first line drops by (25.4 - 22) / 2 = 1.7 pixels.
 * The dot follows by the same amount and keeps the one pixel above the
 * middle that it was drawn with. Everything else about the list - the
 * size of the dot, its distance from the left, its colour - is left to
 * the module that owns it.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  html.ccmt31-on body .ccsecp-list li::before {
    top: 8.7px;
  }
}