/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Increase line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

:root {
 --color-background-color: #FFF6F0;
 --border-radius-1: 4px;
 --border-radius-2: 8px;

  /* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /* Step -2: 11.1111px → 11.52px */
  --step--2: clamp(0.6944rem, 0.684rem + 0.0465vw, 0.72rem);
  /* Step -1: 13.3333px → 14.4px */
  --step--1: clamp(0.8333rem, 0.8061rem + 0.1212vw, 0.9rem);
  /* Step 0: 16px → 18px */
  --step-0: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
  /* Step 1: 19.2px → 22.5px */
  --step-1: clamp(1.2rem, 1.1156rem + 0.375vw, 1.4063rem);
  /* Step 2: 23.04px → 28.125px */
  --step-2: clamp(1.44rem, 1.31rem + 0.5778vw, 1.7578rem);
  /* Step 3: 27.648px → 35.1563px */
  --step-3: clamp(1.728rem, 1.536rem + 0.8532vw, 2.1973rem);
  /* Step 4: 33.1776px → 43.9453px */
  --step-4: clamp(2.0736rem, 1.7983rem + 1.2236vw, 2.7466rem);
  /* Step 5: 39.8131px → 54.9316px */
  --step-5: clamp(2.4883rem, 2.1018rem + 1.718vw, 3.4332rem);

  /* @link https://utopia.fyi/space/calculator?c=360,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /* Space 3xs: 4px → 5px */
  --space-3xs: clamp(0.25rem, 0.2244rem + 0.1136vw, 0.3125rem);
  /* Space 2xs: 8px → 9px */
  --space-2xs: clamp(0.5rem, 0.4744rem + 0.1136vw, 0.5625rem);
  /* Space xs: 12px → 14px */
  --space-xs: clamp(0.75rem, 0.6989rem + 0.2273vw, 0.875rem);
  /* Space s: 16px → 18px */
  --space-s: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
  /* Space m: 24px → 27px */
  --space-m: clamp(1.5rem, 1.4233rem + 0.3409vw, 1.6875rem);
  /* Space l: 32px → 36px */
  --space-l: clamp(2rem, 1.8977rem + 0.4545vw, 2.25rem);
  /* Space xl: 48px → 54px */
  --space-xl: clamp(3rem, 2.8466rem + 0.6818vw, 3.375rem);
  /* Space 2xl: 64px → 72px */
  --space-2xl: clamp(4rem, 3.7955rem + 0.9091vw, 4.5rem);
  /* Space 3xl: 96px → 108px */
  --space-3xl: clamp(6rem, 5.6932rem + 1.3636vw, 6.75rem);

  /* One-up pairs */
  /* Space 3xs-2xs: 4px → 9px */
  --space-3xs-2xs: clamp(0.25rem, 0.1222rem + 0.5682vw, 0.5625rem);
  /* Space 2xs-xs: 8px → 14px */
  --space-2xs-xs: clamp(0.5rem, 0.3466rem + 0.6818vw, 0.875rem);
  /* Space xs-s: 12px → 18px */
  --space-xs-s: clamp(0.75rem, 0.5966rem + 0.6818vw, 1.125rem);
  /* Space s-m: 16px → 27px */
  --space-s-m: clamp(1rem, 0.7188rem + 1.25vw, 1.6875rem);
  /* Space m-l: 24px → 36px */
  --space-m-l: clamp(1.5rem, 1.1932rem + 1.3636vw, 2.25rem);
  /* Space l-xl: 32px → 54px */
  --space-l-xl: clamp(2rem, 1.4375rem + 2.5vw, 3.375rem);
  /* Space xl-2xl: 48px → 72px */
  --space-xl-2xl: clamp(3rem, 2.3864rem + 2.7273vw, 4.5rem);
  /* Space 2xl-3xl: 64px → 108px */
  --space-2xl-3xl: clamp(4rem, 2.875rem + 5vw, 6.75rem);

  /* Custom pairs */
  /* Space s-l: 16px → 36px */
  --space-s-l: clamp(1rem, 0.4886rem + 2.2727vw, 2.25rem);

  /* @link https://utopia.fyi/grid/calculator?c=360,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --grid-max-width: 69.75rem;
  --grid-gutter: var(--space-s-l, clamp(1rem, 0.4048rem + 2.6455vw, 2.25rem));
  --grid-columns: 12;

  --line-height: 1.5;

  --stack--3: 0.5rem;
  --stack--2: 0.75rem;
  --stack--1: 1rem;
  --stack-0: 1.5rem;
  --stack-1: 2.25rem;
  --stack-2: 3rem;
  --stack-margin: var(--stack-0);

 --font-sans: InterVariable, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */

  --primary-color-l1: #C1C699;
}

