/* v911 — Useful Guide hero rail alignment fix
   Restore the right Emergency-style sidebar and align the top hero copy with
   the same content rail used by the guide body below. */

body.useful-guide-hero-rail-align-v911{
  --ug-v911-rail: 1520px;
  --ug-v911-gutter: clamp(32px, 3.6vw, 56px);
  --ug-v911-sidebar: 320px;
  --ug-v911-gap: 28px;
}

body.useful-guide-hero-rail-align-v911,
body.useful-guide-hero-rail-align-v911 *{
  box-sizing: border-box !important;
}

/* One shared rail for the hero block, main guide body and footer.
   This fixes the visible issue where the Useful Guide hero started at the
   viewport edge while the content below started farther inside. */
body.useful-guide-hero-rail-align-v911 .guide-hero > .container,
body.useful-guide-hero-rail-align-v911 .vge-subpage-viewport-rail-v441G,
body.useful-guide-hero-rail-align-v911 .useful-guide-shell-v890,
body.useful-guide-hero-rail-align-v911 footer > .container,
body.useful-guide-hero-rail-align-v911 .footer-grid{
  width: min(calc(100vw - (var(--ug-v911-gutter) * 2)), var(--ug-v911-rail)) !important;
  max-width: var(--ug-v911-rail) !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;
}

body.useful-guide-hero-rail-align-v911 .guide-hero,
body.useful-guide-hero-rail-align-v911 main,
body.useful-guide-hero-rail-align-v911 footer{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow-x: clip !important;
}

@supports not (overflow: clip){
  body.useful-guide-hero-rail-align-v911 .guide-hero,
  body.useful-guide-hero-rail-align-v911 main,
  body.useful-guide-hero-rail-align-v911 footer{
    overflow-x: hidden !important;
  }
}

/* Keep the top Useful Guide copy exactly on the left edge of the guide body. */
body.useful-guide-hero-rail-align-v911 .guide-hero-copy,
body.useful-guide-hero-rail-align-v911 .guide-hero-grid{
  margin-left: 0 !important;
  padding-left: 0 !important;
  transform: none !important;
}

body.useful-guide-hero-rail-align-v911 .guide-hero-copy{
  max-width: 1160px !important;
}

body.useful-guide-hero-rail-align-v911 .guide-hero-copy h1{
  max-width: 1180px !important;
}

/* Restore/keep the Emergency-style sidebar on the right for desktop.
   The main column is allowed to shrink instead of pushing the sidebar away. */
body.useful-guide-hero-rail-align-v911 .useful-guide-shell-v890{
  display: grid !important;
  grid-template-columns: minmax(0, calc(100% - var(--ug-v911-sidebar) - var(--ug-v911-gap))) var(--ug-v911-sidebar) !important;
  gap: var(--ug-v911-gap) !important;
  align-items: start !important;
}

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

body.useful-guide-hero-rail-align-v911 .useful-guide-emergency-sidebar-v890{
  position: sticky !important;
  top: 96px !important;
  width: var(--ug-v911-sidebar) !important;
  max-width: var(--ug-v911-sidebar) !important;
  min-width: 0 !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

body.useful-guide-hero-rail-align-v911 .useful-guide-emergency-sidebar-v890 .emergency-side-box-v787FR,
body.useful-guide-hero-rail-align-v911 .useful-guide-emergency-sidebar-v890 .emergency-contact-card-v787GS,
body.useful-guide-hero-rail-align-v911 .useful-guide-emergency-sidebar-v890 .emergency-side-link-card-v787FR{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
}

/* Only collapse on genuinely narrow screens; do not remove the desktop sidebar. */
@media (max-width: 1180px){
  body.useful-guide-hero-rail-align-v911 .useful-guide-shell-v890{
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.useful-guide-hero-rail-align-v911 .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;
    margin-top: 26px !important;
  }
}

@media (max-width: 760px){
  body.useful-guide-hero-rail-align-v911{
    --ug-v911-gutter: 18px;
  }
  body.useful-guide-hero-rail-align-v911 .guide-hub-intro-v513G,
  body.useful-guide-hero-rail-align-v911 .guide-card-grid-v513G,
  body.useful-guide-hero-rail-align-v911 .guide-route-grid-v513G,
  body.useful-guide-hero-rail-align-v911 .useful-guide-emergency-sidebar-v890{
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.useful-guide-hero-rail-align-v911 .hero-actions{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.useful-guide-hero-rail-align-v911 .hero-actions .btn{
    width: 100% !important;
    justify-content: center !important;
  }
}