/* ---------------------------------------------------------------------------
   Mobile navigation + header account button.

   The design export ships a .nav-burger button with no panel and no handler --
   the interactivity lived in the React source and was flattened away by the
   static export. js/nav.js builds the panel from each page's own .nav-desktop
   links, so this works on the anchor-link home header and the page-link header
   alike.

   The breakpoint is 1000px, not the export's own 720px. The export only ever
   drew the five-link menu on Home; every other page had four shorter links, so
   720 was enough for them. Now that one header runs site-wide, six links plus
   the cart pill, the account button and Book a call need about 900px before the
   text inside them starts wrapping, so the burger takes over earlier. Raised
   from 960 when About was added to the menu. The matching number lives in
   js/nav.js.
   ------------------------------------------------------------------------ */

/* The CTA group holds two buttons now. The nav's 28px gap is too airy between
   them; they read as one control pair at 10px. */
.site-header .pe-cta-group {
  gap: 10px;
}

.pe-mobile-nav {
  display: none;
}

@media (max-width: 1000px) {

  /* Overrides the generated per-page CSS, which swaps these at 720px. The
     .site-header prefix outranks its bare `.nav-desktop { display: none }`. */
  .site-header .nav-desktop {
    display: none !important;
  }

  .site-header .nav-burger {
    display: inline-flex !important;
  }

  .pe-mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 4px 24px 20px;
    border-top: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* Wins over the display:flex above when the panel is closed. */
  .pe-mobile-nav[hidden] {
    display: none;
  }

  .pe-mobile-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    color: var(--text-secondary);
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
    transition: color 0.2s ease;
  }

  .pe-mobile-link:hover,
  .pe-mobile-link:focus-visible {
    color: var(--text-accent);
  }

  .pe-mobile-cta {
    margin-top: 18px;
    text-align: center;
  }

  /* Stacked in the panel, the buttons need their own breathing room rather
     than the 18px that separates the group from the links above it. */
  .pe-mobile-cta + .pe-mobile-cta {
    margin-top: 10px;
  }

  .site-header .nav-burger {
    transition: background 0.2s ease, color 0.2s ease;
  }

  .site-header.pe-nav-open .nav-burger {
    background: var(--accent-soft);
    color: var(--text-accent);
  }
}

/* ---------------------------------------------------------------------------
   Persistent Book a call bar, phones only.

   Below 1000px the header CTA is inside .nav-desktop, which is hidden behind
   the burger -- so before this the only route to the scheduler on a phone was
   opening the menu or scrolling to 12,323px of a 13,819px page.

   Fixed rather than sticky so it does not depend on an ancestor's overflow,
   and the body gets matching bottom padding so the footer is still reachable.
   ------------------------------------------------------------------------ */

.pe-mobile-bar {
  display: none;
}

@media (max-width: 1000px) {

  .pe-mobile-bar {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1200;
    display: flex;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-subtle);
  }

  .pe-mbar-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out);
  }

  .pe-mbar-primary {
    background: var(--accent);
    color: var(--text-inverse);
  }

  .pe-mbar-primary:active {
    background: var(--accent-active);
  }

  .pe-mbar-secondary {
    background: var(--accent-soft);
    color: var(--text-accent);
    border: 1px solid var(--accent-soft-border);
  }

  /* Clears the bar so the last of the footer is still scrollable to. */
  body.pe-export {
    padding-bottom: 78px;
  }

  /* The open menu panel must sit above the bar, not behind it. */
  .site-header {
    z-index: 1300;
  }
}


/* Inside the installed app there is no marketing to do - the person already
   came in through their own dashboard. Covers every page, not just the
   dashboard, since the app's scope is the whole site. */
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) {
  .pe-mobile-bar { display: none !important; }
}


/* ---- Free reels announcement strip (php/_free_reels.php) ---------------- */
/* PE-FR-STRIP */
.pe-fr-strip { background: var(--ink-900, #0F172A); color: #fff; }
.pe-fr-strip a { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; max-width: 1160px; margin: 0 auto; padding: 9px 20px; font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: rgba(255,255,255,0.86); text-align: center; text-decoration: none; }
.pe-fr-strip a:hover { color: #fff; }
.pe-fr-strip b { color: #fff; font-weight: 600; }
.pe-fr-strip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-400, #5DA3F5); box-shadow: 0 0 0 3px rgba(93,163,245,0.25); flex: 0 0 auto; }
.pe-fr-strip-arrow { color: var(--blue-300, #8AC2FF); transition: transform 0.2s ease; }
.pe-fr-strip a:hover .pe-fr-strip-arrow { transform: translateX(-3px); }
@media (max-width: 520px) { .pe-fr-strip a { font-size: 13px; padding: 8px 16px; } .pe-fr-strip-sep { display: none; } }