@import url("https://use.typekit.net/sfu6mtx.css");

:root {
  --font-sans: "barlow", sans-serif;
  --lightGreen: #f7fef6;
  --lightPurple: #f4f4f7;
  --purple: #2b2e7e;
  --fern: #4b6e5f;
}
.mpcs-classroom a.navbar-brand.site-branding span {
  text-indent: -9999px;
  display: block;
  background-image: url("/wp-content/uploads/2026/02/the-herb-school-logo.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 295px;
  height: 57px;
}
#mpcs-navbar,
#mpcs-sidebar-navbar {
  background-color: #fff;
  &.navbar {
    background-color: #fff;
    padding: 1rem 0;
    height: auto;
    .btn-link {
      background-color: var(--fern);
      color: #fff;
      &:hover {
        background-color: var(--purple);
      }
    }
    .btn {
      transition-all: 0.3s;
      border-radius: 1px;
      &.nav-back {
        color: var(--fern);
        position: relative;
        top: 4px;
        &:hover {
          color: var(--purple);
        }
      }
    }
  }
}
.entry {
  .mpcs-course-filter button.btn {
    border-color: var(--purple);
    color: var(--purple);
  }
}
.mpcs-cards {
  .card-title {
    h2 {
      a {
        color: var(--purple);
      }
    }
  }
}
.mpcs-classroom {
  font-family: var(--font-sans);
  .mpcs-cards .card-footer .course-author a {
    color: var(--green);
  }
  .dropdown {
    a {
      color: var(--purple);
    }
  }
  &.post-type-archive {
    .entry-content {
      margin: 0;
      padding: 0 !important;
      background-image: url("/wp-content/uploads/2026/02/lilac-leaves-graphic.webp");
      background-repeat: no-repeat;
      background-size: 425px 460px;
      background-position: 75% 100%;
      background-color: var(--lightPurple);
      .container {
        padding: 2rem 0;
      }
    }
  }
  #mpcs-sidebar {
    background: var(--lightGreen);
    background-image: url("/wp-content/uploads/2026/02/green-leaf-graphic.webp");
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: 70% 85%;
  }
  #mpcs-main {
    background-image: url("/wp-content/uploads/2026/02/lilac-leaves-graphic.webp");
    background-repeat: no-repeat;
    background-size: 425px 460px;
    background-position: 75% 100%;
    background-color: var(--lightPurple);
  }
  #mpcs-navbar
    #mpcs-lesson-navigation
    a:not(#mpcs-classroom-previous-lesson-link) {
    background: var(--purple);
  }
  #mpcs-sidebar .mpcs-sidebar-wrapper .course-progress {
    background: var(--lightGreen);
  }
  h2 {
    color: var(--purple);
    font-weight: 400;
    text-transform: uppercase;
  }
  .course-progress .user-progress {
    background: var(--fern);
  }
  #mpcs-main #bookmark {
    background: var(--lightGreen);
  }
  #mpcs-main #bookmark a {
    background: var(--fern);
    color: #fff;
  }
  .mpcs-section-header {
    border-bottom: 1px solid var(--purple);
    .mpcs-section-title {
      background: #fff;
      .mpcs-section-title-text {
        color: var(--purple);
        font-weight: 500;
      }
    }
  }
  h1 {
    color: var(--purple);
    font-weight: 400;
  }
  .mpcs-lesson .mpcs-lesson-link {
    color: var(--purple);
  }
  .mpcs-sidebar-resources,
  .mpcs-sidebar-grades {
    background: var(--purple);
    a {
      color: #fff;
    }
  }
  .btn-green {
    background: var(--fern);
  }
  .mpcs-lesson {
    &.current {
      .mpcs-lesson-row-link {
        background: var(--lightGreen);
      }
    }
  }
}
.mpcs-course-with-accordion .entry #mpcs-main .mpcs-section-header {
  border-bottom: 1px solid var(--purple);
  &:after {
    border-top: 6px solid var(--purple);
  }
  &.active {
    &:after {
      border-bottom: 6px solid var(--purple);
      border-top: none;
    }
  }
}
.mpcs-course-filter .input-group input[type="text"].form-input {
  border-color: var(--purple);
}

.mpcs-cards .card-footer .course-author a {
  color: var(--green);
}
/* Single Course Page Styles */

