/* Additional Mobile-Friendly Styles for STELLA Basic Website */

/* Ensure proper viewport behavior on all devices */
@media (max-width: 576px) {
  .hero {
    padding: 120px 0 50px;
  }
  
  .hero h1 {
    font-size: 1.8rem;
  }
  
  .hero .lead {
    font-size: 1.1rem;
  }
  
  .hero-buttons .btn {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .section {
    padding: 40px 0;
  }
  
  .section-header h2 {
    font-size: 1.8rem;
  }
  
  .feature-card, .country-card, .contact-info, .contact-form {
    padding: 20px;
  }
  
  .step, .timeline-item {
    margin-bottom: 30px;
  }
  
  .step-content h4, .timeline-content h4 {
    font-size: 1.1rem;
  }
  
  /* Improve touch targets for mobile */
  .nav-link, .btn, .footer-links a {
    padding: 12px 15px;
  }
  
  /* Ensure Typeform and Calendly are responsive */
  .typeform-embed [data-tf-widget], .calendly-inline-widget {
    height: 450px !important;
  }
}

/* Tablet-specific adjustments */
@media (min-width: 577px) and (max-width: 991px) {
  .hero-buttons .btn {
    padding: 8px 20px;
  }
  
  .country-card {
    margin-bottom: 20px;
  }
  
  /* Better spacing for tablet view */
  .row > [class*="col-"] {
    margin-bottom: 20px;
  }
}

/* Ensure Typeform and Calendly are responsive on all devices */
.typeform-embed, .calendly-embed {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Fix for iOS devices */
@supports (-webkit-overflow-scrolling: touch) {
  .hero, .section {
    background-attachment: scroll;
  }
  
  input, textarea {
    font-size: 16px; /* Prevents zoom on focus in iOS */
  }
}

/* High-resolution displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Print styles for better printing */
@media print {
  .navbar, .hero-buttons, .footer, #contact {
    display: none;
  }
  
  .hero, .section {
    padding: 20px 0;
    background: none;
    color: #000;
  }
  
  .hero h1, .section-header h2 {
    color: #000;
  }
  
  a {
    text-decoration: underline;
  }
  
  .container {
    max-width: 100%;
    width: 100%;
  }
}