/* ═══════════════════════════════════════════════════════════════════════
   HEADER τυπου Crack Magazine                      (βημα 019 - 29/09/2026)

   Ριζα .header×4 = (0,4,0). ΔΕΝ ειναι υπερβολη: το mainsite.css εχει

     body:not(.categoryPage):not(.textPage) .header:not(.sticky) .header__logo
       { left:-160px; position:absolute; top:-160px }        ← (0,5,1)

   που πεταει το λογοτυπο ΕΚΤΟΣ ΟΘΟΝΗΣ στην αρχικη. Με λιγοτερη βαρυτητα
   το κεντραρισμενο λογοτυπο απλα δεν θα φαινοταν πουθενα.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Η μπαρα ──────────────────────────────────────────────────────────
   Διαφανη πανω απο το hero, σκουρη μολις σκρολαρεις.                  */
.header.header.header.header {
  position: fixed;
  top: var(--pg-admin-offset, 0px);
  left: 0;
  width: 100%;
  z-index: 120;
  background: transparent;
  border: 0;
  /* Η ΚΑΤΩ ΓΡΑΜΜΗ ΥΠΑΡΧΕΙ ΠΑΝΤΑ — βημα 132.
     Πριν: :not(.is-past-hero) εβαζε border-bottom: 0 και .is-past-hero
     1px solid. Το ΠΛΑΤΟΣ πηγαινε 0 → 1px ΑΚΑΡΙΑΙΑ: το border-width δεν
     μεταβαινει ομαλα απο το 0, εμφανιζεται. Μαζι εσκαγαν και το
     background, το blur και η σκια — χωρις transition — ενω απο κατω
     η σειρα κατηγοριων ΑΚΟΜΑ κατεβαινε με .28s. Αποτελεσμα: μια σκουρη
     μπαρα με σκια και μια γραμμη που μετα μετακινειται 52px πιο κατω.
     Αυτο ηταν το «φλας».

     Τωρα το πλατος ειναι ΣΤΑΘΕΡΟ και αλλαζει ΜΟΝΟ το χρωμα — ακριβως
     η τεχνικη που χρησιμοποιει ηδη το front-grid.css §1γ για τις
     σελιδες χωρις hero, και εκει δεν φλασαρει ποτε.                 */
  border-bottom: 1px solid transparent;
  /* Ιδιος χρονος με τις κατηγοριες (--hdr-cats-h transition .28s),
     ωστε ολα να φτανουν μαζι. Το box-shadow και το backdrop-filter
     μπαινουν ΚΑΙ ΑΥΤΑ στη λιστα: ηταν τα δυο που «εσκαγαν».         */
  transition: background-color .28s ease,
              border-bottom-color .28s ease,
              box-shadow .28s ease,
              -webkit-backdrop-filter .28s ease,
              backdrop-filter .28s ease;

  /* Β24 — ΤΟ ΚΡΙΣΙΜΟ.
     Το mainsite.css στηνει το header με λογικη «κρυψου μεχρι να σκρολαρει»:

       .header.sticky         { display: none; transform: translateY(-100%) }
       .header.sticky.visible { display: block }
       .header.sticky.active  { transform: translateY(0) }

     Αν το header εχει την κλαση sticky απο την αρχη (στην αρχικη το εχει —
     το sticky-nav.js ελεγχει isFrontPage = classList.contains('sticky')),
     τοτε ειναι display:none μεχρι να σκρολαρεις. Ακριβως το συμπτωμα.

     Εμεις θελουμε header ΠΑΝΤΑ ορατο, που απλα σκουραινει στο σκρολ.
     Βγαινουμε τελειως απο αυτον τον μηχανισμο — (0,4,0) εναντι (0,2,0). */
  display: block;
  transform: none;
  visibility: visible;
  opacity: 1;
  box-shadow: none;
}

/* Στην κορυφη ΤΙΠΟΤΑ απο πισω — ουτε το #f4f4f4 του παλιου fix,
   ουτε το #fbfbf8 της .sticky, ουτε border.                        */
.header.header.header.header:not(.is-past-hero) {
  background: transparent;
  background-color: transparent;
  /* ΟΧΙ border-bottom: 0 — δες το σχολιο στη βαση (βημα 132).
     Το πλατος μενει 1px, σβηνει μονο το χρωμα.                      */
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header.header.header.header:not(.is-past-hero) .header__row {
  border: 0;
  background: transparent;
}

/* Β25 — ΠΡΟΣΟΧΗ στο ποια κλαση σημαινει «εχει σκρολαρει».
   ΟΧΙ η .sticky: στην αρχικη υπαρχει απο το φορτωμα (γι' αυτο και το
   sticky-nav.js γραφει isFrontPage = classList.contains('sticky')).
   Αν δεσουμε το σκουρο φοντο στη .sticky, βγαινει αμεσως — λαθος.

   Το πραγματικο σημα ειναι η .active, που το JS τη βαζει ΜΟΝΟ οταν
   scrollY > 80 και τη βγαζει πρωτη οταν γυρνας πανω:

     if (scrollY > 80) { add('sticky','visible'); ... add('active') }
     else              { remove('active','visible') }

   Το mainsite.css εκει βαζει background #fbfbf8 (ΑΝΟΙΧΤΟ) — (0,2,0)
   και (0,3,0) για το .sticky.active. Η δικη μας ριζα ειναι (0,5,0).  */
.header.header.header.header.is-past-hero {
  background: rgb(18 18 18 / .95);
  /* Μονο το χρωμα: το 1px το δινει η βαση (βημα 132). */
  border-bottom-color: var(--pg-border, #2e2e2e);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* Το .header.sticky.active του mainsite βαζει ανοιχτη σκια — λαθος σε σκουρο */
  box-shadow: 0 8px 24px rgb(0 0 0 / .45);
}

/* ── Τρεις στηλες ────────────────────────────────────────────────────
   Grid, ΟΧΙ flex space-between: με flex το κεντρο μετακινειται
   αναλογα με το ποσο φαρδυ ειναι δεξια κι αριστερα. Με 1fr auto 1fr
   το λογοτυπο ειναι ΠΑΝΤΑ στο οπτικο κεντρο.                          */
.header.header.header.header .header__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: auto;
  min-height: 72px;
  max-width: 1568px;
  margin: 0 auto;
  padding: 12px 40px;
  border: 0;
  box-sizing: border-box;
}

.header.header.header.header .header__left   { justify-self: start;  display: flex; align-items: center; }
.header.header.header.header .header__center { justify-self: center; display: flex; align-items: center; }
.header.header.header.header .header__right  { justify-self: end;    display: flex; align-items: center; }

/* ── Το λογοτυπο ────────────────────────────────────────────────────
   ΔΥΟ κανονες, οχι ενας. Ο πρωτος δουλευει ΑΝΕΞΑΡΤΗΤΑ απο το αν εχει
   ανεβει το νεο page.html.twig — γιατι ο εχθρος ειναι:

     body:not(.categoryPage):not(.textPage) .header:not(.sticky) .header__logo
       { left:-160px; position:absolute; top:-160px }          (0,5,1)

   Προσοχη στη μετρηση: .header×4 + .header__logo = (0,5,0), που ΧΑΝΕΙ
   απο το (0,5,1) — ισες κλασεις, αυτο εχει ενα στοιχειο παραπανω.
   Χρειαζονται ΠΕΝΤΕ .header -> (0,6,0).                              */
.header.header.header.header.header .header__logo {
  position: static;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  margin: 0;
  transform: none;
  display: flex;
  align-items: center;
}
.header.header.header.header.header .header__logo :is(img, svg) {
  display: block;
  width: auto;
  height: 34px;
  max-width: none;
}
.header.header.header.header.header .header__logo a {
  display: flex;
  align-items: center;
  line-height: 0;
}

/* ── Το λογοτυπο — (0,6,0), νικαει το (0,5,1) πιο πανω ──────────── */
.header.header.header.header .header__center .header__logo {
  position: static;
  left: auto;
  top: auto;
  margin: 0;
  display: flex;
  align-items: center;
}
.header.header.header.header .header__center .header__logo :is(img, svg) {
  display: block;
  width: auto;
  height: 34px;
  max-width: none;
}
/* Το branding block του Drupal τυλιγει το logo σε <a> */
.header.header.header.header .header__center .header__logo a {
  display: flex;
  align-items: center;
  line-height: 0;
}

/* ── Το burger: τρεις γραμμες + η λεξη ΜΕΝΟΥ ──────────────────────
   Το .lookLayout button:not(…)×9 (0,10,1) εχει :not(.burgerMenu),
   αρα ΔΕΝ μας πιανει. Το .button,button (0,0,1) ομως ναι — γι' αυτο
   δηλωνουμε ρητα min-width/min-height.                               */
.header.header.header.header .burgerMenu {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--pg-text, #e8e8e8);
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  appearance: none;
}

.header.header.header.header .burgerMenu__lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
}
.header.header.header.header .burgerMenu__lines span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .28s ease, opacity .2s ease;
}

