/* ==========================================================================
   Πολυχώρος ΓΝώΣΗς — ΖΕΣΤΟ ΘΕΜΑ
   Φορτώνεται ΜΕΤΑ το style.css και το ζεσταίνει.
   Δεν σβήνει τίποτα — απλώς αλλάζει χρώματα, καμπύλες και γραμματοσειρά.
   Αν το αφαιρέσεις, το site επιστρέφει ακριβώς όπως ήταν.
   ========================================================================== */

/* --- 1. Νέα παλέτα: ζεστό χαρτί, μέλι, το ίδιο πράσινο -------------------- */
:root {
  --paper:        #fdf8f0;   /* ζεστό κρεμ αντί για ψυχρό γκρι */
  --card:         #ffffff;
  --ink:          #21261f;   /* σκούρο με ζεστή απόχρωση */
  --slate:        #6e6a5e;   /* δευτερεύον κείμενο, ζεστό γκρι */
  --rule:         #ebe2d3;   /* γραμμές σε χρώμα άμμου */

  --green:        #1e6b47;   /* το πράσινο της μάρκας μένει */
  --green-deep:   #14452f;
  --green-bright: #48b57c;

  --honey:        #e08a26;   /* το νέο ζεστό χρώμα — μαρκαδόρος καθηγητή */
  --honey-soft:   #fdebd2;
  --gold:         #c2761c;
  --gold-soft:    #fdebd2;

  /* Γραμματοσειρές — και οι τρεις έχουν πλήρεις ελληνικούς χαρακτήρες.
     Τίτλοι: Manrope, γεωμετρική και σύγχρονη.
     Κείμενο: Alegreya Sans, ζεστή και άνετη στο διάβασμα.
     Λογότυπο: Alegreya serif — η μάρκα δεν αλλάζει. */
  --font-display: "Manrope", "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-brand:   "Alegreya", Georgia, "Times New Roman", serif;

  --radius: 16px;            /* από 4px — η μεγαλύτερη αλλαγή στο «ύφος» */
  --shadow: 0 2px 4px rgba(74, 58, 30, .04), 0 14px 34px -18px rgba(74, 58, 30, .22);
}

