MediaWiki:Mobile.css

/* All CSS here will be loaded for users of the mobile site */

/* new front page CSS */
/* inZOI Wiki Mobile Styles */

@media (max-width: 768px) {
  /* Show/hide appropriate views */
  .desktop-view {
    display: none;
  }

  .mobile-view {
    display: block;
  }

  /* Hero section adjustments - MORE COMPACT */
  .hero-banner {
    padding: 0.3em 0.2em; /* SMALLER - Reduced padding */
    margin: 0.4em 0; /* SMALLER - Reduced margin */
    border-radius: 4px; /* SMALLER - Optional: slightly smaller radius */
  }

  .hero-banner img {
    max-height: 150px; /* SMALLER - Reduced image height */
    display: block; /* Ensure no extra space below image */
    margin: 0 auto; /* Keep centered */
  }

  .hero-title {
    font-size: 1.4em; /* SMALLER */
    margin-top: 0.15em; /* TIGHTER */
    margin-bottom: 0; /* TIGHTER */
    line-height: 1.2; /* TIGHTER */
  }

  .hero-subtitle {
    font-size: 0.9em; /* SMALLER */
    margin-top: 0.1em; /* TIGHTER */
    margin-bottom: 0.1em; /* TIGHTER */
    line-height: 1.2; /* TIGHTER */
  }

  .quick-access-buttons {
    flex-direction: column;
    align-items: center;
    margin-top: 1em; /* Adjusted slightly */
  }

  .button {
    width: 80%;
    text-align: center;
    margin-bottom: 0.5em;
    padding: 0.5em 1em; /* Slightly smaller buttons */
  }

  /* About Section adjustments - MORE COMPACT */
  .about-section {
    padding: 0.5em 0.3em; /* SMALLER - Reduced padding */
    margin: 0.4em 0; /* SMALLER - Reduced margin, use 0 horizontal margin for full width */
    font-size: 0.9em; /* SMALLER */
    line-height: 1.4; /* TIGHTER */
    width: 100%; /* Ensure it takes full width */
    box-sizing: border-box; /* Include padding in width calculation */
    border-radius: 4px; /* SMALLER - Optional: slightly smaller radius */
  }

  .about-section h2 {
    font-size: 1.2em; /* SMALLER */
    margin-bottom: 0.2em; /* TIGHTER */
  }

  .about-section p {
    margin-bottom: 0.2em; /* TIGHTER */
  }


  /* Featured content adjustments */
  .featured-cards {
    grid-template-columns: 1fr;
  }

  /* Main sections mobile - FULL WIDTH */
  .main-sections-mobile {
    margin: 0.8em 0; /* SMALLER - Reduced top/bottom margin, NO horizontal margin */
    width: 100%; /* Use full width */
    max-width: none; /* Override any inherited max-width */
    box-sizing: border-box; /* Include padding in width */
  }

  .wiki-table-mobile {
    width: 100%;
    border-spacing: 0; /* TIGHTER - Remove spacing between table cells (borders will touch if any) */
    margin: 0; /* Remove default margins */
    background-color: #f8f9fa; /* Keep background */
    border-radius: 0; /* REMOVED - No rounded corners for edge-to-edge */
    padding: 0; /* REMOVED - No padding on the table container itself */
    box-shadow: none; /* REMOVED - Optional: remove shadow for edge-to-edge */
    box-sizing: border-box;
    display: block; /* Ensure block behavior */
    border-collapse: collapse; /* Make borders merge if needed */
  }

  /* Style table headers and cells within the full-width table */
   .wiki-table-mobile th,
   .wiki-table-mobile td {
       width: 100% !important; /* Force full width */
       display: block; /* Stack elements vertically */
       box-sizing: border-box; /* Include padding/border in width */
       border-radius: 0; /* No radius on individual cells/headers */
       /* Add borders if desired for separation */
       border-left: none;
       border-right: none;
       border-bottom: 1px solid #ddd; /* Example border */
   }

   .wiki-table-mobile th {
      padding: 0.8em 0.5em; /* Adjust padding */
      font-size: 1.1em; /* Slightly smaller header font */
      border-top: 1px solid #ddd; /* Example border */
   }

   .wiki-table-mobile td {
       padding: 0.8em 0.5em; /* Adjust padding */
       background-color: #fff; /* Reset background if needed */
       box-shadow: none; /* Remove individual cell shadows */
   }

   /* Remove bottom border from the very last cell */
   .wiki-table-mobile tr:last-child td:last-child {
       border-bottom: none;
   }


  /* Ensure two-column lists inside stack */
  .two-column,
  .two-column-mobile,
  .two-column-list { /* Target all similar classes */
    column-count: 1; /* Force single column */
    grid-template-columns: 1fr; /* Ensure grid also stacks */
    display: block; /* Override grid if necessary */
  }

   .two-column-list li,
   .two-column li { /* Add some spacing if needed */
       margin-bottom: 0.3em;
   }


  /* Stats adjustments - Make them full width too */
  .stats-container {
    flex-direction: column;
    gap: 0.5em; /* Reduce gap */
    width: 100%;
    box-sizing: border-box;
  }

  .stat-box {
    width: 100%;
    margin-bottom: 0.5em; /* Space between boxes */
    padding: 0.8em; /* Adjust padding */
    border-radius: 4px;
    box-sizing: border-box;
  }

  .wiki-stats {
    padding: 1em 0.2em; /* Adjust container padding */
    margin: 0.8em 0; /* Use 0 horizontal margin */
    width: 100%;
    box-sizing: border-box;
    border-radius: 0; /* Optional: remove radius */
  }

   .wiki-stats h2 {
       font-size: 1.5em; /* Adjust size */
       margin-bottom: 0.6em; /* Adjust spacing */
   }

  /* Footer adjustments - Make full width */
  .wiki-footer {
    padding: 1em 0.5em; /* Adjust padding */
    border-radius: 0; /* REMOVED - Optional for edge-to-edge */
    margin-top: 1em; /* Adjust spacing */
    width: 100%;
    box-sizing: border-box;
  }

  .footer-links {
    flex-direction: column;
    gap: 8px; /* Adjust gap */
  }

  /* Featured content section header adjustments (if used on mobile) */
  .featured-content .section-header {
    flex-direction: column;
    text-align: center;
  }

  .featured-content .section-header h2 {
    margin-bottom: 0.5em;
    text-align: center;
  }

  /* Card content alignment */
  .card-content {
    text-align: center;
  }

  /* List item spacing inside sections */
  .section-content ul {
    padding-left: 1em; /* Keep some indent */
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }

  .section-content li {
    margin-bottom: 0.3em; /* Reduce list item spacing */
  }

} /* End of @media (max-width: 768px) */

/* Remove redundant rules in smaller breakpoint if covered above */
@media (max-width: 480px) {
  /* Further adjustments for very small screens ONLY if needed */
  /* Most rules from 768px should cascade down */

  .hero-banner img {
     max-height: 120px; /* Even smaller image if needed */
  }

  .hero-title {
      font-size: 1.3em;
  }
  .hero-subtitle {
      font-size: 0.85em;
  }

  .about-section {
     padding: 0.4em 0.2em;
     font-size: 0.85em;
  }
  .about-section h2 {
     font-size: 1.1em;
  }

  .wiki-table-mobile th,
  .wiki-table-mobile td {
       padding: 0.6em 0.4em; /* Slightly less padding on very small screens */
   }
   .wiki-table-mobile th {
       font-size: 1.0em;
   }

   /* .two-column etc rules already set to 1 column above */

} /* End of @media (max-width: 480px) */


/* Keep infobox full width */
.infobox {
    position: relative !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0.5em 0 !important; /* Adjust margin */
    box-sizing: border-box; /* Add box-sizing */
}