/* === DeepLocal Custom Additions === */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');

:root {
  --background: 40 33% 96%;
  --foreground: 24 13% 8%;
  --border: 24 13% 8% / 0.1;
  --card: 0 0% 100%;
  --card-foreground: 24 13% 8%;
  --primary: 350 85% 42%;
  --primary-foreground: 0 0% 100%;
  --muted: 24 13% 8% / 0.05;
  --muted-foreground: 24 13% 8% / 0.7;
  --ring: 350 85% 42%;
  --radius: 0rem;

  --app-font-sans: 'DM Sans', sans-serif;
  --app-font-serif: 'Newsreader', serif;
}

body {
  font-family: 'DM Sans', sans-serif;
  background-color: #FAF6F0;
  color: #161311;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.font-serif { font-family: 'Newsreader', serif; }
.font-sans  { font-family: 'DM Sans', sans-serif; }

/* --- Navbar --- */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 1.5rem 0;
}
#navbar.scrolled {
  background-color: rgba(250, 246, 240, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(22, 19, 17, 0.1);
  padding: 1rem 0;
}

/* --- Noise Overlay --- */
.noise-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0.03;
  mix-blend-mode: multiply;
}

/* --- Grid Background --- */
.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: linear-gradient(#161311 1px, transparent 1px), linear-gradient(90deg, #161311 1px, transparent 1px);
  background-size: 40px 40px;
}

/* --- Animations --- */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* --- Buttons --- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: #C8102E; color: white;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  transition: background 0.2s;
  border: none; cursor: pointer;
}
.btn-primary:hover { background: #8B1A1A; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #161311;
  border: 1px solid #161311;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  transition: all 0.2s;
  cursor: pointer;
}
.btn-outline:hover { background: #161311; color: white; }

.btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  background: #161311; color: white;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  transition: background 0.2s;
  border: none; cursor: pointer;
}
.btn-dark:hover { background: #C8102E; }

/* --- Category Buttons --- */
.quick-category {
  background: transparent;
  cursor: pointer;
  outline: none;
}
.quick-category:hover {
  background-color: #fff;
}

/* --- FAQ --- */
.faq-answer { overflow: hidden; transition: all 0.3s ease-out; }
.faq-answer.hidden { max-height: 0; padding-bottom: 0; }
.faq-answer:not(.hidden) { max-height: 500px; }

/* --- Form --- */
.form-input {
  width: 100%;
  border: 1px solid rgba(22, 19, 17, 0.2);
  background: transparent;
  padding: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus { border-color: #C8102E; }