@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

button {
  cursor: pointer;
}

body {
  background-color: var(--color-background-color);

  font-size: var(--step-0);
  font-family: var(--font-sans);
  color: #404040;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media(prefers-reduced-motion) {
    html {
        scroll-behavior: auto
    }
}

/* Auth */

.auth-entrance-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.auth-entrance {
  --stack-margin: var(--stack--1);
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 4px;
  background-color: #fff;
  margin: 0 auto;
  border: 1px solid #dfdfdf;
  width: 100%;
}

.auth-entrance h1 {
  font-size: var(--step-1);
}

.auth-entrance__logo {
  display: flex;
  justify-content: center;
  margin-block: var(--stack-0);
}

.auth-entrance__logo img {
  display: block;
  margin: 0 auto;
  height: 60px;
  width: auto;
}

.auth-entrance__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  p {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    label {
      font-weight: 600;
    }
  }

  .errorlist {
    list-style: none;
    padding: 0;
  }
}

.auth-entrance__form_field {
  --stack-margin: var(--stack--3);
}

.auth-entrance__form_field label {
  font-weight: 500;
}

.auth-entrance__form-submit {
  display: flex;
  gap: var(--space-3xs);
  align-items: center;
  width: 100%;
}

.auth-entrance__form-submit input {
  flex-grow: 1;
  border-color: #dfdfdf;
}

.auth-entrance__form-submit input,
.auth-entrance__form-submit button {
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
}

.auth-entrance__form-submit button {
  flex-shrink: 0;
  background-color: #f6cccd;
  font-weight: 500;
  font-size: var(--step-0);
  color: #404040;
  border-color: #f6cccd;
}

.auth-entrance__code_actions {
  display: flex;
  /*flex-direction: column;*/
  align-items: center;
  gap: var(--space-2xs);
}

.auth-entrance__code_actions button {
  font-size: var(--step--1);
  background-color: transparent;
  border: none;
  padding: 0;
  text-decoration: underline;
  font-weight: 500;
  color: #404040;
}

@media screen and (max-width: 767px) {
  .auth-entrance-wrapper {
    padding: 0 var(--space-xs);
  }

  .auth-entrance {
    padding: var(--space-s);
  }
}

@media screen and (min-width: 768px) {
  .auth-entrance {
    max-width: 50ch;
    padding: var(--space-m);
  }

  .auth-entrance-wrapper {
    justify-content: center;
  }

  .auth-entrance__logo img {
    height: 80px;
  }
}

/* Global messages */

.global-messages {
    ul {
      list-style: none;
      padding: 0;
    }
}

/* Base */

.u-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.u-stack > * + * {
  margin-block-start: var(--stack-margin);
}

.u-stack:only-child {
  block-size: 100%;
}

.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}

/* Nav */

.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}

.app-nav {
  gap: 1em;
  border-bottom: 1px solid #dfdfdf;
  flex-shrink: 0;
  background-color: #fcfcfc;
}

/*.app-nav__wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}*/

.app-nav__wrapper {
  display: grid;
  align-items: center;
}

