/**
 * 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 */

/* HTML element - must NOT have overflow hidden/auto or it breaks Chrome wheel scroll */
html {
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important; /* Don't constrain height */
  min-height: 100% !important;
}

body {
  overflow-x: clip !important; /* 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;
  height: auto !important; /* Don't constrain height - allows natural scrolling */
  min-height: 100vh !important;
  /* Reset any problematic properties that might block Chrome scroll */
  touch-action: auto !important; /* Override manipulation which can cause issues */
  overscroll-behavior: auto !important; /* Don't prevent scroll chaining */
}

/* 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-x: hidden !important;
  overflow-y: visible !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;
  height: auto !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: 32px 20px 48px 20px !important;
    border-radius: 1.5rem !important;
  }

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

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

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

  .claire-island__ctas {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: unset !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) {
  /* Feature carousel - KEEP HORIZONTAL on mobile, just smaller cards */
  #featureCarousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
    gap: 16px !important;
    padding: 0 16px 16px !important;
  }

  #featureCarousel .feature-card {
    flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px !important;
    height: 350px !important;
    scroll-snap-align: start;
  }

  /* 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;
  }

  /* Other feature grids (NOT the carousel) - keep vertical */
  .feature-cards:not(#featureCarousel),
  .features-grid:not(#featureCarousel) {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Hide carousel arrow buttons on mobile - swipe is primary interaction */
  .explore-features-section button[aria-label*="slide"],
  .explore-features-section button[onclick*="scrollCarousel"] {
    display: none !important;
  }

  /* Adjust header layout on mobile */
  .explore-features-section > div > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .explore-features-section h2 {
    font-size: 32px !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% - 24px) !important;
    max-width: 100% !important;
    margin: 40px auto 0 auto !important;
    padding: 48px 20px 24px 20px !important;
    border-radius: 16px !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Fix badge distortion — dot was stretching to 121px due to flex grow */
  .voice-card__badge {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .voice-card__badge-dot {
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 8px !important;
    border-radius: 50% !important;
  }

  .voice-card__badge-text {
    width: auto !important;
    flex: 0 0 auto !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;
  }



  /* 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;
}

/* ==========================================================================
   HERO OVERLAP FIX
   Force stack order and relative positioning on mobile to prevent
   h1 text from overlapping the phone card
   ========================================================================== */
@media (max-width: 768px) {
  .claire-island__grid {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    height: auto !important;
    min-height: unset !important;
  }

  .claire-island__text {
    position: relative !important;
    z-index: 2 !important;
    margin-bottom: 32px !important;
  }

  .claire-island__visual {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
  }
}

/* ==========================================================================
   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;
  }
}

/* ==========================================================================
   CRITICAL UI & STABILITY FIXES (USER REQUEST)
   ========================================================================== */

/* 1. FIX IMAGE GLITCH / FLASHING
   'content-visibility: auto' on images without size causes flashing.
   We force visibility to disable this unstable optimization. */
img {
  content-visibility: visible;
}

/* ==========================================================================
   2. MOBILE MENU SCROLLING FIX (iOS Touch Scroll)

   PROBLEM: Dropdown content gets cut off and can't scroll on iOS.
            Also, when dropdown expands, items below overlap instead of pushing down.
   SOLUTION:
   - Panel is the ONLY scroll container (not nav)
   - Nav must NOT be a scroll container - let it grow naturally
   - Dropdown uses max-height for animation but large enough for any content
   ========================================================================== */

/* Panel is the ONLY scroll container */
.mobile-menu-panel {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  /* Use min-height instead of height so it can grow with content */
  height: auto !important;
  min-height: 100% !important;
}

/* CRITICAL: Nav must NOT be a scroll container - this causes overlap issues */
/* Let the nav grow naturally to fit its content */
.mobile-menu-nav {
  flex: 0 0 auto !important; /* Don't flex, just fit content */
  overflow: visible !important; /* NOT auto - that creates nested scroll */
  min-height: 0 !important;
}

/* CRITICAL: Remove the 600px max-height limit so dropdowns can expand fully */
.mobile-menu-section-content.active {
  max-height: 2000px !important; /* Large enough for any content */
  overflow: visible !important; /* Let content show */
}

/* CTAs must flow naturally after nav - not be fixed at bottom */
.mobile-menu-ctas {
  flex-shrink: 0 !important;
  position: relative !important; /* Not sticky or fixed */
}

/* Mobile menu section labels (Support, Company, Research, Comparisons) */
.mobile-menu-section-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #8c959f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 0 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(15, 41, 30, 0.08);
  font-family: ui-monospace, 'SF Mono', monospace;
}

.mobile-menu-section-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* 3. FIX PLAY BUTTON ALIGNMENT */
.voice-card__play-btn {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: #fff !important;
  /* Ensure visibility against contrast */
}

.voice-card__play-btn svg {
  margin: 0 !important;
  /* Optical adjustment: move play triangle slightly right to look centered */
  transform: translateX(2px) !important;
}

/* ==========================================================================
   STABILITY FIXES
   ========================================================================== */

/* Hardware acceleration removed - was creating too many GPU layers and causing stutter */

/* Global transition-property removed - was causing image stutter */

/* 4. Fix Z-Index Stacking Contexts */
header,
nav,
.mobile-menu-overlay {
  transform: translate3d(0, 0, 0);
  /* Create new stacking context */
  z-index: 99999 !important;
}

/* 5. Play Button - Brute force centering */
.voice-card__play-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  width: 52px !important;
  height: 52px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.voice-card__play-btn svg {
  margin: 0 !important;
  transform: translateX(2px) !important;
  /* Optical center */
}

/* ==========================================================================
   FINAL MOBILE INTERACTION PATCH (User Reported Issues)
   ========================================================================== */

/* 1. Play Button Visibility Fix
   Use Deep Green color so the 'currentColor' SVG is visible against white background */
.voice-card__play-btn {
  color: #1b4332 !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 2. Mobile Menu Scroll Fix - CONSOLIDATED ABOVE
   All mobile menu scroll fixes are now in the single section above.
   This prevents iOS touch scroll issues from nested scroll containers. */

/* 3. Help Center Mobile Polish
   Reduce padding and font size to prevent "bad formatting" on small screens */
@media (max-width: 600px) {
  .faq-question {
    padding: 16px !important;
    font-size: 16px !important;
    gap: 12px !important;
  }

  .faq-answer-content {
    padding: 0 16px 24px !important;
    font-size: 15px !important;
  }

  .category-tab {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  .hero h1 {
    font-size: 32px !important;
    margin-bottom: 12px !important;
  }

  .hero p {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   FINAL MOBILE CLEANUP (Proactive Audit)
   ========================================================================== */

/* 1. Prevent Horizontal Scroll on Trust Marquee */
.trust-marquee,
.trust-marquee__mask {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 2. Fix Comparison Button Wrapping on Small Screens
   "Compare ClaireAI vs Smith.ai" is too long for one line on narrow phones */
.comparison-card-btn {
  white-space: normal !important;
  text-align: center !important;
  height: auto !important;
  padding: 12px 16px !important;
  line-height: 1.3 !important;
}

/* 3. Ensure Mobile Menu Links don't touch edges */
.mobile-menu-link,
.mobile-menu-section-btn {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 4. Fix Hero H1 Line Height on Mobile */
@media (max-width: 600px) {

  h1 {
    line-height: 1.1 !important;
    overflow-wrap: break-word !important;
  }

  /* claire-island headline gets its own optimized values */
  .claire-island__headline {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word !important;
  }
}

/* ==========================================================================
   FIX: Case Study Image Flickering
   ========================================================================== */
.case-slide img {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* ==========================================================================
   FIX: Compare Smith.ai Page - Mobile Layout
   Fixes stacking, spacing, and table display on mobile devices
   ========================================================================== */

@media only screen and (max-width: 430px) and (pointer: coarse) {

  /* Article Header - proper mobile padding */
  .article-header {
    padding: 100px 16px 32px !important;
  }

  .article-header h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .article-subtitle {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .article-meta {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Article Content - tighter padding */
  .article-content {
    padding: 24px 16px 48px !important;
  }

  .article-content h2 {
    font-size: 18px !important;
    margin: 32px 0 16px !important;
  }

  .article-content h3 {
    font-size: 16px !important;
    margin: 24px 0 12px !important;
  }

  .article-content p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .article-content li {
    font-size: 14px !important;
  }

  /* Intro Summary Box - mobile optimization */
  .intro-summary {
    padding: 16px !important;
    margin: 24px 0 !important;
  }

  .intro-summary h2 {
    font-size: 14px !important;
  }

  .intro-summary p {
    font-size: 13px !important;
  }

  /* Table of Contents */
  .toc {
    padding: 16px !important;
    margin: 24px 0 32px !important;
  }

  .toc-list a {
    font-size: 13px !important;
  }

  /* Comparison Tables - horizontal scroll with proper sizing */
  .comparison-glance,
  .feature-table {
    margin: 24px -16px !important;
    padding: 0 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .comparison-glance table,
  .feature-table table {
    min-width: 500px !important;
    font-size: 12px !important;
  }

  .comparison-glance thead th,
  .comparison-glance tbody td,
  .feature-table thead th,
  .feature-table tbody td {
    padding: 10px 12px !important;
    white-space: normal !important;
  }

  /* Pricing Comparison - single column with proper spacing */
  .pricing-comparison {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 24px 0 !important;
  }

  .pricing-card {
    padding: 20px !important;
  }

  .pricing-amount {
    font-size: 26px !important;
  }

  .pricing-features li {
    font-size: 12px !important;
  }

  /* Best Fit Grid - single column */
  .best-fit-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 24px 0 !important;
  }

  .best-fit-card {
    padding: 16px !important;
  }

  .best-fit-title {
    font-size: 14px !important;
  }

  .best-fit-desc {
    font-size: 12px !important;
  }

  /* Pros/Cons Grid - single column */
  .pros-cons-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 24px 0 !important;
  }

  .pros-cons-header {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .pros-cons-content {
    padding: 16px !important;
  }

  .pros-list li,
  .cons-list li {
    font-size: 12px !important;
  }

  /* Verdict Box */
  .verdict-box {
    padding: 20px !important;
    margin: 32px 0 !important;
  }

  .verdict-title {
    font-size: 18px !important;
  }

  .verdict-text {
    font-size: 14px !important;
  }

  /* CTA Buttons */
  .subtle-cta-buttons {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .btn-subtle {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Images in article */
  .article-content img {
    border-radius: 8px !important;
    margin: 16px 0 !important;
  }
}