.header.header.header.header .burgerMenu__label {
  font-family: var(--pg-font-display, Geologica, Arial, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  color: currentColor;
}

/* Ανοιχτο -> Χ */
.header.header.header.header .burgerMenu.is-open .burgerMenu__lines span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header.header.header.header .burgerMenu.is-open .burgerMenu__lines span:nth-child(2) {
  opacity: 0;
}
.header.header.header.header .burgerMenu.is-open .burgerMenu__lines span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header.header.header.header .burgerMenu:focus-visible {
  outline: 2px solid var(--pg-brand-on-dark, #e55d65);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Athens Voice δεξια ─────────────────────────────────────────── */
.header.header.header.header .header__av-logo {
  display: block;
  height: 16px;
  width: auto;
  opacity: .8;
  transition: opacity .2s ease;
}
.header.header.header.header .header__right a:hover .header__av-logo { opacity: 1; }

/* ── Το φοντο πισω απο το ανοιχτο μενου ─────────────────────────── */
.mainLayer#menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  background: rgb(0 0 0 / .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mainLayer#menu-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Το megaMenu ειναι ηδη στημενο στο mainsite.css (320px, συρεται απο
   αριστερα με .active). Εδω μονο το ανεβαζουμε πανω απο το backdrop. */
.megaMenu#mega-menu { z-index: 2147483641; }

/* ── Κινητο ─────────────────────────────────────────────────────── */
@media (max-width: 766px) {
  .header.header.header.header .header__row {
    min-height: 60px;
    padding: 10px 16px;
  }
  /* ΕΙΧΕ ΕΔΩ height: 26px — ΝΕΚΡΟ, αφαιρεθηκε στο βημα 288.
     Ιδια ειδικοτητα (0,6,1) με τον κανονα του --hdr-logo-h παρακατω
     (γρ. ~502), που ειναι ΜΕΤΑ στο αρχειο: σε ισοβαθμια νικαει ο
     τελευταιος, αρα το 26px δεν βαφτηκε ποτε. Το υψος του λογοτυπου
     το οριζει ΕΝΑ νουμερο, το --hdr-logo-h.                        */
  .header.header.header.header .burgerMenu__lines,
  .header.header.header.header .burgerMenu__lines span { width: 22px; }
  .header.header.header.header .header__av-logo { height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .header.header.header.header,
  .header.header.header.header .burgerMenu__lines span,
  .mainLayer#menu-backdrop { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ADMIN TOOLBAR                                    (βημα 020 - 29/09/2026)

   Οταν εισαι συνδεδεμενος, η toolbar του Drupal ειναι position:fixed
   top:0 με z-index ~1500 και σκεπαζει το header μας (z-index 120).

   ΔΕΝ παλευουμε με z-index — η toolbar ΠΡΕΠΕΙ να ειναι απο πανω.
   Αντ' αυτου κατεβαζουμε το header οσο ειναι το υψος της.

   Οι επισκεπτες ΔΕΝ βλεπουν ποτε toolbar, αρα για αυτους το offset
   ειναι 0 και δεν αλλαζει τιποτα.

   Υψη της toolbar στον Drupal 10/11:
     μπαρα μονη της ................ 39px
     μπαρα + οριζοντιο tray ανοιχτο . 79px
   ═══════════════════════════════════════════════════════════════════════ */

body.toolbar-fixed {
  --pg-admin-offset: 39px;
}
body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open {
  --pg-admin-offset: 79px;
}

/* Το συρομενο μενου ξεκιναει κι αυτο απο top:0 — ιδιο προβλημα,
   ιδια λυση. Αλλιως το Χ του κλεισιματος καθεται κατω απο την toolbar
   και δεν πατιεται.                                                    */
.megaMenu#mega-menu {
  top: var(--pg-admin-offset, 0px);
  height: calc(100vh - var(--pg-admin-offset, 0px));
  height: calc(100svh - var(--pg-admin-offset, 0px));
}

/* Το σκουρο φοντο μενει πληρους οθονης — σωστο, σκεπαζει τα παντα
   εκτος απο την toolbar.                                              */

/* ═══════════════════════════════════════════════════════════════════════
   BURGER — καθαρισμα                                (βημα 025 - 29/09/2026)

   Β27. Ο κανονας του mainsite.css

       .burgerMenu span { display:block; width:18px; height:2px;
                          background:#171717; border-radius:1px; }   (0,1,1)

   δεν χτυπαει μονο τις γραμμες. Χτυπαει ΚΑΘΕ span μεσα στο burger:
     · το .burgerMenu__lines (το περιβλημα των γραμμων)
     · το .burgerMenu__label (η λεξη ΜΕΝΟΥ)

   Και τα δυο γινονταν μαυρες μπαρες υψους 2px. Γι' αυτο οι γραμμες
   φαινονταν μαυρες και το ΜΕΝΟΥ ξεχειλιζε πανω τους.
   ═══════════════════════════════════════════════════════════════════════ */

/* Μηδενισμος για ΟΛΑ τα απευθειας span — (0,5,1) εναντι (0,1,1) */
.header.header.header.header .burgerMenu > span {
  display: block;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

/* Και τωρα ΜΟΝΟ οι πραγματικες γραμμες */
.header.header.header.header .burgerMenu .burgerMenu__lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  height: auto;
  background: none;
}
.header.header.header.header .burgerMenu .burgerMenu__lines span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .28s ease, opacity .2s ease, background-color .2s ease;
}

/* Το .burgerMenu:hover span του mainsite τις εκανε γκρι — (0,2,1).
   Εμεις (0,6,1): κρατιουνται λευκες, απλα λιγο πιο απαλες.          */
.header.header.header.header .burgerMenu:hover .burgerMenu__lines span {
  background: currentColor;
  opacity: .75;   /* βημα 209 — ηταν rgb(255 255 255/.75), καρφωτο λευκο */
}

.header.header.header.header .burgerMenu .burgerMenu__label {
  display: block;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-family: var(--pg-font-display, Geologica, Arial, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  color: currentColor;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   BURGER — τελειως αριστερα, MENU, ιδιο πλατος     (βημα 026 - 29/09/2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Λιγοτερο περιθωριο στα πλαγια.
      ΣΥΜΜΕΤΡΙΚΟ υποχρεωτικα: το grid ειναι 1fr auto 1fr, αρα αν το
      αριστερο padding διαφερει απο το δεξι, το λογοτυπο παυει να ειναι
      στο οπτικο κεντρο. Αλλαζε ΜΟΝΟ το --hdr-pad.                      */
.header.header.header.header {
  --hdr-pad: 20px;
}
.header.header.header.header .header__row {
  padding-inline: var(--hdr-pad);
}

/* 2+3. Το πλατος το οριζει η ΛΕΞΗ, οχι εμεις.
        Με align-items: stretch το κουμπι παιρνει το πλατος του πιο
        φαρδιου παιδιου (= το MENU) και οι γραμμες τεντωνονται σε αυτο
        με width: 100%. Ετσι ταιριαζουν ΑΚΡΙΒΩΣ, οποια γραμματοσειρα ή
        μεγεθος κι αν μπει αυριο — χωρις μαγικα νουμερα.                */
.header.header.header.header .burgerMenu {
  align-items: stretch;
  min-width: 0;
  padding: 0;
  position: relative;
}

.header.header.header.header .burgerMenu .burgerMenu__lines {
  width: 100%;
}
.header.header.header.header .burgerMenu .burgerMenu__lines span {
  width: 100%;
}

.header.header.header.header .burgerMenu .burgerMenu__label {
  text-align: center;
  font-size: 10px;
  letter-spacing: .18em;
  /* Το letter-spacing προσθετει κενο ΜΕΤΑ το τελευταιο γραμμα, αρα το
     κειμενο δειχνει μετατοπισμενο αριστερα. Το ανακτουμε.             */
  text-indent: .18em;
}

/* Η περιοχη αφης μενει 44px χωρις να επηρεαστει η στοιχιση:
   ψευδοστοιχειο που απλωνεται εξω απο το κουμπι.                      */
.header.header.header.header .burgerMenu::after {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -10px;
  right: -10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ΠΛΗΡΕΣ ΠΛΑΤΟΣ                                    (βημα 027 - 29/09/2026)

   Το burger δεν πηγαινε τελειως αριστερα γιατι υπηρχαν ΤΡΕΙΣ περιορισμοι:

     1. δικος μου   .header__row { max-width: 1568px; margin: 0 auto }
     2. mainsite    .header__row { max-width: 1568px; padding: 0 calc(64px + 80px) }
     3. mainsite    .header__logo { max-width: 140px }   (μονο το λογοτυπο)

   Σε οθονη 1920px, το (1) και (2) εκαναν τη μπαρα 1568px κεντραρισμενη,
   αρα το burger ξεκιναγε 176px μεσα απο την ακρη.

   Τωρα η μπαρα πιανει ΟΛΟ το πλατος. Το λογοτυπο μενει στο κεντρο
   ουτως ή αλλως — το grid ειναι 1fr auto 1fr.
   ═══════════════════════════════════════════════════════════════════════ */
.header.header.header.header {
  /* none = πληρες πλατος. Βαλε 1568px αν θελεις να ξαναδεθει στο grid. */
  --hdr-max: none;
}

.header.header.header.header .header__row {
  max-width: var(--hdr-max, none);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--hdr-pad);
}

/* Το κουτι του λογοτυπου ειχε max-width 140px απο το mainsite —
   δεν εκοβε την εικονα (ειναι ~71px) αλλα το μηδενιζουμε για να μη
   μας εκπληξει αν μπει μεγαλυτερο λογοτυπο.                          */
.header.header.header.header.header .header__logo {
  max-width: none;
  min-width: 0;
  width: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   ΜΕΓΕΘΟΣ ΛΟΓΟΤΥΠΟΥ                                (βημα 028 - 29/09/2026)
   Ηταν 34px — πολυ μικρο για κεντραρισμενο λογοτυπο τυπου Crack.
   Ενα νουμερο το ελεγχει, και η μπαρα προσαρμοζεται μονη της.
   ═══════════════════════════════════════════════════════════════════════ */
.header.header.header.header {
  --hdr-logo-h: 50px;
}

/* Οι δυο κανονες του λογοτυπου (με και χωρις .header__center) δειχνουν
   και οι δυο εδω, ωστε να μην ξεχαστει ο ενας.                        */
.header.header.header.header .header__center .header__logo :is(img, svg),
.header.header.header.header.header .header__logo :is(img, svg) {
  height: var(--hdr-logo-h);
  width: auto;
  max-width: none;
}

/* Η μπαρα μεγαλωνει μαζι του — 14px αερας πανω και κατω. */
.header.header.header.header .header__row {
  min-height: calc(var(--hdr-logo-h) + 28px);
}

@media (max-width: 766px) {
  .header.header.header.header {
    /* ΒΗΜΑ 288 — 34px → 42px. Ενα νουμερο· η μπαρα ακολουθει μονη
       της απο το calc() παρακατω, και το sticky-nav.js ξαναμετραει
       το πραγματικο υψος στο --hdr-real-h, αρα δεν χρειαζεται καμια
       αλλη αλλαγη για να μη μετακινηθει το αρθρο απο κατω.         */
    --hdr-logo-h: 42px;
  }
  .header.header.header.header .header__row {
    min-height: calc(var(--hdr-logo-h) + 22px);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ΠΟΤΕ ΣΚΟΥΡΑΙΝΕΙ Η ΜΠΑΡΑ                          (βημα 031 - 29/09/2026)

   ΙΣΤΟΡΙΚΟ, ΤΡΕΙΣ ΦΑΣΕΙΣ — διαβασε το μεχρι το τελος πριν αλλαξεις
   οτιδηποτε, γιατι η καθε φαση ακυρωσε την προηγουμενη.

   1. Αρχικα: στα 80px σκρολ (η κλαση .active του sticky-nav.js).
   2. Βημα 031: μολις ΤΕΛΕΙΩΣΕΙ το hero, με IntersectionObserver πανω
      στο ιδιο το carousel. Λογος: με hero 100svh τα 80px σκουραιναν
      τη μπαρα ενω ησουν ακομα μεσα στο carousel.
   3. ΒΗΜΑ 294 (02/11/2026) — ΠΙΣΩ ΣΤΟ ΚΑΤΩΦΛΙ, ΖΗΤΗΘΗΚΕ ΡΗΤΑ:
      «με το που ξεκινησεις να σκρολαρεις μετα απο πολυ λιγο να μπαινει
      κανονικα το μπακγκραουντ». Ο IntersectionObserver αφαιρεθηκε· ενα
      κατωφλι, ιδιο για ΟΛΕΣ τις σελιδες.

   ΤΟ ΚΑΤΩΦΛΙ ΕΙΝΑΙ 80 ΚΑΙ ΟΧΙ 40 — ΔΕΝ ΕΙΝΑΙ ΑΥΘΑΙΡΕΤΟ:
   η σειρα κατηγοριων κρυβεται με :not(.is-past-hero) (δες τον κανονα
   «ΟΙ ΚΑΤΗΓΟΡΙΕΣ ΠΑΝΩ ΑΠΟ ΤΟ CAROUSEL» πιο κατω) και μαζευεται με
   .active, που μπαινει στα 80. Με κατωφλι 40 θα υπηρχε παραθυρο
   40…80px οπου το is-past-hero ειναι ΟΝ και το .active ακομα OFF — η
   σειρα κατηγοριων θα ΑΝΟΙΓΕ για 40 pixel σκρολ και θα ξανεκλεινε.
   Με το ΙΔΙΟ νουμερο, η μεταβαση ειναι μια και καθαρη.

   Στο sticky-nav.js ειναι ΕΝΑ const threshold, κοινο και για τα δυο —
   δεν μπορουν να ξεσυγχρονιστουν.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   ΣΕΙΡΑ ΚΑΤΗΓΟΡΙΩΝ ΚΑΤΩ ΑΠΟ ΤΟ ΛΟΓΟΤΥΠΟ      (βημα 071 - 05/10/2026)

   Προτυπο: το header του Pitchfork. Δυο σειρες —
     1η: μπεργκερ + MENU αριστερα, λογοτυπο κεντρο
     2η: οι κατηγοριες, κεντραρισμενες, με λεπτη γραμμη απο πανω
   Στο σκρολ η δευτερη σειρα μαζευεται και μενει μονο η πρωτη.

   ΧΩΡΙΣ ΚΑΘΟΛΟΥ JS: το sticky-nav.js προσθετει ηδη την κλαση .active
   στο header οταν window.scrollY > 80 (γραμμη 148). Την διαβαζουμε.

   Η μεταβαση γινεται με max-height και ΟΧΙ με grid-template-rows: 0fr,
   που ειναι πιο καθαρο αλλα θελει Chrome 117+ / Safari 17.4+. Ισχυει
   ο κανονας που βαλαμε στο βημα 006: αν δεν δουλευει σε ολους τους
   browser, δεν μπαινει.
   ═══════════════════════════════════════════════════════════════════════ */

html:root {
  --hdr-cats-h: 52px;
  /* ΤΟ ΠΡΑΓΜΑΤΙΚΟ ΥΨΟΣ ΤΗΣ ΣΕΙΡΑΣ ΤΟΥ HEADER — βημα 155.
     Δεν ειναι μαντεψια: ειναι το min-height: 72px του .header__row
     συν το padding-block: 12px × 2 = 96px. Σε κινητο, 60 + 10×2 = 80.

     Υπαρχει ηδη το --pg-header-h στο tokens.css, αλλα ειναι 48px —
     κληρονομια του παλιου header, που ηταν χαμηλοτερος. Δεν το
     πειραζουμε γιατι μπορει να το διαβαζει και αλλος κωδικας· βαζουμε
     δικο μας με το σωστο νουμερο.                                   */
  --hdr-row-h: 96px;
}
@media (max-width: 766px) {
  html:root { --hdr-row-h: 80px; }
}

.header.header.header.header .header__cats {
  overflow: hidden;
  max-height: 120px;          /* με περισσευμα, ωστε να χωραει αν σπασει σε δυο σειρες */
  opacity: 1;
  border-top: 1px solid var(--pg-border, #2e2e2e);
  transition: max-height .28s ease, opacity .18s ease, border-top-color .28s ease;
}

/* Στο σκρολ μαζευεται */
.header.header.header.header.active .header__cats {
  max-height: 0;
  opacity: 0;
  border-top-color: transparent;
}

.header.header.header.header .header__cats ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 26px;
  margin: 0;
  padding: 13px var(--hdr-pad, 20px);
  list-style: none;
}
.header.header.header.header .header__cats li { margin: 0; padding: 0; }
.header.header.header.header .header__cats li::before { content: none; }

.header.header.header.header .header__cats a {
  display: block;
  font-family: var(--pg-font-cond, 'Sofia Sans Condensed', Arial, sans-serif);
  font-size: 0.9333rem;        /* 14px στο root 15px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pg-text, #e8e8e8);
  text-decoration: none;
  transition: color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .header.header.header.header .header__cats a:hover { color: var(--pg-section-accent, rgb(255, 72, 72)); }
}
.header.header.header.header .header__cats a:focus-visible {
  outline: 2px solid var(--pg-section-accent, rgb(255, 72, 72));
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .header.header.header.header .header__cats { transition: none; }
  /* βημα 132 — και η μεταβαση του ιδιου του header */
  .header.header.header.header { transition: none; }
}


/* ── Η ΤΡΕΧΟΥΣΑ ΚΑΤΗΓΟΡΙΑ ─────────────────────────────────────────────
   Το Drupal σημαδευει μονο του το ενεργο στοιχειο: ο menu tree
   manipulator «generateIndexAndSort» βαζει menu-item--active-trail στο
   <li>, και η βιβλιοθηκη drupal.active-link βαζει is-active στο <a>.
   Πιανουμε και τα δυο — το πρωτο ερχεται απο τον server, το δευτερο
   απο JS, και δεν ειναι παντα ενεργοποιημενο.

   ΔΥΟ σηματα, οχι ενα: χρωμα ΚΑΙ υπογραμμιση. Μονο το χρωμα δεν θα
   εφτανε, γιατι ειναι το ιδιο κοκκινο με το hover — ο αναγνωστης δεν
   θα ξεχωριζε το «εδω ειμαι» απο το «εδω εχω τον κερσορα».

   Το pointer-events: none σβηνει το κλικ με ποντικι. Με πληκτρολογιο
   παραμενει προσβασιμο· το Enter απλα ξαναφορτωνει την ιδια σελιδα,
   που ειναι αβλαβες — και προτιμοτερο απο το να βγει το στοιχειο
   εντελως απο τη σειρα του Tab.                                      */
.header.header.header.header .header__cats li.menu-item--active-trail > a,
.header.header.header.header .header__cats a.is-active {
  color: var(--pg-section-accent, rgb(255, 72, 72));
  pointer-events: none;
  cursor: default;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--pg-section-accent, rgb(255, 72, 72));
}


/* ═══ ΟΙ ΚΑΤΗΓΟΡΙΕΣ ΦΕΥΓΟΥΝ ΠΑΝΩ ΑΠΟ ΤΟ CAROUSEL ════════════════════
   βημα 094 · 07/10/2026

   Η σειρα κατηγοριων (βημα 081) σχεδιαστηκε για αρχικη ΧΩΡΙΣ hero, οπου
   το header εχει φοντο και τα ονοματα διαβαζονται. Με το carousel πισω,
   το header ειναι ΔΙΑΦΑΝΕΣ — αρα οι κατηγοριες και η γραμμη τους
   καθονται πανω στη φωτογραφια.

   ΓΙΑΤΙ Η ΣΥΝΘΗΚΗ ΕΧΕΙ ΔΥΟ ΣΚΕΛΗ

     :has([data-hero-carousel])   υπαρχει carousel στη σελιδα
     :not(.is-past-hero)          και ειμαστε ΑΚΟΜΑ πανω του

   Το δευτερο ΔΕΝ αρκει μονο του. Χωρις hero, το sticky-nav.js πεφτει
   σε εφεδρικο (scrollY > 40) — αρα στην κορυφη της αρχικης ΧΩΡΙΣ
   carousel το .is-past-hero λειπει κι εκει. Με μονο αυτο το σκελος θα
   κρυβαμε τις κατηγοριες ακριβως εκει που πρεπει να φαινονται.

   Η ΓΡΑΜΜΗ: δεν αρκει το max-height: 0. Το border ειναι ΕΞΩ απο το
   content box, αρα θα εμενε ορατη μια γραμμη 1px πανω στη φωτογραφια.
   Γι' αυτο border-top-color: transparent — ιδιο με τον κανονα του
   .active, ωστε το transition να ειναι το ιδιο.

   ΜΕΤΑ ΤΟ HERO δεν επιστρεφουν: εχεις ηδη σκρολαρει, αρα το header
   ειναι .active και ο υπαρχων κανονας τις μαζευει ετσι κι αλλιως.

   Ειδικοτητα: (0,7,2) εναντι (0,5,0) του κανονα που τις ανοιγει.    */
html body:has([data-hero-carousel])
  .header.header.header.header:not(.is-past-hero) .header__cats {
  max-height: 0;
  opacity: 0;
  border-top-color: transparent;
}


/* ═══════════════════════════════════════════════════════════════════════
   ΤΟ ΜΕΝΟΥ ΩΣ ΕΥΡΕΤΗΡΙΟ — ΚΑΤΕΒΑΙΝΕΙ ΑΠΟ ΠΑΝΩ   (βημα 144 - 12/10/2026)

   ΠΡΙΝ: συρταρι 320px απο αριστερα (mainsite.css:3941), με το ιδιο
   περιεχομενο που εδειχνε ηδη η μπαρα απο πανω.

   ΤΩΡΑ: κουρτινα πληρους πλατους που κατεβαινει απο τον header, με τις
   κατηγοριες σε ΣΤΗΛΕΣ — γονεας μεγαλος, παιδια απο κατω. Ολη η δομη
   του site με μια ματια, χωρις σκρολ.

   ΤΡΕΙΣ ΛΟΓΟΙ ΓΙΑ «ΑΠΟ ΠΑΝΩ» ΚΑΙ ΟΧΙ ΑΠΟ ΤΟ ΠΛΑΪ
   1. Ο header ειναι ΕΝΙΑΙΟ αντικειμενο πληρους πλατους: burger
      αριστερα, λογοτυπο στο ΚΕΝΤΡΟ. Πανελ που κατεβαινει απο ολοκληρο
      τον header διαβαζεται ως «ο header ανοιξε» — που ειναι ακριβως
      αυτο που συμβαινει. Συρταρι απο τη μια γωνια αγνοει τα αλλα δυο
      τριτα.
   2. Με τις υποκατηγοριες (βημα 143) τα 320px δεν φτανουν: 5 γονεις +
      παιδια σε στηλη 320px ειναι μακρυ σκρολ.
   3. Ταιριαζει με το υπολοιπο: hero πληρους οθονης, ενοτητες απο ακρη
      σε ακρη, max-width που βγηκε επιτηδες στο βημα 117.

   ΤΟ JS ΔΕΝ ΑΓΓΙΧΤΗΚΕ. Το sticky-nav.js αλλαζει ΜΟΝΟ την κλαση
   .active — η φορα, το μεγεθος και η κινηση ειναι ολα εδω.

   ΕΙΔΙΚΟΤΗΤΑ: #mega-menu δινει (1,x,x). Το mainsite παιζει σε (0,2,0)
   το πολυ, αρα δεν χρειαζονται επαναλαμβανομενες κλασεις πουθενα.
   ═══════════════════════════════════════════════════════════════════════ */

.megaMenu#mega-menu {
  /* ΤΟ position ΕΙΝΑΙ ΔΙΚΟ ΜΑΣ — βημα 154.
     Ηταν κληρονομια απο mainsite.css:3941 (.megaMenu { position: fixed }).
     Στη σελιδα /search/node το mainsite ΔΕΝ φορτωνει, αρα το μενου
     γινοταν position: static: κανονικο μπλοκ στη ροη με height 100svh.

     Το visibility: hidden το ΚΡΥΒΕΙ αλλα ΔΕΝ του παιρνει τον χωρο.
     Το translateY(-100%) το μετακινει οπτικα, ο χωρος μενει. Αρα η
     σελιδα ξεκινουσε με ΜΙΑ ΟΛΟΚΛΗΡΗ ΟΘΟΝΗ κενο — αορατο, αλλα
     υπαρκτο.

     ΚΑΝΟΝΑΣ: καθε κανονας μας που στηνει ΔΙΑΤΑΞΗ πρεπει να δηλωνει
     ΟΛΑ τα θεμελιωδη (position, display) και οχι να τα δανειζεται απο
     το mainsite — γιατι το mainsite ΔΕΝ φορτωνει παντου.            */
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;

  /* ΠΛΗΡΗΣ ΟΘΟΝΗ — βημα 147.
     Ειχε δοκιμαστει «υψος οσο το περιεχομενο» (βημα 144), ωστε να
     φαινεται οτι απο κατω συνεχιζει η σελιδα. Απορριφθηκε: το μισο
     πανελ εμοιαζε με ειδοποιηση που κατεβηκε, οχι με μενου.
     Το svh και οχι vh: το vh στα κινητα μετραει με τη μπαρα URL
     κρυμμενη, αρα το πανελ ξεφευγε κατω απο την οθονη.               */
  height: calc(100vh - var(--pg-admin-offset, 0px));
  height: calc(100svh - var(--pg-admin-offset, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;

  background: rgb(18 18 18 / .97);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--pg-border, #2e2e2e);
  box-shadow: none;

  /* ΑΠΟ ΠΑΝΩ. Το mainsite εχει translateX(-100%) — το ακυρωνουμε. */
  transform: translateY(-100%);

  /* ΟΤΑΝ ΕΙΝΑΙ ΚΛΕΙΣΤΟ, ΔΕΝ ΖΩΓΡΑΦΙΖΕΤΑΙ ΚΑΘΟΛΟΥ — βημα 145.
     Το translateY(-100%) το βγαζει εκτος οθονης, ΑΛΛΑ το στοιχειο
     παραμενει: position: fixed, z-index 2147483641, και κυριως
     backdrop-filter. Ενα στοιχειο με backdrop-filter θολωνει ο,τι
     ειναι ΠΙΣΩ του, και σε αρκετους browsers αυτο το στρωμα διαρρεει
     ακομα κι οταν το στοιχειο ειναι μετατοπισμενο — σκοτεινη ζωνη
     πανω απο την admin toolbar.

     Το visibility: hidden το σβηνει ΟΛΟΚΛΗΡΟ: καμια ζωγραφικη, κανενα
     στρωμα, καμια σκια.

     ΚΑΙ ΚΑΤΙ ΠΙΟ ΣΟΒΑΡΟ: χωρις αυτο, οι συνδεσμοι του κλειστου μενου
     ΠΑΡΑΜΕΝΟΥΝ ΕΣΤΙΑΣΙΜΟΙ ΜΕ TAB. Το aria-hidden που βαζει το
     sticky-nav.js λεει στους screen readers να το αγνοησουν, αλλα ΔΕΝ
     το βγαζει απο τη σειρα εστιασης — ο χρηστης πληκτρολογιου θα
     επεφτε σε αορατους συνδεσμους.

     Η ΚΑΘΥΣΤΕΡΗΣΗ ΕΙΝΑΙ ΤΟ ΚΛΕΙΔΙ: στο κλεισιμο το visibility αλλαζει
     ΜΕΤΑ απο .52s, ωστε να προλαβει να παιξει η κινηση. Στο ανοιγμα
     αλλαζει ΑΜΕΣΩΣ (0s), αλλιως το πανελ θα εμφανιζοταν ηδη
     κατεβασμενο.                                                     */
  visibility: hidden;
  transition: transform .52s cubic-bezier(.16, 1, .3, 1),
              visibility 0s linear .52s;
}

.megaMenu#mega-menu.active {
  transform: translateY(0);
  box-shadow: 0 28px 70px rgb(0 0 0 / .55);
  visibility: visible;
  transition: transform .52s cubic-bezier(.16, 1, .3, 1),
              visibility 0s linear 0s;
}

/* ── Ο χωρος μεσα ────────────────────────────────────────────────── */
.megaMenu#mega-menu .megaMenu__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1500px;
  min-height: 100%;
  margin: 0 auto;
  /* βημα 214 — ηταν clamp(54px,8vh,104px) πανω και clamp(44px,7vh,84px)
     κατω. Με το μενου σε στηλη 420px το κενο αυτο ηταν φτιαγμενο για
     κουρτινα πληρους πλατους, οχι για πανελ.                        */
  padding: clamp(22px, 3.2vh, 38px) clamp(20px, 4.5vw, 64px) clamp(18px, 2.8vh, 32px);
}

/* ΚΑΤΑΚΟΡΥΦΟ ΚΕΝΤΡΑΡΙΣΜΑ ΜΕ margin, ΟΧΙ justify-content — βημα 147.
   Σε πληρη οθονη η λιστα θα κρεμοταν στην κορυφη με κενο απο κατω.
   ΓΙΑΤΙ ΟΧΙ justify-content: center: οταν το περιεχομενο ΞΕΠΕΡΑΣΕΙ το
   υψος, το κεντραρισμα σπρωχνει την ΚΟΡΥΦΗ του εξω απο τον περιεκτη
   με overflow — και η πρωτη κατηγορια γινεται απροσιτη, ΧΩΡΙΣ να
   μπορεις να σκρολαρεις προς τα πανω. Με margin: auto το κεντραρισμα
   υποχωρει μονο του μολις το περιεχομενο γεμισει τον χωρο.
   ΓΙΑ ΣΤΟΙΧΙΣΗ ΣΤΗΝ ΚΟΡΥΦΗ: σβησε αυτον τον κανονα.                */
.megaMenu#mega-menu .megaMenu__content > .primaryNav {
  margin-block: auto;
}

/* ── Το Χ: πανω δεξια, λεπτο ──────────────────────────────────────
   Το mainsite το εχει margin: 0 0 16px 40px — δηλαδη ΜΕΣΑ στη ροη,
   πανω αριστερα. Σε κουρτινα πληρους πλατους ανηκει στη γωνια.      */
.megaMenu#mega-menu .megaMenu__close {
  position: absolute;
  /* ΤΟ z-index ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ — βημα 146.
     Το mainsite δινει position: relative σε ΚΑΘΕ .megaMenu li
     (γρ. 8683). Τα τοποθετημενα στοιχεια ζωγραφιζονται σε ανωτερο
     στρωμα απο τα κανονικα, και μεταξυ τους κερδιζει ΤΟ ΤΕΛΕΥΤΑΙΟ ΣΤΟ
     DOM. Τα li ερχονται μετα τον X, αρα καθονταν απο πανω του — και ο
     X δεν ηταν πατησιμος σε οποιο σημειο τους επικαλυπτε.
     Το hit testing ακολουθει ΑΚΡΙΒΩΣ τη σειρα ζωγραφικης: αν κατι
     ζωγραφιζεται απο πανω, παιρνει αυτο το κλικ — ακομα κι αν ειναι
     διαφανες. */
  z-index: 10;
  top: clamp(12px, 2.2vh, 24px);
  right: clamp(14px, 3.5vw, 44px);
  margin: 0;
  width: 44px;
  height: 44px;
  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1;
  color: var(--pg-text-muted, #a0a0a0);
  /* ΧΩΡΙΣ transform — βημα 146.
     Ειχε rotate(90deg) στο hover. Το ιδιο ειχε απορριφθει ρητα στο
     βελακι «Περισσοτερα» (βημα 112): «δεν θελω να κουνιεται». Η
     κινηση σε στοιχειο ελεγχου δεν προσθετει πληροφορια — το χρωμα
     λεει το ιδιο πραγμα και δεν μετακινει τον στοχο κατω απο το
     δαχτυλο. */
  transition: color .2s ease;
}

/* ── ΟΙ ΣΤΗΛΕΣ ───────────────────────────────────────────────────── */
.megaMenu#mega-menu .primaryNav {
  display: block;
  width: 100%;
}

/* ΚΑΘΕΤΗ ΛΙΣΤΑ, ΜΙΑ ΚΑΤΗΓΟΡΙΑ ΑΝΑ ΣΕΙΡΑ — βημα 147.
   Ηταν πλεγμα στηλων (βημα 144)· απορριφθηκε. Η καθετη λιστα διαβαζεται
   με μια κινηση του ματιου απο πανω προς τα κατω, ενω οι στηλες
   αναγκαζουν το ματι να πηδαει οριζοντια και να ξαναβρισκει αρχη.

   Το «>» ειναι ΚΡΙΣΙΜΟ: το .primaryNav__sub εχει ΚΑΙ ΑΥΤΟ την κλαση
   .primaryNav__list. Χωρις αυτο, ο κανονας θα επιανε και τις ενθετες
   λιστες.                                                            */
.megaMenu#mega-menu .primaryNav > .primaryNav__list {
  display: block;
  /* ΤΟ ΠΛΑΤΟΣ ΤΗΣ ΛΙΣΤΑΣ — βημα 150. ΕΝΑΣ ΑΡΙΘΜΟΣ, ΤΡΙΑ ΠΡΑΓΜΑΤΑ.
     Οριζει ταυτοχρονα:
       · ποσο μακριες ειναι οι γραμμες κατω απο καθε κατηγορια
       · που ξεκιναει το υπομενου (left: 100% της λιστας)
       · το μετρο αναγνωσης της στηλης

     Ηταν 820px — πλατος γραμμης για ονοματα πεντε γραμματων, και το
     υπομενου εφευγε 820px δεξια. Στα 380px οι γραμμες ακολουθουν το
     κειμενο και οι υποκατηγοριες ερχονται διπλα του.

     ΑΛΛΑΖΕΙ ΑΠΟ ΕΔΩ ΚΑΙ ΜΟΝΟ. Το margin: 0 την κραταει ΑΡΙΣΤΕΡΑ, οχι
     κεντραρισμενη: ευρετηριο, οχι αφισα.                             */
  --hdr-cat-w: 380px;
  max-width: var(--hdr-cat-w, 380px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.megaMenu#mega-menu .primaryNav > .primaryNav__list > .primaryNav__item {
  display: block;
  width: auto;
  /* Το mainsite δινει height: 48px σε καθε .megaMenu li — με παιδια απο
     κατω αυτο θα εκοβε τα παντα.                                     */
  height: auto;
  margin: 0;
  padding: clamp(6px, 0.9vh, 9px) 0;   /* βημα 215 — ηταν 9/1.2vh/13, πριν 14/1.8vh/20 */
  border-top: 1px solid var(--pg-border, #2e2e2e);
}

/* Η τελευταια παιρνει και κατω γραμμη, ωστε η λιστα να κλεινει. */
.megaMenu#mega-menu .primaryNav > .primaryNav__list > .primaryNav__item:last-child {
  border-bottom: 1px solid var(--pg-border, #2e2e2e);
}

/* ── Ο ΓΟΝΕΑΣ: ιδια φωνη με τις επικεφαλιδες των ενοτητων ─────────
   Geologica, πλαγια 10°, ιδια axes. Ετσι το μενου αναγνωριζεται
   αμεσως ως ΤΟ ΙΔΙΟ site — δεν ειναι διακοσμηση, ειναι συνεπεια.    */
.megaMenu#mega-menu .primaryNav > .primaryNav__list > .primaryNav__item > a {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  font-family: var(--pg-font-display, Geologica, Arial, sans-serif);
  /* ΒΗΜΑ 215 — ηταν clamp(1.4rem, 2.1vw, 2rem) = 21-30px.
     Με το κουμπι στα 30px, ΤΟ ΚΕΙΜΕΝΟ εγινε το δαπεδο του υψους της
     σειρας: 30px γραμματα × line-height 1.08 = ~32px, περισσοτερο απο
     το κουμπι. Χωρις να πεσει κι αυτο, τα υπολοιπα δεν ειχαν
     αποτελεσμα. ΑΝ ΧΡΕΙΑΣΤΕΙ ΚΙ ΑΛΛΟ ΜΑΖΕΜΑ, ΕΔΩ ειναι το νουμερο. */
  font-size: clamp(1.25rem, 1.8vw, 1.72rem);
  font-weight: 700;
  font-style: oblique 10deg;
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  line-height: 1.08;
  letter-spacing: -.012em;
  text-transform: none;
  text-decoration: none;
  color: var(--pg-title-ink, #f2f2f2);
  background: none;
  /* ΧΩΡΙΣ ΠΕΡΙΓΡΑΜΜΑ — βημα 149.
     mainsite.css:3919  .lookLayout .primaryNav li a { border-bottom: 2px solid transparent }
     mainsite.css:21705 .lookLayout .primaryNav li a:hover { border-color: #000 }
     Δηλαδη καθε συνδεσμος κουβαλαει αορατη γραμμη 2px που γινεται
     ΜΑΥΡΗ στο hover — αορατη σε λευκο φοντο, μαυρη πλακα σε μαυρο.
     Το border: 0 τη βγαζει και στις δυο καταστασεις.                */
  border: 0;
  transition: color .2s ease;
}

/* ── ΤΑ ΠΑΙΔΙΑ: μικρα, πεζα, γκριζα ──────────────────────────────── */
/* ── ΒΑΣΗ: οι υποκατηγοριες ΟΡΑΤΕΣ, σε σειρα κατω απο τον γονεα ───
   Αυτη ειναι η κατασταση για ΟΘΟΝΕΣ ΑΦΗΣ και για στενα παραθυρα, οπου
   δεν υπαρχει hover: αν τις κρυβαμε, θα ηταν ΑΠΡΟΣΙΤΕΣ. Το «πεταγμα
   στο πλαι» ειναι ΠΡΟΣΘΗΚΗ για ποντικι, οχι η βαση.                 */
.megaMenu#mega-menu .primaryNav__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 9px 0 0;
  margin: 0;
  list-style: none;
}

/* ── ΠΟΙΟΙ ΓΟΝΕΙΣ ΕΧΟΥΝ ΠΑΙΔΙΑ — βημα 148 ────────────────────────
   Το :has() ρωταει «περιεχει αυτο το li ενθετη λιστα;». Ιδια
   γραμματοσειρα, ιδιο μεγεθος — αλλαζει ΜΟΝΟ ο τονος: οι κατηγοριες
   που ανοιγουν περισσοτερα ειναι πιο φωτεινες.

   ΚΑΙ ΕΝΑ ΣΗΜΑΔΙ ΠΕΡΑ ΑΠΟ ΤΟ ΧΡΩΜΑ: το «›» μετα το ονομα. Το χρωμα
   μονο του δεν ειναι αρκετο — περιπου το 8% των ανδρων δεν ξεχωριζει
   αξιοπιστα αποχρωσεις. Αν δεν σου αρεσει, σβησε ΜΟΝΟ τον κανονα
   ::after· το χρωμα μενει.                                          */
/* ΒΗΜΑ 149: ΟΛΕΣ οι κατηγοριες λευκες. Πριν, οσες ΔΕΝ ειχαν παιδια
   ηταν γκριζες — διαβαζοταν ως «δευτερης κατηγοριας», ενω απλως δεν
   εχουν υποδιαιρεσεις. Ο διαχωρισμος τον κανει πλεον ΜΟΝΟ το «›».   */

.megaMenu#mega-menu .primaryNav > .primaryNav__list
  > .primaryNav__item:has(.primaryNav__sub) > a::after {
  content: '\203A';            /* › */
  margin-left: .38em;
  font-size: .78em;
  font-style: normal;
  vertical-align: .04em;
  color: var(--pg-text-faint, #6e6e6e);
}

/* ΒΗΜΑ 211 — ΤΟ «ΠΕΤΑΓΜΑ ΣΤΟ ΠΛΑΙ» ΑΦΑΙΡΕΘΗΚΕ.
   Ηταν ~55 γραμμες που εβγαζαν τις υποκατηγοριες δεξια του γονεα στο
   hover, μονο σε ποντικι και ≥900px. Αντικαθισταται απο ακορντεον με
   κλικ: δουλευει ΚΑΙ σε αφη, ΚΑΙ με πληκτρολογιο, ΚΑΙ σε στενο πανελ.
   Η βαση (υποκατηγοριες απο κατω) μενει και γινεται η μονη συμπεριφορα.
   Το σκεπτικο του παλιου: CHANGELOG βηματα 148-150.                */

.megaMenu#mega-menu .primaryNav__sub > .primaryNav__item {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ΒΗΜΑ 149: ΙΔΙΑ ΓΡΑΜΜΑΤΟΣΕΙΡΑ ΜΕ ΤΟΝ ΓΟΝΕΑ, μεγαλυτερο μεγεθος.
   Ηταν Sofia Sans Condensed 1rem. Τωρα Geologica, οπως ο γονεας: η
   ιεραρχια φαινεται απο ΜΕΓΕΘΟΣ και ΤΟΝΟ, οχι απο αλλαγη οικογενειας.
   Δυο γραμματοσειρες σε δυο επιπεδα της ιδιας λιστας διαβαζονται ως
   δυο διαφορετικα πραγματα — ειναι το ιδιο πραγμα, πιο μεσα.        */
.megaMenu#mega-menu .primaryNav__sub > .primaryNav__item > a {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  font-family: var(--pg-font-display, Geologica, Arial, sans-serif);
  font-size: 1.22rem;
  font-weight: 500;
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  letter-spacing: -.004em;
  line-height: 1.3;
  text-transform: none;
  text-decoration: none;
  /* «Λιγο πιο σκουρες απο λευκες»: ο γονεας #f2f2f2, αυτες εδω
     σκαλι πιο κατω. Αλλαζει απο ΕΝΑ σημειο.                        */
  color: var(--hdr-sub-ink, #9a9a9a);
  background: none;
  border: 0;
  transition: color .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .megaMenu#mega-menu .primaryNav > .primaryNav__list > .primaryNav__item > a:hover,
  .megaMenu#mega-menu .primaryNav__sub > .primaryNav__item > a:hover,
  .megaMenu#mega-menu .megaMenu__close:hover {
    color: var(--pg-section-accent, rgb(255, 72, 72));
    background: none;
  }
}

.megaMenu#mega-menu :is(a, button):focus-visible {
  outline: 2px solid var(--pg-section-accent, rgb(255, 72, 72));
  outline-offset: 4px;
}

/* ── Η ΚΙΝΗΣΗ: οι στηλες μπαινουν με σειρα ───────────────────────
   Η κουρτινα κατεβαινει, και οι στηλες ανεβαινουν μεσα της με μικρη
   καθυστερηση η καθεμια. Ειναι ο λογος που η κινηση δεν μοιαζει με
   «πανελ που εμφανιστηκε» αλλα με κατι που ΧΤΙΖΕΤΑΙ.

   Οι καθυστερησεις ισχυουν ΜΟΝΟ στο ανοιγμα: στο κλεισιμο ολα
   φευγουν μαζι, γιατι το σταδιακο κλεισιμο δινει την αισθηση οτι το
   μενου κολλαει.                                                     */
.megaMenu#mega-menu .primaryNav > .primaryNav__list > .primaryNav__item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .34s ease, transform .46s cubic-bezier(.16, 1, .3, 1);
}
.megaMenu#mega-menu.active .primaryNav > .primaryNav__list > .primaryNav__item {
  opacity: 1;
  transform: none;
}
.megaMenu#mega-menu.active .primaryNav > .primaryNav__list > .primaryNav__item:nth-child(1) { transition-delay: .16s; }
.megaMenu#mega-menu.active .primaryNav > .primaryNav__list > .primaryNav__item:nth-child(2) { transition-delay: .22s; }
.megaMenu#mega-menu.active .primaryNav > .primaryNav__list > .primaryNav__item:nth-child(3) { transition-delay: .28s; }
.megaMenu#mega-menu.active .primaryNav > .primaryNav__list > .primaryNav__item:nth-child(4) { transition-delay: .34s; }
.megaMenu#mega-menu.active .primaryNav > .primaryNav__list > .primaryNav__item:nth-child(5) { transition-delay: .40s; }
.megaMenu#mega-menu.active .primaryNav > .primaryNav__list > .primaryNav__item:nth-child(6) { transition-delay: .46s; }
.megaMenu#mega-menu.active .primaryNav > .primaryNav__list > .primaryNav__item:nth-child(n+7) { transition-delay: .52s; }

/* ── Κινητο: μια στηλη, μικροτερα κενα ──────────────────────────── */
@media (max-width: 766px) {
  .megaMenu#mega-menu .megaMenu__content {
    padding: 64px 20px 40px;
  }
  /* Η λιστα ειναι ηδη καθετη — δεν χρειαζεται αλλαγη διαταξης,
     μονο μικροτερος τιτλος.                                         */
  .megaMenu#mega-menu .primaryNav > .primaryNav__list > .primaryNav__item > a {
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* ΠΡΟΣΟΧΗ: το transition ΔΕΝ μηδενιζεται εντελως στο πανελ — το
     visibility πρεπει να κρατησει την καθυστερηση του, αλλιως το μενου
     εξαφανιζεται ΑΚΑΡΙΑΙΑ στο κλεισιμο και φαινεται σαν σφαλμα. Μονο
     το transform φευγει.                                            */
  .megaMenu#mega-menu {
    transition: visibility 0s linear .01s;
  }
  .megaMenu#mega-menu.active {
    transition: visibility 0s linear 0s;
  }
  .megaMenu#mega-menu .primaryNav > .primaryNav__list > .primaryNav__item,
  .megaMenu#mega-menu .megaMenu__close {
    transition: none;
  }
  .megaMenu#mega-menu .primaryNav > .primaryNav__list > .primaryNav__item {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ΑΝΑΖΗΤΗΣΗ ΣΤΟ HEADER                             (βημα 151 - 12/10/2026)

   ΧΩΡΙΣ ΚΑΘΟΛΟΥ JAVASCRIPT. Το εικονιδιο ειναι <label for> του πεδιου:
   το κλικ σε label εστιαζει το πεδιο του, και το :focus-within στο
   <form> το ανοιγει. Καμια κλαση να μπει, κανενα συμβαν να ακουστει.

   ΓΙΑΤΙ ΤΟ ΠΕΔΙΟ ΕΙΝΑΙ ΑΠΟΛΥΤΟ ΚΑΙ ΟΧΙ ΣΤΗ ΡΟΗ:
   Σε ροη, το ανοιγμα θα πλαταινε την τριτη στηλη του header και θα
   εσπρωχνε το λογοτυπο ΕΚΤΟΣ ΚΕΝΤΡΟΥ — το grid ειναι 1fr auto 1fr και
   οι δυο ακραιες στηλες μοιραζονται τον χωρο. Απολυτο, ανοιγει ΠΑΝΩ
   απο τον header προς τα αριστερα και δεν μετακινει τιποτα.
   Ιδια συμπεριφορα σε καθε πλατος — κανενα breakpoint.

   ΔΟΥΛΕΥΕΙ ΚΑΙ ΧΩΡΙΣ CSS: η φορμα ειναι method="get" προς /search/node
   με name="keys". Αν το stylesheet δεν φορτωσει, βλεπεις ενα κανονικο
   πεδιο που κανει κανονικη αναζητηση.
   ═══════════════════════════════════════════════════════════════════════ */

