/* Loaded after Vite so nav / free tools / theme stay above hero without rebuilding app.css */

/* Hide main nav, Free Tools rail, and theme toggle until home intro animation sets body.bang-explode-ready
   (Other pages get that class from layouts.app before paint, so chrome shows immediately.) */
html:not(.bang-explode-ready) .hero-menu-animated,
body:not(.bang-explode-ready) .hero-menu-animated {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0) !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 20px white) brightness(2) !important;
}

html.bang-explode-ready .hero-menu-animated,
body.bang-explode-ready .hero-menu-animated {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
    filter: drop-shadow(0 0 0px white) brightness(1) !important;
}

/* Requested layer order (top to bottom):
   1) Free tool frame/panel when open
   2) Main menu
   3) Free tools trigger/menu
   4) Hero
   5) Rest of page content */
.site-chrome-tool-panel-layer {
    z-index: 2147483647 !important;
}

body > header {
    position: relative !important;
    z-index: 2147483646 !important;
}

body > header .fixed,
body > header #mobile-menu {
    z-index: 2147483646 !important;
}

.site-chrome-floating {
    z-index: 2147483645 !important;
}

.site-hero-region {
    position: relative;
    z-index: 2147483644;
}

/* Sticky footer — body is a flex column that fills the viewport; main grows to push footer down */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

body > main {
    flex: 1 0 auto !important;
}

/* Free tools button rail — thin always-visible scrollbar */
.free-tools-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(156,163,175,0.5) transparent;
}
.free-tools-scroll::-webkit-scrollbar {
    width: 3px;
}
.free-tools-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.free-tools-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(156,163,175,0.5);
    border-radius: 99px;
}
.free-tools-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(99,102,241,0.7);
}