/* ------------------------------------------------------------------------
 * ccx-header.css
 *
 * Two things at the very top of the page: the glass bar the navigation
 * stands on, sitewide, and the artwork behind the opening block of the
 * landing page /process-tools/. They are one file because they are one
 * picture: the glass shows whatever lies under it, and on that page what
 * lies under it is that artwork.
 *
 * Nothing here touches the navigation itself. Not one rule names a menu
 * item, a link, a width of the menu or the number of entries in it, so the
 * navigation can be rebuilt without this file having to know.
 * --------------------------------------------------------------------- */

/* ========================================================================
 * 1. THE GLASS CARD OF THE HEADER
 *
 * WHAT IT LOOKED LIKE BEFORE
 *
 * The blur sat on .custom_header > .e-con-inner::before, and .e-con-inner
 * is Elementor's boxed inner element: as wide as the window up to 1416
 * pixels and capped there. So the pane of frosted glass was 1416 pixels
 * wide no matter how wide the screen was, with square corners and no rim.
 * On a 1920 window that is a rectangle from 252 to 1668 with 252 pixels of
 * untouched page on either side, and because a blur has a hard boundary,
 * the page behind it goes from soft to sharp along a straight vertical
 * line. Measured against a black and white test grid parked behind the
 * header: sharp stripes to 252, blurred stripes to 1668, sharp again. It
 * reads as an unfinished cut, which is exactly what it is.
 *
 * WHAT IT IS NOW
 *
 * One card. It hangs on .custom_header, which is always the full width of
 * the window, so it can be given the same distance to both window edges at
 * every size instead of inheriting the content width:
 *
 *   left: 0, right: 0, max-width, margin-inline: auto
 *
 * With left and right both set and the width over-constrained, the two auto
 * margins are made equal, which centres the card. So the card is as wide as
 * the window until the window passes the cap, and stays at the cap after
 * that, always in the middle.
 *
 * Under 1536px it runs the full width, square and without a rim, which is
 * the page as it looks today minus the cut. There is no room for a card to
 * float at those sizes: the logo starts 15 pixels from the window edge, and
 * any gutter wide enough to be read as one would cut into it. A pane that
 * ends at the window edge has no visible edge to be cut off at either, so
 * nothing is lost.
 *
 * From 1536px up, where there are at least twenty pixels of air on either
 * side, the card becomes what it is meant to be: a rounded pane of glass
 * with a thin rim, lying on the page. The threshold is explained where the
 * media query stands.
 *
 * The bottom hairline that used to be drawn on .e-con-inner::after moves
 * onto the card as a background image, so it follows the card's width and
 * is clipped by its corners instead of running past them. It also sat 15
 * pixels off centre before, because it was positioned statically inside a
 * padded box and given a width of 100%, which pushed it over the right edge
 * by exactly the padding.
 * ==================================================================== */

.custom_header {
  /* The widest the card ever gets: the 1416 of the content plus 40 on
   * either side, which is the "a little further out" this was asked for
   * and still leaves the card clearly inside a wide window. */
  --cch-max: 1496px;
  --cch-r: 18px;
  --cch-blur: 17.5px;

  /* At rest the card is glass and nothing else: no fill, so the top of
   * every page looks as it did. The rim only appears where the card really
   * floats, and it is what makes it a deliberate shape there rather than a
   * blur that happens to stop somewhere. */
  --cch-rim: rgba(255, 255, 255, .055);
  --cch-tint: rgba(0, 0, 0, 0);

  /* Once the bar detaches and the page runs underneath it, the card takes
   * a little of the page colour so the menu keeps its contrast over
   * headlines and photographs, and a soft shadow to sit above them.
   * rgb(16,24,45) is the navy of the page, one step lighter. */
  --cch-rim-stuck: rgba(255, 255, 255, .085);
  --cch-tint-stuck: rgba(16, 24, 45, .42);
  --cch-shadow-stuck: 0 18px 40px -26px rgba(0, 0, 0, .85);

  --cch-line: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .24) 54%,
      rgba(255, 255, 255, 0) 100%);
}

/* The old pane. Only the blur is taken off it; the element keeps standing,
 * because the rule that draws it lives in the page data and is not ours. */
header.elementor-location-header .custom_header > .e-con-inner::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The old hairline. It is drawn on the card now. */
header.elementor-location-header .custom_header > .e-con-inner::after {
  content: none;
}

/* The fill of the boxed element stays off.
 *
 * The page data holds two rules for it: one gives the sticky bar a fill of
 * rgba(21,29,50,.57), a later one sets it back to transparent. The later
 * one was written for the mobile header, which paints its own opaque
 * ground, but custom CSS in Elementor is emitted for the whole document,
 * so it lands on the desktop bar as well and has been switching that fill
 * off ever since. The fill belongs on the card now, and this rule makes
 * sure it cannot come back on the square element underneath should that
 * stray line ever be tidied up. */
header.elementor-location-header .custom_header.elementor-sticky--active > .e-con-inner {
  background: transparent !important;
}

