/* Wheel House Site Mockup — Shared Styles */
/* Utility-first with Tailwind CDN, this file covers custom additions only */

:root {
  --clay: #B5651D;
  --clay-light: #D4956A;
  --clay-dark: #8B4513;
  --cream: #FAF6F1;
  --warm-white: #FEFCF9;
  --charcoal: #2D2A26;
  --warm-gray: #6B6560;
  --sage: #7A8B6F;
  --sage-light: #E8EDE5;
  --border: #E8E0D8;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--charcoal);
  background: var(--warm-white);
}

a { text-decoration: none; }

/* Utility classes beyond Tailwind */
.bg-cream { background-color: var(--cream); }
.bg-warm-white { background-color: var(--warm-white); }
.bg-clay { background-color: var(--clay); }
.bg-clay-dark { background-color: var(--clay-dark); }
.bg-sage { background-color: var(--sage); }
.bg-sage-light { background-color: var(--sage-light); }
.text-clay { color: var(--clay); }
.text-clay-dark { color: var(--clay-dark); }
.text-warm-gray { color: var(--warm-gray); }
.text-charcoal { color: var(--charcoal); }
.border-warm { border-color: var(--border); }

.btn-primary {
  display: inline-block;
  background: var(--clay);
  color: white;
  padding: 0.625rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--clay-dark); }

.btn-secondary {
  display: inline-block;
  border: 1.5px solid var(--clay);
  color: var(--clay);
  padding: 0.575rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.15s;
}
.btn-secondary:hover { background: var(--clay); color: white; }

.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.img-placeholder {
  background: linear-gradient(135deg, var(--clay-light) 0%, #C4A882 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.badge-sage { background: var(--sage-light); color: var(--sage); }
.badge-clay { background: #F5E6D8; color: var(--clay-dark); }
.badge-red { background: #FDE8E8; color: #B91C1C; }

/* Nav */
nav a.active { color: var(--clay); font-weight: 500; }

/* Sticky header */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(254,252,249,0.92);
}

/* Section spacing */
.section { padding: 3rem 1rem; }
@media (min-width: 768px) { .section { padding: 4rem 2rem; } }

/* Grid helpers */
.grid-offerings { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }

/* Simple transitions for Alpine */
[x-cloak] { display: none !important; }