/* assets/styles.css (V6.19 - Desktop Footer Search, Mobile Header Search) */

:root {
    --main-bg-color: #1c2a38;
    --main-border-color: #00bcd4; 
    --header-height: 60px;
    --text-color-on-active: #ffffff; 
    --ancestor-active-bg: #2a5268;   
    --ancestor-active-text: #ddeeff; 
}

body { display: flex; flex-direction: column; font-family: Arial, sans-serif; color: white; background-color: var(--main-bg-color); margin: 0; height: 100vh; overflow: hidden; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }

header { display: flex; align-items: center; background-color: var(--main-bg-color); padding: 0 10px; height: var(--header-height); color: white; border-bottom: 2px solid var(--main-border-color); flex-shrink: 0; box-sizing: border-box; }
header > .menu-toggle { display: none; cursor: pointer; font-size: 1.5em; order: 1; margin-right: 10px; flex-shrink: 0;}
header > span.site-title { font-size: 1.5em; font-weight: bold; white-space: nowrap; order: 2; flex-grow: 1; text-align: center; margin: 0 10px;}
header .site-search.mobile-only-search { display: none; align-items: center; order: 3; margin-left: 10px; flex-shrink: 1; max-width: 150px; min-width: 100px; }
header .site-search.mobile-only-search input[type="search"] { padding: 4px 6px; border: 1px solid #ccc; background-color: white; color: #000000; border-radius: 3px 0 0 3px; font-size: 0.7em; height: 30px; box-sizing: border-box; flex-grow: 1; min-width: 60px; -webkit-appearance: searchfield; appearance: textfield; }
header .site-search.mobile-only-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; display: inline-block !important; opacity: 1 !important; }
header .site-search.mobile-only-search input[type="search"]::placeholder { color: #777777; }
header .site-search.mobile-only-search button[type="submit"] { padding: 4px 6px; background-color: #007bff; color: white; border: 1px solid #006bff; border-left: none; border-radius: 0 3px 3px 0; cursor: pointer; font-size: 0.7em; height: 30px; box-sizing: border-box; flex-shrink: 0; }


/* --- NAV WRAPPER & MAIN MENU COLUMN --- */
.nav-wrapper { 
    display: flex; /* Back to row for desktop children: main-menu-col | nav-container-cols */
    flex-direction: row; 
    height: 100%; 
    flex-shrink: 0; 
    /* border-right from .nav-menu or #nav-container will define edge */
    background-color: var(--main-bg-color); 
}

#main-menu-container.nav-menu { /* This is the first column */
    display: flex; /* New: make it a flex column */
    flex-direction: column; /* New: to stack ul and search footer */
    text-align: center; 
    border-right: 2px solid var(--main-border-color); 
    /* border-bottom: 2px solid var(--main-border-color); /* REMOVE: Not needed if search is below */
    padding: 0; /* Remove padding, apply to children if needed */
    flex-shrink: 0; 
    width: auto; /* Let content like ul#main-menu define width */
    min-width: 180px; 
    box-sizing: border-box; 
}

#main-menu-container.nav-menu > ul#main-menu { /* The list of main menu items */
    list-style: none; 
    padding: 10px 0; /* Add padding here */
    margin: 0; 
    flex-grow: 1; /* New: allow ul to take available space, pushing search down */
    overflow-y: auto; /* New: main menu list itself scrolls */
    width: 100%; /* Take full width of its parent column */
}
/* Individual li items inside main menu */
#main-menu-container.nav-menu > ul#main-menu > li {
    display: block; padding: 10px 15px; cursor: pointer; 
    transition: background-color 0.3s; border-radius: 5px; white-space: nowrap;
    text-align: center; /* Original */
}