.header.header.header.header .header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.header.header.header.header .headerSearch {
  position: relative;
  display: flex;
  align-items: center;
}

/* ── Το εικονιδιο ────────────────────────────────────────────────── */
.header.header.header.header .headerSearch__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* ΜΕΓΕΘΟΣ ΦΑΚΟΥ — βημα 152. Ητανε 19px (attribute στο <svg>).
     Οριζεται ΕΔΩ και οχι στο markup, ωστε να αλλαζει χωρις ανεβασμα
     template. Το attribute του svg μενει ως εφεδρεια αν δεν φορτωσει
     το CSS.                                                        */
  --hdr-search-icon: 23px;
  /* 44px: το ελαχιστο μεγεθος στοχου για δαχτυλο (WCAG 2.5.8).
     Το εικονιδιο ειναι 19px — ο υπολοιπος χωρος ειναι ΑΟΡΑΤΟΣ αλλα
     πατησιμος.                                                      */
  width: 44px;
  height: 44px;
  margin: 0;
  cursor: pointer;
  color: var(--pg-text, #e8e8e8);
  transition: color .2s ease;
}

/* Το προσβασιμο ονομα — ορατο ΜΟΝΟ σε screen reader.
   ΟΧΙ display:none και ΟΧΙ visibility:hidden: και τα δυο το βγαζουν
   και απο τον screen reader, αρα το πεδιο θα εμενε ΑΝΩΝΥΜΟ.         */
