/* ====================================================
   MOBILE CSS v1.13 - Fixed navigation button sizing for small screens
   Load conditionally with:
   <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
   ==================================================== */

/* ====================================================
   DEBUG VARIABLES - Toggle these for fine-tuning v1.13
   ==================================================== */
:root {
  /* BUTTON DEBUG: Uncomment next line to see button areas in red */
  --debug-btn-bg: transparent; /* Default: invisible button areas */
  /* --debug-btn-bg: rgba(255, 0, 0, 0.3); */
  /* Mobile layout variables */
  --site-width: 100%; /* Override fixed desktop width */
  --mobile-padding: 20px;
  --touch-target: 44px; /* Minimum touch target size */
}

/* ====================================================
   MOBILE GLOBAL OVERRIDES
   ==================================================== */

body {
  width: 100%;
  max-width: none;
  padding: var(--mobile-padding);
  padding-top: env(safe-area-inset-bottom, 10px);
  padding-bottom: env(safe-area-inset-bottom, 10px);
  height: auto;
  display: flex; /* Ensure flexbox for footer positioning */
  flex-direction: column;
}

/* Mobile typography improvements */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
}

/* Better mobile text readability */
p {
  line-height: 1.5;
  font-size: 1rem;
}

/* ====================================================
   MOBILE NAVIGATION & BUTTONS v1.13 - ADDED SMALL SCREEN BUTTON SIZING
   ==================================================== */

/* Larger touch targets for form buttons only */
.download-button,
.contact-form button,
.back-button {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  /* Debug overlay - only shows when --debug-btn-bg is set to red */
  box-shadow: inset 0 0 0 2px var(--debug-btn-bg);
}

/* Back button specific sizing */
.back-button {
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 10px;
}

/* General mobile button improvements (NOT for navigation buttons) */
.center-btn {
  border-radius: 8px;
  background-color: var(--debug-btn-bg) !important; /* Shows button area when debugging */
}

/* Navigation buttons inherit desktop sizes - NO mobile overrides */

/* ====================================================
   MOBILE HOME PAGE INTERACTIONS
   ==================================================== */

/* Remove hover-dependent interactions */
.hover-zone {
  display: none; /* Hide hover zones on mobile */
}

.tooltip {
  display: none; /* Hide tooltips on mobile */
}

/* Create tap-friendly info areas instead */
.mobile-info-grid {
  display: block;
  margin-top: 2rem;
  padding: 1rem;
}

