/* ====================================================================
   The Athlete's Forge - Hawai'i  |  Custom styles (HTML version)
   Tailwind comes from the Play CDN; only put rules here that Tailwind
   utilities cannot express, or that need to be global (e.g. fonts,
   global selection colors, the hero pattern background).
   ==================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #0F172A;
  color: #ffffff;
}

::selection {
  background-color: #0ea5e9;
  color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

.font-montserrat { font-family: 'Montserrat', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }

/* Glass-panel effect used in the Referring Physicians cards */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Hero blueprint grid - drawn via inline style on the section, but kept
   as a fallback class in case any page wants to reuse it. */
.blueprint-grid {
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 40px 40px;
}

.blueprint-grid-light {
  background-image:
    linear-gradient(#e2e8f0 1px, transparent 1px),
    linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Mobile menu slide-in animation */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 300ms ease-in-out;
}
.mobile-menu.is-open {
  transform: translateX(0);
}

/* Modal fade-in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-fade-in {
  animation: fadeIn 300ms ease-out;
}

/* Voice-assistant volume pulse ring */
.va-pulse-ring {
  transition: transform 75ms ease-out;
}

/* Hide scrollbar in chat message list (still scrollable) */
.chat-scroll {
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}
.chat-scroll::-webkit-scrollbar { width: 6px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb { background-color: #334155; border-radius: 3px; }

/* When a section block is collapsed via JS, we use these helpers for
   the smooth height + opacity transition (Tailwind alone can't animate
   max-height with arbitrary values across breakpoints). */
.collapsible {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 500ms ease-in-out, opacity 500ms ease-in-out;
}
.collapsible.is-open {
  max-height: 5000px;
  opacity: 1;
}

/* Bounce arrow used by section-next anchors (Tailwind has animate-bounce
   but we want it always-on without forcing a utility cascade). */
@keyframes softBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.soft-bounce {
  animation: softBounce 2s ease-in-out infinite;
}

/* Force chat-bubble line-wrap to look natural */
.chat-bubble p {
  margin-bottom: 0.5rem;
}
.chat-bubble p:last-child {
  margin-bottom: 0;
}
.chat-bubble a {
  text-decoration: underline;
  color: #7dd3fc;
  word-break: break-all;
}
.chat-bubble a:hover {
  color: #f0f9ff;
}