/* ---------------------------------------------------------------------------
   Mobile bottom bar — "the Dock". Rendered by Ppt\Frontend\MobileNav.
   Phones only: 860px is the line the site header itself collapses at
   (HeaderParts::foundationCss), so the bar appears exactly when the desktop
   nav goes away.

   Every colour is one of the design's own tokens with a literal fallback, so
   the bar already matches whichever of the 400+ designs is active, in light
   and dark, without a setting.
   --------------------------------------------------------------------------- */

:root {
  /* Space the page reserves for the bar. 0 above the breakpoint; set below.
     Deliberately CONSTANT within the breakpoint — it does not shrink when the
     bar compacts, or the page would jump under the reader's thumb. */
  --ppt-mnav-h: 0px;
}

.ppt-mnav {
  /* The bar's own surface tokens. On ordinary pages they are the design's; the
     member hub re-points them below. */
  --mnav-surface: var(--ppt-surface, #fff);
  --mnav-line: var(--ppt-line, rgba(127, 127, 127, .22));
  --mnav-muted: var(--ppt-muted, #6b7280);
  --mnav-ring: var(--ppt-bg, #fff);
  display: none;
}

/* The member hub has its own light / dark (the phone's setting, or the hub's Dark
   mode switch) on --hub-* tokens, while the design's tokens stay light. Without
   this the bar stayed a pale slab on a dark hub. */
.ppt-hub .ppt-mnav {
  --mnav-surface: var(--hub-panel, var(--ppt-surface, #fff));
  --mnav-line: var(--hub-line, var(--ppt-line, rgba(127, 127, 127, .22)));
  --mnav-muted: var(--hub-muted, var(--ppt-muted, #6b7280));
  --mnav-ring: var(--hub-bg, var(--ppt-bg, #fff));
}

@media (max-width: 860px) {

  :root {
    --ppt-mnav-h: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  /* `html body`, not `body`: WordPress core prints its global styles as
     `body{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}`
     (wp-includes theme.json defaults, printed even for this classic theme). A bare
     `body` ties it on specificity, and on WordPress pages (About, FAQ, Terms, Blog,
     Contact...) core prints it in the FOOTER, after this file, so it won there: the
     reserve was 0 and the bar sat over the footer's last row. (0,0,2) beats core's (0,0,1)
     without !important, so the pages that add their own sticky bar on top of the
     Dock (body.ppt-htw-mbar-on, html.ppt-cmp-has-tray body, body.ppt-np-has-mbar)
     and the print rule below still win. */
  html body {
    /* So the last card, the footer's final link and any sticky CTA all clear
       the bar instead of sitting under it. */
    padding-bottom: var(--ppt-mnav-h);
  }

  .ppt-mnav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    display: block;
    /* Under the off-canvas drawer + scrim (9000/9001) so an open menu covers
       the bar, and under the floating widgets (99989+) so toasts still show. */
    z-index: 8990;
    padding: 0 11px calc(11px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }

  .ppt-mnav-bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    /* Visible, not hidden: the raised circle overhangs the top edge. */
    overflow: visible;
    height: 60px;
    padding: 0 4px;
    border: 1px solid var(--mnav-line);
    border-radius: 26px;
    background: var(--mnav-surface);
    box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .38);
    transition: height .18s ease;
  }

  /* Translucency only where the browser can actually blur behind it — a flat
     85% surface with no blur just looks like a mistake. */
  @supports (backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px)) {
    .ppt-mnav-bar {
      background: color-mix(in srgb, var(--mnav-surface) 88%, transparent);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }
  }

  /* ---- a tab ----
     Tab colour rules carry the .ppt-mnav prefix so a page's own link rule can't
     win: the member hub's `.ppt-hub a { color: inherit }` (0,1,1) beat a bare
     .ppt-mnav-tab and painted the glyphs in the hub's ink, which on a dark hub
     was near-white on the bar, visible only on hover. */

  .ppt-mnav .ppt-mnav-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;               /* WCAG target size */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;                       /* clears the active pill, which overhangs the 22px glyph by 4px */
    padding: 0 2px;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: none;
    color: var(--mnav-muted);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  .ppt-mnav-ico {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    line-height: 0;
  }

  .ppt-mnav-ico svg { display: block; }

  .ppt-mnav-lb {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .005em;
  }

  /* ---- the active tab ---- */

  .ppt-mnav .ppt-mnav-tab.is-on { color: var(--ppt-accent, var(--ppt-brand, #2563eb)); }
  .ppt-mnav-tab.is-on .ppt-mnav-lb { font-weight: 750; }

  /* The glyphs are stroke-only, so filling them at low opacity reads as the
     "selected" weight without needing a second icon set. */
  .ppt-mnav-tab.is-on .ppt-mnav-ico svg {
    fill: currentColor;
    fill-opacity: .16;
  }

  /* A soft pill behind the glyph. It hangs off the ICON (centred on it), not the
     tab: placed from the tab's top it sat 5px high once the captions hid on
     scroll, so the glyph poked out of its bottom edge. The icon box is its own
     stacking context (z-index:1), so z-index:-1 keeps the pill behind the glyph. */
  .ppt-mnav-tab.is-on:not(.is-big) .ppt-mnav-ico::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 30px;
    border-radius: 15px;
    transform: translate(-50%, -50%);
    background: currentColor;
    opacity: .13;
  }

  .ppt-mnav .ppt-mnav-tab:hover { color: var(--ppt-accent, var(--ppt-brand, #2563eb)); }

  .ppt-mnav-tab:focus-visible {
    outline: 2px solid var(--ppt-accent, var(--ppt-brand, #2563eb));
    outline-offset: -3px;
    border-radius: 14px;
  }

  /* ---- the raised circle (the `big` slot) ---- */

  /* The circle carries no visible caption — there is no room under a 56px disc in a
     60px bar, and a caption there rendered 7px UNDERNEATH the disc. MobileNav::render()
     puts it on aria-label/title instead, so the control still has a name. */
  .ppt-mnav .ppt-mnav-tab.is-big {
    flex: 0 0 58px;
    color: var(--ppt-accent, var(--ppt-brand, #2563eb));
  }

  .ppt-mnav-tab.is-big .ppt-mnav-ico {
    position: absolute;
    top: -22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ppt-accent, var(--ppt-brand, #2563eb));
    color: var(--ppt-accent-ink, #fff);
    /* The ring is the PAGE colour, not the bar's — that is what makes the
       circle read as lifted out of the bar rather than pasted onto it. */
    box-shadow:
      0 0 0 5px var(--mnav-ring),
      0 8px 20px -4px color-mix(in srgb, var(--ppt-accent, #2563eb) 55%, transparent);
  }

  /* Not every scheme declares --ppt-accent-ink: 66 of the 344 accents in
     Design\Tokens leave it unset, and 21 of those are pale (ambers, yellows, cyans)
     where the #fff fallback lands at 1.5-2.9:1 — an invisible glyph on the one
     control the bar is built around. Where the browser supports relative colour,
     derive the ink from the accent's own lightness instead: black on a pale accent,
     white on a dark one. A scheme that DOES set --ppt-accent-ink still wins, because
     it is the first term of the var() chain. */
  @supports (color: oklch(from red l c h)) {
    .ppt-mnav-tab.is-big .ppt-mnav-ico {
      color: var(
        --ppt-accent-ink,
        oklch(from var(--ppt-accent, var(--ppt-brand, #2563eb)) clamp(0, (0.62 - l) * 1000, 1) 0 0)
      );
    }
  }

  .ppt-mnav-tab.is-big:focus-visible { outline-offset: 2px; }

  /* ---- badges ---- */

  .ppt-mnav-badge {
    position: absolute;
    top: 1px;
    inset-inline-start: calc(50% + 5px);
    z-index: 2;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: #d92d20;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--mnav-surface);
  }

  /* ---- compacted while the visitor is scrolling down ---- */

  .ppt-mnav.is-compact .ppt-mnav-bar { height: 50px; }
  .ppt-mnav.is-compact .ppt-mnav-lb { display: none; }
  .ppt-mnav.is-compact .ppt-mnav-tab.is-big .ppt-mnav-ico { top: -17px; width: 50px; height: 50px; }

  @media (prefers-reduced-motion: reduce) {
    .ppt-mnav-bar { transition: none; }
  }

  /* ---- get out of the way of the other fixed furniture ----
     These four already sit at the bottom of the viewport and would stack on
     top of the bar. Lifting them by the bar's height keeps every floating
     element in its own lane. */
  .ppt-nc  { bottom: calc(20px + var(--ppt-mnav-h)) !important; }
  .ppt-mgr { bottom: calc(20px + var(--ppt-mnav-h)) !important; }
  .ppt-toasts,
  .ppt-toast-stack { bottom: calc(18px + var(--ppt-mnav-h)) !important; }

  /* The consent bar is a full-width blocker that must be dealt with before the
     visitor browses at all — it sits over the bar on purpose, and the bar is
     pushed up above it while it is on screen. */
  body.ppt-consent-open .ppt-mnav { display: none; }
}

/* Never on desktop, whatever a design's own CSS does. */
@media (min-width: 861px) {
  .ppt-mnav { display: none !important; }
}

/* Printing a page should not print a navigation bar. */
@media print {
  .ppt-mnav { display: none !important; }
  body { padding-bottom: 0 !important; }
}