:root {
  --text-color: #333;
}

body {
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #f4f7f6;
  color: var(--text-color);
}

span {
  font-weight: bold;
  letter-spacing: normal;
}

.titleSpan {
  color: var(--accent-color);
}

.resources-title-span {
  color: var(--primary-color);
}

.btn-link {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: 0.625rem 1.25rem; /* 10px 20px */
  border-radius: 0.3125rem; /* 5px */
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-link:hover {
  background-color: var(--secondary-color);
  transform: translateY(-0.125rem); /* 2px */
}

.btn-link i {
  margin-left: 0.5rem; /* 8px */
}

/* --- Sections General Styling --- */
.articles-section,
.tools-section {
  padding: 1.3rem 0;
  text-align: center;
  background-color: var(--section-background);
}

.articles-section h2,
.tools-section h2 {
  margin-bottom: 1.875rem; /* 30px */
  color: var(--secondary-color);
  font-size: 2rem;
  font-weight: 600;
}

/* --- Resources Hero Section --- */
.resources-hero {
  background: linear-gradient(rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.5)),
    url("/assets/counselingGroupPhoto.jpeg") no-repeat top center/cover;
  color: var(--light-text-color);
  text-align: left;
  padding: 3.75rem 0.9375rem; /* 60px 15px */
}

.resources-hero h1 {
  color: var(--light-text-color);
  font-size: 2.2rem;
  margin-bottom: 0.9375rem; /* 15px */
  width: 60%;
}

.resources-hero p {
  font-size: 1.1rem;
  max-width: 700px;
  text-align: left;
}

/* --- Helplines Section --- */
.helplines-section {
  background-color: rgb(251, 212, 219);
  padding: 2.5rem 1.25rem; /* 40px 20px */
  text-align: center;
}

.helplines-section h2 {
  font-weight: 600;
}

.helplines-section li {
  list-style: none;
}

.helplines-section .section-description {
  font-style: italic;
  color: red;
}

.helpline-list a {
  color: #4f46e5;
}

.googleMap {
  margin-top: 2rem;
}

#googleMapLink {
  margin-top: 5rem;
  text-decoration: none;
  color: var(--primary-color);
  cursor: pointer;
  font-weight: 600;
}

/* --- Tools Section Specific Styling --- */

/* Tab buttons container */
.tools-tabs {
  display: flex;
  justify-content: center;
  width: 85%;
  margin: 0 auto;
}

/* Generic tab button styling */
.tab {
  padding: 0.7rem 1.25rem; /* 12px 20px */
  border: none;
  border-radius: 25px 25px 0 0;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: var(--light-text-color);
}

.mood-tracker-tab {
  background-color: var(--secondary-color);
}

.gratitude-journal-tab {
  background-color: var(--primary-color);
}

.thought-record-tab {
  background-color: rgb(255, 81, 0);
}

