/* DLP Custom Theme CSS */

/* Hide Canvas footer */
.ic-app-footer { display: none !important; }

/* Remove dashboard card color tint — shows custom course images at full clarity */
.ic-DashboardCard__header_hero {
  background-color: transparent !important;
  opacity: 1 !important;
}

/* Force card title text to brand red — overrides per-user rainbow card color inline styles */
.ic-DashboardCard__header-title span {
  color: #CF5757 !important;
}

 /* All selectors are scoped under #cn-course-nav so nothing
       leaks into the rest of Canvas. */

    #cn-course-nav .cn-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 20px;
      margin: 24px 0;
      padding: 0;
      list-style: none;
    }

    #cn-course-nav .cn-card {
      position: relative;
      display: block;
      aspect-ratio: 4 / 3;            /* consistent card shape */
      border-radius: 14px;
      overflow: hidden;
      text-decoration: none;          /* it's a link, but no underline */
      background-size: cover;
      background-position: center;
      background-color: #2b3a55;      /* fallback if an image is missing */
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
      transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    #cn-course-nav .cn-card:hover {
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
      transform: translateY(-2px);
    }

    /* Title bar sitting at the bottom of the base image */
    #cn-course-nav .cn-title {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 40px 16px 16px;
      color: #ffffff;
      font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      line-height: 1.25;
      /* gradient keeps text readable over any image */
      background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
    }

    /* The "Start" overlay that fades in on hover.
       Semi-transparent, so the module image shows through. */
    #cn-course-nav .cn-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      Semi-transparent scrim = the "see-through second image" look.
      background-image: url('https://register.dreamlearnpitch.org/wp-content/uploads/go.png');
      background-size: cover; background-position: center;

      opacity: 0;
      transition: opacity 0.5s ease;   /* <-- your 0.5s transition */
    }

    /* Show overlay on hover AND on keyboard focus (accessibility) */
    #cn-course-nav .cn-card:hover .cn-overlay,
    #cn-course-nav .cn-card:focus-visible .cn-overlay {
      opacity: 1;
    }

    #cn-course-nav .cn-card:focus-visible {
      outline: 3px solid #ffd54a;
      outline-offset: 2px;
    }

    /* The "Start" label. Delete this <span> if your overlay image
       already includes the word "Start". */
    #cn-course-nav .cn-start {
      padding: 10px 26px;
      border: 2px solid #ffffff;
      border-radius: 999px;
      color: #ffffff;
      font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* Respect users who ask for reduced motion */
    @media (prefers-reduced-motion: reduce) {
      #cn-course-nav .cn-card,
      #cn-course-nav .cn-overlay {
        transition: none;
      }
    }

/* Login: breathing room between the "Stay signed in" / "Forgot Password?"
   block and the Log In button. Canvas ships .ic-Login__actions as a flex row
   with no gap, so the button sits flush against the text.
   Gated above 360px - at 320px the login box is narrow enough that any gap
   pushes "Forgot Password?" onto a second line. Verified 320/340/360/375/1200. */
@media (min-width: 360px) {
  .ic-Login__actions { gap: 16px; }
}