/* ============================================================
   tailwind-utilities.css
   Hand-written static replacement for the Tailwind Play CDN.
   Covers ONLY the utility classes used across Zeelie's pages,
   plus the brand colours from the old tailwind.config.
   No build step, no runtime compilation, no third-party CDN.
   Breakpoints: md = 768px, lg = 1024px (Tailwind defaults).
   ============================================================ */

/* ---- Brand colour tokens (mirror old tailwind.config) ---- */
:root {
  --tw-leaf:        #3A8A3F;
  --tw-leaf-bright: #52B756;
  --tw-leaf-light:  #EEF6EE;
  --tw-leaf-mid:    #C4E0C5;
  --tw-forest:      #1B3A1F;
  --tw-amber:       #F5A623;
  --tw-amber-light: #FEF3DC;
  --tw-bg-base:     #F9FAF7;
  --tw-muted:       #6B7280;
}

/* ---- Display ---- */
.block   { display: block; }
.flex    { display: flex; }
.grid    { display: grid; }
.hidden  { display: none !important; }
.list-none { list-style: none; margin: 0; padding: 0; }

/* ---- Position ---- */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

/* ---- Inset ---- */
.top-0    { top: 0; }
.left-0   { left: 0; }
.top-full { top: 100%; }

/* ---- Z-index ---- */
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* ---- Sizing ---- */
.w-full  { width: 100%; }
.h-16    { height: 4rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-7xl { max-width: 80rem; }

/* ---- Margin ---- */
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-6    { margin-top: 1.5rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }

/* ---- Padding ---- */
.p-2     { padding: 0.5rem; }
.px-6    { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2    { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-4    { padding-top: 1rem; padding-bottom: 1rem; }
.py-16   { padding-top: 4rem; padding-bottom: 4rem; }
.pt-3    { padding-top: 0.75rem; }
.pb-1    { padding-bottom: 0.25rem; }

/* ---- Flexbox / Grid ---- */
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.grid-cols-1     { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* ---- Gap ---- */
.gap-0\.5    { gap: 0.125rem; }
.gap-1       { gap: 0.25rem; }
.gap-4       { gap: 1rem; }
.gap-6       { gap: 1.5rem; }
.gap-8       { gap: 2rem; }
.gap-10      { gap: 2.5rem; }
.gap-12      { gap: 3rem; }
.gap-\[5px\] { gap: 5px; }

/* ---- Text ---- */
.text-center { text-align: center; }
.text-sm     { font-size: 0.875rem; line-height: 1.25rem; }

/* ---- Borders ---- */
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-leaf-light    { border-color: var(--tw-leaf-light); }
.border-leaf-light\/60 { border-color: rgba(238, 246, 238, 0.6); }
.rounded-md { border-radius: 0.375rem; }

/* ---- Background ---- */
.bg-bg-base { background-color: var(--tw-bg-base); }

/* ---- Shadow ---- */
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

/* ---- Transition ---- */
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ---- Hover ---- */
.hover\:bg-leaf-light:hover { background-color: var(--tw-leaf-light); }

/* ============================================================
   Responsive: md (>=768px)
   ============================================================ */
@media (min-width: 768px) {
  .md\:flex   { display: flex !important; }
  .md\:hidden { display: none !important; }
  .md\:inline-flex { display: inline-flex !important; }
}

/* ============================================================
   Responsive: lg (>=1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:gap-6       { gap: 1.5rem; }
  .lg\:mt-0        { margin-top: 0; }
  .lg\:pr-8        { padding-right: 2rem; }
  .lg\:px-10       { padding-left: 2.5rem; padding-right: 2.5rem; }
  .lg\:py-24       { padding-top: 6rem; padding-bottom: 6rem; }
}