/*
 * ============================================================
 * MICA BDes Canvas CSS Overrides
 * Scope: Canvas LMS Rich Content Editor (RCE) page content
 * Compatibility: Canvas Theme Editor → CSS Overrides field
 * Last Updated: 2026-04-13
 * Accessibility: WCAG 2.1 AA compliant
 * ============================================================
 *
 * MICA Brand Colors
 *   --mica-magenta:   #e10098  (primary accent)
 *   --mica-dark:      #273540  (dark text / secondary)
 *   --mica-black:     #000000  (header bars, banners)
 *   --mica-white:     #ffffff
 *   --mica-gray-lt:   #f5f5f5  (subtle backgrounds)
 *   --mica-gray-mid:  #a7a8aa  (borders, muted text)
 *   --mica-blue-lt:   #c2e0f4  (assignment planner highlight)
 *
 * USAGE QUICK REFERENCE
 *   Tabs:        <div class="mica-tabs"> … </div>
 *   Accordion:   <div class="mica-accordion"> … </div>
 *   Info Box:    <div class="mica-callout mica-callout--tip"> … </div>
 *   Badge:       <span class="mica-badge">Label</span>
 *   Progress:    <div class="mica-progress" data-value="70"> … </div>
 *   Two-Col:     <div class="mica-two-col"> … </div>
 *   Banner:      <div class="mica-banner"> … </div>
 * ============================================================
 */

/* ── 0. CSS Custom Properties ──────────────────────────────── */
:root {
  --mica-magenta:    #e10098;
  --mica-magenta-dk: #b3007a;
  --mica-dark:       #273540;
  --mica-black:      #000000;
  --mica-white:      #ffffff;
  --mica-gray-lt:    #f5f5f5;
  --mica-gray-mid:   #a7a8aa;
  --mica-blue-lt:    #c2e0f4;
  --mica-radius:     4px;
  --mica-transition: 0.25s ease;
  --mica-focus:      0 0 0 3px rgba(225, 0, 152, 0.40);
}

/* ── 1. Global Body / Content Resets ───────────────────────── */
.show-content,
.user_content {
  font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--mica-dark);
  line-height: 1.6;
}

/* Ensure all focusable interactive elements have a visible outline */
.show-content *:focus,
.user_content *:focus {
  outline: 3px solid var(--mica-magenta);
  outline-offset: 2px;
}

/* ── 2. MICA Banner / Header Bar ───────────────────────────── */
.mica-banner {
  background-color: var(--mica-black);
  padding: 0;
  margin: 0 0 1.5rem 0;
  border-radius: var(--mica-radius);
  overflow: hidden;
}

.mica-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 3. TABS ────────────────────────────────────────────────── */
/*
 * Markup pattern:
 *
 * <div class="mica-tabs">
 *   <div role="tablist" aria-label="Section tabs">
 *     <button role="tab" aria-selected="true"  aria-controls="tab-panel-1" id="tab-1">Overview</button>
 *     <button role="tab" aria-selected="false" aria-controls="tab-panel-2" id="tab-2">Objectives</button>
 *     <button role="tab" aria-selected="false" aria-controls="tab-panel-3" id="tab-3">Resources</button>
 *   </div>
 *   <div role="tabpanel" id="tab-panel-1" aria-labelledby="tab-1">Content 1</div>
 *   <div role="tabpanel" id="tab-panel-2" aria-labelledby="tab-2" hidden>Content 2</div>
 *   <div role="tabpanel" id="tab-panel-3" aria-labelledby="tab-3" hidden>Content 3</div>
 * </div>
 */

.mica-tabs {
  margin: 1.5rem 0;
  border: 1px solid var(--mica-gray-mid);
  border-radius: var(--mica-radius);
  overflow: hidden;
}

.mica-tabs [role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--mica-black);
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 2px;
}

.mica-tabs [role="tab"] {
  background: transparent;
  border: none;
  color: var(--mica-gray-mid);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.75rem 1.25rem;
  text-transform: uppercase;
  transition: color var(--mica-transition), background var(--mica-transition);
  position: relative;
}

