/* =====================================================================
   Tailwind utility layer -- static replacement for the Play CDN.

   MUST be the LAST stylesheet on the page. Tailwind injects utilities
   after everything else, and the markup depends on that: the navbar's
   CTA is `class="v-cta hidden md:inline-flex"`, and .v-cta in site.css
   sets display:inline-flex. If this file loads first, .v-cta wins on
   source order and `hidden` stops working -- which showed up as the
   mobile CTA rendering at full size with no burger menu.

   The whole site uses 89 utilities. The CDN shipped a runtime JIT to
   every page to generate them, and never registered the veltrix-*
   palette anyway (its config block ran before the CDN script, which
   only reads it afterwards).

   Adding a utility: put it here, keep it in its group.
   ===================================================================== */

/* --- layout / display --- */
.static   { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.block    { display: block; }
.flex     { display: flex; }
.grid     { display: grid; }
.hidden   { display: none; }
.flex-col { flex-direction: column; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.overflow-hidden { overflow: hidden; }

/* --- position offsets --- */
.inset-0   { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.top-0     { top: 0; }
.bottom-0  { bottom: 0; }
.z-50      { z-index: 50; }

/* --- sizing --- */
.w-5    { width: 1.25rem; }
.w-7    { width: 1.75rem; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.h-5    { height: 1.25rem; }
.h-7    { height: 1.75rem; }
.h-12   { height: 3rem; }
.h-24   { height: 6rem; }
.h-1\/2 { height: 50%; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.max-w-5xl { max-width: 64rem; }

/* --- spacing --- */
.p-3  { padding: 0.75rem; }
.p-8  { padding: 2rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }
.px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-8 { padding-left: 2rem;    padding-right: 2rem; }
.py-4 { padding-top: 1rem;     padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem;   padding-bottom: 1.5rem; }
.mt-3 { margin-top: 0.75rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* --- type --- */
.font-body   { font-family: Montserrat, Arial, sans-serif; }
.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }
.text-sm     { font-size: 0.875rem; line-height: 1.25rem; }
.text-\[16px\] { font-size: 16px; }
.text-\[18px\] { font-size: 18px; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* --- colour --- */
.bg-white           { background-color: #fff; }
.bg-veltrix-bg      { background-color: var(--vx-bg); }
.bg-veltrix-bg\/85  { background-color: rgba(5, 14, 11, 0.85); }
.bg-veltrix-card    { background-color: var(--vx-card); }
.bg-veltrix-emerald { background-color: var(--vx-emerald); }
.text-veltrix-bg    { color: var(--vx-bg); }
.text-veltrix-fg1   { color: var(--vx-fg1); }
.text-veltrix-fg2   { color: var(--vx-fg2); }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px;    border-top-style: solid; }
.border-veltrix-card { border-color: var(--vx-card); }

/* --- decoration --- */
.rounded-md   { border-radius: 0.375rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-3xl  { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.shadow-veltrix-emerald\/30 { box-shadow: 0 20px 25px -5px rgba(16,158,117,.3), 0 8px 10px -6px rgba(16,158,117,.3); }
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: 150ms;
}
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* --- hover --- */
.hover\:bg-veltrix-card:hover    { background-color: var(--vx-card); }
.hover\:bg-veltrix-forest:hover  { background-color: var(--vx-forest); }
.hover\:text-veltrix-mint:hover  { color: var(--vx-mint); }

/* --- responsive: sm >= 640, md >= 768, lg >= 1024 --- */
@media (min-width: 640px) {
  .sm\:h-14  { height: 3.5rem; }
  .sm\:p-12  { padding: 3rem; }
  .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .sm\:py-6  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}
@media (min-width: 768px) {
  .md\:flex   { display: flex; }
  .md\:hidden { display: none; }
}
@media (min-width: 1024px) {
  .lg\:flex        { display: flex; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:hidden      { display: none; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:gap-16 { gap: 4rem; }
  .lg\:h-16   { height: 4rem; }
  .lg\:h-28   { height: 7rem; }
  .lg\:p-20   { padding: 5rem; }
  .lg\:px-14  { padding-left: 3.5rem; padding-right: 3.5rem; }
  .lg\:px-16  { padding-left: 4rem;   padding-right: 4rem; }
}

/* --- inline-flex family + negative utilities (navbar) --- */
.inline-flex { display: inline-flex; }
.-mr-2 { margin-right: -0.5rem; }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
@media (min-width: 768px) { .md\:inline-flex { display: inline-flex; } }