/* polish-overrides.css - Teaching & Profile visual polish (pure presentation, no behavior changes) */

/* ===== Teaching: Section Visual Upgrade ===== */
.teaching-body h3,
.teaching-body .section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 18px 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border-left: 6px solid var(--accent-color, #4caf50);
  box-shadow: 0 6px 18px rgba(16,24,40,0.03);
}

.teaching-body h4,
.teaching-body .subsection-title {
  font-size: 0.98rem;
  margin: 8px 0 6px;
  color: var(--text-muted, #394046);
  font-weight: 600;
}

/* Example callout box */
.teaching-body .example,
.teaching-body .real-life,
.teaching-body .tips,
.teaching-body .context {
  margin: 10px 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(250,255,244,0.8), rgba(245,255,238,0.6));
  border: 1px solid rgba(74, 222, 128, 0.08);
}

.teaching-body .example .example-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 8px 0;
}

.teaching-body .example .example-step .badge {
  min-width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  color: white;
  background: linear-gradient(180deg, var(--accent-color, #4caf50), #2e7d32);
  box-shadow: 0 6px 14px rgba(46,125,50,0.12);
}

/* Real life / Application card style */
.teaching-body .real-life {
  background: linear-gradient(180deg, rgba(235,245,255,0.9), rgba(230,240,255,0.7));
  border: 1px solid rgba(61, 150, 255, 0.06);
}

/* Common mistakes / tips */
.teaching-body .mistake-card,
.teaching-body .tips {
  border-left: 4px solid rgba(255,99,71,0.15);
  background: linear-gradient(180deg, rgba(255,245,240,0.9), rgba(255,240,236,0.7));
  padding: 10px 14px;
  border-radius: 10px;
}

/* Subtle separators inside teaching content */
.teaching-body .teaching-paragraph + .teaching-paragraph {
  margin-top: 12px;
}

/* Ensure MathJax content doesn't overflow in callouts */
.teaching-body .example .math, .teaching-body .real-life .math {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== Practice/Teaching consistent spacing tweak ===== */
.practice-session-section,
.teaching-body {
  padding: 18px 18px 22px;
}

/* ===== Profile visual polish (no feature changes) ===== */
.personal-info-card {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 28px rgba(14, 20, 28, 0.06);
  border: 1px solid rgba(16,24,40,0.04);
}

.personal-info-card .avatar {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(16,24,40,0.06);
  border: 2px solid rgba(16,24,40,0.03);
}

.personal-info-card .profile-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.personal-info-card label {
  font-size: 0.9rem;
  color: var(--text-muted, #5b646a);
}

.personal-info-card input[type="text"],
.personal-info-card input[type="email"] {
  border-radius: 10px;
  border: 1px solid rgba(16,24,40,0.06);
  padding: 8px 10px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.personal-info-card .actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.personal-info-card .btn-primary {
  background: linear-gradient(180deg, var(--accent-color, #4caf50), #2e7d32);
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 10px 22px rgba(46,125,50,0.12);
  border: none;
}

/* Small-screen adjustments so card breathes */
@media (max-width: 640px) {
  .personal-info-card { padding: 12px; }
  .personal-info-card .avatar { width: 64px; height: 64px; }
}

/* Accessibility: increase focus contrast for inputs inside profile */
.personal-info-card input:focus {
  outline: 3px solid rgba(74,222,128,0.14);
  outline-offset: 2px;
}

/* Preserve existing done/locked semantics while ensuring titles remain readable */
.curriculum-preview-list .curriculum-item.done .curriculum-title,
.teaching-body .subsection-title.done {
  color: var(--text-primary, #111827);
}

/* Small decorative flourish for headings */
.teaching-body h3::before {
  content: "";
  width: 6px;
  height: 24px;
  display: inline-block;
  margin-right: 8px;
  background: linear-gradient(180deg, var(--accent-color, #4caf50), #2e7d32);
  border-radius: 3px;
}

/* Mobile: ensure teaching subsections stack and do not create internal scrollbars */
@media (max-width: 768px) {
  .teaching-content .mobile-substeps,
  .teaching-body.mobile-substeps,
  .mobile-substeps {
    overflow: visible !important;
    max-height: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  .teaching-content .mobile-substeps .teaching-substep,
  .mobile-substeps .teaching-substep {
    display: block !important;
    margin-bottom: 14px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
  }

  .teaching-substep .teaching-body {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ===== Global small UX polish ===== */
/* Smooth focus outlines for accessibility */
input, select, textarea, button { transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease; }

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06), 0 0 0 4px rgba(76,175,80,0.07);
  border-color: rgba(76,175,80,0.6);
}

/* Buttons: subtle lift on hover + focus */
.btn, .btn-primary, .btn-ghost {
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.btn:hover, .btn-primary:hover { transform: translateY(-2px); }
.btn:active, .btn-primary:active { transform: translateY(0); }

/* Form input polish used across auth pages */
.login-container .input-group input,
.login-container .input-group select,
.personal-info-card input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(16,24,40,0.06);
  background: linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.login-container .btn {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--accent-color, #4caf50), #2e7d32);
  color: #fff;
  border: none;
  box-shadow: 0 12px 30px rgba(46,125,50,0.12);
}

/* Toast notifications (small, non-blocking) */
.toast-container { position: fixed; right: 16px; bottom: 18px; z-index: 200000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: rgba(20,20,20,0.96); color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: 0 10px 24px rgba(4,10,20,0.35); font-weight: 600; }
.toast.success { background: linear-gradient(90deg, #4caf50, #2e7d32); }
.toast.info { background: linear-gradient(90deg, #2196f3, #0b84d9); }
.toast.error { background: linear-gradient(90deg, #ef4444, #cc1f1a); }

/* Small helper to reduce hero top spacing on small devices */
@media (max-width: 420px) {
  #hero { padding: 2.2rem 0.8rem; }
  .hero-content h1 { font-size: 1.8rem; }
  .hero-content p { font-size: 0.95rem; }
}