/* ==========================================================================
   LAYOUT (Header, Footer, Navigation, Mobile Menu)
   ========================================================================== */

/* --- HEADER --- */
.m3-top-app-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 24px; background-color: rgba(253, 252, 255, 0.9);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    position: sticky; top: 0; z-index: 1000;
    border-bottom: 1px solid var(--md-sys-color-surface-container-high);
    transition: background-color 0.4s var(--md-sys-motion-easing-emphasized);
}
body.dark-mode .m3-top-app-bar { background-color: rgba(17, 19, 24, 0.9); }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none !important; border-radius: 16px; padding: 4px; transition: transform 0.2s; flex-shrink: 0 !important; }
.brand:active { transform: scale(0.95); }
.brand-logo { height: 44px !important; width: auto !important; max-width: 200px !important; object-fit: contain; } 
.brand-name { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: var(--md-sys-color-primary); transition: color 0.4s ease; }
body.dark-mode .brand-name { color: var(--md-sys-color-on-surface); }
body.dark-mode .brand-logo { filter: drop-shadow(0px 0px 4px rgba(255,255,255,0.4)); }

.header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0 !important; }
.header-actions a, .header-controls a { text-decoration: none !important; border: none !important; box-shadow: none !important; outline: none !important; color: inherit; }
.header-controls { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
/* --- NAVIGATION LINKS --- */
.nav-links { display: flex; gap: 8px; align-items: center; }
.nav-links a { 
    text-decoration: none !important; color: var(--md-sys-color-on-surface); 
    font-weight: 500; font-size: 15px; padding: 10px 18px; 
    border-radius: var(--md-sys-shape-corner-full);
    transition: all 0.2s var(--md-sys-motion-easing-emphasized); 
    white-space: nowrap !important;
}
.nav-links a:hover { background-color: var(--md-sys-color-surface-container-high); }
.nav-links a.active { background-color: var(--md-sys-color-primary); color: #ffffff !important; font-weight: 600; }
.nav-links a.active:hover { color: #ffffff !important; }

/* --- FOOTER --- */
.global-footer { background-color: var(--md-sys-color-surface-container-low); padding: 48px 24px 24px; margin-top: 64px; border-top: 1px solid var(--md-sys-color-surface-container-high);}
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; }
.footer-section h3 { font-size: 16px; margin-bottom: 16px; color: var(--md-sys-color-primary); }
.footer-section a { color: var(--md-sys-color-on-surface); text-decoration: none; font-size: 14px; margin-bottom: 10px; display: block; opacity: 0.7; transition: opacity 0.2s; }
.footer-section a:hover { opacity: 1; color: var(--md-sys-color-primary); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--md-sys-color-surface-container-high); padding-top: 24px; margin-top: 48px; font-size: 13px; opacity: 0.6; }

/* --- MOBILE QUERIES --- */
.mobile-menu-btn { display: none; background: transparent; border: none; color: var(--md-sys-color-on-surface); cursor: pointer; padding: 8px; border-radius: 50%; transition: background-color 0.2s; }
.mobile-menu-btn:active { background-color: var(--md-sys-color-surface-container-high); }

@media (max-width: 768px) {
    .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
    .brand-name { font-size: 18px; }
    .m3-top-app-bar { padding: 12px 16px; }
    .header-actions { gap: 8px; }
    
    .nav-links {
        position: absolute; top: 100%; left: 16px; right: 16px;
        background-color: var(--md-sys-color-surface-container);
        border: 1px solid var(--md-sys-color-surface-container-high);
        border-radius: 24px; flex-direction: column; padding: 0; gap: 4px;
        max-height: 0; overflow: hidden; opacity: 0;
        transition: all 0.4s var(--md-sys-motion-easing-emphasized);
        box-shadow: var(--md-sys-elevation-2);
        transform: translateY(-10px); pointer-events: none;
    }
    .nav-links.open { max-height: 400px; padding: 16px; opacity: 1; transform: translateY(12px); pointer-events: auto; }
    .nav-links a { width: 100%; text-align: center; padding: 14px; border-radius: 16px; }
    .floating-ai-btn { bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 18px; }
    .footer-bottom { flex-direction: column; text-align: center; justify-content: center; }
}