/* ==========================================================================
   Gather Nav — phone bottom tab bar + desktop header link-group hiding
   ==========================================================================
   Paired with gather-nav.js (see the comment block at the top of that file
   for the GatherNav.init({active, theme}) wiring contract).

   THEME NOTE — read before changing colors:
   The dark tokens below are sampled directly from styles.css's default
   :root (used as-is by index.html, travel.html and adventures.html) and
   from groups.html/bookclub.html's own :root overrides, which keep the same
   primary / surface / text / border values and only add their own
   accent identity (--grp green, --lamp gold) on top. All five of those
   pages render the same dark "dusk" surface, so one dark palette here
   covers all of them. --accent-secondary (#F7C948, the lantern gold used
   for the beta pill, stat numbers, etc.) is what's reused as the active-tab
   color.
   The light tokens are sampled from travel-numbers.html's and
   trip-planner.html's shared :root override (the cream MHC board), using
   their --travel-color teal as the active-tab color (same accent already
   used for links/labels throughout those two pages).
   travel.html and adventures.html are grouped with the ORIGINAL nav spec's
   "light cream pages," but neither page actually carries the cream :root
   override in this codebase today — both still render the dark defaults.
   gather-nav.js therefore initializes them with theme:'dark' so the bar
   matches what's actually on screen. If those two pages are later given
   the cream treatment, switch their init() call to theme:'light'.
   ========================================================================== */

.gnav-bar {
    /* --- dark "dusk" tokens (default) --- */
    --gnav-bg: rgba(15, 15, 16, 0.94);
    --gnav-border: rgba(255, 255, 255, 0.08);
    --gnav-text: #B4B4B8;
    /* Override hook: a page can set --gnav-active-override on #gatherNavBar
       (or higher) to swap the active-tab color without touching this file —
       e.g. a page that wants its own section identity accent instead of the
       shared lantern gold / travel teal defaults. */
    --gnav-active: var(--gnav-active-override, #F7C948);
    --gnav-focus: var(--gnav-active-override, #F7C948);

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40; /* under every modal/dialog on every page (lowest found: 60
                    on groups.html/bookclub.html toasts; index.html's own
                    .modal starts at 3000) and above ordinary page content */
    display: none; /* shown only below 720px, see media query below */
    flex-direction: row;
    align-items: stretch;
    background: var(--gnav-bg);
    border-top: 1px solid var(--gnav-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.gnav-bar[data-gnav-theme="light"] {
    --gnav-bg: #FFFDF8;
    --gnav-border: rgba(23, 41, 61, 0.13);
    --gnav-text: #454B52;
    --gnav-active: var(--gnav-active-override, #2F8F86);
    --gnav-focus: var(--gnav-active-override, #2F8F86);
}

.gnav-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 4px 4px;
    text-decoration: none;
    color: var(--gnav-text);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.gnav-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.gnav-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.1;
    text-align: center;
}

.gnav-tab-active {
    color: var(--gnav-active);
}

.gnav-tab:focus-visible {
    outline: 2px solid var(--gnav-focus);
    outline-offset: -2px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: no-preference) {
    .gnav-tab { transition: color .15s ease; }
}

@media (max-width: 719px) {
    .gnav-bar { display: flex; }

    /* Reserve room so the fixed bar never covers page content or footers. */
    body.has-gather-nav {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* Floating "saved" indicators (travel-numbers.html, trip-planner.html)
       and toast notifications (groups.html, bookclub.html; also index.html's
       via styles.css, already clear at 100px so the max() below leaves it
       untouched) would otherwise sit underneath/behind the new bar. */
    body.has-gather-nav .save-dot {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
    }
    body.has-gather-nav .toast {
        bottom: max(100px, calc(56px + env(safe-area-inset-bottom, 0px) + 16px));
    }

    /* index.html's signed-in topbar: these four unlabeled icon links are
       redundant once the tab bar covers the same ground. Hidden, not
       removed — Invite/Print/Share/Circle/Sign Out stay exactly as-is. */
    .user-bar .travel-link,
    .user-bar .bookclub-link,
    .user-bar .groups-link,
    .user-bar .adventures-link {
        display: none;
    }

    /* Desktop header link-group additions on the other six pages (marked
       with this class where added) hide once the tab bar takes over —
       each page's pre-existing contextual back-link(s) are left alone. */
    .gnav-added {
        display: none !important;
    }
}

@media print {
    .gnav-bar,
    .gnav-added {
        display: none !important;
    }
}