/* Custom CSS for ROC Electric static site
   Tailwind utility classes via CDN handle most styling.
   This file adds: design tokens, fonts, and a few component helpers. */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 4%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 4%;
  --primary: 0 0% 4%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 17%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 95%;
  --muted-foreground: 0 0% 40%;
  --accent: 45 95% 55%;
  --accent-foreground: 0 0% 4%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 20%;
  --radius: 0.25rem;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
  margin: 0;
}
main { padding-top: 4rem; }

/* Animations */
@keyframes fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Button base */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.625rem 1.25rem; font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em; font-size: 1rem; cursor: pointer;
  border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; transition: all 0.3s ease;
}
.btn-accent { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-accent:hover { background: hsl(var(--accent) / 0.9); transform: scale(1.05); }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { background: hsl(var(--primary) / 0.9); transform: scale(1.05); }
.btn-light { background: hsl(var(--primary-foreground)); color: hsl(var(--primary)); }
.btn-light:hover { background: hsl(var(--primary-foreground) / 0.85); transform: scale(1.05); }
.btn-outline { border: 1px solid hsl(var(--primary)); color: hsl(var(--primary)); background: transparent; }
.btn-outline:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-lg { padding: 1rem 2rem; font-size: 1.125rem; }

/* Form inputs */
.input, .textarea {
  width: 100%; padding: 0.625rem 0.875rem; font-size: 0.95rem;
  background: hsl(var(--muted)); color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  font-family: inherit;
}
.input:focus, .textarea:focus { outline: 2px solid hsl(var(--ring)); outline-offset: -1px; }
.textarea { min-height: 140px; resize: vertical; }

/* Accordion */
.accordion-item { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0 1.25rem; }
.accordion-trigger {
  width: 100%; text-align: left; padding: 1rem 0; background: none; border: 0; cursor: pointer;
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.08em; font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center; color: inherit;
}
.accordion-content { display: none; padding-bottom: 1.25rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }
.accordion-item.open .accordion-content { display: block; }
.accordion-item.open .accordion-trigger svg { transform: rotate(180deg); }
.accordion-trigger svg { transition: transform 0.2s; flex-shrink: 0; margin-left: 1rem; }

/* Sticky call (mobile only) */
@media (min-width: 1024px) { .sticky-call { display: none !important; } }

/* Image hover scale helper used inside .group */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-110 { transform: scale(1.10); }

/* Hide mobile menu by default */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }
@media (min-width: 1024px) { .mobile-menu, .mobile-toggle { display: none !important; } }

/* Toast */
#toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(100px);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  padding: 0.875rem 1.25rem; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  opacity: 0; transition: all 0.3s; pointer-events: none; z-index: 100; max-width: 90%;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { background: hsl(0 70% 45%); }