/* ==========================================================
   LAYOUT.CSS — HUB ENGINE V8
   Struttura globale, sticky, z-index, elementi fissi.
   Nessuna estetica → delegata ai temi.
========================================================== */


/* ==========================================================
   WRAPPER
========================================================== */
.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px clamp(14px, 3vw, 40px);
}


/* ==========================================================
   BODY STRUCTURE (tema-aware)
========================================================== */
body {
    background: var(--bg);
    color: var(--text);
}

/* Elementi che NON devono mai sovrascrivere il tema */
.wrapper,
.content,
.page,
main {
    background: transparent;
}


/* ==========================================================
   NAVBAR / TOOLBAR — SOLO STRUTTURA
========================================================== */
nav,
.navbar,
.toolbar {
    position: sticky;
    top: 0;
    z-index: var(--z-navbar);

    background: transparent; /* colore imposto dai temi */
}


/* ==========================================================
   FOOTER — STRUTTURA
========================================================== */
footer,
.mirc-footer {
    padding: 40px 20px;
    text-align: center;
    background: transparent;
}


/* ==========================================================
   Z-INDEX SYSTEM — UNIFICATO HUB ENGINE v8
   (non duplicato da CORE. Qui SOLO strutturale.)
========================================================== */

:root {
    --z-base: 1;
    --z-cards: 20;

    --z-navbar: 1000;
    --z-dropdown: 1200;

    --z-mobile-menu: 1300;
    --z-overlay: 1400;

    --z-popup: 1500;
    --z-theme-switcher: 1600;

    --z-floating-sigil: 1700;
    --z-back-to-top: 1800;
}

/* Dropdown menu */
nav .dropdown-menu,
nav .dropdown {
    z-index: var(--z-dropdown);
}

/* Popups */
.mirc-popup,
.popup,
.modal {
    z-index: var(--z-popup);
}

/* Mobile menu */
#mobile-menu {
    z-index: var(--z-mobile-menu);
}

/* Theme switcher */
.theme-switcher,
#theme-switcher,
.theme-mobile-panel {
    z-index: var(--z-theme-switcher);
}

/* Floating sigil */
#floating-sigil {
    z-index: var(--z-floating-sigil);
}

/* To top button */
#toTopBtn {
    z-index: var(--z-back-to-top);
}


/* ==========================================================
   FLOATING SIGIL — Struttura
========================================================== */
#floating-sigil {
    position: fixed;
    top: 50%;
    right: 28px;

    width: 300px;
    height: 300px;

    transform: translateY(-50%);
    pointer-events: none;
}

@media (max-width: 980px) {
    #floating-sigil {
        width: 200px;
        height: 200px;
        right: 10px;
    }
}


/* ==========================================================
   THEME SWITCHER BUTTONS — struttura
========================================================== */
.theme-switcher .theme-btn,
.theme-mobile-panel .theme-btn {
    border-radius: 50%;
    overflow: hidden;
}


/* ==========================================================
   GLOBAL CLEANUP
========================================================== */
nav::before, nav::after,
footer::before, footer::after {
    display: none !important;
}


/* ==========================================================
   SCROLL TO TOP BUTTON
========================================================== */
#toTopBtn.to-top-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 1px solid var(--border);

    background: var(--panel);
    backdrop-filter: blur(8px);

    color: var(--accent);
    font-size: 1.7rem;
    font-weight: bold;

    cursor: pointer;
    opacity: 0;
    visibility: hidden;

    transition: .25s ease;
}

#toTopBtn.to-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

#toTopBtn.to-top-btn:hover {
    transform: translateY(-4px) scale(1.08);
    border-color: var(--accent);
    box-shadow: 0 0 18px var(--accent);
}