/* Light/Dark theme tokens */
:root {
  color-scheme: light dark;
}
/* Light theme — Forest Breeze palette */
:root[data-theme="light"] {
  --bg: #f3f7f5; /* Forest mist */
  --panel: #c7dbd2; /* Light moss panel */
  --text: #0f1a14; /* Deep spruce text */
  --muted: #5a6b62; /* Moss gray */
  --more-muted: #808b83; /* Darker moss for secondary text */
  --brand: #1f8a5b; /* Pine */
  --brand-2: #3ccf7a; /* Fresh leaf */
  --danger: #b33434; /* Calibrated against light bg */
  --link: #2396c2; /* Breezy blue-green */
  --herobtn: #ffffff;
}

:root[data-theme="dark"] .hero {
  background-image: url("../img/forest-hero-dark.png");
}

:root {
  --bg: #0f172a;
  --panel: #0b1220;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --more-muted: #64748b;
  --brand: #3ddc97;
  --brand-2: #22c55e;
  --danger: #ef4444;
  --link: #7dd3fc;
  --herobtn: #ffffff;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu;
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 1.5rem;
}
nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #1e293b;
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  position: sticky;
  top: 0;
  z-index: 5;
}
nav .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
}
nav a {
  padding: 0.4rem 0.6rem;
  border-radius: 0.4rem;
}
nav a.active,
nav a:hover {
  background: rgba(31, 138, 91, 0.12); /* updated pine tint */
}
.hero {
  padding: 4rem 1.5rem;
  text-align: center;
  /*background: linear-gradient(160deg, rgba(61, 220, 151, 0.15), transparent);*/
  background-image: url("../img/forest-hero-dark.png");
  background-size: cover;
  background-position: center;
}
.hero h1 {
  font-size: 2.2rem;
  margin: 0.2rem 0 1rem;
  color: rgb(255, 255, 255);
}
.hero p {
  color: rgb(255, 255, 255);
}

.btn.modules {
  color: var(--herobtn);
  border-style: solid;
  border-color: var(--herobtn);
  border-width: 1px;
}

btn.open-modules {
  text-align: center;
}

div.center-btn-modules {
  display: flex;
  justify-content: center;
}
.grid {
  display: grid;
  gap: 1rem;
}
/* Grid column utilities */
.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Grid column utilities */
.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Optional: responsive tweaks */
@media (max-width: 640px) {
  .grid.cols-2 {
    grid-template-columns: 1fr;
  } /* stack on small screens */
}

.card {
  background: var(--panel);
  border: 1px solid #1e293b;
  border-radius: 0.75rem;
  padding: 1rem;
}
.btn {
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}
.btn.primary {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #052e1b;
  font-weight: 700;
}
.btn:disabled {
  background: #64748b;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.6;
}
fieldset {
  border: 1px solid #1e293b;
  border-radius: 0.5rem;
  margin: 1rem 0;
  padding: 1rem;
}
legend {
  padding: 0 0.4rem;
  color: var(--muted);
}
.option {
  display: flex;
  gap: 0.6rem;
  margin: 0.35rem 0;
}
input {
  border: 1px solid #1e293b;
  background: var(--bg);
  color: var(--text);
  padding: 0.55rem;
  border-radius: 0.4rem;
  width: 100%;
  transition: border-color 0.2s ease;
}
input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(31, 138, 91, 0.12); /* pine glow */
}
input[type="radio"] {
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
}
select {
  border: 1px solid #1e293b;
  background: var(--bg);
  color: var(--text);
  padding: 0.55rem;
  border-radius: 0.4rem;
  width: 100%;
  transition: border-color 0.2s ease;
}
select:focus {
  outline: none;
  border-color: var(--brand);
}
label {
  display: block;
  margin: 0.4rem 0;
}
.footer {
  padding: 6rem 1.5rem;
  color: var(--muted);
  text-align: center;
  margin-top: 2rem;
}
.badge {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: #0a1426;
  border: 1px solid #1e293b;
  color: #a7f3d0;
}

.hidden {
  visibility: hidden;
}

