/* ============================================================
   itha-course.css — σελίδα μαθήματος (format Tiles)        namespace: itha-sub-
   Υπο-ενότητες (mod_subsection, Moodle 5.2) ως κάρτες ITHA.
   Μαρκάρισμα Moodle: li.modtype_subsection > … > li.delegated-section
     > .section-item > .course-section-header.d-flex
         > .d-flex.position-relative > a.icons-collapse-expand + h3.sectionname
         > .sectionbadges
     > .course-content-item-content.collapse > ul.section
   Το JS (itha-course.js › enhanceSubsections) βάζει: .itha-sub-letter (κύκλος
   με το γράμμα), .itha-sub-title/.itha-sub-sub μέσα στο h3, .itha-sub-count.
   05/10/2026 — πρώτη έκδοση (Γραπτά: Α/Β/Γ).
   ============================================================ */

.modtype_subsection { margin: 10px 0 !important; list-style: none; }
.modtype_subsection .delegated-section {
  border: 1px solid #cbdaf0; border-radius: 12px; background: #fff; overflow: hidden;
}
.modtype_subsection .delegated-section .section-item { padding: 0; }
.modtype_subsection .course-section-header {
  display: flex !important; align-items: center; gap: 12px; padding: 14px 16px; margin: 0;
}
.modtype_subsection .course-section-header:hover { background: #f8fbff; }

/* εσωτερικό flex: κύκλος → τίτλος → pill → βελάκι (το βελάκι του Moodle είναι πρώτο στο DOM, το στέλνουμε τελευταίο) */
.modtype_subsection .course-section-header > .position-relative {
  flex: 1; display: flex; align-items: center !important; gap: 14px; min-width: 0;
}
.modtype_subsection .itha-sub-letter { order: 0; }
.modtype_subsection .course-section-header .sectionname { order: 1; }
.modtype_subsection .itha-sub-count { order: 2; margin-left: auto; }
.modtype_subsection .icons-collapse-expand { order: 3; margin: 0 !important; color: #1670CC; flex: none; }
.modtype_subsection .icons-collapse-expand .icon { font-size: 18px; margin: 0; }
.modtype_subsection .icons-collapse-expand .icon-no-margin { padding: 2px !important; }

.modtype_subsection .itha-sub-letter {
  width: 40px; height: 40px; border-radius: 999px; background: #1670CC; color: #fff;
  font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.modtype_subsection .course-section-header .sectionname {
  font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 17px; color: #172b4d;
  margin: 0; min-width: 0; display: block !important; line-height: 1.25;
}
.modtype_subsection .course-section-header .sectionname a { color: inherit; text-decoration: none; }
.modtype_subsection .itha-sub-title { display: block; }
.modtype_subsection .itha-sub-sub {
  display: block; font-family: 'Source Sans 3', system-ui, sans-serif; font-weight: 400;
  font-size: 14px; color: #526176; margin-top: 2px;
}
.modtype_subsection .itha-sub-count {
  font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 12px; color: #1670CC;
  background: #f3f7ff; border: 1px solid #cbdaf0; border-radius: 999px; padding: 4px 12px;
  white-space: nowrap; flex: none;
}
.modtype_subsection .sectionbadges:empty { display: none; }

/* ανοιχτή κάρτα */
.modtype_subsection .delegated-section:has(.icons-collapse-expand[aria-expanded="true"]) { background: #f8fbff; }
.modtype_subsection .delegated-section:has(.icons-collapse-expand[aria-expanded="true"]) .course-section-header {
  background: #fff; border-bottom: 1px solid #e3eaf4;
}
.modtype_subsection .course-content-item-content { padding: 4px 16px 10px 66px; }
.modtype_subsection .course-content-item-content > .my-3:empty { display: none; }

/* κινητό: χωρίς pill, μικρότερος κύκλος, λιγότερη εσοχή */
@media (max-width: 600px) {
  .modtype_subsection .itha-sub-count { display: none; }
  .modtype_subsection .itha-sub-letter { width: 34px; height: 34px; font-size: 16px; }
  .modtype_subsection .course-section-header { padding: 12px; gap: 10px; }
  .modtype_subsection .course-content-item-content { padding: 4px 10px 8px 14px; }
}

/* ============================================================
   Ηχητική οδηγία — namespace itha-say- (05/10/2026, Βήμα 5.1)
   <a class="itha-say" href="/audio/odigies/ODI_00N_….mp3">Άκου την οδηγία · 40″</a>
   Το JS βάζει .itha-say-ico + .itha-say-txt, κλάση .is-playing, και --itha-say-p (πρόοδος).
   Χρώματα = ίδια με τις 4 κάρτες των labels (#1670CC / #f3f7ff / #cbdaf0).
   ============================================================ */
a.itha-say {
  --itha-say-p: 0%;
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; margin: 8px 0 4px 5px;
  font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 13px; line-height: 1.2;
  color: #1670CC !important; text-decoration: none !important; white-space: nowrap;
  border: 1px solid #cbdaf0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, #dcebff var(--itha-say-p), #f3f7ff var(--itha-say-p));
  transition: border-color .15s, box-shadow .15s;
}
a.itha-say:hover { border-color: #1670CC; }
a.itha-say:focus { outline: none; box-shadow: none; }
a.itha-say:focus-visible { box-shadow: 0 0 0 3px rgba(22, 112, 204, .25); }
a.itha-say .itha-say-ico {
  width: 24px; height: 24px; border-radius: 999px; background: #1670CC; flex: none; position: relative;
}
/* ▶ */
a.itha-say .itha-say-ico::before {
  content: ''; position: absolute; left: 9px; top: 7px;
  border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff;
}
/* ⏸ */
a.itha-say.is-playing .itha-say-ico::before {
  left: 8px; top: 7px; width: 3px; height: 10px; border: 0; background: #fff; box-shadow: 5px 0 0 #fff;
}
a.itha-say .itha-say-txt { font-variant-numeric: tabular-nums; }

/* ============================================================
   Ερωτήσεις χάρτη (qtype_ddmarker) — 12/10/2026
   Σε desktop ο χάρτης έπιανε όλο το πλάτος (~1200 px) και ήθελε κύλιση.
   Περιορίζουμε το πλάτος ώστε χάρτης + σημάδια να χωρούν σε μία οθόνη.
   1.1 = αναλογία πλάτους/ύψους των χαρτών ΠΕΓΠ (1782×1612, 1598×1450).
   Το Moodle μετατρέπει μόνο του τις θέσεις στις αρχικές διαστάσεις της
   εικόνας, άρα η βαθμολόγηση δεν επηρεάζεται. Κινητό: όπως πριν (100%).
   ============================================================ */
@media (min-width: 768px) {
  .que.ddmarker .ddarea {
    max-width: min(100%, max(560px, calc((100vh - 110px) * 1.1)));
  }
}

/* Σωστό/λάθος σημάδι μετά τον έλεγχο (το βάζει το itha-course.js, ενότητα 3). */
.que.ddmarker .droparea .marker.itha-mk-ok span.markertext {
  background: #e7f6ec; border-color: #1e8e3e; color: #14532d; font-weight: 600; opacity: 1;
}
.que.ddmarker .droparea .marker.itha-mk-ok span.markertext::before { content: "\2713\00a0"; color: #1e8e3e; }
.que.ddmarker .droparea .marker.itha-mk-bad span.markertext {
  background: #fdecec; border-color: #c5221f; color: #7f1d1d; font-weight: 600; opacity: 1;
}
.que.ddmarker .droparea .marker.itha-mk-bad span.markertext::before { content: "\2717\00a0"; color: #c5221f; }
.que.ddmarker .droparea .marker.itha-mk-ok img.target  { filter: drop-shadow(0 0 2px #1e8e3e) drop-shadow(0 0 2px #1e8e3e); }
.que.ddmarker .droparea .marker.itha-mk-bad img.target { filter: drop-shadow(0 0 2px #c5221f) drop-shadow(0 0 2px #c5221f); }