/* Custom Properties for Light (Default) Theme */
:root {
  --bg-header-border: #e0f2f1;
  --bg-card: #f9fbfb;
  --bg-btn-primary: #007bff;
  --bg-btn-primary-hover: #0056b3;
  --bg-btn-secondary: #6c757d;
  --bg-btn-secondary-hover: #545b62;

  --text-module: #00796b;
  --text-title: #004d40;
  --text-question: #00695c;
  --text-body: #34495e;
  --text-btn: #ffffff;

  --border-card: #00897b;
}

/* Dark Mode Theme Overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-header-border: #004d40;
    --bg-card: #1e293b;
    --bg-btn-primary: #2563eb;
    --bg-btn-primary-hover: #1d4ed8;
    --bg-btn-secondary: #475569;
    --bg-btn-secondary-hover: #334155;

    --text-module: #4db6ac;
    --text-title: #80cbc4;
    --text-question: #26a69a;
    --text-body: #cbd5e1;
    --text-btn: #ffffff;

    --border-card: #26a69a;
  }
}

/* Manual Dark Mode Class Trigger (Optional for Theme Toggles) */
body.dark-mode,
[data-theme="dark"] {
  --bg-header-border: #004d40;
  --bg-card: #1e293b;
  --bg-btn-primary: #2563eb;
  --bg-btn-primary-hover: #1d4ed8;
  --bg-btn-secondary: #475569;
  --bg-btn-secondary-hover: #334155;

  --text-module: #4db6ac;
  --text-title: #80cbc4;
  --text-question: #26a69a;
  --text-body: #cbd5e1;
  --text-btn: #ffffff;

  --border-card: #26a69a;
}

/* Additional Styles for Subtitle and Note formatting */
:root {
  --text-subtitle: #00695c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-subtitle: #26a69a;
  }
}

body.dark-mode,
[data-theme="dark"] {
  --text-subtitle: #26a69a;
}

/* Removing border from main title for this specific layout */
.post-header .post-title.no-border {
  border-bottom: none;
  padding-bottom: 5px;
}

/* Subtitle styling */
.post-header .post-subtitle {
  font-size: 18px;
  color: var(--text-subtitle);
  margin: 0;
  border-bottom: 2px solid var(--bg-header-border);
  padding-bottom: 10px;
}

/* Margin bottom for paragraph before a list */
.qa-card .answer.mb-8 {
  margin-bottom: 8px;
}

/* Component Styles */
.post-header {
  text-align: center;
  margin-bottom: 25px;
}

.post-header .module-tag {
  font-size: 13px;
  color: var(--text-module);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 5px 0;
}

.post-header .post-title {
  font-size: 22px;
  color: var(--text-title);
  margin: 0;
  border-bottom: 2px solid var(--bg-header-border);
  padding-bottom: 10px;
}

.qa-card {
  margin-bottom: 20px;
  padding: 15px;
  background: var(--bg-card);
  border-left: 4px solid var(--border-card);
  border-radius: 4px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.qa-card .question {
  font-weight: bold;
  color: var(--text-question);
  margin: 0 0 8px 0;
}

.qa-card .answer {
  margin: 0;
  color: var(--text-body);
}

.qa-card .answer-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text-body);
}

.qa-card .answer-list li {
  margin-bottom: 5px;
}

.navigation-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.btn {
  color: var(--text-btn);
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
  transition: background-color 0.2s ease;
}

.btn-primary {
  background-color: var(--bg-btn-primary);
}

.btn-primary:hover {
  background-color: var(--bg-btn-primary-hover);
}

.btn-secondary {
  background-color: var(--bg-btn-secondary);
}

.btn-secondary:hover {
  background-color: var(--bg-btn-secondary-hover);
}

/* Additional Utilities for formatting variations */
.text-justify {
  text-align: justify;
}

.mt-5 {
  margin-top: 5px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

/* For sub-headings inside the QA card */
.qa-card .card-subheading {
  font-weight: bold;
  color: var(--text-body);
  margin: 8px 0 5px 0;
}