/* ============================================
   Devil's Kiss Burger Truck — NEOBRUTALISM
   Thick borders. Hard shadows. Bold colors. Zero gradients.
   ============================================ */

/* Design tokens — Neobrutalism */
:root {
  --color-primary: #E11D48;
  --color-primary-dark: #BE123C;
  --color-secondary: #FBBF24;
  --color-accent: #F97316;
  --color-bg: #FEFCE8;
  --color-bg-alt: #FEF9C3;
  --color-text: #000000;
  --color-text-muted: #374151;
  --color-border: #000000;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --max-width: 1280px;
  --border: 3px solid #000000;
  --shadow: 5px 5px 0 #000000;
  --shadow-hover: 8px 8px 0 #000000;
  --shadow-sm: 3px 3px 0 #000000;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }

/* ---- NEOBRUTALISM UTILITIES ---- */

/* Brutalist card */
.brutal-card {
  background: var(--color-white, #fff);
  border: var(--border);
  box-shadow: var(--shadow);
  transition: all 0.15s ease;
}

.brutal-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translate(-2px, -2px);
}

/* Brutalist button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: 1rem;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
  text-decoration: none;
}

.btn:hover {
  box-shadow: var(--shadow);
  transform: translate(-2px, -2px);
}

.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  color: white;
}

.btn-secondary {
  background: var(--color-secondary);
  color: #000;
}

.btn-secondary:hover {
  background: #F59E0B;
  color: #000;
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
}

.btn-outline:hover {
  background: var(--color-text);
  color: white;
}

/* Brutalist image frame */
.brutal-img {
  border: var(--border);
  box-shadow: var(--shadow);
}

/* Brutalist badge */
.brutal-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
}

/* Menu item card — tilts on hover */
.menu-card {
  background: white;
  border: var(--border);
  box-shadow: var(--shadow);
  transition: all 0.15s ease;
  padding: 1.5rem;
}

.menu-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translate(-2px, -2px) rotate(-1deg);
}

/* Price tag */
.price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-primary);
}

/* ---- LAYOUT ---- */

/* Fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Active nav */
nav a.active {
  color: var(--color-primary);
  font-weight: 700;
  border-bottom: 3px solid var(--color-primary);
}

/* Mobile nav */
#mobile-nav { transition: max-height 0.3s ease; }
#mobile-nav.hidden { display: none; }

/* Contact form — brutalist */
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: var(--border);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: white;
  transition: box-shadow 0.15s ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  box-shadow: var(--shadow-sm);
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

/* Section spacing */
section { padding-top: 5rem; padding-bottom: 5rem; }
section:first-of-type { padding-top: 0; }

p { line-height: 1.75; }

section[id] { scroll-margin-top: 5rem; }

/* Zigzag divider */
.zigzag {
  height: 20px;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 10px,
    var(--color-primary) 10px,
    var(--color-primary) 20px
  );
  border-top: var(--border);
  border-bottom: var(--border);
}