.iple-mw,
.iple-mw * { box-sizing: border-box; }

.iple-mw,
.iple-mw-collection {
  --iple-red: #c9232d;
  --iple-deep-red: #8f1720;
  --iple-gold: #f2b51d;
  --iple-yellow: #ffd85a;
  --iple-orange: #ef7626;
  --iple-cream: #fff7e8;
  --iple-ink: #171717;
  --iple-brown: #342722;
  --iple-white: #ffffff;
  width: 100%;
  max-width: 980px;
  margin: 24px auto;
  padding: 0;
  font-family: inherit;
  color: var(--iple-ink);
}

.iple-mw__header {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto 18px;
  max-width: 860px;
}

.iple-mw__header h2,
.iple-mw-collection h2 {
  margin: 4px 0 7px;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.05;
  color: inherit;
}

.iple-mw__header p {
  max-width: 680px;
  margin: 0;
  line-height: 1.55;
  color: #4d4d4d;
}

.iple-mw__kicker {
  color: var(--iple-deep-red);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.iple-mw__module {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--iple-cream);
  border: 2px solid var(--iple-gold);
  padding: 8px 13px;
  font-size: .82rem;
  font-weight: 800;
  color: var(--iple-deep-red);
}

.iple-mw__art,
.iple-mw__line,
.iple-mw__dot { display: none !important; }

.iple-mw__wheel-wrap {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 16px;
  border-radius: 38px;
  background:
    linear-gradient(var(--iple-cream), var(--iple-cream)) padding-box,
    repeating-linear-gradient(90deg, var(--iple-red) 0 18px, var(--iple-gold) 18px 36px) border-box;
  border: 10px solid transparent;
  box-shadow: 0 10px 26px rgba(78, 42, 30, .08);
}

.iple-mw__wheel {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  overflow: hidden;
  border: 3px solid var(--iple-cream);
  border-radius: 26px;
  background: var(--iple-cream);
}

.iple-mw__quadrant {
  min-width: 0;
  min-height: 306px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 34px 38px 30px;
}

.iple-mw__quadrant--north {
  color: #171717;
  background: #f4eee1;
  border-right: 3px solid rgba(255,255,255,.88);
  border-bottom: 3px solid rgba(255,255,255,.88);
}

