/* --- 1. IMPORT FONT & GLOBAL STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #111827; /* Dark background */
  color: #E5E7EB; /* Light text */
  margin: 0;
  padding: 0;
}

/* --- 2. NAVBAR STYLES --- */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1F2937; /* Lighter dark for navbar */
  color: white;
  padding: 0 20px;
  height: 60px;
  border-bottom: 1px solid #374151; /* Subtle separator */
}

.navbar .nav-brand {
  font-size: 1.5rem;
  font-weight: 800;
  /* Catchy gradient text */
  background: linear-gradient(90deg, #38BDF8, #A78BFA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.navbar .nav-links {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.navbar .nav-links li a {
  display: block;
  color: #E5E7EB; /* Light text */
  text-decoration: none;
  padding: 20px 15px;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
  border-bottom: 2px solid transparent; /* For active state */
}

.navbar .nav-links li a:hover {
  background-color: transparent;
  color: #FFFFFF; /* Brighter white on hover */
}

.navbar .nav-links li a.active {
  background-color: transparent;
  color: #FFFFFF;
  font-weight: 700;
  /* Active link gradient border */
  border-bottom: 2px solid #38BDF8;
}

/* --- 3. CONTENT AREA STYLES --- */
.content {
  padding: 30px;
}

.container {
  background: #1F2937; /* Lighter dark for content */
  padding: 30px 40px;
  border-radius: 12px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto; 
  text-align: center;
  border: 1px solid #374151; /* Subtle border */
  box-shadow: none; /* Remove old shadow */
}

.container h1 { 
  margin-top: 0; 
  margin-bottom: 25px; 
  font-size: 1.8rem; 
  color: #FFFFFF; /* White heading */
}

/* --- 4. LANDING PAGE (`index.html`) --- */
.landing-page {
  text-align: center;
}

.choice-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
  flex-wrap: wrap; /* Added for responsiveness */
}

.choice-box {
  background: #1F2937; /* Lighter dark */
  border-radius: 12px;
  padding: 30px;
  width: 300px;
  border: 1px solid #374151; /* Subtle border */
  text-align: left;
  display: flex;
  flex-direction: column; 
  transition: transform 0.2s ease, border-color 0.2s ease;
  box-shadow: none;
}

.choice-box:hover {
  transform: translateY(-5px);
  border-color: #38BDF8; /* Accent border on hover */
}

.choice-box .button {
  margin-top: auto; 
}

.choice-box h2 {
  margin-top: 0;
  color: #38BDF8; /* Accent color heading */
}

/* --- 5. PRACTICE HUB (`practice.html`) --- */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.practice-box {
  display: block;
  background: #1F2937; /* Lighter dark */
  border-radius: 12px;
  padding: 40px 30px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #E5E7EB; /* Light text */
  text-decoration: none;
  border: 1px solid #374151; /* Subtle border */
  transition: transform 0.2s ease, border-color 0.2s ease;
  box-shadow: none;
  position: relative;
}

.practice-box:hover {
  transform: translateY(-5px);
  border-color: #38BDF8; /* Accent border on hover */
  color: #FFFFFF;
}

/* --- 6. FORM & BUTTON STYLES (for `mock.html` etc.) --- */
textarea { 
  width: 100%; 
  height: 100px; 
  border: 1px solid #374151; /* Dark border */
  border-radius: 8px; 
  padding: 12px; 
  resize: vertical; 
  font-size: 1rem; 
  font-family: inherit; 
  margin-bottom: 15px; 
  box-sizing: border-box;
  background: #2b3a50; /* Dark input bg */
  color: #E5E7EB; /* Light text */
}

textarea:focus { 
  outline: none; 
  border-color: #38BDF8; /* Accent border */
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3); 
}


/* --- ⭐️ START OF BUTTON FIXES ⭐️ --- */

/* Rule 1: Styles for ALL buttons (<a> tags on home, <button> on others) */
.button,
.container button {
  display: inline-block;
  text-decoration: none !important; /* Force no underline */
  padding: 12px 20px;
  font-size: 1rem; /* Standardized font size */
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700; /* Made font explicitly bold */
  transition: all 0.3s ease;
  margin-top: 15px;
  text-align: center; /* Ensure text is centered */
  letter-spacing: 0.5px; /* Add professional feel */
  border: none; /* Reset border for <button> */
  box-sizing: border-box; /* Ensure padding is included */
}

/* Rule 2: Gradient for ALL primary buttons */
.button.button-primary,
.container button {
  color: white;
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
  background-size: 200% 100%;
  width: auto; /* Allow buttons to size to content by default */
  margin-bottom: 20px;
}
/* On index.html, make the button full width inside its box */
.choice-box .button {
    width: 100%;
}
/* On other pages, make <button> elements full width */
.container button {
    width: 100%;
}


/* Rule 3: Hover for ALL primary buttons */
.button.button-primary:hover:not(:disabled),
.container button:hover:not(:disabled) { 
  background-position: 100% 0; /* Shift gradient on hover */
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);
  color: white; /* Ensure text stays white on hover */
}

