/* ==========================================================================
   PND Healthcare — static site styles
   Design system: Manrope (display) + Inter (body), teal #0d9488 / slate ramp
   ========================================================================== */

*{ box-sizing: border-box; }

/* Lenis (script.js) owns smooth scrolling; native smooth-behavior would
   double up with it and make scrolling feel sluggish. Anchor jumps fall
   back to instant native scroll only if Lenis fails to load. */
html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1e293b;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: #0d9488; }
a:hover { color: #0f766e; }

input, textarea, button, select { font-family: inherit; }

img { max-width: 100%; }

/* Anchor targets clear the sticky header */
section[id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   Skip link (a11y)
   -------------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 9000;
  background: #0f172a;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; color: #fff; outline: 3px solid #5eead4; }

/* --------------------------------------------------------------------------
   Nav link + button hover states
   -------------------------------------------------------------------------- */
.pnd-nav a:not(:last-child):hover { color: #0d9488; }
.pnd-mnav a:hover { color: #0d9488; }

.btn-dark { transition: background .2s ease, transform .2s ease; }
.btn-dark:hover { background: #0d9488; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Card hover lift (services)
   -------------------------------------------------------------------------- */
.card-svc { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-svc:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, .1);
  border-color: #5eead4;
}

/* --------------------------------------------------------------------------
   Image zoom on hover (hero, facility & amenity cards)
   -------------------------------------------------------------------------- */
.zoom img { transition: transform .6s ease; will-change: transform; }
.zoom:hover img { transform: scale(1.07); }

/* --------------------------------------------------------------------------
   Form focus ring
   -------------------------------------------------------------------------- */
.field:focus {
  border-color: #0d9488;
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .22);
}

/* --------------------------------------------------------------------------
   Floating stat card pulse + WhatsApp float
   -------------------------------------------------------------------------- */
@keyframes pndFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pndFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

.pnd-wa { animation: pndFloat 3s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Scroll reveal — ENHANCEMENT ONLY.
   Content is fully visible by default; only when JS confirms support
   (html.has-js) do we hide-then-reveal. No JS = everything visible.
   -------------------------------------------------------------------------- */
.has-js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
              transform .8s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.has-js .reveal.in { opacity: 1; transform: none; }

/* Hero entrance (on load) */
.has-js .hero-anim { animation: pndFadeUp .9s cubic-bezier(.16, 1, .3, 1) both; }
.has-js .hero-anim:nth-child(2) { animation-delay: .12s; }

/* --------------------------------------------------------------------------
   FAQ accordion — answers visible by default; JS collapses all but open
   -------------------------------------------------------------------------- */
.has-js .faq-a { display: none; }
.has-js .faq-item.open .faq-a { display: block; }

/* --------------------------------------------------------------------------
   Responsive grid system
   -------------------------------------------------------------------------- */
.pnd-mbar { display: none; }
.pnd-stats > div:last-child { border-right: none; }

.pnd-mnav { display: grid; }
.pnd-mnav[hidden] { display: none; }

@media (min-width: 961px) {
  .pnd-mnav { display: none !important; }
}

@media (max-width: 1080px) {
  .pnd-g4 { grid-template-columns: repeat(2, 1fr) !important; }
  .pnd-g5 { grid-template-columns: repeat(3, 1fr) !important; }
  .pnd-stats { grid-template-columns: repeat(3, 1fr) !important; }
  .pnd-stats > div { border-right: none !important; }
  .pnd-g3 { grid-template-columns: repeat(2, 1fr) !important; }
  .pnd-foot { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 960px) {
  .pnd-nav { display: none !important; }
  .pnd-burger { display: inline-flex !important; }
  .pnd-hero { grid-template-columns: 1fr !important; padding-top: 44px !important; padding-bottom: 64px !important; }
  .pnd-split, .pnd-osec { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .pnd-mbar { display: flex !important; }
  .pnd-wa { bottom: 84px !important; }
  .site > section:last-of-type,
  footer { padding-bottom: 60px; }
}

@media (max-width: 640px) {
  header > div { padding-left: 16px !important; padding-right: 16px !important; }
  section > div, footer > div, footer > div > div { padding-left: 20px !important; padding-right: 20px !important; }
  .pnd-g2, .pnd-g3, .pnd-g4, .pnd-g5, .pnd-foot { grid-template-columns: 1fr !important; }
  .pnd-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --------------------------------------------------------------------------
   Reduced motion — kill all animation, reveal everything
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .has-js .reveal { opacity: 1; transform: none; }
}