/* SolanaForge Responsive Design System */
/* Comprehensive mobile optimization styles */

/* Base Responsive Layout System */
:root {
  --container-padding-mobile: 15px;
  --section-spacing-mobile: 40px;
  --content-spacing-mobile: 20px;
}

/* Ensure proper responsive viewport behavior */
@media screen and (max-width: 1200px) {
  .container {
    max-width: 95%;
    padding: 0 var(--container-padding-mobile);
  }
  
  .section {
    padding: var(--section-spacing-mobile) 0;
  }
}

/* Tablet Layout - 768px to 991px */
@media screen and (max-width: 991px) {
  /* General Layout Adjustments */
  .container {
    max-width: 100%;
    padding: 0 var(--container-padding-mobile);
  }
  
  /* Section spacing */
  .section-header {
    margin-bottom: calc(var(--1) * 30);
  }
  
  /* Typography Adjustments */
  h1, .h1 {
    font-size: calc(var(--1) * 42);
    line-height: 1.2;
  }
  
  h2, .h2 {
    font-size: calc(var(--1) * 32);
    line-height: 1.2;
  }
  
  /* Grid System Adjustments */
  .grid, .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--1) * 20);
  }
  
  /* Features Section */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile Layout - Up to 767px */
@media screen and (max-width: 767px) {
  /* Mobile Navigation */
  .header .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background: #020c2d;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    display: none;
  }
  
  .header .nav.active {
    right: 0;
    display: block;
  }
  
  .header .nav ul {
    flex-direction: column;
    padding: calc(var(--1) * 30);
  }
  
  .header .nav ul li {
    margin: calc(var(--1) * 15) 0;
  }
  
  .mobile-menu-toggle {
    display: block;
  }
  
  /* Typography Adjustments */
  h1, .h1 {
    font-size: calc(var(--1) * 36);
    line-height: 1.2;
  }
  
  h2, .h2 {
    font-size: calc(var(--1) * 28);
    line-height: 1.2;
  }
  
  p, .body-text {
    font-size: calc(var(--1) * 16);
  }
  
  /* Layout Adjustments */
  .grid, .grid-container, .features-grid {
    grid-template-columns: 1fr;
    gap: calc(var(--1) * 20);
  }
  
  /* Spacing Adjustments */
  .section {
    padding: calc(var(--1) * 40) 0;
  }
  
  .section-header {
    margin-bottom: calc(var(--1) * 25);
  }
  
  /* Content Alignment */
  .text-center-mobile {
    text-align: center;
  }
  
  /* Button Adjustments */
  .btn {
    padding: calc(var(--1) * 12) calc(var(--1) * 20);
    font-size: calc(var(--1) * 14);
    min-width: auto;
    width: 100%; /* Full width buttons on mobile */
  }
  
  /* Form Elements */
  input, select, textarea {
    padding: calc(var(--1) * 12);
    font-size: calc(var(--1) * 16);
  }
  
  /* Space Management */
  .mb-sm-0 {
    margin-bottom: 0 !important;
  }
  
  .mb-sm-1 {
    margin-bottom: calc(var(--1) * 10) !important;
  }
  
  .mb-sm-2 {
    margin-bottom: calc(var(--1) * 20) !important;
  }
  
  /* Testimonial Adjustments */
  .cosmic-testimonials .swiper-container {
    padding: 0 calc(var(--1) * 10);
  }
  
  .testimonial-card {
    padding: calc(var(--1) * 20);
  }
  
  /* Token Creator Specific */
  .token-creator-form {
    padding: calc(var(--1) * 15);
  }
  
  .token-creator-form .form-group {
    flex-direction: column;
  }
  
  .token-creator-form .form-group label {
    margin-bottom: calc(var(--1) * 5);
    width: 100%;
  }
  
  .token-creator-form .form-group input,
  .token-creator-form .form-group select {
    width: 100%;
  }
  
  /* Features Grid */
  .feature-item {
    padding: calc(var(--1) * 20);
  }
}

