/*
Theme Name: Pasimite V2 (Wider & Fixed)
Author: Custom
Description: 1200px wide, 1/6-5/6 layout, non-overlapping header.
Version: 2.1
*/

/* --- CORE --- */
/* Replace in body block */
body {
    /* Modern System Stack: fast, clean, native feel */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px; /* Increased from 13px for readability */
    line-height: 1.6; /* Better breathing room for text */
    color: #333; /* Softer than pure black */
    background-color: #bebebe;
}
a { color: #429e00; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
ul { list-style: none; padding: 0; margin: 0; }

/* --- CONTAINER (WIDER) --- */
.container {
    width: 1200px; /* Increased from 960px */
    max-width: 96%; /* Responsive fallback */
    margin: 0 auto;
    background: #fff;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.05); /* Much softer shadow */
    border-radius: 0 0 8px 8px; /* Round the bottom corners */
}

.clear { clear: both; }

/* --- HEADER (Flexbox Layout for Vertical Centering) --- */
#header {
    display: flex;             /* Turn on Flexbox */
    align-items: center;       /* Center items vertically */
    justify-content: space-between; /* Push logo left, video right */
    padding: 15px 0;
    background: #fff;
    overflow: hidden;
    min-height: 100px; /* Optional: Guarantees some breathing room */
}

/* 1. Logo (Left) */
#logo {
    margin: 0 0 0 20px; /* Clean margins */
    flex-shrink: 0;     /* Prevent logo from squishing if video is huge */
}

/* --- HORIZONTAL TOP MENU (LEFT ALIGNED) --- */
#top-menu-bar {
    background: #282828;
    border-top: 1px solid #5f9936;
    border-bottom: 1px solid #244010;
    min-height: 40px;
    clear: both; /* Ensures it stays below floated logo */
    width: 100%;
}

.main-navigation ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Forces items to the LEFT */
    margin-left: 0;
    padding-left: 0;
}

.main-navigation li {
    border-right: 1px solid #444;
    position: relative;
    list-style: none;
}

.main-navigation a {
    display: block;
    padding: 12px 20px; /* Larger click area */
    color: #cfdbe5;
    font-weight: bold;
    text-decoration: none;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    background: #37591f;
    color: #fff;
}

/* Submenus */
.main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #477328;
    width: 220px;
    z-index: 999;
    border-top: 1px solid #5f9936;
}
.main-navigation li:hover > ul { display: block; }
.main-navigation ul li {
    float: none;
    border-right: none;
    border-bottom: 1px solid #244010;
}
.main-navigation ul li a {
    padding: 10px 15px;
    font-weight: normal;
    color: #eee;
}
.main-navigation ul li a:hover { background: #37591f; }


/* --- LAYOUT: 1/6 LEFT | 5/6 RIGHT --- */
#main-wrap {
    display: flex;
    padding: 30px;
    box-sizing: border-box;
}

#sidebar-left {
    width: 200px; /* Fixed width for 1/6 feel on 1200px */
    flex-shrink: 0;
    padding-right: 20px;
    border-right: 1px dotted #ccc;
    margin-right: 20px;
}

#content-right {
    flex-grow: 1;
    width: calc(100% - 240px); /* Remaining width */
}

/* --- CONTENT STYLING --- */
/* Replace .hentry styling */
.hentry {
    background: #fff;
    padding: 30px; /* Internal spacing */
    margin-bottom: 30px;
    border-radius: 8px; /* Soft corners */
    border: 1px solid #eaeaea; /* Subtle border instead of dotted lines */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Very subtle lift */
    transition: transform 0.2s ease;
}

/* Optional: Slight lift on hover */
.hentry:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
h2.post-title {
    font-size: 1.5em;
    margin: 0 0 10px 0;
    font-weight: normal;
}
h2.post-title a { color: #000; }
h2.post-title a:hover { color: #429e00; }

.post-meta {
    color: #777;
    font-size: 0.85em;
    margin-bottom: 15px;
    border-left: 3px solid #429e00;
    padding-left: 10px;
}

.pagination { margin: 30px 0; text-align: center; }
.page-numbers {
    padding: 8px 12px;
    border: 1px solid #ddd;
    margin: 0 3px;
    color: #333;
    text-decoration: none;
}
.page-numbers.current, .page-numbers:hover {
    background: #429e00;
    color: #fff;
    border-color: #429e00;
}

/* --- FOOTER --- */
#footer {
    background: #f2f2f2;
    border-top: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    font-size: 11px;
    color: #666;
    margin-top: 20px;
}

/* --- SIDEBAR MENU: STABLE VERSION (No Jumps) --- */

/* 1. Reset Box Model (Critical for preventing expansion) */
#sidebar-left .widget,
#sidebar-left .widget * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* 2. Module Box Styling */
#sidebar-left .widget {
    border: none; /* Remove hard borders */
    background: transparent; /* Blend with background or keep white if preferred */
    box-shadow: none;
}