.header.header.header.header .headerSearch__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Το πεδιο: κλειστο ───────────────────────────────────────────── */
.header.header.header.header .headerSearch__field {
  position: absolute;
  /* Δεξια ακρη του πεδιου = αριστερη ακρη του εικονιδιου. Ανοιγει
     προς τα ΑΡΙΣΤΕΡΑ, μεσα στον ηδη υπαρχοντα χωρο του header.      */
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;

  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--pg-border, #2e2e2e);
  border-radius: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;

  font-family: var(--pg-font-cond, 'Sofia Sans Condensed', Arial, sans-serif);
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--pg-text, #e8e8e8);

  transition: width .3s cubic-bezier(.16, 1, .3, 1),
              opacity .2s ease,
              padding .3s cubic-bezier(.16, 1, .3, 1);
}

.header.header.header.header .headerSearch__field::placeholder {
  color: var(--pg-text-faint, #6e6e6e);
}

/* Το «×» που βαζει μονος του ο webkit σε type="search" — σε σκουρο
   φοντο βγαινει σαν λευκη κηλιδα.                                   */
.header.header.header.header .headerSearch__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ── Το πεδιο: ανοιχτο ───────────────────────────────────────────── */
.header.header.header.header .headerSearch:focus-within .headerSearch__field {
  width: min(320px, 52vw);
  padding: 7px 2px;
  opacity: 1;
  pointer-events: auto;
  border-bottom-color: var(--pg-text-muted, #a0a0a0);
}

.header.header.header.header .headerSearch:focus-within .headerSearch__btn {
  color: var(--pg-section-accent, rgb(255, 72, 72));
}

.header.header.header.header .headerSearch__field:focus-visible {
  outline: none;   /* το ιδιο το ανοιγμα ΕΙΝΑΙ η ενδειξη εστιασης */
  border-bottom-color: var(--pg-section-accent, rgb(255, 72, 72));
}

/* Το label ειναι ο στοχος του Tab πριν το πεδιο — εκει χρειαζεται
   ορατο περιγραμμα, γιατι τιποτα αλλο δεν αλλαζει.                  */
.header.header.header.header .headerSearch__btn:focus-visible {
  outline: 2px solid var(--pg-section-accent, rgb(255, 72, 72));
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .header.header.header.header .headerSearch__btn:hover {
    color: var(--pg-section-accent, rgb(255, 72, 72));
  }
}

/* Το svg κουβαλαει width/height ως attributes — το CSS τα νικαει. */
.header.header.header.header .headerSearch__btn svg {
  width: var(--hdr-search-icon, 23px);
  height: var(--hdr-search-icon, 23px);
  display: block;
}

@media (max-width: 766px) {
  .header.header.header.header .headerSearch__btn {
    width: 40px;
    height: 40px;
    --hdr-search-icon: 21px;
  }

  /* ── ΤΟ iOS ΕΚΑΝΕ ΖΟΥΜ ΚΑΙ ΔΕΝ ΓΥΡΝΑΓΕ ΠΙΣΩ — ΒΗΜΑ 292 ────────
     Το Safari σε iPhone μεγεθυνει ΑΥΤΟΜΑΤΑ τη σελιδα οταν εστιαζει
     πεδιο με font-size ΜΙΚΡΟΤΕΡΟ απο 16px, και ΔΕΝ επαναφερει το
     ζουμ οταν φυγει η εστιαση. Ο χρηστης μενει με μεγεθυσμενη
     οθονη και πρεπει να κανει pinch μονος του.

     ΓΙΑΤΙ ΕΠΕΣΕ ΚΑΤΩ ΑΠΟ 16: το πεδιο εχει font-size: 1rem και
     φαινεται ασφαλες — ΑΛΛΑ το mainMag.css:3725 δινει
     html { font-size: 15px }. Αρα 1rem = 15px, ενα pixel κατω απο
     το οριο. Κλασικη περιπτωση «η σχετικη μοναδα κρυβει την
     απολυτη τιμη»: το ιδιο μαθημα με το 0.8666rem που ειναι 13px.

     ΓΙΑΤΙ 16px ΚΑΙ ΟΧΙ maximum-scale=1 ΣΤΟ VIEWPORT:
     το viewport meta θα ελυνε το ιδιο προβλημα ΑΠΑΓΟΡΕΥΟΝΤΑΣ στον
     χρηστη να κανει pinch-zoom σε ΟΛΟ το site. Ειναι γνωστη
     παραβιαση προσβασιμοτητας (WCAG 1.4.4) και τιμωρει ολους για
     ενα πεδιο. Τα 16px λυνουν την αιτια, οχι το συμπτωμα.

     max() και οχι σκετο 16px: αν καποτε το root γινει μεγαλυτερο,
     το πεδιο ακολουθει αντι να μεινει κολλημενο στα 16.          */
  .header.header.header.header .headerSearch__field {
    font-size: max(16px, 1rem);
  }

  /* ── ΤΟ ΠΕΔΙΟ ΕΠΕΦΤΕ ΠΑΝΩ ΣΤΟ ΛΟΓΟΤΥΠΟ — ΒΗΜΑ 290 ─────────────
     ΜΕΤΡΗΜΕΝΟ. Σε οθονη 400px:
       ο φακος τελειωνει στα  400 − 16 (padding)        = 384
       αρχιζει στα            384 − 40 (πλατος κουμπιου)= 344
       το πεδιο ειναι min(320px, 52vw) = 208px και ανοιγει
       ΠΡΟΣ ΤΑ ΑΡΙΣΤΕΡΑ (right: 100%), αρα πιανει 136 → 344
       το λογοτυπο ειναι κεντραρισμενο, περιπου           140 → 260
     Ολοκληρη η ζωνη του λογοτυπου ειναι μεσα στο πεδιο.

     ΔΕΝ ΕΙΝΑΙ ΣΦΑΛΜΑ ΤΟΥ ΣΧΕΔΙΑΣΜΟΥ: το σχολιο της γρ.1105 λεει
     ρητα οτι το πεδιο ειναι ΑΠΟΛΥΤΟ ωστε να ΜΗΝ σπρωχνει το
     λογοτυπο εκτος κεντρου. Σε desktop περισσευει χωρος αριστερα
     του φακου και δεν φτανει ποτε ως το κεντρο. Σε κινητο ο
     header ειναι ~400px αντι ~1400 — η ιδια απολυτη τοποθετηση
     που σωζει το desktop ειναι που χαλαει το κινητο.

     ΓΙΑΤΙ ΚΡΥΒΟΥΜΕ ΤΟ ΛΟΓΟΤΥΠΟ ΚΑΙ ΔΕΝ ΣΤΕΝΕΥΟΥΜΕ ΤΟ ΠΕΔΙΟ:
     για να μη φτανει στο λογοτυπο, το πεδιο θα επρεπε να ειναι
     ~84px — αχρηστο για πληκτρολογηση. Το λογοτυπο λειπει μονο
     οσο ειναι ΕΣΤΙΑΣΜΕΝΗ η αναζητηση και επανερχεται μολις
     φυγει η εστιαση· ειναι το καθιερωμενο μοτιβο «search
     καταλαμβανει τη μπαρα» των κινητων.

     ΓΙΑΤΙ opacity ΚΑΙ ΟΧΙ display: none — τρεις λογοι:
       · το display: none θα εβγαζε το λογοτυπο απο τη ροη, το
         grid 1fr auto 1fr θα ξανακατανεμε τον χωρο και ο φακος
         θα ΠΗΔΟΥΣΕ δεξια τη στιγμη της εστιασης
       · το display δεν κανει transition — θα ηταν αποτομο
       · το λογοτυπο δεν «φευγει», απλα παραχωρει τη θεση του

     pointer-events: none ωστε το αορατο λογοτυπο να μην τρωει
     πατηματα που προοριζονται για το πεδιο.

     Το :has() το χρησιμοποιει ηδη το front-grid.css για τη
     διαταξη της αρχικης — δεν ειναι νεα εξαρτηση.

     ΚΙΝΗΣΗ: επιτρεπεται εδω. Ο κανονας των βηματων 112/146 ειναι
     «καμια κινηση σε HOVER»· αυτη ειναι ΕΙΣΟΔΟΣ πανελ, και ειναι
     σβησιμο οχι μετατοπιση — ο στοχος δεν κουνιεται.             */
  .header.header.header.header .header__logo {
    transition: opacity .2s ease;
  }

  .header.header.header.header .header__row:has(.headerSearch:focus-within)
    .header__logo {
    opacity: 0;
    pointer-events: none;
  }
}

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


/* ═══════════════════════════════════════════════════════════════════════
   Η ΣΕΙΡΑ ΥΠΟΚΑΤΗΓΟΡΙΩΝ — ΤΡΙΤΗ ΣΕΙΡΑ ΤΟΥ HEADER   (βημα 165 - 14/10/2026)

   Σε /arts/sinema: ολες οι υποκατηγοριες του «arts», με το «sinema»
   σημαδεμενο. Ζητηθηκε κεντραρισμενη και «σαν να ανηκει στον header».

   ΓΙΑΤΙ ΗΡΘΕ ΕΔΩ ΚΑΙ ΔΕΝ ΕΜΕΙΝΕ ΣΤΗ ΡΟΗ (αναιρεση του βηματος 161)
   Στο 161 την εβαλα μεσα στο page--taxonomy--term, φοβουμενος οτι τριτη
   σειρα θα χαλαγε τους δυο υπολογισμους που διαβαζουν το υψος του
   header ως σταθερα:
       sections.css:1648   η σελιδα αναζητησης
       front-grid.css:124  η αρχικη χωρις hero
   Ο φοβος ηταν ΑΒΑΣΙΜΟΣ: και οι δυο αφορουν σελιδες που ΔΕΝ εχουν ποτε
   υποκατηγοριες. Η μονη σελιδα που αποκτα τριτη σειρα ειναι η σελιδα
   ορου, και το κενο της το οριζουμε εμεις (.catHead, sections.css 23).

   Και υπηρχε λογος να μετακινηθει, οχι μονο αδεια: στη ροη, το «ιδιο
   φοντο» ειναι ΑΔΥΝΑΤΟ να φανει ενιαιο. Αναμεσα στον header (που
   τελειωνει στα 123px, μετρημενο) και στο κενο που εδινε το .catHead
   (148px απο tokens) εμενε λωρiδα 25px με το φοντο της σελιδας. Μεσα
   στον header, η ραφη δεν υπαρχει καν.

   ── ΤΑ ΧΡΩΜΑΤΑ ΞΑΝΑΜΕΤΡΗΘΗΚΑΝ: ΑΛΛΑΞΕ ΤΟ ΦΟΝΤΟ ────────────────────
   Στη ροη το φοντο ηταν #121212. Μεσα στον header ειναι #1b1b1b
   (front-grid.css:153, για καθε σελιδα χωρις hero — δηλαδη καθε σελιδα
   ορου). Πιο ανοιχτο φοντο = ΜΙΚΡΟΤΕΡΗ αντιθεση για το ιδιο μελανι:

       σε #121212          σε #1b1b1b
       #a0a0a0  7.17:1      6.59:1
       #7d7d7d  4.55:1  →   4.18:1   ΚΟΒΕΤΑΙ (οριο 4.5)

   Το #7d7d7d του βηματος 164 ΔΕΝ μεταφερεται. Νεα ζευγη, μετρημενα
   πανω στο #1b1b1b:

       #e8e8e8  η σειρα κατηγοριων, για συγκριση   — 14.05:1
       #adadad  οι αλλες υποκατηγοριες             —  7.68:1  ΑΑ
       #838383  ο τρεχων                           —  4.54:1  ΑΑ οριακα

   Το #838383 ειναι ΤΟ ΠΙΟ ΣΚΟΥΡΟ ΓΚΡΙ ΠΟΥ ΠΕΡΝΑΕΙ σε #1b1b1b.
   Τρια επιπεδα, ευδιακριτα: 14.05 → 7.68 → 4.54.

   ── ΤΟ HOVER ΔΕΝ ΧΡΕΙΑΖΕΤΑΙ ΕΞΑΙΡΕΣΗ ──────────────────────────────
   Ο τρεχων ειναι <span>, οχι <a>. Ο κανονας hover γραφεται για `a` και
   ο τρεχων μενει εξω απο μονος του. Καμια :not().
   ═══════════════════════════════════════════════════════════════════════ */

html:root {
  /* Το υψος της τριτης σειρας: 12px × 1.25 = 15, συν padding 9×2 = 18,
     συν 1px γραμμη = 34. Το διαβαζει το .catHead στο sections.css. */
  --hdr-subcats-h: 34px;
}

.header.header.header.header .header__subcats {
  overflow: hidden;
  max-height: 80px;            /* με περισσευμα αν σπασει σε δυο σειρες */
  opacity: 1;
  border-top: 1px solid var(--pg-border, #2e2e2e);
  transition: max-height .28s ease, opacity .18s ease, border-top-color .28s ease;
}

/* Μαζευεται στο σκρολ ΜΑΖΙ με τις κατηγοριες — ιδιος χρονος, ιδια
   συμπεριφορα. Αλλιως στο σκρολ θα εμενε μια σειρα που δεν υπαρχει
   σε καμια αλλη σελιδα. */
.header.header.header.header.active .header__subcats {
  max-height: 0;
  opacity: 0;
  border-top-color: transparent;
}

.header.header.header.header .header__subcats ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;     /* ΤΟ ΚΕΝΤΡΑΡΙΣΜΑ ΠΟΥ ΖΗΤΗΘΗΚΕ */
  align-items: center;
  gap: 2px 22px;
  margin: 0;
  padding: 9px var(--hdr-pad, 20px);
  list-style: none;
}
.header.header.header.header .header__subcats li { margin: 0; padding: 0; }
.header.header.header.header .header__subcats li::before { content: none; }

/* Ο <a> και ο <span> ΠΡΕΠΕΙ να ειναι ακριβως ιδιοι σε μεγεθος και
   θεση — αλλιως η σειρα χοροπηδαει αναλογα με το ποια υποκατηγορια
   βλεπεις. */
.header.header.header.header .header__subcats a,
.header.header.header.header .header__subcats .is-current {
  display: block;
  font-family: var(--pg-font-cond, 'Fira Sans', Arial, sans-serif);
  font-size: 0.8rem;           /* 12px — η σειρα απο πανω ειναι 14 */
  font-weight: 600;
  line-height: 1.25;
  /* Λιγοτερο απο το .09em της μπαρας: η Fira Sans δεν ειναι στενη, και
     στα 12px το μεγαλο αραιωμα διαλυει τη λεξη. */
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
}

.header.header.header.header .header__subcats a {
  /* ΒΗΜΑ 306 — #adadad → ΛΕΥΚΟ. Δες τον κανονα της τρεχουσας πιο
     κατω: η συμβαση αντιστραφηκε, λευκα τα υπολοιπα, γκρι το τρεχον. */
  color: var(--pg-text, #e8e8e8);
  transition: color .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .header.header.header.header .header__subcats a:hover {
    color: var(--pg-section-accent, rgb(255, 72, 72));
  }
}

.header.header.header.header .header__subcats a:focus-visible {
  outline: 2px solid var(--pg-section-accent, rgb(255, 72, 72));
  outline-offset: 2px;
}

/* ΒΗΜΑ 303 — ΤΟ ΣΚΟΥΡΟ ΙΣΧΥΕΙ ΓΙΑ ΔΥΟ ΕΙΔΗ ΣΤΟΙΧΕΙΟΥ.
   Μεχρι τωρα ο τρεχων ορος ηταν ΠΑΝΤΑ <span>. Απο το 303, μεσα σε
   αρθρο ειναι <a class="is-current">: ιδιο χρωμα, αλλα πατιεται.

   :is(a, span) ΚΑΙ ΟΧΙ σκετο .is-current — ΕΙΔΙΚΟΤΗΤΑ:
     .header×4 .header__subcats a          = (0,5,1)   ← βαφει #adadad
     .header×4 .header__subcats .is-current= (0,5,0)   ← ΕΧΑΝΕ
   Ο κανονας του <a> εχει ΕΝΑ στοιχειο παραπανω, αρα ο συνδεσμος θα
   εμενε ανοιχτοχρωμος και η διακριση θα χανοταν. Με :is(a, span)
   μετραμε ΚΙ ΕΜΕΙΣ ενα στοιχειο → (0,6,1) και κερδιζουμε καθαρα,
   χωρις να εξαρταται απο τη σειρα στο αρχειο.                     */
.header.header.header.header .header__subcats :is(a, span).is-current {
  /* ΒΗΜΑ 306 — Η ΑΝΤΙΣΤΡΟΦΗ, ΕΠΙΛΟΓΗ ΤΟΥ ΧΡΗΣΤΗ:
       υπολοιπες υποκατηγοριες  #e8e8e8 = 232  (λευκες)
       αυτη που βρισκεσαι       #adadad = 173  (γκρι)

     ΤΟ ΒΗΜΑ 304 ΕΙΧΕ ΤΟ ΑΝΤΙΘΕΤΟ, με το σκεπτικο «ο τρεχων ειναι
     συνδεσμος, αρα πρεπει να λαμπει». Ζητηθηκε ρητα το αναποδο και
     ειναι εξισου συνεπες: εδω το γκρι ΔΕΝ σημαινει «ανενεργο» —
     σημαινει «ηδη εισαι εδω, δεν εχεις λογο να πας». Οι υπολοιπες,
     που ΕΧΕΙΣ λογο να πατησεις, τραβανε το βλεμμα.
     Η αντιθεση ειναι η ιδια (173 εναντι 232), μονο αναποδα.

     ΤΟ ΚΛΙΚ ΔΕΝ ΘΙΓΕΤΑΙ: το βημα 303 το εκανε <a> και παραμενει.
     Ο cursor: default ειναι ΜΟΝΟ στο <span> (πιο κατω), αρα η
     τρεχουσα υποκατηγορια μεσα σε αρθρο κραταει το χερακι.

     ΟΧΙ ΤΟ ΚΟΚΚΙΝΟ: ειναι το χρωμα του hover σε αυτη τη σειρα. Αν το
     επαιρνε και η ηρεμια, το hover δεν θα ειχε που να παει.

     ΟΧΙ font-weight: το σχολιο πιο πανω το λεει — ο <a> και ο <span>
     πρεπει να εχουν ΑΚΡΙΒΩΣ ιδιο μεγεθος, αλλιως η σειρα χοροπηδαει
     αναλογα με το ποια υποκατηγορια βλεπεις. Το χρωμα δεν αλλαζει
     πλατος· το βαρος αλλαζει.                                      */
  color: #adadad;
}

/* Το cursor ΜΟΝΟ στο <span>: εκει δεν υπαρχει προορισμος. Ο <a>
   κραταει το χερακι — αλλιως θα εμοιαζε ανενεργος ενω δουλευει. */
.header.header.header.header .header__subcats span.is-current {
  cursor: default;
}

/* ΤΟ HOVER ΠΡΕΠΕΙ ΝΑ ΝΙΚΑΕΙ ΤΟ ΣΚΟΥΡΟ.
   Ο κανονας hover πιο πανω ειναι (0,6,1) — ΙΣΟΠΑΛΟΣ με το σκουρο, και
   γραμμενος ΠΡΙΝ απ' αυτο, αρα θα εχανε: ο τρεχων ορος δεν θα
   αντιδρουσε καθολου στο ποντικι και θα εμοιαζε ακλικαριστος, που
   ειναι ακριβως το προβλημα που λυνουμε. Εδω (0,7,1).
   Μονο χρωμα, καμια κινηση — ο κανονας των βηματων 112/146.       */
@media (hover: hover) and (pointer: fine) {
  .header.header.header.header .header__subcats a.is-current:hover {
    color: var(--pg-section-accent, rgb(255, 72, 72));
  }
}

@media (prefers-reduced-motion: reduce) {
  .header.header.header.header .header__subcats { transition: none; }
  .header.header.header.header .header__subcats a { transition: none; }
}


/* ── Η ΚΑΤΗΓΟΡΙΑ ΣΤΗΝ ΟΠΟΙΑ ΒΡΙΣΚΟΜΑΣΤΕ ───────────────  βημα 166 ──
   Στο /arts/sinema, το «ARTS» της μπαρας σημαδευεται.

   ΓΙΑΤΙ ΔΕΝ ΤΟ ΕΚΑΝΕ ΜΟΝΟ ΤΟΥ ΤΟ DRUPAL
   Ο κανονας απο πανω πιανει .menu-item--active-trail και .is-active —
   κλασεις που βαζει το MENU SYSTEM. Απο το βημα 141 η μπαρα χτιζεται
   απο την ΤΑΞΙΝΟΜΙΑ, και τα δυο δεν συναντιουνται. Επιπλεον το
   drupal.active-link συγκρινει ΔΙΑΔΡΟΜΗ: στο /arts/sinema ο συνδεσμος
   /arts δεν ταιριαζει, αρα δεν θα εμπαινε ουτε έτσι.
   Το .is-trail το βαζει το template απο το 'trail' που ετοιμαζει το
   popup_v1.theme — συγκριση ΟΝΤΟΤΗΤΩΝ (tid), οχι κειμενου διαδρομης.

   ΔΥΟ ΣΗΜΑΤΑ, ΟΧΙ ΕΝΑ: χρωμα ΚΑΙ υπογραμμιση — ο ιδιος κανονας με το
   ενεργο στοιχειο μενου πιο πανω, για να μην υπαρχουν δυο «εδω εισαι».

   ΧΩΡΙΣ pointer-events: none, ΣΚΟΠΙΜΑ — σε αντιθεση με τον κανονα απο
   πανω. Εκει το ενεργο στοιχειο ΕΙΝΑΙ η σελιδα που βλεπεις, αρα το
   κλικ δεν παει πουθενα. Εδω, στο /arts/sinema, το «ARTS» οδηγει στη
   σελιδα της κατηγοριας — χρησιμος συνδεσμος, δεν τον σβηνουμε.
   Στο σκετο /arts το κλικ ξαναφορτωνει· αβλαβες.                    */
.header.header.header.header .header__cats a.is-trail {
  color: var(--pg-section-accent, rgb(255, 72, 72));
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--pg-section-accent, rgb(255, 72, 72));
}


/* ═══════════════════════════════════════════════════════════════════════
   ΚΙΝΗΤΟ: ΟΙ ΔΥΟ ΣΕΙΡΕΣ ΚΥΛΑΝΕ ΟΡΙΖΟΝΤΙΑ   (βημα 180 - 14/10/2026)

   Ζητηθηκε: στο κινητο οι κατηγοριες και οι υποκατηγοριες να ΜΗΝ
   σπανε σε δευτερη σειρα· να μενουν σε ΜΙΑ σειρα και να τις βλεπεις
   με σκρολ στον αξονα Χ.

   Σημερα ειναι flex-wrap: wrap — σε οθονη 390px οι 11 κατηγοριες
   πιανουν τρεις-τεσσερις σειρες και τρωνε μισο κινητο.

   ── ΤΟ justify-content: center ΠΡΕΠΕΙ ΝΑ ΦΥΓΕΙ. ΔΕΝ ΕΙΝΑΙ ΓΟΥΣΤΟ ──
   Σε container που κυλαει, το κεντραρισμα σπρωχνει την ΑΡΧΗ του
   περιεχομενου ΕΞΩ απο το ορατο, και εκει ΔΕΝ φτανεις με σκρολ: ο
   αρνητικος χωρος δεν ειναι προσβασιμος.

   Το εχουμε ηδη πληρωσει στον ΚΑΘΕΤΟ αξονα, στο megaMenu (βημα 153):
   το justify-content: center εκρυβε την κορυφη του μενου και λυθηκε
   με margin: auto. Οριζοντια δεν υπαρχει καν ισοδυναμο κολπο — το
   flex-start ειναι η σωστη απαντηση, και ειναι και το αναμενομενο
   μοτιβο σε κινητο (ολες οι λωριδες καρτελων ξεκινανε αριστερα).

   ── ΚΡΥΜΜΕΝΗ ΜΠΑΡΑ ΚΥΛΙΣΗΣ ────────────────────────────────────────
   Σε κινητο δεν υπαρχει ορατη μπαρα ουτως η αλλως· την κρυβουμε και
   στα desktop που μπορει να πεσουν σε αυτο το πλατος (μικρο παραθυρο),
   ωστε να μη φαινεται γκρι λωριδα κατω απο τις λεξεις.

   ── overscroll-behavior-x: contain ────────────────────────────────
   ΑΠΑΡΑΙΤΗΤΟ, οχι καλλωπισμος: χωρις αυτο, οταν φτασεις στο τερμα της
   λωριδας το σκρολ «δραπετευει» στη σελιδα — και σε iOS/Android
   ενεργοποιει τη χειρονομια ΠΙΣΩ. Ο αναγνωστης θα εφευγε απο τη
   σελιδα προσπαθωντας να δει την τελευταια κατηγορια.

   ── ΕΙΔΙΚΟΤΗΤΑ ────────────────────────────────────────────────────
   Ιδιο .header×4 με τους κανονες που νικαμε (0,5,0). Μεσα σε media
   query, αρα ισχυει μονο κατω απο 766px.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 766px) {

  .header.header.header.header :is(.header__cats, .header__subcats) ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
  }

  .header.header.header.header
    :is(.header__cats, .header__subcats) ul::-webkit-scrollbar {
    display: none;                    /* Chrome, Safari */
  }

  /* Τα στοιχεια ΔΕΝ συμπιεζονται και ΔΕΝ σπανε μεσα τους. Χωρις αυτο
     το flex θα μικραινε καθε λεξη για να χωρεσει, αντι να κυλησει.  */
  .header.header.header.header
    :is(.header__cats, .header__subcats) ul > li {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Η σειρα κατηγοριων δεν σπαει πια σε δυο γραμμες, αρα το
     περισσευμα των 120px (header.css ~573) δεν χρειαζεται. Μενει
     οσο ΜΙΑ σειρα, ωστε η συμπτυξη στο σκρολ να μετραει σωστα.     */
  .header.header.header.header .header__cats { max-height: 64px; }
  .header.header.header.header .header__subcats { max-height: 48px; }

  /* ── ΛΙΓΟ ΜΕΓΑΛΥΤΕΡΑ ΓΡΑΜΜΑΤΑ — βημα 181 ──────────────────────
     Ζητηθηκε «πολυ λιγο». Σε desktop ειναι 14px / 12px· εδω 15px /
     13px — ενα σκαλι, οχι αλλη κλιμακα.

     Ο λογος δεν ειναι μονο αισθητικος: τωρα που η λωριδα κυλαει, οι
     λεξεις ειναι ΣΤΟΧΟΙ ΑΦΗΣ σε κινουμενη επιφανεια. Το 12px με
     letter-spacing .07em σε γκρι #adadad ηταν στο οριο.            */
  .header.header.header.header .header__cats a {
    font-size: 1rem;              /* 15px στο root 15px */
  }
  .header.header.header.header .header__subcats a,
  .header.header.header.header .header__subcats .is-current {
    font-size: 0.8667rem;         /* 13px */
  }
}

/* ΒΗΜΑ 218 — ΤΟ ΧΡΩΜΑΤΙΚΟ ΜΠΛΟΚ ΑΦΑΙΡΕΘΗΚΕ.
   Ηταν τα βηματα 209/210/217: σκοπευση σκουρου σετ, φιλτρο στο
   λογοτυπο, και η συνεχης παρεμβολη με --hdr-p. Το θεμα γυρισε
   σε σκουρο, αρα το header ειναι ΗΔΗ σωστο απο τα καθολικα tokens
   και δεν χρειαζεται ουτε σκοπευση ουτε παρεμβολη.
   Η δουλεια του burger (βηματα 211-216) ΔΕΝ θιγεται — ξεκινα
   αμεσως απο κατω.                                              */

/* ═══ ΤΟ BURGER ΩΣ ΠΑΝΕΛ ΑΡΙΣΤΕΡΑ + ΑΚΟΡΝΤΕΟΝ   (βημα 211) ═════════════

   ΠΡΙΝ: κουρτινα πληρους πλατους που κατεβαινε απο πανω (βημα 144).
   ΤΩΡΑ: στηλη αριστερα που μπαινει απο το πλαι.

   Η ΚΙΝΗΣΗ ΑΛΛΑΖΕΙ ΑΞΟΝΑ, ΟΧΙ ΔΙΑΡΚΕΙΑ: translateY → translateX, με
   την ιδια καμπυλη και τον ιδιο χρονο. Πανελ που μπαινει απο αριστερα
   και βγαινει απο πανω θα εδειχνε ασυνεπες.                         */
.megaMenu#mega-menu {
  --mm-w: min(420px, 88vw);
  right: auto;
  width: var(--mm-w);
  max-width: var(--mm-w);
  transform: translateX(-100%);
  border-right: 1px solid var(--pg-border, #2e2e2e);
  border-bottom: 0;
}

.megaMenu#mega-menu.active {
  transform: translateX(0);
}

