@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Hide Google Maps "For development purposes only" watermark */
.gm-style-cc,
.gm-style-cc div,
.gm-style-cc a,
a[href^="https://developers.google.com/maps"],
.gm-bundled-control .gm-style-cc,
div[title*="For development purposes only"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
}

/* Hide Google Maps default POI marker images only (scope to .gm-style — unscoped img rules break non-map UI) */
.gm-style img[src*="poi"],
.gm-style img[src*="place"],
.gm-style img[src*="marker"][src*="default"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
}

/* Leaflet map styles */
.leaflet-container {
  height: 100%;
  width: 100%;
  z-index: 0;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
}

.custom-marker {
  background: transparent !important;
  border: none !important;
}

:root {
  /* Greenhouse Stone (matches the marketing site / main app). */
  --foreground-rgb: 20, 26, 20; /* evergreen ink */
  --background-start-rgb: 236, 238, 231; /* warm stone */
  --background-end-rgb: 228, 231, 220;
}

* {
  @apply antialiased;
}

body {
  color: rgb(var(--foreground-rgb));
  font-family: 'Satoshi', var(--font-bricolage), ui-sans-serif, system-ui, sans-serif;
  /* Greenhouse Stone: sage / mist / sand washes over a warm stone base. */
  background-color: rgb(var(--background-start-rgb));
  background-image:
    radial-gradient(55rem 40rem at 12% -8%, rgba(214, 231, 206, 0.85), transparent 60%),
    radial-gradient(48rem 38rem at 92% 4%, rgba(204, 226, 221, 0.70), transparent 58%),
    radial-gradient(52rem 42rem at 50% 108%, rgba(236, 220, 194, 0.62), transparent 60%),
    linear-gradient(180deg, rgba(var(--background-start-rgb),1) 0%, rgba(var(--background-end-rgb),1) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Headlines in the display grotesque (matches the other site). */
h1,
h2,
h3 {
  font-family: var(--font-bricolage), ui-sans-serif, system-ui, sans-serif;
}

/* Ensure images display correctly */
img {
  display: block !important;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Prevent images from showing as broken icons */
img[src=""],
img:not([src]) {
  display: none !important;
}

/* Ensure image containers don't collapse */
.image-container {
  min-height: 100px;
}

/* ---- Custom cursor (dot + trailing ring), same as the marketing site ---- */
body.cursor-field-active,
body.cursor-field-active a,
body.cursor-field-active button,
body.cursor-field-active [role="button"] {
  cursor: none;
}
.cursor-dot {
  background: #0e7a47;
  box-shadow: 0 0 10px rgba(31, 168, 102, 0.6);
  transition: opacity 0.25s ease;
  will-change: transform;
}
.cursor-ring {
  border-color: rgba(31, 168, 102, 0.55);
  transition:
    opacity 0.25s ease,
    border-color 0.2s ease;
  will-change: transform;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  /* Frosted glass — matches the marketing site exactly: a faint top-to-bottom
     sheen, a crisp rim, an inner top highlight, and a soft layered shadow. */
  .glass,
  .surface {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(247, 249, 243, 0.62) 100%
    );
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.65),
      0 28px 60px -28px rgba(18, 38, 28, 0.28),
      0 8px 18px -12px rgba(18, 38, 28, 0.14);
  }

  /* Hover lift — same micro-interaction as the site's cards. */
  .lift {
    transition:
      transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
  }
  .lift:hover {
    transform: translateY(-6px);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.7),
      0 44px 80px -28px rgba(18, 38, 28, 0.34),
      0 14px 28px -14px rgba(18, 38, 28, 0.2);
  }

  /* Section eyebrow — the mono pill label used across the site. */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(22, 35, 28, 0.1);
    background: rgba(251, 252, 248, 0.6);
    padding: 0.3rem 0.8rem;
    font-family: var(--font-space), ui-monospace, monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #515a52;
  }
  .eyebrow::before {
    content: "";
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    background: #1fa866;
  }

  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-700 to-field-soil;
  }

  .field-input {
    @apply w-full rounded-xl border border-field-soil/20 bg-white px-4 py-3 text-base font-semibold text-primary-900 shadow-sm outline-none transition focus:border-primary-500 focus:ring-4 focus:ring-primary-200/70;
  }

  /* Primary CTA — identical to the site: dark evergreen gradient pill with an
     inner highlight + soft shadow, lifting to emerald on hover. */
  .btn-primary {
    @apply touch-manipulation inline-flex min-h-[48px] items-center justify-center gap-2 rounded-xl px-5 py-3 font-semibold text-white disabled:cursor-not-allowed;
    background-image: linear-gradient(180deg, #1f3328 0%, #16231c 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 12px 26px -12px rgba(22, 35, 28, 0.55);
    transition:
      background-image 0.2s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }
  .btn-primary:hover:not(:disabled) {
    background-image: linear-gradient(180deg, #15915a 0%, #0e7a47 100%);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 16px 30px -12px rgba(14, 122, 71, 0.5);
  }
  .btn-primary:active:not(:disabled) {
    transform: translateY(0);
  }
  .btn-primary:disabled {
    background-image: none;
    @apply bg-slate-400;
    box-shadow: none;
  }

  .btn-secondary {
    @apply touch-manipulation inline-flex min-h-[44px] items-center justify-center gap-2 rounded-xl border border-field-soil/20 bg-white px-4 py-2.5 font-semibold text-primary-900 shadow-sm transition hover:border-primary-300 hover:bg-primary-50;
  }

  /* Standardize page containers so content sits consistently on the new background */
  .page-container {
    @apply min-h-screen px-4 py-8 sm:px-6 lg:px-12;
    background: transparent;
  }

  /* Slightly stronger frosted panel (a touch more opaque for dense content). */
  .page-panel {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(247, 249, 243, 0.74) 100%
    );
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.65),
      0 28px 60px -28px rgba(18, 38, 28, 0.28),
      0 8px 18px -12px rgba(18, 38, 28, 0.14);
  }
}