/*
 * generate-style.css
 * GeneratePress loads this file LAST — highest priority overrides.
 * Fixes: left gap, sidebar cut-off, container alignment.
 */

/* ── FORCE FULL-WIDTH CONTAINERS ── */
html body .grid-container,
html body .container {
    max-width: 1200px !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* ── FIX INSIDE-SITE-CONTENT (the main flex wrapper) ── */
html body .inside-site-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    padding: 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── CONTENT AREA ── */
html body .content-area {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── SIDEBAR / WIDGET AREA ── */
html body .widget-area {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── SITE MAIN ── */
html body .site-main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* ── HEADER ── */
html body .inside-header {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── NAVIGATION ── */
html body .inside-navigation {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── NO SIDEBAR PAGES ── */
html body.no-sidebar .content-area,
html body.no-sidebar .site-main {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
html body.no-sidebar .widget-area {
    display: none !important;
}

/* ── RIGHT SIDEBAR (default layout) ── */
html body.right-sidebar .content-area {
    flex: 1 1 0% !important;
    order: 1 !important;
}
html body.right-sidebar .widget-area {
    flex: 0 0 300px !important;
    order: 2 !important;
}

/* ── FOOTER ── */
html body .inside-footer-widgets {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}
html body .inside-site-info {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
}

/* ── TOP BAR ── */
html body .inside-top-bar {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 6px 20px !important;
    box-sizing: border-box !important;
}

/* ══ TABLET ══ */
@media (max-width: 1024px) {
    html body .inside-site-content {
        flex-direction: column !important;
        gap: 16px !important;
    }
    html body .content-area,
    html body .widget-area {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ══ MOBILE ══ */
@media (max-width: 768px) {
    html body .grid-container,
    html body .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    html body .inside-site-content {
        flex-direction: column !important;
        padding: 12px !important;
        gap: 12px !important;
    }
    html body .content-area,
    html body .widget-area {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    html body .inside-header {
        padding: 0 14px !important;
    }
    html body .inside-navigation {
        padding: 0 14px !important;
    }
}