.tab.active {
  transform: translateY(-0.4375rem); /* 7px */
  transform: scaleX(1.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: var(--accent-color);
}

/* General tab content visibility */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tools-section .resource-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  justify-content: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- Individual Tool Card Styles (.tool-card) --- */
.tool-card {
  background-color: var(--card-background);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
}

.tool-card:hover {
  transform: translateY(-0.3125rem); /* 5px */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.tool-card .resource-img {
  width: 100%;
  height: 12.5rem; /* 200px */
  object-fit: cover;
}

.tool-card .card-body {
  padding: 1.5rem;
  text-align: center;
  width: 100%;
}

.tool-card .resource-card-title {
  font-size: 1.75rem;
  color: #2c3e50; /* Specific dark color */
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.tool-card p {
  font-size: 1rem;
  color: #555; /* Specific mid-tone color */
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Form controls within the tool cards */
.tool-card .form-control {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 1rem;
  color: var(--text-color);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: #fdfdfd;
  box-sizing: border-box; /* Ensures padding/border are included in width */
}

.tool-card .form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.tool-card label {
  display: block;
  text-align: left;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.95rem;
}

.tool-card .btn.btn-link {
  background-color: var(--primary-color);
  color: var(--light-text-color);
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  margin-top: 1rem;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
}

.tool-card .btn.btn-link:hover {
  background-color: #4f46e5;
  transform: translateY(-0.125rem);
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.3);
}

.tool-card .btn.btn-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(99, 102, 241, 0.2);
}

/* --- Feedback and History Sections within Tool Cards --- */

.tool-card .mood-feedback,
.tool-card #mood-history,
.tool-card #journal-history,
.tool-card #cbt-history {
  background-color: #f0f4ff;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 1.5rem;
  border: 1px solid #c7d2fe;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

/* User's original feedback message styles (more specific by ID) */
#mood-feedback,
#journal-feedback,
#cbt-feedback {
  margin: 15px auto; /* 15px */
  padding: 0.75rem; /* 12px */
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  border: 1px solid;
  font-size: 0.95em;
  animation: fadeIn 0.5s ease-out;
}

.mood-feedback.feedback-positive {
  background-color: #d4edda;
  border-color: var(--success-color);
  color: #155724;
}

.mood-feedback.feedback-neutral {
  background-color: #fff3cd;
  border-color: var(--accent-color);
  color: #856404;
}

.mood-feedback.feedback-negative {
  background-color: #f8d7da;
  border-color: var(--error-color);
  color: #721c24;
}

.mood-feedback.feedback-general {
  background-color: #e0f7fa;
  border-color: var(--info-color);
  color: #006064;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

 /* Adjustments for existing elements for better flow */
 .tool-card .mood-feedback {
    margin-bottom: 1.5rem; /* Give more space after feedback if recommendation follows */
}
/*Mood recommendations Section*/
/* Add these styles to your existing CSS */
.journal-mood a {
  color: var(--accent-color);
}

button.journal-mood {
  border: none;
  padding: 10px 20px;
  margin-top: 10px;
  border-radius: 15px;
  background-color: var(--primary-color);
  font-weight: bold;
  font-size: 0.95rem;
}

.mood-recommendation {
    background-color: #e0f7fa; /* A calming, light blue */
    border: 1px solid #b2ebf2; /* Slightly darker border */
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 1.5rem;
    text-align: center; /* Center the content */
    width: 100%;
    box-sizing: border-box;
    animation: fadeIn 0.5s ease-out; /* Use the existing fade-in animation */
  }
  
  .mood-recommendation h4 {
    color: var(--primary-color); /* Use your primary color for the heading */
    font-size: 1.15rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
  }
  
  .recommendation-item {
    margin-bottom: 0.5rem;
  }
  
  .recommendation-type {
    font-weight: 700;
    color: #00796b; /* A subtle, deeper green for type */
    margin-right: 0.4rem;
    display: block; /* Make it block for smaller screens or better stacking */
    font-size: 0.9em;
  }
  
  .recommendation-title {
    font-size: 1.1em;
    color: var(--text-color); /* Use main text color */
    text-decoration: none;
    font-weight: 600;
    display: inline-block; /* Keep it inline with description for larger screens */
    margin-top: 0.2em; /* Small space if type is block */
  }
  
  .recommendation-title:hover {
    color: var(--primary-color);
    text-decoration: underline;
  }
  
  .recommendation-description {
    font-size: 0.9em;
    color: #666;
    margin-top: 0.3em;
    line-height: 1.4;
  }
  
 
/* History section headers within tool cards */
.tool-card #mood-history h4,
.tool-card #journal-history h4,
.tool-card #cbt-history h4 {
  margin-top: 0;
  color: var(--text-color);
  font-size: 1.1rem;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 0.625rem; /* 10px */
  margin-bottom: 0.625rem; /* 10px */
  text-align: center;
}

/* History list items within tool cards */
.tool-card #mood-list,
.tool-card #journal-list,
.tool-card #cbt-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tool-card #mood-list li,
.tool-card #journal-list li,
.tool-card #cbt-list li {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  padding: 0.625rem; /* 10px */
  margin-bottom: 0.5rem; /* 8px */
  border-radius: 0.25rem; /* 4px */
  font-size: 0.9em;
  color: #555;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  text-align: left;
}

/* --- Specific Form Area Paddings --- */
.mood-input-form,
.journal-prompts-area,
.cbt-form-area {
  padding: 0 0.9375rem 0.9375rem; /* 0 15px 15px */
}

/* --- Journal Prompt Specific Styling --- */
.journal-prompts-area .journal-prompt-text {
  background-color: #f0f8ff;
  border: 1px dashed #b0e0e6;
  padding: 0.9375rem; /* 15px */
  border-radius: 0.5rem; /* 8px */
  font-style: italic;
  color: #4682b4;
  margin-bottom: 1.25rem; /* 20px */
  text-align: center;
  line-height: 1.5;
}

#prompt-loading {
  font-weight: bold;
  font-size: 0.9em;
  padding: 0.3125rem; /* 5px */
}

/* --- Mood Charts Section --- */
.mood-charts {
  margin-top: 1.55rem; /* 60px */
  padding: 1.875rem; /* 30px */
  background-color: var(--card-background);
  border-radius: 0.625rem; /* 10px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.mood-charts h3 {
  font-size: 2rem;
  color: var(--secondary-color);
  margin-bottom: 1.5625rem; 
  font-weight: 600;
}

.mood-charts .chart-controls {
  display: flex;
  justify-content: center;
  gap: 0.5375rem; /* 15px */
  flex-wrap: wrap;
}

/* Buttons within chart controls */
.mood-charts .chart-controls .btn-link {
  padding: 0.625rem 1.5625rem; /* 10px 25px */
  font-size: 1em;
  border-radius: 1.5625rem; /* 25px */
  background-color: var(--accent-color);
}

.mood-charts .chart-controls .btn-link:hover {
  background-color: var(--primary-color);
}

.chart-container {
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--card-background);
  padding: 1.25rem; /* 20px */
  border-radius: 0.5rem; /* 8px */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.chart-container canvas {
  max-width: 100%;
  height: auto;
}

