/* Base lesson block styling */
.lesson-block {
    border-radius: var(--border-radius-medium);
    margin-bottom: var(--margin-large);
    padding: var(--padding-large);
    padding-bottom: var(--padding-extra-large);
}

.lesson-block__icon {
    display: flex;
    align-items: center;
    width: 3.125rem;
    height: 3.125rem;
    margin-right: var(--margin-extra-small);
    border: 1px solid var(--color-body);
    border-radius: 50%;
    font-size: var(--font-size-small);
    text-align: center;
}

.lesson-block__title {
    margin: 0;
    display: inline-block;
}

/*
*   Video
*/
.is-type-video .wp-block-embed__wrapper,
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.is-type-video {
    margin-bottom: var(--margin-large);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}

.wp-block-embed__wrapper iframe,
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
*  WP Image styling
*/
.wp-block-image img {
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}

/* Base exercise styling */
.lesson-exercise .lesson-question {
    margin-bottom: var(--margin-medium);
}

.lesson-exercise .lesson-question:last-child {
    margin-bottom: 0;
}

.lesson-exercise .lesson-question .lesson-question__text-container {
    position: relative;
    margin-top: var(--margin-extra-small);
    margin-bottom: var(--margin-extra-small);
}

.lesson-exercise .lesson-question .lesson-question__text-answer {
    min-height: 6rem;
    border: none;
    border-radius: var(--border-radius-medium);
}

.lesson-exercise .lesson-question .lesson-question__text-answer:active {
    border: 2px solid var(--color-primary-tint-100);
}

.lesson-exercise .lesson-question .lesson-question__grade-buttons {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
}

.lesson-exercise .lesson-question .lesson-question__grade-button {
    border: 1px solid var(--color-body);
}

/* Base instruction styling */
.lesson-instruction h5 {
    margin: 0;
    margin-top: var(--margin-large);
    padding: var(--padding-small) var(--padding-large);
    border-radius: var(--border-radius-small);
}

.lesson-instruction .lesson-instruction__requirements {
    margin-top: var(--margin-tiny);
    list-style: none;
    counter-reset: counter;
    margin-bottom: var(--margin-medium);
}

.lesson-instruction .lesson-instruction__requirement {
    margin-bottom: var(--margin-tiny);
    padding: var(--padding-small) var(--padding-large);
    /* Hanging indent: wrapped lines align with the first line of text, not the number */
    padding-left: calc(var(--padding-large) + var(--list-number-size) + var(--margin-extra-small));
    border-radius: var(--border-radius-small);
    counter-increment: counter;
    margin-top: 0;
}

.lesson-instruction .lesson-instruction__requirement::before {
    content: counter(counter);
    position: absolute;
    left: var(--padding-large);
    top: calc(var(--padding-small) + (1lh - var(--list-number-size)) / 2);
    display: inline-block;
    align-content: center;
    width: var(--list-number-size);
    height: var(--list-number-size);
    border-radius: 50%;
    font-weight: bold;
    text-align: center;
}

.lesson-instruction .lesson-instruction__requirement::after {
    margin-bottom: 0;
}

.lesson-instruction .lesson-instruction__exercise {
    margin-top: var(--margin-medium);
}

.lesson-instruction .lesson-instruction__step-content {
    margin-bottom: var(--margin-extra-small);
}

.lesson-instruction .lesson-instruction__check-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--gap-tiny);
    gap: var(--gap-tiny);
}

.lesson-instruction .lesson-instruction__check-list dt {
    width: calc(30% - calc(var(--gap-extra-small) / 2));
    padding: var(--padding-small) var(--padding-large);
    border-top-left-radius: var(--border-radius-small);
    border-bottom-left-radius: var(--border-radius-small);
}

.lesson-instruction .lesson-instruction__check-list dd {
    width: calc(70% - calc(var(--gap-extra-small) / 2));
    margin: 0;
    padding: var(--padding-small);
    border-top-right-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

/* Base definition styling */
.lesson-definitions .lesson-definitions__title {
    margin: 0;
    margin-top: var(--margin-large);
    padding: var(--padding-small) var(--padding-large);
    border-radius: var(--border-radius-small);
}

.lesson-definitions .lesson-definitions__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--gap-tiny);
    gap: var(--gap-tiny);
}

.lesson-definitions .lesson-definitions__list dt {
    width: calc(30% - calc(var(--gap-tiny) / 2));
    padding: var(--padding-small) var(--padding-large);
    border-top-left-radius: var(--border-radius-small);
    border-bottom-left-radius: var(--border-radius-small);
}

