/* Supplemental styles for the rebuilt CSM site. Keeps the original brand
   colours/classes from styles_csm_only.css and adds the pieces the new
   page templates (lesson grids, teacher cards, store cards) need. */

:root{
  --csm-teal: #117B82; /* darkened slightly from #14848C so white-on-teal text clears 4.5:1 contrast (was 4.46:1) */
  --csm-green: #127171;
  --csm-orange: #F07F28;
  --csm-yellow: #fbe000;
}

main, section { scroll-margin-top: 90px; }
[id] { scroll-margin-top: 90px; }


/* 2026-10-12: tried a cream page background (#FEFADE, matching the CSM
   logo's background) per a client-preview request, then reverted back to
   the original white (set in styles_csm_only.css) after client feedback. */

.btn-csm{
  display:inline-block;
  background-color: var(--csm-teal);
  border: 2px solid var(--csm-teal);
  color:#fff;
  font-weight:700;
  border-radius: 10px;
  padding:.65rem 1.5rem;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn-csm:hover{
  background-color:#0f6a70;
  border-color:#0f6a70;
  color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.btn-csm-outline{
  display:inline-block;
  background-color: transparent;
  border: 2px solid var(--csm-teal);
  color: var(--csm-teal);
  font-weight:700;
  border-radius: 10px;
  padding:.6rem 1.4rem;
  text-decoration:none;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.btn-csm-outline:hover{
  background-color: var(--csm-teal);
  color:#fff;
  transform: translateY(-1px);
}

.card-csm{
  border:1px solid #e9e9e9;
  border-radius:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
  height:100%;
}
.card-csm:hover{
  transform: translateY(-5px);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
}

.lesson-media{
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:14px 14px 0 0;
}
.img-placeholder{
  width:100%;
  height:230px;
  border-radius:14px 14px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
  background: repeating-linear-gradient(135deg, rgba(20,132,140,.08), rgba(20,132,140,.08) 10px, rgba(240,127,40,.08) 10px, rgba(240,127,40,.08) 20px);
  border: 2px dashed rgba(20,132,140,.35);
  color: var(--csm-teal);
  font-weight:600;
  font-size:.9rem;
}
.img-placeholder-square{
  width:100%;
  aspect-ratio:1/1;
  border-radius:16px;
}

.preview-note{
  background:#fff8e1;
  border:1px solid #ffe08a;
  border-radius:10px;
  padding:.65rem 1rem;
  font-size:.88rem;
  color:#7a5b00;
  margin-bottom:1rem;
}
.preview-note strong{ color:#5c4600; }

.jump-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin: 1.25rem 0 2.5rem;
}
.jump-nav a{
  display:inline-block;
  padding:.4rem 1rem;
  border-radius:999px;
  background:#f1f6f7;
  color: var(--csm-green);
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  border:1px solid #e0ecee;
}
.jump-nav a:hover{
  background: var(--csm-teal);
  color:#fff;
  border-color: var(--csm-teal);
}

.lesson-section{
  padding: 2.75rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.lesson-section:last-of-type{ border-bottom: none; }
.lesson-section h2{ margin-bottom:.5rem; }
.lesson-meta{ font-size:.85rem; color:#888; margin-top:.75rem; }

.hero-feature{
  position:relative;
  margin-bottom: 2rem;
}
.hero-feature img{
  width:100%;
  max-height:480px;
  object-fit:cover;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
  display:flex;
  align-items:flex-end;
}
.hero-overlay .hero-text{
  color:#fff;
  padding:2rem;
}

.page-hero{
  background: linear-gradient(135deg, rgba(20,132,140,.10), rgba(240,127,40,.08));
  padding: 3rem 0 2rem;
}

.store-grid .card-csm{
  text-align:center;
  padding:1.5rem 1rem;
}
.store-icon{
  font-size:2.5rem;
  color: var(--csm-teal);
  margin-bottom:.5rem;
}

.teacher-card img, .teacher-card .img-placeholder-square{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:16px 16px 0 0;
}

footer a{ text-decoration:none; }
footer a:hover{ text-decoration:underline; }