/* ==========================================================================
   Math 8 Sidebar (card style)
   Styles the markup created by sidebar_math.js
   ========================================================================== */

   .m8-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  /* Course title "card" */
  .m8-sidebar-course {
    display: block;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.85);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }
  
  /* Section label pill */
  .m8-sidebar-section-label {
    margin-top: 2px;
    font-size: 0.85rem;
    font-weight: 700;
    opacity: .75;
    padding-left: 4px;
  }
  
  /* List reset */
  .m8-sidebar-list,
  .m8-sidebar-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }
  
  /* Card link (Home links + unit page links) */
  .m8-sidebar-link,
  .m8-sidebar-unit-link,
  .m8-sidebar-unit-title {
    display: block;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.85);
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transition: transform .08s ease, box-shadow .08s ease;
  }
  
  /* Hover lift */
  .m8-sidebar-link:hover,
  .m8-sidebar-unit-link:hover,
  .m8-sidebar-unit-title:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
  }
  
  /* Active page */
  .m8-sidebar-link.active,
  .m8-sidebar-unit-link.active,
  .m8-sidebar-unit-title.active,
  .m8-sidebar-course.active {
    border-color: rgba(0,0,0,.22);
    background: rgba(255,255,255,.95);
    box-shadow: 0 12px 26px rgba(0,0,0,.10);
  }
  
  /* Accordion units as a “card container” */
  /* Each unit is ONE card container */
  .m8-sidebar-unit {
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.85);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    overflow: hidden;
  }

  /* more spacing between unit cards */
  .m8-sidebar-units {
    display: grid;
    gap: 14px;
  }

  
  /* Remove the default summary marker and make it feel like a card header */
  /* Unit header row (inside the card) */
  .m8-sidebar-unit-summary {
    list-style: none;
    margin: 0;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .m8-sidebar-unit-summary::-webkit-details-marker { display: none; }
  .m8-sidebar-unit-summary::marker { content: ""; } /* Firefox */


  .m8-sidebar-unit-summary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
  }

  /* Active/open unit header highlight */
  details.m8-sidebar-unit.active {
    border-color: rgba(0,0,0,.22);
    background: rgba(255,255,255,.95);
    box-shadow: 0 12px 26px rgba(0,0,0,.10);
  }


  .m8-sidebar-unit-summary::-webkit-details-marker {
    display: none;
  }
  
    /* Lessons sit INSIDE the unit card */
    .m8-sidebar-sublist {
      list-style: none;
      margin: 0;
      padding: 0 14px 12px 26px;  /* indent */
      border-top: 1px solid rgba(0,0,0,.08);
    }

    /* lesson links are simple rows */
    .m8-sidebar-sublist .m8-sidebar-link {
      display: block;
      padding: 8px 0;
      border: none;
      background: transparent;
      box-shadow: none;
      border-radius: 0;
      text-decoration: none;
      color: rgba(15, 23, 42, 0.80);
    }

    .m8-sidebar-sublist .m8-sidebar-link:hover {
      text-decoration: underline;
      transform: none;
      box-shadow: none;
    }

  
  .m8-sidebar-unit-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  
  .m8-sidebar-unit-titletext {
    font-weight: 700;
  }
    
  .m8-sidebar-empty {
    margin-top: 10px;
    padding-left: 10px;
    opacity: 0.7;
    font-size: 0.9rem;
  }

  .m8-course-header {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.85);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }
  
  .m8-course-title {
    font-weight: 700;
  }
  
    .m8-sidebar-unit-titlelink{
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    display: inline-block;
  }
  .m8-sidebar-unit-titlelink:hover{
    text-decoration: underline;
  }