/**
 * Mobile Perfection Fixes
 * Generated: 2026-01-08
 * Addresses issues from mobile-audit.json
 *
 * Issues Fixed:
 * - TEXT_CLIPPING: .feature-card height clipping (227px content in 200px container)
 * - TEXT_CLIPPING: .claire-island overflow (scrollWidth > clientWidth)
 * - MAIN overflow: Prevent any element from exceeding viewport width
 * - General mobile overflow prevention
 */

/* ==========================================================================
   GLOBAL MOBILE OVERFLOW PREVENTION
   ========================================================================== */

/* Prevent horizontal scroll on mobile */
/* NOTE: Only apply overflow-x: hidden to body, NOT html - applying to both causes Chrome scroll issues */
/* CRITICAL: overflow-y must be visible, not auto - otherwise Chrome wheel scroll breaks */
body {
  overflow-x: clip; /* Use clip instead of hidden to prevent creating a scroll container */
  overflow-y: visible !important; /* Prevent body from becoming scroll container - fixes Chrome wheel scroll */
  max-width: 100vw;
}

/* Main must also not be a scroll container */
main,
#main {
  overflow: visible !important;
}

/* Ensure all direct children of body respect viewport */
body>* {
  max-width: 100vw;
}

/* Universal box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==========================================================================
   MAIN CONTENT OVERFLOW FIX
   Main element was showing scrollWidth: 393px on viewports < 393px
   ========================================================================== */

