/* Frame fix for the two standalone templates.
   Everything here is gated on .athletigo-standalone, a body class added only
   for page-home-new.php and page-training-new.php, so nothing can leak.

   The offending rule is Astra's, not Elementor's:
     source   inline <style id="astra-theme-css-inline-css">, Astra's dynamic
              per-site CSS printed on wp_head
     selector .site-content .ast-container
     inside   @media (min-width: 922px)
     declares display:flex
   The documents are a stack of full-bleed <section> elements, so as flex
   children they became columns, collapsed toward zero width and spilled
   sideways. It only ever broke at 922px and up, which is why 390 looked fine.

   #primary and .entry-content do not exist on these two templates: the
   documents render straight inside .ast-container, with no Astra article
   wrapper. Those two rules are kept anyway so the fix still holds if that
   markup ever comes back. */

.athletigo-standalone .site-content .ast-container {
  display: block;
  max-width: none;
  padding: 0;
  margin: 0;
}

.athletigo-standalone #primary {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  float: none;
}

.athletigo-standalone #content {
  padding: 0;
}

.athletigo-standalone .entry-content {
  margin: 0;
}

/* The documents paint their own background; stop Astra's grey showing
   between the header and the first section. */
.athletigo-standalone #page,
.athletigo-standalone #content {
  background: transparent;
}

/* ------------------------------------------------------------------
   Sticky site header, these two templates only.

   --atg-header-h is written by a small inline script from the header's
   real measured height, so the offset is exact at every width and with
   the admin bar present. The 81px fallback is the desktop measurement,
   used only if that script has not run yet.
   Highest z-index inside either document is 60 (#spine), so 900 clears
   the page without fighting UserWay's floating button.
   ------------------------------------------------------------------ */

.athletigo-standalone #masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(5, 5, 6, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(251, 243, 234, 0.10);
}

/* the admin bar is itself fixed, so sit under it when logged in */
.admin-bar.athletigo-standalone #masthead {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar.athletigo-standalone #masthead {
    top: 46px;
  }
}

/* the header is out of flow now, so hand its height back to the page */
.athletigo-standalone #content {
  padding-top: var(--atg-header-h, 81px);
}

/* In-page anchors land below the header, not behind it.
   This uses the header's BOTTOM edge, not its height. When the admin bar is
   present the header is pushed down 32px (46px on small screens), so height
   alone would drop anchors behind it by exactly that much. #content above
   still uses height, because the admin bar already offsets <html> itself.
   Scoped by the stylesheet: frame.css is only ever enqueued on these two
   templates, and scroll-padding has to sit on the scroller. */
html {
  scroll-padding-top: var(--atg-header-bottom, 81px);
}

/* an open mobile menu makes the header tall; let it scroll rather than
   run off a short screen, and keep it above every section */
@media (max-width: 921px) {
  .athletigo-standalone #masthead {
    max-height: 100svh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
