/* site.css - the small amount of styling the original page applied at runtime.
 *
 * The live site sets four colours with jQuery after load:
 *
 *   $('.form-inner-box').css("background", 'rgb(252, 97, 45)');
 *   $('.divider-1 span').css("background", 'rgb(252, 97, 45)');
 *   $('.btn-link-2').css("background", 'rgb(252, 97, 45)');
 *   $('.services .panel-primary > .panel-heading').css("background", 'rgb(252, 97, 45');
 *
 * The fourth call is missing a closing paren, so it throws and the browser
 * leaves the panel headings as the stylesheet painted them (#002b46). That is
 * what the reference screenshots show, so we reproduce it faithfully: three
 * overrides applied, the fourth (deliberately) not.
 *
 * Written as static CSS instead of JS so it cannot flash before paint.
 */

.form-inner-box {
  background: rgb(252, 97, 45);
}

.divider-1 span {
  background: rgb(252, 97, 45);
}

.btn-link-2 {
  background: rgb(252, 97, 45);
}

/* --- Hero background -----------------------------------------------------
 * scripts.js called:
 *     $('.top-content').backstretch("assets/img/backgrounds/1.jpg");
 *
 * Backstretch inserts a .backstretch wrapper into .top-content, sets it to
 * position:absolute, paints the image at cover size, and forces the host to
 * `position: relative; z-index: 0` so the wrapper's negative z-index paints
 * above the page background but below the hero content.
 */
.top-content {
  position: relative;
  z-index: 0;
}

.top-content > .backstretch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -999998;
  margin: 0;
  padding: 0;
}

.top-content > .backstretch img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}

/* .inner-bg, the nav and the top bar all have to sit above the fixed negative
 * z-index Backstretch used, exactly as on the live page. */
.top-content > .top-bar,
.top-content > .navbar,
.top-content > .inner-bg {
  position: relative;
  z-index: 1;
}

/* --- Loader --------------------------------------------------------------
 * scripts.js did:
 *     $(".loader-img").fadeOut();
 *     $(".loader").delay(1000).fadeOut("slow");
 *
 * The loader is a white overlay with a 60px spinner. main.js removes it on
 * window load; this is only the safety margin so it can never trap the page.
 */
.loader {
  transition: opacity 0.4s linear, visibility 0.4s linear;
}

.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- Dividers -------------------------------------------------------------
 * .divider-1 / .divider-2 are wrappers whose only child is a 50x4 inline-block
 * bar. The original CSS gives the span its 4px height but leaves the wrapper's
 * font-size and line-height inherited (16px / 30px), so the line box around the
 * bar is 30px tall and every section carries 26px of extra height that the live
 * page does not show.
 *
 * Collapsing the wrapper's own font metrics makes the box exactly as tall as
 * the bar (4px), which is what the hash-verified reference screenshots measure
 * for #about / #service / #gallery / #contact at all four widths.
 */
.divider-1,
.divider-2 {
  font-size: 0;
  line-height: 0;
}

/* --- Collapse panels -----------------------------------------------------
 * Bootstrap's collapse JS is gone; main.js toggles .in and sets height.
 * Keep the original panel look intact for both states.
 */
.services .panel-body.in {
  display: block;
}

/* The closed/open glyph on the panel headings, exactly as the original CSS
 * declares it (#panel_open_close.collapsed:after content "\2b"). */
#panel_open_close {
  cursor: pointer;
}

/* --- Lightbox ------------------------------------------------------------
 * The live page's lightbox never initialises: a malformed HTML comment swallows
 * the inline script that binds it, so gallery tiles fall through to the plain
 * <a target="_blank">. main.js restores the modal behaviour the markup asks for
 * using the original lightboxgallery CSS classes.
 */
.lightboxgallery-modal-wrapper {
  -webkit-user-select: none;
  user-select: none;
}