/**
 * Public Page View styles — local_pagebuilder/view.php
 * Loaded via $PAGE->requires->css() in view.php
 *
 * Architecture:
 *   body.pb-page-fullwidth   → 100 vw, every Boost wrapper broken out
 *   body.pb-page-fixed-width → same escape, then re-constrained by inline wrapper
 *   (default / no class)     → ultra-wide override: 2600px max on all wrappers
 *
 * Selector strategy — covers:
 *   Moodle 3.9–4.5  Boost / Classic / Moove / Adaptable
 *   Bootstrap 4 + 5 container classes
 *   Moodle 4.x drawers, nav-drawer, main-inner
 *
 * @package    local_pagebuilder
 * @copyright  2026 ghulam.dastgir@paktaleem.net
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/* ═══════════════════════════════════════════════════════════════════════════
   0. BASE RESET — applied to every Page Builder view page
   ═══════════════════════════════════════════════════════════════════════════ */
#pb-page-view {
    margin-top:  0 !important;
    padding-top: 0 !important;
    box-sizing:  border-box;
}
#pb-page-view .pb-row { width: 100%; }

/* Hide Moodle page heading for frontpage-layout pages */
body.pagelayout-frontpage #page-header,
body.pagelayout-frontpage .page-header-headings,
body.pagelayout-frontpage #page-content > .pb-page-heading {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   1. ULTRA-WIDE DEFAULT MODE  (no extra body class)
      Override Boost/Bootstrap container max-width to allow 2600 px+
      This applies to ALL Page Builder view pages unconditionally.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Moodle 3.x + 4.x core layout wrappers ─────────────────────────────── */
#pb-page-view ~ * #page,
#page,
#page-wrapper,
#page-content,
#region-main-box,
#region-main,
.main-inner,
.drawers,
.drawercontent,
[data-region="drawers"],
[data-region="main-content"],
[data-region="blocks-column"],
[data-region="sidebar-left"],
[data-region="sidebar-right"],
/* Bootstrap 4 containers */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
/* Moodle 4 specific */
.page-context-header,
#nav-drawer + .drawers,
.pagelayout-base,
.pagelayout-standard,
.pagelayout-frontpage {
    max-width: 2600px !important;
}

/* The main content column itself — let it stretch */
#region-main {
    width:     100% !important;
    max-width: 2600px !important;
    flex:      1 1 auto !important;
}

/* Remove left/right auto-centering padding that Bootstrap adds */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    padding-left:  0.75rem !important;
    padding-right: 0.75rem !important;
    margin-left:   auto !important;
    margin-right:  auto !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. FULL-WIDTH MODE  (body.pb-page-fullwidth)
      Full viewport-edge bleed — no max-width on ANY wrapper.
      Use when pagewidth = '' (Full Page option in the create modal).
   ═══════════════════════════════════════════════════════════════════════════ */
body.pb-page-fullwidth #page,
body.pb-page-fullwidth #page-wrapper,
body.pb-page-fullwidth #page-content,
body.pb-page-fullwidth #region-main-box,
body.pb-page-fullwidth #region-main,
body.pb-page-fullwidth .main-inner,
body.pb-page-fullwidth .drawers,
body.pb-page-fullwidth .drawercontent,
body.pb-page-fullwidth [data-region="drawers"],
body.pb-page-fullwidth [data-region="main-content"],
body.pb-page-fullwidth [data-region="blocks-column"],
body.pb-page-fullwidth [data-region="sidebar-left"],
body.pb-page-fullwidth [data-region="sidebar-right"],
body.pb-page-fullwidth .container,
body.pb-page-fullwidth .container-fluid,
body.pb-page-fullwidth .container-sm,
body.pb-page-fullwidth .container-md,
body.pb-page-fullwidth .container-lg,
body.pb-page-fullwidth .container-xl,
body.pb-page-fullwidth .container-xxl,
body.pb-page-fullwidth .pagelayout-base,
body.pb-page-fullwidth .pagelayout-standard,
body.pb-page-fullwidth .page-context-header {
    max-width:    100vw !important;
    width:        100%  !important;
    padding-left:  0    !important;
    padding-right: 0    !important;
    margin-left:   0    !important;
    margin-right:  0    !important;
}

body.pb-page-fullwidth #pb-page-view {
    width:     100%;
    max-width: 100%;
    padding:   0;
    margin:    0;
}

