/* ==========================================================================
   Grace Health Home Care Services — custom styles
   Tailwind utility classes handle most layout; this file covers what
   utilities can't: parallax backgrounds, scroll-reveal, navbar states,
   the testimonial track and a few brand-specific flourishes.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Poppins', sans-serif;
}

/* ---- Navbar states ------------------------------------------------------ */
#site-navbar {
  background: transparent;
}
#site-navbar.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(11, 61, 110, 0.08);
}
#site-navbar:not(.scrolled) .nav-solid-only { color: #ffffff; }

/* On pages without a dark hero behind the navbar (About/Services/Contact),
   navbar-solid keeps the bar readable even before scrolling. */
#site-navbar.navbar-solid {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 16px rgba(11, 61, 110, 0.06);
}

/* Transparent variant: used on the homepage, where the hero image sits
   directly behind the navbar before the user scrolls. */
#site-navbar.variant-transparent:not(.scrolled) .nav-link,
#site-navbar.variant-transparent:not(.scrolled) .brand-name {
  color: #ffffff;
}
#site-navbar.variant-transparent:not(.scrolled) .brand-sub {
  color: rgba(255, 255, 255, 0.75);
}
#site-navbar.variant-transparent:not(.scrolled) #mobile-menu-btn {
  color: #ffffff;
}

/* ---- Scroll reveal -------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Stagger children of a grid/row marked with data-stagger */
[data-stagger] > .fade-up:nth-child(1) { transition-delay: 0ms; }
[data-stagger] > .fade-up:nth-child(2) { transition-delay: 80ms; }
[data-stagger] > .fade-up:nth-child(3) { transition-delay: 160ms; }
[data-stagger] > .fade-up:nth-child(4) { transition-delay: 240ms; }
[data-stagger] > .fade-up:nth-child(5) { transition-delay: 320ms; }
[data-stagger] > .fade-up:nth-child(6) { transition-delay: 400ms; }

/* ---- Parallax sections --------------------------------------------------- */
.parallax-section {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  isolation: isolate;
}
/* iOS Safari ignores background-attachment: fixed; JS fallback (main.js)
   applies transform-based movement via [data-parallax] instead. */
@supports (-webkit-touch-callout: none) {
  .parallax-section { background-attachment: scroll; }
}
.parallax-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ---- Floating hero cards --------------------------------------------------- */
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-card {
  animation: gentle-float 5s ease-in-out infinite;
}
.float-card-delay {
  animation: gentle-float 5s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* ---- Testimonial slider --------------------------------------------------- */
#testimonial-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Process step connector ------------------------------------------------ */
.process-line {
  background: repeating-linear-gradient(90deg, #14579A 0 10px, transparent 10px 20px);
  height: 2px;
}

/* ---- Utility: soft section divider wave (subtle) --------------------------- */
.divider-fade-top {
  background: linear-gradient(180deg, rgba(247,250,252,1) 0%, rgba(247,250,252,0) 100%);
}

/* ---- Form focus states ------------------------------------------------------ */
.form-input {
  width: 100%;
  border: 1.5px solid #E2E8F0;
  border-radius: 0.9rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  color: #243447;
  background: #FFFFFF;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: #14579A;
  box-shadow: 0 0 0 4px rgba(20, 87, 154, 0.1);
}

/* ---- Counter number ---------------------------------------------------------- */
.counter-number {
  font-variant-numeric: tabular-nums;
}

/* ---- Line clamp helper -------------------------------------------------------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }