/* Shared custom styles for the AXIOO Tailwind project. */
:root {
  --font-display: "Cormorant Garamond", serif;
  --font-sans: "Montserrat", sans-serif;
  --color-ivory: #ffffff;
  --color-sand: #dfd5c7;
  --color-ink: #171717;
  --color-muted: #817a72;
}

html {
  background: var(--color-ivory);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

.font-display {
  font-family: var(--font-display);
}

/* Fluid & Responsive Typography Helpers */
.instagram-handle-heading {
  font-size: clamp(1.35rem, 4vw, 2.25rem) !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-7xl { font-size: 4.5rem; line-height: 1; }

@media (min-width: 640px) {
  .sm\:text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
  .sm\:text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
  .sm\:text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
  .sm\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
  .sm\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
  .sm\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  .sm\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
  .sm\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
  .sm\:text-7xl { font-size: 4.5rem !important; line-height: 1 !important; }
  .sm\:text-8xl { font-size: 6rem !important; line-height: 1 !important; }
}

@media (min-width: 1024px) {
  .lg\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  .lg\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
  .lg\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
  .lg\:text-7xl { font-size: 4.5rem !important; line-height: 1 !important; }
  .lg\:text-8xl { font-size: 6rem !important; line-height: 1 !important; }
}

.image-zoom img {
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.image-zoom:hover img {
  transform: scale(1.045);
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Keep the first hero frame visible even before JavaScript initializes. */
#home,
#heroSlides,
.hero-slide {
  width: 100%;
}

#home {
  min-height: 560px;
}

@media (min-width: 640px) {
  #home {
    min-height: 680px;
  }
}

.hero-slide > img {
  display: block;
  min-height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Multi-page components */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.08) 52%, rgba(0,0,0,.34));
  pointer-events: none;
}

.masonry { columns: 1; column-gap: 1rem; }
.masonry > * { break-inside: avoid; margin-bottom: 1rem; }
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; column-gap: 1.25rem; } .masonry > * { margin-bottom: 1.25rem; } }

.filter-button.is-active { background: #171717; color: #fff; border-color: #171717; }
[data-gallery-item].is-hidden, [data-journal-card].is-hidden, [data-team-card].is-hidden { display: none; }

.field-error { border-color: #b91c1c !important; }
.field-message { min-height: 1.25rem; }

.modal-open { overflow: hidden; }

.prose-story p { margin-top: 1.5rem; line-height: 2; color: rgba(23,23,23,.68); }
.prose-story h2 { margin-top: 4rem; font-family: var(--font-display); font-size: clamp(2.5rem,5vw,4.5rem); line-height: .95; }

@media (max-width: 1023px) {
  .desktop-only-hover { pointer-events: none; }
}

.contact-section-spacing {
  padding-top: 140px !important;
  padding-bottom: 120px !important;
}

@media (min-width: 640px) {
  .contact-section-spacing {
    padding-top: 160px !important;
    padding-bottom: 140px !important;
  }
}

@media (min-width: 1024px) {
  .contact-section-spacing {
    padding-top: 180px !important;
    padding-bottom: 160px !important;
  }
}

/* Bulletproof Responsive Google Maps Embed */
.responsive-map-container {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 350px !important;
  height: 100% !important;
  overflow: hidden !important;
}

.responsive-map-container iframe,
.responsive-map-container embed,
.responsive-map-container object {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 350px !important;
  border: 0 !important;
  filter: grayscale(85%);
  transition: filter 0.5s ease;
}

.responsive-map-container iframe:hover {
  filter: grayscale(0%);
}

@media (min-width: 640px) {
  .responsive-map-container {
    min-height: 420px !important;
  }
  .responsive-map-container iframe,
  .responsive-map-container embed,
  .responsive-map-container object {
    min-height: 420px !important;
  }
}

.wa-button-position {
  position: fixed !important;
  bottom: 50px !important;
  right: 24px !important;
  z-index: 40 !important;
}

/* Authentic Speech Bubble Floating WA Tooltip (Strictly Left of Button) */
.wa-tooltip-container .wa-tooltip {
  position: absolute !important;
  right: 100% !important;
  margin-right: 14px !important;
  top: 50% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-50%) scale(0.92) translateX(10px) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.wa-tooltip-container:hover .wa-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) scale(1) translateX(0) !important;
}