/*
 * Marée Brand Enhancements
 * Brand webfonts and specific overrides not available in Tailwind utilities
 * Colors are defined in app/assets/tailwind/application.css @theme block
 */

/* ── Brand webfonts ──────────────────────────────────────────────────────────
   Self-hosted from app/assets/fonts (Propshaft rewrites these bare-relative
   url()s to digested /assets/ paths). Bicyclette ships as a single bold face,
   so its @font-face spans the full weight range to prevent faux-bolding. */
@font-face {
  font-family: "Bicyclette";
  src: url("/assets/bicyclette-bold-0bdad41c.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/poppins-latin-400-f3f0f5ee.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/poppins-latin-600-1f3eca1a.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/poppins-latin-700-54e23180.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/poppins-latin-800-f1744e2b.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/assets/open-sans-latin-bfc77246.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* Fix for Tailwind v4 base styles collapsing html height */
html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  /* min-height (not height) so the body box grows with content — a fixed
     height caps position:sticky's containing block at one viewport, which
     silently unpins the sticky site nav after the first screen of scroll */
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure hero section is visible */
#hero {
  min-height: 600px;
}

@media (min-width: 768px) {
  #hero {
    min-height: 700px;
  }
}

@media (min-width: 1024px) {
  #hero {
    min-height: 800px;
  }
}

/* Let the logo's brand menu own the long-press gesture on touch devices
   (suppresses the iOS callout / image-save sheet and text selection). */
.logo-menu-trigger {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Flash notification animations */
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slide-down 0.3s ease-out;
}