.single-mpcs-course {
  #mpcs-navbar
    .navbar-section
    button.dropdown-toggle:not(#mpcs-classroom-previous-lesson-link) {
    color: var(--green);
  }
  .mpcs-sidebar-resources,
  .mpcs-sidebar-grades {
    background: #fff;
    border-bottom: 1px solid var(--purple);
  }
  .mpcs-lesson .btn {
    border-radius: 1px;
    border: 1px solid var(--purple);
    color: var(--purple);
    &:hover {
      background: var(--purple);
      color: #fff;
    }
    &.is-purple {
      background: var(--purple);
      color: #fff;
      &:hover {
        background: var(--fern);
        border: 1px solid var(--fern);
      }
    }
  }
}
#mpcs-sidebar .mpcs-sidebar-content ul {
  li {
    background: #fff;
    border-bottom: 1px solid var(--purple);
    a {
      color: var(--purple);
    }
  }
}
#mpcs-main {
  h3 {
    &.wp-block-heading {
      color:var(--purple);
    }
  }
}
body {
  &.single-memberpressproduct {
    background:var(--lightPurple);
  }
}
main.memberpressproduct {
  padding:3rem 0;
  h1 {
    color:var(--purple);
  }
  .mepr-payment-methods-wrapper {
    padding:2rem 0 0;
  }
  .mepr_price {
    font-size:1.75rem;
    color:var(--fern);
    font-weight:500;
    font-family: var(--font-sans);
  }
  .mp-form-row label {
    color:var(--purple);
  }
}
  .mp_wrapper {
    input[type=text], input[type=url],  input[type=email],  input[type=tel],  input[type=number], input[type=password]  {
      border-radius:1px;
      background:#fff;
      border:none;
      border-bottom:1px solid var(--purple);
      &:focus-visible {
        border:1px solid var(--purple);
      }
    }
   
    select {
      border-radius:1px;
      background:#fff;
      border:none;
      border-bottom:1px solid var(--purple);
    }
  }

  .page-id-174, .page-id-186, .page-id-187 {
     background:var(--lightPurple);
     .page-content {
      padding-bottom:2rem;
      p {
        text-align:center;
      }
     }
    h1 {
      color:var(--purple);
    }
    .mp-form-row label {
      color:var(--purple);
    }
      #mepr-account-welcome-message {
        p {
          text-align:left;
        }
      }
    footer {
      border-top: 14px solid #bde3a9;
    }
  }
  .page-id-186 {
    .page-content {
       padding-bottom:6rem;
    }
  }
  .mepr-account-form {
    /* max-width:780px;
    margin:0 auto; */
  }
  #mepr-account-nav ul {
    margin-bottom:2rem;
    li {
      position:relative;
      &:after {
        content:'';
        position:absolute;
        right:2px;
        height:16px;
        width:2px;
        background:var(--purple);
        top:50%;
        transform:translateY(-50%);
      }
      &:last-child {
        &:after {
           content:none;
        }
      }
      &.mepr-active-nav-tab {
        a {
          text-decoration:underline;
        }
      }
      a {
         color:var(--purple);
      }
    }
  }

    .mpcs-course-list {
      .grid {
        a {
          color:var(--purple);
          font-weight:bold;
        }
      }
    }  

    .page-header .entry-title {
      text-align:center;
    }
    .mp_wrapper {
      max-width:780px;
      margin:0 auto;
       .mepr-account-form .mepr-submit {
            font-size: 16px;
    font-weight: 500;
    border-radius:1px;
    background:var(--purple);
    border:2px solid var(--purple);
    color:#fff;
    padding:.5rem 2rem;
    &:hover {
      background:#60629D;
      border:2px solid #60629D;
    }
       }
    }
.mp-form-submit, .mp_login_form {
  [type=button], [type=submit], button {
    font-size: 16px;
    font-weight: 500;
    border-radius:1px;
    background:var(--purple);
    border:2px solid var(--purple);
    color:#fff;
    padding:.5rem 2rem;
    &:hover {
      background:#60629D;
      border:2px solid #60629D;
    }
  }
}
  .wp-block-buttons .wp-block-button__link {
        font-size: 16px;
    font-weight: 500;
    border-radius:1px;
    background:var(--purple);
    border:2px solid var(--purple);
    color:#fff;
    padding:.5rem 2rem;
    &:hover {
      background:#60629D;
      border:2px solid #60629D;
    }
  }
  .chap-message {
    display:flex;
    img {
          margin: 0 0.25rem;
    }
  }
  .single-mpcs-course .mpcs-course-curriculum > h1,
.single-mpcs-course .mpcs-course-curriculum > h2 {
  display: none !important;
}