/* OVT Variables */
:root {
    --ovt-orange: #e89b4d;
    --ovt-orange-500: #e3812c;
    --ovt-primary: #5b715f;
    --ovt-primary: #5b715f;
    --ovt-primary--200: #ced4cf;
    --ovt-primary--300: #adb8af;
    --ovt-primary--700: #445547;
    --ovt-grey-m: #ebecef;
    --ovt-dark-grey: #54595f;

    --ovt-sub-2: clamp(1.25rem, 1rem + 1vw, 1.875rem);
    --ovt-sub-3: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
    --ovt-body: clamp(1.1rem, 1rem + 0.1vw, 1.125rem);
    --ovt-body-m: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
    --font-size-h3: clamp(1.25rem, 1rem + 1vw, 1.875rem);
}

/** Styling for OVT sessies overview page **/

.ovt-sessie__img {
    width: 100%;
    aspect-ratio: 1.75 / 1;
    object-fit: cover;
    border-radius: 10px 10px 0 0 !important;
    display: block;
}

.ovt-single-sessie .ovt-sessie__img {
    border-radius: 0 !important;
}

/* Styling for single OVT sessies pages */

.ovt-sessie-info p {
    margin-block-end: 0;
}

.ovt-sessie-info h3.ovt-sessie-info__heading {
    font-size: var(--ovt-sub-2);
    margin-block-end: 0;
}

.ovt-sessie-info h3.ovt-sessie-info__heading:not(:first-child) {
    margin-block-start: 2rem;
}

.ovt-sessie-info a.ovt-sessie-info__url {
    display: inline-block;
    width: fit-content;
    padding-inline: 1.5rem;
    padding-block: 0.5rem;
    background-color: var(--ovt-orange);
    margin-block-start: 0.5rem;
    color: #fff;
    border-radius: 4px;
    border: 2px solid var(--ovt-orange);
    transition: all 0.2s;
}

.ovt-sessie-info a.ovt-sessie-info__url:hover {
    background-color: transparent;
    color: var(--ovt-orange);
}

/* Styling for single podcast template */

.ovt-podcast-episode {
    display: flex;
    gap: 1rem;
    align-items: center;

    border: 1px solid var(--ovt-dark-grey);
    border-radius: 0.5rem;

    margin-bottom: 1.5rem;
    padding: 1rem;
}

@media screen and (max-width: 48em) {
    .ovt-podcast-episode__icon {
        width: 3.5em;
    }
}

.ovt-podcast-episode__details {
    flex: 1;
    text-align: center;
    color: var(--ovt-primary);
}

.ovt-podcast-episode__part {
    font-size: var(--ovt-sub-3);
}

.ovt-podcast-episode__title {
    font-size: var(--ovt-sub-2) !important;
}

.ovt-podcast__info > div {
    margin-block-end: 1.5rem;
}

h3.ovt-podcast__h3 {
    font-size: var(--ovt-sub-2) !important;
    margin-block-start: 0;
    margin-block-end: 0.5rem;
}

.ovt-podcast-webinar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    margin-block-end: 1rem;
}

