/* ============================================================
   tw-patch.css — Tailwind utilities used by the demo pages
   Values match Tailwind v3 output and the site's HSL theme variables.
   ============================================================ */

/* Position / display */
.bottom-4 {
  bottom: 1rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.inline-block {
  display: inline-block;
}

/* Sizing */
.h-16 {
  height: 4rem;
}
.max-w-xs {
  max-width: 20rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-2\/3 {
  width: 66.666667%;
}

/* Grid / gap / spacing between children */
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gap-x-8 {
  -moz-column-gap: 2rem;
  column-gap: 2rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

/* Padding (order matters: p < py < pb/pt, like Tailwind) */
.p-5 {
  padding: 1.25rem;
}
.p-20 {
  padding: 5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-32 {
  padding-top: 8rem;
}

/* Margin */
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}

/* Typography */
.italic {
  font-style: italic;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Border radius */
.rounded-none {
  border-radius: 0;
}

/* Colors with opacity modifiers */
.border-primary-foreground\/20 {
  border-color: hsl(var(--primary-foreground) / 0.2);
}
.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/70 {
  background-color: hsl(var(--primary) / 0.7);
}
.bg-primary\/98 {
  background-color: hsl(var(--primary) / 0.98);
}
.text-muted-foreground\/30 {
  color: hsl(var(--muted-foreground) / 0.3);
}
.text-muted-foreground\/40 {
  color: hsl(var(--muted-foreground) / 0.4);
}
.text-muted-foreground\/50 {
  color: hsl(var(--muted-foreground) / 0.5);
}
.text-primary-foreground\/60 {
  color: hsl(var(--primary-foreground) / 0.6);
}
.group:hover .group-hover\:bg-primary\/5 {
  background-color: hsl(var(--primary) / 0.05);
}

/* Effects */
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
    var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
    var(--tw-backdrop-sepia);
}

/* Responsive: sm (640px) */
@media (min-width: 640px) {
  .sm\:flex-none {
    flex: none;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:min-w-\[140px\] {
    min-width: 140px;
  }
  .sm\:min-w-\[160px\] {
    min-width: 160px;
  }
}

/* Responsive: md (768px) */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:items-start {
    align-items: flex-start;
  }
  .md\:items-end {
    align-items: flex-end;
  }
  .md\:justify-between {
    justify-content: space-between;
  }
  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}

/* Responsive: lg (1024px) */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   Hero overlay fix (backported from the WordPress theme).
   The compiled build defines .bg-gradient-hero-overlay   
   ============================================================ */
.bg-gradient-hero-overlay {
  background:
    linear-gradient(
      100deg,
      hsl(var(--navy) / 0.78) 0%,
      hsl(var(--navy) / 0.48) 38%,
      hsl(var(--navy) / 0.12) 68%,
      hsl(var(--navy) / 0.05) 100%
    ),
    linear-gradient(
      to bottom,
      hsl(var(--navy) / 0.55) 0%,
      hsl(var(--navy) / 0.15) 30%,
      hsl(var(--navy) / 0.15) 65%,
      hsl(var(--navy) / 0.6) 100%
    );
}

/* Soft navy text shadow on hero copy (second line of defense) */
#hero-slider h1,
#hero-slider p {
  text-shadow:
    0 2px 24px hsl(var(--navy) / 0.55),
    0 1px 3px hsl(var(--navy) / 0.45);
}

/* Utilities used by the inner pages (about/services/why-panama/contact/
   privacy) that are missing from the compiled build */
.mt-20 {
  margin-top: 5rem;
}
.rounded {
  border-radius: 0.25rem;
}
.text-muted-foreground\/60 {
  color: hsl(var(--muted-foreground) / 0.6);
}

.w-20 {
  width: 5rem;
}
.h-20 {
  height: 5rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-x-10 {
  column-gap: 2.5rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-6 {
  row-gap: 1.5rem;
}
.max-w-xl {
  max-width: 36rem;
}
.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.h-44 {
  height: 11rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.-mt-3 {
  margin-top: -0.75rem;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-gold\/25 {
  color: hsl(var(--gold) / 0.25);
}
@media (min-width: 768px) {
  .md\:grid-cols-\[220px_1fr\] {
    grid-template-columns: 220px 1fr;
  }
  .md\:grid-cols-\[240px_1fr\] {
    grid-template-columns: 240px 1fr;
  }
  .md\:h-full {
    height: 100%;
  }
  .md\:h-96 {
    height: 24rem;
  }
  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .md\:left-12 {
    left: 3rem;
  }
}
.justify-end {
  justify-content: flex-end;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.from-primary\/70 {
  --tw-gradient-from: hsl(var(--primary) / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.mt-16 {
  margin-top: 4rem;
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.leading-snug {
  line-height: 1.375;
}
.pt-10 {
  padding-top: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.gap-y-10 {
  row-gap: 2.5rem;
}
.via-primary\/10 {
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
    var(--tw-gradient-from),
    hsl(var(--primary) / 0.1) var(--tw-gradient-via-position),
    var(--tw-gradient-to);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}