.mica-tabs [role="tab"]:hover {
  color: var(--mica-white);
  background-color: rgba(255, 255, 255, 0.08);
}

.mica-tabs [role="tab"][aria-selected="true"] {
  color: var(--mica-magenta);
  background-color: rgba(225, 0, 152, 0.12);
}

.mica-tabs [role="tab"][aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--mica-magenta);
}

.mica-tabs [role="tab"]:focus {
  outline: none;
  box-shadow: var(--mica-focus);
  z-index: 1;
}

.mica-tabs [role="tabpanel"] {
  padding: 1.5rem;
  background: var(--mica-white);
  animation: mica-fadein var(--mica-transition);
}

.mica-tabs [role="tabpanel"][hidden] {
  display: none;
}

/* Responsive: stack tabs on small screens */
@media (max-width: 600px) {
  .mica-tabs [role="tablist"] {
    flex-direction: column;
    gap: 0;
  }
  .mica-tabs [role="tab"] {
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .mica-tabs [role="tab"][aria-selected="true"]::after {
    top: 0;
    bottom: 0;
    width: 3px;
    height: auto;
    right: auto;
  }
}

/* ── 4. ACCORDION ───────────────────────────────────────────── */
/*
 * Markup pattern:
 *
 * <div class="mica-accordion">
 *   <div class="mica-accordion__item">
 *     <button class="mica-accordion__trigger" aria-expanded="false" aria-controls="acc-panel-1" id="acc-btn-1">
 *       Module Objectives
 *     </button>
 *     <div class="mica-accordion__panel" id="acc-panel-1" role="region" aria-labelledby="acc-btn-1" hidden>
 *       Panel content here.
 *     </div>
 *   </div>
 *   <!-- repeat items -->
 * </div>
 */

.mica-accordion {
  margin: 1.5rem 0;
  border: 1px solid var(--mica-gray-mid);
  border-radius: var(--mica-radius);
  overflow: hidden;
}

.mica-accordion__item {
  border-bottom: 1px solid var(--mica-gray-mid);
}

.mica-accordion__item:last-child {
  border-bottom: none;
}

.mica-accordion__trigger {
  align-items: center;
  background-color: var(--mica-gray-lt);
  border: none;
  color: var(--mica-dark);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  text-align: left;
  transition: background var(--mica-transition);
  width: 100%;
}

.mica-accordion__trigger:hover {
  background-color: var(--mica-blue-lt);
}

.mica-accordion__trigger[aria-expanded="true"] {
  background-color: var(--mica-black);
  color: var(--mica-white);
}

.mica-accordion__trigger[aria-expanded="true"] .mica-accordion__icon {
  transform: rotate(180deg);
  color: var(--mica-magenta);
}

.mica-accordion__trigger:focus {
  outline: none;
  box-shadow: var(--mica-focus);
  z-index: 1;
  position: relative;
}

/* Chevron icon (CSS-only, no image needed) */
.mica-accordion__icon {
  display: inline-block;
  flex-shrink: 0;
  height: 1em;
  margin-left: 0.75rem;
  transition: transform var(--mica-transition);
  width: 1em;
}

.mica-accordion__icon::before {
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: '';
  display: block;
  height: 0.5em;
  margin-top: 0.1em;
  transform: rotate(45deg);
  width: 0.5em;
}

.mica-accordion__panel {
  background: var(--mica-white);
  overflow: hidden;
  padding: 0 1.25rem;
  transition: padding var(--mica-transition);
}

.mica-accordion__panel:not([hidden]) {
  padding: 1.25rem;
  animation: mica-fadein var(--mica-transition);
}

.mica-accordion__panel[hidden] {
  display: none;
}

/* ── 5. CALLOUT / INFO BOXES ────────────────────────────────── */
/*
 * Variants: mica-callout--tip | mica-callout--note | mica-callout--warning | mica-callout--important
 *
 * <div class="mica-callout mica-callout--tip" role="note">
 *   <strong>Tip:</strong> Content here.
 * </div>
 */

.mica-callout {
  border-left: 4px solid var(--mica-gray-mid);
  border-radius: 0 var(--mica-radius) var(--mica-radius) 0;
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background-color: var(--mica-gray-lt);
}

.mica-callout p:last-child { margin-bottom: 0; }

.mica-callout--tip {
  border-left-color: var(--mica-magenta);
  background-color: #fff0fa;
}

.mica-callout--note {
  border-left-color: #0078d4;
  background-color: #f0f6ff;
}

.mica-callout--warning {
  border-left-color: #e6a817;
  background-color: #fffbf0;
}

.mica-callout--important {
  border-left-color: var(--mica-dark);
  background-color: #f0f2f4;
}

/* ── 6. BADGES ──────────────────────────────────────────────── */
/*
 * <span class="mica-badge">Due Sunday</span>
 * <span class="mica-badge mica-badge--dark">CLO 1</span>
 */

.mica-badge {
  background-color: var(--mica-magenta);
  border-radius: 999px;
  color: var(--mica-white);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.2em 0.65em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.mica-badge--dark {
  background-color: var(--mica-dark);
}

.mica-badge--outline {
  background-color: transparent;
  border: 2px solid var(--mica-magenta);
  color: var(--mica-magenta);
}

/* ── 7. TWO-COLUMN LAYOUT ───────────────────────────────────── */
/*
 * <div class="mica-two-col">
 *   <div>Left column content</div>
 *   <div>Right column content</div>
 * </div>
 */

.mica-two-col {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
  margin: 1.25rem 0;
}

@media (max-width: 640px) {
  .mica-two-col {
    grid-template-columns: 1fr;
  }
}

/* ── 8. PROGRESS / CHECKLIST DISPLAY ────────────────────────── */
/*
 * <div class="mica-progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-label="Module progress 70%">
 *   <div class="mica-progress-bar__fill" style="width: 70%"></div>
 * </div>
 */

.mica-progress-bar {
  background-color: var(--mica-gray-mid);
  border-radius: 999px;
  height: 12px;
  margin: 0.5rem 0 1rem;
  overflow: hidden;
  width: 100%;
}

.mica-progress-bar__fill {
  background-color: var(--mica-magenta);
  border-radius: inherit;
  height: 100%;
  transition: width 0.5s ease;
}

/* ── 9. MODULE CARD / CONTENT CARD ─────────────────────────── */
/*
 * <div class="mica-card">
 *   <div class="mica-card__header">Module 1: Introduction</div>
 *   <div class="mica-card__body">Card body content here.</div>
 * </div>
 */

.mica-card {
  border: 1px solid var(--mica-gray-mid);
  border-radius: var(--mica-radius);
  margin: 1rem 0;
  overflow: hidden;
}

.mica-card__header {
  background-color: var(--mica-black);
  color: var(--mica-white);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
}

.mica-card__header--magenta {
  background-color: var(--mica-magenta);
}

.mica-card__body {
  padding: 1.25rem;
  background: var(--mica-white);
}

/* ── 10. SKIP LINK & SCREEN READER UTILITIES ────────────────── */
.mica-sr-only {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ── 11. HIGH CONTRAST MEDIA QUERY SUPPORT ───────────────────── */
@media (forced-colors: active) {
  .mica-tabs [role="tab"][aria-selected="true"]::after,
  .mica-accordion__trigger[aria-expanded="true"],
  .mica-callout {
    border-color: ButtonText;
    color: ButtonText;
  }

  .mica-badge {
    border: 2px solid ButtonText;
  }
}

/* ── 12. ANIMATION ──────────────────────────────────────────── */
@keyframes mica-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 13. PRINT STYLES ───────────────────────────────────────── */
@media print {
  .mica-tabs [role="tabpanel"][hidden],
  .mica-accordion__panel[hidden] {
    display: block !important;
  }

  .mica-tabs [role="tablist"],
  .mica-accordion__trigger {
    background: none !important;
    color: #000 !important;
  }

  .mica-callout {
    border: 1px solid #000;
  }
}