/* ==========================================================================
   Bollmeyer Inc. — custom overrides
   Loaded AFTER style.css and color.css. Keep all BINC-specific tweaks here so
   template files stay easy to update. Brand re-color lives in color.css.
   ========================================================================== */

/* Brand palette (for reference / custom use)
   --binc-green:        #4e8d1e
   --binc-green-dark:   #2f5e12
   --binc-green-hover:  #3a6a16
*/
:root {
  --binc-green: #4e8d1e;
  --binc-green-dark: #2f5e12;
  --binc-green-hover: #3a6a16;
}

/* The BINC logo is a raster PNG (≈2:1). Constrain it so the navbar/footer keep
   the template's proportions. */
.navbar-brand-item { max-height: 42px; width: auto; }
.footer-logo-item  { max-height: 52px; width: auto; }

/* Service "content" icons (corn / fertilizer / chemical PNGs) sizing */
.binc-service-icon { width: 64px; height: 64px; object-fit: contain; }

/* Keep staff portraits tidy and uniform in team cards */
.binc-team-photo { aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; }

/* Faith/scripture accent line used across pages */
.binc-scripture { font-style: italic; opacity: .85; }

/* Inner-page banner photo. Replaces the template's decorative pattern with a
   real header image, CSS-cropped via background-size:cover so the banner keeps
   its existing (content-driven) height instead of growing. The ::before adds the
   same ~0.4 dark overlay as the hero slider so the white heading stays legible.
   Per-page image is set inline (background-image) on the banner div. */
.page-banner {
  position: relative;
  z-index: 1;
  background-color: #343a40; /* fallback while the image loads / if missing */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.4;
  z-index: -1;
}

/* CTA parallax bands. The photo covers the viewport (fits the screen, sharp) with
   a fixed-attachment parallax feel — no JS, no zoom/upsc* blur. The ::before sits
   BELOW the content (z-index:-1) so it darkens ONLY the background image, never the
   text; headings/copy stay bright white. */
.cta-parallax {
  position: relative;
  z-index: 1;
  background-image: url(../img/facilities/farm-sunset-drone.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.cta-parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.cta-parallax,
.cta-parallax h2,
.cta-parallax h3,
.cta-parallax p,
.cta-parallax span { color: #fff; }

/* Darken every hero slide ~20% more than the template default. The slides use
   .bg-overlay-dark-2 (a 0.2 black overlay); bump it to 0.4 so all hero images
   AND the background video read a little darker (keeps the white text legible).
   The overlay is z-index:-1, so it darkens the z-index:-2 video too. */
.hero-slider .bg-overlay-dark-2:before { opacity: 0.4; }

/* Hero-slider background video. Sits behind the .bg-overlay-dark-2 darkening
   layer (which is z-index:-1) so the overlay + text stay readable. The slide's
   background-image is kept as a poster/fallback for browsers that won't play it. */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: -2;
}

/* Breathing room between the main nav links and the "Customer Login" button.
   Targets the button's wrapper (a .navbar-nav that is a direct child of the
   navbar .container, i.e. NOT the links <ul> inside #navbarCollapse). */
@media (min-width: 992px) {
  .navbar > .container > .navbar-nav { margin-left: 1.75rem; }
}