/* Rule 4: Disabled state for ALL primary buttons */
.button.button-primary:disabled,
.container button:disabled { 
  background: #374151; /* Dark disabled state */
  color: #6B7280;
  cursor: not-allowed; 
  background-image: none; /* Remove gradient when disabled */
  box-shadow: none;
}

/* --- ⭐️ END OF BUTTON FIXES ⭐️ --- */


/* Specific buttons from mock.html */
#generate-button { 
  background: #059669; /* Keep green for "Generate" */
  width: auto; 
  margin-bottom: 0; 
}
#generate-button:hover:not(:disabled) { background: #047857; box-shadow: none; background-position: 0; }

.audio-controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 15px; }
#record-button, #stop-button { width: auto; margin-bottom: 0; }
#record-button { background: #E11D48; } /* Red */
#record-button:hover:not(:disabled) { background: #BE123C; box-shadow: none; background-position: 0; }
#stop-button { background: #4B5563; } /* Grey */
#stop-button:hover:not(:disabled) { background: #374151; box-shadow: none; background-position: 0; }
#record-status { font-weight: bold; color: #F87171; } /* Light red */

#audio-playback { display: none; width: 100%; margin-bottom: 15px; }
.speech-controls { text-align: right; margin-top: -10px; margin-bottom: 10px; height: 30px; }
#speech-play-button { 
  display: none; 
  width: auto; 
  font-size: 0.8rem; 
  padding: 5px 10px; 
  background: #6D28D9; /* Purple */
  margin-bottom: 0; 
}
#speech-play-button:hover:not(:disabled) { background: #5B21B6; box-shadow: none; background-position: 0; }
#model-status { font-size: 0.9rem; color: #9CA3AF; margin-bottom: 10px; } /* Lighter grey text */

/* Video & Resume */
.video-container { 
  display: none; 
  margin-bottom: 15px; 
  background: #000; 
  border-radius: 8px; 
  width: 100%; 
  max-width: 400px; 
  margin-left: auto; 
  margin-right: auto; 
  overflow: hidden; 
}
#user-video { 
  width: 100%; 
  height: auto; 
  border-radius: 8px; 
  transform: scaleX(-1); 
}
.resume-uploader { 
  background: #2b3a50; /* Darker box */
  border: 1px dashed #4B5563; /* Grey dashed border */
  border-radius: 8px; 
  padding: 15px; 
  margin-bottom: 15px; 
  text-align: left; 
}
.resume-uploader label { font-weight: bold; margin-right: 10px; font-size: 0.9rem; color: #E5E7EB; }
#resume-status { font-style: italic; font-size: 0.9rem; color: #9CA3AF; }

/* Response Box */
.response-box { 
  background: #111827; /* Darkest bg */
  border-radius: 8px; 
  padding: 15px; 
  text-align: left; 
  white-space: pre-wrap; 
  font-family: "Courier New", Courier, monospace; 
  color: #E5E7EB; /* Light text */
  border: 1px solid #374151; /* Subtle border */
  min-height: 50px; 
}

/* --- 7. SPLASH PAGE STYLES (for new index.html) --- */
.splash-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.splash-content {
  max-width: 600px;
}

/* --- 7. SPLASH PAGE STYLES (for new index.html) --- */
.splash-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.splash-content {
  max-width: 900px; /* Make the box wider */
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3-column layout */
  gap: 25px;
}

.feature-item {
  background: #111827; /* Darkest background */
  border: 1px solid #374151;
  padding: 20px;
  border-radius: 8px;
}

.feature-item h3 {
  color: #38BDF8; /* Accent color */
  margin-top: 0;
}

.advantages-list {
  list-style-type: '✅'; /* Use a checkmark for bullets */
  padding-left: 20px;
}

.advantages-list li {
  padding-left: 10px;
  margin-bottom: 15px;
  font-size: 1rem;
  line-height: 1.6;
}

.advantages-list li strong {
  color: #E5E7EB;
}

/* Make grid responsive on smaller screens */
@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: 1fr; /* Stack columns */
  }
}

/* --- 7. SPLASH PAGE STYLES (for new index.html) --- */
.splash-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.splash-content {
  max-width: 1100px; /* Made the container wider */
  text-align: left; /* Aligned text to the left */
}

.splash-intro {
  font-size: 1.2rem; /* Larger intro text */
  color: #E5E7EB; 
  max-width: 750px; 
  margin: 0 auto 30px auto; 
  text-align: center;
  line-height: 1.6;
}

.splash-heading {
  text-align: center;
  border-top: 1px solid #374151;
  padding-top: 30px;
  margin-top: 30px;
  color: #fff;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3-column layout */
  gap: 25px;
}

.feature-item {
  background: #111827; /* Darkest background */
  border: 1px solid #374151;
  padding: 20px 25px;
  border-radius: 8px;
  line-height: 1.6;
}

