/* Responsive retrofit.
   This kit was authored at 1280x820 with every layout expressed as an inline
   style, so there is no class layer to hang breakpoints on. Rewriting ~13 files
   of inline styles into classes would be a far larger change than adding this
   sheet, so the grid rules below match on the inline style attribute itself.
   Inline styles beat any selector, hence !important — that is the mechanism
   working as intended here, not a specificity hack. */

/* ---- Top bar ------------------------------------------------------------ */
.bsg-menutoggle { display: none }

/* The flat PID s12 nav is six items wide, where the old shipper build had three
   mega-menu triggers, and the brand lockup is 165px wide where the old mark was
   97px. Logo + six links + the phone number + Get Started stop fitting just
   under ~1160px, so the drawer takes over well before the 900px this sheet
   originally assumed — below that the actions row overflowed the viewport
   instead of collapsing. Measured, not guessed: 1101px overflowed by 10px. */
@media (max-width: 1180px) {
  .bsg-topnav,
  .bsg-topactions { display: none !important }
  .bsg-menutoggle { display: inline-flex; margin-left: auto }
}

.bsg-mobilemenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: calc(100vh - 82px);
  overflow-y: auto;
  padding: var(--space-5) var(--gutter-page) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: var(--bsg-black);
  border-top: 1px solid var(--neutral-300);
  border-bottom: 1px solid var(--neutral-300);
  box-shadow: var(--shadow-lg);
}
.bsg-mobilemenu-group { display: flex; flex-direction: column; gap: var(--space-1) }
/* The drawer is a flat list of the six PID s12 destinations now, so the grouped
   mega-menu styles (head / col / sub) that used to sit here have no markup left
   to attach to. Links are anchors rather than buttons so a long-press offers
   "open in new tab" and the URL is visible in the status bar. */
.bsg-mobilemenu-link {
  display: block;
  background: none; border: 0; padding: var(--space-3) 0; cursor: pointer;
  border-bottom: 1px solid var(--neutral-200, rgba(255,255,255,.08));
  font-family: var(--font-body); font-size: var(--text-md); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--neutral-800); text-align: left; text-decoration: none;
}
.bsg-mobilemenu-link:hover,
.bsg-mobilemenu-link[aria-current="page"] { color: var(--bsg-gold) }
.bsg-mobilemenu-tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); color: var(--neutral-700);
}

/* ---- Grids -------------------------------------------------------------- */
/* NOTE ON SELECTORS: React applies inline styles through the CSSOM, so the style
   attribute is browser-serialised WITH spaces — "display: flex", not
   "display:flex", and "repeat(3, 1fr)". Both spellings are matched below so these
   rules survive a change of renderer. */

/* Tablet: anything 3-up or wider drops to 2. */
@media (max-width: 1024px) {
  [style*="repeat(3,"],
  [style*="repeat(4,"],
  [style*="repeat(5,"],
  [style*="repeat(6,"],
  [style*="grid-template-columns: 1.3fr"],
  [style*="grid-template-columns:1.3fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Phone: flex rows must wrap. Several pair a heading with a flexShrink:0 button,
   which otherwise pushes the page sideways. Columns are excluded. */
@media (max-width: 760px) {
  [style*="display: flex"]:not([style*="flex-direction: column"]),
  [style*="display:flex"]:not([style*="flex-direction:column"]) { flex-wrap: wrap }

  /* Every grid becomes a single column, asymmetric splits included. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important }
}

/* ---- Rhythm and type at phone size ------------------------------------- */
@media (max-width: 640px) {
  :root {
    --section-y: 56px;
    --section-y-tight: 40px;
    --gutter-page: 18px;
    --text-5xl: 44px;
    --text-4xl: 34px;
    --text-3xl: 27px;
    --text-2xl: 23px;
  }
  /* Fixed panel heights set inline are too tall once stacked. */
  [style*="height: 520px"], [style*="height:520px"],
  [style*="height: 420px"], [style*="height:420px"],
  [style*="height: 400px"], [style*="height:400px"],
  [style*="height: 380px"], [style*="height:380px"] { height: 260px !important }
}

/* ---- Wide tables -------------------------------------------------------- */
/* DataTable keeps whiteSpace:nowrap, so it scrolls inside its own box rather
   than pushing the page sideways (WCAG 1.4.10 reflow). */
@media (max-width: 900px) {
  table { min-width: 560px }
}