/**
 * Theme Name: No.60
 * Template:   twentytwentyfive
 */

/*
Can use these WordPress variables defined in site editor:
- `--wp--preset--color--base` (#000000, background color)
- `--wp--preset--color--contrast` (#D8D8D8, text color)
- `--wp--preset--color--accent-1` accent color (#7b0f12, dark red = "Primary Maroon Red" in Figma)
- `--wp--preset--color--accent-2` accent color (#c5a46d, light tan = "Secondary Antique Gold" in Figma)
- `--wp--preset--color--accent-3` accent color (#ca6c37, medium orange)
- `--wp--preset--color--custom-primary-dark` (#18181B, "Primary Dark" in Figma)
- `--wp--preset--color--custom-sub-background` (#212124, "Sub Background" in Figma)
- `--wp--preset--color--custom-sub-white-text` (#99A1AF, "Sub White Text" in Figma)
- `--wp--preset--color--custom-base-dark` (#262626, "Base Dark" in Figma)
- `--wp--preset--color--custom-base-input` (#E4E4E7, "base/input" in Figma)
- `--wp--preset--color--custom-bright-white` (#ffffff)
- `--wp--preset--color--custom-secondary` (#757C8E, used in Figma but without a variable name)
- `--wp--preset--color--custom-border` (#E0E2EA, "Border" in Figma)
*/

/* #region Global Top Main Menu */
.no60-mainmenu {
  gap: 2px;
  padding: 1px;
}
.no60-mainmenu .wp-block-navigation-item {
  flex: 1 0 0;
}
.no60-mainmenu .wp-block-navigation-item .wp-block-navigation-item__content {
  flex: 1 0 0;
  display: block;
  text-align: center;
  padding: 10px;
  background-color: black;
  color: white !important;
  font-size: 18px;
}
.no60-mainmenu
  .wp-block-navigation-item
  .wp-block-navigation-item__content:hover {
  text-decoration: none;
  background-color: #7b0f12;
  transition: background-color 0.3s ease;
}
/* #endregion */

/* #region Design Tokens (dark) */
:root {
  --no60-form-control-bg: var(--wp--preset--color--custom-primary-dark);
  --no60-form-control-text: var(--wp--preset--color--contrast);
  --no60-form-control-border: var(--wp--preset--color--contrast);
  --no60-text-color: var(--wp--preset--color--contrast);
  --no60-muted-text-color: var(--wp--preset--color--custom-sub-white-text);
  --no60-tabs-active-color: var(--wp--preset--color--accent-1);
  --no60-tabs-inactive-color: var(--wp--preset--color--contrast);
  --no60-table-header-bg: var(--wp--preset--color--custom-primary-dark);
  --no60-table-header-text: var(--no60-text-color);
  --no60-table-cell-bg: var(--wp--preset--color--custom-sub-background);
  --no60-table-cell-text: var(--no60-text-color);
}
/* #endregion */

/* #region Design Tokens (light) */
.tutor-modal-content-white,
.tutor-login-wrap,
#tutor-single-entry-content,
.n60-lightmode {
  --no60-form-control-bg: white;
  --no60-form-control-text: var(--wp--preset--color--black);
  --no60-form-control-border: #cdcfd5;
  --no60-text-color: #41454f;
  --no60-muted-text-color: var(--wp--preset--color--custom-secondary);
  --no60-tabs-active-color: var(--wp--preset--color--black);
  --no60-tabs-inactive-color: var(--wp--preset--color--custom-secondary);
  --no60-table-header-bg: #f5f5f5;
  --no60-table-header-text: var(--no60-text-color);
  --no60-table-cell-bg: white;
  --no60-table-cell-text: var(--no60-text-color);
}
/* #endregion */