.feature-item h3 {
  color: #38BDF8; /* Accent color */
  margin-top: 0;
  font-size: 1.25rem;
}

.feature-item p {
  color: #D1D5DB;
  font-size: 0.95rem;
}

.advantages-list {
  list-style-type: none; /* Remove default bullets */
  padding-left: 0;
}

.advantages-list li {
  padding-left: 30px; /* Space for the icon */
  margin-bottom: 15px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #D1D5DB;
  position: relative;
}

.advantages-list li::before {
  content: '✅'; /* Use a checkmark emoji */
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 1.1rem;
}

.advantages-list li strong {
  color: #E5E7EB;
  font-weight: 700;
}

/* Make grid responsive on smaller screens */
@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: 1fr; /* Stack columns */
  }
}

/* --- 7. SPLASH PAGE STYLES (for new index.html) --- */
.splash-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.splash-content {
  max-width: 1100px; /* Made the container wider */
  text-align: left; /* Aligned text to the left */
}

.splash-intro {
  font-size: 1.2rem; /* Larger intro text */
  color: #E5E7EB; 
  max-width: 750px; 
  margin: 0 auto 30px auto; 
  text-align: center;
  line-height: 1.6;
}

.splash-heading {
  text-align: center;
  border-top: 1px solid #374151;
  padding-top: 30px;
  margin-top: 30px;
  color: #fff;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3-column layout */
  gap: 25px;
}

.feature-item {
  background: #111827; /* Darkest background */
  border: 1px solid #374151;
  padding: 20px 25px;
  border-radius: 8px;
  line-height: 1.6;
}

.feature-item h3 {
  color: #38BDF8; /* Accent color */
  margin-top: 0;
  font-size: 1.25rem;
}

.feature-item p {
  color: #D1D5DB;
  font-size: 0.95rem;
}

/* ⭐️ --- NEW STYLES FOR THE DETAILED BREAKDOWN --- ⭐️ */
.detailed-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3-column layout */
  gap: 25px;
  margin-top: 20px;
}

.detailed-feature-card {
  background: #1F2937; /* Lighter dark, same as main container */
  border: 1px solid #374151;
  padding: 20px 25px;
  border-radius: 8px;
  line-height: 1.6;
}

.detailed-feature-card h3 {
  color: #38BDF8; /* Accent color */
  margin-top: 0;
  font-size: 1.25rem;
  border-bottom: 1px solid #374151;
  padding-bottom: 10px;
}

.detailed-feature-card ul {
  list-style-type: none; /* Remove default bullets */
  padding-left: 0;
  margin-top: 20px;
}

.detailed-feature-card li {
  padding-left: 28px; /* Space for the icon */
  margin-bottom: 15px;
  font-size: 0.95rem; /* Slightly smaller text for details */
  line-height: 1.6;
  color: #D1D5DB;
  position: relative;
}

.detailed-feature-card li::before {
  content: '🔹'; /* Use a blue diamond bullet */
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 1rem;
}

.detailed-feature-card li strong {
  color: #E5E7EB;
  font-weight: 600;
}
/* ⭐️ --- END OF NEW STYLES --- ⭐️ */


.advantages-list {
  list-style-type: '✅'; /* Use a checkmark for bullets */
  padding-left: 20px;
}

.advantages-list li {
  padding-left: 10px;
  margin-bottom: 15px;
  font-size: 1rem;
  line-height: 1.6;
}

.advantages-list li strong {
  color: #E5E7EB;
}

/* Make grid responsive on smaller screens */
@media (max-width: 900px) {
  .feature-grid,
  .detailed-feature-grid { /* Apply to new grid as well */
    grid-template-columns: 1fr; /* Stack columns */
  }
}

/* --- 8. SPLASH PAGE LOGO STYLE --- */
.splash-logo {
  max-width: 400px; /* You can change this width */
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}

/* --- 8. NAVBAR AUTH STYLES --- */

/* Style for "Welcome, User!" text */
.nav-user-info {
  display: block;
  color: #9CA3AF; /* Muted grey text */
  padding: 20px 15px;
  font-weight: 500;
  font-style: italic;
  cursor: default;
}

/* Style for Login/Signup/Logout buttons in navbar */
.nav-button-login,
.nav-button-signup,
.nav-button-logout {
  display: block;
  color: white;
  text-decoration: none;
  padding: 12px 15px !important; /* Overrides default padding */
  margin: 10px 0 10px 10px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: 6px;
  border-bottom: none !important; /* Remove active link border */
}

.nav-button-login:hover,
.nav-button-signup:hover,
.nav-button-logout:hover {
  color: white !important;
  transform: translateY(-2px);
}

.nav-button-login {
  background-color: #374151;
}
.nav-button-login:hover {
  background-color: #4B5563 !important;
}

.nav-button-signup {
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
}
.nav-button-signup:hover {
  background-position: 100% 0 !important;
}

.nav-button-logout {
  background-color: #BE123C;
}
.nav-button-logout:hover {
  background-color: #E11D48 !important;
}