/* Responsive Styles (Media Queries) */

/* ===== DESKTOP STYLES (min-width: 992px) ===== */
@media screen and (min-width: 992px) {
    /* Layout Adjustments */
    .mobile-random-btn {
        display: none !important; /* Ensure hidden on desktop */
    }

    .random-btn { /* Re-enable desktop specific random button */
        display: block;
    }

    .main-nav div:nth-child(2) {
        display: block; /* Show the regular random link in main nav */
    }

    .container {
        width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .main {
        margin-left: 250px; /* Account for fixed sidebar */
        padding: 20px;
    }

    /* Entry Page Specific Desktop Layout */
    .main-content-layout {
        flex-direction: row; /* Side-by-side */
    }

    .image_bio_box {
        width: 280px; /* Adjusted width for desktop */
        position: sticky; /* Makes it stick when scrolling */
        top: 100px; /* Offset from the top (e.g., below header) */
    }

    .main-image {
        width: 280px; /* Larger image on desktop */
        height: 280px;
        margin: 0; /* Reset mobile centering */
    }

    .entry-content {
        flex: 1; /* Allow to take remaining space */
        max-width: calc(100% - 310px); /* Account for image_bio_box width + gap */
    }

    /* Sidebar - Desktop Specifics (assuming these are placed here or in layout.css) */
    .sidebar {
        top: 0px;
        height: 100vh;
    }

    /* Typography (Desktop specific sizes) */
    h1 { font-size: 3.2rem; }
    h2 { font-size: 2.8rem; }
    h3 { font-size: 2.4rem; }
    h4 { font-size: 2.0rem; }
    h5 { font-size: 1.8rem; }
    h6 { font-size: 1.6rem; }
}

/* ===== MOBILE STYLES (max-width: 991px) ===== */
@media screen and (max-width: 991px) {
    /* Layout Adjustments */
    .mobile-random-btn {
        display: block;
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 1000;
    }

    .random-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-color);
        color: white;
        padding: 12px 16px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        font-size: 0.9rem;
    }

    .random-btn:hover {
        background-color: #3a5a8a;
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    }

    .random-btn i {
        margin-right: 8px;
    }

    .main-nav div:nth-child(2) {
        display: none; /* Hide the random page link in the main nav on mobile */
    }

    .container {
        width: 100%;
        padding: 0 15px;
    }

    .main {
        margin-left: 0;
        padding: 15px;
    }

    /* Burger Menu */
    .burger-menu-btn {
        display: block;
        width: 30px;
        height: 30px;
        background-image: url(../../../media/bgimages/MenuIcon.png), url(../../../media/bgimages/CloseIcon.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center, center left 50px;
        margin-right: 10px;
        z-index: 901;
    }

    .burger-menu {
        display: none;
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 900;
        background-color: rgb(255, 254, 254);
        opacity: 0.95;
    }

    .burger-menu ul {
        width: 100%;
        height: calc(100vh - 60px);
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .burger-menu ul li {
        flex-basis: 100%;
        border-top: 2px solid rgb(224, 223, 223);
    }

    .burger-menu li:last-child {
        border-bottom: 2px solid rgb(224, 223, 223);
    }

    .burger-menu ul li a {
        display: block;
        height: 100%;
        font-size: 3rem;
        padding: 30px 0;
        flex-basis: 100%;
        text-align: center;
    }

    .content-main {
        flex-wrap: nowrap;
    }

    .header {
        display: none;
    }

    .sidebar {
        position: static;
        width: 100%;
        max-width: none;
        height: auto;
        padding: 15px;
    }

    .sidebar h2 {
        margin-top: 20px;
        margin-left: 20px;
    }

    .main-nav {
        display: none;
    }

    .row {
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }

    .search {
        width: calc(100% - 40px);
        margin-left: 20px;
    }

    .button-class {
        margin-left: 20px;
    }

    .entry_list {
        margin-top: 0px;
    }

    .quote_of_day {
        width: 100%;
        margin-left: 0;
        border-radius: 10px;
    }

    .quote_of_day strong {
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 3rem;
    }

    .quote_of_day p {
        text-align: left;
        margin-left: 10px;
    }

    .trends .box {
        flex: 1 1 calc(75% - 20px);
    }

    /* Entry Page Specific Mobile Layout */
    .main-content-layout {
        flex-direction: column; /* Stack elements vertically */
        gap: 20px; /* Space between stacked elements */
    }

    .image_bio_box {
        width: 100%; /* Take full width */
        max-width: 400px; /* Optional: cap max width for aesthetic */
        margin: 0 auto; /* Center the image bio box */
        order: 2; /* Mobile order: image_bio_box after title */
    }

    .main-image {
        width: 100%; /* Take full width of its container */
        height: auto;
        max-height: 400px;
        margin: 0 auto; /* Center image within the bio box */
    }

    .bio_box {
        max-width: 100%; /* Take full width of its container */
        margin: 0 auto; /* Center bio box */
    }

    .entry-content {
        order: 3; /* Main content comes last on mobile */
        width: 100%; /* Take full width */
    }

    .bio_content table {
        width: 100%; /* Ensure table is responsive */
        margin: 20px 0; /* Reset margin */
    }

    /* Typography (Mobile specific sizes) */
    h1 { font-size: 2.6rem; }
    h2 { font-size: 2.2rem; }
    h3 { font-size: 2.0rem; }
    h4 { font-size: 1.8rem; }
    h5 { font-size: 1.6rem; }
    h6 { font-size: 1.4rem; }
}