/**
 * Mini-Console: Mobile bottom navigation
 * Feature: 038-mobile-style-refresh
 *
 * Fixed bottom bar with 5 nav items for mobile (<768px).
 * Hidden on desktop. Safe-area-inset handling for notched devices.
 *
 * Z-index: 1030 (--z-index-fixed) - same level as navbar
 * Touch targets: 44px minimum per WCAG 2.1 AA
 */

/* ==========================================================================
   Mini-Console Container
   ========================================================================== */

.mini-console {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Height: 44px content (minimum touch target) + safe area for notched devices */
    height: calc(44px + env(safe-area-inset-bottom, 0));
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: white;
    border-top: 1px solid var(--bs-border-color, #D2B48C);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    z-index: var(--z-index-fixed, 1030);
}

/* ==========================================================================
   Navigation Items
   ========================================================================== */

.mini-console-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 44px; /* Touch target */
    min-height: 44px; /* Touch target */
    padding: 2px 0;
    color: var(--bs-secondary, #2F4F4F);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
    /* Reset button styles */
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
}

.mini-console-item:hover,
.mini-console-item:focus {
    color: var(--bs-primary, #8B4513);
}

.mini-console-item:active {
    transform: scale(0.95);
}

/* Active state */
.mini-console-item.active {
    color: var(--bs-primary, #8B4513);
}

/* ==========================================================================
   Icons
   ========================================================================== */

.mini-console-item .bi {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 2px;
}

/* ==========================================================================
   Labels
   ========================================================================== */

.mini-console-label {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Responsive: Hide on desktop (>=768px)
   ========================================================================== */

@media (min-width: 768px) {
    .mini-console {
        display: none;
    }
}

/* ==========================================================================
   Content spacing: Reserve space above mini-console on mobile
   ========================================================================== */

@media (max-width: 767.98px) {
    /* Footer needs padding to not be hidden behind mini-console + sticky search
     * Mini-console: 44px, Sticky search: ~50px (when visible on home), buffer: 10px */
    footer,
    footer.container-fluid {
        padding-bottom: calc(110px + env(safe-area-inset-bottom, 0)) !important;
    }

    /* Main content area needs margin at bottom */
    main.container-fluid {
        margin-bottom: calc(54px + env(safe-area-inset-bottom, 0));
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus visible for keyboard navigation */
.mini-console-item:focus-visible {
    outline: 2px solid var(--bs-primary, #8B4513);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .mini-console-item {
        transition: none;
    }

    .mini-console-item:active {
        transform: none;
    }
}