/* Desktop search area at the bottom of main menu column */
.nav-column-footer-search.desktop-only-search {
    display: flex; /* Show on desktop by default */
    padding: 10px;
    border-top: 2px solid var(--main-border-color);
    /* background-color: var(--main-bg-color); /* Inherited */
    flex-shrink: 0; /* Don't shrink search footer */
}
.nav-column-footer-search.desktop-only-search .site-search { /* The form inside */
    display: flex; align-items: center; width: 100%; 
}
.nav-column-footer-search.desktop-only-search input[type="search"] {
    flex-grow: 1; margin-right: -1px; padding: 6px 8px; border: 1px solid #bbb; 
    background-color: #ffffff; color: #000000; border-radius: 3px 0 0 3px; 
    font-size: 0.8em; /* Slightly smaller for nav column footer */
    height: 32px; box-sizing: border-box;
    -webkit-appearance: searchfield; appearance: textfield;
}
.nav-column-footer-search.desktop-only-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; display: inline-block !important; opacity: 1 !important; }
.nav-column-footer-search.desktop-only-search input[type="search"]::placeholder { color: #777777; }
.nav-column-footer-search.desktop-only-search button[type="submit"] {
    padding: 6px 10px; background-color: #007bff; color: white; 
    border: 1px solid #006bff; border-left: none; border-radius: 0 3px 3px 0; 
    cursor: pointer; font-size: 0.8em; height: 32px; box-sizing: border-box;
    flex-shrink: 0; 
}

#nav-container { /* Container for DESKTOP sub-menu columns */
    display: flex; /* Children (.nav-menu columns) will be in a row */
    white-space: nowrap;
    /* width: auto; /* It can grow as wide as needed, managed by .nav-wrapper */
    height: 100%;  /* Take full height of its parent .nav-wrapper */
    overflow-x: auto; 
    overflow-y: hidden; 
    flex-grow: 1; /* Allow nav-container to take remaining horizontal space */
    border-right: 2px solid var(--main-border-color); /* Moved from individual .nav-menu */
}
/* Individual sub-menu columns on desktop (inside #nav-container) */
#nav-container .nav-menu {
    text-align: center;
    background-color: var(--main-bg-color); /* Ensure bg color */
    border-right: 2px solid var(--main-border-color);
    border-bottom: none; /* No bottom border for individual columns */
    padding: 10px;
    overflow-y: auto;
    flex-shrink: 0;
    width: max-content;
    min-width: 180px;
    height: 100%; 
    box-sizing: border-box;
}
#nav-container .nav-menu:last-child {
    border-right: none; /* No right border for the very last sub-menu column */
}
/* --- END NAV WRAPPER & DESKTOP SEARCH FOOTER --- */