.megaMenu#mega-menu .megaMenu__content {
  max-width: none;
  padding-inline: clamp(20px, 5vw, 36px);
}

.megaMenu#mega-menu .primaryNav > .primaryNav__list {
  max-width: none;

  /* ── ΟΙ ΓΡΑΜΜΕΣ ΣΤΑΜΑΤΟΥΣΑΝ ΣΤΑ ΓΡΑΜΜΑΤΑ — ΒΗΜΑ 257 ──────────────
     ΜΕΤΡΗΜΕΝΟ, viewport 440px:
         .megaMenu__content   386px  (padding-inline 22px → 342 ωφελιμα)
         .primaryNav__list    185px   ← ΟΣΟ ΤΑ ΟΝΟΜΑΤΑ, οχι οσο ο γονεας

     ΑΙΤΙΑ — mainsite.css:22298 / mainMag.css:27957:
         nav.primaryNav { display: flex; align-items: center }

     Η λιστα ειναι FLEX ITEM. Το align-items: center ακυρωνει το
     προεπιλεγμενο stretch, αρα το πλατος της γινεται fit-content —
     οσο η μακρυτερη κατηγορια. Οι γραμμες ειναι border-top των <li>,
     αρα σταματουσαν κι αυτες εκει.

     ΤΟ display: block ΤΗΣ ΛΙΣΤΑΣ ΔΕΝ ΤΟ ΕΔΕΙΧΝΕ: ενα block ΓΕΜΙΖΕΙ
     τον γονεα του — αλλα μονο σε ΚΑΝΟΝΙΚΗ ροη. Ως flex item το
     display του ρυθμιζει τα ΠΑΙΔΙΑ του, οχι το δικο του πλατος.
     Γι' αυτο η μετρηση ειπε «block» και «185px» μαζι, χωρις αντιφαση.

     ΓΙΑΤΙ width: 100% ΚΑΙ ΟΧΙ align-self: stretch: το stretch θα
     επιανε και το --hdr-cat-w, που εδω ειναι ηδη none· το 100% ειναι
     ρητο και διαβαζεται χωρις να ξερεις τι κανει ο γονεας.
     Στο desktop η τιμη ηταν ηδη ιδια (348 ≈ 342), αρα τιποτα δεν
     μετακινειται εκει — γι' αυτο φαινοταν «σωστο στο desktop».    */
  width: 100%;
}

