/* DIGITALBJR – custom styles on top of Tailwind CDN */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }

/* Better mobile tap responsiveness — avoids 300ms delay on iOS/Android */
button, a, select, input, .sym-chip, .crop-card, #dropZone { touch-action: manipulation; }

/* Make Leaflet map render correctly inside dark theme */
.leaflet-container { background: #e5e7eb; border-radius: 1rem; z-index: 0; }
.dark .leaflet-container { background: #1c1917; }

/* Section anchor offset for sticky header */
section { scroll-margin-top: 72px; }

/* Smooth fade for results */
#result, #symResult, #cropDetail, #weatherBox, #weatherAdvice {
  animation: fadeIn .4s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform: none;} }

/* Symptom chip selected state */
.sym-chip { transition: all .15s; user-select: none; }
.sym-chip.selected {
  background: #16a34a !important;
  color: #fff !important;
  border-color: #16a34a !important;
}

/* Drag-over highlight */
#dropZone.dragover { background: #bbf7d0; border-color: #15803d; }

/* Crop card hover */
.crop-card { transition: transform .15s; cursor: pointer; }
.crop-card:hover { transform: translateY(-3px); }

/* Severity pills */
.pill { display:inline-block; padding:2px 10px; border-radius:9999px; font-size:.75rem; font-weight:600; }
.pill-high { background:#fee2e2; color:#b91c1c; }
.pill-med  { background:#fef3c7; color:#b45309; }
.pill-low  { background:#dcfce7; color:#15803d; }

/* FAQ */
details summary { cursor: pointer; padding: 12px 16px; border-radius: 8px; background: #f5f5f4; font-weight: 600; }
.dark details summary { background: #292524; }
details[open] summary { border-bottom-left-radius:0; border-bottom-right-radius:0; }
details > div { padding: 12px 16px; background: #fafaf9; border-radius: 0 0 8px 8px; }
.dark details > div { background: #1c1917; }

/* Print-friendly */
@media print { header, footer, #weather, #library, #symptoms { display:none; } }