/* ==============================================
   RESPONSIVE STYLES 
   ============================================== */


/* --- Medium screens (Tablets/Small Laptops, max-width 1024px) --- */
@media (max-width: 1230px) {
  .nav-1 > div:not(.logo-container, .language-container) { display: none; } /* Hides extra info to save space */
}
@media (max-width: 1024px) {
  h1 { font-size: 4rem; }
  .hero-section { height: calc(100vh - var(--navbar-height)); }
  .nav-1 { flex-wrap: wrap; gap: 2rem; justify-content: center; }
}

/* --- Small screens (Mobile, max-width 768px) --- */
@media (max-width: 768px) {
   .nav-2 { position: relative; padding: 1rem 5%; }
  
  /* Hamburger Icon */
  .menu-toggle {
    display: block;
    cursor: pointer;
  }
  .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--third-color);
    transition: 0.3s;
  }

  /* Transform Nav-2 Links into a Mobile Sidebar/Dropdown */
  .left-navbar-2-container {
    position: absolute;
    top: 100%;
    left: -100%;
    flex-direction: column;
    background-color: var(--fourth-color);
    width: 100%;
    text-align: center;
    transition: 0.3s;
    z-index: 10;
  }

  .left-navbar-2-container.active { left: 0; }

  .right-navbar-2-container li:not(:last-child) { display: none; } /* Hide social icons on small mobile */

  /* Hero Section scaling */
  .hero-section { height: calc(100vh - var(--navbar-height)); }
  h1 { font-size: 3rem !important; }
  .hero-span { font-size: 3.5rem; }
  p { font-size: 1.6rem; }
}

/* Small Phones (Max 480px) */
@media (max-width: 480px) {
  .logo-container h1 { font-size: 2.5rem; }
  .order-btn { padding: 1rem 2rem; font-size: 1.4rem; }
  .hero-section { height: calc(100vh - var(--navbar-height)); }
  .hero-content p{ font-size: 1.5rem;}
}


/* -------------------  ------- Handling About Section */

@media (max-width: 926px) {
  .about-title { font-size: 3.5rem; }
  /* .about-description{ font-size: 1.8rem}
  .delivery-note, .shop-chips p{ font-size: 1.7rem;} */
}
@media (max-width: 803px) {
  .about-container { grid-template-columns: 1fr; }
  .about-title { font-size: 3rem; }
  .delivery-note, .shop-chips p, .about-description{ font-size: 1.7rem}
  
}

/* --- Our Services Sec --- */
@media (max-width: 1240px) {
  .services-wrapper {
    grid-template-columns: 1fr; /* Stack intro on top of grid */
    text-align: center;
  }
  
  .label-badge { margin: 0 auto 20px; }
  
  .service-undraw {
    max-width: 300px;
    margin: 0 auto 40px;
  }
    .main-title { font-size: 4rem; }
  .services-grid p, .intro-p{ font-size: 1.8rem;}
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr; /* Single column on phones */
  }
  
  .main-title { font-size: 2.6rem; }
  .services-grid p, .intro-p{ font-size: 2rem;}
  
  .service-card {
    padding: 25px;
  }
}


/* --- MOBILE RESPONSIVE FIXES - STEPS SECTION --- */
@media (max-width: 768px) {
  .how-it-works {
    padding: 60px 20px;
  }
  .section-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
  }
  .step-card h3{
    font-size: 2.2rem;
  }
  .step-card p{
    font-size: 1.8rem;
  }

  .step-card {
    padding: 30px; /* Less padding on small screens */
  }

  .order-btn {
    width: 100%; /* Full width button for thumbs on mobile */
  }
}


/* --------------- MOBILE RESPONSIVE PICKER SEC --------- */
@media (max-width: 768px) {
  .picker-grid {
    grid-template-columns: 1fr 1fr; /* 2x2 grid on mobile to keep height low */
  }
  .picker-header h2{
    font-size: 4rem;
    margin-bottom: 2.8rem;
    letter-spacing: -2px;
  }
}

/* Small Phones (Max 480px) */
@media (max-width: 450px) {
  .picker-header h2{
    font-size: 2.7rem;
  }
  .picker-box a h3{
    font-size: 2rem;
  }
}


/* Responsive ----------------------- ORDER SECTION*/
/* --- RESPONSIVE ORDER SECTION --- */

