/* Net30 hero slider (dev preview) - Antler-style rotating business imagery.
   Enqueued only for dev.net30hosting.com front page (see functions.php).
   Slides: the trucker, the shop owner, the store. Pure CSS crossfade. */

.home .net30-hero {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  overflow: hidden;
  background: #171310;
  isolation: isolate;
}

.home .net30-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home .net30-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: net30-hero-fade 18s ease-in-out infinite;
}

.home .net30-hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home .net30-hero-slide--2 { animation-delay: 6s; }
.home .net30-hero-slide--3 { animation-delay: 12s; }

@keyframes net30-hero-fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  33%  { opacity: 1; }
  39%  { opacity: 0; }
  100% { opacity: 0; }
}

.home .net30-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 11, 9, 0.56) 0%,
    rgba(14, 11, 9, 0.42) 40%,
    rgba(14, 11, 9, 0.48) 70%,
    rgba(14, 11, 9, 0.70) 100%);
}

.home .net30-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 84px;
}

/* Light hero text over photography (copy and structure unchanged). */
.home .entry-content .net30-hero-inner h1 {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.home .entry-content .net30-hero-inner h1 .net30-hero-accent {
  color: #ffa94d;
}

.home .entry-content .net30-hero-inner .reporting-pill {
  background: rgba(14, 11, 9, 0.55);
  color: #ffffff;
}

.home .entry-content .net30-hero-inner .hero-sub {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.home .entry-content .net30-hero-inner .hero-checks li {
  color: #ffffff;
  padding-left: 0;
}

/* Exactly one check per line: custom.css's generic h1 + p + ul rule also
   paints a check via li::before; in the slider the content's own .check
   span is the single check, so the pseudo-element check is removed. */
.home .entry-content .net30-hero-inner .hero-checks li::before {
  content: none;
}

.home .entry-content .net30-hero-inner .hero-checks .check {
  color: #ffa94d;
}

.home .entry-content .net30-hero-inner .net30-domain-label {
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.home .entry-content .net30-hero-inner .domain-search-alt {
  color: rgba(255, 255, 255, 0.88);
}

.home .entry-content .net30-hero-inner .domain-search-alt a {
  color: #ffd9ad;
}

@media (max-width: 640px) {
  .home .net30-hero-inner {
    padding: 48px 18px 60px;
  }

  .home .entry-content .net30-hero-inner h1 {
    font-size: 2.1rem;
  }

  .home .entry-content .net30-hero-inner .hero-checks {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .net30-hero-slide {
    animation: none;
  }

  .home .net30-hero-slide--1 {
    opacity: 1;
  }
}