/* ==========================================================================
   Rendered metal header.
   Loaded AFTER site.css; it overrides the header layer only.

   The bar is one continuous piece of artwork. The real logo, nav links and
   CTA are still in the markup (kept for search engines, screen readers and
   keyboard users) — they are visually replaced by the image and reduced to
   invisible hit areas sitting over the words painted into it.

   ⚠️ The hit areas are PERCENTAGES, not pixels. The artwork is 1440px wide
   but stretches to fill any viewport, so pixel-width targets only line up at
   exactly 1440px and drift further off the wider the screen gets. Every width
   below is that element's share of the artwork, so the targets stretch with
   the words they sit on. If the artwork is ever re-rendered, re-derive these
   from the new pixel widths — do not hand-tune them.
   ========================================================================== */

@media (min-width: 82rem) {
  .site-header {
    height: 140px;
    padding: 0;
    border: 0;
    background: #090a0b url("header/desktop-header-single-rail-1440.webp") center / 100% 140px no-repeat;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .7);
    isolation: isolate;
    backdrop-filter: none;
  }

  .site-header .header-inner {
    width: 100%;
    max-width: none;
    height: 140px;
    padding: 0;
    border: 0;
    margin: 0;
    background: transparent;
    gap: 0;
  }

  /* Brand — 420 of 1440 in the artwork. Real logo/text hidden, link intact. */
  .site-header .brand {
    width: 29.1667%;
    height: 140px;
    flex: 0 0 29.1667%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .site-header .brand img,
  .site-header .brand .brand-name { opacity: 0; pointer-events: none; }

  /* Nav — 907 of 1440, pushed right so the gap absorbs any leftover width. */
  .site-header .header-nav {
    display: flex;
    width: 62.9861%;
    height: 140px;
    flex: 0 0 62.9861%;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin-left: auto;
  }

  /* Each link's share of the NAV block (206/243/224/234 of 907). Text is
     pushed off-screen rather than hidden, so it still reaches assistive tech
     and crawlers — the words themselves are painted into the artwork. */
  .site-header .header-nav > a {
    height: 140px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    margin: 0;
    color: transparent;
    background: transparent;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    text-shadow: none;
    overflow: hidden;
  }
  .site-header .header-nav > a:hover,
  .site-header .header-nav > a.active { border-bottom: 0; }

  /* Hover reveals a second copy of the bar in which ONLY the lettering is red.
     That copy was generated from the shipped artwork by tinting pixels above a
     luminance threshold, with the top and bottom rails excluded by row before
     the threshold runs. Plate, rails and every scratch are pixel-identical to
     the original, so nothing can shift but the words. */
  .site-header .header-nav > a::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    content: "";
    pointer-events: none;
    background-image: url("header/desktop-header-single-rail-1440-red.webp");
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .16s ease;
  }

  /* Each cell scales the red bar back up to full width and slides it so only
     that cell's slice shows. Derived, not tuned: size is 100/cellWidth and
     position is cellLeft/(1-cellWidth), both as fractions of the bar. The
     four positions land on 43.19 / 61.74 / 80.76 / 100 and the widths sum to
     exactly 100%, which is the check that the geometry is right.

     An earlier attempt used background-attachment:fixed to avoid this maths.
     It drifted, because `fixed` sizes against the viewport — which includes
     the scrollbar — while the header sizes against its own box, which does
     not. ~15px of disagreement, compounding across the bar. */
  .site-header .header-nav > a { position: relative; }
  .site-header .header-nav > a:hover::after,
  .site-header .header-nav > a:focus-visible::after { opacity: 1; }

  .site-header .header-nav > a[href="index.html"]::after {
    background-size: 699.030% 140px;
    background-position: 43.190% top;
  }
  .site-header .header-nav > a[href="services.html"]::after {
    background-size: 592.593% 140px;
    background-position: 61.737% top;
  }
  .site-header .header-nav > a[href="gallery.html"]::after {
    background-size: 642.857% 140px;
    background-position: 80.762% top;
  }
  .site-header .header-nav > a[href="contact.html"]::after {
    background-size: 615.385% 140px;
    background-position: 100.000% top;
  }

  .site-header .header-nav > a[href="index.html"]    { width: 22.7122%; }
  .site-header .header-nav > a[href="services.html"] { width: 26.7916%; }
  .site-header .header-nav > a[href="gallery.html"]  { width: 24.6968%; }
  .site-header .header-nav > a[href="contact.html"]  { width: 25.7993%; }

  /* Keyboard users get a visible target even though the link text is not. */
  .site-header .header-nav > a:focus-visible {
    outline: 3px solid var(--gold-bright);
    outline-offset: -7px;
    background: rgba(255, 255, 255, .04);
  }

  /* The artwork has no CTA painted into it. */
  .site-header .header-cta { display: none; }
}