/* --- General Nav Menu styles from V6.15 --- */
.nav-menu ul { list-style: none; padding: 0; margin: 0; }
.nav-menu li { display: block; padding: 10px 15px; cursor: pointer; transition: background-color 0.3s; border-radius: 5px; white-space: nowrap; }
.nav-menu li:hover { background-color: #00bcd4; color: #ffffff; } 
.active { background-color: var(--main-border-color) !important; color: var(--text-color-on-active) !important; font-weight: bold !important; text-shadow: none !important; }
.ancestor-active { background-color: var(--ancestor-active-bg) !important; color: var(--ancestor-active-text) !important; font-weight: normal !important; text-shadow: none !important; }
.ancestor-active.active { background-color: var(--main-border-color) !important; color: var(--text-color-on-active) !important; font-weight: bold !important; text-shadow: none !important; }

/* --- Content Area & Original Color Classes (Same as V6.15) --- */
.wrapper { display: flex; height: calc(100vh - var(--header-height)); }
.wrapper .content { flex-grow: 1; }
.content { background-color: rgba(40, 55, 71, 0.95); background-image: linear-gradient(rgba(40, 55, 71, 0.5), rgba(0, 195, 255, 0.5)), url("Hexagons.png"); background-size: cover; background-blend-mode: multiply; border-right: 2px solid var(--main-border-color); border-bottom: 2px solid var(--main-border-color); padding: 10px; overflow-y: auto; /* width: 35%; /* Removed for flex-grow */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* max-height: 95%; */ height: 100%; box-sizing: border-box; } 
h1, h2, h3, h4 { margin: 0; padding: 0; } .content li { margin-bottom: 5px; } hr { margin-top: 4px; margin-bottom: 4px; }
.key { font-size: 1.25em; color: #ff6347; font-weight: bold; } .value { font-size: 1em; color: #51f3e3; } .question { font-size: 1.25em; color: #ff6347; } .answer { font-size: 1.25em; font-weight: bold; color: #51f3e3; } .list-key { font-size: 1.25em; color: #49bcff; font-weight: bold; } .list-value { font-size: 1em; color: #51f3e3; } .dino-key { font-size: 1.15em; color: #49bcff; font-weight: bold; } .dino-value { font-size: 1em; color: #51f3e3; } .dealing-damage { color: #0cc00c; } .taking-damage { color: #ff0000; } .cosmic { color: rgb(27, 27, 255); } .elemental { color: yellow; } .ethereal { color: whitesmoke; } .guardian { color: rgb(199, 199, 199); } .lucky { color: gold; } .mythical { color: lightgreen; } .nature { color: rgb(3, 182, 3); } .nightmare { color: rgb(20, 20, 20); text-shadow: 1px 1px 1px grey; } .rage { color: rgb(255, 36, 36); } .resource { color: rgb(168, 190, 212); } .summoner { color: rgb(189, 3, 189); } .unstable { color: orange; } .utility { color: rgb(187, 91, 23); }
.content img { display: block; margin: 10px auto; max-width: 100%; border: 1px solid #ccc; padding: 5px; background-color: #f9f9f9; border-radius: 5px; } div.nav-menu > ul > li { font-size: 16px;} table { width: 100%; border-collapse: collapse; margin-top: 20px; } table th, table td { padding: 10px; border: 1px solid #aaa; } table th { background-color: #337ab7; } .table-container { overflow-x: auto; } a { color: white; } 

/* --- Search Results & Highlight Styles (Same as V6.15) --- */
.content.search-results-page { border-left: 2px solid var(--main-border-color); } .content.search-results-page h2 { margin-top: 0; border-bottom: 1px solid #445; padding-bottom: 10px; color: #eee;} .content.search-results-page .search-query-display { font-size: 1.2em; margin-bottom: 20px; color: #ddd; } .content.search-results-page .search-results-list { list-style: none; padding: 0; } .content.search-results-page .search-results-list li { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px dotted #445; } .content.search-results-page .search-results-list li:last-child { border-bottom: none; } .content.search-results-page .search-results-list h3 { margin-top: 0; margin-bottom: 5px; } .content.search-results-page .search-results-list h3 a { text-decoration: none; color: var(--main-border-color); } .content.search-results-page .search-results-list h3 a:hover { text-decoration: underline; } .content.search-results-page .search-results-list .snippet { color: #ccc; font-size: 0.9em; margin-bottom: 5px; } .content.search-results-page .result-breadcrumb { font-size: 0.85em; color: #bbb; margin-bottom: 8px; margin-top: 5px; } .content.search-results-page p.error { color: #ff6347; font-weight: bold; }
mark.search-highlight { background-color: yellow; color: black; padding: 0.1em 0; border-radius: 2px; font-weight: normal; }

/* --- RESPONSIVE STYLES --- */
@media (max-width: 900px), only screen and (max-width: 900px) and (orientation: landscape) {
    header > .menu-toggle { display: block; } /* Mobile order is already Toggle | Title | Search */
    header .site-search.mobile-only-search { display: flex !important; }
    .nav-column-footer-search.desktop-only-search { display: none !important; } /* Hide desktop search */

    .nav-wrapper { /* Mobile slide-out panel */
        position: absolute; top: var(--header-height); left: -100%; 
        width: 280px; max-width: 80vw; 
        height: calc(100vh - var(--header-height));
        /* background-color is inherited or set */
        transition: left 0.3s ease-in-out; z-index: 1000;
        flex-direction: column; /* Stacks main menu and its accordion children */
        border-right: 2px solid var(--main-border-color); 
        overflow-y: auto; 
    }
    .nav-wrapper.open { left: 0; }
    
    .nav-wrapper > #main-menu-container.nav-menu { /* Main menu in mobile */
        width: 100% !important; border-right: none; 
        border-bottom: 2px solid var(--main-border-color); 
        max-height: none; text-align: left; padding:0;
        flex-grow: 0; /* Does not grow, children accordions will expand below */
        overflow-y: visible; /* Allow accordion to expand beyond its initial height */
    }
    .nav-wrapper > #main-menu-container.nav-menu > ul#main-menu {
        overflow-y: visible; /* Allow main menu ul to also expand with accordions */
        flex-grow: 0; /* Don't let the UL itself try to scroll if content is huge */
    }

    .nav-wrapper > #nav-container-wrapper, /* Hide desktop specific wrappers */
    .nav-wrapper > #nav-container { 
        display: none !important;
    }

    .nav-wrapper ul.mobile-submenu { /* Mobile accordion sub-menus */
        width: 100% !important; border-right: none; 
        /* border-bottom: 1px solid #31465a; /* Items have border */
        max-height: none; text-align: left; 
        list-style: none; padding: 0; margin: 0; box-sizing: border-box;
        background-color: #233546; 
        border-top: 1px dotted rgba(0,0,0,0.3); 
    }
    .nav-wrapper > #main-menu-container.nav-menu > ul > li, 
    .nav-wrapper ul.mobile-submenu > li { 
        padding: 10px 15px; font-size: 0.9em; white-space: normal; 
        border-bottom: 1px solid #31465a; 
        /* JS handles padding-left for indent */
    }
    .nav-wrapper > #main-menu-container.nav-menu > ul > li:last-child, 
    .nav-wrapper ul.mobile-submenu > li:last-child { border-bottom: none; }
    
    .nav-wrapper ul.mobile-submenu > li.active { background-color: var(--main-border-color) !important; color: var(--text-color-on-active) !important; font-weight: bold !important; }
    .nav-wrapper li.main-folder.ancestor-active, 
    .nav-wrapper ul.mobile-submenu > li.ancestor-active { background-color: var(--ancestor-active-bg) !important; color: var(--ancestor-active-text) !important; font-weight: normal !important; }
    .nav-wrapper li.ancestor-active.active { background-color: var(--main-border-color) !important; color: var(--text-color-on-active) !important; font-weight: bold !important; }
    .nav-wrapper li.folder::after { content: '+'; float: right; margin-left: 5px; font-weight: bold; color: #888; transition: transform 0.2s ease-in-out; }
    .nav-wrapper li.folder.active::after, 
    .nav-wrapper li.folder.ancestor-active::after { content: '−'; color: inherit; }
    
    .content { padding: 15px; width: 100%; border-left: none; } 
}

::-webkit-search-cancel-button { display: block !important; opacity: 1 !important; }

@media only screen and (max-width: 900px) and (orientation: landscape) {}
#eggTable { width: 100%; max-width: 1000px; margin: 0 auto; border-collapse: collapse; table-layout: fixed; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #eggTable th, #eggTable td { border: 1px solid #00BCD4; padding: 10px; text-align: center; width: calc(100% / 7); height: 50px; box-sizing: border-box; font-size: 18px; line-height: 20px; } #eggTable th { background-color: #1C2A38; height: auto; position: sticky; top: 0; color: #FFFFFF; font-weight: bold; } #eggTable .cell-0 { background-color: lightcoral; } #eggTable .cell-1 { background-color: lightgreen; }
@media (max-width: 600px) { #eggTable { table-layout: auto; } #eggTable th, #eggTable td { padding: 5px; height: 40px; font-size: 18px; line-height: 20px; } #eggTable thead { display: none; } #eggTable, #eggTable tbody, #eggTable tr, #eggTable td { display: block; width: 100%; } #eggTable tr { margin-bottom: 10px; display: flex; flex-wrap: wrap; } #eggTable th, #eggTable td { width: 100%; } #eggTable td { text-align: left; padding-left: 50%; position: relative; } #eggTable td::before { content: attr(data-label); position: absolute; left: 0; width: calc(50% - 10px); white-space: nowrap; text-align: left; font-weight: bold; color: #000; } }