/* ============================================================
   Zilideon Mobile Navigation — the one bottom bar for the whole site
   Rendered by ZL_Mobile_Nav (includes/class-zl-mobile-nav.php) on the
   dashboard AND on every other front-end page, so it is identical
   everywhere. Themes must not draw their own bottom bar; they only set
   variables (--zl-dash-nav-active) on <body>.
   ============================================================ */

:root {
    --zl-dash-white: #ffffff;
    --zl-dash-border: #e8eaf0;
    /* ── Brand colour (single source of truth) ─────────────────────────
       Every dashboard blue derives from --zl-dash-brand. The Zilideon Aura
       theme can override --zl-dash-brand and --zl-dash-brand-rgb on :root
       (Customizer > Colours > Dashboard colour = "Match site accent").
       Keep this block identical in dashboard.css and mobile-nav.css. */
    --zl-dash-brand: #1769e8;
    --zl-dash-brand-rgb: 23, 105, 232;
    --zl-dash-on-brand: #ffffff;                            /* text on brand fills */
    --zl-dash-brand-dark: #0e57c9;                          /* hover / dark text */
    --zl-dash-brand-soft: rgba(var(--zl-dash-brand-rgb), .10); /* tinted backgrounds */
    --zl-dash-brand-wash: rgba(var(--zl-dash-brand-rgb), .045);/* barely-there rows */
    --zl-dash-brand-line: rgba(var(--zl-dash-brand-rgb), .22); /* tinted borders */
    /* Theming hook: a theme may set this to recolour the active tab. */
    --zl-dash-nav-active: var(--zl-dash-brand);
}

/* Darker shade derived from whatever brand colour is active. Browsers
   without color-mix() keep the blue fallback above. */
