/* --- TABLET / SMALL DESKTOP (1140px and down) --- */
@media (max-width: 1140px) {
    /* Grouped Typography and Widths */
    body, p, .post ul.listing, .post ul.pages, .post ul.hotelbed, .post blockquote, 
    .sidebox ul.adlist, .sidebox ul.pageslist, .post h3, #breadcrumb { font-size: 14px !important; }
    
    #container, .slide-wrap, .pagesBox, .pagesBox ul, .pagesBox li.last, 
    .post h1, .generalBox, .hotelsBox, .post h2.title_topics, .responsiveslides-slide li { width: 100%; }

    #header { height: 204px; background-size: 100% auto; }
    #header .header-title { width: 170px; height: 85px; background-size: 100% auto; }

    /* Streamlined Menu: Grouping widths instead of individual hover/static repeats */
    .menu { width: 100%; padding-left: 0; }
    .menu li a.home { width: 54px; }
    .menu li a.news { width: 56px; }
    .menu li a.attractions { width: 104px; }
    .menu li a.hotel { width: 118px; }
    .menu li a.forum { width: 70px; }
    .menu li a.tips { width: 52px; }
    .menu li a.faq { width: 48px; }
    .menu li a.general, .menu li a.cities { width: 100px; }
    .menu li a.islands { width: 115px; }
    .menu li a.explore { width: 130px; }
    .menu li a.borneo { width: 110px; }
    .menu li a.rss { margin-left: 35px; }
    .menu li.menu-search { width: 210px; }
    
    .menu ul.dropdown-menu { 
        background: url("images/menu_dropdown_bg.gif") repeat scroll center bottom rgba(0,0,0,0); 
        display: none; padding: 10px; position: absolute; width: 200px; z-index: 9999; 
    }

    /* Content & Sidebar */
    #content, .post { width: 60%; }
    #aside { width: 36%; }
    .post-column { width: 140px; height: 340px; }
    .post-column .post-thumb { width: 130px; margin-left: 2px; }
    
    .post h2.title_topics { 
        background: url("images/title_topics.gif") no-repeat scroll left center transparent; 
        height: 40px; margin: 0 0 10px -15px; overflow: hidden; padding: 0; text-indent: -9999px; 
    }
    
    .postmain { visibility: hidden; display: none; }
    #container, .slide-wrap, .pagesBox, .pagesBox ul, .pagesBox li { clear: both; }

    /* Post Grid logic */
    .pagesBox .recentpost_name { width: 180px; float: left; }
    .pagesBox .recentpost_category { width: 100px; float: left; }
    .pagesBox .recentpost_date { width: 50px; float: left; }
    
    .post-columnmain { width: 138px; height: 190px; }
    .columns h3.title_highlights, .columns h3.title_islands, .columns h3.title_cities { width: 135px; background-size: 100% auto; }
    
    .post h1.post-title, .post h2 { font-size: 16px !important; }
    .post h2.title_welcome { background: url("images/title_welcome.gif") no-repeat scroll left center transparent; overflow: hidden; width: 450px; }
    
    /* Media elements */
    .post .youtube, .post .google-map { width: 380px; background-size: 100% 100%; }
    .post .youtube embed { width: 100% !important; }
    
    #footer { padding: 10px; background: url("images/footer_bg.jpg") no-repeat scroll center bottom / 100% auto transparent; }
    #menu, #nav { display: none; }
}

