/* 
Theme Name: Turok Sanctum 2026
Description: Custom widescreen/boxed retro archive theme built specifically for Turok Sanctum.
Author: SixtyFour/Trevor
Version: 1.0
*/

/* Core Theme Colors & Variables */
:root {
    --bg-black: #000000;
    --vault-grey: #14161d;
    --menu-dark: #1a1c23;
    --text-light: #eeeeee;
    --turok-red: #cc0000;
}

/* Global Canvas Styling */
html, body {
    background-color: var(--bg-black);
    color: var(--text-light);
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Main Boxed Layout Container (Vault Style) */
#wrapper {
    background-color: var(--vault-grey);
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
    min-height: 100vh;
}

/* Header Area styling */
.site-header {
    padding: 20px;
    text-align: center;
}

/* Custom Navigation Bar Styling */
.turok-nav-bar {
    background-color: var(--menu-dark);
    border-top: 2px solid var(--turok-red);
    border-bottom: 2px solid var(--turok-red);
}

.turok-nav-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.turok-nav-bar li {
    position: relative;
}

.turok-nav-bar a {
    color: var(--text-light);
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.turok-nav-bar a:hover {
    background-color: var(--turok-red);
    color: #ffffff;
}

/* ==========================================================================
   MULTI-TIER NAVIGATION ENGINE: TIER 1 DOWN, TIER 2 RIGHT (TUROK SANCTUM 27)
   ========================================================================== */

/* 1. Global positioning properties for all drop-down panels */
.turok-nav-bar .sub-menu,
.turok-nav-bar ul ul {
    display: none !important;
    position: absolute !important;
    background-color: var(--menu-dark) !important;
    border: 1px solid #333333 !important;
    min-width: 220px !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    list-style: none !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6) !important;
    z-index: 99999 !important;
}

/* 2. Format dropdown list items to stack vertically */
.turok-nav-bar .sub-menu li,
.turok-nav-bar ul ul li {
    display: block !important;
    width: 100% !important;
}

/* 3. Clean formatting for nested anchor links */
.turok-nav-bar .sub-menu a,
.turok-nav-bar ul ul a {
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
    text-transform: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 4. Highlight selection hover styles */
.turok-nav-bar .sub-menu a:hover,
.turok-nav-bar ul ul a:hover {
    background-color: var(--turok-red) !important;
    color: #ffffff !important;
}

/* 5. TIER 1 (CHILD LINKS): Force the first grouping to drop STRAIGHT DOWN */
.turok-nav-bar > ul > li:hover > .sub-menu,
.turok-nav-bar > ul > li:hover > ul {
    display: block !important;
    top: 100% !important; /* Drops flush directly beneath the main navbar links */
    left: 0 !important;
    border-top: 2px solid var(--turok-red) !important;
}

/* 6. TIER 2 (GRANDCHILD LINKS): Force nested sub-options out to the RIGHT SIDE */
.turok-nav-bar .sub-menu li:hover > .sub-menu,
.turok-nav-bar ul ul li:hover > ul {
    display: block !important;
    top: 0 !important;      /* Aligns the top edge level with the current inner row link */
    left: 100% !important;  /* Shoots the box cleanly out to the right side of Tier 1 */
    border-left: 2px solid var(--turok-red) !important;
}

/* 7. Arrow Indicators: Down for main row, Right for nested flyouts */
.turok-nav-bar > ul > .menu-item-has-children > a::after {
    content: " ▼" !important;
    font-size: 0.7rem !important;
    opacity: 0.7 !important;
}
.turok-nav-bar .sub-menu .menu-item-has-children > a::after {
    content: " ▶" !important;
    font-size: 0.65rem !important;
    opacity: 0.7 !important;
    float: right !important;
}



///

/* ==========================================================================
   MASTER THREE-COLUMN ARCHITECTURE ENGINE (TUROK SANCTUM 27)
   ========================================================================== */

/* 1. Reset wrapper back to a standard layout container box */
#wrapper {
    background-color: var(--vault-grey);
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
    min-height: 100vh;
}

/* 2. Turn the main tag (where sidebars live) into the 3-column grid container */
main, 
.widescreen-content-area {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) 260px !important; /* Explicit columns */
    column-gap: 25px !important;
    align-items: start !important;
    padding: 30px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 3. Hard-target and position your three side-by-side elements explicitly inside main */
main > .turok-sidebar-left {
    grid-column: 1 !important; /* Snaps flush to the left wall slot */
}

main > article, 
main > .turok-content-center,
main > h2,
main > div,
main > p {
    grid-column: 2 !important; /* Pins your dynamic single posts and headings down the middle */
}

main > .turok-sidebar-right {
    grid-column: 3 !important; /* Snaps flush to the right wall slot */
}

/* 4. Format sidebar block backgrounds uniformly */
.turok-sidebar-left,
.turok-sidebar-right {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid #222222 !important;
    border-radius: 4px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 5. Mobile responsive collapse rules */
@media (max-width: 1000px) {
    main, .widescreen-content-area {
        grid-template-columns: 1fr !important; /* Drops back to single row layout on small devices */
    }
    main > .turok-sidebar-left,
    main > article,
    main > .turok-sidebar-right,
    main > h2, main > div, main > p {
        grid-column: auto !important;
    }
}