/* --- 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: #ffffff !important; /* Pure white matches the new look */
        background-image: none !important;
        color: #444 !important;
    }

    /* 1. HEADER & LOGO FIXES */
    html body #header { 
        background: transparent !important; 
        height: 0 !important; 
        padding: 0 !important; 
        margin: 0 !important;
        border: none !important;
        display: block !important; /* Overrides the desktop flex-split */
    }

    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 */
    #mobile-menu-overlay {
        position: fixed;
        top: 60px; 
        left: -280px;  
        width: 280px;
        height: calc(100% - 60px);
        background: #ffffff !important;
        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);
    }

    /* 4. SEARCH BOX */
    .search-container {
        padding: 20px 15px;
        background: #f9f9f9;
        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 */
    #mobile-menu-overlay ul { list-style: none; padding: 0; margin: 0; }
    #mobile-menu-overlay ul li a {
        color: #444444 !important;
        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;
    }

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

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

    /* The New Hero Tagline styling for mobile */
    .hero-wm-intro h1 {
        font-size: 20px !important; /* Fits one line better on mobile */
        letter-spacing: 1px !important;
        line-height: 1.3 !important;
    }

    .hero-wm-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .hero-wm-card {
        padding-bottom: 20px !important;
        border-bottom: 1px solid #f2f2f2 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !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. BOXES WITH THUMBNAILS (The "Outside-the-Paragraph" Fix) */
    .columns {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 20px 0 !important;
    }

    .post-column {
        width: 90% !important;
        margin: 0 auto 40px auto !important;
        background: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; 
        padding-bottom: 25px !important;
    }

    .post-column .post-thumb {
        width: 100% !important;
        height: 180px !important; 
        object-fit: cover !important;
        margin: 0 !important;
        display: block !important;
    }

    .post-column h3 {
        display: flex !important;
        align-items: center !important;
        width: calc(100% - 40px) !important;
        margin: 15px 20px 10px 20px !important;
        font-size: 16px !important;
        color: #F8941D !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        font-weight: 700 !important;
    }

    .post-column h3::after {
        content: '' !important;
        flex: 1 !important;
        height: 1px !important;
        background: #eeeeee !important;
        margin-left: 15px !important;
    }

    .post-column p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin: 0 20px 15px 20px !important; /* Fixed 20px left margin */
        color: #666 !important;
        text-align: left !important;
    }

    /* THE BUTTON: Resetting the 'top: 25px' nudge and alignment */
    .post-column a.post-column-read {
        /* 1. RESET: Kill desktop offset and absolute/relative shifts */
        position: relative !important;
        top: 0 !important;            /* This cancels the 25px shift from style.css */
        left: 0 !important;
        
        /* 2. ALIGNMENT: 20px from the left, independent of the paragraph */
        display: inline-flex !important;
        margin: 5px 0 0 20px !important; 
        
        /* 3. SIZE: Control the width and height */
        width: 110px !important;
        max-width: 110px !important;
        height: 36px !important;
        padding: 0 !important;
        
        /* 4. TEXT: Center "Read More" exactly */
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;

        /* 5. STYLE */
        background: #F8941D !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    /* 9. BORDERLESS LIST CONTAINERS (Matches Hero Style) */
    div.post-columnmain, .hero-wm-card {
        width: 95% !important;
        float: none !important;
        margin: 0 auto 35px auto !important; 
        padding: 0 !important;               
        background: transparent !important;  
        border: none !important;            
        box-shadow: none !important;        
        box-sizing: border-box !important;
    }

    /* 10. HEADERS (Matching Hero h3 with the Line) */
    div.post-columnmain h3, .hero-wm-card h3 {
        display: flex !important;           
        align-items: center !important;
        background: none !important;
        text-indent: 0 !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
        font-size: 16px !important;         
        color: #F8941D !important;          
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
    }

    /* The Elegant Line next to the title from Hero section */
    div.post-columnmain h3::after, .hero-wm-card h3::after {
        content: '' !important;
        flex: 1 !important;
        height: 1px !important;
        background: #eeeeee !important;
        margin-left: 15px !important;
    }

    /* 11. THE LISTS & LINK CONTAINERS */
    div.post-columnmain ul, .hero-list-links {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    div.post-columnmain ul li, .hero-list-links a {
        display: block !important;
        border-bottom: 1px solid #f2f2f2 !important; 
    }

		/* 12. THE LINKS (Compact & Clean) */
    div.post-columnmain ul li a, .hero-list-links a {
        display: block !important;
        padding: 12px 0 !important; 
        color: #666666 !important;  
        font-size: 15px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        background-image: url('../images/listarrow.gif') !important;
        background-repeat: no-repeat !important;
        background-position: right center !important; 
        background-size: 10px !important;
        border-bottom: 1px solid #f2f2f2 !important;
    }

    /* REFINED "MORE..." LINK (Right-aligned, gray, italic) */
    div.post-columnmain ul li:last-child, 
    .hero-list-links a:last-child {
        border-bottom: none !important;
        text-align: right !important; /* Moves link to the right */
    }

    div.post-columnmain ul li:last-child a, 
    .hero-list-links a.more-link {
        display: inline-block !important; /* Allows right-alignment to work */
        width: auto !important;
        color: #999999 !important;      /* Less obtrusive gray */
        font-weight: 400 !important;
        font-style: italic !important;   /* Professional magazine look */
        padding: 15px 0 5px 0 !important;
        background-image: none !important; /* Removes the arrow */
    }

    /* --- 13. NEW FOOTER (Precision Mobile Alignment) --- */
    #footer {
        width: 100% !important;
        padding: 30px 0 0 0 !important; 
        margin: 30px 0 0 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important; 
        background-size: auto !important;
    }
    
    #footer-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px 140px 15px !important; 
        margin: 0 !important;
        box-sizing: border-box !important;
        flex-direction: column !important; 
        align-items: center !important;
        text-align: center !important;
        background-size: contain !important;
        background-position: bottom center !important;
    }

    #footer-inner p {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
        text-align: center !important;
        line-height: 2.2 !important; 
    }

    #footer-inner p a {
        display: inline-block !important;
        font-size: 12px !important;
        margin: 0 8px !important; 
        float: none !important;
    }

    #footer-inner p a::after {
        content: "" !important; 
    }
    
    .footer-logos {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 0 20px 0 !important; 
        gap: 10px !important;
        float: none !important;
    }

    .footer-logos a {
        width: 70px !important;
        height: 44px !important;
    }

    body, html {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

		/* 14. MOBILE ADJUSTMENTS FOR MAGAZINE SECTION */
		.seo-wm-magazine {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;  /* Consistent gutter on the left */
        padding-right: 20px !important; /* Consistent gutter on the right */
        box-sizing: border-box !important;
    }

		.seo-wm-header, 
    .seo-wm-grid,
    .seo-wm-footer-note {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .seo-wm-grid { 
        grid-template-columns: 1fr !important; /* Stacks columns on mobile */
        gap: 30px !important; 
    }

    .seo-wm-header h2 { 
        font-size: 24px !important; 
    }

    .seo-wm-text { 
        text-align: left !important; /* Justify looks bad on narrow phone screens */
    }

    .seo-wm-footer-note {
        text-align: left !important;
        padding: 20px 0 !important;
    }

		/* --- 15. BOTTOM LINK LISTS (Mobile Specific Refinement) --- */
    /* 1. Reset the Grid for Mobile */
    .hero-wm-grid-links {
        display: block !important; /* Stack them naturally */
        width: 100% !important;
        padding: 0 20px !important; /* Creates the side gutters you need */
        margin: 40px 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Reset the Card Padding */
    .hero-wm-card-links {
        padding: 0 !important; /* Remove the desktop 40px padding */
        margin-bottom: 40px !important; /* Space between the 3 sections */
        position: relative !important;
    }

    /* 3. Kill the Vertical Dividers from Desktop */
    .hero-wm-card-links::after {
        display: none !important;
        content: none !important;
    }

    /* 4. Compact Headers */
    .hero-wm-card-links h3 {
        font-size: 15px !important;
        margin-bottom: 15px !important; /* Tighter gap to links */
        color: #F8941D !important;
    }

    /* 5. COMPACT LINKS (No dividers, tighter spacing) */
    .hero-list-links a {
        padding: 6px 0 !important; /* Tighter vertical spacing */
        border-bottom: none !important; /* REMOVES the grey lines */
        font-size: 14px !important;
        color: #555 !important;
        background-position: right center !important;
        background-size: 8px !important; /* Slightly smaller arrows */
    }

    /* 6. The "More" Link Styling */
    .hero-list-links a.more-link {
        padding-top: 12px !important;
        font-size: 13px !important;
        color: #999 !important;
        background-image: none !important; /* Ensure no arrow on "More..." */
        text-align: left !important;
    }

		/* --- 16. SIDEBAR (ASIDE) MOBILE OPTIMIZATION --- */
    #aside {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin: 40px 0 !important;
        display: block !important;
    }

    .sidebox {
        width: 90% !important; /* Matches your other boxes */
        margin: 0 auto 30px auto !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        padding: 15px !important;
    }

    /* Fix the Headers - removing the fixed 370px and negative margins */
    .sidebox h3, 
    .sidebox h3.title_spotlight01, 
    .sidebox h3.title_spotlight02, 
    .sidebox h3.subscribe {
        width: 100% !important; 
        margin: -15px -15px 15px -15px !important; /* Pulls to edges of the box only */
        padding: 15px !important;
        box-sizing: border-box !important;
        background-size: contain !important; /* Ensures background image titles fit */
        height: auto !important;
        min-height: 40px !important;
    }

    /* Reset widths for all sidebar lists */
    .sidebox ul.guidebook, 
    .sidebox ul.adlist, 
    .sidebox ul.sidebarlist {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Fix the individual list items */
    .sidebox ul.guidebook li, 
    .sidebox ul.adlist li, 
    .sidebox ul.sidebarlist li {
        width: 100% !important; /* Spans full width of sidebox */
        float: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Ensure banners/images inside sidebar never overflow */
    .sidebox img {
        max-width: 100% !important;
        height: auto !important;
        padding: 0 !important; /* Removes the desktop 35px left padding */
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Random Content/Script containers fix */
    #aside script + div, 
    #aside div.sideboxspotlight {
        width: 90% !important;
        margin: 0 auto 30px auto !important;
    }

		/* --- 17. MODERN SIDEBAR (Mobile Optimization) --- */
    /* 1. Container: Borderless and centered */
    .modern-sidebox {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 auto 40px auto !important;
        width: 90% !important;
    }

    /* 2. Header: Orange text + Signature line */
    .modern-sidebox h3 {
        display: flex !important;
        align-items: center !important;
        background: none !important;
        color: #F8941D !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .modern-sidebox h3::after {
        content: '' !important;
        flex: 1 !important;
        height: 1px !important;
        background: #eeeeee !important;
        margin-left: 15px !important;
    }

    /* 3. List Base Style */
    .modern-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 4. List Items: Shared styling & Bullet Reset */
    .modern-list li {
        position: relative !important;
        border-bottom: 1px solid #f2f2f2 !important;
        padding: 12px 0 12px 25px !important; /* Space for the bullet */
        font-size: 15px !important;
        color: #444 !important;
        line-height: 1.5 !important;
        width: 100% !important;
        float: none !important;
        background: none !important; /* KILLS the old thumbsup/gifs */
    }

    .modern-list li:last-child {
        border-bottom: none !important;
    }

    /* 5. THE UNIVERSAL BULLET (The Circle) */
    .modern-list li::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 20px !important; /* Centers bullet with first line of text */
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
    }

    /* 6. BOOKING LIST: Uniform Orange Bullets */
    .check-list li::before {
        background-color: #F8941D !important;
    }

    /* 7. GUIDEBOOK LIST: Multi-color Bullets */
    .guidebook-icons li.orange::before { background-color: #F8941D !important; }
    .guidebook-icons li.pink::before   { background-color: #E91E63 !important; }
    .guidebook-icons li.blue::before   { background-color: #2196F3 !important; }
    .guidebook-icons li.green::before  { background-color: #4CAF50 !important; }
    .guidebook-icons li.grey::before   { background-color: #9E9E9E !important; }
    .guidebook-icons li.purple::before { background-color: #9C27B0 !important; }
    .guidebook-icons li.yellow::before { background-color: #FFC107 !important; }

    /* 8. Links */
    .modern-list li a {
        color: #0073aa !important;
        text-decoration: none !important;
        font-weight: 500 !important;
    }

		/* --- 18. SIDEBAR SCRIPT ALIGNMENT (Mobile Only) --- */
    #aside {
        text-align: center !important; /* Centers the script-generated banners */
        width: 100% !important;
    }

    #aside a {
        display: inline-block !important; /* Allows the link to be centered */
        max-width: 90% !important;        /* Keeps banner slightly away from screen edges */
    }

}