/* Slim Mobile Nav — Public Styles
   All visual variables are set inline via build_dynamic_css().
   Theme integration vars are scoped to #smn-bar directly.
   This file handles structure, layout, and animations only.
*/

/* ─── Bar ─────────────────────────────────────────────────────────────── */
#smn-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: var(--smn-height, 64px);
    background: var(--smn-bg, #fff);
    border-top: 1px solid var(--smn-border, #e8e8e8);
    border-radius: var(--smn-radius, 0);
    box-shadow: var(--smn-shadow, 0 -1px 20px rgba(0,0,0,.09));

    /* Safe area (iPhone notch) */
    padding-bottom: env(safe-area-inset-bottom);

    /* Slide-up entrance */
    animation: smn-slide-up .3s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes smn-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ─── List ────────────────────────────────────────────────────────────── */
#smn-bar .smn-list {
    display: flex;
    align-items: stretch;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ─── Item ────────────────────────────────────────────────────────────── */
#smn-bar .smn-item {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#smn-bar .smn-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 8px 4px;
    border-radius: 10px;
    transition: background .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

#smn-bar .smn-item a:active {
    transform: scale(.92);
}

/* ─── Icon ────────────────────────────────────────────────────────────── */
#smn-bar .smn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--smn-ic, #666);
    transition: color .2s ease, transform .2s ease;
    line-height: 1;
}

#smn-bar .smn-icon svg,
#smn-bar .smn-icon i {
    width: var(--smn-icon-size, 22px);
    height: var(--smn-icon-size, 22px);
    font-size: var(--smn-icon-size, 22px);
    display: block;
    flex-shrink: 0;
}

/* Default letter icon */
#smn-bar .smn-default-icon {
    width: var(--smn-icon-size, 22px);
    height: var(--smn-icon-size, 22px);
    border-radius: 50%;
    background: currentColor;
    color: var(--smn-ic, #666);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--smn-icon-size, 22px) * 0.5);
    font-weight: 700;
}

/* ─── Label ───────────────────────────────────────────────────────────── */
#smn-bar .smn-label {
    font-size: var(--smn-label-size, 10px);
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--smn-lc, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: color .2s ease;
    line-height: 1.2;
}

/* ─── Screen-reader only ──────────────────────────────────────────────── */
#smn-bar .smn-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ─── Active state ────────────────────────────────────────────────────── */
#smn-bar .smn-item.smn-active .smn-icon {
    color: var(--smn-ic-active, #000);
    transform: translateY(-1px);
}

#smn-bar .smn-item.smn-active .smn-label {
    color: var(--smn-lc-active, #000);
    font-weight: 600;
}

/* Icon bounce on active */
#smn-bar .smn-item.smn-active .smn-icon i,
#smn-bar .smn-item.smn-active .smn-icon svg {
    animation: smn-bounce .35s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes smn-bounce {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.2) translateY(-2px); }
    70%  { transform: scale(.95); }
    100% { transform: scale(1); }
}

/* ─── Dashicons support ───────────────────────────────────────────────── */
#smn-bar .smn-icon .dashicons {
    font-size: var(--smn-icon-size, 22px);
    width: var(--smn-icon-size, 22px);
    height: var(--smn-icon-size, 22px);
}

/* ─── Favicon / image icon ────────────────────────────────────────────── */
#smn-bar .smn-icon .smn-favicon-img {
    width: var(--smn-icon-size, 22px);
    height: var(--smn-icon-size, 22px);
    object-fit: contain;
    border-radius: 4px;
    display: block;
    flex-shrink: 0;
    /* Inherit the active colour tint via mix-blend-mode when needed */
    transition: opacity .2s ease, transform .2s ease;
}

/* Slight dim on inactive items with image icons so active stands out */
#smn-bar .smn-item:not(.smn-active) .smn-favicon-img {
    opacity: 0.65;
}
#smn-bar .smn-item.smn-active .smn-favicon-img {
    opacity: 1;
}