/**
 * Apex Dental Recovery — Supplementary Stylesheet
 *
 * Fonts are self-hosted in /assets/fonts/ (woff2 variable fonts, latin subset).
 * No third-party CDN requests — eliminates Google Fonts IP data-sharing concern
 * for HIPAA-adjacent dental practice visitors.
 *
 * Contents:
 *   1. Self-hosted fonts (Inter 400-700, Playfair Display 400-700)
 *   2. Scroll-to-top button styles
 *   3. Print styles
 */

/* ==========================================================================
   1. Self-hosted fonts — Inter (body) + Playfair Display (headings)
   Both are variable woff2 files (latin subset) downloaded from Google Fonts
   CDN at build time. A single @font-face per family covers all weights via
   the font-weight range syntax (e.g. "400 700").
     Inter: 400 (body), 500 (nav links), 600 (labels, badges), 700 (stats)
     Playfair: 400 (default heading), 700 (hero h1, section h2)
   font-display: swap prevents invisible text during font load (FOIT → FOUT).
   unicode-range: U+0000-00FF covers the full Basic Latin + Latin-1 supplement
   needed for English dental practice content.
   ========================================================================== */

/* Inter — body text, nav, UI labels */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display — headings (h1–h6) */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Scroll-to-top button
   Fixed bottom-right button that appears after scrolling past the fold.
   Visibility toggled via JS (opacity + pointer-events). Uses brand teal
   bg with white icon for consistency with the nav and CTA palette.
   ========================================================================== */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 40;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  /* Brand teal background — matches --color-brand (#0d4f4f) */
  background-color: #0d4f4f;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Smooth show/hide transition */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background-color: #093c3c; /* --color-brand-dark */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.scroll-to-top:focus-visible {
  outline: 2px solid #c7923e; /* --color-accent for focus ring */
  outline-offset: 2px;
}

/* On mobile, pull it in slightly so it doesn't overlap edge content */
@media (max-width: 639px) {
  .scroll-to-top {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ==========================================================================
   3. Print styles
   Minimal print overrides for visitors who print the page (e.g. practice
   owners sharing pricing with partners). Hides interactive elements,
   removes shadows/animations, and ensures text prints in black on white.
   ========================================================================== */
@media print {
  /* Hide interactive/non-printable elements */
  nav,
  .scroll-to-top,
  [data-feedback],
  #mobile-menu,
  #mobile-menu-toggle,
  .skip-link {
    display: none !important;
  }

  /* Reset backgrounds for ink savings */
  body {
    background: white !important;
    color: #000 !important;
  }

  section {
    background: white !important;
    page-break-inside: avoid;
  }

  /* Ensure links show their URL in print */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #666;
  }

  /* Don't show URL for internal anchor links */
  a[href^="#"]::after {
    content: none;
  }

  /* Remove shadows and decorative transforms */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Disable animations for static print output */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Keep hero stat visible without animation */
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   4. Accessibility — respect reduced motion for scroll-to-top
   The global reduced-motion rule in input.css handles animations, but
   this ensures the scroll-to-top button transition is also disabled.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scroll-to-top {
    transition: none;
  }
}