/* Akashvani Global Responsive Styles */

@media (max-width: 900px) {
  /* Navigation */
  nav > div {
    flex-direction: column !important;
    height: auto !important;
    padding: 20px !important;
    gap: 15px !important;
  }
  
  nav > div > div {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}

@media (max-width: 768px) {
  /* General Sections & Paddings */
  [data-screen-label], section, main {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  header[data-screen-label="Header"] {
    padding: 30px 15px 0 !important;
  }

  header[data-screen-label="Header"] > div:nth-child(2) {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }

  /* Footer */
  footer[data-screen-label="Footer"] {
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  
  footer[data-screen-label="Footer"] > a {
    border-left: none !important;
    padding: 8px 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
  
  footer[data-screen-label="Footer"] > span {
    padding: 10px 0 !important;
  }

  /* Specific fixed widths */
  span[style*="min-width:320px"], 
  a[style*="min-width:320px"],
  span[style*="min-width: 320px"], 
  a[style*="min-width: 320px"] {
    min-width: 100% !important;
    width: 100% !important;
  }

  /* Grids and Cards */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Feature cards with padding */
  div[style*="padding:40px 44px"] {
    padding: 24px 20px !important;
  }
  
  div[style*="padding:28px"] {
    padding: 20px !important;
  }

  /* Beta Strip */
  section[data-screen-label="Beta strip"] > div > a {
    border-left: none !important;
    width: 100% !important;
    text-align: center !important;
    padding: 10px 0 !important;
  }
  section[data-screen-label="Beta strip"] > div > span {
    width: 100% !important;
    text-align: center !important;
    padding: 10px 0 15px !important;
  }
}

@media (max-width: 480px) {
  /* Smaller screens */
  [data-screen-label], section, main {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  
  /* Text adjustments */
  h1 {
    font-size: clamp(28px, 8vw, 36px) !important;
  }
  h2 {
    font-size: clamp(24px, 7vw, 30px) !important;
  }
}