/* 
  canvas-accessible-styles.css
  This stylesheet is designed for use in Canvas LMS environments.
  It preserves layout, spacing, and color design elements while respecting user accessibility settings,
  including the Dyslexia Friendly Font option. 
*/

/* Import Montserrat font from Google Fonts (used only if inherited from parent styles) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;600;700;800;900&display=swap");

/* 
  Responsive layout for screens smaller than 600px.
  Font-family is set to 'inherit' to allow Canvas LMS to override with dyslexia-friendly fonts if enabled.
*/
@media (max-width: 600px) {
  body {
    width: 100%;
  }

  .page-title,
  .show-content.user_content.clearfix:not(
    #course_home_content > #wiki_page_show > .show-content.user_content.clearfix
  ) {
    margin: 0;
  }

  .page-title,
  .course-title,
  .show-content.user_content.clearfix,
  #course_home_content > #wiki_page_show > .show-content.user_content.clearfix {
    font-family: inherit; /* Allows Canvas to apply dyslexia-friendly font */
    color: #1b4859;
    max-width: 600px;
  }

  .front-banner,
  .banner,
  .card-text {
    display: none;
  }
}

/* Base body layout */
body {
  max-width: 2000px;
  width: 100%;
}

/* 
  Main content containers.
  Font-family is inherited to respect user accessibility settings.
*/
.page-title,
.course-title,
.show-content.user_content.clearfix,
#course_home_content > #wiki_page_show > .show-content.user_content.clearfix {
  font-family: inherit;
  color: #1b4859;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Centering page titles */
.page-title,
.show-content.user_content.clearfix:not(
  #course_home_content > #wiki_page_show > .show-content.user_content.clearfix
) {
  margin: 0 auto;
}

/* 
  Heading styles.
  Font-family is inherited and bold for emphasis.
*/
.show-content.user_content.clearfix h1,
.show-content.user_content.clearfix h2,
.show-content.user_content.clearfix h3,
.show-content.user_content.clearfix h4 {
  font-family: inherit;
  margin-bottom: 25px;
  font-weight: bold;
}

.show-content.user_content.clearfix h1 {
  font-size: 36px;
}

.show-content.user_content.clearfix h2 {
  font-size: 30px;
}

.show-content.user_content.clearfix h3 {
  font-size: 24px;
}

.show-content.user_content.clearfix h4 {
  font-size: 20px;
}

/* 
  Paragraph and list styling.
  Font-family is inherited and font-weight is set for readability.
*/
.show-content.user_content.clearfix p,
.reflection p,
.show-content.user_content.clearfix ul,
.show-content.user_content.clearfix ol {
  font-weight: 500;
  font-family: inherit;
}

.show-content.user_content.clearfix p,
.reflection p {
  font-size: 16px;
}

.show-content.user_content.clearfix p ~ h1,
.show-content.user_content.clearfix p ~ h2,
.show-content.user_content.clearfix p ~ h3,
.show-content.user_content.clearfix p ~ h4 {
  margin-top: 40px;
}

/* List spacing adjustments */
.show-content.user_content.clearfix p:not(.reflection) + ul,
.show-content.user_content.clearfix p:not(.reflection) + ol {
  margin-top: 30px;
}

.show-content.user_content.clearfix .reflection p + ul,
.show-content.user_content.clearfix .reflection p + ol {
  margin-top: 20px;
}

/* Bold list markers */
.show-content.user_content ul li::marker,
.show-content.user_content ol li::marker {
  font-weight: bold;
}

/* Spacing after lists */
.show-content.user_content.clearfix ul + p,
.show-content.user_content.clearfix ol + p {
  margin-top: 40px;
}

/* List indentation and font inheritance */
.show-content.user_content.clearfix ul,
.show-content.user_content.clearfix ol {
  padding-left: 50px;
  font-family: inherit;
}

/* Nested list spacing */
.show-content.user_content ul ul li:first-child,
.show-content.user_content ol ol li:first-child,
.show-content.user_content ol ul li:first-child {
  margin-top: 20px;
}

.show-content.user_content ul li:first-child {
  margin-top: 0;
}

.show-content.user_content ul li,
.show-content.user_content ol li {
  margin-bottom: 20px;
}

.show-content.user_content.clearfix ul ul,
.show-content.user_content.clearfix ol ol {
  padding-left: 30px;
}

/* 
  Image and media styling.
  Rounded corners and spacing for visual consistency.
*/
.show-content.user_content.clearfix
  img:not(.front-banner):not(.card-img):not(.inline-icon),
.show-content.user_content.clearfix .banner,
.show-content.user_content.clearfix iframe {
  border-radius: 15px;
}

.front-banner {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 50px;
}

.show-content.user_content.clearfix
  img:not(.banner):not(.front-banner):not(.card-img):not(.inline-icon) {
  margin: 40px 0;
}

.show-content.user_content .banner {
  margin-top: 25px;
  margin-bottom: 40px;
}

.inline-icon {
  width: 30px;
  height: 30px;
}

/* Curved edge utility class */
.ce {
  border-radius: 15px;
}

/* Divider styling */
.show-content.user_content hr {
  margin: 70px 0;
}

.show-content.user_content hr:nth-last-child(2) {
  margin-top: 70px;
  margin-bottom: 0;
}