/* ==========================================================================
   P Medley & Sons — Hero alignment rebuild                             [LIVE]
   --------------------------------------------------------------------------
   Enqueued on every page, after assets/css/style.css.
   See inc/developer-functions.php -> addScriptAndCss().

   Signed off and promoted from the ?preview build on 14 Sep 2026.

   WHY THIS FILE EXISTS
   --------------------------------------------------------------------------
   In assets/css/style.css every hero machine is positioned with a fixed pixel
   offset (`.truck_img { bottom: 95px }`) and given a fixed pixel box
   (`.truck_img figure { min-height: 330px }`), re-tuned by hand inside eight
   media queries (plus more `!important` tuning inside the page templates).

   The ground graphic they stand on does NOT move in pixels:

       .banner-section {
           background-size: 100%;            <- width-driven, height is auto
           background-position: bottom right;
       }

   Every page uses the same ground graphic, banners.png (1920x675), so its
   rendered height is always

       bgH = viewportWidth x (675 / 1920) = 0.3516 x W

   The horizon slides continuously with viewport WIDTH while the machine was
   pinned to a constant number of pixels. Two scaling laws for one
   composition, so between breakpoints they drift apart - the machines hover
   above the gravel on some screens and sink into it on others.

   Measured across 157 widths (360-1920px) on the shipped stylesheet, the
   Trucking tyre line lands anywhere from 0.043 to 0.650 of the banner height,
   and the figure box is shorter than the artwork's natural rendered height at
   70 of those widths. That second one is the "image looks cut off":
   background-size:100% renders the machine at figureWidth x ratio, and
   anything past `min-height` is simply clipped away.

   THE APPROACH
   --------------------------------------------------------------------------
   Drive every hero measurement from the one variable the artwork already
   scales with - the section's own width - so machine and ground are locked
   together by construction instead of by hand-tuned pixels.

   1. The figure gets NO fixed height. `height:0` + a percentage `padding-top`
      equal to the artwork's aspect ratio makes the box exactly as tall as the
      image renders, at every width. It can never clip. (The <img> heroes get
      this for free from `height:auto`.)

   2. The machine is anchored to the section bottom (`bottom:0`) and lifted by
      a percentage `margin-bottom`. Percentage margins resolve against the
      containing block's WIDTH, so the lift scales on the same law as the
      background image. Percentages rather than `vw` deliberately: `vw`
      includes the scrollbar, the background image does not.

   Net effect: every machine's contact line sits at a constant 0.295 of the
   banner image height, on every page, at every viewport width, and nothing is
   ever clipped.

   THE NUMBERS
   --------------------------------------------------------------------------
   Derived from the artwork itself, not eyeballed. For each machine, the
   "contact line" is where solid pixels stop - anything below it is the
   feathered drop shadow.

     banners.png          1920x675   ground graphic, ratio 0.351563  (shared)

     truking.png          1295x512   ratio 0.395367   contact 0.8535
     main-truck.png       1062x552   ratio 0.519774   contact 0.9801
     Header-Site-work.png 1216x874   ratio 0.718750   contact 0.9966
     Header-Septic.png    2047x1210  ratio 0.591109   contact 0.9950

     wheel line   0.295 of the banner height, above the section bottom.
                  Taken from the 1920px Trucking composition - the width the
                  original artwork was authored at, and the one place the
                  shipped CSS still looks right. Reused on every page so the
                  heroes sit on a common horizon.

                  Septics is the one deliberate exception at 0.25549 (20px
                  lower at 1440px) - see its block below.

   The lift is then, for a figure hero (% resolves against the wrapper width):

       margin-bottom% = (0.103711 / width - (1 - contact) x ratio) x 100

   and for an <img> hero (% resolves against the SECTION width):

       margin-bottom% = (0.103711 - (1 - contact) x ratio x width) x 100

   where 0.103711 = 0.295 x 0.351563, and `width` is the machine width as a
   fraction of the section. Every `width` below is paired, in the very next
   rule, with the `margin-bottom` it implies. Change one and you must
   recompute the other or the machine leaves the ground.

   WHY 57% IS A CEILING ABOVE 768px
   --------------------------------------------------------------------------
   From 768px up, Bootstrap's `col-md-5 offset-md-7` puts the heading in a
   narrow right-hand column starting at  W/2 + containerWidth/12 + 15px.
   The machine has z-index:999, so anything wider paints OVER the heading.
   The binding case is 1920px, where the text starts at 57.16% of the width.
   Below 768px the column collapses to full width and the text moves above the
   machine, so the machines are widened there for legibility.

   SCOPE
   --------------------------------------------------------------------------
   All six heroes: Home, Trucking, Contact Us, Sand & Gravel, Site Work,
   Septics, plus Privacy / Thank You (both use `.privacy`).
   Snow Removal has no machine and a photographic background, so it is not
   touched.

   WHY `!important`
   --------------------------------------------------------------------------
   sand-gravel.php, site-work.php, septics.php and home.php used to carry
   inline <style> blocks of hand-tuned hero pixels, all of it `!important`.
   Those blocks were deleted when this sheet went live, so nothing competes
   with it any more - but the `!important` is kept deliberately:

     - it makes this sheet correct no matter what order the host serves a
       cached template in (a purged CSS file against a still-cached page is a
       real possibility on WP Engine), and
     - the hero rules it supersedes in style.css are spread across eight media
       queries, so an accidental edit there cannot quietly break the ground
       alignment.

   If you ever strip the `!important`, the selectors still out-rank style.css
   on specificity alone - every rule here is anchored on `main.internal` (or
   `body.home`) rather than a bare `.truck_img`. The two shared blocks below
   also go through `.banner-section`, because they have to beat style.css's
   three-class `.truking .truck_img.jcb_dumper figure`.
   ========================================================================== */


