/* layout.css */

/* Main Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-4); /* Increased default padding */
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-3); /* Mobile specific padding */
  }
}

/* Header — base styles live in components/header.php for animation control */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-surface);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-main);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

/* Mobile Bottom Nav */
.bottom-nav {
  display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-surface);
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05); /* inverse shadow */
    z-index: 100;
    justify-content: space-around;
    padding: var(--spacing-2) 0;
    padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
  }

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    gap: 4px;
  }
  
  .nav-item.active {
    color: var(--color-primary);
  }

  /* Add padding to body so content doesn't get hidden behind the bottom nav */
  body {
    padding-bottom: 80px;
  }
}

/* Grid Layouts */
.grid {
  display: grid;
  gap: var(--spacing-2);
}

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1200px) {
  .grid-cols-5, .grid-cols-6 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
  .grid-cols-4, .grid-cols-5, .grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 { grid-template-columns: repeat(2, 1fr); }
}

/* Flex Layouts */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }

/* Section Block */
.section-block {
  margin: var(--spacing-4) 0;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--spacing-2);
}

/* Visibility Utilities */
.show-mobile { display: none !important; }
.hide-mobile { display: block !important; }

@media (max-width: 768px) {
  .show-mobile { display: block !important; }
  .hide-mobile { display: none !important; }
}