/* ========================================
   Sunrise Electric LLC — Custom Styles
   Deep forest green + warm amber
   Zilla Slab (headings) + Montserrat (body)
   ======================================== */

/* Honeypot field — hidden from users, visible to bots */
.honeypot-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 100;
  padding: 8px 16px;
  background: #B45309;
  color: #FFFFFF;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ── Hero Background Image ── */

.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 35, 24, 0.7);
}

/* ── Scroll Cue Bounce ── */

@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.scroll-cue {
  animation: bounce-down 2s ease-in-out infinite;
}

/* ── Smooth Scroll ── */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Focus States ── */

*:focus-visible {
  outline: 2px solid #B45309;
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* ── Scroll-triggered Entrance Animations ── */

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Mobile Call Bar ── */

.mobile-call-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 56px;
}

@media (min-width: 768px) {
  .mobile-call-bar {
    display: none;
  }
}