/* ==================================================
   GLOBAL STYLES (style.css)
   ================================================== */

/* Base & Body */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Roboto, sans-serif; background-color: #f1f5f9; color: #333; line-height: 1.6; padding: 0; /* Remove body padding here, header/main will handle it */ }
.hidden { display: none; }

/* Page Header for consistent navigation across pages */
.page-header {
  background-color: #ffffff; /* White background for the header */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Subtle shadow */
  padding: 15px 0; /* Vertical padding */
  margin-bottom: 40px; /* Space below the header */
  text-align: center; /* Center the content */
}

.page-header nav {
  max-width: 720px; /* Match max-width of #app */
  margin: 0 auto; /* Center the nav content */
  padding: 0 20px; /* Horizontal padding */
  border-bottom: none; /* Remove border-bottom from here */
}

.page-header nav h1 {
  font-size: 1.6rem; /* Slightly larger for prominence */
  font-weight: 600;
  margin-bottom: 12px; /* More space below heading */
  color: #1a2536; /* Darker text color */
}

.page-header nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 35px; /* Increased gap between nav items */
  margin-top: 10px;
  padding: 0;
}

.page-header nav a {
  text-decoration: none;
  color: #555; /* Neutral color for inactive links */
  font-weight: 500;
  font-size: 1.05rem; /* Slightly larger font size */
  padding: 5px 0; /* Padding for better click area */
  transition: color 0.2s ease-in-out; /* Smooth transition */
}

.page-header nav a:hover, .page-header nav a.active {
  color: #2563eb; /* Primary blue for hover/active */
  /* border-bottom: 2px solid #2563eb; Removed border, visual focus now on color */
}


/* Main Layout Container (adjustments for consistency with new header) */
#app {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px; /* Keep internal padding */
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  /* The margin-top of app will be handled by .page-header margin-bottom for a clean separation */
}

/* General Content & Forms (keep mostly same, minor tweaks for consistency) */
h2 { font-size: 1.4rem; padding-bottom: 10px; margin-top: 25px; }
p { margin-bottom: 1rem; }
button, .btn { background-color: #2563eb; color: white; border: none; padding: 12px 20px; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: 500; }
button:hover, .btn:hover { background-color: #1e40af; }
.btn-secondary { background-color: #64748b; }
.btn-secondary:hover { background-color: #475569; }
.nav-buttons { display: flex; justify-content: space-between; margin-top: 30px; flex-wrap: wrap; gap: 15px; }
input[type="text"] { padding: 10px; width: 100%; margin-top: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; }

/* Responsive adjustments for header */
@media (max-width: 768px) {
  /* body { padding: 10px; } // Removed from here, handled by page-header/app padding */
  .page-header {
    margin-bottom: 20px; /* Less space on mobile */
    padding: 10px 0;
  }
  .page-header nav {
    padding: 0 10px;
  }
  .page-header nav h1 {
    font-size: 1.4rem;
  }
  .page-header nav ul {
    flex-direction: column; /* Stack menu items vertically */
    gap: 8px;
    margin-top: 8px;
  }
  .page-header nav a {
    font-size: 1rem;
  }
  #app { padding: 15px; } /* Already present, keeping */
}