.iple-mw__quadrant--east {
  color: #292100;
  background: linear-gradient(145deg, #ffe06a, var(--iple-gold));
  border-bottom: 3px solid rgba(255,255,255,.88);
}

.iple-mw__quadrant--west {
  color: #fff;
  background: linear-gradient(145deg, #4b3a31, #211a17);
  border-right: 3px solid rgba(255,255,255,.88);
}

.iple-mw__quadrant--south {
  color: #fff;
  background: linear-gradient(145deg, #da3b42, var(--iple-red));
}

/* Keep lower labels clear of the small centre medallion. */
.iple-mw__quadrant--west,
.iple-mw__quadrant--south {
  padding-top: 54px;
}

.iple-mw__quadrant-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}

.iple-mw__quadrant-heading strong {
  font-size: clamp(1rem, 2.1vw, 1.28rem);
  line-height: 1;
}

.iple-mw__quadrant-heading span {
  font-size: clamp(.65rem, 1.3vw, .78rem);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .82;
}

.iple-mw__quadrant label {
  display: block;
  min-height: 4.25em;
  margin: 0;
  font-size: clamp(.82rem, 1.25vw, .96rem);
  font-weight: 800;
  line-height: 1.34;
  color: inherit;
}

.iple-mw__quadrant textarea {
  display: block;
  width: 100%;
  height: 120px;
  min-height: 120px;
  resize: vertical;
  border: 2px solid rgba(0,0,0,.2);
  border-radius: 13px;
  outline: 0;
  background: #fff;
  color: #171717;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.iple-mw__quadrant textarea::placeholder { color: #656565; opacity: 1; }
.iple-mw__quadrant textarea:focus { border-color: var(--iple-orange); box-shadow: 0 0 0 4px rgba(239,118,38,.22); }

.iple-mw__center {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  text-align: center;
  border: 4px solid var(--iple-gold);
  border-radius: 50%;
  background: var(--iple-cream);
  color: var(--iple-ink);
  box-shadow: 0 0 0 3px var(--iple-red), 0 5px 12px rgba(0,0,0,.14);
}

.iple-mw__center span,
.iple-mw__center strong { display: block; line-height: 1; }
.iple-mw__center span { font-size: clamp(.55rem, 1vw, .68rem); }
.iple-mw__center strong { margin-top: 1px; font-size: clamp(.78rem, 1.5vw, .98rem); }

.iple-mw__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 17px;
}

.iple-mw__button {
  min-height: 46px;
  border-radius: 999px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
  text-shadow: none !important;
  box-shadow: none;
  opacity: 1;
}

.iple-mw__button:hover { transform: translateY(-1px); }

/* Use !important here intentionally: Eduma/LearnPress applies broad button styles
   that can otherwise make the secondary action low-contrast. */
.iple-mw__button--primary {
  border: 2px solid var(--iple-red) !important;
  background: var(--iple-red) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.iple-mw__button--primary:hover,
.iple-mw__button--primary:focus-visible {
  background: #a9151b !important;
  border-color: #a9151b !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.iple-mw__button--secondary {
  border: 2px solid #8f171d !important;
  background: #fff !important;
  color: #76191b !important;
  -webkit-text-fill-color: #76191b !important;
}
.iple-mw__button--secondary:hover,
.iple-mw__button--secondary:focus-visible {
  background: #76191b !important;
  border-color: #76191b !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.iple-mw__button:focus-visible {
  outline: 3px solid #f4b51c;
  outline-offset: 3px;
}

.iple-mw__button:disabled {
  cursor: wait;
  transform: none;
  opacity: .78 !important;
}
.iple-mw__button--secondary:disabled {
  background: #f6f1e8 !important;
  color: #651417 !important;
  -webkit-text-fill-color: #651417 !important;
  border-color: #8f171d !important;
}

.iple-mw__status {
  min-height: 24px;
  margin-top: 9px;
  text-align: center;
  font-size: .88rem;
  font-weight: 700;
  color: #5d5d5d;
}
.iple-mw__status.is-success { color: #256b36; }
.iple-mw__status.is-error { color: #a0181e; }

.iple-mw-start-error {
  max-width: 620px;
  margin: 12px 0;
  padding: 11px 13px;
  border: 1px solid #d6383f;
  border-left-width: 4px;
  border-radius: 9px;
  background: #fff3f3;
  color: #8f1720;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.4;
}

.iple-mw-login-note,
.iple-mw-collection__empty {
  padding: 16px;
  border: 1px solid #e4ddd0;
  border-radius: 12px;
  background: #fffaf0;
}

.iple-mw-collection { max-width: 920px; margin: 24px auto; }
.iple-mw-collection__header { margin-bottom: 14px; }
.iple-mw-collection__grid { display: grid; gap: 10px; }
.iple-mw-collection__item { border: 1px solid #e2ddd3; border-radius: 14px; background: #fff; overflow: hidden; }
.iple-mw-collection__item summary { display: flex; justify-content: space-between; gap: 14px; align-items: center; cursor: pointer; padding: 14px 16px; list-style: none; }
.iple-mw-collection__item summary::-webkit-details-marker { display: none; }
.iple-mw-collection__item summary span:first-child { display: grid; gap: 3px; }
.iple-mw-collection__item summary small { color: #6a6a6a; }
.iple-mw-collection__answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
.iple-mw-collection__answer { padding: 13px; border-radius: 12px; background: #fff7e8; border-left: 4px solid var(--iple-gold); }
.iple-mw-collection__answer strong { display: block; margin-bottom: 5px; color: var(--iple-deep-red); }
.iple-mw-collection__answer p { margin: 0; line-height: 1.5; }


@media (min-width: 701px) and (max-width: 900px) {
  .iple-mw__wheel-wrap { width: min(760px, 100%); }
  .iple-mw__quadrant { padding: 30px 28px 27px; min-height: 285px; }
  .iple-mw__quadrant label { font-size: .88rem; }
  .iple-mw__quadrant textarea { height: 116px; min-height: 116px; }
  .iple-mw__center { width: 70px; height: 70px; }
}

@media (max-width: 700px) {
  .iple-mw__header { display: block; }
  .iple-mw__module { display: inline-block; margin-top: 11px; }
  .iple-mw__wheel-wrap { border-radius: 28px; padding: 10px; border-width: 7px; }
  .iple-mw__wheel { grid-template-columns: 1fr; grid-template-rows: auto; border-radius: 18px; overflow: hidden; }
  .iple-mw__quadrant { padding: 24px 22px; min-height: 250px; border-right: 0 !important; border-bottom: 3px solid rgba(255,255,255,.9) !important; }
  .iple-mw__quadrant--south { border-bottom: 0 !important; }
  .iple-mw__quadrant label { min-height: 0; font-size: .96rem; }
  .iple-mw__quadrant textarea { height: 115px; min-height: 115px; }
  .iple-mw__center { display: none; }
  .iple-mw-collection__answers { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .iple-mw__button { transition: none; }
}

/* v0.3.1: when the Medicine Wheel toggle is enabled, the custom wheel is
   the complete learner-facing assignment UI. These selectors match the actual
   LearnPress Assignments 4.2.1 markup used by Eduma. They are scoped to the
   Medicine Wheel assignment class so ordinary assignments remain untouched. */
html.iple-mw-assignment-active .iple-mw-native-hidden,
html.iple-mw-assignment-active .iple-mw-native-intro,
html.iple-mw-assignment-active .iple-mw-native-answer,
html.iple-mw-assignment-active .iple-mw-native-control,
body.iple-mw-assignment-active .iple-mw-native-hidden,
body.iple-mw-assignment-active .iple-mw-native-intro,
body.iple-mw-assignment-active .iple-mw-native-answer,
body.iple-mw-assignment-active .iple-mw-native-control,
html.iple-mw-assignment-active .lp-course-assignment-content > .assignment-banner-status,
html.iple-mw-assignment-active .lp-course-assignment-content > h1.assignment-title,
html.iple-mw-assignment-active .lp-course-assignment-content > ul.assignment-information,
html.iple-mw-assignment-active .lp-course-assignment-content .assignment-description > .assignment-description-label,
html.iple-mw-assignment-active .lp-course-assignment-content .assignment-description > p,
html.iple-mw-assignment-active .lp-course-assignment-content .assignment-user-answering-wrapper,
html.iple-mw-assignment-active .lp-course-assignment-content .assignment-attachment-title,
html.iple-mw-assignment-active .lp-course-assignment-content .assignment-attachments,
html.iple-mw-assignment-active .lp-course-assignment-content .assignment-files,
body.iple-mw-assignment-active .lp-course-assignment-content > .assignment-banner-status,
body.iple-mw-assignment-active .lp-course-assignment-content > h1.assignment-title,
body.iple-mw-assignment-active .lp-course-assignment-content > ul.assignment-information,
body.iple-mw-assignment-active .lp-course-assignment-content .assignment-description > .assignment-description-label,
body.iple-mw-assignment-active .lp-course-assignment-content .assignment-description > p,
body.iple-mw-assignment-active .lp-course-assignment-content .assignment-user-answering-wrapper,
body.iple-mw-assignment-active .lp-course-assignment-content .assignment-attachment-title,
body.iple-mw-assignment-active .lp-course-assignment-content .assignment-attachments,
body.iple-mw-assignment-active .lp-course-assignment-content .assignment-files {
  display: none !important;
}

/* The custom wheel remains inside .assignment-description on this LearnPress
   template, so keep that parent visible and remove native spacing around it. */
html.iple-mw-assignment-active .lp-course-assignment-content .assignment-description,
body.iple-mw-assignment-active .lp-course-assignment-content .assignment-description {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.iple-mw-assignment-active .iple-mw,
body.iple-mw-assignment-active .iple-mw {
  margin-top: 10px;
  margin-bottom: 28px;
}

/* v0.3.2 — robust LearnPress/Eduma cleanup.
   Do not depend on a PHP body class: Eduma can render the assignment item via
   AJAX while WordPress still considers the queried object to be the course.
   Instead, scope the cleanup to the actual LearnPress assignment container that
   contains an IPLE Medicine Wheel. */
.lp-course-assignment-content:has(.iple-mw) > .assignment-banner-status,
.lp-course-assignment-content:has(.iple-mw) > h1.assignment-title,
.lp-course-assignment-content:has(.iple-mw) > ul.assignment-information,
.lp-course-assignment-content:has(.iple-mw) .assignment-description > .assignment-description-label,
.lp-course-assignment-content:has(.iple-mw) .assignment-description > p,
.lp-course-assignment-content:has(.iple-mw) .assignment-user-answering-wrapper,
.lp-course-assignment-content:has(.iple-mw) .assignment-attachment-title,
.lp-course-assignment-content:has(.iple-mw) .assignment-attachments,
.lp-course-assignment-content:has(.iple-mw) .assignment-files,
.course-summary:has(.iple-mw) > .assignment-banner-status,
.course-summary:has(.iple-mw) h1.assignment-title,
.course-summary:has(.iple-mw) ul.assignment-information,
.course-summary:has(.iple-mw) .assignment-description > .assignment-description-label,
.course-summary:has(.iple-mw) .assignment-description > p,
.course-summary:has(.iple-mw) .assignment-user-answering-wrapper,
.course-summary:has(.iple-mw) .assignment-attachment-title,
.course-summary:has(.iple-mw) .assignment-attachments,
.course-summary:has(.iple-mw) .assignment-files {
  display: none !important;
}

.lp-course-assignment-content:has(.iple-mw) .assignment-description,
.course-summary:has(.iple-mw) .assignment-description {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* v0.5.0 — student course-item fallback.
   LearnPress may render its protected/empty assignment shell before the fallback
   Medicine Wheel when an enrolled learner fails the item-level can_view check.
   Once our wheel is present, it is the learner-facing content for that enabled
   assignment, so suppress only the adjacent native protection/start chrome. */
.course-item-content:has(.iple-mw-course-item-fallback) .content-protected,
.content-item-summary:has(.iple-mw-course-item-fallback) .content-protected,
.learn-press-content-item:has(.iple-mw-course-item-fallback) .content-protected,
.course-summary:has(.iple-mw-course-item-fallback) .content-protected,
.course-item-content:has(.iple-mw-course-item-fallback) .learn-press-message,
.content-item-summary:has(.iple-mw-course-item-fallback) .learn-press-message,
.learn-press-content-item:has(.iple-mw-course-item-fallback) .learn-press-message {
  display: none !important;
}

.iple-mw-course-item-fallback {
  width: 100%;
}