/* ==========================================================================
   1. SHARED — figure-based heroes
   Trucking, Contact Us, Site Work, Septics, Privacy / Thank You
   ========================================================================== */
main.internal .banner-section .truck_img {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;              /* the lift lives on the figure's margin */
    z-index: 999;
}
main.internal .banner-section .truck_img > figure {
    height: 0 !important;              /* height comes from padding-top alone */
    min-height: 0 !important;
    max-width: none !important;
    width: 100% !important;
    background-size: 100% !important;  /* width-driven; height follows the ratio */
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    margin: 0;
}


/* ==========================================================================
   2. SHARED — <img> based heroes
   Home, Sand & Gravel. An <img> with height:auto already renders at its
   natural ratio, so only the vertical anchor needs fixing.
   ========================================================================== */
body.home .banner-section img.truck_img,
main.internal.send_graval .banner-section img.truck_img {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 999;
    height: auto !important;
    max-width: none !important;
}


/* ==========================================================================
   3. PER-PAGE — machine width, and the lift it implies
   ========================================================================== */

/* -- Trucking + Contact Us ------------------------------------ truking.png */
/* padding-top 512 / 1295 = 39.5367% */
main.internal.truking .truck_img            { width: 57% !important; }
main.internal.truking .truck_img > figure   { padding-top: 39.5367% !important;
                                              margin-bottom: 12.403% !important; }
@media only screen and (max-width: 767px) {
    main.internal.truking .truck_img          { width: 78% !important; }
    main.internal.truking .truck_img > figure { margin-bottom: 7.504% !important; }
}
@media only screen and (max-width: 575px) {
    main.internal.truking .truck_img          { width: 92% !important; }
    main.internal.truking .truck_img > figure { margin-bottom: 5.481% !important; }
}


/* -- Site Work ----------------------------------------- Header-Site-work.png */
/* padding-top 874 / 1216 = 71.8750%
   38.65% looks like a big drop from the shipped 70%, but the template was
   forcing `background-size: contain` into a 400px box, so the machine was
   already rendering at ~556px wide. On-screen size is unchanged.            */
main.internal.sitework .truck_img           { width: 38.65% !important; }
main.internal.sitework .truck_img > figure  { padding-top: 71.8750% !important;
                                              margin-bottom: 26.589% !important; }
