/* =========================
   RevealJS / Quarto custom.css
   Borderless colored cards + utilities
   ========================= */

/* --- General utilities --- */

.font-small { font-size: 1.2rem; }

figure figcaption { text-align: center; }

.tight ul { margin: 0.2em 0 0 1.1em; }
.tight li { margin: 0.2em 0; }


.reveal p code,
.reveal li code,
.reveal td code {
  color: #330072 !important;
  background: #f3f4f6 !important;
  padding: 0.08em 0.28em;
  border-radius: 0.25em;
}


/* --- Existing elements you had (kept, but cleaned) --- */

.box {
  margin-top: 10px;
  margin-right: 10px;
  padding: 10px;
  font-size: 26px;
  background-color: #E6E6E6;
  border: none;                 /* removed */
  border-radius: 14px;          /* added */
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

.info-box {
  margin-top: 10px;
  margin-right: 10px;
  padding: 12px 12px 12px 18px;
  background-color: rgba(223,152,225,0.35);
  border: none;                 /* removed */
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

/* Font Awesome list reset */
.fa-ul {
  list-style-type: none !important;
  margin-left: var(--fa-li-margin, 2.5em) !important;
  padding-left: 0 !important;
}

/* Circular number marker */
.circle {
  border-radius: 50%;
  width: 1em;
  line-height: 1em;
  padding: 3px;
  display: inline-block;
  background: black;
  color: white;
  text-align: center;
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
}

.story {
  background-color: black;
  color: white;
  font-size: 0.3em;
  padding: 10px;
  font-family: 'Roboto Condensed', sans-serif;
  vertical-align: middle;
  border-radius: 12px;
}

/* =========================
   Semantic box-* library
   Use: ::: {.box-note} ... :::
   Or:  ::: {.box-note .soft-accent .soft-blue} ... :::
   ========================= */

.box-note, .box-def, .box-example, .box-warning, .box-pitfall,
.box-theorem, .box-proof, .box-code, .box-checklist, .box-activity,
.box-quiz, .box-key, .box-summary, .box-reading {
  padding: 18px;
  border-radius: 18px;
  border: none;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

on     { background: rgba(76,139,245,0.16); }   /* general info */
.box-def       { background: rgba(100,116,139,0.14); }  /* definitions */
.box-example   { background: rgba(20,184,166,0.14); }   /* examples */
.box-warning   { background: rgba(220, 38, 38,0.14); }  /* warnings */
.box-pitfall   { background: rgba(245,158, 11,0.14); }  /* common mistakes */
.box-theorem   { background: rgba(168, 85,247,0.14); }  /* theorem/claim */
.box-proof     { background: rgba(168, 85,247,0.10); }  /* proof/sketch */
.box-code      { background: rgba(  0,  0,  0,0.06); }  /* code notes */
.box-checklist { background: rgba(46,164, 79,0.12); }   /* checklist */
.box-activity  { background: rgba(197,154, 60,0.14); }  /* in-class task */
.box-quiz      { background: rgba(179, 122, 123, 0.12); }  /* quick check 🧠 */
.box-key       { background: rgba(  0, 72,120,0.14); }  /* key takeaway */
.box-summary   { background: rgba(120,110,100,0.12); }  /* wrap-up */
.box-reading   { background: rgba(190,220,235,0.18); }  /* reading/homework */

/* Nice default spacing for lists/headings inside boxes */
.box-note ul, .box-def ul, .box-example ul, .box-warning ul, .box-pitfall ul,
.box-theorem ul, .box-proof ul, .box-code ul, .box-checklist ul, .box-activity ul,
.box-quiz ul, .box-key ul, .box-summary ul, .box-reading ul {
  margin: 0.2em 0 0 1.1em;
}
.box-note li, .box-def li, .box-example li, .box-warning li, .box-pitfall li,
.box-theorem li, .box-proof li, .box-code li, .box-checklist li, .box-activity li,
.box-quiz li, .box-key li, .box-summary li, .box-reading li {
  margin: 0.2em 0;
}
.box-note h3, .box-def h3, .box-example h3, .box-warning h3, .box-pitfall h3,
.box-theorem h3, .box-proof h3, .box-code h3, .box-checklist h3, .box-activity h3,
.box-quiz h3, .box-key h3, .box-summary h3, .box-reading h3 {
  margin-top: 0;
}

/* Optional: tiny label header that auto-fills per box type */
.box-note::before,
.box-def::before,
.box-example::before,
.box-warning::before,
.box-pitfall::before,
.box-activity::before,
.box-quiz::before,
.box-summary::before,
.box-reading::before,
.box-question::before
 {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  background: rgba(200, 175, 175, 0.1);
}

.box-note::before    { content: "NOTE"; }
.box-def::before     { content: "DEFINITION"; }
.box-example::before { content: "EXAMPLE"; }
.box-warning::before { content: "WARNING"; }
.box-pitfall::before { content: "PITFALL"; }
.box-activity::before{ content: "QUESTION"; }
.box-quiz::before    { content: "NOTE"; }
.box-summary::before { content: "SUMMARY"; }
.box-reading::before { content: "READING"; }
.box-question::before { content: "QUESTION"; }

/* =========================
   Borderless card system
   Use: ::: {.card .card-blue} ... :::
   ========================= */

.card,
.box-agenda, .box-edi, .box-style {
  padding: 18px;
  border-radius: 18px;
  border: none; /* key change */
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);        /* looks nice on gradients */
  -webkit-backdrop-filter: blur(2px);
}

.card ul,
.box-agenda ul, .box-edi ul, .box-style ul {
  margin: 0.2em 0 0 1.1em;
}

.card li,
.box-agenda li, .box-edi li, .box-style li {
  margin: 0.2em 0;
}

.card h3, .box-agenda h3, .box-edi h3, .box-style h3 {
  margin-top: 0;
}

/* --- Your original three boxes (borderless now) --- */
.box-agenda { background: rgba(76,139,245,0.18); }
.box-edi    { background: rgba(46,164,79,0.18); }
.box-style  { background: rgba(245,158,11,0.18); }
.box-white  { background: rgba(253, 252, 252, 0.18); }

/* --- More general-purpose color variants --- */
.card-blue    { background: rgba(76,139,245,0.18); }
.card-green   { background: rgba(46,164,79,0.18); }
.card-amber   { background: rgba(245,158,11,0.18); }
.card-red     { background: rgba(220, 38, 38, 0.16); }
.card-purple  { background: rgba(168, 85,247, 0.16); }
.card-teal    { background: rgba( 20,184,166, 0.16); }
.card-slate   { background: rgba(100,116,139, 0.16); }
.card-pink    { background: rgba(236, 72,153, 0.14); }

/* =========================
   MacEwan-style palette (borderless)
   ========================= */

.macewan-blue  { background: rgba(  0, 72,120, 0.16); }
.macewan-gold  { background: rgba(197,154, 60, 0.18); }
.macewan-ice   { background: rgba(190,220,235, 0.20); }
.macewan-stone { background: rgba(120,110,100, 0.16); }
.macewan-mint  { background: rgba( 75,165,150, 0.16); }

/* =========================
   Optional: “soft bar” accent without borders
   Use: ::: {.card .card-teal .soft-accent .soft-teal} ... :::
   ========================= */

.soft-accent { position: relative; padding-left: 22px; }

.soft-accent::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 6px;
  border-radius: 6px;
  opacity: 0.9;
}

.soft-blue::before   { background: rgba(76,139,245,0.95); }
.soft-green::before  { background: rgba(46,164,79,0.95); }
.soft-amber::before  { background: rgba(245,158,11,0.95); }
.soft-red::before    { background: rgba(220,38,38,0.95); }
.soft-teal::before   { background: rgba(20,184,166,0.95); }
.soft-purple::before { background: rgba(168,85,247,0.95); }

.soft-macewan-blue::before { background: rgba(0,72,120,0.95); }
.soft-macewan-gold::before { background: rgba(197,154,60,0.95); }
.soft-macewan-mint::before { background: rgba(75,165,150,0.95); }


/* Banner styling */
.banner {
  background-color: #004080;   /* Banner background color */
  color: white;                /* Text color */
  padding: 10px 20px;           /* Space inside banner */
  font-size: 1.5em;             /* Larger text */
  font-weight: bold;
  border-radius: 5px;           /* Rounded corners */
  text-align: center;           /* Center text */
  margin-bottom: 20px;          /* Space below banner */
}