.mobile-info-card {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.mobile-info-card h3 {
  margin: 0 0 1rem 0;
  color: #fff;
  font-size: 1.2rem;
}

.mobile-info-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ====================================================
   MOBILE APPS PAGE
   ==================================================== */

/* Allow flexible layout - horizontal when space permits */
.tabs-container {
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: 0 10px;
}

.tab {
  width: 140px; /* Keep original tab width for better layout */
  margin: 0;
  flex-shrink: 0;
}

/* Only force vertical stacking on small screens */
@media screen and (max-width: 480px) {
  .tabs-container {
    flex-direction: column;
    align-items: center;
  }
  
  .tab {
    width: 100%;
    max-width: 300px;
  }
  
  body {
    padding: 15px; /* Tighter padding on small screens */
  }
  
  .tab-content {
    padding: 1rem 0.5rem;
  }
  
  .contact-form {
    padding: 1.5rem 1rem;
  }
  
  .about-container {
    padding: 1rem;
  }
  
  /* v1.13 - Scale down navigation buttons for small screens */
  .bit-btn {
    width: 32px !important; /* Reduced from 48px */
  }
  
  .by-btn {
    width: 18px !important; /* Reduced from 30px */
  }
  
  .email-btn {
    width: 36px !important; /* Reduced from 55px */
  }
}

/* Mobile-optimized tab content */
.tab-content {
  min-height: 120px;
  padding: 1.5rem 1rem;
  border-radius: 15px; /* Less curved for mobile */
}

.tab-content h2 {
  font-size: 1.4rem;
}

.tab-content p {
  font-size: 0.9rem;
  margin: 0.5rem 0 1rem;
}

/* Larger app icons for touch */
.app-icon {
  width: 56px;
  height: 56px;
}

/* Mobile menu tab adjustments */
.menu-tab {
  width: 140px; /* Keep consistent with other tabs for horizontal layout */
  max-width: 250px;
  height: auto;
  min-height: 180px; /* Match other tabs height */
  border-radius: 0 0 50% 50% / 20%; /* Restore original rounded bottom */
}

/* Adjust menu tab for small screens */
@media screen and (max-width: 480px) {
  .menu-tab {
    width: 100%;
    max-width: 250px;
    border-radius: 15px;
    min-height: 100px;
  }
}

.menu-links a {
  font-size: 1.1rem;
  margin: 12px 0;
  padding: 8px 16px;
  border-radius: 8px;
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ====================================================
   MOBILE APP DETAILS
   ==================================================== */
.app-details {
  padding: 1.5rem;
  margin: 1rem 0;
  border-radius: 15px;
}

.app-details h2 {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.app-details ul {
  padding-left: 1.2rem;
}

.app-details li {
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

/* Mobile download button */
.download-button {
  display: block;
  width: 80%;
  max-width: 280px;
  margin: 2rem auto;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  text-align: center;
  min-height: var(--touch-target);
}

/* ====================================================
   MOBILE MODAL SYSTEM
   ==================================================== */
.modal-container {
  width: 95%;
  max-width: none;
  margin: 1rem;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  font-size: 2rem;
  padding: 10px;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ====================================================
   MOBILE CONTACT FORM
   ==================================================== */
.contact-form {
  padding: 2rem 1.5rem;
}

.contact-form h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.contact-form input,
.contact-form textarea {
  font-size: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  min-height: var(--touch-target);
}

.contact-form textarea {
  min-height: 120px;
}

.contact-form button {
  width: 100%;
  max-width: none;
  font-size: 1.1rem;
  padding: 1rem;
  margin-top: 1rem;
  min-height: var(--touch-target);
}

/* ====================================================
   MOBILE ABOUT PAGE
   ==================================================== */
.about-container {
  padding: 1.5rem;
  border-radius: 15px;
}

.about-heading {
  font-size: 1.5rem;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.about-heading img {
  margin-right: 0;
  margin-bottom: 10px;
  height: 35px;
}

.about-image {
  margin: 1.5rem auto;
  border-radius: 8px;
}

/* ====================================================
   MOBILE FOOTER
   ==================================================== */
footer {
  font-size: 0.85rem;
  padding: 1.5rem 0;
  text-align: center;
}

footer a {
  display: block;
  margin: 10px 0;
  padding: 8px;
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ====================================================
   MOBILE APP SCREENSHOTS
   ==================================================== */
.app-screenshot {
  margin: 1.5rem auto;
  border-radius: 8px;
  max-width: 100%;
}

.app-screenshot:hover {
  transform: none; /* Remove hover transform on mobile */
}

/* ====================================================
   MOBILE SVG CONTAINER & LOGO ANIMATION v1.13
   ==================================================== */
.svg-container {
  width: 100%;
  margin-bottom: 2rem;
  margin-top: 18%; /* Simplified - works for all mobile sizes */
}

.logo-animation {
  position: absolute;
  transform: translate(-50%, -50%);
}

.logo-animation img {
  width: 40px !important; /* Single size for all mobile screens */
  height: auto;
}

/* ====================================================
   MOBILE LANDSCAPE ADJUSTMENTS
   ==================================================== */
@media screen and (max-width: 768px) and (orientation: landscape) {
  body {
    padding-top: 10%; /* Less top padding in landscape */
    padding-bottom: 10px;
  }
  
  .modal-container {
    max-height: 85vh;
  }
  
  .about-container,
  .app-details {
    padding: 1rem;
  }
}