/* Air Fill brand overrides for the Osmo bottom nav.
   Kept separate so the vendor file (bottom-nav.css) stays pristine and updatable.
   Uses the theme's brand tokens. */

/* Match the site's type. */
.bottom-nav__inner { font-family: var(--wp--preset--font-family--nunito); }
.bottom-nav__label { font-family: inherit; }

/* Logo → app icon + Air Fill wordmark lockup. */
.bottom-nav__logo { width: auto; gap: 0.45em; }
.bottom-nav__logo img {
  display: block;
  height: 2.25em;
  width: auto;
  border-radius: .5em;
}
.bottom-nav__wordmark {
  font-weight: 800;
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
}

/* Toggle → drop the vendor blue; branded coral pill with dark bars. */
.bottom-nav__toggle {
  background-color: var(--wp--preset--color--coral);
  color: var(--wp--preset--color--ink);
}

/* CTA link → brand coral (AA on the light panel) instead of vendor blue. */
.bottom-nav__link.is--cta { color: var(--wp--preset--color--coral-deep); }

/* Sit near the bottom edge, just clearing the home indicator (was 2em ≈ pushed too high). */
.bottom-nav { bottom: max(0.25rem, var(--ios-safe-bottom)); }

/* Scale the whole nav up — the vendor sizes everything in em, so one font-size
   enlarges the closed pill, tap target, hamburger, open panel, and link text. */
.bottom-nav { font-size: 1.5rem; }
/* A slightly bolder hamburger so the closed-state icon reads clearly. */
.bottom-nav__toggle-bar { width: 1.4em; height: 0.13em; }

/* Slightly smaller toggle button (≈ −8px), and no underline on the Air Fill wordmark. */
.bottom-nav__toggle { width: 2.17em; height: 2.17em; }
.bottom-nav__logo { text-decoration: none; }

/* --- Docking + scroll-reveal (Air Fill behaviour) -------------------- */
/* The centring transform carries a vertical --nav-shift so the whole nav can
   slide off-screen without touching the GSAP timeline (which only animates
   .bottom-nav__inner width/height). Motion reuses the site's iOS easing. */
.bottom-nav {
  transform: translate(-50%, var(--nav-shift, 0));
  transition: transform var(--ios-duration-slow, 460ms) var(--ios-ease-out, ease-out);
}

/* Phone: docked just off the bottom edge by default (so it never flashes on load);
   bottom-nav-scroll.js adds --visible to slide it up when the user scrolls up. */
@media (max-width: 833px) {
  .bottom-nav { --nav-shift: calc(100% + max(0.25rem, var(--ios-safe-bottom)) + 1.5rem); }
  .bottom-nav--visible { --nav-shift: 0; }
}

/* Tablet and up: dock at the TOP, LEFT-aligned inside the .container measure, expanding
   to the RIGHT and DOWN. Always visible. */
@media (min-width: 834px) {
  .bottom-nav {
    top: max(0.75rem, var(--ios-safe-top));
    bottom: auto;
    --nav-shift: 0; /* neutralise any lingering phone hidden-state across a resize */
    /* Left edge = the container's content-left. Dropping the -50% centring transform
       means the inner's width animates rightward from that anchored left edge, so the
       pill grows right (and down via the column flex) instead of outward from centre. */
    left: calc(max(0px, (100vw - var(--wp--style--global--wide-size, 1200px)) / 2) + var(--wp--preset--spacing--40));
    transform: translate(0, var(--nav-shift, 0));
  }
  .bottom-nav__inner { flex-flow: column; } /* bar on top, panel below → grows down */
}

/* Reduced motion: appear/disappear instantly (no slide), still fully functional. */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav { transition: none; }
}