/* --------------------------------------------------------------------
 * The card itself.
 *
 * Elementor gives every .e-con a ::before for its background overlay, and
 * that rule sets width, height, left, top, the four border widths, the
 * radius and a transition from custom properties. Those properties are not
 * set on this container, so most of them fall back to nothing, but the
 * geometry does not: width and height come out as max(100% + ..., 100%),
 * which would ignore the insets below. Every one of them is therefore
 * written out here. Same trap as the ghost numerals of round eight.
 * -------------------------------------------------------------------- */
header.elementor-location-header .custom_header::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  margin-inline: auto;
  border: 0;
  border-radius: 0;
  opacity: 1;
  mix-blend-mode: normal;
  pointer-events: none;

  background-color: var(--cch-tint);
  background-image: var(--cch-line);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 1px;

  -webkit-backdrop-filter: blur(var(--cch-blur));
  backdrop-filter: blur(var(--cch-blur));

  transition: background-color .25s ease, box-shadow .25s ease;
}

/* Detached, with the page running underneath. The fill keeps the menu
 * readable over headlines and photographs; it is the fill the header was
 * given years ago and lost to the stray rule described above. */
header.elementor-location-header .custom_header.elementor-sticky--active::before {
  background-color: var(--cch-tint-stuck);
}

/* From 1536px up there are at least twenty pixels of air on either side of
 * the cap, and only there does the pane become a card: capped, centred,
 * rounded, with a rim. Below that it stays the full width of the window,
 * because a card cannot float where there is nothing to float in.
 *
 * 1536 and not 1520, which is where twelve pixels of air begin: a media
 * query is measured against a viewport that still counts a classic
 * scrollbar, while the bar is laid out inside one that does not. On Windows
 * that is fifteen pixels of difference, and at 1520 exactly it would leave
 * four pixels of gutter under an eighteen pixel radius, which is a notch
 * rather than a corner. Fifteen pixels of headroom take that case out. */
@media (min-width: 1536px) {
  header.elementor-location-header .custom_header::before {
    max-width: var(--cch-max);
    border-radius: var(--cch-r);
    box-shadow: inset 0 0 0 1px var(--cch-rim);
  }

  /* Pinned to the top of the window the upper corners give up their radius:
   * they would sit exactly on the window edge and cut two notches out of
   * it. A card hanging from the top edge with a rounded lower edge is the
   * shape that belongs to that position. */
  header.elementor-location-header .custom_header.elementor-sticky--active::before {
    border-radius: 0 0 var(--cch-r) var(--cch-r);
    box-shadow: inset 0 0 0 1px var(--cch-rim-stuck), var(--cch-shadow-stuck);
  }
}

@media (prefers-reduced-motion: reduce) {
  header.elementor-location-header .custom_header::before { transition: none; }
}

/* ========================================================================
 * 2. THE ARTWORK BEHIND THE OPENING BLOCK OF /process-tools/
 *
 * WHAT IT LOOKED LIKE BEFORE
 *
 * The block .cclp-hero carries Background-2-min.png, an abstract field of
 * diagonal bands, 1536 by 1683 pixels, and it was set to be contained. The
 * block is 634 pixels tall, so containing it means the picture is scaled
 * until its height fits: 1683 down to 634 is a factor of 0.377, and 1536
 * follows to 579. A picture 579 pixels wide, centred in a window of 1440,
 * is a strip from 430 to 1009 with the page's plain navy on both sides of
 * it and a straight vertical edge where it stops. On a 1920 window the same
 * strip sits in the middle of nearly two thousand pixels. That edge is
 * visible through the glass of the header as well, which is where it first
 * catches the eye.
 *
 * WHAT IT IS NOW
 *
 * Covered instead of contained. The picture is scaled until it fills the
 * block in both directions, anchored at the top: at 1440 that is 1440 by
 * 1578 with the upper 634 in view, at 1920 it is 1920 by 2104. No edge is
 * left anywhere, at any width, and the same holds under 1025px, where the
 * page used to leave the picture at its natural size and show a quarter of
 * it four times too large.
 *
 * Covering brings one edge of its own: the lower one, where the picture is
 * cut off by the end of the block and the page continues in plain navy.
 * The second rule takes care of that. It lays the page colour over the
 * lower part of the block as a gradient that starts at nothing, so the
 * artwork, and with it the dot field lying over it, dissolves into the navy
 * before the next section starts.
 *
 * Both are written as CSS rather than as settings on the container so that
 * the same file is right on the staging clone and on the live site, where
 * the page carries a different post number, and so that the change can be
 * taken back by removing one file.
 * ==================================================================== */

.cclp-hero {
  background-size: cover !important;
  background-position: 50% 0% !important;
  background-repeat: no-repeat !important;
}

/* The veil. Same Elementor ::before to disarm as above, and it sits at
 * z-index 0 on purpose: over the dot field canvas, which lies at -1, and
 * under the headline, which follows it in the document. */
.cclp-hero::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  height: 46%;
  border: 0;
  border-radius: 0;
  opacity: 1;
  mix-blend-mode: normal;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg,
      rgba(11, 18, 39, 0) 0%,
      rgba(11, 18, 39, .34) 46%,
      rgba(11, 18, 39, .82) 79%,
      rgb(11, 18, 39) 100%);
  transition: none;
}