.ovt-podcast-webinar img.ovt-podcast-webinar__img {
    border-radius: 0.5rem;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

span.ovt-podcast-webinar__title {
    font-size: var(--ovt-body-m);
}

a.ovt-podcast-webinar__link,
a.ovt-podcast-document__link {
    background-color: var(--ovt-orange);
    color: #fff !important;
    font-size: var(--ovt-body);
    width: fit-content;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    border: 2px solid var(--ovt-orange);
    transition: all 0.2s;
}

a.ovt-podcast-webinar__link:hover,
a.ovt-podcast-document__link:hover {
    background-color: transparent;
    color: var(--ovt-orange) !important;
}

ul.ovt-podcast-links__list {
    padding-inline-start: 1rem;
}

li.ovt-podcast-links__item {
    text-decoration: underline;
    font-size: var(--ovt-body);
    line-height: 1.125em;
    margin-block-end: 0.25rem;
}

li.ovt-podcast-links__item a {
    color: var(--ovt-dark-grey);
}

.ovt-podcast-documents__item {
    display: flex;
    flex-direction: column;

    background-color: var(--ovt-grey-m);
    padding: 0.75rem;
    border-radius: 0.25rem;
}

.ovt-podcast-documents__item:not(:last-child) {
    margin-block-end: 0.75rem;
}

.ovt-podcast-documents__item p {
    font-size: var(--ovt-body);
    line-height: 1.25em;
    color: var(--ovt-dark-grey);
}

/* Styling for courses (course grid, and single course) */

.elementor-shortcode
    .learndash-wrapper
    a.ovt-course__continue-btn.ld-button:not(.button),
div.ovt-course__retake a,
div.ovt-course-page__btn-wrapper a,
.learndash-wrapper
    .ld-button:not([disabled]):not(.ld-button-reverse):not(
        .ld-button-transparent
    ):not(.ld--ignore-inline-css).ovt-course__continue-btn,
.ovt-course__start-btn {
    background-color: var(--ovt-primary) !important;
    border: 2px solid var(--ovt-primary) !important;
    border-bottom: 2px solid var(--ovt-primary) !important;
    color: #fff;
    width: 100%;
    padding-inline: 1.25rem;
    padding-block: 0.75rem;
    margin-block-end: 0.25rem;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Hind';
    font-weight: 500;
    transition: all 0.4s;
    line-height: 1;
}

.ovt-course__btn-wrapper {
    display: flex;
}

.ovt-course__btn-wrapper a.ovt-course__start-btn {
    color: #fff;
}

.ovt-course__start-btn {
    text-align: center;
}

.ovt-course-page__continue-btn {
    font-size: var(--font-size-bc-l);
}

.elementor-shortcode
    .learndash-wrapper
    a.ovt-course__continue-btn.ld-button:not(.ld--ignore-inline-css):hover:not(
        .button
    ),
div.ovt-course__retake a:hover,
.ovt-course__start-btn:hover {
    background-color: transparent !important;
    color: var(--ovt-primary) !important;
}

.ovt-course__instructor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

img.ovt-course__instructor-image {
    width: 2rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 100vw !important;
}

@media screen and (max-width: 48em) {
    .learndash-wrapper:not(.ld-registration__outer-wrapper):not(
            .learndash-wrapper--modern
        )
        .ld-button {
        margin-left: 0 !important;
    }
}

div.ovt-course__retake {
    display: flex;
    justify-content: center;
}

.ovt-course__retake-btn {
    text-align: center;
    line-height: 1;
}

.ovt-course__price {
    color: #fff;
    background-color: var(--ovt-orange);
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border-radius: 0 10px 0 10px;
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
    font-family: 'Hind';
    font-weight: 400;
    line-height: 1;
}

#ovt-course__spacer {
    min-height: 0.75rem;
}

/* Styles for course filters */

form#onvt-course-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    font-family: 'Hind';
    font-weight: 500;
}

.ovt-course-filters__section {
    width: 100%;
    display: flex;
    gap: 0.5rem;
}

.ovt-course-filters__section:has(label) {
    gap: 1.5rem;
}

#onvt-course-filters label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1em;
}

#onvt-course-filters input[type='checkbox'] {
    width: 1.5rem;
    height: 1.5rem;
    accent-color: var(--ovt-orange);
    margin-top: -3px;
}

@media screen and (max-width: 48em) {
    .ovt-course-filters__section {
        flex-direction: column;
    }
}

/* Styling for favorite button */
.ovt-favorite-btn--accent
    .ldfc-favorite-button
    .ldfc-button.js-favcon-favorite {
    border-radius: 4px;
    border: 2px solid var(--ovt-orange);
    background-color: var(--ovt-orange);
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0.5rem 1rem 0.25rem;
    transition: all 0.3s;
}

.ovt-favorite-btn--accent
    .ldfc-favorite-button
    .ldfc-button.js-favcon-favorite
    span.ld-icon {
    height: 1.5rem;
}

.ovt-favorite-btn--accent
    .ldfc-favorite-button
    .ldfc-button.js-favcon-favorite:hover {
    background-color: transparent;
}

/*********************** Single course page *************************/

.ovt-course-tab__instructor {
    margin-block-end: 2rem;
}
.ovt-course-tab__heading {
    display: flex;
    align-items: center;
    font-size: var(--font-size-h3);
    gap: 2rem;
    color: var(--ovt-primary--700);
    margin-block-end: 0.75rem;
}