/* ── Η σειρα ειναι ΤΟ ΙΔΙΟ ΤΟ <li> — βημα 213 ──────────────────────
   ΧΩΡΙΣ ενδιαμεσο περιτυλιγμα, σκοπιμα: ολοι οι κανονες του megaMenu
   ζηταν `> .primaryNav__item > a`, δηλαδη ΑΜΕΣΟ παιδι. Ενα <span>
   αναμεσα τους τους ακυρωνε ολους σιωπηλα.

   flex-wrap: wrap + width:100% στη λιστα των παιδιων = ονομα και
   βελακι στην πρωτη σειρα, υποκατηγοριες απο κατω.                  */
/* ΒΗΜΑ 216 — GRID ΑΝΤΙ ΓΙΑ flex-wrap.
   Με wrap, μια μακρια λεξη («Entertainment») σπρωχνει το βελακι σε
   ΔΕΥΤΕΡΗ σειρα — το ειδαμε στο screenshot. Το grid ΕΓΓΥΑΤΑΙ τη δομη:
   ονομα | βελακι στην πρωτη σειρα, υποκατηγοριες στη δευτερη, οσο
   μακρυ κι αν ειναι το ονομα.                                       */
.megaMenu#mega-menu .primaryNav > .primaryNav__list > .primaryNav__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
}

