/* ==========================================================================
   Navajo Electric - chrome for the vanilla-JS replacements.
   Only styles that the ORIGINAL stylesheets do not already provide live here:
     .tinynav (mobile select), lightbox overlay, sticky-nav spacer,
     captcha placeholder, form validation state.
   Everything else is untouched original CSS.
   ========================================================================== */

/* Mobile nav <select> (tinynav.js replacement).
   The original responsive.css already sets display/width/float/position for
   .tinynav, so no box-model overrides belong here: adding margin or padding
   grew every page by 6-20px against the reference screenshots. */

/* Sticky nav spacer (navbar2.js replacement) ------------------------------- */
.nav-spacer {
  clear: both;
}

/* Captcha placeholder: the original box was a PHP-generated image ---------- */
.captcha-static {
  display: inline-block;
  width: 110px;
  /* 34px + 1px border top/bottom = 36px, the box the PHP captcha image
     occupied. At 42px the whole contact page grew 6px taller. */
  height: 34px;
  vertical-align: middle;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

/* Contact form validation state (contact.js replacement) ------------------ */
input.invalid,
textarea.invalid {
  border-color: #b94a48;
  background-color: #fff6f6;
}

/* Gallery lightbox (prettyPhoto replacement) ------------------------------ */
.pp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(0, 0, 0, 0.85);
  padding: 40px 20px;
  overflow: auto;
}

.pp-overlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-frame {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  padding: 10px;
  background: #111;
  border-radius: 4px;
  text-align: center;
}

.pp-frame .pp-image {
  display: block;
  max-width: 86vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.pp-frame .pp-caption {
  color: #ccc;
  font-size: 12px;
  padding-top: 8px;
  min-height: 16px;
}

.pp-frame .pp-counter {
  color: #888;
  font-size: 11px;
  padding-top: 2px;
}

.pp-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  background: #333;
  border-radius: 50%;
  text-decoration: none;
}

.pp-arrow {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  width: 40px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-size: 22px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

.pp-arrow:hover,
.pp-close:hover {
  background: #e44424;
  color: #fff;
}

.pp-prev { left: -50px; }
.pp-next { right: -50px; }

@media (max-width: 768px) {
  .pp-prev { left: 0; }
  .pp-next { right: 0; }
}