/* Small additions on top of Tailwind */
html { -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "tnum" 0; }
.tabular { font-variant-numeric: tabular-nums; }

/* Subtle organic leaf texture used on hero / sidebar surfaces.
   Drawn as an overlay (::before) so it layers on top of any background colour or gradient. */
.leaf-texture { isolation: isolate; }
.leaf-texture:not(.absolute):not(.fixed) { position: relative; }
.leaf-texture::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.06) 0 2px, transparent 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20 70c10-30 40-40 60-38-4 22-20 48-58 44' fill='none' stroke='white' stroke-opacity='.07' stroke-width='2'/%3E%3Cpath d='M22 74c14-12 30-22 52-38' fill='none' stroke='white' stroke-opacity='.06' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 60px 60px, 80px 80px, 120px 120px;
}
.paper-texture {
  background-color: #f6f4ec;
  background-image: radial-gradient(rgba(45,86,42,.05) 1px, transparent 1px);
  background-size: 18px 18px;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.fade-in { animation: fadeIn .25s ease-out both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.safe-bottom { padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }

/* Article body typography */
.article-body p { margin: 0 0 1rem; line-height: 1.7; color: #44403c; }
.article-body h4 { font-weight: 700; color: #1f3a20; margin: 1.25rem 0 .5rem; }
.article-body ul { margin: 0 0 1rem 1.1rem; list-style: disc; color: #44403c; }
.article-body li { margin: .3rem 0; line-height: 1.6; }

/* Date input icon tint */
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }


.is-invalid { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }