/*
 * Responsive page shell.
 *
 * The legacy bundle fixes the three columns at 300 / 700 / 330 pixels and
 * reorders them with relative left/right offsets.  This file is loaded after
 * that bundle and defines the four supported layout states without changing
 * the layout of individual content modules.
 */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

:root {
  --site-navbar-height: 52px;
  --sidebar-sticky-gap: 12px;
}

/* Keep the primary navigation in view without removing it from document flow. */
.navbar-top {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1030;
  border: 0 !important;
}

html.mobile-navigation-open .navbar-top {
  position: fixed !important;
}

#content,
#content > .container,
#content-center {
  min-width: 0;
  max-width: 100%;
}

#content > .container > .row {
  min-width: 0;
}

#content img,
#content video,
#content iframe,
#content object,
#content embed {
  max-width: 100%;
}

/* Deliberately wide data must scroll inside its own wrapper, never the page. */
.table-responsive,
#content .nav-tabs,
#content .btn-toolbar,
#content .btn-group-justified-float {
  max-width: 100%;
}

@media (max-width: 767px) {
  /* mobile-refresh uses 12px container padding while Bootstrap rows use -15px */
  #content > .container > .row {
    margin-right: -12px;
    margin-left: -12px;
  }

  /* The guest account label is wider than half of a 320px header. */
  #header .header-account-column .btn {
    max-width: 100%;
    white-space: normal;
  }
}

/* Mobile and tablet: the central column is the only content column. */
@media (max-width: 991px) {
  #content #column-left,
  #content #column-right {
    display: none !important;
  }

  #content > .container > .row {
    display: block;
  }

  #content-center,
  #content-center.col-2 {
    position: relative;
    right: auto !important;
    left: auto !important;
    float: none !important;
    width: 100% !important;
  }
}

/* Compact header and container shared by both tablet states. */
@media (min-width: 768px) and (max-width: 1379px) {
  .container {
    width: 100% !important;
    max-width: 1080px;
  }

  #header .container {
    max-width: 760px;
  }

  #header .row {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #header .header-logo-column,
  #header .header-social-column,
  #header .header-layout-break {
    display: none !important;
  }

  #header .header-stats-column,
  #header .header-account-column {
    right: auto;
    left: auto;
    float: none;
    width: auto;
  }

  #header .header-stats-column {
    flex: 1 1 440px;
    max-width: 460px;
  }

  #header .header-account-column {
    flex: 0 1 280px;
    max-width: 280px;
  }

  #header .header-stats-column .col-head {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
  }

  #header .header-stats-column .col-head > li:not(.counter) {
    display: none;
  }

  #header .header-account-column .col-head {
    min-width: 0;
  }

  #header .header-account-column .btn {
    max-width: 100%;
  }
}

/* Wide tablet and zoomed desktop: centre first, right sidebar second. */
@media (min-width: 992px) and (max-width: 1379px) {
  #content #column-left {
    display: none !important;
  }

  #content > .container {
    max-width: 1080px;
  }

  #content > .container > .row {
    display: flex;
    align-items: flex-start;
  }

  #content-center,
  #content-center.col-2 {
    position: relative;
    right: auto !important;
    left: auto !important;
    order: 1;
    float: none !important;
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto;
  }

  #content #column-right {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--sidebar-sticky-top, calc(var(--site-navbar-height) + var(--sidebar-sticky-gap))) !important;
    right: auto !important;
    left: auto !important;
    display: block;
    order: 2;
    float: none !important;
    width: 300px !important;
    min-width: 300px;
    flex: 0 0 300px;
  }
}

@media (min-width: 1200px) and (max-width: 1379px) {
  #content #column-right {
    width: 330px !important;
    min-width: 330px;
    flex-basis: 330px;
  }
}

/* Desktop: preserve the established 300 / flexible centre / 330 composition. */
@media (min-width: 1380px) {
  #content > .container > .row {
    display: flex;
    align-items: flex-start;
  }

  #content #column-left,
  #content #column-right,
  #content-center,
  #content-center.col-2 {
    position: relative;
    right: auto !important;
    left: auto !important;
    float: none !important;
    min-width: 0;
  }

  #content #column-left {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--sidebar-sticky-top, calc(var(--site-navbar-height) + var(--sidebar-sticky-gap))) !important;
    order: 1;
    width: 300px !important;
    flex: 0 0 300px;
  }

  #content-center,
  #content-center.col-2 {
    order: 2;
    width: auto !important;
    flex: 1 1 700px;
  }

  #content #column-right {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--sidebar-sticky-top, calc(var(--site-navbar-height) + var(--sidebar-sticky-gap))) !important;
    order: 3;
    width: 330px !important;
    flex: 0 0 330px;
  }
}