/* 3. The Header (Green Text on Grey Bar) */
#sidebar-left .widget h3 {
    background: #e9e9e9;
    color: #429e00;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid #d5d5d5;
    text-shadow: 1px 1px 0 #fff;
}

/* 4. The Menu List */
#sidebar-left .menu, 
#sidebar-left .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* 5. Menu Items (Container) */
#sidebar-left .menu li {
    position: relative; /* Anchor for flyout */
    border-bottom: 1px dotted #ccc;
    margin: 0;
    width: 100%;
}
#sidebar-left .menu li:last-child {
    border-bottom: none;
}

/* 6. Links Styling (The Clickable Area) */
#sidebar-left .menu a {
    display: block;
    width: 100%;
    padding: 8px 10px 8px 25px; /* Fixed padding */
    text-decoration: none;
    color: #555;
    font-size: 12px;
    background-color: #fff;
    position: relative;
    /* REMOVED: font-weight transition to stop jumping */
    transition: color 0.2s, background-color 0.2s;
}

/* 7. Hover State (COLOR ONLY - NO BOLD) */
#sidebar-left .menu a:hover {
    color: #429e00;
    background-color: #f9f9f9;
}

/* 8. Active/Current Item (COLOR ONLY - NO BOLD) */
#sidebar-left .menu li.current-menu-item > a,
#sidebar-left .menu li.current-menu-ancestor > a {
    color: #429e00;
    background-color: #f9f9f9;
}

/* 9. Arrow Icon (Main Items) */
#sidebar-left .menu a::before {
    content: "›";
    color: #999;
    font-weight: bold;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 5px;
}
#sidebar-left .menu a:hover::before,
#sidebar-left .menu li.current-menu-item > a::before {
    color: #429e00;
}

/* --- THE FLYOUT SUB-MENU --- */

/* 10. Flyout Container */
#sidebar-left .menu .sub-menu {
    display: none;
    position: absolute;
    left: 100%; 
    top: -1px; /* Align border-to-border */
    width: 220px; /* Fixed width */
    background: #fff;
    border: 1px solid #c0c0c0;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    z-index: 99999;
}

/* Show on Hover */
#sidebar-left .menu li:hover > .sub-menu {
    display: block;
}

/* 11. Sub-menu Items */
#sidebar-left .menu .sub-menu li {
    border-bottom: 1px solid #eee;
    border-left: none; /* No extra borders */
    margin: 0;
}
#sidebar-left .menu .sub-menu li:last-child { 
    border-bottom: none; 
}

/* 12. Sub-menu Links */
#sidebar-left .menu .sub-menu a {
    padding-left: 30px; /* Ensure text clears the arrow */
    font-size: 11px;
    background: #fff; /* Ensure solid background */
}

/* 13. Sub-menu Arrow Adjustment */
#sidebar-left .menu .sub-menu a::before {
    left: 12px; /* Indent arrow slightly */
}

/* 2. Video Area (Right) */
#header-right {
    width: 300px;
    padding-right: 20px;
    /* Removed floats and margins because Flexbox handles alignment now */
}

/* 3. Ensure video stays responsive */
#header-right video, 
#header-right iframe, 
#header-right .wp-video-shortcode {
    max-width: 100%;
    height: auto;
    display: block; /* Removes tiny bottom gap */
    border-radius: 4px;
}

/* --- DYNAMIC DOCUMENT LIST --- */
.pasimite-doc-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px dotted #ccc;
}

.pasimite-doc-list li {
    border-bottom: 1px dotted #ccc;
    position: relative;
}

/* Flex Container for the Link */
.pasimite-doc-list a {
    display: flex; 
    align-items: flex-start; /* Aligns icon with top of text */
    padding: 10px;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}

.pasimite-doc-list a:hover {
    background-color: #f9f9f9;
    color: #000;
}

/* --- THE ICON (Fixed Width) --- */
.pasimite-doc-list .file-icon {
    display: inline-block;
    width: 36px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    border-radius: 3px;
    margin-right: 12px;
    text-transform: uppercase;
    flex-shrink: 0; /* Prevents squishing */
    margin-top: 2px; /* Visual alignment with first line of text */
}

