/* ==========================================================================
   2025styles.css - Core Half-Mind Stylesheet
   ========================================================================== */

/* 1. Global Reset & Box Sizing */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

body { 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; 
  color: #333333; 
  background-color: #ffffff;
  line-height: 1.5; 
}

/* 2. Global Links */
a { 
  color: #0077cc; 
  text-decoration: none; 
}
a:hover, a:focus { 
  text-decoration: underline; 
  color: #005299; 
}

/* 3. Site Header */
header.site-header {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  background: #f2f2f2; 
  padding: 0.8em 1.2em;
  position: sticky; 
  top: 0; 
  z-index: 100;
  border-bottom: 1px solid #e0e0e0;
}
.logo { 
  font-size: 1.25rem; 
  font-weight: bold; 
}
.nav-toggle { 
  font-size: 1.5rem; 
  background: none; 
  border: none; 
  cursor: pointer;
  display: block; 
}
.main-nav { 
  display: none; 
}
.main-nav ul { 
  list-style: none; 
  display: flex; 
  flex-direction: column; 
  gap: 0.5em; 
}
.user-box { 
  font-size: 0.9rem; 
}

/* 4. Layout & Hero Sections */
.hero {
  background: #e8f7ff; 
  padding: 1.5em 1em; 
  text-align: center;
}
.stats { 
  padding: 2em 1em; 
}
.table-container { 
  overflow-x: auto; 
  width: 100%;
}

/* 5. Standard Content Tables (Non-DataTables) */
table.content-table {
  width: 100%; 
  border-collapse: collapse;
  margin: 1em 0;
}
table.content-table th, 
table.content-table td {
  border: 1px solid #cccccc; 
  padding: 0.5em 0.75em; 
  text-align: left;
}
table.content-table th {
  background-color: #f8f9fa;
  font-weight: bold;
}

/* 6. Legacy / Half-Mind App Helper Classes */
.c0 { background-color: #ffff66; } /* Yellow highlight */
.c88, .shaded-out { opacity: 0.55; color: #888888; } /* Bounced / invalid email */
.cb { color: #d9534f; font-weight: bold; } /* Active visited marker */

/* 7. Button & Grid Components */
.btn-primary {
  display: inline-block;
  background: #2a6496;
  color: #ffffff !important;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover {
  background: #1d4b73;
  text-decoration: none;
}

.links-grid {
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 1em;
  padding: 1em;
}
.links-grid a {
  display: block; 
  padding: 1em; 
  background: #fafafa; 
  border: 1px solid #dddddd;
  border-radius: 6px; 
  text-align: center;
}
.links-grid a:hover {
  background: #f0f4f8;
  border-color: #b0c4de;
}

/* 8. Footer */
.site-footer {
  padding: 1.5em; 
  background: #f2f2f2; 
  text-align: center; 
  font-size: 0.9rem;
  border-top: 1px solid #e0e0e0;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Medium screens (Tablets, 600px and up) */
@media (min-width: 600px) {
  .main-nav { display: flex; }
  .main-nav ul { flex-direction: row; gap: 1em; }
  .nav-toggle { display: none; }
  .links-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Large screens (Desktops, 900px and up) */
@media (min-width: 900px) {
  .links-grid { grid-template-columns: repeat(3, 1fr); }
}