/* Smooth transitions for theme change */
html,
body,
nav,
.card,
fieldset {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.site-logo {
  transition:
    opacity 0.25s ease,
    filter 0.25s ease;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.theme-anim {
  transition:
    transform 0.4s ease,
    opacity 0.25s ease;
}
:root[data-theme="dark"] .icon-sun {
  opacity: 0;
  transform: scale(0.8) rotate(-90deg);
}
:root[data-theme="dark"] .icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
:root[data-theme="light"] .icon-sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
:root[data-theme="light"] .icon-moon {
  opacity: 0;
  transform: scale(0.8) rotate(90deg);
}

:root[data-theme="dark"] #certificate,
:root[data-theme="dark"] #certificate * {
  background: #fff !important;
  color: #222 !important;
  border-color: #ddd !important;
}

/* Quiz styles */
.quiz-wrap-head {
  margin-bottom: 2rem;
}

.quiz-wrap {
  margin-bottom: 2rem;
}

.quiz-head {
  margin-bottom: 1.5rem;
}

.quiz-meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.q-card {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
}

.q-title {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.q-num {
  background: var(--brand);
  color: #052e1b;
  font-weight: bold;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.q-text {
  font-weight: 600;
  line-height: 1.4;
}

.options {
  margin-left: 2.75rem;
}

.option-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.option-row:hover {
  background: rgba(31, 138, 91, 0.05); /* subtle pine wash */
}

.option-row input[type="radio"] {
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.option-label {
  line-height: 1.4;
}

.feedback {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
}

.feedback.bad {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.quiz-submit-bar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  border-top: 1px solid #1e293b;
  z-index: 10;
}

.quiz-submit-bar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.quiz-progress {
  font-weight: 600;
  color: var(--muted);
}

.quiz-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid #1e293b;
}

.btn.ghost:hover {
  background: rgba(31, 138, 91, 0.1);
}
.btn-block {
  width: 100%;
  margin-top: 0.5rem;
}

#certificate {
  background: #fff !important;
  color: #222 !important;
}

#certificate h1,
#certificate h2,
#certificate h3,
#certificate p,
#certificate strong {
  color: #222 !important;
}

/* Auth Page Styles */
.auth-container {
  background: var(--panel);
  border: 1px solid #1e293b;
  border-radius: 0.75rem;
  overflow: hidden;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid #1e293b;
  background: rgba(61, 220, 151, 0.03);
}

.auth-tab {
  flex: 1;
  padding: 1rem;
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
  border-bottom: 2px solid transparent;
}

.auth-tab:hover {
  background: rgba(61, 220, 151, 0.05);
}

.auth-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: transparent;
}

.auth-form {
  padding: 2rem;
  display: none;
}

.auth-form.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.auth-form h2 {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
}

.form-subtitle {
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-group input {
  font-size: 1rem;
}

.form-group input::placeholder {
  color: var(--muted);
}

#certificate {
  flex-direction: column;
}

.cert-header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* keeps text vertically aligned with the logo */
}

.cert-header img.cert-logo {
  height: auto;
}

.cert-logo-pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Shared responsive behavior for tablets and phones */
nav {
  flex-wrap: wrap;
}

nav > div:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.hero {
  overflow: hidden;
}

.video-frame iframe,
.video-frame video {
  width: 100% !important;
  max-width: 800px;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

#quiz-container {
  padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
}

.quiz-submit-bar-container {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 1024px) {
  nav a,
  nav button,
  .btn,
  .auth-tab,
  input,
  select,
  .option-row {
    min-height: 44px;
  }

  .btn {
    padding: 0.75rem 1rem;
  }

  nav a {
    padding: 0.55rem 0.7rem;
  }

  input,
  select {
    padding: 0.7rem;
    font-size: 1rem;
  }

  .option-row {
    padding: 0.65rem 0.6rem;
  }

  .lesson-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  .lesson-nav .btn {
    min-width: 120px;
  }

  .container {
    padding: 1.25rem 1rem;
  }

  .hero {
    padding: 3rem 1rem;
  }

  .grid.cols-4,
  .grid.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quiz-submit-bar {
    padding: 0.9rem 1rem;
  }

  .quiz-actions .btn {
    min-height: 46px;
  }
}

@media (max-width: 768px) {
  nav {
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
  }

  nav .brand {
    width: 100%;
    min-width: 0;
  }

  nav .brand a {
    font-size: 0.95rem;
  }

  nav .site-logo:first-child {
    width: 68px;
    height: auto;
  }

  nav > div:last-child {
    margin-left: 0 !important;
    width: 100%;
    gap: 0.4rem;
  }

  nav > div:last-child a,
  nav > div:last-child button {
    flex: 1 1 auto;
    text-align: center;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .hero p {
    font-size: 0.98rem;
  }

  .hero > div[style*="justify-content: center"] {
    flex-wrap: wrap;
  }

  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4 {
    grid-template-columns: 1fr;
  }

  .options {
    margin-left: 0;
  }

  .q-card {
    padding: 1rem;
  }

  .quiz-submit-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .quiz-actions {
    width: 100%;
    gap: 0.5rem;
  }

  .quiz-actions .btn {
    flex: 1;
  }

  .auth-form {
    padding: 1.25rem;
  }

  .auth-tab {
    padding: 0.8rem 0.4rem;
    font-size: 0.92rem;
  }

  .cert-grid {
    grid-template-columns: 1fr;
  }

  .cert-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #certificate {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 1rem 0.8rem;
  }

  .hero {
    padding: 2.25rem 0.8rem;
  }

  .hero h1 {
    font-size: 1.45rem;
  }

  .btn {
    width: 100%;
  }

  nav > div:last-child a,
  nav > div:last-child button {
    flex: 1 1 100%;
  }

  .quiz-progress {
    font-size: 0.9rem;
  }
}