.app-frame {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-nav__primary {
  flex-shrink: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.app-nav__primary nav ul {
  display: flex;
  gap: var(--space-xs);
}

.app-nav__primary nav a {
  line-height: 1;
  font-size: var(--step--1);
  color: #404040;
  font-weight: 500;
}

.app-nav nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-nav__secondary {
  flex-shrink: 0;
}

.app-nav__secondary a,
.app-nav__secondary button[type="submit"] {
  text-decoration: none;
  color: #404040;
  font-weight: 500;
  font-size: var(--step--1);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid #b9b9b9;
  border-radius: 2px;
  background-color: #fff;
  line-height: 1;
}

@media (max-width: 767px) {
  .app-nav__wrapper {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo menu"
      "title title";
  }

  .app-nav__logo {
    grid-area: logo;
  }

  .app-nav__logo,
  .app-nav__title,
  .app-nav__secondary {
    padding: var(--space-xs);
  }

  .app-nav__primary {
    display: contents;
  }

  .app-nav__title {
    grid-area: title;
    background-color: #fff;
    border-top: 1px solid #dfdfdf;
  }
}

@media screen and (min-width: 768px) {
  .app-nav__wrapper {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo title menu";
    padding: var(--space-2xs);
  }

  .app-nav__title {
    border-left: 1px solid #dfdfdf;
    padding-left: var(--space-s);
  }

  .app-nav__logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .app-nav__title {
    /* Title is inline with the logo */
  }

  .app-nav__secondary {
    grid-area: menu;
  }
}

/* Course */
.course-detail {
  display: flex;
  flex-direction: column;
  align-items: start;
  overflow: hidden;
  height: 100%;
}

.course-detail__title {
  display: flex;
  gap: var(--space-3xs);
  align-items: center;
}

.course-detail__title * {
  font-size: var(--step--1);
}

.course-detail__title a:first-child {
  color: currentColor;
  text-decoration: none;
  font-weight: 400;
}

.course-detail__title a:last-child {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #F6CCCD;
  text-decoration-thickness: .3ex;
  text-underline-offset: .4ex;
}

.course-detail__title .icon {
  height: 16px;
  width: 16px;
}

.course-detail__sidebar {
  flex-shrink: 0;
  flex-grow: 0;
  background-color: #fcfcfc;
  overflow: hidden;
  width: 100%;
}

.course-detail__sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  flex-shrink: 0;
  border-bottom: 1px solid #dfdfdf;
}

.course-detail__sidebar-heading > * {
  padding: var(--space-xs) var(--space-xs);
}

.course-detail__sidebar-heading button {
  border: none;
  background-color: transparent;
  line-height: 1;
}

.course-detail__sidebar-heading button span {
  height: 20px;
  width: 20px;
  display: inline-block;
  color: currentColor;
}

.course-detail__sidebar-heading h2 {
  font-size: var(--step-0);
  font-weight: 600;
}

.course-detail__modules-list {
  flex-grow: 1;
  overflow: scroll;
  padding: 0;
  list-style: none;
}

.course-detail__modules-list li {
  border-bottom: 1px solid #dfdfdf;
}

.course-detail__modules-list li[data-active-module] a {
  background-color: #fff;
  font-weight: 600;
}

.course-detail__modules-list li a {
  text-decoration: none;
  color: #404040;
  font-weight: 400;
  width: 100%;
  display: block;
  font-size: var(--step--1);
  padding: var(--space-xs) var(--space-xs);
}

.course-detail__content .u-container {
  margin-inline: unset;
  padding: unset;
}

.course-detail__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  padding: var(--space-s);
  overflow: auto;
  width: 100%;
}

.course-detail__module-content {
  --stack-margin: var(--stack--1);
}

.course-detail__module-content-heading {
  font-size: var(--step-1);
  font-weight: 600;
}

.course-detail__videos, .course-detail__attachment ul {
  list-style: none;
  padding: 0;
}