.ovt-course-tab__heading img.ovt-course-tab__instructor-image {
    min-width: 5rem;
    max-width: 5rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50px;
}

.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list.ld-lesson-list
    .ld-section-heading
    h2 {
    font-size: clamp(1.8rem, 1rem + 1.7vw, 2.5rem);
    color: var(--ovt-primary--700);
}

.ovt-single-course__details .learndash-wrapper .ld-expand-button {
    font-size: var(--font-size-bc-l);
    font-weight: 400;
    font-family: 'Hind', sans-serif;
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

.ovt-single-course__details .learndash-wrapper .ld-expand-button span.ld-text {
    padding-inline-start: 0.5rem;
    padding-inline-end: 0;
}

.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list
    .ld-item-list-item
    .ld-item-list-item-preview
    .ld-status-icon {
    margin-top: 0;
}

.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list
    .ld-item-list-item
    .ld-item-details {
    background-color: var(--ovt-primary);
    border-radius: 4px;
}

.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list
    .ld-item-list-item
    .ld-item-details
    .ld-expand-button {
    margin: 0;
    padding: 0.5rem 1rem;
}
.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list
    .ld-item-list-item {
    border: none;
}

.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list
    .ld-item-list-item
    .ld-item-list-item-preview {
    padding: 0.75rem;
    background-color: var(--ovt-grey--x-light);
    border-radius: 0.5rem;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.ovt-single-course__details .learndash-wrapper .ld-secondary-background,
.ovt-single-course__details
    .learndash-wrapper
    .ld-item-name
    .ld-status-complete {
    background-color: var(--ovt-primary--500) !important;
}

.ovt-course-header__instructor-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-block-end: 0.75rem;

    color: #fff;
    font-size: var(--font-size-bc-l);
    font-weight: 400;
}

.ovt-course-header__instructor-info img.ovt-course-header__instructor-image {
    min-width: 3rem;
    max-width: 3rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50px;
}

.ovt-course-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ovt-course-content__item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ovt-course-content__icon {
    height: 1.5rem;
    width: 1.5rem;
}

.ovt-course-content__label {
    color: #fff;
    font-size: var(--font-size-bc);
}

.ovt-single-course__btn-wrapper {
    width: 100%;
}

.ovt-single-course__btn-wrapper a.ovt-single-course__btn,
.ovt-single-course__btn-wrapper a.ovt-single-course__start-btn {
    display: block;
    background-color: var(--ovt-primary);
    padding: 0.5rem 1rem;
    margin-block-end: 0.5rem;
    border-radius: 4px;
    border: 2px solid var(--ovt-primary);
    text-align: center;
    font-size: var(--font-size-bc-m);
    transition: all 0.2s;
    color: #fff;
}

.ovt-single-course__btn-wrapper a.ovt-single-course__btn:hover,
.ovt-single-course__btn-wrapper a.ovt-single-course__start-btn:hover {
    background-color: transparent;
}

.ovt-single-course__btn-wrapper a.ovt-single-course__start-btn {
    background-color: var(--ovt-orange);
    border-color: var(--ovt-orange);
}

.ovt-favorite-btn--accent
    .ldfc-shortcode
    .ldfc-favorite-button
    .ldfc-button.js-favcon-favorite {
    border-radius: 4px;
    border: 2px solid var(--ovt-orange) !important;
    background-color: var(--ovt-orange);
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0.5rem 1rem 0.25rem;
    transition: all 0.3s;
}

.ovt-favorite-btn--accent
    .ldfc-favorite-button
    .ldfc-button.js-favcon-favorite
    span.ld-icon {
    height: 1.5rem;
}

.ovt-favorite-btn--accent
    .ldfc-favorite-button
    .ldfc-button.js-favcon-favorite:hover {
    background-color: transparent;
    color: var(--ovt-orange);
}

.ovt-course-tab__instructor {
    margin-block-end: 2rem;
}
.ovt-course-tab__heading {
    display: flex;
    align-items: center;
    font-size: var(--font-size-h3);
    gap: 2rem;
    color: var(--ovt-primary--700);
    margin-block-end: 0.75rem;
}

.ovt-course-tab__heading img.ovt-course-tab__instructor-image {
    min-width: 5rem;
    max-width: 5rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50px;
}
.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list.ld-lesson-list
    .ld-section-heading
    h2 {
    font-size: clamp(1.8rem, 1rem + 1.7vw, 2.5rem);
    color: var(--ovt-primary--700);
}

.ovt-single-course__details .learndash-wrapper .ld-expand-button {
    font-size: var(--font-size-bc-l);
    font-weight: 400;
    font-family: 'Hind', sans-serif;
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

.ovt-single-course__details .learndash-wrapper .ld-expand-button span.ld-text {
    padding-inline-start: 0.5rem;
    padding-inline-end: 0;
}

.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list
    .ld-item-list-item
    .ld-item-list-item-preview
    .ld-status-icon {
    margin-top: 0;
}

.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list
    .ld-item-list-item
    .ld-item-details {
    background-color: var(--ovt-primary);
    border-radius: 4px;
}

.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list
    .ld-item-list-item
    .ld-item-details
    .ld-expand-button {
    margin: 0;
    padding: 0.5rem 1rem;
}
.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list
    .ld-item-list-item {
    border: none;
}

.ovt-single-course__details
    .learndash-wrapper
    .ld-item-list
    .ld-item-list-item
    .ld-item-list-item-preview {
    padding: 0.75rem;
    background-color: var(--ovt-grey--x-light);
    border-radius: 0.5rem;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.ovt-single-course__details .learndash-wrapper .ld-secondary-background,
.ovt-single-course__details
    .learndash-wrapper
    .ld-item-name
    .ld-status-complete {
    background-color: var(--ovt-primary--500) !important;
}

/****************************** Styling for promotion block **************************************************/

.ovt-course-promotion {
    display: flex;
    gap: 1rem;
    background-color: var(--ovt-grey-m);

    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
}

.ovt-course-promotion img.ovt-course-promotion__image {
    width: 45%;
    max-width: 30rem;
    border-radius: 0.5rem 0 0 0.5rem;
    flex-shrink: 0;

    object-fit: cover;
}

.ovt-course-promotion__content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.ovt-course-promotion__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 0.25rem;
    width: fit-content;

    line-height: 1.25em;
    font-size: var(--font-size-h3) !important;
    text-align: center;

    padding-inline: 2rem;
    padding-block-end: 1.25rem;
    border-block-end: 2px solid var(--ovt-primary--700);
}

.ovt-course-promotion__heading .ovt-course-promotion__type {
    font-weight: 600;
}

.ovt-course-promotion__description {
    color: var(--ovt-primary--700);
}

.ovt-course-promotion__content a.ovt-course-promotion__permalink {
    background-color: var(--ovt-orange);
    color: #fff;
    text-decoration: none;

    padding-inline: 1rem;
    padding-block: 0.5rem 0.35rem;

    font-size: var(--font-size-bc-m);
    font-weight: 500;
    border-radius: 4px;
    border: 2px solid var(--ovt-orange);

    transition: all 0.2s;
}

.ovt-course-promotion__content a.ovt-course-promotion__permalink:hover {
    background-color: transparent;
    color: var(--ovt-orange);
}

@media screen and (max-width: 48em) {
    .ovt-course-promotion {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ovt-course-promotion img.ovt-course-promotion__image {
        width: 100%;
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .ovt-course-promotion__content {
        padding-block-start: 0;
    }
}

/****************************************************** Styling for FluentForms *************************************************/
button.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_style {
    background-color: var(--ovt-orange);
    border-radius: 4px;
    border: 2px solid var(--ovt-orange);
    color: #fff;
    transition: all 0.2s;
    text-transform: uppercase;
    font-family: 'Hind';
    font-size: var(--ovt-body);
    display: block;
}

button.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_style:hover {
    background-color: transparent;
    color: var(--ovt-orange);
}

@media screen and (max-width: 48em) {
    button.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_style {
        margin-inline: auto;
    }
}

/************************************************* Styling for login/out button *************************************************/

.ovt-login-out-button a.ovt-login-out-text {
    color: var(--ovt-primary) !important;
    font-size: 1rem;
}