/* 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 */
    .content-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .image_bio_box {
        width: 280px;
        margin-left: 30px;
        position: sticky;
        top: 100px; /* Offset from the top (e.g., below header) */
    }

    .main-image {
        width: 280px;
        height: 280px;
        float: none; /* Override mobile float */
        margin: 0; /* Override mobile margin */
    }

    .content-text {
        flex: 1;
        max-width: calc(100% - 310px);
    }

    /* Sidebar - Desktop Specifics */
    .sidebar {
        /* Based on your last provided snippet, you want it at top:0px on desktop */
        top: 0px;
        height: 100vh; /* If top is 0, height should be 100vh to fill screen */
        /* width: 250px; position: fixed; left: 0; z-index: 1001; (these are already in layout.css, apply to both) */
    }
    /* IMPORTANT: If sidebar top: 0px and z-index: 1001, it will sit ON TOP of your header (z-index: 1000).
        If you want it to sit *below* the header, change sidebar top to 80px and height to calc(100vh - 80px) here. */

    /* 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 {
        /* These styles override the default `display: none` from utilities.css */
        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; /* JavaScript will toggle this */
        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); /* Adjust height based on assumed mobile header */
        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; /* Hide desktop header on mobile if burger menu is primary nav */
    }

    .sidebar {
        position: static; /* No longer fixed on mobile */
        width: 100%;
        max-width: none;
        height: auto;
        padding: 15px;
    }

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

    .main-nav {
        display: none; /* Hide main nav on mobile */
    }

    .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); /* Mobile specific flex */
    }

    .image_bio_box {
        width: 100%;
        float:none; 
        max-width: 500px;
    }

    .main-image {
        width: 100%;
        height: auto;
        max-height: 400px;
        float: none;
        margin: 0 auto 20px;
    }

    .bio_content table {
        width: 400px;
        margin-left: -20px;
    }

    /* 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; }
}