.course-detail__attachments .u-stack {
  --stack-margin: var(--stack--3);
}

.course-detail__attachments h3 {
  font-size: var(--step-0);
}

.course-detail__attachments ul {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-2xs);

  padding: 0;
  list-style: none;
}

.course-detail__attachments ul li a {
  font-size: var(--step--1);
  width: 100%;
  justify-content: stretch;

  text-decoration-thickness: .1ex;
  text-underline-offset: .4ex;

  color: currentColor;
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

.course-detail__attachments ul li a .icon {
  height: 20px;
  width: 20px;
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .course-detail__sidebar-content:not[style] {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .course-detail {
    flex-direction: row;
  }

  .course-detail__sidebar {
    height: 100%;
    border-right: 1px solid #dfdfdf;
    width: 33.33%;
    max-width: 320px;
    min-width: 240px;
  }

  .course-detail__sidebar-content {
    display: block !important;
  }

  .course-detail__sidebar-heading button {
    display: none;
  }

  .course-detail__content {
    padding: var(--space-s) var(--space-l);
  }

  .course-detail__module-content {
    --stack-margin: var(--stack-0);
  }

  .course-detail__sidebar-heading > * {
    padding: unset;
  }

  .course-detail__sidebar-heading {
    padding: var(--space-xs) var(--space-xs);
  }
}

/* Video */
.video__frame {
}

/* Home */
.home {
  background-color: #fcfcfc;
  height: 100%;
  overflow: scroll;
  padding: var(--space-s) 0;
}

.home > .u-stack {
  --stack-margin: var(--stack--1);
}

.home__header h1 {
  font-size: var(--step-1);
  font-weight: 600;
}

.home__offering-grid {
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(1, 1fr);
}

.home__offering-grid-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-s);
  padding: var(--space-s);
  border: 1px solid #dfdfdf;
  border-radius: 4px;
  background-color: #fff;
  height: 100%;
}

.home__offering-item-poster {
  display: flex;
  width: 100%;
  background-color: #fcfcfc;
}

.home__offering-item-poster img {
  object-fit: cover;
  border-radius: 4px;
  max-height: 200px;
  height: 100%;
  margin: 0 auto;
}

.home__offering-item-details {
  --stack-margin: var(--stack--3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  width: 100%;
  gap: var(--space-s);
}

.home__offering-item-details *:first-child {
  flex-grow: 1;
}

.home__offering-item-details *:last-child {
  flex-shrink: 0;
}

.home__offering-item-details h2 {
  font-size: var(--step-0);
}

.home__offering-item-details p {
  font-size: var(--step--1);
  max-width: 60ch;
  text-wrap: balance;
}

.home__offering-item-details a {
  background-color: #f6cccd;
  border: 1px solid #f6cccd;
  font-weight: 500;
  font-size: var(--step--1);
  color: #404040;
  text-decoration: none;
  padding: var(--space-2xs) var(--space-xs);
  display: inline-block;
  border-radius: 2px;
}

@media screen and (min-width: 768px) {
  .home__offering-grid {
      grid-template-columns: repeat(2, 1fr);
  }

  .home__offering-grid-item {
    flex-direction: row;
    padding: var(--space-s);
  }

  .home__offering-item-poster {
    width: auto;
  }
}

/* Account */
.account {
  background-color: #fcfcfc;
  height: 100%;
  overflow: scroll;
  padding: var(--space-s) 0;
}

.account__header h1 {
  font-size: var(--step-1);
  font-weight: 600;
}

.account__section h2 {
  font-size: var(--step-0);
}

.account__logout {
  background-color: #f9d285;
  border: 1px solid #f9d285;
  font-weight: 500;
  font-size: var(--step--1);
  color: #404040;
  text-decoration: none;
  padding: var(--space-2xs) var(--space-xs);
  display: inline-block;
  border-radius: 2px;
}