/*
 * INFRA-3464 defect 1: fixed/sticky header overlaps section headings and
 * anchor-scroll targets (e.g. Our Services, Why Go Frameless) when the
 * browser scrolls an element to the top of the viewport (scrollIntoView,
 * in-page anchor links, or a fragment URL). A position:fixed header does
 * not occupy layout space, so a plain scroll target lands directly behind
 * it. scroll-margin-top reserves that space for scroll targets only - it
 * has no effect on normal continuous scrolling or on the header itself.
 *
 * Values measured live against header.jupiterx-header (post-463/467,
 * JupiterX header + sticky-header templates), max of the pre-scroll and
 * post-scroll-shrink heights, plus a small safety buffer:
 *   desktop (min-width:1025px):            up to 137px measured to 1920px -> 145px
 *   tablet  (min-width:768px,max-width:1024px): 154px measured flat        -> 160px
 *   mobile  (max-width:767px):             182px measured at narrow widths -> 190px
 * Breakpoints match Elementor's OWN generated breakpoints for this widget
 * (grep '@media' in the live post-463.css/post-467.css: max-width:767px,
 * 768-1024px, min-width:1025px) - not guessed, to avoid the elevatovisuals
 * wrong-breakpoint tablet-nav regression (media query must match the
 * widget real breakpoint, not an assumed 991px/992px Bootstrap-style one).
 *
 * NOTE: desktop header height itself grows further past ~1920px (fluid
 * vw-based sizing on the phone-number text) - up to ~165px measured at
 * 2560px wide. 145px is sized for the required proof matrix (1440/~860/390)
 * plus common widescreen (<=1920px); an ultra-wide (>1920px) monitor may
 * still see a small residual overlap on scrollIntoView/anchor jumps. Flag
 * this as a known limiting condition, not fixed by this change.
 */

h1,
h2,
h3,
h4,
h5,
h6,
[id] {
  scroll-margin-top: 145px;
}

@media (max-width: 1024px) and (min-width: 768px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  [id] {
    scroll-margin-top: 160px;
  }
}

@media (max-width: 767px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  [id] {
    scroll-margin-top: 190px;
  }
}