/* FxScouts Unsafe Reviews bundle v1.0 (2025-09-30)
   Purpose: fix mobile overflow, logo visibility, equal row heights, and responsive grids
   Scope: safe to include sitewide; optionally scope via body.unsafe-review
*/

/* Safe base */
* { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; }

/* Containers */
.wrap { max-width: 1160px; margin-inline: auto; padding-inline: 20px; }

/* Header & nav */
header.site .topbar { display: flex; align-items: center; gap: 18px; padding: 14px 0; flex-wrap: wrap; }
.brand-logo { height: 28px; width: auto; display: block; }
nav.primary { margin-left: auto; }
nav.primary ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
nav.primary li { flex: 0 0 auto; }

/* Equal-height Quick facts rows */
.facts-grid { display: grid; }
.fact-pair { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-top: 1px solid var(--border, #e6eaf2); }
.fact-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; min-height: 48px; height: 100%; }
.fact-v { font-weight: 700; text-align: right; }

/* Tables never blow the layout */
table.data { width: 100%; border-collapse: separate; border-spacing: 0; }

/* Radar/svg scaling */
.radar svg { max-width: 100%; height: auto; }

/* Ensure grid wrappers don't force desktop layout on mobile */
.hero-card, .ratings { display: grid; }

/* Mobile tweaks */
@media (max-width: 760px){
  .wrap { padding-inline: 16px; }

  nav.primary { order: 2; width: 100%; }
  nav.primary ul { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 6px; }

  .meta, .crumbs { display: flex; flex-wrap: wrap; gap: 8px; }
  .crumbs a, .crumbs strong, .fact-v { overflow-wrap: anywhere; }

  .safety-banner { display: grid; grid-template-columns: 1fr; align-items: flex-start; }
  .hero-card, .ratings { grid-template-columns: 1fr !important; padding: 16px; }
  .facts-panel .fact-cell { align-items: flex-start; }

  /* Prevent wide content pushing the viewport */
  table.data { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 360px){
  .brand-logo { height: 22px; }
  .page-title { font-size: 24px; }
  .score-card { padding: 14px; }
  .score-card .score-ring { width: 96px; height: 96px; }
}