@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Taviraj:wght@300;400;500;600&display=swap');

/* Nehemiah Life Project Color Palette */
:root {
--nehemiah-gold-dark: #6E5336;
--nehemiah-gold-light: #C09A58;
--nehemiah-stone-dark: #5C5750;
--nehemiah-stone-light: #A49F98;
--nehemiah-background-cream: #F8F4EC;
--nehemiah-background-dark: #2B3A42;
--nehemiah-text-light: #FFFFFF;
--nehemiah-text-dark: #333333;
--nehemiah-success: var(--nehemiah-gold-dark);
--nehemiah-error: #dc3545;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Montserrat', sans-serif;
background-color: var(--nehemiah-background-cream);
color: var(--nehemiah-text-dark);
line-height: 1.6;
padding-top: 80px; /* Adjust based on navbar height */
}

.container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
border: 1px solid var(--nehemiah-stone-light);
}

/* Navigation Bar */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--nehemiah-stone-dark);
padding: 10px 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
border-bottom: 2px solid var(--nehemiah-gold-dark);
}

.navbar-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}



.navbar-logo {
font-family: 'Taviraj', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--nehemiah-gold-light);
text-decoration: none;
display: flex;
align-items: center;
gap: 15px;
}

.navbar-nav {
  display: flex;
  gap: 10px;
  list-style: none;
}

/* Change 'a' to '.nav-link' to target your new <span> tags */
.navbar-nav .nav-link {
  padding: 8px 16px;
  text-decoration: none;
  color: var(--nehemiah-text-light);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 25px;
  transition: all 0.3s ease;
  cursor: pointer; /* Add this to make it feel like a link */
}

/* Update the hover state */
.navbar-nav .nav-link:hover {
  background: var(--nehemiah-gold-dark);
  color: var(--nehemiah-text-light);
}



/* Update the user profile menu link */
.user-profile-menu .nav-link {
  color: var(--nehemiah-text-light);
  font-weight: 600;
  text-decoration: none;
}

.profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--nehemiah-background-cream);
  border-radius: 8px;
  padding: 10px;
  min-width: 180px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  display: none;
  z-index: 1001;
  border: 1px solid var(--nehemiah-stone-light);
}

.profile-dropdown.show {
  display: block;
}

/* Change 'a' to '.nav-link' to target your new <span> tags */
.profile-dropdown .nav-link {
  display: block;
  padding: 8px 12px;
  color: var(--nehemiah-stone-dark);
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer; /* Add this to make it feel clickable */
}

/* Update the hover state */
.profile-dropdown .nav-link:hover {
  background-color: #e9e5de;
}

/* This rule will still work because the span has the logout-btn class */
.logout-btn {
  color: var(--nehemiah-error) !important;
}

/* Container for the logo to enable hover */
.logo-container {
    position: relative; /* This is crucial for positioning the pop-up */
    display: flex;
    align-items: center;
}

/* Style the pop-up box */
.logo-popup {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--nehemiah-background-cream);
    color: var(--nehemiah-text-dark);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    width: 250px;
    z-index: 1001;
    
    /* Hide it by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* Show the pop-up on hover */
.logo-container:hover .logo-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Text styles inside the pop-up */
.logo-popup strong {
    font-size: 1.1rem;
    color: var(--nehemiah-gold-dark);
}
.logo-popup p {
    margin: 5px 0 15px 0;
    font-size: 0.9rem;
}
.logo-popup .directions-link {
    display: inline-block;
    background-color: var(--nehemiah-gold-dark);
    color: var(--nehemiah-text-light);
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
}
.logo-popup .directions-link:hover {
    background-color: var(--nehemiah-gold-light);
}


/* Header & Welcome */
.header {
text-align: center;
/* Removed background, border, and shadow to blend with the page */
background: transparent;
border: none;
box-shadow: none;
/* Kept padding for spacing */
padding: 10px 30px;
margin-bottom: 40px;
}
.header h1 {
font-family: 'Taviraj', serif;
font-size: 3.5rem;
font-weight: 600;
color: var(--nehemiah-gold-dark);
margin-bottom: 15px;
}
.subtitle {
font-size: 1.3rem;
color: var(--nehemiah-stone-dark);
font-style: italic;
font-weight: bold;
}
.welcome-text {
background: var(--nehemiah-stone-dark);
color: var(--nehemiah-text-light);
padding: 30px;
border-radius: 12px;
}
.welcome-text h2 {
color: var(--nehemiah-gold-light);
text-align: center;
}

