/* ============================================================
   ONYX CRUSHING AZ LLC — Site styles
   Tailwind extends + custom industrial styling
   ============================================================ */

html { scroll-behavior: smooth; }
body { font-family: 'Manrope', system-ui, sans-serif; }

.display { font-family: 'Oswald', Impact, sans-serif; font-weight: 600; letter-spacing: -0.01em; line-height: 0.95; }
.eyebrow { font-family: 'Oswald', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; }
.num     { font-feature-settings: "tnum" 1, "lnum" 1; }
.tracking-mega       { letter-spacing: -0.03em; }
.tracking-industrial { letter-spacing: 0.08em; }

/* Grain / texture overlay (used on dark hero panels) */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px; mix-blend-mode: overlay; opacity: 0.6;
}

/* Diagonal hazard stripes */
.hazard { background-image: repeating-linear-gradient(135deg, #0F0F10 0 14px, #EAB308 14px 28px); }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.2, 0.7, 0.1, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Nav dropdown */
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms; }

/* Industrial cut corners */
.cut-corner { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }

/* Carousel snap */
.carousel-track { scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.carousel-item  { scroll-snap-align: start; }

/* Focus ring */
:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; border-radius: 2px; }

/* Tabs */
.svc-tab {
  font-family: 'Oswald', sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 12px; font-weight: 500; padding: 12px 18px;
  border: 1px solid rgba(212, 196, 168, 0.2);
  color: #D4C4A8; transition: all 160ms ease; cursor: pointer; background: transparent;
}
.svc-tab:hover { color: #F97316; border-color: #F97316; }
.svc-tab.is-active { background: #EA580C; color: #fff; border-color: #EA580C; }

/* Chips */
.chip {
  font-family: 'Oswald', sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 11px; font-weight: 500; padding: 10px 16px;
  border: 1px solid rgba(212, 196, 168, 0.25);
  color: #D4C4A8; background: transparent; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.chip:hover { color: #FB923C; border-color: #FB923C; }
.chip.is-active { background: #EA580C; color: #fff; border-color: #EA580C; }
.chip.light { color: #27272A; border-color: rgba(39,39,42,0.3); }
.chip.light:hover { color: #EA580C; border-color: #EA580C; }
.chip.light.is-active { background: #0F0F10; color: #fff; border-color: #0F0F10; }

/* Filterable card hidden state */
.is-hidden { display: none !important; }

/* FAQ accordion */
.faq-item { border-top: 1px solid rgba(15,15,16,0.12); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { transition: transform 200ms ease; flex: 0 0 auto; }
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-item .faq-body { padding-bottom: 22px; color: #3F3F46; line-height: 1.65; max-width: 65ch; }

/* Tonnage calc inputs */
.calc-input {
  width: 100%; padding: 14px 16px; background: #0F0F10;
  border: 1px solid #3F3F46; color: #F1ECE0;
  font-family: 'Manrope', sans-serif; font-size: 16px;
}
.calc-input:focus { outline: none; border-color: #EA580C; }

/* Gradation viz */
.grad-chip {
  font-family: 'Oswald', sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 11px; padding: 8px 14px; cursor: pointer;
  border: 1px solid rgba(212, 196, 168, 0.3);
  color: #D4C4A8; background: transparent; transition: all 150ms;
}
.grad-chip:hover { color: #FB923C; border-color: #FB923C; }
.grad-chip.is-active { background: #EA580C; color: #fff; border-color: #EA580C; }

/* Plant diagram hotspots */
.hotspot {
  cursor: pointer; transition: transform 200ms ease;
}
.hotspot:hover { transform: scale(1.15); }
.hotspot circle.pulse {
  transform-origin: center;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.1; transform: scale(1.8); }
}
.hotspot-card {
  position: absolute; background: #0F0F10; color: #F1ECE0;
  padding: 16px 18px; border-left: 3px solid #EA580C;
  width: 280px; pointer-events: none; opacity: 0; transition: opacity 200ms ease;
  z-index: 5;
}
.hotspot-card.is-visible { opacity: 1; }

/* Gallery lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(8,8,10,0.96); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next {
  position: absolute; background: rgba(15,15,16,0.7); color: #F1ECE0;
  width: 56px; height: 56px; display: grid; place-items: center;
  border: 1px solid rgba(241,236,224,0.2); cursor: pointer;
  transition: background 150ms;
}
.lightbox .lb-close:hover, .lightbox .lb-prev:hover, .lightbox .lb-next:hover { background: #EA580C; border-color: #EA580C; }
.lightbox .lb-close { top: 24px; right: 24px; }
.lightbox .lb-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next  { right: 24px; top: 50%; transform: translateY(-50%); }

/* ZIP checker result */
.zip-result.is-yes { background: rgba(34,197,94,0.1); border-left-color: #22C55E; }
.zip-result.is-far { background: rgba(234,179,8,0.1); border-left-color: #EAB308; }
.zip-result.is-no  { background: rgba(239,68,68,0.1); border-left-color: #EF4444; }

/* Timeline */
.timeline-rail { position: relative; }
.timeline-rail::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: #3F3F46;
}
.timeline-item { position: relative; padding-left: 50px; }
.timeline-dot { position: absolute; left: 4px; top: 6px; width: 18px; height: 18px; background: #EA580C; border: 3px solid #0F0F10; border-radius: 50%; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hotspot circle.pulse { animation: none; }
}

/* Print */
@media print {
  header.site-header, footer.site-footer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}