/* Mobile Responsiveness Fixes for juliancash.com */

/* Tablet breakpoint (950px and below) */
@media (max-width: 950px) {
  /* Fix credentials section - stack the two boxes */
  .credentials div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  /* Fix case study grid - single column */
  .case-study div[style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Fix approach section - stack columns */
  .approach div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  /* Fix AI expertise section - stack columns */
  .claude-expertise div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }
  
  /* Fix Not Average section - stack columns */
  .not-average div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Company logos in credentials - keep 4 columns, let them shrink */
  /* Removed - logos now stay 4 columns and shrink naturally
  .credentials div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  */
}

/* Narrow screen breakpoint (825px and below) */
@media (max-width: 825px) {
  /* Reorder topbar items - move contact info below button */
  .topbar-inner {
    flex-direction: column;
    gap: 12px;
    padding: 12px 20px !important;
  }
  
  .topbar-inner > div:first-of-type {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  
  /* Make Schedule button centered with max width matching desktop */
  .cta-top {
    width: auto;
    max-width: none;
    margin: 0 auto;
    text-align: center;
    order: 1;
    display: block;
  }
  
  /* Move contact items below button */
  .contact-items {
    order: 2;
    justify-content: center;
    text-align: center;
    width: 100%;
  }
}

/* iPhone 13 Safari definitive fix using CSS Grid with table fallback */

/* Base table-cell fallback for maximum compatibility */
@supports (-webkit-touch-callout: none) {
  .contact-items {
    /* Table display as bulletproof fallback */
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    height: 40px !important;
    white-space: nowrap !important;
  }
  
  .contact-items > span,
  .contact-items > a {
    display: table-cell !important;
    vertical-align: middle !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }
  
  .contact-items .sep {
    display: table-cell !important;
    width: 20px !important;
    text-align: center !important;
    padding: 0 4px !important;
  }
}

/* Progressive enhancement to Grid for iOS Safari */
@supports (-webkit-touch-callout: none) and (display: grid) {
  .contact-items {
    display: grid !important;
    grid-template-columns: auto auto auto auto auto !important;
    grid-auto-flow: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    
    /* Force GPU acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  .contact-items > span,
  .contact-items > a {
    display: block !important;
    white-space: nowrap !important;
    padding: 0 !important;
  }
  
  .contact-items .sep {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
  }
}

/* iPhone 13 specific (390x844 logical pixels) */
@media only screen 
  and (device-width: 390px) 
  and (device-height: 844px) 
  and (-webkit-device-pixel-ratio: 3) {
  .contact-items {
    /* Use inline-block as absolute fallback */
    display: block !important;
    text-align: center !important;
    font-size: 0 !important; /* Remove whitespace between inline-block elements */
  }
  
  .contact-items > span,
  .contact-items > a {
    display: inline-block !important;
    font-size: 14px !important; /* Reset font size */
    vertical-align: middle !important;
    margin: 0 4px !important;
  }
  
  .contact-items .sep {
    display: inline-block !important;
    font-size: 14px !important;
    margin: 0 2px !important;
  }
}

/* Alternative fix using absolute positioning for iPhone 13 */
@media only screen and (width: 390px) {
  .topbar-inner {
    position: relative !important;
  }
  
  .contact-items {
    position: relative !important;
    display: block !important;
    height: 30px !important;
    line-height: 30px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  
  .contact-items > * {
    display: inline !important;
    white-space: nowrap !important;
  }
}

/* Change location text on narrow screens */
@media (max-width: 495px) {
  .location-text {
    font-size: 0 !important; /* Hide original text */
  }
  .location-text::after {
    content: "Bay Area\00a0\00a0"; /* \00a0 is nbsp */
    font-size: 12px !important; /* Restore font size */
  }
}

/* Mobile breakpoint (560px and below) */
@media (max-width: 560px) {
  /* Add whitespace above "Julian Cash Consultancy" */
  .topbar {
    padding-top: 20px;
  }
  
  
  /* Keep hero padding consistent */
  .hero {
    padding-top: 40px !important; /* Same as desktop */
  }
  
  /* Keep Schedule button consistent - remove size overrides */
  
  /* Stack credentials boxes on mobile */
  .credentials div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* Much smaller padding in credential boxes */
  .credentials > .wrap > div > div {
    padding: 16px !important;
    min-height: auto !important;
  }
  
  /* Much smaller company logos on mobile */
  .logo-tile-small {
    padding: 2px !important;
    aspect-ratio: 1/1 !important;
    border-width: 1px !important;
    border-radius: 4px !important;
    max-width: 75px !important;
    max-height: 75px !important;
  }
  
  /* Company logos - 2x2 grid on mobile */
  .credentials div[style*="grid-template-columns:repeat(4,minmax"] {
    grid-template-columns: repeat(2, minmax(50px, 75px)) !important;
    gap: 6px !important;
    margin: 0 auto !important;
  }
  
  /* Much smaller compliance badges */
  .credentials img[alt*="PCI"] {
    height: 35px !important;
  }
  
  .credentials img[alt*="SOC"] {
    height: 35px !important;
  }
  
  /* Stack compliance badges vertically and center */
  .credentials div[style*="display:flex"][style*="gap:30px"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
  }
  
  .credentials div[style*="display:flex"][style*="gap:16px"] {
    gap: 8px !important;
  }
  
  /* Smaller compliance badge text */
  .credentials span[style*="font-size:16px"],
  .credentials div[style*="font-size:16px"] {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  
  /* Much smaller headings in credential boxes */
  .credentials h2 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
    line-height: 1.2 !important;
  }
  
  /* Smaller text in credential boxes */
  .credentials p[style*="font-size:15px"] {
    font-size: 13px !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
  }
  
  /* Reduce Vindicia link size */
  .credentials a[href*="vindicia"] {
    font-size: 12px !important;
    padding-top: 12px !important;
  }
  
  /* Reduce overall section padding on mobile */
  .credentials {
    padding: 32px 0 !important;
  }
  
  /* Contact items - better spacing on mobile */
  .contact-items .sep {
    display: inline-block;
    margin: 0 3px;
    color: var(--line);
  }
  
  .contact-items {
    gap: 2px !important;
  }
  
  .contact-items span,
  .contact-items a {
    white-space: nowrap;
  }
  
  /* Hide "How I Work" button on mobile to reduce clutter */
  .cta-secondary-top {
    display: none;
  }
  
  /* Hero section adjustments - keep consistent padding */
  .hero-inner {
    /* Don't override top padding - let it stay consistent */
    padding-bottom: 15px !important;
    /* Keep the horizontal padding from styles.css */
    gap: 10px !important;
  }
  
  .hero-right-column {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .hero-inner > div:last-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Remove padding from hero image container */
  .hero-inner > div:last-child > p {
    margin-top: 10px !important;
  }
  
  /* Reduce any top margin on the image itself */
  .hero-img {
    margin-top: 0 !important;
  }
  
  h1 {
    font-size: 28px;
    line-height: 1.3;
  }
  
  /* Make hero image smaller on mobile */
  .hero-img {
    max-width: 240px !important;
  }
  
  /* Company logos - 2x2 on mobile */
  .logo-tile-small {
    aspect-ratio: 1/1;
    padding: 12px;
  }
  
  /* Compliance badges - keep horizontal, allow scroll if needed */
  
  /* Section padding adjustments */
  section {
    padding: 32px 0 !important;
  }
  
  /* Reduce padding on AI solutions section specifically */
  .ai-solutions {
    padding: 24px 0 !important;
  }
  
  /* Smaller headings on mobile */
  h2 {
    font-size: 24px !important;
  }
  
  h3 {
    font-size: 18px !important;
  }
  
  /* Better spacing for stacked content */
  .wrap {
    padding: 0 16px;
  }
  
  /* Make all buttons full width on mobile */
  .cta, .cta-secondary {
    width: 100%;
    text-align: center;
    display: block;
  }
  
  /* Fix the final CTA section */
  #schedule > div > div {
    flex-direction: column !important;
    text-align: center;
  }
  
  #schedule .cta {
    width: 100%;
    margin-top: 16px;
  }
  
  /* Schedule page form adjustments */
  .form-container {
    padding: 20px 16px;
  }
  
  .form-label {
    font-size: 13px;
  }
  
  .form-input,
  .form-textarea,
  .form-select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Keep natural section order on mobile - no reordering */
  
  /* Hide specific paragraphs in AI solutions section on mobile */
  .hide-on-mobile {
    display: none !important;
  }
}

/* Extra small devices (below 400px) */
@media (max-width: 400px) {
  /* Even smaller text adjustments */
  h1 {
    font-size: 24px;
  }
  
  .contact-items {
    flex-direction: column;
    gap: 8px;
  }
  
  /* Keep 4 columns even on very small screens - logos will shrink */
  /* Removed - logos now stay 4 columns
  .credentials div[style*="grid-template-columns:repeat(4,1fr)"],
  .credentials div[style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  */
}

/* Sticky CTA for mobile - Optional enhancement */
@media (max-width: 768px) {
  /* Floating schedule button 
  .floating-cta {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,82,204,0.3);
  }
  */
}