/* PacWest sitewide mobile polish — narrow-viewport overrides for shared
   nav + data-table patterns. Loaded via <link> in every public HTML page so
   one fix lands across the entire site (revenue-projection, use-cases,
   roi-calculator, faq, about, all BOFU pages, blog posts).
   ────────────────────────────────────────────────────────────────────── */

/* ── NAV (logo + back link + agency-blog link + CTA button) ────────── */
/* Desktop base styling for the Agency Blog link — matches .nav-back. */
.nav-blog-link {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal, #36595C);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-blog-link:hover { color: var(--orange, #F97330); }

/* "NEW" badge appended to Agency Blog links via /pacwest-new-badge.js. */
.nav-new-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.08rem 0.42rem 0.1rem;
  background: var(--orange, #F97330);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  border-radius: 50px;
  vertical-align: middle;
  transform: translateY(-1px);
  box-shadow: 0 0 0 0 rgba(249, 115, 48, 0.55);
  animation: pacwest-new-pulse 2.4s ease-out infinite;
}
@keyframes pacwest-new-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(249, 115, 48, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(249, 115, 48, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(249, 115, 48, 0);    }
}
@media (prefers-reduced-motion: reduce) {
  .nav-new-badge { animation: none; }
}

/* Homepage mobile-only action row (Agency Blog + CTA). Hidden by default —
   surfaces only when the homepage's .nav-links UL is hidden (≤900px on
   index.html). */
.nav-mobile-actions { display: none; }
@media (max-width: 900px) {
  nav .nav-mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }
}

@media (max-width: 720px) {
  nav {
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
  .nav-right,
  .nav-mobile-actions {
    gap: 0.5rem !important;
  }
  .nav-back {
    /* Logo links home; the redundant text-link wraps and collides with the
       CTA, so hide it on small screens. The "Agency Blog" link stays. */
    display: none !important;
  }
  .nav-blog-link {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0.35rem 0 !important;
    color: var(--teal, #36595C) !important;
  }
  .nav-new-badge {
    margin-left: 0.3rem !important;
    font-size: 0.5rem !important;
    padding: 0.06rem 0.32rem 0.08rem !important;
  }
  .nav-cta {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.74rem !important;
    white-space: nowrap !important;
  }
  .nav-logo {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  .nav-brand-top {
    font-size: 1.1rem !important;
    white-space: nowrap !important;
  }
  .nav-brand-bottom {
    white-space: nowrap !important;
  }
}

/* ── PROJECTION / DATA TABLES — scroll horizontally cleanly ─────────── */
/* The page already wraps the table in <div style="overflow-x:auto">, but
   the table has width:100% with no min-width, so on mobile the browser
   crushes the columns and breaks header words letter-by-letter. Forcing a
   min-width makes the wrapper's horizontal scroll engage as intended. */
@media (max-width: 720px) {
  .proj-table {
    min-width: 640px !important;
    font-size: 0.78rem !important;
  }
  .proj-table th,
  .proj-table td {
    white-space: nowrap !important;
    padding: 0.65rem 0.7rem !important;
  }
  /* Compare table on use-cases.html — same fix */
  .compare-table {
    min-width: 560px !important;
    font-size: 0.78rem !important;
  }
  .compare-table th,
  .compare-table td {
    white-space: nowrap !important;
    padding: 0.6rem 0.65rem !important;
  }
  /* Visual hint that the table scrolls horizontally */
  .table-section > div[style*="overflow-x"],
  .use-case-section div[style*="overflow-x"] {
    position: relative;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    border-radius: 12px;
    box-shadow: inset -16px 0 16px -16px rgba(54, 89, 92, 0.18);
  }
  .table-section > div[style*="overflow-x"]::after {
    content: "← swipe →";
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: var(--muted, #7a8a8c);
    margin-top: 0.45rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
  }
}