/* Tablets and Laptops (Max 1024px) */
@media (max-width: 1024px) {
    .order-row {
        /* gap: 30px; */
        /* padding: 0 20px; */
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .order-img-div img{
      max-width: 100%;
      height: auto;
    }
    
    .order-form.dark-theme {
        padding: 25px; /* Slightly less padding to save space */
        width: 100%;
        overflow: hidden;
    }
    
    .input-row {
        flex-direction: column; /* Stack Name/Email and Phone numbers vertically */
        gap: 0;
    }
}

/* Mobile Devices (Max 768px) */
@media (max-width: 768px) {
    .order-sec {
        padding: 40px 15px;
    }

    .order-row, 
    .order-row.reverse {
        grid-template-columns: 1fr; /* Stack Image and Form vertically */
        direction: ltr; /* Reset reverse layout so image is always on top or bottom */
        gap: 20px;
        margin-bottom: 6rem;
    }

    .order-img-div {
        order: -1; /* Ensures image always appears ABOVE the form on mobile */
        text-align: center;
    }

    .order-img-div img {
        max-width: 80%; /* Prevent the illustration from being too huge */
        min-width: unset;
    }

    .input-row {
        flex-direction: column; /* Stack Name/Email and Phone numbers vertically */
        gap: 0;
    }

    .order-form h3 {
        font-size: 2.8rem; /* Scale down heading for mobile */
    }
    /* --------------Mobile responsiveness for the SUCEESS message------------- */
    .success-toast {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }
}

/* Small Phones (Max 480px) */
@media (max-width: 480px) {
    .order-form.dark-theme {
        padding: 20px 15px;
        border-radius: 16px;
    }

    .input-group label {
        font-size: 1.2rem;
    }

    .submitBtn {
        font-size: 1.6rem;
        padding: 12px;
    }

    .form-desc {
        font-size: 1.5rem;
    }
}



/* --------------Mobile responsiveness for the SUCEESS message------------- */
    /* .success-toast {
        left: 20px;
        right: 20px;
        bottom: 20px;
    } */



/* ----------------wHATSAPP SECTION --------------- */
@media (max-width: 768px) {
  .whatsapp-card {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 30px 20px;
  }
  
  .whatsapp-brand {
    flex-direction: column;
    gap: 10px;
  }

  .wa-btn {
    width: 100%;
    justify-content: center;
  }
}


/* --- MOBILE RESPONSIVE--------------- REVIEWS SECTION-- --- */
@media (max-width: 600px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  .reviews-header h1{
    font-size: 4rem;
  }
}

/* ------------- FAQ ------------- */
@media (max-width: 768px) {
  .faq-title{font-size: 3.5rem;}
  .faq-item{font-size: 1.8rem;}
}

/* ------------- My Mission ----------- */
@media (max-width: 768px){
  .mission-container{
    display: grid;
    grid-template-columns: 1fr;
  }
  .mission-content h2{
    font-size: 3rem;
  }
  .mission-container p{
    font-size: 2rem;
  }
}

/* --- MOBILE RESPONSIVE ---------------  FOOTER */
@media (max-width: 768px) {
  .footer-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  
  .footer-column h4::after {
    margin: 8px auto 0;
  }
  
  .brand-col {
    order: -1; /* Puts Logo on top on mobile */
  }
}


/* 

make an example for me, write some html css and js and json demonstrating an example of how i have to do it step by step
To manage translations for a large site, you should store your text in separate JSON files and use JavaScript's fetch() to load only the required language. 
Step 1: Create Translation Files
Create a folder named languages and add two files with identical keys but different values. 
languages/en.json
json
{
  "nav": {
    "home": "Home",
    "about": "About Us",
    "langBtn": "PT"
  },
  "content": {
    "welcome": "Welcome to our website!",
    "description": "This is a large-scale example using external JSON files."
  }
}
Use code with caution.

languages/pt.json
json
{
  "nav": {
    "home": "Início",
    "about": "Sobre Nós",
    "langBtn": "EN"
  },
  "content": {
    "welcome": "Bem-vindo ao nosso site!",
    "description": "Este é um exemplo em grande escala usando arquivos JSON externos."
  }
}
Use code with caution.

Step 2: Set up HTML with Data Attributes 
Use data-i18n attributes to link HTML elements to your JSON keys. Use dots (e.g., nav.home) to access nested keys in your JSON. 
html
<nav class="navbar">
  <ul>
    <li><a href="#" data-i18n="nav.home">Home</a></li>
    <li><a href="#" data-i18n="nav.about">About Us</a></li>
    <li><button id="lang-btn" data-i18n="nav.langBtn">PT</button></li>
  </ul>
</nav>

<main>
  <h1 data-i18n="content.welcome">Welcome to our website!</h1>
  <p data-i18n="content.description">Loading...</p>
</main>
Use code with caution.

Step 3: JavaScript Translation Logic
This script fetches the JSON file and updates every element that has a data-i18n attribute. 
javascript
let currentLang = localStorage.getItem('language') || 'en';

async function updateLanguage(lang) {
  try {
    // 1. Fetch the JSON file for the selected language
    const response = await fetch(`./languages/${lang}.json`);
    const translations = await response.json();

    // 2. Find all elements with the 'data-i18n' attribute
    document.querySelectorAll('[data-i18n]').forEach(element => {
      const path = element.getAttribute('data-i18n').split('.');
      
      // 3. Dig into the JSON object using the dot-notated path (e.g., nav.home)
      let translation = translations;
      path.forEach(key => {
        translation = translation ? translation[key] : null;
      });

      // 4. Update the element text
      if (translation) {
        element.textContent = translation;
      }
    });

    // Save choice and update state
    currentLang = lang;
    localStorage.setItem('language', lang);
  } catch (error) {
    console.error("Could not load language file:", error);
  }
}

// Button Click Event
document.getElementById('lang-btn').addEventListener('click', () => {
  const nextLang = currentLang === 'en' ? 'pt' : 'en';
  updateLanguage(nextLang);
});

// Load default language on startup
window.addEventListener('DOMContentLoaded', () => updateLanguage(currentLang));
Use code with caution.

Key Advantages of This Method
Performance: Users only download the text for the language they are actually viewing.
Scalability: To add a third language (like Spanish), you just create es.json without changing your JavaScript.
Organization: Hierarchical keys (like nav.home) keep related text grouped logically. 
Note: For fetch() to work with local files, you must run your project through a local server (like VS Code's "Live Server" extension). 


*/