html {
  scroll-padding-top: var(--announcement-height, 0px);
}

body {
  padding-top: var(--announcement-height, 0px);
}

body > .hdr {
  top: var(--announcement-height, 0px);
}

body > .drawer {
  top: calc(var(--header, 72px) + var(--announcement-height, 0px));
  max-height: calc(100dvh - var(--header, 72px) - var(--announcement-height, 0px));
}

.course__nav, .learning-nav, .service-nav {
  top: calc(var(--header, 72px) + var(--announcement-height, 0px));
}

@media (min-width: 1000px) {
  .pane__split .sv {
    top: calc(96px + var(--announcement-height, 0px));
  }
}

.course-announcement {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: #0c6058;
  color: #fff;
  border-bottom: 1px solid #ffffff26;
}

.course-announcement__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 32px);
}

.course-announcement__link {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 24px;
  row-gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding-block: 8px;
  color: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
}

.course-announcement__title { font-weight: 700; }
.course-announcement__details { color: #e3f5ee; }
.course-announcement__action { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.course-announcement__link:hover .course-announcement__action { text-decoration-thickness: 2px; }
.course-announcement__link:active { opacity: .85; }

.course-announcement__close {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.course-announcement__close:hover { background: #ffffff1f; }
.course-announcement__close:active { background: #ffffff33; }
.course-announcement :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

@media (max-width: 767px) {
  .future-course section.course-section[id] {
    scroll-margin-top: calc(var(--header, 72px) + 4.5rem);
  }
  .course-announcement__inner { gap: 4px; padding-inline: 12px; }
  .course-announcement__link { justify-content: flex-start; column-gap: 12px; font-size: 12px; }
  .course-announcement__title { flex-basis: 100%; font-size: 13px; }
  .course-announcement__action-full { display: none; }
}