.lesson-definitions .lesson-definitions__list dd {
    width: calc(70% - calc(var(--gap-tiny) / 2));
    margin: 0;
    padding: var(--padding-small);
    border-top-right-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

/* Base learning objectives styling */
.lesson-learning-objectives {
    border-radius: var(--border-radius-medium);
    padding: var(--padding-large);
    padding-bottom: var(--padding-xxl);
}

div .lesson-learning-objectives ul.lesson-learning-objectives__list {
    margin-bottom: 0;
    list-style: none;
}

/* Base list styling */
div.lesson-list .lesson-list__title {
    margin-bottom: 0.3rem;
    padding: var(--padding-small) var(--padding-large);
    border-radius: var(--border-radius-small);
}

div.lesson-list ul.lesson-list__items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    list-style: none;
}

div.lesson-list li.lesson-list__item {
    padding: var(--padding-small) var(--padding-small);
    border-radius: var(--border-radius-small);
    display: flex;
    line-height: 1;
    align-items: center;
    padding-left: 1.6rem;
}

div.lesson-list i.lesson-list__icon {
    width: 1.75rem;
    height: 1.75rem;
    align-content: center;
    margin-right: var(--margin-extra-small);
    border-radius: 50%;
    font-size: var(--font-size-paragraph);
    text-align: center;
    aspect-ratio: 1/1;
}

div.lesson-list span.lesson-list__text {
    font-size: var(--font-size-paragraph);
}

/* Base quote styling */
blockquote.wp-block-quote {
    margin: 0 0 var(--margin-large);
    border: none;
    padding: var(--padding-large);
    padding-left: calc(var(--padding-xxl) + var(--padding-extra-small));
    padding-right: 9rem;
    border-radius: var(--border-radius-medium);
    background: var(--color-tertiary-tint-50);
    color: var(--color-body);
    position: relative;
    padding-bottom: var(--padding-large);
    min-height: 140px;
}

blockquote.wp-block-quote cite {
    font-size: var(--font-size-small);
    color: var(--color-tertiary-tint-800);
    font-style: italic;
    margin-top: var(--margin-medium);
    line-height: 100%;
}

.wp-block-quote .wp-block-paragraph:first-child:has(strong) {
    font-size: var(--font-size-heading-4);
    line-height: var(--line-height-heading-4);
    letter-spacing: 0;
    margin-bottom: .5rem;
}

.wp-block-quote .wp-block-paragraph:last-of-type { 
    margin-bottom: 0rem;
}

blockquote h4 {
    font-style: normal;
}

div.lesson-content blockquote.wp-block-quote p {
    font-size: var(--font-size-paragraph);
}

blockquote::before {
    content: '';
    position: absolute;
    left: var(--padding-large);
    top: var(--padding-large);
    display: block;
    width: 0.5rem;
    height: calc((100% - 2 * var(--padding-large)));
    background: var(--color-light-tint-600);
    border-radius: var(--border-radius-large);
}

blockquote.wp-block-quote::after {
    content: '';
    position: absolute;
    top: var(--padding-large);
    right: var(--padding-large);
    width: 6.25rem;
    height: 6.25rem;
    background-repeat: no-repeat;
    background-size: contain;
}

blockquote.wp-block-quote strong {
    font-weight: bold;
}

blockquote.wp-block-quote small {
    color: var(--color-tertiary-tint-800);
    font-size: var(--font-size-small);
}

blockquote.wp-block-quote p {
    margin-bottom: var(--margin-medium);
}

/* Base portfolio reflection styling */
.lesson-portfolio {
    background: var(--color-danger-tint-200);
    padding-bottom: var(--padding-large);
}

.lesson-portfolio .lesson-block__icon {
    border-color: var(--color-body);
    background: var(--color-danger-tint-500);
    color: var(--color-light-tint-10);
}

.lesson-portfolio__intro {
    margin-bottom: var(--margin-large);
}

.lesson-portfolio h4 {
    margin: 0;
    display: inline-block;
}

.lesson-portfolio__buttons {
    text-align: right;
}

.lesson-portfolio__button,
.lesson-portfolio__button:hover {
    border: 1px solid var(--color-body);
    background: var(--color-danger-tint-500);
    color: var(--color-light-tint-10);
}

.lesson-portfolio__button.submitted {
    background: var(--color-success-tint-500);
}

.lesson-instruction .lesson-content h4 {
    width: calc(100% - 4.5rem);
}

