/* Minimal site overrides on top of Tailwind. */
:root { color-scheme: light; }
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
img, video { max-width: 100%; height: auto; }

.blk:first-child { margin-top: 0; }
.blk:last-child  { margin-bottom: 0; }

/* --- Block animations.
   Rendered with `.budge-anim` + a variant class. JS flips `.is-visible` via
   IntersectionObserver. Users who prefer reduced motion skip straight to the
   final state. */
.budge-anim {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.budge-anim.is-visible { opacity: 1; transform: none !important; }

.budge-anim--fade        { transform: none; }
.budge-anim--slide-up    { transform: translateY(32px); }
.budge-anim--slide-down  { transform: translateY(-32px); }
.budge-anim--slide-left  { transform: translateX(-32px); }
.budge-anim--slide-right { transform: translateX(32px); }
.budge-anim--zoom-in     { transform: scale(0.92); }
.budge-anim--zoom-out    { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .budge-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* --- Interactive polish */
a, button { transition: color 0.15s, background-color 0.15s, border-color 0.15s, transform 0.15s; }
.blk a[href]:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.blk .inline-block:active { transform: translateY(1px); }

/* --- Tabs */
.budge-tab-btn { transition: border-color 0.15s, color 0.15s; }
.budge-tab-btn[aria-selected="true"] { font-weight: 600; }

/* --- Forms */
form[data-budge-form] [data-budge-error] { color: #b91c1c; font-size: 0.875rem; }
form[data-budge-form] input:focus,
form[data-budge-form] textarea:focus,
form[data-budge-form] select:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/* --- Mobile nav */
.site-nav-toggle { display: none; }
.site-nav-menu   { display: flex; gap: 1.5rem; }

@media (max-width: 640px) {
  .site-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; border: 1px solid #e5e7eb;
  }
  .site-nav-menu {
    position: absolute; top: 3.5rem; right: 1rem;
    flex-direction: column; gap: 0.25rem; padding: 0.5rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transform: translateY(-6px) scale(0.96);
    transform-origin: top right;
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 40;
  }
  .site-nav-menu.is-open {
    opacity: 1; pointer-events: auto; transform: none;
  }
  .site-nav-menu a {
    padding: 0.5rem 0.75rem; border-radius: 0.375rem;
  }
  .site-nav-menu a:hover { background: #f3f4f6; }
}

/* --- Hero tuning on small screens */
@media (max-width: 480px) {
  .blk section.relative { padding: 3rem 1.25rem !important; }
  .blk section.relative h1 { font-size: 2rem !important; line-height: 1.15; }
}