@supports (color: color-mix(in srgb, red, blue)) {
    :root { --zl-dash-brand-dark: color-mix(in srgb, var(--zl-dash-brand) 78%, #000); }
}


/* ============================================================
   Wave 2 — Mobile Bottom Navigation
   ============================================================ */

.zl-mobile-bottom-nav {
    display: none; /* shown only at ≤ 768px */
}

@media (max-width: 768px) {

    .zl-mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--zl-dash-white);
        border-top: 1px solid var(--zl-dash-border);
        box-shadow: 0 -2px 12px rgba(0,0,0,.08);
        z-index: 1000;
        align-items: stretch;
    }

    .zl-mbn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        color: #9ca3af;
        font-size: 12px;
        font-weight: 500;
        padding: 6px 2px;
        position: relative;
        transition: color .15s;
        -webkit-tap-highlight-color: transparent;
        min-width: 44px; /* one-hand tap target */
        min-height: 44px;
    }

    .zl-mbn-item.zl-mbn-active {
        color: var(--zl-dash-nav-active, var(--zl-dash-brand, #1769e8));
    }

    .zl-mbn-icon {
        font-size: 20px;
        line-height: 1;
        display: block;
    }

    .zl-mbn-label {
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 56px;
        text-align: center;
    }

    /* Active indicator dot above icon */
    .zl-mbn-item.zl-mbn-active::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        background: var(--zl-dash-nav-active, var(--zl-dash-brand, #1769e8));
        border-radius: 0 0 3px 3px;
    }

    /* Unread badge */
    .zl-mbn-badge {
        position: absolute;
        top: 5px;
        right: calc(50% - 18px);
        background: #ef4444;
        color: var(--zl-dash-white);
        font-size: 12px;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        border: 1.5px solid var(--zl-dash-white);
    }

    /* Primary create action — visually distinct from navigation. */
    .zl-mbn-post-cta {
        color: var(--zl-dash-white) !important;
        background: transparent;
        border-radius: 0;
        flex: 0 0 68px;
    }
    .zl-mbn-post-cta .zl-mbn-icon {
        font-size: 22px;
        font-weight: 300;
    }
    .zl-mbn-post-cta:active {
        background: var(--zl-dash-brand-dark);
    }

    /* Active pill: highlighted tab */
    .zl-mbn-item.zl-mbn-active:not(.zl-mbn-post-cta) .zl-mbn-icon {
        filter: drop-shadow(0 0 0px var(--zl-dash-brand));
    }}

.zl-mobile-more-backdrop,
.zl-mobile-more-menu { display:none; }

@media (max-width: 768px) {

    .zl-mobile-more-backdrop {
        position:fixed;
        inset:0 0 calc(58px + env(safe-area-inset-bottom,0px)) 0;
        background:rgba(15,23,42,.72);
        z-index:1090;
    }

    /* The approved mockup treats More as a full app surface above the
     * persistent bottom navigation: dark navy header + one white menu card. */
    .zl-mobile-more-menu {
        position:fixed;
        inset:0 0 calc(58px + env(safe-area-inset-bottom,0px)) 0;
        z-index:1110;
        display:block;
        overflow:auto;
        -webkit-overflow-scrolling:touch;
        background:#10233a;
        color:var(--zl-dash-white);
        transform:translateY(8px);
        opacity:0;
        transition:transform .18s ease, opacity .18s ease;
        padding:0 10px 12px;
    }
    .zl-mobile-more-menu.zl-mobile-more-open {
        transform:translateY(0);
        opacity:1;
    }

    .zl-mobile-more-header {
        height:58px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 5px;
        font-size:17px;
        font-weight:700;
    }
    .zl-mobile-more-header button {
        width:36px;
        height:36px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:0;
        background:transparent;
        color:var(--zl-dash-white);
        font-size:27px;
        line-height:1;
        font-weight:300;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .zl-mobile-more-card {
        background:var(--zl-dash-white);
        color:#17304d;
        border-radius:14px;
        padding:10px 14px;
        box-shadow:0 3px 12px rgba(0,0,0,.16);
    }
    .zl-mobile-more-grid {
        display:flex;
        flex-direction:column;
    }
    .zl-mobile-more-item {
        position:relative;
        display:flex;
        align-items:center;
        min-height:52px;
        padding:8px 4px;
        border:0;
        border-radius:10px;
        color:#17304d;
        text-decoration:none;
        font-size:15px;
        font-weight:500;
        background:transparent;
        -webkit-tap-highlight-color:transparent;
    }
    .zl-mobile-more-item:active { background:#f5f8fc; }
    .zl-mobile-more-icon {
        width:36px;
        height:36px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        background:#f1f6ff;
        color:var(--zl-dash-brand-dark);
        font-size:17px;
        flex:0 0 36px;
        margin-right:16px;
    }
    .zl-mobile-more-icon.dashicons::before { font-size:17px; width:17px; height:17px; line-height:17px; }
    .zl-mobile-more-item b {
        margin-left:auto;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:12px;
        line-height:1;
        font-weight:700;
    }
    .zl-mobile-more-new {
        margin-left:10px !important;
        min-width:0;
        height:18px;
        padding:0 7px;
        border-radius:9px;
        background:var(--zl-dash-brand-dark);
        color:var(--zl-dash-white);
        letter-spacing:.05em;
    }
    .zl-mobile-more-badge {
        background:#ef4444;
        color:var(--zl-dash-white);
        min-width:22px;
        height:22px;
        padding:0;
        border-radius:50%;
        font-size:13px !important;
    }

    .zl-mobile-more-menu[hidden],
    .zl-mobile-more-backdrop[hidden] { display:none; }

    body.zl-mobile-more-is-open { overflow:hidden; }

    /* Give the five mobile destinations equal visual weight. */
    .zl-mbn-item { min-width:0; }
    .zl-mbn-post-cta { flex:1; }
    .zl-mbn-post-cta .zl-mbn-icon {
        width:40px;
        height:40px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        background:var(--zl-dash-brand);
        font-size:23px;
        line-height:1;
    }
    .zl-mbn-more-trigger {
        border:0;
        font-family:inherit;
        cursor:pointer;
        background:transparent;
    }
    /* More is an overflow control: keep the bottom bar visually quiet. */
    .zl-mbn-more-trigger .zl-mbn-label {
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
        border:0;
    }
    .zl-mbn-more-trigger .zl-mbn-icon {
        font-size:24px;
        line-height:1;
    }}

@media (max-width:767px) {
    .zl-mbn-label { font-size:12px; }
    .zl-mobile-more-item { font-size:16.5px; }}

/* Contrast: lift the lightest greys to an accessible slate. */
.zl-mbn-item { color:#5b6878; }
.zl-mbn-item.zl-mbn-active { color:var(--zl-dash-nav-active, var(--zl-dash-brand, #1769e8)); }

@media (max-width:767px) {
    .zl-mobile-bottom-nav { overflow:visible; }
    /* Show the "More" label like the other tabs. */
    .zl-mbn-more-trigger .zl-mbn-label {
        position:static; width:auto; height:auto; margin:0; clip:auto; overflow:visible; white-space:normal;
    }
    .zl-mbn-more-trigger .zl-mbn-icon { font-size:22px; }
    .zl-mbn-more-trigger[aria-expanded="true"] { color:var(--zl-dash-brand); }
    /* Raised centre + button, as in the approved mockup. */
    .zl-mbn-post-cta { overflow:visible; }
    .zl-mbn-post-cta .zl-mbn-icon {
        width:50px; height:50px; margin-top:-22px; font-size:28px;
        background:var(--zl-dash-brand); color:var(--zl-dash-on-brand); border:4px solid var(--zl-dash-white);
        box-shadow:0 4px 12px rgba(var(--zl-dash-brand-rgb), .35);
    }}

/* The "More" tab is icon-only now. Its label is an empty placeholder; give it
   the same height as the other tabs' 12px labels so the ⋮ icon stays on the
   same line as their icons. */
@media (max-width:767px) {
    .zl-mbn-more-trigger .zl-mbn-label { min-height: 12px; }}


/* ── Mobile "+" button: no tab background, no white ring ────────────────
   The blue circle is the button; the tab behind it must be transparent even
   if a theme paints it (Aura used amber), and the circle has no white border. */
@media (max-width: 767px) {
    .zl-mobile-bottom-nav .zl-mbn-post-cta,
    .zl-mobile-bottom-nav .zl-mbn-post-cta:hover,
    .zl-mobile-bottom-nav .zl-mbn-post-cta:focus,
    .zl-mobile-bottom-nav .zl-mbn-post-cta:active { background: transparent !important; }
    .zl-mobile-bottom-nav .zl-mbn-post-cta .zl-mbn-icon { border: 0 !important; }}


/* Space so content isn't hidden behind the fixed bottom nav (was in the theme). */
@media (max-width: 768px) {
    body.zl-has-mobile-nav { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
    .zl-mobile-bottom-nav { z-index: 10100; }}


/* ── Mobile "+" button: smaller, black, and inside the bar ──────────────
   No longer raised above the nav: it sits on the same line as the other tabs. */
@media (max-width: 767px) {
    .zl-mobile-bottom-nav .zl-mbn-post-cta { overflow: visible; justify-content: center; }
    .zl-mobile-bottom-nav .zl-mbn-post-cta .zl-mbn-icon {
        width: 36px; height: 36px;
        margin: 0 !important;
        font-size: 22px; font-weight: 400; line-height: 1;
        background: #111827 !important;
        color: #fff;
        border: 0 !important;
        box-shadow: none;
    }
    .zl-mobile-bottom-nav .zl-mbn-post-cta:active .zl-mbn-icon { background: #000 !important; }}