/* Ο συνδεσμος πιανει τον χωρο που περισσευει, ωστε το βελακι να
   καθεται ΠΑΝΤΑ στη δεξια ακρη — οχι κολλητα στο ονομα, που θα
   χοροπηδουσε αναλογα με το μηκος καθε κατηγοριας.                  */
.megaMenu#mega-menu .primaryNav > .primaryNav__list > .primaryNav__item > a {
  min-width: 0;
  /* Αν καποτε ενα ονομα ειναι μακρυτερο απο τη στηλη, να σπασει ΜΕΣΑ
     στον δικο του χωρο αντι να ξεχειλωσει πανω στο βελακι.          */
  overflow-wrap: anywhere;
}

/* Η λιστα των παιδιων πιανει ΚΑΙ ΤΙΣ ΔΥΟ στηλες, αρα πεφτει απο κατω
   ακομα κι οταν δεν υπαρχει βελακι.                                 */
.megaMenu#mega-menu .primaryNav__sub {
  grid-column: 1 / -1;
  width: 100%;
}

/* ΤΟ ΠΑΛΙΟ «›» ΤΟΥ ::after ΦΕΥΓΕΙ: τωρα υπαρχει πραγματικο κουμπι.
   Δυο βελακια διπλα-διπλα θα ηταν θορυβος.                          */
