/* GLOBAL RESET */
body.terminal-body-bg {
    background-color: #151719;
    color: #f1f1f1;
    font-family: 'Courier New', Courier, monospace;
    margin: 0; padding: 0;
}

.terminal-container { max-width: 800px; margin: 0 auto; padding: 20px; }

/* HEADER */
.terminal-header { background: #151719; width: 100%; }
.header-top { display: flex; justify-content: space-between; align-items: center; padding: 20px 5%; }
.site-logo { font-size: 28px; font-weight: bold; letter-spacing: 2px; }
.site-nav a { margin-left: 20px; text-decoration: none; color: #f1f1f1; font-size: 14px; }
.description-banner { background: #1a1c1e; border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 10px 5%; color: #888; font-size: 13px; }

/* DIVIDERS */
.section-divider { display: flex; align-items: center; margin: 40px 0 20px; color: #888; letter-spacing: 2px; }
.section-divider::before, .section-divider::after { content: ''; flex: 1; border-bottom: 1px solid #333; }
.section-divider::before { margin-right: 15px; } .section-divider::after { margin-left: 15px; }

/* CARDS */
.welcome-card, .latest-card, .log-card, .status-box { background: #1a1c1e; border: 1px solid #333; padding: 20px; }
.welcome-card { margin-bottom: 30px; }
.terminal-prompt { color: #88ff88; margin-bottom: 10px; }

.latest-card { display: flex; gap: 20px; text-decoration: none; color: inherit; }
.latest-card img { width: 40%; border: 1px solid #333; }

.logs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.log-card { text-decoration: none; color: inherit; text-align: center; }
.log-card:nth-child(2) { border-color: #d4af37; } /* Mockup gold highlight */
.log-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; margin-bottom: 10px; }

/* STATUS */
.status-row { border-bottom: 1px solid #222; padding: 8px 0; font-size: 14px; }
.lbl { color: #888; margin-right: 10px; }

/* FOOTER */
.terminal-footer { border-top: 1px solid #333; margin-top: 50px; padding: 30px 5%; color: #888; }
.footer-inner { max-width: 800px; margin: 0 auto; position: relative; display: flex; justify-content: center; }
.sep { margin: 0 10px; color: #444; }
.footer-diamond { position: absolute; right: 0; bottom: -10px; font-size: 20px; color: #444; }

/* --- SINGLE POST STYLES --- */
.post-header { margin-bottom: 30px; }
.post-title { font-size: 32px; margin: 10px 0; color: #f1f1f1; }
.post-image img { width: 100%; border: 1px solid #333; margin-bottom: 30px; }
.post-content { line-height: 1.6; font-size: 16px; color: #ccc; }
.post-content p { margin-bottom: 20px; }

/* --- POST NAVIGATION BUTTONS --- */
.post-nav {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
}
.nav-prev, .nav-next {
    flex: 1;
    border: 1px solid #333;
    background: #1a1c1e;
    transition: all 0.2s ease;
}
.nav-prev:hover, .nav-next:hover {
    border-color: #88ff88; /* Terminal green highlight on hover */
    background: #222;
}
.post-nav a {
    display: flex;
    flex-direction: column;
    padding: 15px;
    text-decoration: none;
    color: inherit;
}
.nav-label { font-size: 11px; color: #888; margin-bottom: 5px; }
.nav-title { font-size: 14px; font-weight: bold; }
.nav-next { text-align: right; }

.archive-list {
    margin-top: 30px;
}
.archive-item {
    display: flex;
    gap: 20px;
    padding: 15px;
    border-bottom: 1px solid #222;
    text-decoration: none;
    color: #ccc;
    font-family: 'Courier New', monospace;
}
.archive-item:hover {
    background: #1a1c1e;
    color: #88ff88;
}
.archive-date {
    color: #666;
    min-width: 100px;
}
/* SLIDER LAYOUT */
.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.slider-container {
    display: flex;
    gap: 15px;
    overflow-x: hidden; /* Hide the scrollbar */
    scroll-behavior: smooth;
    padding: 10px 0;
}

.log-slide {
    flex: 0 0 calc(33.333% - 10px); /* Show exactly 3 at a time */
    text-decoration: none;
    color: inherit;
}

/* NAVIGATION BUTTONS */
.slider-btn {
    background: #1a1c1e;
    color: #88ff88; /* Terminal Green */
    border: 1px solid #333;
    padding: 15px 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
    transition: 0.2s;
}

.slider-btn:hover {
    background: #88ff88;
    color: #151719;
}

.slider-btn.prev { margin-right: 10px; }
.slider-btn.next { margin-left: 10px; }

/* Responsive: Show 1 per slide on mobile */
@media (max-width: 600px) {
    .log-slide { flex: 0 0 100%; }
}

/* MOBILE ADJUSTMENTS (Phones) */
@media (max-width: 768px) {
    .container {
        width: 95%; /* Give more room on small screens */
        padding: 10px;
    }

    /* Stack the Featured/Latest Card */
    .latest-card {
        flex-direction: column;
    }
    
    .latest-card img {
        width: 100%;
        height: 200px;
    }

    /* Make the Slider show 1 card at a time instead of 3 */
    .log-slide {
        flex: 0 0 100%; 
    }

    /* Shrink the header text so it doesn't wrap weirdly */
    header h1 {
        font-size: 1.5rem;
    }
    
    .status-bar {
        font-size: 0.8rem;
        flex-direction: column; /* Stack CPU/RAM/USER info */
        gap: 5px;
    }
}
/* Ensure images in posts never overflow the screen */
article img, .post-content img {
    max-width: 100%;
    height: auto;
    border: 1px solid #333; /* Optional: gives it a framed look */
    margin: 20px 0;
}
.site-logo {
    height: 50px;       /* Adjust this based on your logo shape */
    width: auto;
    display: block;
    margin-bottom: 10px;
}
.terminal-divider {
    border: none;               /* Remove the default solid line */
    border-top: 2px dotted #ffffff; /* Use your terminal's green hex code here */
    margin: 15px 0;             /* Adjust spacing above and below */
    opacity: 0.5;               /* Optional: makes it look a bit more "dim" like a CRT */
    width: 100%;
}
.terminal-search {
    margin-top: 20px;
    font-family: 'Courier New', Courier, monospace;
}

.search-wrapper {
    display: flex;
    align-items: center;
}

.search-input {
    background: transparent;
    border: none;
    color: #ffffff; /* Use your specific green */
    font-family: inherit;
    font-size: inherit;
    outline: none;
    width: 250px;
    caret-color: transparent; /* We're using the █ block instead */
}

/* Make the placeholder text look like a dim terminal suggestion */
.search-input::placeholder {
    color: rgba(51, 255, 51, 0.3);
}
/* Container for the banner and search */
.header-bottom {
    display: flex;
    justify-content: space-between; /* Pushes items to far left and far right */
    align-items: center;            /* Vertically centers them */
    margin-top: 10px;               /* Space below the logo/nav */
    border-top: 10px solid #33ff33;  /* Optional: a subtle terminal line divider */
    padding-top: 10px;
}

.description-banner {
    display: flex;
    justify-content: space-between; /* Pushes text left, search right */
    align-items: center;            /* Vertical alignment */
    padding: 10px 10px;             /* Padding inside the banner */
    background: #1a1a1a;            /* Or whatever your banner color is */
    border: 0px solid #ffffff;      /* Classic terminal border */
}

.description-banner p {
    margin: 0;                      /* Remove default spacing so it stays centered */
    flex: 1;                        /* Allows text to take up available space */
}

.terminal-search {
    margin-left: 20px;              /* Keeps the search from touching the text */
}

.search-wrapper {
    display: flex;
    align-items: center;
    white-space: nowrap;            /* Prevents the label/input from breaking into 2 lines */
}

.search-input {
    background: transparent;
    border: none;
    color: #ffffff;
    outline: none;
    width: 120px;                   /* Shorter width to fit nicely in the header */
    font-family: 'Courier New', monospace;
}