/* fp-aesthetic-v3.css — Aesthetic Optimization Phases 3-5, 7
   Loaded via media="print" onload pattern.
   Deploy: v18 · March 2026 */

/* ═══ PHASE 3: Mobile Sticky Bar Refinement ═══ */

/* Subtle top edge on sticky bar for visual separation from content */
.sticky-bottom {
  box-shadow: 0 -2px 12px rgba(0,0,0,.15);
}

/* Smooth the ticker collapse transition */
.sticky-appt-line {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Ensure action row buttons have consistent touch targets */
@media (max-width: 640px) {
  .sticky-action-btn {
    min-height: 44px;
    font-size: .76rem;
  }
}


/* ═══ PHASE 4: Typography Cleanup ═══ */

/* Article body headings: no text-shadow (cls-fix sets none globally,
   but Astro CSS has specificity on .page-article h2 — reinforce here) */
.page-article h2,
.page-article h3,
.blog-content h2,
.blog-content h3,
.rehab-content h2,
.rehab-content h3 {
  text-shadow: none;
}

/* Sharpen mobile heading hierarchy */
@media (max-width: 640px) {
  .page-article h2 {
    font-size: clamp(1.35rem, 4.5vw, 1.6rem);
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: .75rem;
  }
  .page-article h3 {
    font-size: clamp(1.1rem, 3.5vw, 1.3rem);
    line-height: 1.25;
    margin-top: 1.5rem;
    margin-bottom: .6rem;
  }
}

/* Desktop heading refinement */
@media (min-width: 641px) {
  .page-article h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    letter-spacing: -0.01em;
  }
}


/* ═══ PHASE 5: Dark Footer Visual Relief ═══ */

/* Give each footer section a distinct shade to break the visual monotony.
   Goes from lightest (top) to darkest (bottom):
   info-banner (#204652) → inner (#0d1a24) → maps (darkened) → bottom (darkest) */

.footer-info-banner {
  background: #1e3d48;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.footer-inner {
  background: rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.footer-maps {
  background: rgba(0,0,0,.22);
  border-top: none;
}

/* Footer bottom bar: darkest layer */
.footer-bottom {
  background: rgba(0,0,0,.3);
  padding: 1rem;
  margin-top: .5rem;
}

/* Subtle top accent line on the footer for clean content→footer transition */
.site-footer {
  border-top: 3px solid var(--fp-accent, #00796b);
}

/* Footer progress banner area: slightly warmer feel */
.footer-progress-banner {
  filter: brightness(1.1);
}

/* Footer map cards: slightly lighter than map section bg */
.footer-map-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  overflow: hidden;
}

.footer-map-info {
  padding: .6rem .85rem;
}



/* ═══ PHASE 7: Minor Polish ═══ */

/* Service card hover: subtle lift + shadow */
.service-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

/* Social icons: consistent sizing */
.footer-social a svg {
  width: 20px;
  height: 20px;
  transition: opacity .2s ease, transform .15s ease;
}
.footer-social a:hover svg {
  opacity: 1;
  transform: translateY(-1px);
}

/* Reading progress bar: ensure it's above sticky bar but below modals */
.reading-progress {
  z-index: 9997;
}

/* Wave dividers: ensure crisp rendering */
.wave-divider svg {
  display: block;
}

/* Service tags: slightly better contrast */
.service-tags {
  letter-spacing: .01em;
}

/* Footer directions link: cleaner hover */
.footer-directions:hover,
.footer-map-directions:hover {
  color: #66d9c8;
}