@media only screen and (max-width: 767px) {
    main.internal.sitework .truck_img          { width: 52.89% !important; }
    main.internal.sitework .truck_img > figure { margin-bottom: 19.364% !important; }
}
@media only screen and (max-width: 575px) {
    main.internal.sitework .truck_img          { width: 62.38% !important; }
    main.internal.sitework .truck_img > figure { margin-bottom: 16.381% !important; }
}


/* -- Septics -------------------------------------------- Header-Septic.png */
/* padding-top 1210 / 2047 = 59.1109%  (same `contain` story as Site Work)

   Septics sits 20px LOWER than the shared 0.295 horizon, at art direction's
   request - the machine reads better dug a little further into the gravel.
   That drop is proportional, not a flat 20px: 20px measured at a 1440px
   viewport is 20 / (1440 x 0.351563) = 0.03951 of the banner height, so

       septics wheel line = 0.295 - 0.03951 = 0.25549

   which keeps it locked to the ground at every width the way the others are.
   In real pixels that reads as 20px at 1440, ~27px at 1920, ~11px at 768.
   To nudge it again, change ONLY the 0.25549 and recompute the three
   margin-bottom values with the formula in the header.                      */
main.internal.septics .truck_img            { width: 46.99% !important; }
main.internal.septics .truck_img > figure   { padding-top: 59.1109% !important;
                                              margin-bottom: 18.820% !important; }
@media only screen and (max-width: 767px) {
    main.internal.septics .truck_img          { width: 64.30% !important; }
    main.internal.septics .truck_img > figure { margin-bottom: 13.674% !important; }
}
@media only screen and (max-width: 575px) {
    main.internal.septics .truck_img          { width: 75.85% !important; }
    main.internal.septics .truck_img > figure { margin-bottom: 11.547% !important; }
}


/* -- Privacy + Thank You ------------------------------------ main-truck.png */
/* padding-top 552 / 1062 = 51.9774%
   The shipped CSS gave this a 1006px-wide box with a 400px min-height while
   the artwork needs 523px, so 123px of the truck was being cut off.        */
main.internal.privacy .truck_img            { width: 51% !important; }
main.internal.privacy .truck_img > figure   { padding-top: 51.9774% !important;
                                              margin-bottom: 19.301% !important; }
@media only screen and (max-width: 767px) {
    main.internal.privacy .truck_img          { width: 69.79% !important; }
    main.internal.privacy .truck_img > figure { margin-bottom: 13.826% !important; }
}
@media only screen and (max-width: 575px) {
    main.internal.privacy .truck_img          { width: 82.31% !important; }
    main.internal.privacy .truck_img > figure { margin-bottom: 11.566% !important; }
}


/* -- Sand & Gravel ------------------------------- main-truck.png, <img> hero */
/* margin-bottom here resolves against the SECTION width, not the image width */
main.internal.send_graval img.truck_img     { width: 51% !important;
                                              margin-bottom: 9.844% !important; }
@media only screen and (max-width: 767px) {
    main.internal.send_graval img.truck_img { width: 69.79% !important;
                                              margin-bottom: 9.649% !important; }
}
@media only screen and (max-width: 575px) {
    main.internal.send_graval img.truck_img { width: 82.31% !important;
                                              margin-bottom: 9.520% !important; }
}


/* -- Home ---------------------------------------- main-truck.png, <img> hero */
/* 57% rather than the shipped 60%: at wide viewports 60% ran the truck into
   the heading column (see the 57% ceiling note above).                      */
body.home .banner-section img.truck_img     { width: 57% !important;
                                              margin-bottom: 9.782% !important; }
@media only screen and (max-width: 767px) {
    body.home .banner-section img.truck_img { width: 78% !important;
                                              margin-bottom: 9.564% !important; }
}
@media only screen and (max-width: 575px) {
    body.home .banner-section img.truck_img { width: 92% !important;
                                              margin-bottom: 9.419% !important; }
}