/* Assisted Lives course-player look inside H5P activities (loaded into the H5P frame).
   Matches the approved course player: cream field, white cards, petrol text, rose accents. */

@font-face { font-family: "Inter"; src: url(fonts/inter/inter-v18-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Inter"; src: url(fonts/inter/inter-v18-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Inter"; src: url(fonts/inter/inter-v18-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-600.woff2) format("woff2"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Inter"; src: url(fonts/inter/inter-v18-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-600italic.woff2) format("woff2"); font-weight: 600; font-style: italic; }
@font-face { font-family: "Inter"; src: url(fonts/inter/Inter-ExtraBold.woff2) format("woff2"); font-weight: 700 800; font-style: normal; }
@font-face { font-family: "Inter"; src: url(fonts/inter/Inter-ExtraBoldItalic.woff2) format("woff2"); font-weight: 700 800; font-style: italic; }

:root {
  --al-petrol: #003c5c;
  --al-petrol-700: #00567f;
  --al-cream: #f7f4ee;
  --al-paper: #fffdf9;
  --al-line: #e6ddcd;
  --al-ink: #17303f;
  --al-ink-2: #4b5f6b;
  --al-rose: #e8919b;
  --al-rose-deep: #9e3b48;
  --al-rose-tint: #fbeaec;
  --al-mint-deep: #1d6a4c;
  --al-mint-tint: #e6f4ee;
  --al-amber-deep: #8a4a12;
  --al-amber-tint: #fdf0e3;
  --al-radius: 12px;
  --al-shadow: 0 1px 2px rgba(0, 40, 60, .06), 0 6px 18px -8px rgba(0, 40, 60, .16);
}

html, body { background: var(--al-cream); }

.h5p-content {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--al-ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}
.h5p-content ::selection { background: var(--al-rose-tint); color: var(--al-ink); }
.h5p-content :focus-visible,
.h5p-content :focus {
  outline: 3px solid var(--al-petrol-700);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- The activity card ---------- */
.h5p-content.h5p-standalone {
  background: var(--al-paper);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius);
  box-shadow: var(--al-shadow);
  padding: 12px 0 20px;
  margin: 8px;
  box-sizing: border-box;
}
.h5p-question-introduction {
  padding: 12px 22px 14px;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--al-petrol);
  letter-spacing: -0.01em;
}
.h5p-question-introduction p { margin: 0 0 .5em; }
.h5p-question-content { margin: 0; }

/* ---------- Buttons ---------- */
.h5p-joubelui-button {
  background: var(--al-petrol);
  border-radius: var(--al-radius);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  min-height: 44px;
  box-sizing: border-box;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 8px 18px -10px rgba(0, 60, 92, .6);
}
.h5p-joubelui-button:hover { background: var(--al-petrol-700); }
.h5p-joubelui-button:before { color: #ffc9cf; }

/* ---------- Score bar + feedback panel (the check-in 'why' style) ---------- */
.h5p-question-feedback,
.h5p-question-buttons,
.h5p-question-scorebar-container { margin-left: 20px; margin-right: 20px; }
.h5p-question-feedback { color: var(--al-ink); font-weight: 400; }
.h5p-content .h5p-question-feedback-content-text {
  color: var(--al-ink);
  background: var(--al-cream);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius);
  padding: 14px 18px;
  display: block;
  font-size: 16px;
  line-height: 1.55;
}
.h5p-joubelui-score-bar { border: 1px solid var(--al-line); border-radius: 999px; }
.h5p-joubelui-score-bar-progress-wrapper { background: var(--al-line); }
.h5p-joubelui-score-bar-progress {
  background: var(--al-amber-deep);
  background: linear-gradient(to right, #d9a066, var(--al-amber-deep));
}
.h5p-joubelui-score-bar-full-score .h5p-joubelui-score-bar-progress {
  background: var(--al-mint-deep);
  background: linear-gradient(to right, #4ea67f, var(--al-mint-deep));
}
.h5p-joubelui-score-number { color: var(--al-petrol); }

/* ---------- Sort paragraphs (sg-order, sg-route) ---------- */
.h5p-sort-paragraphs { margin: 0 20px; }
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph {
  background-color: #fff;
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius);
  box-shadow: 0 1px 2px rgba(0, 40, 60, .08);
  padding: .55em 0;
  color: var(--al-ink);
}
/* clear drag handle at the left edge of every step */
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph::before {
  content: "⠿";
  align-self: center;
  padding: 0 .35em 0 .6em;
  color: var(--al-rose);
  font-size: 1.15em;
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph.h5p-sort-paragraphs-over,
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph.h5p-sort-paragraphs-selected {
  background: var(--al-rose-tint);
  border-color: var(--al-rose-deep);
  box-shadow: 0 1px 2px rgba(0, 40, 60, .12);
  color: var(--al-rose-deep);
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph.h5p-sort-paragraphs-correct {
  background: var(--al-mint-tint);
  border-color: #8fcdb2;
  box-shadow: 0 1px 2px rgba(0, 40, 60, .08);
  color: var(--al-mint-deep);
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph.h5p-sort-paragraphs-wrong {
  background: var(--al-amber-tint);
  border-color: #d9a066;
  box-shadow: 0 1px 2px rgba(0, 40, 60, .08);
  color: var(--al-amber-deep);
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph.h5p-sort-paragraphs-disabled:not(.animate-translation):not(.h5p-sort-paragraphs-wrong):not(.h5p-sort-paragraphs-correct),
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph.h5p-sort-paragraphs-disabled.h5p-sort-paragraphs-solution {
  background-color: var(--al-cream);
  border-color: var(--al-line);
  color: var(--al-ink-2);
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-separator.h5p-sort-paragraphs-correct { background: var(--al-mint-deep); border-color: var(--al-mint-tint); box-shadow: none; }
.h5p-sort-paragraphs .h5p-sort-paragraphs-separator.h5p-sort-paragraphs-wrong { background: var(--al-amber-deep); border-color: var(--al-amber-tint); box-shadow: none; }
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph-placeholder {
  background-color: var(--al-rose-tint);
  border: .2em dashed var(--al-rose-deep);
  border-radius: var(--al-radius);
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph-container { min-width: 0; flex: 1 1 auto; }
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph-container p { overflow-wrap: break-word; }
.h5p-sort-paragraphs .h5p-sort-paragraphs-button {
  border-radius: 10px;
  border: 1px solid var(--al-line);
  box-shadow: 0 1px 2px rgba(0, 40, 60, .1);
  color: var(--al-petrol);
  min-height: 44px;
  min-width: 44px;
  height: auto;
  width: auto;
  aspect-ratio: 1;
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-button:not(.h5p-sort-paragraphs-disabled):hover { background-color: var(--al-cream); }
.h5p-sort-paragraphs .h5p-sort-paragraphs-button.h5p-sort-paragraphs-disabled { background-color: var(--al-cream); color: var(--al-ink-2); }
.h5p-content:not(.using-mouse) .h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph:not(.h5p-sort-paragraphs-disabled):focus {
  border-color: var(--al-petrol-700);
  box-shadow: 0 0 0 3px rgba(0, 86, 127, .35);
  outline: none;
}
.h5p-content:not(.using-mouse) .h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph.h5p-sort-paragraphs-disabled:focus {
  border-color: var(--al-ink-2);
  box-shadow: 0 0 .5em 0 rgba(75, 95, 107, .5);
  outline: none;
}

/* ---------- Drag and drop (sg-sort) ---------- */
.h5p-standalone.h5p-dragquestion { max-width: 640px; margin: 0 auto; }
.h5p-dragquestion .h5p-static { font-weight: 700; color: var(--al-petrol); }
.h5p-dragquestion .h5p-draggable {
  background: #fff;
  border: 1px solid var(--al-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 40, 60, .1);
  color: var(--al-ink);
  font-weight: 600;
}
.h5p-dragquestion .h5p-draggable:not(.ui-state-disabled).h5p-draggable-hover:not(.h5p-correct):not(.h5p-wrong) {
  background: var(--al-rose-tint);
  color: var(--al-rose-deep);
  border-color: var(--al-rose-deep);
}
.h5p-dragquestion .h5p-draggable.ui-draggable-dragging {
  background: var(--al-rose-tint);
  box-shadow: 0 10px 24px -10px rgba(0, 60, 92, .45);
}
.h5p-dragquestion .h5p-dropzone {
  border: 2px dashed #9db8c4;
  border-radius: var(--al-radius);
  background: var(--al-cream);
}
.h5p-dragquestion .h5p-dropzone > .h5p-inner { border-radius: 10px; }
.h5p-dragquestion .h5p-dropped.h5p-correct,
.h5p-dragquestion .h5p-dropzone.h5p-correct-answer { background: var(--al-mint-tint); border-color: var(--al-mint-deep); color: var(--al-mint-deep); }
.h5p-dragquestion .h5p-dropped.h5p-wrong { background: var(--al-amber-tint); border-color: var(--al-amber-deep); color: var(--al-amber-deep); }

/* ---------- Generous touch targets on phones ---------- */
@media (max-width: 720px) {
  .h5p-content.h5p-standalone { margin: 6px; }
  .h5p-question-introduction { padding: 10px 16px 12px; font-size: 17px; }
  .h5p-question-feedback, .h5p-question-buttons, .h5p-question-scorebar-container { margin-left: 12px; margin-right: 12px; }
  .h5p-joubelui-button { min-height: 48px; font-size: 1.05em; }
  .h5p-sort-paragraphs { margin: 0 12px; }
  .h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph { padding: .8em 0; font-size: 1.05em; }
  .h5p-sort-paragraphs .h5p-sort-paragraphs-button { min-height: 48px; min-width: 48px; }
  /* stack the move buttons so the text column keeps the width it needs */
  .h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph .h5p-sort-paragraphs-buttons-container:not(.vertical) {
    flex-direction: column;
    justify-content: center;
  }
  .h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph .h5p-sort-paragraphs-buttons-container:not(.vertical) .h5p-sort-paragraphs-paragraph-button-container {
    padding: .15em 0;
  }
  .h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph-button-container,
  .h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph-container-left { width: 3.6em; }
}