/* =========================================================
   Kuwu — theme.css
   Custom component styles layered over Tailwind.
   CSS custom properties are injected per-request from dealer
   brand colours via a <style> block in the base template.
   ========================================================= */

:root {
  --color-primary: #1a56db;
  --color-secondary: #6b7280;
  --radius: 0.5rem;
}

/* ── Site nav ────────────────────────────────────────── */

.site-nav {
  border-top: 3px solid var(--color-primary);
}

/* ── Nav links with underline slide animation ────────── */

.nav-link {
  position: relative;
  padding-bottom: 2px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 1px;
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* ── Buttons ─────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.btn-primary:hover {
  opacity: 0.9;
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background-color: #fff;
  color: #374151;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius);
  border: 2px solid #d1d5db;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  line-height: 1.25;
  white-space: nowrap;
}

.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Form inputs ─────────────────────────────────────── */

.input-field {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.5;
  color: #111827;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: auto;
}

.input-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.input-field:disabled,
.input-field[disabled] {
  background-color: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

.label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.field-error {
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 0.25rem;
}

/* ── Card ────────────────────────────────────────────── */

.card {
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
}

/* ── Car card hover lift ─────────────────────────────── */

.car-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.car-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.14), 0 8px 16px -4px rgb(0 0 0 / 0.06);
}

/* ── Section headings with left accent bar ───────────── */

.section-heading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

.section-heading::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.4rem;
  background-color: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Site footer top accent ──────────────────────────── */

.site-footer {
  border-top: 4px solid var(--color-primary);
}

/* ── Prose (dealer-authored Markdown content) ────────── */

.prose {
  max-width: 65ch;
  color: #374151;
  line-height: 1.75;
}

.prose h1, .prose h2, .prose h3 {
  font-weight: 700;
  color: #111827;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose h1 { font-size: 1.875rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }

.prose p { margin-top: 0; margin-bottom: 1em; }

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
}

.prose ul, .prose ol {
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }

.prose li { margin-bottom: 0.25em; }

.prose blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: 1em;
  color: #6b7280;
  font-style: italic;
  margin: 1.5em 0;
}

.prose strong { font-weight: 700; color: #111827; }
.prose em { font-style: italic; }

.prose code {
  background: #f3f4f6;
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: ui-monospace, monospace;
}

/* ── Utilities ───────────────────────────────────────── */

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

/* Smooth image transitions */
img {
  transition: opacity 0.2s ease;
}

/* ── Hero decorative rings ───────────────────────────── */

.hero-ring {
  position: absolute;
  border-radius: 9999px;
  background: var(--color-primary);
  pointer-events: none;
}

/* ── Active nav current page indicator ──────────────── */

.nav-link.is-current::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════
   Dark mode — named CSS component classes only.
   Tailwind utility classes use dark: variants in templates.
   ═══════════════════════════════════════════════════════ */

html.dark .section-heading { color: #f9fafb; }
html.dark .card            { background: #1f2937; border-color: #374151; }

html.dark .input-field              { background-color: #374151; border-color: #4b5563; color: #f9fafb; }
html.dark .input-field::placeholder { color: #6b7280; }
html.dark .input-field:disabled     { background-color: #1f2937; color: #6b7280; }

html.dark .label { color: #d1d5db; }

html.dark .btn-secondary       { background-color: #374151; color: #e5e7eb; border-color: #4b5563; }
html.dark .btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

html.dark .prose                              { color: #d1d5db; }
html.dark .prose h1, .dark .prose h2,
html.dark .prose h3                           { color: #f9fafb; }
html.dark .prose strong                       { color: #f9fafb; }
html.dark .prose code                         { background: #374151; color: #f3f4f6; }
html.dark .prose blockquote                   { color: #9ca3af; }