/*
*   Numbered list
*/

.has-list-title-background-color:where(.wp-block-heading).has-background,
.has-list-title-background-color,
.list-title:where(.wp-block-heading).has-background,
.list-title {
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--padding-small) var(--padding-large);
    background: var(--color-warning-tint-50);
    font-size: var(--font-size-heading-4);
    line-height: var(--line-height-heading-4);
    letter-spacing: 0;
    border-radius: var(--border-radius-medium);
}

ol,
ol li {
    display: block;
    margin: 0px;
    padding: 0px;
}

ol {
    counter-reset: item;
    margin-bottom: var(--margin-large);
}

ol li {
    --list-number-size: 1.875rem;
    margin-top: var(--margin-tiny);
    padding: var(--padding-small);
    /* Hanging indent: wrapped lines align with the first line of text, not the number */
    padding-left: calc(var(--padding-small) + var(--list-number-size) + var(--margin-extra-small));
    background: var(--color-warning-tint-50);
    counter-increment: item;
    position: relative;
    border-radius: var(--border-radius-medium);
}

ol li::before {
    content: counter(item) "";
    position: absolute;
    left: var(--padding-small);
    /* Vertically center the number on the first line of text */
    top: calc(var(--padding-small) + (1lh - var(--list-number-size)) / 2);
    background: var(--color-warning-tint-500);
    color: var(--color-body);
    display: inline-block;
    align-content: center;
    width: var(--list-number-size);
    height: var(--list-number-size);
    border-radius: 50%;
    font-weight: bold;
    text-align: center;
}

/* Numbered list inside another block (table, group, exercise, ...) gets a white background */
.lesson-content__block > :not(ol) ol > li {
    background: var(--color-light-tint-10);
}

ol.wp-block-list li::before {
    left: 1.25rem;
    top: .65rem;
    position: absolute;
}

ol.wp-block-list li {
    padding-left: 3.8rem;
    padding-top: .95rem;
}

/*
* Subheader
*/
.lesson-exercise__content {
    display: block;
}

.lesson-instruction__step-title {
    font-weight: bold;
}

/*
* Header
*/
.lesson-exercise__head {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.wq_quizCtr img.lesson__content-icon,
.lesson__content-icon,
.lesson__content img {
    max-width: 100%;
    height: fit-content;
    object-fit: contain;
}

.wq_quizCtr img.lesson__content-icon {
    height: auto;
    object-fit: none;
    width: auto;
}

/*
*   Quiz results
*/
.quiz-user-result {
    border-radius: var(--border-radius-medium);
    margin-bottom: var(--padding-tiny);
}

/*
*   Wordpress backgrounds
*/
h1:where(.wp-block-heading).has-background,
h2:where(.wp-block-heading).has-background,
h3:where(.wp-block-heading).has-background,
h4:where(.wp-block-heading).has-background,
h5:where(.wp-block-heading).has-background,
h6:where(.wp-block-heading).has-background {
    padding: var(--padding-small) var(--padding-large);
}

.has-background {
    border-radius: var(--border-radius-medium);
    padding: var(--padding-large);
}

.has-background.has-primary-light-background-color.has-background {
    background: var(--color-primary-tint-50);
}

.has-background.has-primary-dark-background-color.has-background {
    background: var(--color-primary-tint-300);
}

.has-background.has-secondary-light-background-color.has-background {
    background: var(--color-secondary-tint-50);
}

.has-background.has-secondary-dark-background-color.has-background {
    background: var(--color-secondary-tint-300);
}

.has-background.has-tertiary-light-background-color.has-background {
    background: var(--color-tertiary-tint-50);
}

.has-background.has-tertiary-dark-background-color.has-background {
    background: var(--color-tertiary-tint-300);
}

.has-background.has-info-light-background-color.has-background {
    background: var(--color-info-tint-50);
}

.has-background.has-info-dark-background-color.has-background {
    background: var(--color-info-tint-300);
}

.has-background.has-danger-light-background-color.has-background {
    background: var(--color-danger-tint-50);
}

.has-background.has-danger-dark-background-color.has-background {
    background: var(--color-danger-tint-300);
}

.has-background.has-warning-light-background-color.has-background {
    background: var(--color-warning-tint-50);
}

.has-background.has-warning-dark-background-color.has-background {
    background: var(--color-warning-tint-300);
}

.has-background.has-success-light-background-color.has-background {
    background: var(--color-success-tint-50);
}

.has-background.has-success-dark-background-color.has-background {
    background: var(--color-success-tint-300);
}