/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
@font-face {
  font-family: "F37 Ginger Rounded";
  src: url("/themes/custom/doas_theme/src/stories/global/fonts/F37GingerRounded/F37GingerRoundedTrial-Regular.woff2") format("woff2"), url("/themes/custom/doas_theme/src/stories/global/fonts/Proxima_Nova/F37GingerRoundedTrial-Regular.woff") format("woff"), url("/themes/custom/doas_theme/src/stories/global/fonts/Proxima_Nova/F37GingerRoundedTrial-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arial";
  src: url("/themes/custom/doas_theme/src/stories/global/fonts/Arial/Arial.woff2") format("woff2"), url("/themes/custom/doas_theme/src/stories/global/fonts/Arial/Arial.woff") format("woff"), url("/themes/custom/doas_theme/src/stories/global/fonts/Arial/Arial.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.menu-form-wrapper {
  margin-block-end: 0;
}
.menu-form-wrapper > .layout__region--first {
  flex-basis: 20%;
  margin-inline-end: 0;
}

.block-content--type-form-menu-link {
  background: #3a3a3a;
  color: #ffffff;
  padding: 1.25rem;
  position: relative;
  height: 100%;
}
@media (max-width: 991px) {
  .block-content--type-form-menu-link {
    background: transparent;
    padding: 0;
    color: #000000;
  }
}
.block-content--type-form-menu-link .field--name-field-home-link a {
  color: #ffffff;
}
@media (max-width: 991px) {
  .block-content--type-form-menu-link .field--name-field-home-link a {
    color: #000000;
  }
}
.block-content--type-form-menu-link .field--name-field-home-link a:hover {
  color: #f7921e;
}
.block-content--type-form-menu-link .menu-links .menu-link-item:not(:last-child) {
  margin-block-end: 1.5rem;
}
.block-content--type-form-menu-link .menu-links .menu-link-item p {
  margin-block-end: 0;
  font-size: 1.125rem;
  line-height: 1.5rem;
}
.block-content--type-form-menu-link .menu-links .menu-link-item a {
  color: #ffffff;
  font-weight: 700;
}
@media (max-width: 991px) {
  .block-content--type-form-menu-link .menu-links .menu-link-item a {
    color: #000000;
  }
}
.block-content--type-form-menu-link .menu-links .menu-link-item a:hover {
  color: #f7921e;
}
.block-content--type-form-menu-link .menu-links .menu-link-item.is-active p,
.block-content--type-form-menu-link .menu-links .menu-link-item.is-active a {
  color: #f7921e;
}
.block-content--type-form-menu-link .menu-links.first-external-menu {
  margin-block-end: 100px;
}
@media (max-width: 991px) {
  .block-content--type-form-menu-link .menu-links.first-external-menu {
    margin-block-end: 36px;
  }
}
.block-content--type-form-menu-link .text-content {
  position: absolute;
  left: 0.625rem;
  right: 0.625rem;
  bottom: 1rem;
}
.block-content--type-form-menu-link .text-content p {
  font-family: "Arial", sans-serif;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.125rem;
}
@media (max-width: 991px) {
  .block-content--type-form-menu-link .text-content p {
    color: #000000;
  }
}
.block-content--type-form-menu-link .text-content p a {
  color: #ffffff;
}
@media (max-width: 991px) {
  .block-content--type-form-menu-link .text-content p a {
    color: #000000;
  }
}
.block-content--type-form-menu-link .text-content p a:hover {
  color: #f7921e;
}

.external-learners-text {
  font-size: 1.5rem;
  line-height: 2.5rem;
}

.accountactivation .grid-full,
.accountactivationconfirmation .grid-full,
.updateaccount .grid-full,
.updateaccountconfirmation .grid-full,
.registeraccount .grid-full,
.registeraccountconfirmation .grid-full,
.recover-account .grid-full,
.login .grid-full {
  display: flex !important; /* stylelint-disable-line declaration-no-important */
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 170px);
}
@media (max-width: 991px) {
  .accountactivation .grid-full,
  .accountactivationconfirmation .grid-full,
  .updateaccount .grid-full,
  .updateaccountconfirmation .grid-full,
  .registeraccount .grid-full,
  .registeraccountconfirmation .grid-full,
  .recover-account .grid-full,
  .login .grid-full {
    min-height: calc(100vh - 145.75px);
  }
}
.accountactivation .grid-full .block-block-content,
.accountactivationconfirmation .grid-full .block-block-content,
.updateaccount .grid-full .block-block-content,
.updateaccountconfirmation .grid-full .block-block-content,
.registeraccount .grid-full .block-block-content,
.registeraccountconfirmation .grid-full .block-block-content,
.recover-account .grid-full .block-block-content,
.login .grid-full .block-block-content {
  width: 20%;
}
@media (max-width: 991px) {
  .accountactivation .grid-full .block-block-content,
  .accountactivationconfirmation .grid-full .block-block-content,
  .updateaccount .grid-full .block-block-content,
  .updateaccountconfirmation .grid-full .block-block-content,
  .registeraccount .grid-full .block-block-content,
  .registeraccountconfirmation .grid-full .block-block-content,
  .recover-account .grid-full .block-block-content,
  .login .grid-full .block-block-content {
    position: absolute;
    top: 60px;
    right: 15px;
    width: 9%;
  }
}
.accountactivation .grid-full .block-block-content .block__content,
.accountactivationconfirmation .grid-full .block-block-content .block__content,
.updateaccount .grid-full .block-block-content .block__content,
.updateaccountconfirmation .grid-full .block-block-content .block__content,
.registeraccount .grid-full .block-block-content .block__content,
.registeraccountconfirmation .grid-full .block-block-content .block__content,
.recover-account .grid-full .block-block-content .block__content,
.login .grid-full .block-block-content .block__content {
  height: 100%;
}
.accountactivation .grid-full .block-system-main-block,
.accountactivationconfirmation .grid-full .block-system-main-block,
.updateaccount .grid-full .block-system-main-block,
.updateaccountconfirmation .grid-full .block-system-main-block,
.registeraccount .grid-full .block-system-main-block,
.registeraccountconfirmation .grid-full .block-system-main-block,
.recover-account .grid-full .block-system-main-block,
.login .grid-full .block-system-main-block {
  width: 80%;
  padding: 1rem 1.5rem;
  background: #f9f9f5;
}
@media (max-width: 991px) {
  .accountactivation .grid-full .block-system-main-block,
  .accountactivationconfirmation .grid-full .block-system-main-block,
  .updateaccount .grid-full .block-system-main-block,
  .updateaccountconfirmation .grid-full .block-system-main-block,
  .registeraccount .grid-full .block-system-main-block,
  .registeraccountconfirmation .grid-full .block-system-main-block,
  .recover-account .grid-full .block-system-main-block,
  .login .grid-full .block-system-main-block {
    width: 100%;
    padding-inline: 0.938rem;
  }
}
.accountactivation .grid-full .block-system-main-block .block__content,
.accountactivationconfirmation .grid-full .block-system-main-block .block__content,
.updateaccount .grid-full .block-system-main-block .block__content,
.updateaccountconfirmation .grid-full .block-system-main-block .block__content,
.registeraccount .grid-full .block-system-main-block .block__content,
.registeraccountconfirmation .grid-full .block-system-main-block .block__content,
.recover-account .grid-full .block-system-main-block .block__content,
.login .grid-full .block-system-main-block .block__content {
  height: 100%;
}
.accountactivation .grid-full .block-system-main-block .block__content .webform-ajax-form-wrapper,
.accountactivationconfirmation .grid-full .block-system-main-block .block__content .webform-ajax-form-wrapper,
.updateaccount .grid-full .block-system-main-block .block__content .webform-ajax-form-wrapper,
.updateaccountconfirmation .grid-full .block-system-main-block .block__content .webform-ajax-form-wrapper,
.registeraccount .grid-full .block-system-main-block .block__content .webform-ajax-form-wrapper,
.registeraccountconfirmation .grid-full .block-system-main-block .block__content .webform-ajax-form-wrapper,
.recover-account .grid-full .block-system-main-block .block__content .webform-ajax-form-wrapper,
.login .grid-full .block-system-main-block .block__content .webform-ajax-form-wrapper {
  height: 100%;
}

.menu-slide-panel {
  transition: transform 0.3s ease;
}

@media (max-width: 991px) {
  .menu-slide-panel {
    position: fixed;
    top: 0;
    right: 0; /* <-- changed from left to right */
    height: 100vh;
    width: 280px;
    background: #fff;
    z-index: 999;
    padding: 20px;
    transform: translateX(100%); /* <-- changed from -100% to +100% */
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); /* <-- flipped shadow */
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .menu-slide-panel.active {
    transform: translateX(0);
  }
  .hamburger-toggle {
    background: none;
    border: none;
    font-size: 1.8rem;
    z-index: 1000;
    position: relative;
    padding: 0;
  }
  .open-icon,
  .close-icon {
    transition: all 0.3s ease;
    color: #000000;
  }
  body.menu-open {
    overflow: hidden;
  }
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
}