@charset "UTF-8";

@layer components {
  @layer course {
    .course {
      counter-reset: chapter;
      width: 100%;
    }
    .course h2 {

    }
    .course h2.heading-bottom-line::after {
      height: 27px !important;
    }
    }

    .course details {
      counter-increment: chapter;
    }
    .course summary {
      display: block;
      list-style: none;
      color: #806148;
      position: relative;
    }
    .course summary span {
      letter-spacing: .8em;
      padding-left: .5em;
    }
    .course summary::after {
      content: '';
      display: inline-block;
      vertical-align: middle;
      color: #000;
      line-height: 1;
      width: 10px;
      height: 10px;
      border: 0.1em solid currentColor;
      border-left: 0;
      border-bottom: 0;
      box-sizing: border-box;
      transform: translateY(-25%) rotate(135deg);
      margin-top: 3px;
      position: absolute;
      right: 30px;
    }


  }
  @layer accordion {
    details {
      --border-color: #DFDCD6;
      border: 1px solid var(--border-color);
      overflow: hidden;
      margin: 0;
      transition: all 0.5s 1s ease-in-out;

      > summary {
        background: #F4F3F2;
        padding: 0.5em 1em;
        border-bottom: 1px solid var(--border-color);
        cursor: pointer;

        transition: background 0.25s ease, color 0.25s ease;

        &:hover {
          background: #e0dbd6;
        }
      }

      &[open] {
        border-bottom: 1px solid var(--border-color);

        > summary {
          background: #e0dbd6;
        }

        >summary::after {
          transform: rotate(-45deg);
          transition: 0.2s;
        }
      }

      > *:not(summary) {
        padding: 1em;
      }
    }

    /* Visually group successive siblings together */
    details:has(+ details) {
      border-bottom: none;
    }
    details + details {
      border-top: none;
    }
    details:not(details:has(+ details)) {
      &:not([open]) summary {
        border-bottom: 0;
      }
    }
  }
@media screen and (max-width: 768px) {
  .course summary {
    padding-right: 2.2em;
  }
  .course summary span {
    letter-spacing: 0.2em;
  }
  .course summary::after {
    right: 20px;
    bottom: 45%;
  }
}