/* =========================================================
   GRAPHITE ACADEMY — GLOBAL CSS
   Updated: Blog Sidebar Form Removed
========================================================= */


/* =========================================================
   1. FIXED HEADER
========================================================= */

.ga-sticky-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    margin: 0 !important;

    z-index: 999999 !important;

    background: #ffffff !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06) !important;

    overflow: visible !important;
}


/* Space underneath desktop fixed header */
body {
    padding-top: 86px !important;
}


/* =========================================================
   2. BLOG POST LAYOUT — DESKTOP
========================================================= */

@media (min-width: 922px) {

    /* Main article — full available width */
    .single-post #primary {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

}


/* =========================================================
   3. TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 921px) {

    /* Full-width blog article */
    .single-post #primary {
        width: 100% !important;
        max-width: 100% !important;
    }

}


/* =========================================================
   4. MOBILE
========================================================= */

@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        margin: 0;

        padding-left: 0;
        padding-right: 0;

        overflow-x: clip;
    }


    /* Space underneath mobile fixed header */
    body {
        padding-top: 68px !important;
    }


    /* Prevent Elementor horizontal overflow */
    .elementor,
    .elementor-page,
    .elementor-section,
    .elementor-container,
    .elementor-widget-wrap,
    .elementor-widget {
        max-width: 100%;
        box-sizing: border-box;
    }


    .elementor-section,
    .elementor-container {
        width: 100%;
    }


    .elementor-widget {
        min-width: 0;
    }


    /* Responsive media */
    img,
    video,
    iframe {
        max-width: 100%;
    }


    /* Blog article — full available width */
    .single-post #primary {
        width: 100% !important;
        max-width: 100% !important;
    }

}