/* Responsive layer for the Sentact Brand Guidelines microsite.
 *
 * The desktop design is built from fixed inline styles (pixel-accurate to the
 * Claude Design source). These rules override that layout at narrow widths via
 * attribute-substring selectors + !important (inline styles otherwise win), so
 * the desktop markup stays untouched. Mobile nav is a slide-in drawer wired in
 * app.js (toggles `body.nav-open`).
 */

/* hamburger toggle — injected by app.js, hidden on desktop */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 14px;
  flex: none;
  border: 1px solid #E6E9EF;
  border-radius: 9px;
  background: #fff;
  color: #112A52;
  cursor: pointer;
  padding: 0;
}
.nav-toggle:active { background: #F4F6FA; }

#nav-backdrop {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: rgba(17, 42, 82, .35);
  z-index: 40;
}

/* ===== Tablet / mobile: sidebar becomes an off-canvas drawer ===== */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  #bg-sidebar {
    position: fixed;
    top: 64px;
    bottom: 0;
    left: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 18px 50px rgba(17, 42, 82, .22);
  }
  body.nav-open #bg-sidebar { transform: translateX(0); }
  body.nav-open #nav-backdrop { display: block; }
}

/* ===== Narrow: collapse grids, scale spacing + headings ===== */
@media (max-width: 760px) {
  /* multi-column grids → two-up */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* two-up + label/value rows → single column */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:200px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* tighter section + footer padding */
  section[style*="padding:56px 56px"] {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  footer[style*="padding:34px 56px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* scale down the large display type */
  h1[style] { font-size: 32px !important; }
  h2[style] { font-size: 26px !important; }
  h3[style] { font-size: 21px !important; }
  [style*="font-size:84px"] { font-size: 52px !important; }
  [style*="font-size:48px"] { font-size: 34px !important; }
  [style*="font-size:46px"] { font-size: 32px !important; }

  /* wide tables reflow into stacked "label / value" cards (no h-scroll, so
     vertical touch-scrolling isn't hijacked). data-label set in app.js. */
  #colors table, #colors tbody, #colors tr, #colors td,
  #owners table, #owners tbody, #owners tr, #owners td {
    display: block;
    width: auto;
  }
  #colors thead, #owners thead { display: none; }

  #colors tbody tr, #owners tbody tr {
    padding: 14px 16px;
    border-top: 1px solid #F2F4F7;
  }
  #colors tbody tr:first-child, #owners tbody tr:first-child { border-top: none; }

  #colors td, #owners td { padding: 6px 0 !important; }
  #colors td::before, #owners td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94A7C6;
  }
}

/* ===== Very small phones: single-column swatches/cards ===== */
@media (max-width: 460px) {
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  header[style] { padding-left: 14px !important; padding-right: 12px !important; }
}

/* ===== Kill sideways scroll on the content pane ===== */
@media (max-width: 760px) {
  /* the content pane is the real scroller — clamp its horizontal axis so a
     touch swipe can only move the page vertically */
  #bg-content { overflow-x: hidden; }

  /* keep grid/flex children from forcing their track wider than the screen,
     and never let media exceed the viewport */
  #bg-content [style*="display:grid"] > * { min-width: 0; }
  #bg-content img { max-width: 100%; height: auto; }

  /* fixed-size logo specimen rows (Minimum Scale): wrap instead of overflow */
  #logo-scale [style*="align-items:flex-end"] {
    flex-wrap: wrap !important;
    gap: 18px !important;
  }

  /* shrink oversized demo paddings + the clear-space mark so they fit */
  [style*="padding:64px;"] { padding: 24px !important; }   /* clear-space dashed box */
  [style*="padding:56px;"] { padding: 22px !important; }   /* clear-space card */
  [style*="padding:48px"]  { padding: 24px !important; }   /* hero lock-up */
  [style*="padding:44px"]  { padding: 22px !important; }   /* buttons card */
  [style*="padding:40px"]  { padding: 22px !important; }   /* typography card */
  [style*="padding:36px"]  { padding: 22px !important; }   /* scale cards */
  #logo-clearspace img { height: 44px !important; }
}