/* --- MOBILE (765px and down) --- */
		@media (max-width: 765px) {

		/* 0. GLOBAL BODY RESET */
    html, body {
        background-color: #f9f9f9 !important; /* A clean, modern off-white */
        background-image: none !important;    /* Kills the repeating desktop image */
        color: #444 !important;               /* Slightly darker text for better mobile legibility */
    }

    /* 1. HEADER & LOGO FIXES */
    html body #header { 
        background: transparent !important; 
        height: 0 !important; 
        padding: 0 !important; 
        margin: 0 !important;
        border: none !important;
    }

    html body #header .header-title { 
        display: block !important;
        position: fixed !important;
        top: 10px !important;        
        left: 50% !important; 
        transform: translateX(-50%) !important;
        z-index: 10002; 
        width: 180px !important; 
        height: 40px !important; 
        background-image: url('images/mobile_logo.png') !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important; 
        text-indent: -9999px !important; 
        overflow: hidden !important; 
        float: none !important;
    }

    html body #header .header-title a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        background: none !important;
    }

    html body #header img { display: none !important; }

    /* 2. TOP WHITE BAR */
    #mobile-top-bar {
        background: #ffffff !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px; 
        z-index: 10001;
        padding: 0 15px;
        box-sizing: border-box;
        border-bottom: 1px solid #eeeeee; 
        box-shadow: 0 2px 8px rgba(0,0,0,0.06); 
    }

    #mobile-nav-trigger {
        width: 30px;
        height: 20px;
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        margin: 0;
    }

    #mobile-nav-trigger .bar {
        width: 100%;
        height: 3px;
        background: #333333; 
        border-radius: 2px;
        transition: 0.3s;
    }

    #mobile-nav-trigger.open .bar:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
    #mobile-nav-trigger.open .bar:nth-child(2) { opacity: 0; }
    #mobile-nav-trigger.open .bar:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

    /* 3. SLIDE-OUT MENU OVERLAY - Now White */
    #mobile-menu-overlay {
        position: fixed;
        top: 60px; 
        left: -280px;  
        width: 280px;
        height: calc(100% - 60px);
        background: #ffffff !important; /* Pure White */
        z-index: 10000;
        display: block !important;
        transition: 0.3s ease-in-out;
        overflow-y: auto;
        border-right: 1px solid #eee;
    }

    #mobile-menu-overlay.active {
        left: 0;  
        box-shadow: 10px 0 30px rgba(0,0,0,0.1); /* Softer shadow for white theme */
    }

    /* 4. SEARCH BOX INSIDE MENU - Light Theme */
    .search-container {
        padding: 20px 15px;
        background: #f9f9f9; /* Light gray background to distinguish from white menu */
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        width: 100%;
    }

    .search-container form {
        display: flex !important;
        margin: 0 !important;
        width: 100%;
    }

    .search-container input[type="text"] {
        flex: 1; 
        min-width: 0;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 4px 0 0 4px;
        font-size: 16px;
        background: #fff;
        color: #333;
        outline: none;
    }

    .search-container button {
        width: 55px;
        background: #F8941D; 
        color: #fff;
        border: 1px solid #F8941D;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 5. MENU LINKS - Now Dark Text */
    #mobile-menu-overlay ul { list-style: none; padding: 0; margin: 0; }
    #mobile-menu-overlay ul li a {
        color: #444444 !important; /* Dark Gray text */
        text-decoration: none !important;
        display: block !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-family: Arial, sans-serif !important;
        font-size: 17px !important;
        font-weight: 500 !important;
    }

    #mobile-menu-overlay ul li a:active {
        background: #f8f8f8; /* Subtle highlight when tapped */
    }

    /* 6. CONTENT STACKING */
    #content, .post, #aside {  
        width: 95% !important;  
        float: none !important;  
        margin: 0 auto !important;  
    }

    #content { margin-top: 80px !important; }

    [id^="nav-linklist"] { width: 100% !important; padding: 0 !important; }
    [id^="nav-linklist"] div.box {  
        width: 90% !important;  
        margin: 0 auto 20px auto !important;  
        float: none !important;  
        display: block !important;
    }

    /* 7. HIDE DESKTOP STUFF */
    #menu, .menu, #nav, .top-menu, .none { display: none !important; }

/* --- 8. FIXING THE THREE BOXES GRID --- */
    .columns {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .post-column {
        /* Reset desktop constraints */
        width: 92% !important;      /* Almost full width */
        height: auto !important;    /* Let the box grow with content */
        float: none !important;     /* Stop them from sitting side-by-side */
        margin: 0 auto 20px auto !important; /* Center them and add bottom gap */
        
        /* Modernize the look to match the new white theme */
        border: 1px solid #eee !important;
        border-radius: 12px !important;
        padding-bottom: 50px !important; /* Space for the absolute 'Read More' button */
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }

    .post-column .post-thumb {
        width: 100% !important;    /* Make image fit the box */
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 12px 12px 0 0; /* Round only the top corners */
    }

    .post-column h3 {
        font-size: 1.3em !important;
        margin: 15px 11px 5px 11px !important;
        padding: 0 !important;
    }

    .post-column p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
    }

    .post-column a.post-column-read {
        left: 11px !important;     /* Align button to the left padding */
        width: 100px !important;
        padding: 8px 0 !important; /* Make it a bigger tap target */
    }

/* --- 9. FIXING THE LIST COLUMNS (Highlights, Islands, Cities) --- */
    .post-columnmain {
        /* Stack vertically and fill width */
        width: 92% !important;
        height: auto !important; /* Allow the box to grow with the list */
        float: none !important;
        margin: 0 auto 15px auto !important;
        
        /* Match our new clean theme */
        background: #ffffff !important;
        border: 1px solid #eee !important;
        border-radius: 12px !important;
        padding: 15px 0 !important; /* Vertical breathing room */
        box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    }

    .post-columnmain h3 {
        font-size: 1.4em !important;
        margin: 0 20px 10px 20px !important;
        padding-bottom: 10px !important;
        border-bottom: 2px solid #f8941d; /* Underline titles with brand orange */
        color: #333 !important; /* Darker for better legibility */
    }

    .post-columnmain ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 20px !important;
    }

    .post-columnmain ul li {
        border-bottom: 1px solid #f0f0f0 !important;
        padding: 0 !important;
    }

    .post-columnmain ul li:last-child {
        border-bottom: none !important; /* Remove line from the 'More...' link */
    }

    .post-columnmain ul li a {
        display: block !important;
        padding: 12px 0 !important; /* Large tap target for fingers */
        color: #F8941D !important; /* Make links pop */
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    /* Arrow indicator for links (optional but looks great on mobile) */
    .post-columnmain ul li a::after {
        content: ' ›';
        float: right;
        color: #ccc;
        font-weight: bold;
    }


}