/* ==========================================================================
   app-bar.css — Phase 3b of docs/RESPONSIVE_APP_UI_PLAN.md
   The phone top bar.

   The floating pill header is a desktop pattern: at 360px its 14px outer
   padding, 60px radius and 72px inner height spend roughly 100px of vertical
   space before any content appears. On a phone that is a tenth of the screen
   given to a shape.

   This does not replace the header - the markup stays exactly as it is, so
   the slide-out nav, cart and user menu keep working. It restyles it at phone
   widths into a compact bar, and adds hide-on-scroll-down / show-on-scroll-up,
   which is the single behaviour that most separates an app bar from a web
   header. The .em-appbar-hidden class is toggled by app-shell.js.
   ========================================================================== */

@media (max-width: 767px) {
  /* Flush to the top edge: no floating inset, no rounded pill. */
  .header-float-wrap {
    padding: 0;
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    transition: transform var(--dur-base) var(--ease-standard);
    will-change: transform;
  }

  .site-header {
    max-width: none;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: rgba(255, 255, 255, .96);
    box-shadow: none;
  }

  .site-header.scrolled {
    box-shadow: var(--sh-sm);
    background: rgba(255, 255, 255, .98);
  }

  /* Shorter bar: 56px is the standard app-bar height and buys back ~44px of
     content on every phone screen. */
  .header-inner {
    height: var(--appbar-h);
    padding: 0 var(--gutter);
  }

  .site-branding img,
  .site-branding .custom-logo {
    max-height: 30px;
  }

  .site-branding-wordmark {
    font-size: var(--fs-lg);
  }

  /* Slides the bar out of view on scroll-down and back on scroll-up. The
     safe-area inset is included so the bar clears the notch completely
     rather than leaving a sliver behind it. */
  .em-appbar-hidden .header-float-wrap {
    transform: translateY(calc(-100% - var(--safe-top)));
  }

  /* While the slide-out nav is open the bar must stay put - hiding it would
     take the close button with it. */
  .em-nav-open .header-float-wrap {
    transform: none !important;
  }
}

/* The body offset that compensates for the fixed header. The theme sets this
   for the taller pill header; at phone widths the bar is shorter, so the
   offset has to shrink with it or every page opens with a visible gap. */
@media (max-width: 767px) {
  body {
    padding-top: 0;
  }

  .site {
    padding-top: calc(var(--appbar-h) + var(--safe-top));
  }

  /* Surfaces that manage their own top spacing under a hero. */
  .site > .page-hero,
  .site > .about-hero,
  .site > .home-hero {
    margin-top: 0;
  }
}

/* Reduced motion: the bar still hides, it just does not animate. */
@media (prefers-reduced-motion: reduce) {
  .header-float-wrap {
    transition: none;
  }
}