/* Child theme overrides. Nested to increase specificity */
.wp-child-theme-no60 {
  /* #region Tutor LMS - Common components */
  & .tutor-color-black {
    color: var(--no60-text-color);
  }
  & .tutor-color-secondary,
  & .tutor-color-muted {
    color: var(--no60-muted-text-color);
  }
  & .tutor-form-check-input.tutor-form-check-input {
    background: var(--no60-form-control-bg);
    border-color: var(--no60-form-control-border);
  }
  & .tutor-table tr th {
    background: var(--no60-table-header-bg);
    color: var(--no60-table-header-text);
  }
  & .tutor-table tr td {
    background: var(--no60-table-cell-bg);
    color: var(--no60-table-cell-text);
  }
  & .tutor-form-control {
    background: var(--no60-form-control-bg);
    color: var(--no60-form-control-text);
    border-color: var(--no60-form-control-border);
  }
  & .tutor-form-select-dropdown {
    background: var(--no60-form-control-bg);
    color: var(--no60-form-control-text);
    border-color: var(--no60-form-control-border);
  }
  & .tutor-form-select-option:hover,
  & .tutor-form-select-option.is-active {
    background: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--contrast);
  }
  /* #endregion */

  /* #region Tutor LMS - Course & Dashboard Cards */
  /*
  Tutor Course Info Page
  */
  & .tutor-card.tutor-card {
    background: var(--wp--preset--color--custom-sub-background);
    color: var(--wp--preset--color--contrast);
  }

  &
    .tutor-dashboard
    .tutor-dashboard-left-menu
    .tutor-dashboard-menu-item-icon {
    color: var(--wp--preset--color--contrast);
  }

  & .tutor-btn-outline-primary {
    border-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--contrast);
  }

  /**
   * Course info page
   * /courses/test-course/
   */
  &.single-courses {
    background: var(--wp--preset--color--custom-primary-dark);
  }

  & .tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body {
    background: var(--wp--preset--color--custom-primary-dark);
  }

  & .tutor-single-course-sidebar-more > div {
    background: var(--wp--preset--color--custom-primary-dark);
  }

  & .tutor-toggle-more-collapsed:before {
    background: linear-gradient(
      rgba(24, 24, 27, 0) 1.31%,
      rgba(24, 24, 27, 0.72) 15.41%,
      rgb(24, 24, 27) 100%
    );
  }

  & .tutor-accordion-item {
    background: var(--wp--preset--color--custom-sub-background);
  }

  & .tutor-accordion-item-header {
    background: var(--wp--preset--color--custom-primary-dark);
    color: var(--wp--preset--color--contrast);

    &.is-active {
      background: var(--wp--preset--color--custom-primary-dark);
      color: var(--wp--preset--color--contrast);
    }

    &:after {
      color: var(--wp--preset--color--contrast);
    }

    &:hover {
      background: var(--wp--preset--color--custom-primary-dark);
      color: var(--wp--preset--color--contrast);
    }
  }

  & .tutor-course-content-list-item {
    background: var(--wp--preset--color--custom-sub-background);

    &:hover {
      background: var(--wp--preset--color--accent-1);
    }
  }

  & .tutor-course-details-page .tutor-course-details-tab .tutor-is-sticky {
    background: var(--wp--preset--color--custom-primary-dark);
  }

  & .tutor-nav:not(.tutor-nav-pills):not(.tutor-nav-tabs) {
    & .tutor-nav-link.is-active {
      border-bottom-color: var(--no60-tabs-active-color);
      color: var(--no60-tabs-active-color);
    }
    & .tutor-nav-link {
      color: var(--no60-tabs-inactive-color);
    }
  }

  & .tutor-alert.tutor-warning {
    background: var(--wp--preset--color--custom-sub-background);

    & .tutor-alert-text {
      color: var(--wp--preset--color--contrast);
    }
  }

  & .tutor-sidebar-card .tutor-card-footer .tutor-color-secondary {
    color: var(--wp--preset--color--contrast);
  }
  /* #endregion */

  /* #region Main Menu (Responsive Mobile) */
  & .wp-block-navigation__container.no60-mainmenu,
  & .wp-block-navigation__container.no60-mainmenu .wp-block-navigation-item {
    align-items: stretch !important;
  }

  @media (max-width: 599px) {
    & .wp-block-navigation__responsive-container-open {
      margin-left: auto;
      margin-right: 24px;
    }

    & .wp-block-navigation.no60-mainmenu {
      background-color: var(
        --wp--preset--color--custom-primary-dark
      ) !important;

      &[aria-label="Main Menu"] {
        min-height: 56px;
        background-image: url(image/LOGO_PKDC.png);
        background-repeat: no-repeat;
        background-size: 56px 33px;
        background-position: 24px 11px;
      }

      & .wp-block-navigation__responsive-container {
        background-color: #0008;
      }

      & .wp-block-navigation__responsive-close {
        background: var(--wp--preset--color--custom-primary-dark);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
      }

      & .wp-block-navigation__responsive-container-close {
        color: var(--wp--preset--color--contrast);
        position: absolute;
        right: 0;
        top: 0;
        padding: 20px 24px;
      }

      & .wp-block-navigation__responsive-container-content {
        padding-top: 0 !important;
        align-items: stretch !important;

        &::before {
          content: "Menu";
          display: block;
          color: white;
          font-size: 20px;
          padding: 20px 24px;
          text-align: left;
        }

        & .wp-block-navigation-item {
          align-items: stretch !important;
          position: relative;
        }
      }

      & .current-menu-item .wp-block-navigation-item__content {
        background-color: var(--wp--preset--color--accent-1) !important;
        color: white !important;
        font-weight: 600;

        &::before {
          content: "▶ ";
          margin-right: 8px;
          position: absolute;
          top: 50%;
          left: 24px;
          transform: translateY(-50%);
        }
      }

      & .wp-block-navigation-item .wp-block-navigation-item__content {
        outline-offset: 0;
      }
    }

    & .wp-block-navigation__responsive-container-content .no60-mainmenu {
      flex-direction: column;
      gap: 0;

      & .wp-block-navigation-item {
        flex: none;
        width: 100%;

        & .wp-block-navigation-item__content {
          padding: 16px;
          border-bottom: 1px solid #333;
        }

        &:not(.current-menu-item) {
          & .wp-block-navigation-item__content {
            &:focus:not(:focus-visible) {
              outline: none;
            }

            &:focus-visible {
              background-color: color-mix(
                in srgb,
                var(--wp--preset--color--accent-1) 32%,
                transparent
              ) !important;
            }
          }
        }
      }
    }

    &
      .no60-mainmenu
      .wp-block-navigation-item
      .wp-block-navigation-item__content {
      background: var(--wp--preset--color--custom-primary-dark);
    }
  }
  /* #endregion */

  /* #region Tutor Lesson Sidebar */
  & .tutor-course-single-sidebar-wrapper {
    background: var(--wp--preset--color--custom-primary-dark);

    & .tutor-course-topic-item.is-active a,
    & .tutor-accordion-item-header,
    & .tutor-course-topic-item a {
      background: var(--wp--preset--color--custom-primary-dark);
    }

    & .tutor-accordion-item-header {
      color: var(--wp--preset--color--contrast);

      &.is-active,
      &.is-active:after {
        color: var(--wp--preset--color--contrast);
      }
    }

    & .tutor-course-topic-item-icon,
    & .tutor-course-topic-item-title {
      color: var(--wp--preset--color--contrast);
    }

    & .tutor-course-topic-item.is-active .tutor-course-topic-item-icon,
    & .tutor-course-topic-item.is-active .tutor-course-topic-item-title {
      color: var(--wp--preset--color--contrast);
    }

    & .tutor-accordion-item-body {
      background: var(--wp--preset--color--custom-sub-background);
    }
  }
  & .tutor-course-single-sidebar-title {
    background: var(--wp--preset--color--custom-primary-dark);

    & .tutor-color-secondary {
      color: var(--wp--preset--color--contrast);
    }
  }
  @media (max-width: 1199.98px) {
    &
      .tutor-course-single-content-wrapper.tutor-course-single-sidebar-open
      .tutor-course-single-sidebar-wrapper {
      background: var(--wp--preset--color--custom-primary-dark);
    }
  }
  /* #endregion */

  /* #region Tutor Lesson Page */
  /*
  Tutor Lesson Content should be light mode
  */
  & #tutor-single-entry-content {
    background: white;
    color: var(--no60-text-color);

    /* #region Tutor Lesson Footer */
    & .tutor-course-topic-single-footer {
      background: var(--wp--preset--color--custom-sub-background);
      color: var(--wp--preset--color--contrast);
      border-color: color-mix(
        in srgb,
        var(--wp--preset--color--custom-border) 70%,
        transparent
      );

      & .tutor-single-course-content-prev .tutor-btn {
        background-color: var(--wp--preset--color--custom-sub-background);
        border: 1px solid var(--wp--preset--color--contrast);
        color: var(--wp--preset--color--contrast);
        &[disabled] {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }
      & .tutor-single-course-content-next .tutor-btn {
        background-color: var(--wp--preset--color--accent-1);
        color: var(--wp--preset--color--contrast);
        &[disabled] {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }
    }
    /* #endregion */
  }
  & .tutor-spotlight-mobile-progress-complete {
    background: var(--wp--preset--color--custom-sub-background);
  }
  /* #endregion */

  /* #region Tutor Login Modal */
  & .tutor-login-wrap {
    --tutor-body-color: var(--wp--preset--color--black);
    background: white;
    color: var(--tutor-body-color);
    box-shadow: none;
  }
  /* #endregion */

  /* #region Tutor Registration Page */
  & .n60-reg-logo {
    text-align: center;
    margin-bottom: 32px;

    & img {
      max-height: 100px;
      width: auto;
    }
  }
  & #tutor-registration-wrap {
    color: var(--wp--preset--color--black);
    padding-top: 0;
    box-shadow: none;
  }
  & .tutor-form-group select {
    width: 100%;
    box-shadow: none;
    background: #fff;
    border: 1px solid #dcdfe5;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
    font-size: 16px;
    transition: all 0.3s;
    display: block;
  }
  /* #endregion */

  /* #region Tutor Login Modal - Hide Text */
  /* Hide default "Hi, Welcome back!" text (logo injected via JavaScript) */
  & .tutor-login-modal .tutor-fs-4.tutor-fw-medium.tutor-color-black {
    display: none;
  }
  /* #endregion */

  /* #region Tutor Tooltips */
  & .tooltip-wrap .tooltip-txt {
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
  }
  /* #endregion */

  /* #region Course Details Content */
  /*
  The course information is hardcoded to use the secondary color,
  but it does not have enough contrast.
  Boost the contrast by using the contrast color instead of the secondary color.
  */
  & .tutor-course-details-content.tutor-toggle-more-content {
    --wp--preset--color--custom-secondary: var(--wp--preset--color--contrast);
  }
  /* #endregion */

  /* #region Credits */
  & .no60-credits__grid {
    @media (max-width: 959px) {
      /* Arrange as rows on mobile */
      grid-template-columns: 1fr;
    }
  }
  & .no60-credits__role {
    font-weight: bold;
    margin-bottom: 0;
  }
  & .no60-credits__list {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
  }

  /*
  WordPress admin bar
  */
  & #wpadminbar {
    background: #000;
    background-image: url(image/LOGO_PKDC.png);
    background-repeat: no-repeat;
    background-size: 40px 24px;
    background-position: 4px 4px;
  }
  & #wp-admin-bar-search,
  & #wp-admin-bar-wp-logo,
  & #wp-admin-bar-site-name {
    display: none;
  }
}