/* --- TEXT WRAPPER (Stacks Title & Desc) --- */
.pasimite-doc-list .file-text-wrap {
    display: flex;
    flex-direction: column;
}

/* Title Styling */
.pasimite-doc-list .file-name {
    font-size: 13px;
    font-weight: normal;
    line-height: 1.3;
}
/* Bold title on hover */
.pasimite-doc-list a:hover .file-name {
    color: #429e00;
}

/* Description Styling */
.pasimite-doc-list .file-desc {
    font-size: 11px;
    color: #777;
    margin-top: 3px;
    line-height: 1.3;
}

/* --- TYPE COLORS (Same as before) --- */
.pasimite-doc-list .file-type-pdf .file-icon { background-color: #d32f2f; }
.pasimite-doc-list .file-type-doc .file-icon { background-color: #2b579a; }
.pasimite-doc-list .file-type-xls .file-icon { background-color: #217346; }
.pasimite-doc-list .file-type-img .file-icon { background-color: #8e44ad; }
.pasimite-doc-list .file-type-zip .file-icon { background-color: #e67e22; }
.pasimite-doc-list .file-type-default .file-icon { background-color: #95a5a6; }
/* Web Link: Teal */
.pasimite-doc-list .file-type-web .file-icon {
    background-color: #00897b; 
}

/* --- FINAL MOBILE / RESPONSIVE FIXES --- */
@media screen and (max-width: 900px) {

    /* 1. HIDE VIDEO completely */
    #header-right {
        display: none !important;
    }

    /* 2. HEADER & LOGO CENTERED */
    #header {
        flex-direction: column;
        padding: 10px 0;
        height: auto;
    }
    #logo {
        margin: 0;
        text-align: center;
        width: 100%;
    }
    #logo img {
        max-height: 80px; /* Prevent logo from being huge */
    }

    /* 3. BURGER MENU (Top Menu) */
    .menu-toggle {
        display: block !important; /* Show the button */
        margin-bottom: 0;
    }
    
    /* Hide the menu list by default on mobile */
    .main-navigation .menu-container {
        display: none; 
        background-color: #333;
    }
    
    /* Stack links vertically */
    .main-navigation ul {
        flex-direction: column;
        width: 100%;
    }
    .main-navigation li {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #444;
        text-align: center;
    }
    .main-navigation a {
        padding: 15px;
    }

    /* 4. MAIN LAYOUT STACK */
    #main-wrap {
        flex-direction: column;
        padding: 10px;
    }
    #content-right {
        width: 100%;
        order: 1; /* Content First */
    }

    /* 5. SIDEBAR MENU FIXES */
    #sidebar-left {
        width: 100%;
        margin: 30px 0 0 0;
        border: none;
        padding: 0;
        order: 2; /* Sidebar Bottom */
    }

    /* FIX SUBMENUS: No more flying out */
    #sidebar-left .menu li:hover > .sub-menu,
    #sidebar-left .menu .sub-menu {
        position: static; /* Stack them normally */
        width: 100%;
        box-shadow: none;
        border: none;
        display: block; /* Always show sub-items on mobile (easier navigation) */
        background-color: #fcfcfc;
    }
    
    /* Indent sub-items so we know they are children */
    #sidebar-left .menu .sub-menu a {
        padding-left: 40px !important; 
        border-bottom: 1px dotted #ddd;
    }
    
    /* Remove the 'arrow' from sub-menus on mobile to reduce clutter */
    #sidebar-left .menu .sub-menu a::before {
        display: none;
    }
}

/* --- INFO BAR (Hardcoded) --- */
#info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff; /* Clean white */
    border-bottom: none;
    padding: 30px;
    gap: 20px;
}

/* Columns */
.info-col {
    flex: 1; /* Equal width */
    text-align: center;
    font-size: smaller;
    color: #555;
}

/* Slogan Specifics */
.info-col.slogan {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    font-size: 16px;
    color: #000;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

/* Image Handling */
.info-col img {
    max-height: 80px; /* Keep banner small/clean */
    width: auto;
    vertical-align: middle;
}

/* --- MOBILE FIX for Info Bar --- */
@media screen and (max-width: 900px) {
    #info-bar {
        flex-direction: column; /* Stack vertically */
        text-align: center;
    }
    .info-col {
        width: 100%;
        margin-bottom: 15px;
        border: none !important; /* Remove slogan borders on mobile */
    }
}