/*
 * trust-bar-768px-scroll-1537288.css
 * Task #1537288: Fix trust bar overflow at 768px tablet — first word clips without scroll affordance
 *                  Fix logo wordmark clipping behind Pricing nav button at 375px mobile
 *
 * Owns: trust bar responsive layout at tablet (768px), logo sizing at mobile (375px)
 * Does NOT own: announcement bar, header nav menus, mega dropdowns
 */

/* ══════════════════════════════════════════════════════════════════
   ── 1. TRUST BAR: Stack into 2 rows at 768px tablet
   ───────────────────────────────────────────────────────────────────
   Problem: .sr-gtb has overflow:hidden (inline) + inner div flex-wrap:nowrap.
   At 768px viewport, 5 badges with full text (~755px) overflow the inner container
   (720px after padding). The parent's overflow:hidden clips the centered content.
   Solution: Override flex-wrap to wrap so items that don't fit go to second row.
   All badges fully visible without scrolling.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 600px) and (max-width: 900px) {
  /* Force wrap on the inner flex row */
  .sr-gtb > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow-x: visible !important;
    max-width: 100% !important;
  }

  /* Items can shrink and wrap to next row
     !important needed because inline styles (flex-shrink:0, white-space:nowrap)
     have higher specificity than external CSS */
  .sr-gtb > div > a,
  .sr-gtb > div > span {
    flex-shrink: 1 !important;
    white-space: normal !important;
  }
}

/* 375px mobile: tighter stacking */
@media (max-width: 480px) {
  .sr-gtb > div {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0.5rem 1rem !important;
  }

  .sr-gtb > div > a,
  .sr-gtb > div > span {
    /* Each item takes exactly what it needs, no overflow */
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   ── 2. LOGO CLIPPING AT 375px MOBILE
   ───────────────────────────────────────────────────────────────────
   Problem: .hn-inner has overflow:hidden. .hn-logo has flex-shrink:0, preventing
   the logo from shrinking below its content size. At 375px:
   - Logo (with icon + "SettlementRadar" text + tagline) ≈ 220px
   - .hn-mobile-pricing "Pricing" button ≈ 80px
   - .hn-hamburger (48px) + gap ≈ 56px
   - Total: ≈ 356px, leaving ~19px for left edge padding
   The logo clips behind the Pricing nav button due to flex-shrink:0.
   Solution: Allow .hn-logo to shrink (min-width:0) + reduce logo tag on narrow mobile.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Allow logo flex item to shrink below content size */
  .hn-logo {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    margin-right: 0.5rem !important;
  }

  /* Reduce logo name text on narrow mobile */
  .hn-logo-name {
    font-size: 1rem !important;
  }

  /* Hide tagline on narrow mobile to reclaim space */
  .hn-logo-tag {
    display: none !important;
  }

  /* Make logo SVG slightly smaller on narrow mobile */
  .hn-logo-svg {
    width: 32px !important;
    height: 32px !important;
  }
}

@media (max-width: 360px) {
  /* Even narrower: further reduce logo text */
  .hn-logo-name {
    font-size: 0.9rem !important;
  }
  .hn-logo {
    margin-right: 0.25rem !important;
  }
}