/* The Sharp Leader: Tutor LMS 4.x restyle.
   Loaded only when Tutor LMS is active (see functions.php). It does not replace Tutor's templates.
   1. Sets Tutor's own design tokens (--tutor-brand-*, text, button, border) to the AI Sharp palette.
      Tutor's CSS reads these everywhere, so most of the recolour happens here.
   2. Adds a few small rules for the course page, lesson screen and dashboard using Tutor's real class names
      (checked against Tutor 4.1.3). If Tutor renames a class in a later version, the rule is just ignored.

   Brand: teal #2bd9c9 (decorative), ink teal #0b7a6f (text + buttons, 5.3:1 on white), amber #f2a63d, text #0a0d12.
   Fonts: Space Grotesk for headings, Inter for body. */

/* ---------- 1. Tutor design tokens ---------- */
:root,
body{
  /* Brand scale: 600 is the main brand colour. Tutor derives buttons, links, tabs and active states from these. */
  --tutor-brand-50:#f0fbf9;
  --tutor-brand-100:#e3f7f4;
  --tutor-brand-200:#d2f1ed;
  --tutor-brand-300:#a9e4dd;
  --tutor-brand-400:#6fcfc5;
  --tutor-brand-450:#2bd9c9;
  --tutor-brand-500:#14a396;
  --tutor-brand-600:#0b7a6f;
  --tutor-brand-700:#09655c;
  --tutor-brand-800:#07514a;
  --tutor-brand-900:#063f3a;
  --tutor-brand-950:#04302c;


  /* Legacy tokens: the course page, login form and dashboard still read these (tutor.min.css) */
  --tutor-color-primary:#0b7a6f;
  --tutor-color-primary-rgb:11,122,111;
  --tutor-color-primary-hover:#09655c;
  --tutor-color-primary-hover-rgb:9,101,92;
  --tutor-color-secondary:#3b404c;
  --tutor-color-success:#0b7a6f;
  --tutor-color-success-rgb:11,122,111;
  --tutor-body-color:#3b404c;
  --tutor-border-color:rgba(10,13,18,.12);
  --tutor-color-black:#0a0d12;

  /* Text */
  --tutor-text-primary:#0a0d12;
  --tutor-text-secondary:#3b404c;
  --tutor-text-subdued:#596071;
  --tutor-text-brand:#0b7a6f;
  --tutor-text-brand-hover:#09655c;
  --tutor-text-success:#0b7a6f;
  --tutor-icon-brand:#0b7a6f;
  --tutor-icon-success-primary:#0b7a6f;
  --tutor-icon-success-secondary:#14a396;
  --tutor-icon-secondary:#596071;

  /* Surfaces and borders */
  --tutor-surface-base:#f5f7fa;
  --tutor-border-idle:rgba(10,13,18,.10);
  --tutor-border-idle2:rgba(10,13,18,.10);
  --tutor-border-hover:rgba(10,13,18,.22);
  --tutor-border-brand:#0b7a6f;

  /* Success states (completed lessons, ticks) use the brand teal, not Tutor's green */
  --tutor-actions-success-primary:#0b7a6f;
  --tutor-actions-success-secondary:#a9e4dd;
  --tutor-actions-success-tertiary:#e3f7f4;
  --tutor-surface-success:#e3f7f4;
  --tutor-button-success:#0b7a6f;
  --tutor-button-success-hover:#09655c;
  --tutor-button-success-focused:#0b7a6f;

  /* Buttons: pill shaped like the theme's own buttons */
  --tutor-button-radius:999px;
  --tutor-button-font-weight:600;

  /* Fonts */
  --tutor-font-family-body:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tutor-font-family-heading:'Space Grotesk','Inter',system-ui,sans-serif;
}
html{background-color:#f5f7fa}

/* ---------- 2. Fonts ---------- */
.tutor-learning-page,
.tutor-wrap,
.tutor-dashboard,
.tutor-frontend .tutor-container{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.tutor-learning-header-title,
.tutor-learning-nav-header-title,
.tutor-course-details-title,
.tutor-course-content-title,
.tutor-accordion-item-header,
.tutor-sidebar-card h1,.tutor-sidebar-card h2,.tutor-sidebar-card h3,.tutor-sidebar-card h4,
.tutor-lesson-wrapper h1,.tutor-lesson-wrapper h2,.tutor-lesson-wrapper h3,.tutor-lesson-wrapper h4,
.tutor-dashboard h1,.tutor-dashboard h2,.tutor-dashboard h3{
  font-family:'Space Grotesk',system-ui,sans-serif;
  letter-spacing:-.01em;
}

/* ---------- 3. Buttons ---------- */
/* Primary buttons are solid ink teal with white text via --tutor-button-primary (brand-600).
   These rules add a soft lift and keep the text white and readable. */
.tutor-btn-primary,
a.tutor-btn-primary,
button.tutor-btn-primary{color:#fff}
.tutor-btn-primary:hover:not(:disabled):not(.disabled){color:#fff;transform:translateY(-1px)}
.tutor-btn-primary:not(.tutor-btn-ghost){box-shadow:0 10px 24px -14px rgba(11,122,111,.7)}
.tutor-btn-primary:disabled,.tutor-btn-primary.disabled{box-shadow:none;color:#fff}
.tutor-btn-outline,.tutor-btn-secondary{color:#0a0d12}
.tutor-btn-ghost{color:#0a0d12}
.tutor-btn-ghost:hover:not(:disabled):not(.disabled){color:#0b7a6f}
.tutor-sidebar-card .tutor-btn-lg{padding-block:14px;font-size:1rem}

/* ---------- 4. Links (inside Tutor content only, never buttons) ---------- */
.tutor-frontend .tutor-lesson-wrapper a:not(.tutor-btn),
.tutor-frontend .tutor-course-details-page a:not(.tutor-btn):not(.tutor-iconic-btn){color:#0b7a6f}
.tutor-frontend .tutor-lesson-wrapper a:not(.tutor-btn):hover{color:#09655c}

/* ---------- 5. Course page ---------- */
.tutor-course-details-title{
  font-size:clamp(1.9rem,4.2vw,2.9rem);
  font-weight:700;
  line-height:1.12;
  color:#0a0d12;
}
.tutor-course-content-title{font-size:1.4rem;font-weight:700;color:#0a0d12}
.tutor-card.tutor-sidebar-card,
.tutor-sidebar-card{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(10,13,18,.10);
  border-radius:18px;
  box-shadow:0 20px 50px -24px rgba(10,13,18,.22);
}
.tutor-sidebar-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(100deg,#2bd9c9,#f2a63d);
}
.tutor-sidebar-card .tutor-card-body{padding-top:28px}
.tutor-sidebar-card .tutor-card-footer{background:#f5f7fa}
.tutor-course-sidebar-card-pricing .tutor-fs-4{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:2rem;
  font-weight:700;
  color:#0a0d12;
}
.tutor-sidebar-card .tutor-color-secondary,
.tutor-sidebar-card .tutor-fs-6{color:#3b404c}
.tutor-sidebar-card [class*="tutor-icon-"]{color:#0b7a6f}

/* Course content accordion */
.tutor-accordion-item{
  background:#fff;
  border:1px solid rgba(10,13,18,.10);
  border-radius:12px;
  margin-bottom:12px;
  overflow:hidden;
}
.tutor-accordion-item-header{
  font-size:1.02rem;
  font-weight:600;
  color:#0a0d12;
}
.tutor-accordion-item-header.is-active{
  background:rgba(43,217,201,.12);
  color:#0a0d12;
}
.tutor-accordion-item-header::after,
.tutor-accordion-item-header [class*="tutor-icon-"]{color:#0b7a6f}
.tutor-course-content-list-item{border-top:1px solid rgba(10,13,18,.08)}
.tutor-course-content-list-item-icon{color:#0b7a6f}
.tutor-course-content-list-item-title{color:#0a0d12;font-weight:500;font-size:.98rem}
/* Lock and preview icons were grey: use the brand ink so they read as part of the page */
.tutor-course-content-list-item-status,
.tutor-course-content-list-item-status.tutor-color-muted,
.tutor-course-content-list-item-status.tutor-icon-lock-line{color:#0b7a6f}
.tutor-course-content-list-item-duration{color:#596071}

/* Space above the title block (the theme header is no longer followed by Tutor's own spacing) */
.tutor-full-width-course-top{padding-top:clamp(24px,4vw,48px)}

/* Wishlist / Share links on the course header */
.tutor-course-wishlist-btn,
.tutor-course-share-btn{color:#0b7a6f;font-weight:500}

/* Tabs */
.tutor-tab-item.is-active,
.tutor-nav-link.is-active{color:#0b7a6f;border-color:#0b7a6f}

/* ---------- 6. Lesson screen ---------- */
.tutor-learning-header-title{font-size:1.05rem;font-weight:600;color:#0a0d12}
.tutor-learning-header-inner{border:1px solid rgba(10,13,18,.10)}

/* Progress bar: brand gradient fill, with a clear label */
.tutor-progress-bar{--tutor-progress-height:8px;background-color:rgba(10,13,18,.10);box-shadow:none}
.tutor-progress-bar-fill{background:linear-gradient(100deg,#2bd9c9,#f2a63d)}
.tutor-progress-bar-fill::before{display:none}
.tutor-learning-progress-text{color:#0a0d12;font-weight:600}

/* Left sidebar */
.tutor-learning-sidebar-curriculum{border:1px solid rgba(10,13,18,.10)}
.tutor-learning-nav-header-title{font-weight:600;color:#0a0d12;font-size:.95rem}
.tutor-learning-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px 8px 16px;
  margin-inline:8px 0;
  border-radius:8px;
  border-left:3px solid transparent;
  color:#3b404c;
  font-size:.92rem;
}
.tutor-learning-nav-item:hover{background:rgba(10,13,18,.045);color:#0a0d12}
.tutor-learning-nav-item.active{
  background:rgba(43,217,201,.16);
  border-left-color:#0b7a6f;
  color:#0a0d12;
  font-weight:600;
}
.tutor-learning-nav-item svg{color:#0b7a6f;flex-shrink:0}
.tutor-learning-nav-item .tutor-text-subdued{color:#596071;font-weight:400}

/* Bottom bar with Previous / Next */
.tutor-learning-area-footer .tutor-btn-ghost,
.tutor-learning-area-footer .tutor-btn-outline{
  background:#fff;
  border:1px solid rgba(10,13,18,.18);
  color:#0a0d12;
}
.tutor-learning-area-footer .tutor-btn-ghost:hover:not(.disabled){border-color:#0b7a6f;color:#0b7a6f;background:rgba(43,217,201,.10)}
.tutor-learning-area-footer .tutor-btn-ghost.disabled{opacity:.55}

/* "Mark as complete" */
.tutor-lesson-content .tutor-mark-as-complete-button{color:#0b7a6f;font-weight:600}

/* Lesson content card: readable text and room to breathe */
.tutor-learning-area-container{max-width:860px}
.tutor-lesson-content{background:#fff;border:1px solid rgba(10,13,18,.10);border-radius:12px;overflow:hidden}
.tutor-lesson-video-wrapper{background:#0a0d12}
.tutor-lesson-wrapper{
  font-size:1.0625rem;
  line-height:1.7;
  color:#3b404c;
}
.tutor-lesson-wrapper h1{font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.15;margin-top:0}
.tutor-lesson-wrapper h2{font-size:clamp(1.45rem,3vw,1.8rem);line-height:1.2;margin:1.6em 0 .5em}
.tutor-lesson-wrapper h3{font-size:1.25rem;line-height:1.25;margin:1.4em 0 .5em}
.tutor-lesson-wrapper h4{font-size:1.05rem;line-height:1.3}
.tutor-lesson-wrapper > :first-child,
.tutor-lesson-wrapper .lesson-section:first-child > :first-child{margin-top:0}
.tutor-lesson-wrapper p,.tutor-lesson-wrapper li{font-size:inherit;line-height:inherit}
/* Our own lesson blocks: Tutor already pads the content area, so don't double the padding */
.tutor-lesson-wrapper .lesson-section{padding:clamp(20px,3vw,32px) 0}
.tutor-lesson-wrapper .wrap,
.tutor-lesson-wrapper .narrow{max-width:none;padding-left:0;padding-right:0}
.tutor-lesson-wrapper img,
.tutor-lesson-wrapper table{max-width:100%}
/* Lists made with .dots draw their own bullet; stop Tutor adding a second one */
.tutor-lesson-wrapper ul.dots{list-style:none;padding-left:0}
.tutor-lesson-wrapper ul.dots li::marker{content:""}
.tutor-lesson-wrapper .prompt-card,
.tutor-lesson-wrapper .worksheet,
.tutor-lesson-wrapper .tabs{margin-block:1.2em}
/* Wide tables scroll sideways instead of breaking the layout */
.tutor-lesson-wrapper .ws-table-wrap,
.tutor-lesson-wrapper .table-wrap{overflow-x:auto}

/* ---------- 7. Student dashboard and login form ---------- */
.tutor-dashboard{padding-top:clamp(20px,3vw,40px)}
.tutor-dashboard h1,.tutor-dashboard h2{color:#0a0d12}
.tutor-form-control:focus,
.tutor-form-check-input:focus-visible{border-color:#0b7a6f;box-shadow:0 0 0 3px rgba(43,217,201,.30);outline:none}
.tutor-form-check-input:checked{background-color:#0b7a6f;border-color:#0b7a6f}

/* ---------- 8. Keyboard focus ---------- */
.tutor-learning-page a:focus-visible,
.tutor-learning-page button:focus-visible,
.tutor-learning-nav-header:focus-visible,
.tutor-btn:focus-visible{outline:3px solid #0b7a6f;outline-offset:2px}

/* ---------- 9. Layout niceties ---------- */
/* The theme's sticky header would sit on top of Tutor's own top bar. Let it scroll away on learning screens. */
body.single-lesson .site-header,
body.single-tutor_quiz .site-header,
body.single-tutor_assignments .site-header{position:static}

@media (max-width:767px){
  .tutor-lesson-wrapper{font-size:1rem}
  .tutor-sidebar-card .tutor-card-body{padding-top:24px}
  .tutor-course-details-title{font-size:1.8rem}
}