/* ============================================================
 * REALPRO_ANCHOR_NAVIGATION_V23
 * REALPRO_ANCHOR_NAVIGATION_V24_REFINEMENT
 *
 * Premium anchor behavior:
 * - JS owns motion; browser-native smooth scrolling is disabled
 * - exact landing immediately below the live header boundary
 * - focused service occupies at least the usable viewport
 * ============================================================ */

html {
  scroll-behavior: auto !important;
}

/* Runtime values are published by the V24 JS. */
:root {
  --rp-anchor-offset: 0px;
  --rp-anchor-viewport: 100svh;
}

/*
 * Exact service landing.
 * No artificial top gap: section begins immediately below header.
 */
body.rp-page-services main#main
:is(
  #brand-identity,
  #brand-services,
  #website-experiences,
  #cinematic-production,
  #brand-driven-imagery,
  #podcast-production,
  #photography,
  #real-estate-media
) {
  scroll-margin-top: var(--rp-anchor-offset, 0px) !important;
}

/*
 * Anchor focus mode:
 * only the selected service is guaranteed to occupy the entire visible
 * viewport beneath the fixed/sticky header. This prevents a short service
 * section from revealing the next section immediately after navigation.
 */
body.rp-page-services main#main
:is(
  #brand-identity,
  #brand-services,
  #website-experiences,
  #cinematic-production,
  #brand-driven-imagery,
  #podcast-production,
  #photography,
  #real-estate-media
).rp-anchor-focus {
  min-height:
    max(
      var(--rp-anchor-viewport, 100svh),
      calc(100svh - var(--rp-anchor-offset, 0px))
    ) !important;
}

/* Do not introduce visual outlines merely because a section is targeted. */
body.rp-page-services main#main
:is(
  #brand-identity,
  #brand-services,
  #website-experiences,
  #cinematic-production,
  #brand-driven-imagery,
  #podcast-production,
  #photography,
  #real-estate-media
):target,
body.rp-page-services main#main .rp-anchor-focus {
  outline: none !important;
}

/*
 * Reduced motion keeps exact positioning while removing animated travel.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}