/* Extra Small Devices - Up to 480px */
@media screen and (max-width: 480px) {
  /* Extra Small Typography */
  h1, .h1 {
    font-size: calc(var(--1) * 32);
  }
  
  h2, .h2 {
    font-size: calc(var(--1) * 24);
  }
  
  h3, .h3 {
    font-size: calc(var(--1) * 20);
  }
  
  /* Header and Navigation */
  .header .logo {
    font-size: calc(var(--1) * 18);
  }
  
  /* Badge Adjustments */
  .section-badge, .cosmic-badge {
    font-size: calc(var(--1) * 10);
    padding: calc(var(--1) * 5) calc(var(--1) * 10);
  }
  
  /* Buttons become full width */
  .btn-group {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-group .btn {
    margin: calc(var(--1) * 5) 0;
  }
  
  /* Content visibility */
  .hidden-xs {
    display: none;
  }
  
  /* Image sizing */
  .img-fluid {
    max-width: 100%;
    height: auto;
  }
}

/* Portrait Mobile Adjustment */
@media screen and (max-width: 380px) {
  .container {
    padding: 0 calc(var(--1) * 10);
  }
  
  h1, .h1 {
    font-size: calc(var(--1) * 28);
  }
  
  .section-title {
    font-size: calc(var(--1) * 22);
  }
  
  .countdown-timer {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--1) * 8);
  }
  
  .timer-item {
    padding: calc(var(--1) * 8);
  }
  
  .timer-value {
    font-size: calc(var(--1) * 18);
  }
  
  .timer-label {
    font-size: calc(var(--1) * 10);
  }
}

/* Touch-friendly enhancements */
@media (hover: none) {
  /* Increase tap target sizes */
  a, button, .nav-link, .btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Remove hover effects that might look strange on touch */
  a:hover, button:hover, .nav-link:hover, .btn:hover {
    transition: none;
  }
}

/* Specific elements that need more attention */
/* Mobile menu toggle button */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: calc(var(--1) * 24);
  color: #fff;
  cursor: pointer;
  padding: calc(var(--1) * 10);
  z-index: 1100;
  position: relative;
}

@media screen and (max-width: 767px) {
  /* Hide the Create button and hamburger in top right corner on mobile */
  .header .right .button.primary.buy-btn,
  .header .right .hamburger {
    display: none;
  }
  
  .header .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  .mobile-menu-toggle {
    display: block;
    margin-right: calc(var(--1) * 15);
  }
  
  /* Enhance hamburger icon visibility */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 1100;
    margin-right: calc(var(--1) * 15);
  }
  
  .hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #fff;
    border-radius: 3px;
  }
}

/* Mobile menu close button */
.menu-close {
  position: absolute;
  top: calc(var(--1) * 20);
  right: calc(var(--1) * 20);
  background: none;
  border: none;
  font-size: calc(var(--1) * 24);
  color: #fff;
  cursor: pointer;
  display: none;
  z-index: 1101;
}

@media screen and (max-width: 767px) {
  .menu-close {
    display: block;
  }
  
  /* Ensure the mobile menu is properly layered */
  .header .nav-content {
    position: relative;
    z-index: 1001;
    padding-top: calc(var(--1) * 20);
  }
  
  /* Fix the nav-btns in mobile view */
  .header .nav-btns {
    padding: calc(var(--1) * 20) calc(var(--1) * 30);
    width: 100%;
  }
  
  .header .nav-btns a {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

/* Hero section payment methods */
@media screen and (max-width: 767px) {
  .payment-methods {
    flex-direction: column;
    align-items: center;
  }
  
  .payment-icons {
    margin-top: calc(var(--1) * 10);
    justify-content: center;
  }
  
  .payment-icon {
    height: calc(var(--1) * 30);
    margin: 0 calc(var(--1) * 5);
  }
}

/* Improved form inputs for touch */
@media screen and (max-width: 767px) {
  input, select, textarea, button {
    font-size: calc(var(--1) * 16) !important; /* Prevent zoom on iOS */
  }
}