/* Copyright © 2026 YourQuiz. All rights reserved. */

/* ================= LAPTOP ADJUSTMENTS ================= */

@media (min-width: 1024px) and (max-width: 1365px) {

    /* ===== GLOBAL FIX (prevents right cut-off) ===== */
    *{
        box-sizing:border-box;
    }

    body{
        overflow-x:hidden;
        height: 100vh;
    }


    /*  =========================================================
        HEADER (ONLY left + right)
        ========================================================= */
    /* 🔥 FORCE SIMPLE FLEX LAYOUT *//* Make page full width */
    .top-header,
    .container,
    .footer{
        width:100% !important;
        max-width:100% !important;
    }

    .top-header {
        width: 100%;
        min-height:55px;
        margin: 1px auto;
        border-radius: 5px;
        border: 1px solid #1398cd;
        background: #1398cd;
        align-items:center;
    }

    /* REMOVE GRID COMPLETELY */
    .header-grid {
        display: flex;                                  /* switch to flex */
        justify-content: space-between;
        align-items: center;

        min-height: auto;
        padding: 5px 10px;
        gap: 0;                                         /* no artificial gaps */
    }

    .left-side,
    .right-side {
        flex-shrink: 0;                                 /* prevents squishing */
    }

    /* LEFT SIDE */
    .left-side {
        display: flex !important;                   /* override grid */
        grid-template-columns: none !important;     /* remove 1fr */
        width: auto !important;                     /* prevent stretching */
        flex: 0 0 auto;                             /* don't grow */
        align-items: center;
        gap: clamp(20px, 1vw, 25px);                 /* clean spacing */
    }

    /* RIGHT SIDE */
    .right-side {
        display: flex !important;
        justify-content: flex-end !important;       /* override space-evenly */
        width: auto !important;
        flex: 0 0 auto;                             /* don't grow */
        align-items: center;
        gap: clamp(20px, 1vw, 25px);                  /* consistent spacing */
    }

    .logo{
        margin-left:10px;                /* exactly what you wanted */
    }

    /* logo */
    .logo h1{
        margin:0 !important;
        font-size:32px !important;
        line-height:1 !important;
    }

    .logo a {
        color: #fff;
        text-decoration: none;
    }

    /* Buttons: Increased size and readability */
    #homeBtn {
        border-radius: 800px;
        padding: 8px 14px;               /* top/bottom, left/right */
        font-size: 16px;    
        line-height: 1 !important;      /* Allow vertical breathing room */
        cursor: pointer;
        white-space: nowrap;            /* Prevents text from wrapping to two lines */
    }

    #quizbtn {
        border-radius: 800px;
        padding: 8px 14px;               /* top/bottom, left/right */
        font-size: 16px;    
        line-height: 1 !important;      /* Allow vertical breathing room */
        cursor: pointer;
        white-space: nowrap;            /* Prevents text from wrapping to two lines */
        margin-right: 320px;
    }

    
.dropdown-quiz-content {
    display: none;  /* Hidden by default */
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-right: 320px;
    background-color: #f9f9f9;
    min-width: 150px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 7px;
    border: 2px solid #1398cd;
}



    /* =========================================================
    MAIN CONTAINER
    ========================================================= */

    /* 🔥 REMOVE 3-COLUMN LAYOUT */
    .container{
        display:block !important;
        width:100%;
        height:auto !important;
        min-height: calc(100vh - 40px - 50px);
        padding: 0;                     /* remove default container padding */
        margin: 0;                      /* remove default container margin */
    }

    /* keep main content */
    .main-content{
        width:100%;

        /* Calculate height: 100% viewport minus the heights of ads and padding, marging, gaps*/
        display: flex;
        flex-direction: column;
        border-radius:5px;
        padding: 0;                     /* remove default main-content padding */
        margin: 0;                      /* remove default main-content margin */
    }

    .title-row {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        border-radius: 3px 3px 0 0;
    }

    .title-row h1 {
        margin:0 !important;
        font-size: 27px !important;
        line-height:1 !important;
    }

    .promo-row {
        padding-top: 0 !important;
        padding-bottom: 3px !important;
        align-items: center;
        justify-content: center;        
        position: relative;
        display: flex;
        background: #1398cd;
        color: #ffffff;
    }

    .promo-title {
        font-weight: bold;
        font-size: 18px;
        font-family: Arial, sans-serif;
        text-align: center;
    }

    .page_container * {
        margin: 0px;
        padding: 5px 5px !important;
        box-sizing: border-box;         /* ensures border/padding does not increase size */
    }


    /* =================  RIGHT COLUMNS ================= START */
    /* 1. Force the container to be a row and prevent wrapping */
    .container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; 
        align-items: flex-start;            /* Keeps sidebar at the top */
        align-items: stretch;               /* forces child items to expand and fill the entire height */
        width: 100%;
        max-width: 1280px;                  /* Fits well within 1024-1365 range */
        margin: 0 auto;
    }

    /* 3. Allow main content to shrink to make room for the sidebar */
    .main-content {
        flex: 1; 
        min-width: 0;                       /* Critical: allows flex item to shrink below content size */
        border-radius:5px;
    }

    /* 4. Fix the sidebar width so it doesn't drop down */
    .side-column-small-laptop.right-sidebar {
        display: flex !important;
        flex-direction: column;
        width: 338px;                       /* Fits the 300px ad + borders */
        flex-shrink: 0;                     /* Prevents the sidebar from getting squished */
        border: 2px solid #1398cd;
        border-radius: 5px;
    }

    /* 5. Keep the ad centered and sized */
    .ad-container.ad-laptop-only {
        width: 336px;
        height: 280px;
        background: #e5e5e5;
        display: flex !important;
        align-items:center;
        justify-content:center; 
    }

    .game-ad-slot {
        position: relative !important;
        width: 336px;
        height: 280px;
    }
    /* =================  RIGHT COLUMNS ================= END */


    /* =========================================================
    FOOTER (ONLY left + right)
    ========================================================= */

    /* 🔥 Show footer */
    .footer{
        display:flex !important;
        justify-content:space-between;
        align-items:center;
        width:100%;
        margin:1px auto;
        padding:5px 10px;
        border:1px solid #1398cd;
        border-radius:4px;
        background:#1398cd;
    }

    /* footer */
    .footer .left-footer {
        flex:1;
        min-width:0;
        text-align:center;
        color: #ffffff;
    }

    .footer a {
        color: #fff;
        text-decoration: none;
    }

    .footer a:hover {
        text-decoration: underline;
    }

}