/* ==========================================================================
   The 1920 artwork is NOT the 1440 artwork scaled up — the words sit about 15
   points further right (HOME starts at 54.8% here against 39.8% there). Every
   percentage above is derived from the 1440 layout, so all of it has to be
   restated for this file or the hit areas land between the words: clicking
   HOME would open Services, and the hover would stain half of two words.

   These numbers come from measuring the bright letterforms in the artwork
   itself, with cell edges placed midway between neighbouring words. If either
   artwork is re-rendered, re-measure — do not hand-tune.
   ========================================================================== */
@media (min-width: 100rem) {
  .site-header { background-image: url("header/desktop-header-single-rail-1920.webp"); }
  .site-header .header-nav > a::after {
    background-image: url("header/desktop-header-single-rail-1920-red.webp");
  }

  .site-header .brand { width: 52%; flex: 0 0 52%; }
  .site-header .header-nav { width: 48%; flex: 0 0 48%; }

  .site-header .header-nav > a[href="index.html"] { width: 22.4688%; }
  .site-header .header-nav > a[href="services.html"] { width: 27.5104%; }
  .site-header .header-nav > a[href="gallery.html"] { width: 24.8958%; }
  .site-header .header-nav > a[href="contact.html"] { width: 25.1250%; }

  .site-header .header-nav > a[href="index.html"]::after {
      background-size: 927.214% 140px;
      background-position: 58.286% top;
    }
  .site-header .header-nav > a[href="services.html"]::after {
      background-size: 757.289% 140px;
      background-position: 72.337% top;
    }
  .site-header .header-nav > a[href="gallery.html"]::after {
      background-size: 836.820% 140px;
      background-position: 86.303% top;
    }
  .site-header .header-nav > a[href="contact.html"]::after {
      background-size: 829.187% 140px;
      background-position: 100.000% top;
    }
}

/* ==========================================================================
   Below the artwork breakpoint, the mobile bar is also one piece of artwork:
   burger140.webp already contains the wordmark, the stamped burger, the plate
   and both rails. So the same approach as the desktop bar applies — the real
   brand link and the real hamburger button stay in the markup for screen
   readers and keyboards, and are reduced to invisible hit areas laid over the
   words painted into the image.

   Measured off the artwork rather than guessed: the wordmark occupies
   2.40%–35.47% of the width and the burger 89.33%–96.40%, both between the
   rails. The hit areas below are generous around those, because the space
   between them is empty plate and costs nothing to include.
   ========================================================================== */
@media (max-width: 81.99rem) {
  .site-header {
    padding: 0;
    border: 0;
    background: #090a0b;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .7);
    backdrop-filter: none;
  }

  /* The plate keeps the artwork's 750:140 ratio so nothing stretches, and stops
     growing past 560px — at the top of this range the viewport is over 1300px
     wide and a full-width bar would stand 245px tall. */
  .site-header .header-inner {
    position: relative;
    width: min(100%, 560px);
    max-width: none;
    aspect-ratio: 750 / 140;
    margin: 0 auto;
    padding: 0;
    gap: 0;
    background: url("header/burger140.webp") center / 100% 100% no-repeat;
  }

  .site-header .brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .site-header .brand img,
  .site-header .brand .brand-name { opacity: 0; pointer-events: none; }

  /* site.css hides the burger and shows the text nav from 60rem up, but the
     artwork has no room for text links — without this the 960px-1311px band
     renders a plate with nothing to click. */
  .site-header .hamburger {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 22%;
    height: 100%;
    min-width: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .site-header .hamburger span { opacity: 0; }

  .site-header .header-nav,
  .site-header .header-cta { display: none; }

  /* Keyboard users still need to see where they are, even though the target
     itself is invisible. */
  .site-header .brand:focus-visible,
  .site-header .hamburger:focus-visible {
    outline: 3px solid var(--gold-bright);
    outline-offset: -6px;
  }

  /* The rails are painted into the artwork now, so the CSS hairlines that used
     to stand in for them would double up. */
  .site-header::before,
  .site-header::after { display: none; }
}