/* =============================================
   responsive.css — targetcoding.com
   Load this AFTER styles.css
   ============================================= */


/* ==============================================
   OVERLAY (used by off-canvas mobile menu)
   ============================================== */

#nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 998;
    cursor: pointer;
    /* Fade in when .open is added via JS */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#nav-overlay.open {
    display: block;
    opacity: 1;
}


/* ==============================================
   HAMBURGER BUTTON (hidden on desktop)
   ============================================== */

#nav-toggle {
    display: none;
    background: #020066;
    color: #fff;
    border: none;
    font-size: 26px;
    line-height: 1;
    padding: 10px 16px;
    cursor: pointer;
    width: 100%;
    text-align: right;
}


/* ==============================================
   FLUID CONTAINERS
   Override the hard-coded 960px widths so
   everything breathes on mid-size screens too
   ============================================== */

#header {
    width: auto;
    max-width: 960px;
    padding: 0 15px;
    box-sizing: border-box;
}

#header img {
    max-width: 100%;
    height: auto;
    display: block;
}

#maintablewrapper {
    width: auto;
    max-width: 960px;
    padding: 0 15px;
    box-sizing: border-box;
}

#footer {
    width: auto;
    max-width: 960px;
    padding: 0 15px;
    box-sizing: border-box;
}


/* ==============================================
   MAIN LAYOUT
   Convert the HTML <table> to a flex row.
   Only one <tr> exists so this is safe —
   we target #maintable > tr and make it flex.
   ============================================== */

#maintable {
    display: block;
    width: 100%;
    margin: 15px 0;
}

#maintable tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: flex-start;
}

#leftcol {
    display: block;
    flex: 0 0 280px;
    box-sizing: border-box;
}

#contentarea {
    display: block;
    flex: 1;
    min-width: 0;
    /* prevents flex blowout on long content */
    box-sizing: border-box;
}


/* ==============================================
   MOBILE — 768px and below
   ============================================== */

@media (max-width: 992px) {

    /* Stop body scrolling behind open panel */
    body.nav-open {
        overflow: hidden;
    }

    /* Show hamburger */
    #nav-toggle {
        display: block;
    }

    /* ---- Off-canvas nav panel ---- */
    /* Always in the DOM but parked off the right edge.
       display:flex !important overrides the desktop
       styles.css rule that hides it on mobile. */
    #topnav ul {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: 260px;
        height: 100vh;
        background: #020066;
        z-index: 999;
        padding: 55px 0 0;
        margin: 0;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.45);
        transform: translateX(100%);
        /* hidden off screen */
        transition: transform 0.3s ease;
        overflow-y: auto;
    }

    /* Slide in */
    #topnav ul.open {
        transform: translateX(0);
    }

    /* Nav items — stack vertically */
    #topnav ul li {
        float: none;
        height: auto;
        width: 100%;
        border-bottom: 1px solid #2d2d7a;
        margin-top: 0;
    }

    #topnav ul li a {
        height: auto;
        padding: 14px 22px;
        justify-content: flex-start;
        border-left: none;
        border-right: none;
        font-size: 14px;
        text-align: left;
    }

    #topnav ul li:first-child {
        border-left: none;
    }

    /* ---- Main layout: stack sidebar below content ---- */

    #maintable>tbody {
        display: block;
        width: 100%;
    }

    #maintable tr {
        flex-direction: column;
    }

    #maintable>tbody>tr,
    #maintable>tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-items: stretch;
    }

    #contentarea {
        order: 1;
        padding: 0 0 15px;
        width: 100%;
    }

    #leftcol {
        order: 2;
        /* sidebar goes below main content */
        flex: 0 0 100%;
        width: 100%;
        border-right: none;
        border-top: 1px solid #CCC;
        padding: 15px 0 0;
    }

    /* Prevent floated content images breaking the layout */
    #contentarea img {
        max-width: 100%;
        height: auto;
    }

    #contentarea img[style*="float"] {
        float: none !important;
        display: block;
        margin: 0 auto 15px !important;
        max-width: 100% !important;
        width: auto !important;
    }

    /* Keep the inline newsletter table from overflowing */
    #contentarea table {
        width: 100% !important;
    }

    /* Footer tidy-up */
    #footer {
        text-align: center;
    }

}

/* end @media 768px */