/* Every Day Optimal CBD — Global stylesheet (minimal, Tailwind handles most styles) */

/* ── Custom scrollbar ── */
:root {
  --edo-green: #2d6a4f;
  --edo-green-dark: #1b4332;
}

/* ── Focus ring override for brand color ── */
*:focus-visible {
  outline: 2px solid var(--edo-green);
  outline-offset: 2px;
}

/* ── Heading font override ────────────────────────────────────────────
   Every heading in the codebase uses Tailwind's `font-serif` utility.
   Rather than rewrite 75 templates, we override that class globally so
   it resolves to Manrope (a clean, geometric sans) instead of the
   browser default serif stack. Keeps the visual hierarchy intact while
   swapping in a crisper, more legible display face. */
.font-serif,
h1.font-serif, h2.font-serif, h3.font-serif, h4.font-serif {
  font-family: 'Fraunces', 'Georgia', ui-serif, serif !important;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}

/* ── Prose styling (resource posts) ── */
.prose h2 {
  font-family: 'Fraunces', 'Georgia', ui-serif, serif;
  font-optical-sizing: auto;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.prose h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.prose p {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.prose ul, .prose ol {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.7;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose strong {
  color: #1f2937;
  font-weight: 600;
}

.prose a {
  color: var(--edo-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--edo-green-dark);
}

/* ── Details/summary native browser arrow removal ── */
details summary::-webkit-details-marker {
  display: none;
}
details summary::marker {
  display: none;
}

/* ── Cart count badge transition ── */
#cart-count {
  transition: transform 0.2s ease;
}

/* ── Quantity input spin button removal (optional) ── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

/* ── Line clamp for product cards ── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Smooth scroll ── */
html {
  scroll-behavior: smooth;
}

/* ── Print ── */
@media print {
  nav, header, footer, .no-print { display: none !important; }
  body { background: white; }
}