/* 
 * spacing-fix.css: Whitespace Reduction Optimizations
 * WebNav Project - Consolidated CSS Structure
 * Date: May 19, 2025
 */

/* Reduce excessive whitespace in main.php */

/* Adjust body padding */
body {
  padding: 6px !important; /* Reduced from 12px */
}

/* Remove unnecessary space at top of body */
.mockup-phone {
  margin-top: 0 !important;
}

/* Optimize the fixed header height */
.fixed-header {
  height: auto !important;
  min-height: 50px !important; /* Reduced height */
}

.nav-bar {
  padding: 5px 8px !important; /* Reduced padding */
}

.logo-image {
  max-height: 38px !important; /* Smaller logo */
}

/* Adjust the scroll container padding */
.scroll {
  padding: 8px !important; /* Reduced from 20px */
  padding-top: 55px !important; /* Reduced from 120px for mobile */
  max-height: 92vh !important; /* Increased from 80vh to use more screen space */
}

/* Reduce space between content elements */
.center {
  margin-top: 0 !important;
}

/* Remove extra breaks */
.scroll br, .center br {
  display: none !important;
}

/* Specific fix for the first br after body tag */
body > br:first-of-type {
  display: none !important;
}

/* Reduce box margins and padding */
.box {
  margin: 8px 0 !important;
  padding: 8px !important;
  border-radius: 5px !important;
}

/* Styling for navigation links in editor mode */
.nav-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nav-link {
  display: inline-block;
  padding: 3px 0;
  text-decoration: none;
}

.nav-link + br {
  display: none;
}

/* Reduce space between form elements */
form {
  margin-bottom: 8px !important;
}

/* Compact table layouts */
table {
  margin: 8px 0 !important;
}

td {
  padding: 4px !important;
}

/* Reduce space at the bottom of the page */
.app-container {
  padding-bottom: 8px !important;
}

/* Reduce spacing in editor mode elements */
.editor-mode {
  margin-bottom: 8px !important;
  padding: 5px !important;
}

/* Reduce spacing in buttons */
button, .button, .control-button {
  padding: 6px 12px !important;
  margin: 3px !important;
}

/* Media queries for responsive adjustments */
@media (max-width: 576px) {
  /* Additional mobile-specific spacing reductions */
  .container {
    padding: 5px !important;
  }
  
  .button-row, .bottom-row {
    margin-bottom: 8px !important;
    gap: 5px !important;
  }
  
  /* Further reduce padding for mobile */
  .scroll {
    padding: 5px !important;
    padding-top: 50px !important;
  }
}