/* ============================================================================
   Vicent Manila — Utility compatibility layer

   Implements exactly the Tailwind utilities still referenced by layout.js,
   pages.js and the page shells, so the runtime Tailwind CDN can be removed.

   The CDN build (cdn.tailwindcss.com) is explicitly not intended for
   production: it ships the full engine and compiles classes in the browser on
   every page load, blocking render. Replacing it with this ~3KB file removes a
   render-blocking third-party request and the runtime compile step.

   Scope note: this file is deliberately NOT a general utility framework. Add a
   rule here only when markup genuinely needs it; prefer semantic classes in
   design-system.css.
   ========================================================================== */

/* ============================================================================
   Base reset

   Tailwind's Preflight was removed along with the CDN; this restores the
   normalisation the markup relied on. Kept minimal and explicit.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; }

[hidden] { display: none !important; }

/* ---- Layout ------------------------------------------------------------ */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
/* !important because component rules (e.g. .vm-btn { display:inline-flex })
   live in design-system.css, which loads after this file and would otherwise
   win at equal specificity and un-hide desktop-only chrome on mobile. */
.hidden        { display: none !important; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-center{ justify-content: center; }
.justify-between { justify-content: space-between; }
.shrink-0      { flex-shrink: 0; }
.min-w-0       { min-width: 0; }
.relative      { position: relative; }
.fixed         { position: fixed; }
.top-0         { top: 0; }
.inset-x-0     { left: 0; right: 0; }
.z-10          { z-index: 10; }
.mx-auto       { margin-left: auto; margin-right: auto; }
.ml-4          { margin-left: 1rem; }
.mb-1          { margin-bottom: 0.25rem; }
.mb-3          { margin-bottom: 0.75rem; }
.max-w-8xl     { max-width: 1280px; }
.max-w-sm      { max-width: 24rem; }
.w-full        { width: 100%; }
.text-center   { text-align: center; }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object-cover  { object-fit: cover; }

.gap-0\.5 { gap: 0.125rem; }
.gap-2    { gap: 0.5rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-6    { gap: 1.5rem; }
.gap-8    { gap: 2rem; }

.px-3 { padding-left: 0.75rem;  padding-right: 0.75rem; }
.px-4 { padding-left: 1rem;     padding-right: 1rem; }
.px-6 { padding-left: 1.5rem;   padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem;    padding-bottom: 0.5rem; }
.py-8 { padding-top: 2rem;      padding-bottom: 2rem; }
.pb-8 { padding-bottom: 2rem; }

.w-4  { width: 1rem; }     .h-4  { height: 1rem; }
.w-5  { width: 1.25rem; }  .h-5  { height: 1.25rem; }
.w-9  { width: 2.25rem; }  .h-9  { height: 2.25rem; }
.w-11 { width: 2.75rem; }  .h-11 { height: 2.75rem; }

/* ---- Type -------------------------------------------------------------- */
.text-xs  { font-size: 0.75rem;  line-height: 1rem; }
.text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.leading-relaxed { line-height: 1.625; }
.uppercase { text-transform: uppercase; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---- Colour (mapped to design tokens, not raw hex) --------------------- */
.text-navy  { color: var(--vm-ink); }
.text-white { color: var(--vm-on-navy); }
.text-muted { color: var(--vm-ink-muted); }
.text-gold  { color: var(--vm-accent-text); }
.text-gold\/90    { color: var(--vm-accent-text); }
.text-white\/70   { color: rgba(243, 239, 231, 0.72); }
.text-white\/45   { color: rgba(243, 239, 231, 0.62); }
.text-white\/40   { color: rgba(243, 239, 231, 0.60); }
.text-white\/25   { color: rgba(243, 239, 231, 0.55); }
.bg-navy    { background-color: var(--vm-navy); }

.border   { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-black\/\[0\.08\] { border-color: var(--vm-border); }
.border-white\/10        { border-color: rgba(243, 239, 231, 0.14); }
.rounded-lg { border-radius: var(--vm-radius-lg); }

/* ---- Motion ------------------------------------------------------------ */
.transition-colors { transition-property: color, background-color, border-color; transition-duration: 160ms; transition-timing-function: ease-out; }
.transition-all    { transition-property: all; transition-duration: 160ms; transition-timing-function: ease-out; }
.duration-300      { transition-duration: 300ms; }

/* ---- Hover ------------------------------------------------------------- */
.hover\:bg-white:hover  { background-color: var(--vm-surface); }
.hover\:text-navy:hover { color: var(--vm-ink); }

/* ---- Dark variants ----------------------------------------------------- */

/* ---- Responsive variants ----------------------------------------------- */
@media (min-width: 640px) {
  .sm\:px-6      { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:text-left { text-align: left; }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:flex        { display: flex; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:hidden      { display: none; }
  .lg\:flex-row    { flex-direction: row; }
  .lg\:items-start { align-items: flex-start; }
}

/* `scroll-smooth` on <html>, honouring reduced motion. */
.scroll-smooth { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .scroll-smooth { scroll-behavior: auto; }
}