/* ===========================================================================
   Home banner, part 2: the 50-second infomercial.
   nexgensurveying.com  -  assets/css/banner-video.css

   Scope: the home-page banner and nothing else. Every selector below is either
   a .banner-video* class that exists only inside the banner's right-hand
   column, or a .banner-wrapper rule inside a min-width media query that
   corrects one value from responsive.css.

   LOAD ORDER MATTERS. This file must be linked AFTER responsive.css. It
   overrides .banner-wrapper's large-screen padding at the same specificity, so
   it only wins by coming later in the cascade. Moving the <link> above
   responsive.css silently undoes the big-screen fix.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   The block

   No card, no panel, no padding: the video is the block. Earlier revisions
   wrapped it in a white box with a heading above and a caption below, which is
   what produced the white border and the two lines of text.
   --------------------------------------------------------------------------- */
.banner-video {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* The only frame the video gets. 2px is enough to separate it from banner.jpg
   without reading as a border; the shadow does the rest of the lifting. The
   box is inset from the right corner, so it keeps all four borders and all
   four corners - an earlier revision ran it flush to the screen edge and
   dropped the right-hand ones. */
.banner-video-frame {
  position: relative;
  line-height: 0;                  /* kill the inline-block descender gap */
  border: 2px solid #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.banner-video-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;            /* source is exactly 1920x1080, so no bars */
  object-fit: cover;
  background-color: #000000;
}


/* ---------------------------------------------------------------------------
   Mute toggle

   One button, two states, driven by .is-muted:

     .is-muted   crossed-out speaker, "Tap for sound"  -> pressing it unmutes
     (default)   speaker with waves,  "Mute"           -> pressing it mutes

   It is visible whenever the script is driving playback, in BOTH states. That
   is not cosmetic: WCAG 1.4.2 (Level A) requires a mechanism to stop or
   control audio that starts automatically and runs for more than three
   seconds, and when the browser does permit unmuted autoplay this button is
   that mechanism. An earlier revision hid it as soon as sound was on, which
   failed that criterion and left no way to silence the page.

   It stays hidden only in the fallback case, where the script hands over the
   browser's own controls instead.

   44px minimum box: the smallest touch target Apple and Google both consider
   reliable.
   --------------------------------------------------------------------------- */
.banner-video-sound {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 22px;
  background-color: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.banner-video-sound.is-visible { display: inline-flex; }

/* Muted is the state that needs to invite a tap, so it gets the brand colour;
   as a plain mute control the button steps back to neutral. */
.banner-video-sound.is-muted {
  background-color: rgba(29, 55, 104, 0.92);
}

.banner-video-sound:hover,
.banner-video-sound:focus {
  background-color: #1d3768;
  outline: 2px solid #d1b750;
  outline-offset: 2px;
}

.banner-video-sound svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
}

/* Swap the icons with the state. Both selectors outrank the bare `svg` rule
   above, so display wins without !important. */
.banner-video-sound .banner-video-sound-off { display: none; }
.banner-video-sound.is-muted .banner-video-sound-on { display: none; }
.banner-video-sound.is-muted .banner-video-sound-off { display: block; }


/* ---------------------------------------------------------------------------
   50 / 50 FULL-BLEED SPLIT

   The banner is two halves of the screen. Left half: the copy, with
   banner.jpg showing behind it - and only there, because the right half is
   covered. Right half: the video, edge to edge, no border, no gap, full
   height of the section.

   To do that the banner's .container has to stop being a container: its
   1140px cap and its 15px padding are removed and the two columns are pinned
   at 50% with no gutters. This is scoped to .banner-wrapper, so every other
   section on the site keeps the normal 1140px container.

   HEIGHT. The left half sets it, via min-height: 28.125vw - which is 50vw at
   16:9, i.e. exactly the height the video would have if it were not cropped.
   The video half is absolutely positioned, so it contributes no height of its
   own and simply fills whatever the left half asks for. That ordering is
   deliberate: the split can never show a gap under the video, and if the copy
   ever needs more room (a longer subheading, a narrow desktop) the section
   grows and the video covers the extra rather than leaving a band of
   background. The cost is that object-fit: cover crops the video slightly
   when the halves are not exactly 16:9. At 1920 the crop is nil; it only
   bites if the copy pushes the section taller.

   TEXT ALIGNMENT. padding-left is max(60px, half the leftover outside a
   1140px container), so the copy starts on the same vertical line as every
   other section's left edge. A side effect worth knowing: that makes the text
   column exactly 510px wide at every screen width from 1260px up, because
   50vw - (50vw - 570) - 60 = 510. The h1 needs about 344px, so it is safe.

   TOP CLEARANCE. .navigation-wrap is position: fixed, top: 39px, with a solid
   white background, and runs roughly 86px tall, so anything above ~125px sits
   hidden behind it. 140px of padding-top keeps the split clear of the nav
   rather than sliding the video underneath it.
   --------------------------------------------------------------------------- */
@media all and (min-width: 1200px) {
  .banner-wrapper {
    padding: 140px 0 0 0;
  }
  .banner-wrapper .container {
    max-width: none;
    width: 100%;
    padding: 0;
  }
  .banner-wrapper .banner-area .row {
    margin: 0;
    align-items: stretch;
  }
  .banner-wrapper .banner-area .row > div {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    padding: 0;
    /* align-self on the item wins over align-items on the container whatever
       its importance. Bootstrap's .align-items-center utility is
       `align-items: center !important`; if it ever goes back on this row, the
       columns still stretch and the absolutely-positioned video still has a
       containing block with height. Without this the video renders 960x0. */
    align-self: stretch;
  }

  /* --- left half: copy over the background image --- */
  .banner-wrapper .banner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 28.125vw;              /* 50vw at 16:9 */
    padding: 60px;
    padding-left: 60px;                /* fallback where max() is unsupported */
    padding-left: max(60px, calc((100vw - 1140px) / 2));
  }

  /* --- right half: video, edge to edge --- */
  .banner-wrapper .banner-area .row > div:last-child {
    position: relative;
  }
  .banner-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
  }
  /* A half-screen panel butted against the copy has no edge to frame. */
  .banner-video-frame {
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .banner-video-player {
    height: 100%;
    aspect-ratio: auto;                /* the half decides, not 16:9 */
    object-fit: cover;
  }
  .banner-video-sound {
    right: 20px;
    bottom: 20px;
  }
}

/* Between 1200 and 1499 the copy is the taller half, so the section ends up
   less than 16:9 and object-fit: cover starts eating the sides of the frame.
   Tighter vertical padding keeps the section closer to the video's own shape
   and the crop down to a few per cent. The speaker is centred in frame, so
   what cover trims is the blue graphic border, not him. */
@media all and (min-width: 1200px) and (max-width: 1499px) {
  .banner-wrapper .banner-content {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}


/* ---------------------------------------------------------------------------
   Tablet and phone
   --------------------------------------------------------------------------- */
@media all and (max-width: 1199px) {
  .banner-video {
    margin-top: 30px;              /* the row has stacked; separate the parts */
  }
}

@media all and (max-width: 575px) {
  .banner-video-frame {
    border-width: 1px;
    border-radius: 3px;
  }
  /* Room is tight on a phone: keep the 44px box, drop the text label. */
  .banner-video-sound {
    right: 8px;
    bottom: 8px;
    padding: 0 14px;
    min-width: 44px;
    gap: 0;
  }
  .banner-video-sound .banner-video-sound-text { display: none; }
}