/* --------------------------------------------------------------------------
   15. RPED ENROLLMENT NOTICE
   Paste at the end of the Custom CSS file.
   Styles the banner and dialog that the Custom JS (section 6) injects on
   RPED pages. Harmless if that JS block is not installed.

   USD red is used here instead of Signal Flare so the catalog notice matches
   the red callout on the "Getting Your Credit from USD" page in the courses.
   White text on #D50032 passes WCAG AA (about 5.4:1).
   -------------------------------------------------------------------------- */

:root {
  --usd-red: #d50032;
  --usd-red-dark: #8f0021;
}

/* Banner */
#rped-notice-banner {
  background-color: var(--usd-red);
  border-bottom: 3px solid var(--usd-red-dark);
  color: #fff;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

#rped-notice-banner p {
  margin: 0;
  color: #fff;
}

#rped-notice-banner a,
#rped-notice-banner a:link,
#rped-notice-banner a:visited {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

#rped-notice-banner a:hover,
#rped-notice-banner a:focus {
  color: #fff;
  text-decoration-thickness: 3px;
}

/* Dialog */
#rped-notice-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;            /* above the Compie button at 99999 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: rgba(6, 21, 40, 0.6);
}

#rped-notice-modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
  background-color: var(--card);
  border-top: 8px solid var(--usd-red);
  border-radius: var(--radius);
  font-family: var(--font-body);
  color: var(--ink);
}

#rped-notice-modal h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
}

#rped-notice-modal p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.rped-notice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.rped-notice-cancel {
  padding: 8px 12px;
  background: none;
  border: none;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}

.rped-notice-cancel:hover,
.rped-notice-cancel:focus {
  color: var(--navy);
}

.rped-notice-cancel:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Stop the page scrolling behind the dialog */
body.rped-notice-open { overflow: hidden; }

@media (max-width: 600px) {
  #rped-notice-banner { font-size: 15px; }

  #rped-notice-modal { padding: 18px; }

  .rped-notice-actions { flex-direction: column; align-items: stretch; }

  #rped-notice-modal .btn { width: 100%; text-align: center; }
}