/* Remove any Boost theme inner padding that bleeds in */
body.pb-page-fullwidth #page-content {
    padding: 0 !important;
}
body.pb-page-fullwidth #region-main-box {
    padding: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. FIXED-WIDTH MODE  (body.pb-page-fixed-width)
      Escape the Moodle container then let our own <div> apply the max-width.
      Use when pagewidth = '1200px' (Container option).
   ═══════════════════════════════════════════════════════════════════════════ */
body.pb-page-fixed-width #page,
body.pb-page-fixed-width #page-wrapper,
body.pb-page-fixed-width #page-content,
body.pb-page-fixed-width #region-main-box,
body.pb-page-fixed-width #region-main,
body.pb-page-fixed-width .main-inner,
body.pb-page-fixed-width .drawers,
body.pb-page-fixed-width .drawercontent,
body.pb-page-fixed-width [data-region="drawers"],
body.pb-page-fixed-width [data-region="main-content"],
body.pb-page-fixed-width [data-region="blocks-column"],
body.pb-page-fixed-width [data-region="sidebar-left"],
body.pb-page-fixed-width [data-region="sidebar-right"],
body.pb-page-fixed-width .container,
body.pb-page-fixed-width .container-fluid,
body.pb-page-fixed-width .container-sm,
body.pb-page-fixed-width .container-md,
body.pb-page-fixed-width .container-lg,
body.pb-page-fixed-width .container-xl,
body.pb-page-fixed-width .container-xxl {
    max-width:    100% !important;
    width:        100% !important;
    padding-left:  0   !important;
    padding-right: 0   !important;
    margin-left:   0   !important;
    margin-right:  0   !important;
}

body.pb-page-fixed-width #pb-page-view {
    width:   100%;
    margin:  0;
    padding: 0;
}
/* The constraining inner wrapper (max-width: {{pagewidth}}) is applied
   inline via the {{#isfixedwidth}} block in page_view.mustache */


/* ═══════════════════════════════════════════════════════════════════════════
   4. MOODLE 4.x BOOST DRAWER OVERRIDES
      Moodle 4 wraps content in .drawers > .drawercontent > #region-main.
      We also need to let the drawer content area expand.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Allow drawer content to grow beyond Boost's default 1290px cap */
.drawercontent {
    max-width: 2600px !important;
    flex:      1 1 auto !important;
}

/* nav-drawer open/closed shouldn't restrict the content column */
.drawer-open-left  .drawercontent,
.drawer-open-right .drawercontent {
    max-width: 2600px !important;
}

/* Moodle 4 uses role="main" on the region-main wrapper */
[role="main"] {
    max-width: 2600px !important;
    width:     100%   !important;
}

/* Moove / Adaptable / Classic theme compat */
#page-navbar,
#page-header {
    max-width: 2600px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. NAVIGATION / HEADER — keep nav at full width but don't restrict it
   ═══════════════════════════════════════════════════════════════════════════ */
.navbar,
.primary-navigation,
.secondary-navigation,
.boost-union-topbar {
    max-width: 100% !important;
    width:     100% !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. RESPONSIVE — restore sensible behaviour on small screens
      Below 1024px, collapse everything to a standard mobile layout.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    #pb-page-view .pb-row {
        grid-template-columns: 1fr !important;
    }
    /* Let Bootstrap containers resume their normal padding */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left:  1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 767px) {
    #pb-page-view .pb-section {
        padding-left:  1rem !important;
        padding-right: 1rem !important;
    }
    /* Collapse multi-column sections on phone */
    #pb-page-view .pb-row {
        grid-template-columns: 1fr !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. FRONTPAGE MODE (body.pb-frontpage)
      Hide the secondary navbar and top padding when replacing the front page.
   ═══════════════════════════════════════════════════════════════════════════ */
body.pb-frontpage .secondary-navigation,
body.pb-frontpage .navbar-secondary,
body.pb-frontpage .tertiary-navigation,
body.pb-frontpage .course-header-actions {
    display: none !important;
}

body.pb-frontpage #page-content,
body.pb-frontpage #page-wrapper .main-inner,
body.pb-frontpage #region-main-box,
body.pb-frontpage #region-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.pb-frontpage #region-main .pb-section {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. OVERFLOW GUARD
      Prevent horizontal scroll appearing when content reaches 100vw.
   ═══════════════════════════════════════════════════════════════════════════ */
body.pb-page-fullwidth,
body.pb-page-fixed-width {
    overflow-x: hidden;
}
#pb-page-view {
    overflow-x: hidden;
}