/* --- MOOD TRACKER Specifics --- */
.show-moods {
  background-color: transparent;
  color: var(--primary-color);
  margin: 0;
  padding: 0;
  border: none;
  text-decoration: underline;
  display: inline-block;
}

.show-moods:hover {
  background-color: transparent;
  color: rgb(127, 127, 236);
}

/* --- Articles Section Specific Styling --- */

.articles-section .resource-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5625rem;
  padding: 0 0.9375rem;
  max-width: 400px;
  margin: 0 auto;
}

/* Individual Article Card */
.resource-card {
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem; /* 8px */
  overflow: hidden;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); /* 0 4px 8px */
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
}

.resource-card:hover {
  transform: translateY(-0.125rem); /* 2px */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.resource-card .resource-img {
  width: 100%;
  height: 12.5rem; /* 200px */
  object-fit: cover;
  margin-bottom: 0.9375rem; /* 15px */
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.resource-card h3 {
  text-align: center;
  padding: 0 0.9375rem 0.9375rem;
  color: var(--primary-color);
  font-weight: 600;
  font-size: 1.375rem;
}

.resource-card p {
  font-size: 0.95rem;
  flex-grow: 1;
  margin: 0 0.9375rem 0.9375rem 0.9375rem;
  line-height: 1.5;
}

.resource-card .btn-link {
  margin: 0 0.9375rem 0.9375rem;
  align-self: center;
}

/* Tablet breakpoint (min-width: 576px) */
@media (min-width: 576px) {
  .resources-hero h1 {
    font-size: 2.5rem;
  }

  /* Tools section grid for tablets */
  .tools-section .resource-grid {
    grid-template-columns: 1fr;
    max-width: 800px; /* Adjust max-width for tablet layout */
  }

  /* Articles section grid for tablets */
  .articles-section .resource-grid {
    flex-direction: row; /* Layout cards in a row */
    flex-wrap: wrap; /* Allow cards to wrap to next line */
    justify-content: center; /* Center cards horizontally */
    max-width: 90%; /* Max width for the articles grid */
    margin: 0 auto; /* Center the articles grid */
    padding: 0; /* Remove horizontal padding as max-width handles it */
  }

  .articles-section .resource-grid .resource-card {
    flex: 1 1 calc(50% - 1.5625rem); /* Two columns with gap */
    max-width: calc(50% - 1.5625rem); /* Max width to ensure two columns */
  }

  .tools-section h2 {
    font-size: 2.2rem;
  }
}

/* Medium Tablet/Small Desktop breakpoint (min-width: 768px) */
@media (min-width: 768px) {
  .resources-hero {
    padding: 5rem 1.25rem; /* 80px 20px */
  }

  .resources-hero h1 {
    font-size: 3rem;
  }

  .articles-section h2,
  .tools-section h2,
  .helplines-section h2 {
    font-size: 2.5rem;
  }

  /* Ensure tool cards fill available space in grid */
  .tool-card {
    border-radius: 25px;
  }

  .tool-card .resource-img {
    height: 13.75rem; /* 220px */
  }

  .tool-card .card-body {
    padding: 1.75rem;
  }

  .mood-charts {
    max-width: 90%;
    margin: 15px auto;
  }

  /* Articles section grid for larger tablets/desktops */
  .articles-section .resource-grid {
    gap: 1.875rem; /* 30px gap */
  }

  .articles-section .resource-grid .resource-card {
    flex: 1 1 calc(33.333% - 1.875rem); /* Three columns with gap */
    max-width: calc(33.333% - 1.875rem); /* Max width to ensure three columns */
  }

  /* --- Helplines Section --- */

  .helplines-section {
    background-color: rgb(251, 212, 219);
    padding: 2.5rem 1.25rem; /* 40px 20px */
    text-align: center;
  }

  .helplines-section li {
    list-style: none;
  }

  .helplines-section .section-description {
    font-style: italic;
    color: red;
  }

  .helpline-list {
    margin: 0;
  }

  .helpline-list a {
    color: #4f46e5;
  }

  .helpline-list li {
    font-size: 1.2em;
  }

  /*Google Link*/
  .googleMap {
    margin-top: 0;
  }
  
  #googleMapLink {
    margin-top: 0;
    text-decoration: none;
    color: var(--primary-color);
    cursor: pointer;
  }
}

/* Large Desktop breakpoint (min-width: 992px) */
@media (min-width: 992px) {
  .resources-hero {
    padding: 6.25rem 1.25rem; /* 100px 20px */
  }

  .resources-hero h1 {
    font-size: 3.5rem;
  }

  /* Tools section grid for larger desktops */
  .tools-section .resource-grid {
    max-width: 1200px; /* Wider grid */
  }

  .tool-card {
    max-width: 90%;
    margin: 0 auto;
  }

  .tool-card .resource-img {
    height: 15.625rem; /* 250px */
  }

  .tool-card .card-body {
    padding: 2rem;
  }

  .sub-menu ul li a:hover {
    color: var(--accent-color);
  }
}