/* RSR Precision Toolings - Static HTML package for cPanel
   Notes:
   - Tailwind is loaded via CDN in each page for utility classes.
   - This file contains theme variables + a few small fixes.
*/

:root{
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;

  --background: 0 0% 100%;
  --foreground: 215 25% 27%;
  --card: 0 0% 100%;
  --card-foreground: 215 25% 27%;
  --popover: 0 0% 100%;
  --popover-foreground: 215 25% 27%;

  --primary: 210 60% 45%;
  --primary-foreground: 0 0% 100%;

  --secondary: 210 20% 92%;
  --secondary-foreground: 215 25% 27%;

  --muted: 210 20% 96%;
  --muted-foreground: 215 15% 45%;

  --accent: 215 80% 25%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 210 20% 88%;
  --input: 210 20% 88%;
  --ring: 210 60% 45%;

  --radius: 0.375rem;
  --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

html, body { height: 100%; }
body{
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
}

a{ text-decoration: none; }
img{ max-width: 100%; display: block; }

.site-card{
  border-radius: calc(var(--radius) * 2);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}
.site-card:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}
.site-btn{
  border-radius: calc(var(--radius) * 2);
}
.focus-ring:focus{
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Mobile menu animation */
#mobileMenu{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  padding-bottom: 0;
  transition: max-height 220ms ease, transform 180ms ease, opacity 180ms ease, padding-bottom 220ms ease;
  pointer-events: none;
}

#mobileMenu[data-open="true"]{
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 1rem;
  pointer-events: auto;
}