/* ==========================================================================
   footer.css — Site footer & mobile bottom nav styles
   Requires style.css to be loaded first (uses its CSS variables)
   ========================================================================== */

.site-footer{
    background-color: var(--inverse-surface);
    color: var(--surface);
    padding: 3rem 0;
    margin-top: 3rem;
    border-top: 1px solid rgba(110,123,108,0.1);
}
@media (min-width:768px){ .site-footer{ padding: 4rem 0; } }
.footer-brand-icon{
    width:32px; height:32px; background-color: var(--primary);
    border-radius: var(--radius-lg);
    display:flex; align-items:center; justify-content:center;
}
.footer-heading{
    font-size:12px; font-weight:700; color: var(--primary-fixed-dim);
    text-transform:uppercase; letter-spacing:0.15em;
    margin-bottom:1.5rem;
}
.footer-link{
    color: var(--surface-variant);
    font-size:14px;
    text-decoration:none;
    transition: color .15s ease;
    display:block;
    margin-bottom:.75rem;
}
.footer-link:hover{ color:#fff; }
.social-icon{
    width:40px; height:40px; border-radius: var(--radius-xl);
    background-color: rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    display:flex; align-items:center; justify-content:center;
    color: rgba(255,255,255,0.7);
    text-decoration:none;
    transition: all .2s ease;
}
.social-icon:hover{ background-color: var(--primary); color:#fff; }
.footer-bottom{
    max-width:1440px; margin:0 auto;
    margin-top:4rem; padding-top:2rem;
    border-top:1px solid rgba(255,255,255,0.1);
    display:flex; flex-direction:column; gap:1.5rem;
    align-items:center; justify-content:space-between;
}
@media (min-width:768px){ .footer-bottom{ flex-direction:row; } }

/* ===== Mobile Bottom Nav ===== */
.mobile-bottom-nav{
    display:flex;
    position:fixed; bottom:0; left:0; right:0;
    background-color: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top:1px solid rgba(189,202,186,0.3);
    z-index:1050;
    padding:1rem 1.5rem;
    justify-content:space-between;
    align-items:center;
    box-shadow: 0 -8px 20px rgba(0,0,0,0.05);
}
@media (min-width:768px){ .mobile-bottom-nav{ display:none; } }
.mobile-nav-link{
    display:flex; flex-direction:column; align-items:center; gap:.25rem;
    color: var(--on-surface-variant);
    text-decoration:none;
}
.mobile-nav-link.active{ color: var(--primary); }
.mobile-nav-link span.label{
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:-0.03em;
}