/* Οι αποχρώσεις των τάξεων ζεσταίνονται κι αυτές */
body.theme-meleti { --green:#5f6f30; --green-deep:#3b4419; --green-bright:#97ad58; --intro-tint:#f1f2df; }
body.theme-a      { --green:#1f6b6b; --green-deep:#134242; --green-bright:#48b0b0; --intro-tint:#e6f1f0; }
body.theme-b      { --green:#2f5580; --green-deep:#1d3652; --green-bright:#6796cb; --intro-tint:#e9eff7; }
body.theme-g      { --green:#7a3352; --green-deep:#4c2034; --green-bright:#b97392; --intro-tint:#f7e9ee; }

/* --- 2. Τυπογραφία ------------------------------------------------------- */
body { font-size: 17.5px; line-height: 1.7; letter-spacing: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.18;
}
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

/* Το λογότυπο κρατάει τη σοβαρή serif — είναι η υπογραφή του Οργανισμού */
.wordmark, .brand__name { font-family: var(--font-brand); font-weight: 800; }
.wordmark i, .brand__name i { color: var(--green-bright); }

/* Η ετικέτα ενότητας γίνεται μικρή ζεστή πινακίδα αντί για ψυχρά κεφαλαία */
.eyebrow {
  display: inline-flex;
  background: var(--honey-soft);
  color: #8a5410;
  padding: 6px 14px 6px 11px;
  border-radius: 100px;
  letter-spacing: .08em;
  font-size: .76rem;
  margin-bottom: 16px;
}
.eyebrow::before { color: var(--honey); font-family: var(--font-brand); }
.section--dark .eyebrow { background: rgba(255,255,255,.12); color: #fbe6c8; }
.section--dark .eyebrow::before { color: #f5c17a; }

/* --- 3. Η υπογραφή: ο μαρκαδόρος του καθηγητή ----------------------------
   Μια γραμμή σχεδιασμένη στο χέρι, σαν διόρθωση σε τετράδιο.
   Χρησιμοποιείται δύο φορές σε όλη τη σελίδα. Όχι παραπάνω.            */
.marker { position: relative; display: inline-block; z-index: 0; white-space: nowrap; }
.marker::after {
  content: "";
  position: absolute;
  left: -.08em; right: -.08em; bottom: -.04em;
  height: .38em;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M5 15 C 62 5, 118 19, 176 10 S 268 7, 295 14' fill='none' stroke='%23f3b45c' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* --- 4. Κεφαλίδα --------------------------------------------------------- */
.site-header {
  background: rgba(253, 248, 240, .92);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner { min-height: 76px; }
.brand img { border-radius: 10px; }
.brand__sub { letter-spacing: .1em; color: var(--honey); font-weight: 700; }

/* Το μενού έχει επτά μακριές ελληνικές λέξεις — χρειάζεται λίγο παραπάνω πλάτος */
.site-header .container { max-width: 1320px; }
.site-header__inner { gap: 12px; }
.nav__list a { border-radius: 100px; padding: 8px 12px; font-weight: 600; font-size: .89rem; white-space: nowrap; }
.nav__list a:hover { background: var(--honey-soft); color: #8a5410; }
.nav__list a[aria-current="page"] {
  background: var(--green); color: #fff; box-shadow: none;
}
.nav-toggle { border-radius: 12px; border-color: var(--rule); }
.brand__name { white-space: nowrap; }
@media (max-width: 1320px) and (min-width: 941px) {
  .nav__list a { padding: 7px 9px; font-size: .82rem; }
  .brand__name { font-size: 1rem; }
  .brand__sub { font-size: .6rem; }
}
@media (max-width: 940px) {
  .nav { border-radius: 0 0 20px 20px; }
  .nav__list a { border-radius: 10px; border-bottom: 0; }
}

/* --- 5. Λωρίδα ανακοίνωσης ----------------------------------------------- */
.notice {
  background: var(--honey-soft);
  border-bottom: 1px solid #f3ddba;
  color: #6b4310;
}
.notice .container { align-items: center; padding-block: 13px; }
.notice__tag { background: var(--honey); border-radius: 100px; padding: 5px 12px; }
.notice a { color: #6b4310; font-weight: 700; text-decoration-color: rgba(107,67,16,.45); }
.notice a:hover { color: var(--gold); }

/* --- 6. Κουμπιά: στρογγυλά, με μικρή ανταπόκριση -------------------------- */
.btn {
  border-radius: 100px;
  padding: 13px 26px;
  font-weight: 700;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn--primary { box-shadow: 0 6px 16px -8px rgba(30,107,71,.7); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(30,107,71,.75); }
.btn--ghost { background: var(--card); border-color: var(--rule); }
.btn--ghost:hover { background: var(--honey-soft); border-color: #f0cd97; color: #8a5410; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* --- 7. Κάρτες: καμπύλες και απαλή σκιά αντί για λεπτό περίγραμμα --------- */
.card, .space, .phase, .quote, .timeline > div {
  border-radius: 20px;
  border-color: #f0eade;
  box-shadow: var(--shadow);
}
.space { border-top-width: 4px; border-top-color: var(--green); }
.space:hover, .card:hover { box-shadow: 0 4px 8px rgba(74,58,30,.05), 0 20px 40px -20px rgba(74,58,30,.3); }
.card, .space, .quote { transition: box-shadow .2s ease; }
.space__levels li { background: var(--honey-soft); color: #8a5410; }

/* Η λίστα αρχών: από «φύλλο προδιαγραφών» σε ξεχωριστές ζεστές κάρτες */
.points { gap: 12px; }
.points li {
  border-radius: 16px;
  border-color: #f0eade;
  box-shadow: 0 1px 2px rgba(74,58,30,.04);
  padding: 18px 22px;
  gap: 16px;
}
.points li + li { border-top: 1px solid #f0eade; }
.points li::before {
  content: "χ";
  color: var(--honey);
  background: var(--honey-soft);
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--font-brand);
  align-self: flex-start;
}

/* --- 8. Σκούρα ενότητα: αιωρούμενο πάνελ, όχι πλατιά μαύρη ζώνη ----------- */
.section--dark {
  background: transparent;
  color: var(--ink);
  padding-block: clamp(24px, 4vw, 44px);
}
.section--dark > .container {
  background: var(--green-deep);
  background-image: radial-gradient(ellipse 70% 100% at 100% 0%, rgba(224,138,38,.22), transparent 60%);
  color: #eef3ee;
  border-radius: 28px;
  padding: clamp(40px, 6vw, 76px) clamp(24px, 4vw, 56px);
}
.section--dark .card {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}

/* --- 9. Γνώμες αποφοίτων ------------------------------------------------- */
.quote { background: var(--card); padding: 30px; }
.quote__mark {
  font-family: var(--font-brand);
  color: var(--honey);
  font-size: 3.2rem;
}
.quote figcaption { border-top-color: #f0eade; }
.quote__school { color: var(--honey); font-weight: 600; }
.quotes__btn { border-radius: 50%; border-color: var(--rule); box-shadow: var(--shadow); }
.quotes__btn:hover:not(:disabled) { background: var(--honey-soft); border-color: #f0cd97; }
.quotes__dot[aria-current="true"] { background: var(--honey); }

/* --- 10. Εικόνες, χάρτης, πίνακες ---------------------------------------- */
.figure img { border-radius: 20px; border-color: #f0eade; }
.map { border-radius: 20px; border-color: #f0eade; box-shadow: var(--shadow); }
.subjects, .table, .tabs__btn { border-radius: 14px; }
.table thead th { background: var(--honey-soft); color: #8a5410; }
.callout { background: var(--honey-soft); border-color: #f3ddba; border-left-color: var(--honey); border-radius: 18px; }
.social a { border-radius: 100px; }
.social a:hover { background: var(--honey-soft); border-color: #f0cd97; color: #8a5410; }

/* --- 11. Πτυσσόμενες ενότητες -------------------------------------------- */
.accordion summary { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; }
.accordion summary::after { color: var(--honey); }

/* --- 12. Ενότητες με ανοιχτό πάνελ --------------------------------------- */
.section--panel { background: #fffdf9; border-color: var(--rule); }
.section--intro { background: var(--intro-tint, var(--honey-soft)); }

/* --- 13. Κουμπί επιστροφής & cookies ------------------------------------- */
.to-top { border-radius: 50%; }
.cookie { border-radius: 18px; }

/* --- 14. Νέα ζώνη υποδοχής (αντικαθιστά το .hero στην Αρχική) -------------
   Στόχος: ο γονιός που μπαίνει πρώτη φορά να δει άνθρωπο, όχι ίδρυμα.     */
.welcome { padding-block: clamp(24px, 4vw, 40px) clamp(32px, 5vw, 56px); }

.welcome__panel {
  background: linear-gradient(150deg, #fdefda 0%, #fdf8f0 55%, #eef6f0 100%);
  border: 1px solid #f3e6d0;
  border-radius: 32px;
  padding: clamp(28px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 900px) { .welcome__panel { grid-template-columns: 1fr; } }

.welcome__hello {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff;
  border: 1px solid #f3e6d0;
  border-radius: 100px;
  padding: 7px 16px 7px 8px;
  font-size: .84rem; font-weight: 700;
  color: #8a5410;
  margin: 0 0 20px;
}
.welcome__hello b {
  background: var(--honey); color: #fff;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem;
}

.welcome h1 {
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  line-height: 1.16;
  margin: 0 0 18px;
}
.welcome__text {
  font-size: clamp(1.05rem, 1.7vw, 1.18rem);
  color: var(--slate);
  max-width: 44ch;
  margin: 0 0 8px;
}
.welcome__sign {
  font-family: var(--font-brand);
  font-size: 1.02rem;
  color: var(--green);
  margin: 18px 0 0;
}
.welcome__sign span { display: block; font-family: var(--font-body); font-size: .82rem; color: var(--slate); font-weight: 600; }

.welcome .btn-row { margin-top: 26px; }

/* Η φωτογραφία με μια μικρή κάρτα να «κάθεται» πάνω της */
.welcome__media { position: relative; }
.welcome__media img {
  width: 100%;
  border-radius: 26px;
  box-shadow: 0 24px 50px -26px rgba(74,58,30,.5);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.welcome__badge {
  position: absolute;
  left: -14px; bottom: -18px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 30px -14px rgba(74,58,30,.45);
  padding: 15px 20px;
  display: flex; align-items: flex-start; gap: 13px;
}
.welcome__badge svg { flex: none; width: 24px; height: 24px; color: var(--honey); margin-top: 3px; }
.welcome__badge span { font-size: .84rem; color: var(--slate); line-height: 1.4; max-width: 23ch; }
.welcome__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 800;
  color: var(--green);
  margin-bottom: 1px;
}
@media (max-width: 900px) { .welcome__badge { left: 12px; bottom: -14px; } }

/* Γραμμή με τα βασικά, κάτω από τη ζώνη υποδοχής */
.reassure {
  list-style: none;
  margin: clamp(30px, 4vw, 44px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 760px) { .reassure { grid-template-columns: 1fr; } }
.reassure li {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff;
  border: 1px solid #f0eade;
  border-radius: 16px;
  padding: 16px 20px;
  font-size: .97rem;
  box-shadow: 0 1px 2px rgba(74,58,30,.04);
}
.reassure svg { flex: none; width: 22px; height: 22px; color: var(--honey); margin-top: 2px; }
.reassure strong { display: block; }
.reassure span { color: var(--slate); font-size: .89rem; }

/* --- 15. Μικρορυθμίσεις για κινητό ---------------------------------------- */
@media (max-width: 620px) {
  .notice .container { align-items: flex-start; }
  .notice__tag { margin-top: 3px; }
  .welcome__panel { border-radius: 24px; }
  .welcome__badge { padding: 11px 15px; left: 10px; bottom: 12px; }
  .welcome__badge span { font-size: .78rem; }
  .welcome__badge strong { font-size: .95rem; }
  .btn-row .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
}

/* --- 16. Η ζώνη εισαγωγής των εσωτερικών σελίδων --------------------------
   Ήταν πλατιά έγχρωμη λωρίδα από άκρη σε άκρη. Γίνεται στρογγυλό πάνελ,
   όπως η ζώνη υποδοχής της Αρχικής, ώστε όλες οι σελίδες να μιλάνε ίδια. */
.section--intro {
  background: transparent;
  border-bottom: 0;
  padding-block: clamp(20px, 3.5vw, 36px);
}
.section--intro > .container {
  background: var(--intro-tint, var(--honey-soft));
  border-radius: 28px;
  padding: clamp(32px, 5vw, 60px) clamp(24px, 4vw, 48px);
}
@media (max-width: 620px) { .section--intro > .container { border-radius: 22px; } }

/* Μέσα στη ζώνη εισαγωγής η ετικέτα παίρνει το χρώμα της τάξης, όχι το μέλι —
   αλλιώς δύο ζεστά χρώματα παλεύουν μεταξύ τους πάνω σε χρωματιστό φόντο. */
.section--intro .eyebrow { background: #fff; color: var(--green-deep); }
.section--intro .eyebrow::before { color: var(--green); }

/* --- 17. Επαναφορά των έγχρωμων ακμών ------------------------------------
   Οι καμπύλες του θέματος είχαν σβήσει τη χρωματιστή γραμμή στα πλαίσια
   ημερομηνιών και στα πλαίσια επεξήγησης. Τη γυρίζουμε πίσω. */
.timeline > div { border-left: 3px solid var(--green-bright); }
.callout { border-left: 3px solid var(--honey); }

/* --- 18. Το πλαίσιο «λείπει η εικόνα» ------------------------------------- */
.figure.is-missing::before {
  border: 2px dashed #e3d3b8;
  border-radius: 20px;
  background: repeating-linear-gradient(45deg, #fdf6ea, #fdf6ea 10px, #f8eedd 10px, #f8eedd 20px);
  color: #8a5410;
}

/* --- 19. Τελευταία ψυχρά υπολείμματα ------------------------------------- */
.table tfoot td { background: #fdf6ea; border-top-color: var(--green); }
.figure img { background: #fdf6ea; }

/* --- 20. Κάρτα δύο όψεων (flashcard) -------------------------------------
   Χρησιμοποιείται στην ενότητα «Ποιοι είμαστε». Γυρίζει με το ποντίκι
   (υπολογιστής) ή με ένα άγγιγμα/κλικ (κινητό). Καθαρή CSS, χωρίς JavaScript. */
.flipcard {
  margin: 0;
  position: relative;
  perspective: 1200px;
}

/* Το checkbox είναι κρυφό — κρατάει όμως τη «μνήμη» του αγγίγματος */
.flipcard__toggle {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.flipcard__inner {
  display: block;
  position: relative;
  cursor: pointer;
  border-radius: 20px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.flipcard__face {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: #fdf6ea;
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flipcard__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

.flipcard__face img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;      /* ΣΧΗΜΑ ΚΑΡΤΑΣ — όρθιο, όπως το διάλεξες */
  object-fit: cover;
  border: 0;
  border-radius: 20px;
  object-position: center 50%;   /* ΚΑΔΡΟ — 0% κρατάει την κορυφή, 100% τη βάση */
}

/* Ξεχωριστό κάδρο για κάθε όψη, αν οι δύο φωτογραφίες θέλουν διαφορετική ρύθμιση */
.flipcard__face--front img { object-position: center 50%; }   /* kollias.jpg */
.flipcard__face--back  img { object-position: center 20%; }   /* kollia.jpg  */

/* Άγγιγμα / κλικ: γυρίζει και μένει γυρισμένη */
.flipcard__toggle:checked + .flipcard__inner { transform: rotateY(180deg); }

/* Ποντίκι: γυρίζει όσο είσαι από πάνω */
@media (hover: hover) {
  .flipcard:hover .flipcard__inner { transform: rotateY(180deg); }
  .flipcard:hover .flipcard__toggle:checked + .flipcard__inner { transform: rotateY(360deg); }
}

/* Πληκτρολόγιο: φαίνεται καθαρά ποια κάρτα είναι επιλεγμένη */
.flipcard__toggle:focus-visible + .flipcard__inner {
  outline: 3px solid var(--honey);
  outline-offset: 5px;
  border-radius: 22px;
}

/* Μικρή διακριτική υπόδειξη ότι η κάρτα γυρίζει */
.flipcard__hint {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(255, 255, 255, .93);
  padding: 7px 14px;
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(74, 58, 30, .18);
  pointer-events: none;
  transition: opacity .3s ease;
}
@media (hover: hover) {
  .flipcard:hover .flipcard__hint { opacity: 0; }
}

/* Σεβασμός στη ρύθμιση «λιγότερη κίνηση» του συστήματος */
@media (prefers-reduced-motion: reduce) {
  .flipcard__inner { transition: none; }
}

/* --- 20β. Εναλλακτικό εφέ: απαλό σβήσιμο αντί για περιστροφή --------------
   Πρόσθεσε την κλάση flipcard--fade δίπλα στην flipcard στο HTML:
   <figure class="flipcard flipcard--fade"> ... </figure>
   Δεν χρησιμοποιεί τρισδιάστατα εφέ, οπότε δουλεύει παντού. */
.flipcard--fade { perspective: none; }
.flipcard--fade .flipcard__inner { transform: none !important; transform-style: flat; }
.flipcard--fade .flipcard__face {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transition: opacity .6s ease;
}
.flipcard--fade .flipcard__face--back { transform: none; opacity: 0; }
.flipcard--fade .flipcard__toggle:checked + .flipcard__inner .flipcard__face--back { opacity: 1; }
@media (hover: hover) {
  .flipcard--fade:hover .flipcard__face--back { opacity: 1; }
  .flipcard--fade:hover .flipcard__toggle:checked + .flipcard__inner .flipcard__face--back { opacity: 0; }
}