/* ============================================================
   UPPING DIGITAL — mobile layout fixes
   Loaded AFTER each page's own <style> so these rules win.
   Purpose: stop horizontal overflow on phones. Nothing here
   changes the desktop design.
   ============================================================ */

/* --- 1. Never let the page scroll sideways ---------------------
   `clip` (not `hidden`) so position:sticky / fixed headers keep
   working normally. Applied to both elements for browser cover. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* --- 2. Decorative background blobs -----------------------------
   These are absolutely-positioned gradient circles that sit wider
   than the viewport by design. They must not extend the scroll
   area — clip them at their container instead. */
.hero,
.hero-video-wrap,
section,
header { overflow-x: clip; }

/* --- 3. Media never wider than its container -------------------- */
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

/* --- 4. Fixed-width blocks that break narrow screens ------------
   .stack-viz / .stack-acc are hard-coded to 330px, which overflows
   a 320px phone. Let them shrink. */
@media (max-width: 480px) {
  .stack-viz,
  .stack-acc,
  .sa-item,
  .sa-head { max-width: 100%; width: 100%; box-sizing: border-box; }
}

/* --- 5. Long unbroken strings (URLs, emails, tokens) ------------
   Prevent a single long word from forcing the page wider. */
@media (max-width: 640px) {
  p, li, td, th, h1, h2, h3, h4, h5, h6,
  .sa-head, .lead, .sub { overflow-wrap: break-word; word-wrap: break-word; }
}

/* --- 6. Tables scroll inside themselves, not the page ----------- */
@media (max-width: 768px) {
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- 7. Content must never be lost if JS fails -------------------
   .fade-in starts at opacity:0 and waits for JS to add .visible.
   If scripts are blocked or fail, force everything visible after
   the entrance animation window has passed. */
@keyframes ud-failsafe-reveal { to { opacity: 1; transform: none; } }
.fade-in { animation: ud-failsafe-reveal 0s 2.5s forwards; }

/* --- 8. WCAG AA contrast on the primary green CTA ---------------
   White text on the light-green gradient (#16a34a→#22c55e) scored
   ~3.3:1 (AA needs 4.5:1). Darken to a green that passes while
   staying on-brand. Applies to the button, the "popular" flag and
   the mobile sticky bar across all UppingShield / Pentest pages. */
.sh-btn,
.sh-cta-bar .sh-btn,
.pr-flag {
  background: linear-gradient(135deg, #166534, #15803d) !important;
}