/* ============================================ 
   HUB LOGO SYSTEM - SINGLE SOURCE OF TRUTH 
   All Hub pages must import this stylesheet 
   ============================================ */ 

:root { 
    /* Logo Dimensions - Desktop */ 
    --logo-height-desktop: 48px; 
    --logo-width-desktop: auto; 
    
    /* Logo Dimensions - Mobile */ 
    --logo-height-mobile: 42px; 
    --logo-width-mobile: auto; 
    
    /* Logo Positioning */ 
    --logo-margin-right: 0; 
    --logo-margin-left: 0; 
    
    /* Mobile Icon (3D cube) */ 
    --mobile-icon-size: 48px; 
} 

/* ============================================ 
   PRIMARY NAVIGATION LOGO (Level 1) 
   ============================================ */ 

.primary-nav .nav-logo { 
    display: flex; 
    align-items: center; 
    text-decoration: none; 
    flex-shrink: 0; 
    height: 100%; 
    padding: 0; 
    margin-right: var(--logo-margin-right); 
} 

.primary-nav .nav-logo img { 
    display: block; 
    height: var(--logo-height-desktop); 
    width: var(--logo-width-desktop); 
    object-fit: contain; 
    object-position: left center; 
} 

/* Desktop Logo Visibility */ 
.nav-logo .desktop-logo { 
    display: block; 
} 

.nav-logo .mobile-logo { 
    display: none; 
} 

/* Mobile Logo Switch */ 
@media (max-width: 1024px) { 
    .nav-logo .desktop-logo { 
        display: none !important; 
    } 
    
    .nav-logo .mobile-logo { 
        display: block !important; 
        height: var(--mobile-icon-size); 
        width: var(--mobile-icon-size); 
    } 
} 

@media (max-width: 768px) { 
    .primary-nav .nav-logo img { 
        height: var(--logo-height-mobile); 
    } 
    
    .nav-logo .mobile-logo { 
        height: 28px; 
        width: 28px; 
    } 
} 

/* ============================================ 
   MOBILE DRAWER LOGO 
   ============================================ */ 

.mobile-drawer-header .mobile-drawer-logo { 
    display: block; 
    height: 40px; 
    width: auto; 
    max-width: 180px; 
    object-fit: contain; 
    object-position: left center; 
} 

@media (max-width: 768px) { 
    .mobile-drawer-header .mobile-drawer-logo { 
        height: 36px; 
        max-width: 140px; 
    } 
} 

@media (max-width: 480px) { 
    .mobile-drawer-header .mobile-drawer-logo { 
        height: 32px; 
        max-width: 120px; 
    } 
} 

/* ============================================ 
   FOOTER LOGO 
   ============================================ */ 

.hub-footer .footer-logo img { 
    display: block; 
    width: 100%; 
    max-width: 280px; 
    height: auto; 
    max-height: 64px; 
    object-fit: contain; 
    object-position: left center; 
} 

@media (max-width: 1024px) { 
    .hub-footer .footer-logo img { 
        max-width: 240px; 
        max-height: 56px; 
    } 
} 

@media (max-width: 768px) { 
    .hub-footer .footer-logo img { 
        max-width: 220px; 
        max-height: 48px; 
    } 
} 

@media (max-width: 480px) { 
    .hub-footer .footer-logo img { 
        max-width: 200px; 
        max-height: 44px; 
    } 
} 

/* ============================================ 
   THEME ADAPTATIONS 
   ============================================ */ 

/* Primary Nav: Always dark background, no logo filter needed */ 
.primary-nav .nav-logo img { 
    filter: none; 
} 

/* Footer: Adapts to theme */ 
[data-theme="light"] .hub-footer .footer-logo img { 
    filter: invert(1); 
} 

[data-theme="dark"] .hub-footer .footer-logo img { 
    filter: none; 
} 

/* Mobile Drawer: Adapts to theme */ 
[data-theme="light"] .mobile-drawer-logo { 
    filter: invert(1); 
} 

[data-theme="dark"] .mobile-drawer-logo { 
    filter: none; 
} 

/* ============================================ 
   LOGO HOVER STATES 
   ============================================ */ 

.nav-logo, 
.footer-logo a { 
    transition: opacity 0.3s ease, transform 0.3s ease; 
} 

.nav-logo:hover, 
.footer-logo a:hover { 
    opacity: 0.8; 
} 

.footer-logo a:hover { 
    transform: translateY(-2px); 
} 

/* ============================================ 
   ACCESSIBILITY 
   ============================================ */ 

.nav-logo:focus-visible, 
.footer-logo a:focus-visible { 
    outline: 2px solid var(--coral); 
    outline-offset: 4px; 
    border-radius: 4px; 
} 

/* ============================================ 
   PRINT STYLES 
   ============================================ */ 

@media print { 
    .primary-nav .nav-logo img, 
    .hub-footer .footer-logo img { 
        filter: none !important; 
        max-height: 40px; 
    } 
}