/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

body.lesson-reading-mode [data-reading-mode-hide] {
  display: none !important;
}

body.lesson-reading-mode [data-reading-mode-frame] {
  max-width: 56rem;
  margin-inline: auto;
}

.learner-clickable {
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.learner-clickable:focus-visible {
  outline: 2px solid var(--color-link-a);
  outline-offset: 3px;
}

.learner-clickable:active {
  box-shadow: none;
  transform: translateY(0);
}

.learner-course-plan-link:active {
  transform: translateX(0);
}

.learner-clickable[aria-pressed="true"]:not(.learner-clickable-primary) {
  background-color: color-mix(in srgb, var(--color-on-surface-a) 8%, var(--color-surface-a)) !important;
}

.learner-clickable-primary {
  border-color: var(--color-interactive) !important;
  background-color: var(--color-interactive) !important;
  color: var(--color-on-interactive) !important;
}

.learner-clickable-primary:focus-visible {
  outline-color: var(--color-interactive);
}

@media (hover: hover) and (pointer: fine) {
  .learner-clickable:hover:not(.learner-clickable-primary) {
    background-color: color-mix(in srgb, var(--color-on-surface-a) 6%, var(--color-surface-a)) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-on-surface-a) 10%, transparent);
    transform: translateY(-1px);
  }

  .learner-clickable-primary:hover {
    background-color: color-mix(in srgb, var(--color-interactive) 92%, var(--color-on-interactive)) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-interactive) 28%, transparent);
    transform: translateY(-1px);
  }

  .learner-clickable-subtle:hover,
  .learner-course-plan-link:hover {
    background-color: color-mix(in srgb, var(--color-on-surface-a) 8%, transparent) !important;
    box-shadow: none;
  }

  .learner-course-plan-link:hover {
    transform: translateX(2px);
  }
}

.lesson-prose h1,
.lesson-prose h2,
.lesson-prose h3,
.lesson-prose h4,
.lesson-prose h5,
.lesson-prose h6 {
  margin-block: 1.75em 0.75em;
  font-weight: 650;
  line-height: 1.2;
}

.lesson-prose h1:first-child,
.lesson-prose h2:first-child,
.lesson-prose h3:first-child,
.lesson-prose h4:first-child,
.lesson-prose h5:first-child,
.lesson-prose h6:first-child {
  margin-top: 0;
}

.lesson-prose h2 {
  font-size: 1.5rem;
}

.lesson-prose h3 {
  font-size: 1.25rem;
}

.lesson-prose p,
.lesson-prose ul,
.lesson-prose ol,
.lesson-prose blockquote,
.lesson-prose pre,
.lesson-prose table {
  margin-block: 1em;
}

.lesson-prose ul,
.lesson-prose ol {
  padding-inline-start: 1.5rem;
}

.lesson-prose ul {
  list-style-type: disc;
}

.lesson-prose ol {
  list-style-type: decimal;
}

.lesson-prose li {
  padding-inline-start: 0.25rem;
}

.lesson-prose li + li {
  margin-top: 0.375rem;
}

.lesson-prose a {
  color: var(--color-link-a);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.lesson-prose blockquote {
  border-inline-start: 3px solid var(--learner-border);
  color: var(--learner-text-muted);
  padding-inline-start: 1rem;
}

.lesson-prose code {
  font-size: 0.9em;
}

.lesson-prose pre {
  overflow-x: auto;
  padding: 1rem;
}