main,
#main,
[role="main"] {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==========================================================================
   CLAIRE-ISLAND FIX
   scrollWidth was ~100px wider than clientWidth
   ========================================================================== */

.claire-island {
  max-width: 100% !important;
  width: calc(100% - 24px) !important;
  margin-left: 12px !important;
  margin-right: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.claire-island>*,
.claire-island__grid,
.claire-island__text,
.claire-island__visual,
.claire-island__ctas {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Claire island visual element - prevent overflow */
.claire-island__visual {
  max-width: 100% !important;
  width: 100% !important;
}

.claire-island__visual img,
.claire-island__visual svg,
.claire-island__visual video {
  max-width: 100% !important;
  height: auto !important;
}

/* Ensure island content is fluid on all mobile sizes */
@media (max-width: 430px) {
  .claire-island {
    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    padding: 24px 16px !important;
    border-radius: 1rem !important;
  }

  .claire-island__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .claire-island__headline {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  .claire-island__subhead {
    font-size: 0.95rem !important;
    max-width: 100% !important;
  }

  .claire-island__ctas {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .claire-island__ctas a,
  .claire-island__ctas button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   FEATURE-CARD FIX - DISABLED ON DESKTOP
   Original issue: scrollHeight: 227px vs clientHeight: 200px (27px clipped)
   Note: This was causing cards to switch from vertical to horizontal layout
   ========================================================================== */

/* ONLY apply on actual mobile/touch devices - NOT on desktop browsers */
@media only screen and (max-width: 430px) and (pointer: coarse) {
  #featureCarousel .feature-card {
    height: auto !important;
    min-height: 300px;
    overflow: visible !important;
  }

  /* Ensure feature card content doesn't clip */
  #featureCarousel .feature-card p,
  #featureCarousel .feature-card span,
  #featureCarousel .feature-card .feature-description,
  #featureCarousel .feature-card-content {
    overflow: visible;
    text-overflow: clip;
  }

  /* Feature card grid - ensure proper wrapping on small screens */
  .feature-cards,
  .features-grid,
  [class*="feature-grid"],
  [class*="features-grid"] {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  #featureCarousel .feature-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

/* ==========================================================================
   MOBILE MENU OVERLAY FIX
   scrollHeight slightly larger than viewport - allow scroll
   ========================================================================== */

.mobile-menu-overlay {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Ensure menu content fits and scrolls if needed */
.mobile-menu-overlay .mobile-nav,
.mobile-menu-overlay nav {
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

/* ==========================================================================
   IMAGE RESPONSIVENESS
   Ensure all images are fluid
   ========================================================================== */

img {
  max-width: 100%;
  height: auto;
}

/* SVG icons should scale */
svg {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   TABLE RESPONSIVENESS
   Wrap tables for horizontal scroll on small screens
   ========================================================================== */

table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* display: table is preserved - don't set display: block */
}

/* Comparison tables specifically */
.comparison-table,
[class*="comparison-table"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table table,
[class*="comparison-table"] table {
  min-width: 600px;
}

/* ==========================================================================
   LONG TEXT HANDLING
   Prevent long strings from breaking layout
   ========================================================================== */

a,
p,
span,
li,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6,
label {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Prevent word-breaking in navigation */
.nav-link,
.nav-link span,
.nav-link *,
.header-nav *,
.dropdown-item-premium *,
.mega-dropdown *,
.simple-dropdown * {
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  hyphens: none !important;
  white-space: nowrap !important;
}

/* URLs and technical text */
code,
pre,
.url,
[class*="url"],
.email {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* ==========================================================================
   FIXED WIDTH ELEMENTS - MAKE FLUID
   Replace fixed widths with fluid alternatives
   ========================================================================== */

@media (max-width: 430px) {

  /* Convert fixed widths to fluid */
  [style*="width: 280px"],
  [style*="width:280px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  [style*="width: 300px"],
  [style*="width:300px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  [style*="width: 320px"],
  [style*="width:320px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cards and containers */
  .card,
  [class*="-card"],
  [class*="_card"] {
    max-width: 100%;
    width: 100%;
  }

  /* Grids become single column */
  .grid,
  [class*="-grid"],
  [class*="_grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Flex containers wrap */
  .flex,
  [class*="flex-"],
  [style*="display: flex"],
  [style*="display:flex"] {
    flex-wrap: wrap !important;
  }
}

/* ==========================================================================
   COOKIE BANNER FIX
   Fixed element overlapping content - add safe area
   ========================================================================== */

.cookie-banner {
  max-height: 40vh;
  overflow-y: auto;
}

@media (max-width: 430px) {
  .cookie-banner {
    max-height: 50vh;
    font-size: 14px;
    padding: 16px !important;
  }

  .cookie-banner .cookie-buttons,
  .cookie-banner [class*="button"] {
    flex-direction: column;
    gap: 8px;
  }

  .cookie-banner button {
    width: 100%;
  }
}

/* ==========================================================================
   TAP TARGET SIZE IMPROVEMENTS
   Ensure interactive elements are at least 44x44px
   ========================================================================== */

@media (max-width: 430px) {

  /* Links in navigation */
  nav a,
  .nav a,
  [role="navigation"] a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
  }

  /* Buttons */
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  .btn,
  [class*="btn-"],
  [class*="-btn"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
  }

  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    min-height: 44px;
    padding: 12px;
    font-size: 16px;
    /* Prevents zoom on iOS */
  }

  /* Checkboxes and radios - increase tap area */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
  }

  /* Social links */
  .social-links a,
  [class*="social"] a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   SECTION PADDING ADJUSTMENTS
   Ensure consistent padding that doesn't cause overflow
   ========================================================================== */

@media (max-width: 430px) {
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .container,
  [class*="container"] {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
  }

  /* Hero sections */
  .hero,
  [class*="hero"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ==========================================================================
   HAMBURGER MENU VISIBILITY
   Ensure hamburger is visible on mobile (RingCentral-style collapse at 1230px)
   ========================================================================== */

@media (max-width: 1229px) {

  .hamburger-btn,
  .mobile-menu-btn,
  [aria-label*="menu"],
  [aria-label*="Menu"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Hide desktop nav on mobile */
  .desktop-nav,
  .nav-desktop,
  nav.desktop {
    display: none !important;
  }
}

/* ==========================================================================
   SPECIFIC ELEMENT FIXES
   Based on audit report element details
   ========================================================================== */

/* Screen reader only text - don't affect layout */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Prevent FOUC class from causing issues */
/* NOTE: Use 'clip' not 'hidden' - hidden on html + clip on body breaks Chrome wheel scroll */
.fouc-prevent {
  max-width: 100vw;
  overflow-x: clip;
}

/* ==========================================================================
   SAFE AREA INSETS (for notched devices)
   ========================================================================== */

@supports (padding: env(safe-area-inset-left)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .cookie-banner {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   VOICE CARD MOBILE FIXES
   Fix badge positioning and card layout on mobile
   ========================================================================== */

@media (max-width: 480px) {

  /* Voice card container adjustments */
  .voice-card {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin: 16px auto 0 auto !important;
    padding: 48px 20px 24px 20px !important;
    border-radius: 16px !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Move badge inside the card with better spacing */
  .voice-card__badge {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 6px 14px !important;
    border-radius: 16px !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
  }

  .voice-card__badge-text {
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }

  .voice-card__content {
    padding-top: 8px !important;
  }

  .voice-card__title {
    font-size: 18px !important;
  }

  .voice-card__subtitle {
    font-size: 12px !important;
    margin-bottom: 16px !important;
    line-height: 1.4 !important;
  }

  .voice-card__play-btn {
    width: 52px !important;
    height: 52px !important;
  }

  .voice-card__waveform {
    height: 32px !important;
    margin-bottom: 12px !important;
  }

  .voice-card__time {
    font-size: 12px !important;
  }

  .waveform-bar {
    width: 3px !important;
  }
}

/* ==========================================================================
   SYSTEM SHOWCASE MOBILE FIXES
   Fix the 2-column grid that causes text to hyphenate badly
   ========================================================================== */

@media (max-width: 600px) {

  /* Make the "All Calls Recorded / All Calls Transcribed" grid stack vertically */
  #system-showcase [style*="grid-template-columns:1fr 1fr"],
  #system-showcase [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Prevent hyphenation in system showcase */
  #system-showcase h3,
  #system-showcase h4,
  #system-showcase p {
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* ==========================================================================
   CASE STUDIES / SOCIAL PROOF MOBILE FIXES
   Fix the tabs and slide content on mobile
   ========================================================================== */

@media (max-width: 600px) {

  /* Case study section headline */
  .social-proof-section h2 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  /* Case study tabs container - reduce gap */
  .social-proof-section [style*="gap:24px"] {
    gap: 8px !important;
  }

  /* Case study tabs - make logos smaller */
  .case-tab img {
    height: 60px !important;
    width: auto !important;
    margin-bottom: -8px !important;
  }

  .case-tab {
    padding: 4px 4px 0 !important;
  }

  /* Case study slides - stack vertically instead of side by side */
  .case-slide {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Case slide image container */
  .case-slide > div:first-child {
    border-radius: 12px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  /* Case slide text content */
  .case-slide > div:last-child {
    padding: 0 16px !important;
  }

  /* Case study headline text - smaller on mobile */
  .case-slide p {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 24px !important;
  }

  /* Case study metrics container - stack vertically */
  .case-slide > div:last-child > div:nth-child(2) {
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
  }

  /* Metric numbers - smaller on mobile */
  .case-slide [style*="font-size:56px"],
  .case-slide [style*="font-size: 56px"] {
    font-size: 36px !important;
  }

  /* Features used badges - allow wrap */
  .case-slide [style*="flex-wrap:wrap"],
  .case-slide > div:last-child > div:last-child {
    gap: 8px !important;
  }

  /* Case study slider container - reset negative margins */
  #caseStudySlider {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* ==========================================================================
   PRINT STYLES - Prevent mobile styles affecting print
   ========================================================================== */

@media print {

  html,
  body {
    overflow: visible;
    max-width: none;
  }

  .mobile-menu-overlay,
  .cookie-banner,
  .hamburger-btn {
    display: none !important;
  }
}
/* ==========================================================================
   AGGRESSIVE GRID & FLEX FIXES (The "Everything Stack" Fix)
   ========================================================================== */

@media only screen and (max-width: 600px) {
  
  /* FORCE ALL GRIDS TO SINGLE COLUMN */
  .grid, 
  [class*="grid-cols"],
  [style*="display: grid"],
  [style*="display:grid"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 24px !important;
  }

  /* FORCE SPECIFIC DASHBOARD CARDS TO STACK */
  #system-showcase > div > div, 
  #system-showcase .grid,
  .dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  /* INNER TRANSPARENCY CARD FIX */
  /* "All Calls Recorded" & "All Calls Transcribed" */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* CLIENT PORTAL CARD FIX */
  /* The container holding Client Portal + Transparency */
  [style*="display:grid"][style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* TRUST LOGOS FIX */
  .trust-logos__list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
  }
  
  .trust-logos__item {
    flex: 0 0 45% !important; /* 2 per row */
    display: flex !important;
    justify-content: center !important;
  }

  /* BADGE FIX */
  .voice-card__badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto 16px auto !important;
    width: fit-content !important;
    display: table !important;
  }
  
  .voice-card__badge-text {
    font-size: 10px !important;
  }

  /* FEATURE TABS SCROLL FIX */
  .pill-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
  }
  
  .pill-nav__item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* COMPARISON CARD FIXES (ClaireAI vs Ruby) */
  .comparison-card-wrapper {
    margin-bottom: 32px !important;
  }
  
  /* Ensure logo in comparison header scales */
  [class*="comparison"] img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* HERO HYPHENATION NUCLEAR OPTION */
  h1, h2, h3, .h1, .h2, .h3 {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* TRUST MARQUEE FIX - Prevent Logo Squashing */
.trust-marquee__track {
  width: max-content !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}

.trust-marquee__item {
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: 100px !important; /* Ensure minimum width */
}

.trust-marquee__item img {
  width: auto !important;
  height: 48px !important;
  max-width: none !important; /* Prevent constraining */
}

/* ==========================================================================
   AESTHETIC POLISH: "Bridge the gap" Banner (Global Scale Section)
   ========================================================================== */

@media only screen and (max-width: 600px) {
  
  /* 1. Reset the Section Container for Mobile Flow */
  .global-scale-section {
    width: 100% !important;
    left: auto !important;
    transform: none !important;
    height: auto !important;
    min-height: 600px !important; /* Ensure enough height for all content */
    background: linear-gradient(135deg, #1b4332 0%, #0d2818 100%) !important; /* Deep Green Aesthetic */
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  /* 2. Fix Background Image styling - make it subtle & cover the area */
  .global-scale-section > img {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0.3 !important; /* Lower opacity to make text readable */
    margin-top: 0 !important;
    z-index: 0 !important;
  }

  /* 3. Text Overlay Container - Center & Ensure Padding */
  .global-scale-section > div {
    position: relative !important;
    padding: 64px 24px !important;
    width: 100% !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: auto !important;
  }

  /* 4. Typography Adjustments */
  .global-scale-section h2 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 24px !important;
    width: 100% !important;
  }
  
  .global-scale-section p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 40px !important;
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* 5. Stats Grid - Convert to 2-column Grid for better aesthetics */
  .global-scale-section > div > div[style*="display:flex"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 columns for stats */
    gap: 32px 16px !important;
    width: 100% !important;
    flex-direction: row !important; /* Override the nuclear flex-col */
  }

  /* Individual Stat Items */
  .global-scale-section > div > div[style*="border-left"] {
    padding: 0 0 0 16px !important;
    width: auto !important;
    border-left: 2px solid #d4af37 !important; /* Gold accent */
  }

  .global-scale-section > div > div[style*="border-left"] > div:first-child {
    font-size: 36px !important; /* Smaller stat number */
    font-weight: 700 !important;
    color: #fff !important;
  }
  
  .global-scale-section > div > div[style*="border-left"] > div:last-child {
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255,255,255,0.7) !important;
  }
}

/* ==========================================================================
   VOICE CARD FIX - FORCE HEIGHT AUTO
   ========================================================================== */
@media only screen and (max-width: 600px) {
  body .voice-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important; /* Contain the children */
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 24px !important;
  }
  
  /* Ensure children are contained */
  .voice-card__content {
    flex: 1 1 auto !important;
    height: auto !important;
  }
}

/* ==========================================================================
   AUDIO PLAYER ALIGNMENT FIX
   Fix alignment of play button and waveform on mobile
   ========================================================================== */

@media (max-width: 600px) {
  /* Center align all voice card content */
  .voice-card__content {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important; /* Reset gap to handle manually */
  }

  /* Force full width for text elements */
  .voice-card__header,
  .voice-card__subtitle,
  .voice-card__time {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  
  /* Ensure subtitle has space below it */
  .voice-card__subtitle {
      margin-bottom: 24px !important;
  }

  /* Ensure player button and waveform sit side-by-side */
  .voice-card__player {
    display: flex !important;
    align-items: center !important;
    margin-right: 16px !important; /* Space between button and waveform */
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* Optical centering of the play icon */
  .voice-card__play-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    /* Ensure no other padding interferes */
    padding: 0 !important;
  }
  
  .voice-card__play-btn svg {
    /* Triangle is right-weighted (center ~13.5px in 24px box). Nudge left. */
    transform: translateX(-1px) !important; 
    margin: 0 !important;
  }
  
  /* Ensure waveform is aligned */
  .voice-card__waveform {
      display: flex !important;
      align-items: center !important;
      width: auto !important;
      flex: 0 0 auto !important;
      margin: 0 !important;
      margin-bottom: 0 !important; /* Override previous margin */
  }
  
  /* Time needs spacing above */
  .voice-card__time {
      margin-top: 20px !important;
  }
}