/* v906 — Useful Guide root layout fix
   Fixes the long-standing offset/overlap issue by making the hero, main rail,
   and sidebar share one sizing system. Do not patch individual cards here. */

body.useful-guide-layout-rootfix-v906{
  --ug-rail-v906: 1368px;
  --ug-gutter-v906: clamp(28px, 5.2vw, 96px);
  --ug-sidebar-v906: 320px;
  --ug-gap-v906: 28px;
}

body.useful-guide-layout-rootfix-v906,
body.useful-guide-layout-rootfix-v906 *{
  box-sizing: border-box !important;
}

/* Keep full-width bands on the viewport, but never let their contents use
   a different rail from the content/sidebar area. */
body.useful-guide-layout-rootfix-v906 .guide-hero,
body.useful-guide-layout-rootfix-v906 main,
body.useful-guide-layout-rootfix-v906 footer{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow-x: clip !important;
}

body.useful-guide-layout-rootfix-v906 .guide-hero > .container,
body.useful-guide-layout-rootfix-v906 .vge-subpage-viewport-rail-v441G,
body.useful-guide-layout-rootfix-v906 .useful-guide-shell-v890,
body.useful-guide-layout-rootfix-v906 footer > .container,
body.useful-guide-layout-rootfix-v906 .footer-grid{
  width: min(calc(100vw - (var(--ug-gutter-v906) * 2)), var(--ug-rail-v906)) !important;
  max-width: var(--ug-rail-v906) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}

/* Override the old Useful Guide hero/container patches that used a separate
   alignment system and made the top block drift left of the content rail. */
body.useful-guide-layout-rootfix-v906 .guide-hero .container,
body.useful-guide-layout-rootfix-v906 .section > .container,
body.useful-guide-layout-rootfix-v906 .section .container{
  max-width: var(--ug-rail-v906) !important;
}

body.useful-guide-layout-rootfix-v906 .guide-hero-copy{
  max-width: 980px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.useful-guide-layout-rootfix-v906 .guide-hero-copy h1{
  max-width: 1040px !important;
}

body.useful-guide-layout-rootfix-v906 .guide-hero-copy p{
  max-width: 1160px !important;
}

/* The shell is the only two-column parent. The main column is allowed to shrink;
   wide cards/tables cannot push the sidebar off-screen anymore. */
body.useful-guide-layout-rootfix-v906 .useful-guide-shell-v890{
  display: grid !important;
  grid-template-columns: minmax(0, calc(100% - var(--ug-sidebar-v906) - var(--ug-gap-v906))) var(--ug-sidebar-v906) !important;
  gap: var(--ug-gap-v906) !important;
  align-items: start !important;
}

body.useful-guide-layout-rootfix-v906 .useful-guide-main-v890,
body.useful-guide-layout-rootfix-v906 .guide-hub-intro-v513G,
body.useful-guide-layout-rootfix-v906 .guide-category-section-v513G,
body.useful-guide-layout-rootfix-v906 .guide-card-grid-v513G,
body.useful-guide-layout-rootfix-v906 .guide-route-grid-v513G{
  min-width: 0 !important;
  max-width: 100% !important;
}

body.useful-guide-layout-rootfix-v906 .guide-hub-intro-v513G{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.useful-guide-layout-rootfix-v906 .guide-card-grid-v513G{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.useful-guide-layout-rootfix-v906 .useful-guide-emergency-sidebar-v890{
  width: var(--ug-sidebar-v906) !important;
  min-width: 0 !important;
  max-width: var(--ug-sidebar-v906) !important;
  justify-self: end !important;
}

body.useful-guide-layout-rootfix-v906 .useful-guide-emergency-sidebar-v890 .emergency-side-box-v787FR{
  max-width: 100% !important;
  overflow: hidden !important;
}

/* At laptop/zoom widths, stop trying to preserve a right sidebar. This is the
   safe breakpoint for the user's repeated screenshots where the sidebar cuts
   content or visually detaches from the page. */
@media (max-width: 1500px){
  body.useful-guide-layout-rootfix-v906{
    --ug-gutter-v906: clamp(28px, 6vw, 88px);
  }
  body.useful-guide-layout-rootfix-v906 .useful-guide-shell-v890{
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.useful-guide-layout-rootfix-v906 .useful-guide-emergency-sidebar-v890{
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px){
  body.useful-guide-layout-rootfix-v906{
    --ug-gutter-v906: 20px;
  }
  body.useful-guide-layout-rootfix-v906 .guide-hub-intro-v513G,
  body.useful-guide-layout-rootfix-v906 .guide-card-grid-v513G,
  body.useful-guide-layout-rootfix-v906 .guide-route-grid-v513G,
  body.useful-guide-layout-rootfix-v906 .useful-guide-emergency-sidebar-v890{
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.useful-guide-layout-rootfix-v906 .hero-actions{
    flex-wrap: wrap !important;
  }
}

@media (max-width: 520px){
  body.useful-guide-layout-rootfix-v906{
    --ug-gutter-v906: 16px;
  }
  body.useful-guide-layout-rootfix-v906 .hero-actions .btn{
    width: 100% !important;
    justify-content: center !important;
  }
}