.megaMenu#mega-menu .primaryNav > .primaryNav__list
  > .primaryNav__item:has(.primaryNav__sub) > a::after {
  content: none;
}

/* ΒΗΜΑ 220 — ΤΟ ΚΟΥΜΠΙ ΚΑΙ ΤΟ ΑΚΟΡΝΤΕΟΝ ΑΦΑΙΡΕΘΗΚΑΝ.
   Οι υποκατηγοριες ειναι πλεον ΠΑΝΤΑ ορατες, πιο διακριτικες.
   Μαζι εφυγαν: ο στοχος αφης των 44px, η περιστροφη, το κλεισιμο
   με [hidden], ο φραγμος απεναντι στο στυλ που δινει το mainsite
   σε καθε <button>, και ο χειριστης στο sticky-nav.js.
   Το «γιατι» στο CHANGELOG, βημα 220.                           */

/* Οι υποκατηγοριες σε στηλη: το πανελ ειναι 420px, δεν χωρανε δυο
   ανα σειρα χωρις να σπανε τα ονοματα.                              */
.megaMenu#mega-menu .primaryNav__sub {
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
}

/* ── ΠΙΟ ΔΙΑΚΡΙΤΙΚΕΣ  (βημα 220) ───────────────────────────────────────
   Αφου ειναι ΠΑΝΤΑ ορατες, πρεπει να διαβαζονται ως δευτερο επιπεδο
   και οχι ως δευτερη λιστα κατηγοριων. Τρια σημαδια μαζι, κανενα
   δυνατο απο μονο του:

     ΜΕΓΕΘΟΣ   1.22rem → 1rem, δηλαδη ~55% του γονεα αντι ~70%
     ΤΟΝΟΣ     ενα σκαλι πιο σβηστο απο το #9a9a9a της βασης
     ΕΣΟΧΗ     το padding-left τις δενει οπτικα με τον γονεα τους

   ΤΟ ΜΕΓΕΘΟΣ ΕΙΝΑΙ ΤΟ ΚΥΡΙΟ: χρωμα μονο του δεν αρκει — περιπου το 8%
   των ανδρων δεν ξεχωριζει αξιοπιστα αποχρωσεις (ιδιο σκεπτικο με το
   «›» του βηματος 148).                                              */
.megaMenu#mega-menu .primaryNav__sub > .primaryNav__item > a {
  font-size: 1rem;
  font-weight: 400;
  color: var(--hdr-sub-ink, #8a8a8a);
  /* ΒΗΜΑ 258 — ηταν 1.3 (γρ. 994). ΤΟ ΠΡΑΓΜΑΤΙΚΟ ΚΕΝΟ ΑΝΑΜΕΣΑ ΣΕ
     ΔΥΟ ΣΕΙΡΕΣ ΔΕΝ ΕΙΝΑΙ ΤΟ gap — ΕΙΝΑΙ ΤΟ line-height. Με 15px
     γραμματα, το 1.3 δινει κουτι 19,5px: ~4,5px αερα πανω και κατω
     απο τα γραμματα, που προστιθενται στα 2px του gap. Δηλαδη το
     ορατο κενο ηταν ~6,5px ενω το gap ελεγε 2px — γι' αυτο το
     μικραιμα του gap δεν εφερνε αποτελεσμα.
     ΒΗΜΑ 259 — ηταν 1.15 (17,25px). Τωρα 1.1 → κουτι 16,5px.

     Ο ΑΠΟΛΟΓΙΣΜΟΣ ΤΟΥ ΟΡΑΤΟΥ ΚΕΝΟΥ, ΒΗΜΑ ΠΡΟΣ ΒΗΜΑ:
         βημα 257   1.3  + gap 2px  →  4,5 + 2 = 6,5px
         βημα 258   1.15 + gap 2px  →  2,25 + 2 = 4,25px
         βημα 259   1.1  + gap 0    →  1,5 + 0 = 1,5px

     ΚΑΤΩ ΑΠΟ ΤΟ 1.05 ΜΗΝ ΠΑΣ: στα ελληνικα πεζα οι ουρες (γ, μ, ρ,
     η, χ) φτανουν τους τονους της επομενης σειρας. Το 1.1 ειναι ηδη
     σφιχτο για κειμενο· δουλευει εδω γιατι ειναι ΛΙΣΤΑ ΟΝΟΜΑΤΩΝ —
     μια-δυο λεξεις, οχι προταση που διαβαζεται σερι.             */
  line-height: 1.1;
}

/* Λιγοτερο κενο απο τον γονεα: η ομαδα πρεπει να διαβαζεται σαν ΕΝΑ
   μπλοκ με την κατηγορια της, οχι σαν ξεχωριστη ενοτητα.            */
.megaMenu#mega-menu .primaryNav__sub {
  padding-top: var(--hdr-sub-top, 10px);

  /* ── ΜΙΑ ΥΠΟΚΑΤΗΓΟΡΙΑ ΑΝΑ ΓΡΑΜΜΗ — ΒΗΜΑ 258 ──────────────────────
     Το βημα 257 τις ειχε βαλει σε σειρες (row + wrap) με το σκεπτικο
     οτι «το μπλοκ φαινεται αραιο». ΖΗΤΗΘΗΚΕ ΡΗΤΑ ΤΟ ΑΝΤΙΘΕΤΟ: καθε
     υποκατηγορια κατω απο την προηγουμενη. Επιστροφη σε column.

     Το πλατος των 342px (βημα 257) ΜΕΝΕΙ — αυτο ηταν το πραγματικο
     σφαλμα και δεν ειχε σχεση με τη διαταξη των παιδιων.         */
  flex-direction: column;
  flex-wrap: nowrap;

  /* ── ΔΥΟ ΡΥΘΜΙΣΤΕΣ, ΔΥΟ ΔΙΑΦΟΡΕΤΙΚΑ ΚΕΝΑ — ΒΗΜΑ 258 ─────────────
     Μεχρι τωρα ηταν μπερδεμενα: το padding-top ρυθμιζε το ενα και το
     gap το αλλο, γραμμενα σε διαφορετικα σημεια του αρχειου (4px εδω,
     9px στη γρ. 941, 2px στη 1580). Τωρα ειναι δυο ονοματα, διπλα-
     διπλα, και φαινεται ποιο κανει τι:

       --hdr-sub-top   ΚΑΤΗΓΟΡΙΑ → πρωτη υποκατηγορια   (ηταν 4px)
       --hdr-sub-gap   ΥΠΟΚΑΤΗΓΟΡΙΑ → υποκατηγορια      (ηταν 1-2px)

     Η σχεση τους ειναι που διαβαζεται, οχι οι απολυτες τιμες: οσο το
     --hdr-sub-top ειναι ΜΕΓΑΛΥΤΕΡΟ απο το --hdr-sub-gap, η ομαδα
     διαβαζεται ως ΕΝΑ μπλοκ κατω απο την κατηγορια της. Αν
     αντιστραφει, οι υποκατηγοριες μοιαζουν με ξεχωριστη λιστα.    */
  --hdr-sub-top: 10px;
  /* ΒΗΜΑ 259 — ηταν 2px. ΜΗΔΕΝ, οχι «λιγοτερο»: το ορατο κενο το
     κραταει πλεον ΜΟΝΟ το line-height πιο κατω, αρα υπαρχει ΕΝΑΣ
     ρυθμιστης αντι για δυο που αθροιζονται. Με δυο, καθε μικρυμα
     χρειαζοταν δυο αλλαγες και το αποτελεσμα δεν ηταν προβλεψιμο. */
  --hdr-sub-gap: 0px;
  gap: var(--hdr-sub-gap, 0px);
}

/* ── Η ΜΠΑΡΑ ΚΥΛΙΣΗΣ ΤΟΥ ΠΑΝΕΛ  (βημα 221) ────────────────────────────
   Το .megaMenu#mega-menu ειναι το στοιχειο που κυλαει (overflow-y: auto,
   γρ. 745). Η προεπιλεγμενη μπαρα ειναι φαρδια και ανοιχτοχρωμη — πανω
   σε σκουρο πανελ τραβαει το ματι περισσοτερο απο το μενου.

   ΔΥΟ ΣΥΣΤΗΜΑΤΑ, ΟΧΙ ΔΙΠΛΟΓΡΑΦΙΑ:
   το scrollbar-width/color ειναι το ΠΡΟΤΥΠΟ, τα ::-webkit-scrollbar-*
   ο παλιος τροπος. Οταν υπαρχουν και τα δυο, ο Chrome απο την εκδοση
   121 αγνοει τα ψευδοστοιχεια και χρησιμοποιει το προτυπο. Αρα:
     σημερινοι browsers → scrollbar-width: thin
     παλιοτεροι WebKit  → τα ψευδοστοιχεια
   Δεν συγκρουονται· ο καθενας διαβαζει ο,τι καταλαβαινει.

   ΤΟ ΚΟΛΠΟ ΜΕ ΤΟ ΔΙΑΦΑΝΕΣ ΠΕΡΙΓΡΑΜΜΑ: border 3px διαφανες +
   background-clip: content-box δινει «αερα» γυρω απο τον δεικτη, ωστε
   να μην ακουμπαει στην ακρη. Χωρις αυτο, το 10px γεμιζει ολοκληρο.  */
.megaMenu#mega-menu {
  scrollbar-width: thin;
  scrollbar-color: var(--mm-scroll, #3a3a3a) transparent;
}

.megaMenu#mega-menu::-webkit-scrollbar {
  width: 10px;
}

.megaMenu#mega-menu::-webkit-scrollbar-track {
  background: transparent;
}

.megaMenu#mega-menu::-webkit-scrollbar-thumb {
  background: var(--mm-scroll, #3a3a3a);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 99px;
}

@media (hover: hover) and (pointer: fine) {
  .megaMenu#mega-menu::-webkit-scrollbar-thumb:hover {
    background: var(--mm-scroll-hover, #5f5f5f);
    background-clip: content-box;
  }
}

/* ── ΤΟ Χ ΣΤΗΝ ΠΑΝΩ ΔΕΞΙΑ ΓΩΝΙΑ  (βημα 222) ──────────────────────────
   Ο κανονας της γρ. 820 δινει right: clamp(14px, 3.5vw, 44px) — 44px
   εσοχη σε φαρδια οθονη. Ηταν σωστο για την ΚΟΥΡΤΙΝΑ πληρους πλατους
   του βηματος 144· σε πανελ 420px (βημα 211) τα 44 ειναι το 1/10 του
   πλατους και το Χ δειχνει να αιωρειται προς το κεντρο.

   ΣΤΑΘΕΡΑ px ΚΑΙ ΟΧΙ vw: η εσοχη πρεπει να μετραει απο την ακρη ΤΟΥ
   ΠΑΝΕΛ, που εχει σταθερο πλατος. Το vw μετραει την ΟΘΟΝΗ, αρα σε
   μεγαλο μονιτορ το Χ θα εφευγε ολο και πιο μεσα.

   left: auto — φραγμος. Το mainsite δινει margin-left: 40px στο
   .megaMenu__close (γρ. 8602)· το δικο μας margin: 0 το ακυρωνει ηδη,
   αλλα αν καποτε μπει και left καπου, εδω σταματαει.                */
.megaMenu#mega-menu .megaMenu__close {
  /* ΒΗΜΑ 224 — 0 και οχι 10px: αλλαγη ΤΟΥ ΧΡΗΣΤΗ, καταγραμμενη εδω
     ωστε να μη χαθει στο επομενο ανεβασμα. Το Χ κολλαει στη γωνια. */
  top: 0;
  right: 0;
  left: auto;

  /* ΒΗΜΑ 223 — ΤΟ ΚΡΙΣΙΜΟ.
     mainsite.css:7429   .button, button { min-height: 48px; min-width: 140px }

     Το κουμπι μετρουσε 140×48 ενω ο κανονας μας εδινε 44×44. Δεν ειναι
     θεμα ειδικοτητας: ΤΟ min-width ΝΙΚΑΕΙ ΠΑΝΤΑ ΤΟ width, οσο ειδικος
     κι αν ειναι ο επιλογεας — ειναι ΑΛΛΗ ιδιοτητα, οχι ανταγωνιστης.
     Το width ζηταει 44, το min-width απαντα «οχι λιγοτερο απο 140».

     Γι' αυτο το Χ εμοιαζε κεντραρισμενο: το right: 10px ΙΣΧΥΕ, αλλα το
     κουμπι απλωνοταν 140px προς τα αριστερα απο εκει.

     Το ιδιο επιανε και το .primaryNav__toggle των βηματων 211-216 —
     ηταν 140px φαρδυ ενω φαινοταν 44. Εκεινο ηταν το πραγματικο αιτιο
     που το βελακι «γινοταν κοκκινο» απο μακρια, οχι η θεση του
     χαρακτηρα μεσα στο em box οπως ειχα υποθεσει.                    */
  min-width: 0;
  min-height: 0;
  width: 44px;
  height: 44px;
}