/**
 * ClientPilot floating "Support & Website" navigation popup.
 *
 * Self-contained (brand-var fallbacks) so it renders correctly on every plugin
 * page — auth pages, dashboards, the Help Center, and the portal hub. Opens on
 * CLICK (toggled via .is-open by site-nav.js) so there is no fragile hover gap
 * and it works on touch devices.
 *
 * @package ClientPilot
 * @since   3.5.0
 */

.cp-site-nav-floating {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100000;
    display: inline-block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.cp-site-nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 30px;
    color: var(--cp-text-muted, #64748b);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    user-select: none;
}

.cp-site-nav-dropdown-trigger:hover,
.cp-site-nav-floating.is-open .cp-site-nav-dropdown-trigger {
    color: var(--cp-primary, #6F2DFF);
    border-color: var(--cp-primary, #6F2DFF);
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(111, 45, 255, 0.12);
}

/* Arrow rotates when open */
.cp-site-nav-dropdown-trigger .cp-site-nav-caret {
    font-size: 10px;
    width: 10px;
    height: 10px;
    line-height: 14px;
    margin-left: 2px;
    transition: transform .2s ease;
}
.cp-site-nav-floating.is-open .cp-site-nav-caret {
    transform: rotate(180deg);
}

.cp-site-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #ffffff;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 6px;
    min-width: 220px;
    display: none;
    flex-direction: column;
    gap: 2px;
}

/* A transparent bridge across the 8px gap so hover-to-menu never drops
   (belt-and-suspenders alongside the click toggle). */
.cp-site-nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
}

.cp-site-nav-floating.is-open .cp-site-nav-dropdown-menu {
    display: flex;
    animation: cpNavFadeInUp 0.18s ease forwards;
}

.cp-site-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--cp-text-muted, #64748b) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: background-color .2s ease, color .2s ease;
    white-space: nowrap;
}

.cp-site-nav-item:hover {
    background-color: var(--cp-gray-light, #f4f5fa);
    color: var(--cp-primary, #6F2DFF) !important;
}

.cp-site-nav-item-primary {
    color: var(--cp-primary, #6F2DFF) !important;
    font-weight: 600;
}

.cp-site-nav-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    flex-shrink: 0;
}

@keyframes cpNavFadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .cp-site-nav-floating { top: 14px; right: 14px; }
    .cp-site-nav-dropdown-trigger { padding: 6px 12px; font-size: 12px; }
    .cp-site-nav-dropdown-menu { min-width: 200px; }
}

/* On the React dashboards the app has its own top bar with a user menu in the
   top-right corner — reserve space so the fixed Support popup does not cover it. */
body.cp-body-client-dashboard .cp-topbar,
body.cp-body-manager-dashboard .cp-topbar {
    padding-right: 205px;
}
@media (max-width: 782px) {
    body.cp-body-client-dashboard .cp-topbar,
    body.cp-body-manager-dashboard .cp-topbar {
        padding-right: 150px;
    }
}

/* On phones the full "Support & Website" pill is wide enough to sit on top of
   the dashboard's own header controls, so collapse it to just the globe icon.
   The dropdown itself is unchanged — only the trigger label is hidden. */
@media (max-width: 600px) {
    .cp-site-nav-trigger-label {
        display: none;
    }
    .cp-site-nav-dropdown-trigger {
        padding: 8px;
        gap: 2px;
    }
    /* The trigger is now icon-sized, so the dashboards need far less
       reserved space in their top bar. */
    body.cp-body-client-dashboard .cp-topbar,
    body.cp-body-manager-dashboard .cp-topbar {
        padding-right: 64px;
    }
    /* Keep the menu on-screen rather than overflowing the right edge. */
    .cp-site-nav-dropdown-menu {
        min-width: 220px;
        max-width: calc(100vw - 28px);
    }
}