/* Buttons */
.form-btn, .back-btn, .nav-btn, .mark-complete-btn {
background: var(--nehemiah-gold-dark);
color: var(--nehemiah-text-light);
margin-top: 25px;
border: none;
padding: 18px 40px;
border-radius: 50px;
cursor: pointer;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
display: inline-flex;
align-items: center;
gap: 10px;
}
.form-btn:hover, .back-btn:hover, .nav-btn:hover:not(:disabled), .mark-complete-btn:hover {
background: var(--nehemiah-gold-light);
color: var(--nehemiah-text-dark);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.mark-complete-btn.completed {
  background: var(--nehemiah-success);
}

/* Dashboard & Cards */
.dashboard {
background: var(--nehemiah-text-light);
border-radius: 12px;
padding: 40px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
border: 1px solid var(--nehemiah-stone-light);
}
.dashboard h2 {
font-family: 'Taviraj', serif;
color: var(--nehemiah-gold-dark);
font-size: 3rem;
text-align: center;
}
.dashboard-subtitle {
text-align: center;
color: var(--nehemiah-stone-dark);
font-style: italic;
margin-bottom: 35px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.stat-card {
background: var(--nehemiah-background-cream);
padding: 30px;
border-radius: 12px;
text-align: center;
border: 1px solid var(--nehemiah-stone-light);
border-top: 4px solid var(--nehemiah-gold-dark);
}
.stat-number {
font-size: 3rem;
font-weight: 700;
color: var(--nehemiah-gold-dark);
}
.stat-label {
color: var(--nehemiah-stone-dark);
font-size: 1rem;
font-weight: 500;
}

/* Modals */
.modal {
display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
}
.modal.active { display: flex; justify-content: center; align-items: center; }
.modal-content {
background: var(--nehemiah-background-cream);
padding: 40px; border-radius: 12px; width: 90%; max-width: 450px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border: 1px solid var(--nehemiah-stone-light);
position: relative;
max-height: 90vh; overflow-y: auto;
}
.modal-header h2 {
font-family: 'Taviraj', serif; font-size: 2.0rem; color: var(--nehemiah-gold-dark);
}
.modal-header p { color: var(--nehemiah-stone-dark); font-style: italic; }
.close-btn {
position: absolute; top: 15px; right: 20px; font-size: 2rem;
cursor: pointer; color: var(--nehemiah-stone-light);
}
.close-btn:hover { color: var(--nehemiah-stone-dark); }

/* Fullscreen Modals (Bible, Prayer, etc.) */
.fullscreen-modal {
display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%;
background: var(--nehemiah-background-cream);
overflow-y: auto;
}
.fullscreen-modal.active { display: block; }
.fullscreen-close-btn {
position: fixed; top: 20px; right: 30px; font-size: 3rem;
cursor: pointer; color: var(--nehemiah-stone-light);
z-index: 3001;
}
.fullscreen-close-btn:hover { color: var(--nehemiah-stone-dark); }
.fullscreen-modal-content { padding: 80px 40px 40px; max-width: 1400px; margin: 0 auto; }

/* Bible Reading & Prayer Container Styles */
.bible-reading-container, .prayer-modal-container {
background: var(--nehemiah-text-light);
border-radius: 12px; padding: 40px;
border: 2px solid var(--nehemiah-stone-dark);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.bible-header h1, .prayer-modal-header h1 {
font-family: 'Taviraj', serif; font-size: 3.5rem; color: var(--nehemiah-gold-dark); text-align: center;
}

.bible-header p, .prayer-modal-header p {
color: var(--nehemiah-stone-dark); text-align: center;
}


/* Adds space below the "Theme" */
.scripture-theme {
  margin-bottom: 25px;
}

/* Adds space below the "Key Verse" box */
.key-verse-container {
  margin-bottom: 30px;
}

/* Adds space below the "Devotional" section */
.devotional-container {
  border: 4px solid var(--nehemiah-stone-dark);
  background: var(--nehemiah-text-light);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.reflection-section {
    border: 4px solid var(--nehemiah-gold-dark);
    border-radius: 12px;
    background: #fdfcf9; padding: 15px;
    margin-top: 50px;
}

.mark-complete-btn {
  margin-bottom: 25px;
}



.save-notes-btn {
  background: var(--nehemiah-gold-dark);
  color: var(--nehemiah-text-light);
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.save-notes-btn:hover {
  background: var(--nehemiah-gold-light);
  color: var(--nehemiah-text-dark);
}

.day-number { color: var(--nehemiah-gold-dark); font-size: 3rem; font-weight: 700; }
.progress-fill { background: linear-gradient(90deg, var(--nehemiah-gold-light), var(--nehemiah-gold-dark)); }
.scripture-title { color: var(--nehemiah-gold-dark); }
.scripture-theme { color: var(--nehemiah-stone-dark); }
.key-verse-container {
  border: 4px solid var(--nehemiah-gold-dark);
  border-radius: 12px;
  background: #fdfcf9; padding: 15px;
  margin-top: 50px;
}

.day-navigation {
    width: 100%;
    text-align: center;
}

.day-jumper {
margin-top: 30px;
padding: 25px;
background: var(--nehemiah-background-cream);
border: 1px solid var(--nehemiah-stone-light);
border-radius: 12px;
}

.day-jumper h4 {
text-align: center;
color: var(--nehemiah-gold-dark);
margin-bottom: 20px;
font-size: 1.2rem;
}

.day-grid {
display: grid;
/* This creates the responsive grid layout */
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
gap: 8px;
max-height: 200px;
overflow-y: auto;
padding-right: 5px; /* for scrollbar */
}

.day-btn {
aspect-ratio: 1;
border: 2px solid var(--nehemiah-stone-light);
background: var(--nehemiah-text-light);
color: var(--nehemiah-stone-dark);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
}

.day-btn:hover {
background: #e9e5de; /* A slightly darker cream */
border-color: var(--nehemiah-gold-light);
transform: scale(1.05);
}

.day-btn.completed {
background: var(--nehemiah-gold-dark);
border-color: var(--nehemiah-gold-dark);
color: var(--nehemiah-text-light);
}
.day-btn.current {
background: var(--nehemiah-gold-light);
color: var(--nehemiah-text-dark);
border-color: var(--nehemiah-gold-light);
font-weight: 700;
}

.reading-progress-bar {
    /* Progress Bar */
    width: 100%;
    margin: 40px 40px 40px; /* This increases the top margin to 40px */
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}

/* Prayer Wheel */
.prayer-wheel path { transition: opacity 0.3s ease; cursor: pointer; }
.prayer-wheel path:hover { opacity: 0.85; }
#adoration-slice, #thanksgiving-slice, #intercession-slice, #worship-slice { fill: var(--nehemiah-gold-dark); }
#confession-slice, #supplication-slice, #listening-slice, #meditation-slice { fill: var(--nehemiah-gold-light); }
.prayer-wheel text {
  fill: var(--nehemiah-text-dark);
  fill: var(--nehemiah-text-dark);
  font-family: 'Montserrat', sans-serif;
  pointer-events: none;
}
.prayer-timer-display {
  color: #ffffff; /* Or whatever color you want */
  font-size: 4rem;
  font-weight: bold;
  margin: 30px 0;
  font-family: monospace;
}
.timer-btn {
  background: var(--nehemiah-gold-dark);
  color: var(--nehemiah-text-light);
  padding: 12px 25px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.timer-btn:hover {
  background: var(--nehemiah-gold-light);
  color: var(--nehemiah-text-dark);
 }

/* Forms */
.form-group label { color: var(--nehemiah-gold-dark); font-weight: 600; }
.form-group input, .form-group textarea, .assessment-question select, .reading-notes textarea {
width: 100%; padding: 12px; border: 2px solid var(--nehemiah-stone-light);
border-radius: 8px; font-size: 1rem;
background: var(--nehemiah-text-light); color: var(--nehemiah-text-dark);
}
.assessment-question textarea {
width: 100%;
padding: 12px;
border: 2px solid var(--nehemiah-stone-light);
border-radius: 10px;
background: var(--nehemiah-text-light);
color: var(--nehemiah-text-dark);
font-size: 1rem;
/* Add these two lines */
height: 100px;     /* Set a specific height */
resize: none;      /* Disable resizing */
}

/* Error and Success Messages */
.error-message {
padding: 12px; border-radius: 8px; margin-bottom: 20px; display: none;
background: rgba(220, 53, 69, 0.1); color: var(--nehemiah-error);
border: 1px solid rgba(220, 53, 69, 0.3);
}
.success-message {
padding: 12px;
border-radius: 8px;
margin-bottom: 20px;
display: none;
/* Updated with !important to force the new theme colors */
background-color: rgba(110, 83, 54, 0.1) !important;
color: var(--nehemiah-gold-dark) !important;
border: 1px solid rgba(110, 83, 54, 0.3) !important;
}
/* Keep all structural and non-color related rules from original CSS */
.page { display: none; }
.page.active { display: block; }
.mobile-menu-toggle { display: none; }
.user-profile-menu { position: relative; }
.user-profile-menu.active { display: block; }

/* All other selectors and properties you had for layout... */
.progress-section, .assessment-section, .daily-checklist, etc {
  margin: 25px 0;
  padding: 25px;
  border: 1px solid var(--nehemiah-stone-light);
  border-radius: 12px;
  background: var(--nehemiah-text-light);
}



/* Responsive Design */
@media (max-width: 768px) {
body { padding-top: 20px; }
.container { padding: 15px; }
.header h1 { font-size: 2.5rem; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.mobile-menu-toggle { display: flex; flex-direction: column; cursor: pointer; }
.mobile-menu-toggle span { width: 25px; height: 3px; background: var(--nehemiah-text-light); margin: 3px 0; }
.navbar-nav {
    position: fixed; top: 72px; left: -100%; width: 100%; height: calc(100vh - 72px);
    background: var(--nehemiah-background-cream); flex-direction: column;
    padding: 20px; transition: left 0.3s ease;
}
.navbar-nav.active { left: 0; }
.navbar-nav a { color: var(--nehemiah-stone-dark); width: 100%; }
.fullscreen-modal-content { padding: 80px 20px 20px; }
}

/* === Assessment Results Styling === */

/* Style for the headings like "Your Spiritual Strengths:" */
#assessmentResultsContent h4 {
  color: var(--nehemiah-gold-light);
  margin-bottom: 15px;
  margin-top: 25px; /* Adds space above each new section */
}

/* Style for the "Your Spiritual Strengths" items */
#assessmentResultsContent .strength-area {
  background: rgba(224, 184, 115, 0.2); /* Transparent nehemiah-gold-light */
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 8px;
  border-left: 4px solid var(--nehemiah-gold-light);
}

/* Style for the "Areas for Growth" items */
#assessmentResultsContent .growth-area {
  background: rgba(121, 111, 98, 0.3); /* Transparent nehemiah-stone-light */
  color: #f0f0f0;
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 8px;
  border-left: 4px solid var(--nehemiah-stone-light);
}

/* Style for the "Your Personal Goal" box */
#assessmentResultsContent .personal-goal-display {
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
}

/* Style for the list items in "Your Personalized Recommendations" */
#assessmentResultsContent ul li {
  color: var(--nehemiah-light);
  margin-bottom: 10px;
}

/* Style for the footer area of the results */
#assessmentResultsContent .results-footer {
  text-align: center;
  margin-top: 30px;
}


/* Style for the new scripture link */
.scripture-title a {
    color: inherit; /* Makes the link inherit the heading's color */
    text-decoration: none; /* Removes the underline */
}

.scripture-title a:hover {
    text-decoration: underline; /* Adds an underline when you hover over it */
}