/* Shared fixes loaded by every page: responsive hero + floating WhatsApp button. */

:root {
  --wa-green: #25D366;
  --wa-green-deep: #128C7E;
  --color-sand: #EADFC8;
  --hero-media-radius: 28px;
  --fab-offset: 1.5rem;
  --duration-fast: 150ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Hero ----------
   Desktop (>=1024px): unchanged. Text on the left, image fills the right 58%.
   Below 1024px: the absolutely-positioned image is pulled into the flow and
   stacked under the text, so the copy is readable immediately and the photo
   is shown whole instead of hidden or washed out behind the text. */
@media (max-width: 1023px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    background-color: var(--color-sand);
  }
  .hero .hero-bg {
    position: relative;
    inset: auto;
    order: 2;
    padding: 0 1.5rem 3rem;
  }
  .hero .hero-media {
    display: block;
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--hero-media-radius);
    overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(154, 122, 24, 0.45);
  }
  .hero .hero-media img { animation: none !important; }
  .hero .hero-scrim,
  .hero .hero-scroll-cue { display: none; }
  .hero .hero-content {
    order: 1;
    padding-top: 7.5rem;
    padding-bottom: 2.25rem;
  }
}
@media (max-width: 639px) {
  .hero .hero-media { aspect-ratio: 5 / 4; }
  .hero .hero-bg { padding: 0 1rem 2.5rem; }
}

/* ---------- Floating WhatsApp button ---------- */
.wa-fab {
  position: fixed;
  right: calc(var(--fab-offset) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--fab-offset) + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 3.5rem;
  min-width: 3.5rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  background: var(--wa-green);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 18px 40px -14px rgba(18, 140, 126, 0.65), 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast) ease;
}
.wa-fab svg { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.wa-fab-label { padding-right: 0.35rem; white-space: nowrap; }
.wa-fab:hover { background: var(--wa-green-deep); transform: translateY(-2px); }
.wa-fab:active { transform: translateY(0) scale(0.97); }
.wa-fab:focus-visible { outline: 3px solid #C5A059; outline-offset: 3px; }

@media (max-width: 639px) {
  :root { --fab-offset: 1rem; }
  .wa-fab { padding: 0; justify-content: center; width: 3.5rem; }
  .wa-fab-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover { transform: none; }
}

/* Home page: the Anaya voice-assistant button shares the bottom-right corner,
   so it sits directly above the WhatsApp button. */
#anayaFab.stack-above-wa {
  right: calc(var(--fab-offset) - 0.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(var(--fab-offset) + 4.5rem + env(safe-area-inset-bottom, 0px));
}

/* "Coming soon" blog cards (posts not yet published). */
.card-soon { cursor: default; }

/* Per-page override when the desktop crop point does not suit the stacked mobile frame. */
@media (max-width: 1023px) {
  .hero .hero-media img.hero-pos-center { object-position: 50% 50% !important; }
}

/* Small laptops / tablets in landscape (1024-1279px): keep the hero copy clear of the photo. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero .hero-media { width: 52%; }
  .hero .hero-content > div { max-width: 440px; }
  .hero .hero-content h1 { font-size: 58px; }
}