/* ==========================================================================
 * mobpanel.css — ΤΟ ΚΟΙΝΟ ΠΑΝΕΛ ΚΙΝΗΤΟΥ (2026-08-23)
 * --------------------------------------------------------------------------
 * Φορτώνεται ΜΟΝΟ όπου υπάρχει κουμπί burger του νέου μοντέλου (το <link> το
 * τυπώνει η nq_mob_panel(), μία φορά ανά σελίδα).
 *
 * ΕΔΩ ΜΟΝΟ ΓΕΩΜΕΤΡΙΑ. Τα χρώματα έρχονται από το Skin → Mobile Panel: το
 * πάνελ κρατά την κλάση `.nq-h1-mobmenu` που ήδη στοχεύει το skin_lib. Ό,τι
 * χρώμα χρειάζεται εδώ γράφεται ως ποσοστό του `currentColor` ή με μεταβλητή,
 * ποτέ καρφωτό (μόνιμος κανόνας του ιδιοκτήτη).
 *
 * ΤΡΕΙΣ ΘΕΣΕΙΣ, ΕΝΑ MARKUP: αριστερά / δεξιά / όλη η οθόνη. Το διαλέγει το
 * Theme → Header → Mobile Panel και γίνεται κλάση στο ίδιο το πάνελ.
 * ======================================================================== */

/* 🔴 ΚΑΜΙΑ ΕΜΦΑΝΙΣΗ ΕΔΩ (πλάτος / φόντο / padding / σκιά): ζει στις
   προεπιλογές στο ΤΕΛΟΣ του αρχείου, ώστε κάθε κεφαλίδα να μπορεί
   να την αλλάξει με μία κλάση. Εδώ μένει μόνο ό,τι κάνει το πάνελ να
   ΛΕΙΤΟΥΡΓΕΙ — αν μπει εμφάνιση εδώ, κερδίζει τις προεπιλογές και η
   παραμετροποίηση σταματά να δουλεύει (μετρημένο: πλάτος 320 αντί 250). */
.nq-mobpanel {
  position: fixed;
  top: 0;
  bottom: 0;
  /* 🔴 ΠΑΝΩ ΑΠΟ ΤΗΝ ΚΕΦΑΛΙΔΑ (ιδιοκτήτης 2026-08-23: «κρύβεται πίσω από τον
     mobile header όταν ανοίγει»). ΑΙΤΙΑ, μετρημένη: το `<header>` έχει
     z-index **1350**, το πάνελ είχε 1000. Το παλιό συρτάρι δεν το πάθαινε
     γιατί ζούσε ΜΕΣΑ στην κεφαλίδα — κληρονομούσε το δικό της επίπεδο. Το
     κοινό πάνελ ζει στο <body>, άρα πρέπει να το ξεπεράσει ρητά.
     Μεταβλητή, ώστε ένα theme με ψηλότερη κεφαλίδα να το ανεβάσει χωρίς
     να πειράξει αυτό το αρχείο. */
  z-index: var(--nq-mp-z, 1400);
  max-width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Κλειστό: εκτός οθόνης ΚΑΙ μη εστιάσιμο (visibility), ώστε το πληκτρολόγιο
     να μην μπαίνει σε κρυφά links. Η μετάβαση μένει ορατή. */
  visibility: hidden;
  transition: transform .28s ease, visibility 0s linear .28s;
}
.nq-mobpanel-left  { left: 0;  transform: translateX(-100%); }
.nq-mobpanel-right { right: 0; transform: translateX(100%); }
.nq-mobpanel-full  { left: 0; right: 0; width: auto; transform: translateY(-100%); }

/* Ρητή τιμή ανά θέση αντί για ένα `transform:none`: διαβάζεται ως ζεύγος
   «κλειστό → ανοιχτό» δίπλα-δίπλα.
   ⚠️ ΣΗΜΕΙΩΣΗ ΜΕΤΡΗΣΗΣ (2026-08-23): εδώ φάνηκε ότι το πάνελ «δεν ανοίγει» —
   έμενε στο x=-320. ΔΕΝ έφταιγε το CSS: η μέτρηση γινόταν σε iframe μέσα σε
   καρτέλα παρασκηνίου, όπου ο browser ΠΑΓΩΝΕΙ τις μεταβάσεις, οπότε το
   computed transform έμενε στην αρχική τιμή. Με σκοτωμένα τα transitions:
   κλειστό x=-320 → ανοιχτό x=0. Ίδια παγίδα με το Flip Box. */
.nq-mobpanel.is-open { visibility: visible; transition-delay: 0s; }
.nq-mobpanel-left.is-open,
.nq-mobpanel-right.is-open { transform: translateX(0); }
.nq-mobpanel-full.is-open  { transform: translateY(0); }

/* Σκίαση: κλείνει με κλικ, δεν υπάρχει σε full screen (δεν φαίνεται τίποτα). */
.nq-mobpanel-ov {
  position: fixed;
  inset: 0;
  /* Ακριβώς κάτω από το πάνελ, αλλά ΠΑΝΩ από την κεφαλίδα: αλλιώς το κλικ
     πάνω στη μπάρα δεν θα έκλεινε το πάνελ και η μπάρα θα έμενε φωτεινή
     ενώ όλα τα άλλα σκοτεινιάζουν. */
  z-index: calc(var(--nq-mp-z, 1400) - 1);
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.nq-mobpanel-ov.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
body:has(.nq-mobpanel-full.is-open) .nq-mobpanel-ov { opacity: 0; visibility: hidden; }

/* Κουμπί κλεισίματος — σχεδιασμένο με currentColor, άρα σωστό και σε σκούρο
   πάνελ. Δύο γραμμές με ψευδοστοιχεία: κανένα εικονίδιο δεν είναι υποχρεωτικό
   φορτωμένο σε αυτό το σημείο. */
.nq-mobpanel-x {
  position: absolute;
  top: 13px;
  left: 8px;
  width: 50px;
  height: 50px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nq-mobpanel-x::before,
.nq-mobpanel-x::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 21px;
  width: 40px;
  height: 2px;
  background: currentColor;
}
.nq-mobpanel-x::before { transform: rotate(45deg); }
.nq-mobpanel-x::after  { transform: rotate(-45deg); }

/* ΤΟ X: ΜΕΝΕΙ ΣΤΗ ΘΕΣΗ ΤΟΥ, ΞΕΔΙΠΛΩΝΕΤΑΙ ΣΕ ΓΡΑΜΜΕΣ ΚΑΙ ΣΒΗΝΕΙ
   (ιδιοκτητης 2026-09-08).

   ΤΟ ΚΟΥΜΠΙ ΕΙΝΑΙ ΗΔΗ absolute μεσα στο πανελ. Στο κλεισιμο το πανελ
   γλιστραει προς τα πανω· για να ΜΗΝ φυγει μαζι του το X, δεν αρκει να μεινει
   absolute — πρεπει να μη μετακινηθει οπτικα. Το πετυχαινουμε δινοντας του
   δικη του κινηση προς την ΑΝΤΙΘΕΤΗ κατευθυνση, ιση με τη διαδρομη του πανελ.

   ΓΙΑΤΙ 100vh ΚΑΙ ΟΧΙ 100%: το `translateY(100%)` θα μετρουσε το ΔΙΚΟ ΤΟΥ υψος
   (50px), οχι του πανελ. Το πανελ ειναι `top: 0; bottom: 0`, αρα η διαδρομη
   του ειναι ακριβως το υψος του παραθυρου.

   Η διαρκεια ειναι ΙΔΙΑ με του πανελ (.28s) ωστε τα δυο να ακυρωνονται
   ακριβως· το fade ειναι λιγο συντομοτερο για να προλαβει να σβησει. */
.nq-mobpanel-x::before,
.nq-mobpanel-x::after {
  transition: transform .28s ease;
}
.nq-mobpanel:not(.is-open) .nq-mobpanel-x::before {
  transform: translateY(-5px) rotate(0deg);
}
.nq-mobpanel:not(.is-open) .nq-mobpanel-x::after {
  transform: translateY(5px) rotate(0deg);
}
.nq-mobpanel-x {
  transition: transform .28s ease, opacity .22s ease;
}
.nq-mobpanel-full:not(.is-open) .nq-mobpanel-x {
  transform: translateY(100vh);
  opacity: 0;
}

/* ── Το μενού μέσα στο πάνελ ──────────────────────────────────────────────
   Κάθετη λίστα με τα υπομενού inline, όπως στο συρτάρι που ήδη ξέρει ο
   επισκέπτης. Το άνοιγμα υπομενού το χειρίζεται ΗΔΗ καθολικά το theme.js
   (`.nq-sub-toggle` → κλάση `nq-open` στο <li>) — δεν ξαναγράφεται. */
/* ΕΔΩ ΜΟΝΟ ΣΥΜΠΕΡΙΦΟΡΑ (ανοιχτό/κλειστό υπομενού) και οι μηδενισμοί που
   χρειάζονται επειδή το ίδιο `.nq-subnav` είναι αιωρούμενο dropdown στο
   desktop. Η ΕΜΦΑΝΙΣΗ (χρώματα, μεγέθη, αποστάσεις) είναι στις προεπιλογές
   στο τέλος του αρχείου — αλλιώς καμία κεφαλίδα δεν θα μπορούσε να την αλλάξει. */
.nq-mobpanel .nq-nav { display: block; list-style: none;
  width: 100%;
  margin: 0 auto;
}
.nq-mobpanel .nq-nav-item { display: block; }
.nq-mobpanel .nq-nav-link { text-decoration: none; }
.nq-mobpanel .nq-nav-caret { display: none; }        /* το ρόλο του παίρνει το κουμπί */
.nq-mobpanel .nq-sub-toggle { cursor: pointer; }
.nq-mobpanel .nq-sub-toggle::before { content: ""; transition: transform .18s ease; }
.nq-mobpanel .nq-subnav {
  display: none;
  list-style: none;
  /* Μέσα στο πάνελ είναι ΣΥΝΕΧΕΙΑ της λίστας, όχι αιωρούμενο dropdown. */
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  min-width: 0;
}
.nq-mobpanel .nq-nav-item.nq-open > .nq-subnav { display: block; }

/* Σε όλη την οθόνη: πιο άνετη τυπογραφία, το περιεχόμενο κεντραρισμένο σε
   στήλη ανάγνωσης αντί να απλώνεται σε όλο το πλάτος σε tablet. */
.nq-mobpanel-full .nq-mobpanel-in { max-width: 520px; margin: 0 auto; }
.nq-mobpanel-full .nq-nav-link { padding-top: 14px; padding-bottom: 14px; }

/* Όσο είναι ανοιχτό, η σελίδα από κάτω δεν κυλά. */
body.nq-mp-lock { overflow: hidden; }

/* ══ ΠΡΟΕΠΙΛΕΓΜΕΝΗ ΕΜΦΑΝΙΣΗ = ΤΟ ΣΥΡΤΑΡΙ ΤΟΥ DEMO HEADER 1 ═════════════════
   Ιδιοκτήτης 2026-08-23: «ας κάνουμε το μενού του demo header 1 το default,
   που θα παίρνει κάθε header αν δεν έχει κάνει styling το mobile menu».
   Οι τιμές είναι ΑΚΡΙΒΩΣ εκείνες του `.nq-mob-head .nq-h1-mobmenu` στο
   header-demo-33.css (πλάτος 250, #1d1e20, γραμμές #242527, links 40px /
   12px / 400 / uppercase / #fff).

   🔴 ΕΙΔΙΚΟΤΗΤΑ: ΜΙΑ κλάση πάνω από τον κοινό κανόνα, ούτε παραπάνω.
   Πρώτη προσπάθεια ήταν με `:where()` (μηδενική ειδικότητα) και ΑΠΕΤΥΧΕ:
   έχανε ακόμη κι από ΚΑΘΟΛΙΚΟΥΣ κανόνες του theme — μετρημένο, τα sub links
   έβγαιναν 14.5px από το `.nq-subnav .nq-nav-link` και το κουμπί υπομενού
   44px από το `.nq-has-sub > .nq-sub-toggle`. Με `.nq-mobpanel …` οι
   προεπιλογές κερδίζουν τους καθολικούς (ίδια ειδικότητα, το αρχείο φορτώνει
   αργότερα) και μια κεφαλίδα που θέλει δικό της look γράφει
   `.nq-mobpanel.nq-mobpanel …` — μία κλάση παραπάνω, ίδια σύμβαση με το Skin.
   Το Skin → Mobile Panel υπερισχύει επίσης (γράφει `.nq-mobpanel.nq-mobpanel`).

   ΘΕΣΗ ΚΑΙ ΚΙΝΗΣΗ ΔΕΝ ΕΙΝΑΙ ΕΔΩ: τα ορίζει το Theme → Header → Mobile Panel.
   Το demo βγάζει το συρτάρι πάντα αριστερά· εδώ η πλευρά είναι ρύθμιση. */
/* ΤΙΜΕΣ ΤΟΥ ΙΔΙΟΚΤΗΤΗ, ΔΟΘΗΚΑΝ ΑΥΤΟΥΣΙΕΣ (2026-09-07).
   ΠΡΙΝ: `padding: 50px 15px 0 0` · `background: #1d1e20`
   Δύο πραγματικές αλλαγές: το padding αποκτά 10px ΑΡΙΣΤΕΡΑ (ήταν 0) και πέφτει
   15 → 12 δεξιά· και το φόντο από αδιαφανές ουδέτερο σκούρο γίνεται μοβ με
   92% αδιαφάνεια.

   ⚠️ ΤΟ 92% ΕΙΝΑΙ ΟΥΣΙΑΣΤΙΚΗ ΑΛΛΑΓΗ, ΟΧΙ ΑΠΟΧΡΩΣΗ: το πάνελ δείχνει πλέον τη
   σελίδα από πίσω. Δεν μπήκε `backdrop-filter` — ΔΕΝ ζητήθηκε, και θα ήταν
   ορατή απόφαση που δεν πάρθηκε. Αν οι σύνδεσμοι (#fff, 12px) δυσκολεύονται
   πάνω από φωτεινό περιεχόμενο, η λύση είναι εκεί, με ρητό αίτημα.

   ΤΟ box-shadow ΜΕΝΕΙ: δεν αναφέρθηκε, άρα δεν αγγίζεται. Σημειώνεται όμως ότι
   με διάφανο φόντο διαβάζεται αλλιώς από πριν — η σκιά περιγράφει τώρα ένα
   ημιδιαφανές φύλλο, όχι συμπαγές. */
.nq-mobpanel {
  padding: 90px 12px 0 10px;
  background: rgb(31 22 44);
  box-shadow: 0 0 5px rgba(50, 50, 50, .75);
}
/* 🔴 ΤΟ ΠΛΑΤΟΣ ΜΟΝΟ ΣΤΑ ΠΛΑΪΝΑ (ιδιοκτήτης 2026-08-23: «στο full screen μπορεί
   το πλάτος να είναι 100%;»). Ήταν σκέτο `.nq-mobpanel{width:250px}` και
   ΝΙΚΟΥΣΕ το `.nq-mobpanel-full{width:auto}` — ίδια ειδικότητα, αλλά οι
   προεπιλογές είναι πιο κάτω στο αρχείο. Μετρημένο: το full έβγαινε 250px σε
   viewport 390. Τώρα το «όλη η οθόνη» σημαίνει πραγματικά όλη η οθόνη. */
.nq-mobpanel-left,
.nq-mobpanel-right { width: min(250px, 86vw); }
.nq-mobpanel .nq-mobpanel-x { color: #fff; }
.nq-mobpanel .nq-nav { gap: 0; margin: 0; padding: 0; }
.nq-mobpanel .nq-nav-item {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #242527;
  background: transparent;
  border-radius: 0;
}
.nq-mobpanel .nq-nav-link {
  display: block;
  /* 🔴 ΟΧΙ ΣΤΑΘΕΡΟ ΠΛΑΤΟΣ — ΤΟ ΚΕΙΜΕΝΟ ΔΕΝ ΚΟΒΕΤΑΙ ΠΟΤΕ (ιδιοκτητης 2026-09-08).
     ΠΡΙΝ: `width: 60%` + `white-space: nowrap` + `overflow: hidden`. Οι μεγαλες
     λεξεις κοβονταν στη μεση, γιατι το 60% δεν ρωταει ποτε ποσο χωρο θελει το
     κειμενο.
     ΤΩΡΑ: `fit-content` με ΚΑΤΩ οριο 60% και ΠΑΝΩ οριο 90%. Τα μικρα κρατανε το
     60% ωστε η γραμμη απο κατω να μενει ομοιομορφη· τα μεγαλα απλωνονται οσο
     χρειαζονται και, αν ξεπερασουν το 90%, ΣΠΑΝΕ σε δευτερη γραμμη αντι να
     κοπουν. Γι' αυτο εφυγαν και το `nowrap` και το `overflow: hidden`. */
  width: fit-content;
  min-width: 90%;
  max-width: 90%;
  margin: 0 auto;
  height: auto;
  padding: 10px 10px 15px 10px;
  overflow: visible;
  border: 0;
  background: transparent;
  border-radius: 0;
  color: #fff;
  /* 12 → 22 (ιδιοκτητης, 2026-09-07), τωρα που το πανελ ειναι πληρους οθονης.

     ΤΟ `height: 40px` ΚΑΙ ΤΟ `line-height: 40px` ΔΕΝ ΠΕΙΡΑΧΤΗΚΑΝ — ΜΕΤΡΗΘΗΚΕ.
     Η προφανης ανησυχια ειναι οτι 22px γραμματα σε καρφωτο υψος 40 με
     `overflow: hidden` θα κοπουν. Δεν συμβαινει: το κειμενο βγαινει 29px μεσα
     σε γραμμη 40 (5px πανω, 6px κατω) και `scrollHeight == clientHeight`.
     Το `line-height: 40px` ειναι που κεντραρει καθετα — δεν ειναι διακοσμητικο.

     ΚΑΙ ΤΟ ΤΥΛΙΓΜΑ ΔΕΝ ΤΙΘΕΤΑΙ: υπαρχει `white-space: nowrap` πιο κατω, αρα
     δευτερη γραμμη δεν γεννιεται ποτε.
     ⚠️ ΤΟ ΤΙΜΗΜΑ: ενα πολυ μακρυ label θα κοπει ΟΡΙΖΟΝΤΙΑ. Ισχυε και στα 12px,
     απλως τωρα το οριο ερχεται νωριτερα. Τα πεντε σημερινα χωρανε ανετα. */
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: capitalize;
  white-space: normal;
}
.nq-mobpanel .nq-nav-link > .nq-nav-ico {
  display: inline-block;
  margin-right: 7px;
  vertical-align: -1px;
}
.nq-mobpanel .nq-nav-item.is-current-parent > .nq-nav-link {
  /* ΧΩΡΙΣ ΦΟΝΤΟ ΣΤΗΝ ΕΠΙΛΕΓΜΕΝΗ (ιδιοκτητης 2026-09-08): «οταν εχουμε μια
     κατηγορια ή υποκατηγορια επιλεγμενη δεν θελω bg color πουθενα, μονο color
     στο text». Ητan `rgba(0,136,204,.14)` — γαλαζια λωριδα πισω απο τη λεξη. */
  background: transparent;
  color: var(--nq-accent-2, #45b8ef);
  font-weight: 600;
}
/* Κουμπί υπομενού: πιάνει όλη τη γραμμή με το βελάκι δεξιά, όπως στο συρτάρι. */
.nq-mobpanel .nq-sub-toggle {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  /* 40px / padding-right 15px / #fff: οι ΤΕΛΙΚΕΣ τιμές του demo — ένας δεύτερος
     κανόνας πιο κάτω στο part CSS διόρθωνε τα αρχικά 42px/16px. Αν πάρεις μόνο
     τον πρώτο κανόνα, το βελάκι κάθεται 2px πιο χαμηλά από το κείμενο. */
  height: 40px;
  padding: 0 15px 0 0;
  border: 0;
  background: none;
  color: #fff;
  opacity: .7;
}
.nq-mobpanel .nq-sub-toggle::before {
  position: static;
  left: auto;
  top: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nq-mobpanel .nq-nav-item.nq-open > .nq-sub-toggle::before {
  transform: translateY(2px) rotate(-135deg);
}
/* ── ΥΠΟΜΕΝΟΥ ─────────────────────────────────────────────────────────────
   Ιδιοκτήτης 2026-08-23: «τα sub links σου δεν δουλεύουν όπως αυτόν τον
   header». Σωστά — είχα πάρει μόνο το πρώτο μισό των κανόνων. Η εσοχή στο
   demo ΔΕΝ γίνεται με padding στη λίστα αλλά με `margin-left` στον ΣΥΝΔΕΣΜΟ
   (10px, και 20px στο δεύτερο επίπεδο), ώστε η γραμμή κάτω από κάθε item να
   ξεκινά με εσοχή αντί να κόβεται στο πλάτος. */
.nq-mobpanel .nq-subnav {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.nq-mobpanel .nq-subnav .nq-nav-link, .nq-mobpanel .nq-subnav .nq-subnav .nq-nav-link {
  margin-left: 10px;
  padding-left: 15px;
  /* ΠΙΟ ΑΧΝΟ ΑΠΟ ΤΙΣ ΚΑΤΗΓΟΡΙΕΣ — 42% (ιδιοκτητης 2026-09-08).
     🔴 ΩΣ rgba ΚΑΙ ΟΧΙ color-mix ΜΕ ΤΗ `--nq-fg`: η μεταβλητη ΔΕΝ οριζεται
     πουθενα στο project (μονο με εφεδρικη, `var(--nq-fg, #333)`). Μεσα σε
     `color-mix` δεν υπαρχει εφεδρικη, οποτε ολη η δηλωση εβγαινε ΑΚΥΡΗ. */
  color: #d6d5f9;
}
.nq-mobpanel .nq-subnav .nq-subnav .nq-nav-link { margin-left: 20px; }
/* Ο γονιός του τρέχοντος: το ίδιο μπλε με το demo — και στο βελάκι του. */
.nq-mobpanel .nq-nav-item.is-current-parent > .nq-sub-toggle {
  color: var(--nq-accent-2, #45b8ef);
  opacity: 1;
}

/* ══ ΟΙ ΔΥΟ ΥΠΟΔΟΧΕΣ ΤΟΥ ΠΑΝΕΛ (2026-08-23) ═══════════════════════════════
   Theme → Header → Containers → «Mobile Panel»: ό,τι μπει στο «Πάνω από το
   μενού» / «Κάτω από το μενού» βγαίνει με ΤΟ ΙΔΙΟ markup των containers
   (`ul.nq-slot-list > li`), άρα ισχύει ήδη ό,τι ορίζει το functions.css.
   Εδώ αλλάζει ΜΟΝΟ ο άξονας: η μπάρα είναι οριζόντια, το πάνελ κάθετο —
   σε στήλη το `nowrap` του functions.css δεν κρύβει τίποτα, γιατί το πάνελ
   κυλά. ΧΡΩΜΑΤΑ ΚΑΝΕΝΑ: τα δίνει το Skin → Mobile Panel, όπως στα links. */
.nq-mobpanel .nq-slot-list {
  flex-direction: column;
  align-items: stretch;
  gap: var(--nq-mp-gap, 12px);
}
/* ΚΑΘΕ ITEM ΜΙΑ ΟΛΟΚΛΗΡΗ ΓΡΑΜΜΗ (ιδιοκτήτης 2026-08-23): πιάνει όλο το πλάτος
   του συρταριού, κρατά το κενό πάνω-κάτω και το περιεχόμενό του κάθεται
   ΚΕΝΤΡΑΡΙΣΜΕΝΟ κάθετα μέσα στη γραμμή του — όπως τα items του μενού. */
.nq-mobpanel .nq-slot-list > li {
  display: flex;
  align-items: center;
  /* ΣΤΗ ΜΕΣΗ ΤΟΥ ΠΑΝΕΛ, ΟΧΙ ΑΡΙΣΤΕΡΑ (ιδιοκτήτης 2026-08-23). */
  justify-content: center;
  width: 100%;
  min-height: var(--nq-mp-row, 40px);
}
/* Το περιεχόμενο ΔΕΝ τεντώνεται: μένει όσο χρειάζεται ώστε να μπορεί να
   κεντραριστεί. Ό,τι θέλει όλο το πλάτος (π.χ. search) το δηλώνει μόνο του
   με `width:100%` — το `max-width` εδώ απλώς δεν το αφήνει να ξεχειλίσει. */
.nq-mobpanel .nq-slot-list > li > * { max-width: 100%; min-width: 0; }
/* Και το κείμενο μέσα στα items (ίδιο ιδίωμα με τους μεσαίους containers των
   μπαρών, functions.css): το `justify-content` στοιχίζει το κουτί, όχι το
   περιεχόμενό του. */
.nq-mobpanel .nq-slot { text-align: center; }

/* Η ΓΡΑΜΜΗ ΑΝΑ ITEM ΣΤΟΝ ΚΑΘΕΤΟ ΑΞΟΝΑ: ίδιο ιδίωμα με την οριζόντια μπάρα
   (functions.css) — μισό κενό στη λίστα, το άλλο μισό ως padding στην πλευρά
   της γραμμής, ώστε η γραμμή να κεντράρεται ΣΤΟ ΚΕΝΟ και όχι να κολλά στο ένα
   item. Το συνολικό κενό μένει ίδιο. */
.nq-mobpanel .nq-slot-list:has(> li[class*="nq-sep-"]) { gap: calc(var(--nq-mp-gap, 12px) / 2); }
.nq-mobpanel .nq-slot-list > li.nq-sep-t { padding-top:    calc(var(--nq-mp-gap, 12px) / 2); }
.nq-mobpanel .nq-slot-list > li.nq-sep-b { padding-bottom: calc(var(--nq-mp-gap, 12px) / 2); }
/* Ίδια εσοχή με τα links του μενού, αλλά ΜΟΝΟ ΑΡΙΣΤΕΡΑ.
   🔴 ΜΕΤΡΗΜΕΝΟ: με `padding: 0 15px` το κέντρο των items έπεφτε στο x=118 ενώ
   το κέντρο του πάνελ είναι 125 — 7px παρατοπισμένα. Αιτία: το ίδιο το πάνελ
   έχει ΑΣΥΜΜΕΤΡΟ padding (`0 15px 0 0`), οπότε η δεξιά εσοχή μετριέται δύο
   φορές. Με εσοχή μόνο αριστερά, το κουτί γίνεται 15→235 και το κέντρο του
   πέφτει ακριβώς στο 125. */
.nq-mobpanel .nq-slot { padding: 0 0 0 15px; }
.nq-mobpanel .nq-slot-above { margin-bottom: 14px; }
.nq-mobpanel .nq-slot-below { margin-top: 14px; }

/* 🔴 ΤΟ ΧΡΩΜΑ ΚΕΙΜΕΝΟΥ ΤΟΥ ΙΔΙΟΥ ΤΟΥ ΠΑΝΕΛ (2026-08-23)
   ΜΕΤΡΗΜΕΝΟ: ό,τι ΔΕΝ είναι `.nq-nav-link` (κείμενο υποδοχής, εικονίδια
   social, ετικέτες widget) κληρονομούσε `#111827` πάνω σε `#1d1e20` —
   αντίθεση 1.05, δηλαδή τελείως αόρατο. Τα links δεν το πάθαιναν επειδή
   παίρνουν ρητό `#fff` πιο πάνω· μόλις μπήκαν οι δύο υποδοχές, φάνηκε.

   ΓΙΑΤΙ `:where()` ΕΔΩ (και όχι στα links, όπου είχε αποτύχει): εδώ ο μόνος
   «αντίπαλος» είναι η ΚΛΗΡΟΝΟΜΙΑ από το <body>, και κάθε κανόνας — ακόμη και
   μηδενικής ειδικότητας — νικά την κληρονομιά. Έτσι το Skin → Mobile Panel
   («Χρώμα κειμένου», `.nq-h1-mobmenu{color:…}`) συνεχίζει να κερδίζει
   κανονικά· αν γραφόταν με κλάση, το mobpanel.css φορτώνει ΑΡΓΟΤΕΡΑ από το
   <style> του skin και θα ακύρωνε τη ρύθμιση. */
:where(.nq-mobpanel) { color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   ΚΕΝΤΡΑΡΙΣΜΕΝΟΙ ΣΥΝΔΕΣΜΟΙ ΣΤΟ ΠΑΝΕΛ ΠΛΗΡΟΥΣ ΟΘΟΝΗΣ (2026-09-07)
   ══════════════════════════════════════════════════════════════════
   ΜΟΝΟ ΣΤΟ `-full`, ΕΠΙΤΗΔΕΣ: το αιτημα ηρθε αφου το πανελ εγινε πληρους
   οθονης (ρυθμιση Theme → Header → Mobile Panel → Position). Σε μορφη
   συρταριου 250px το κεντραρισμα δεν εχει νοημα — τα links ειναι κοντα στην
   αριστερη ακρη ουτως η αλλως. Αν καποτε επιστρεψει σε συρταρι, η αριστερη
   στοιχιση επανερχεται μονη της, χωρις να χρειαστει να θυμηθει κανεις τιποτα.

   🔴 Η ΕΣΟΧΗ ΤΩΝ ΥΠΟΜΕΝΟΥ ΜΗΔΕΝΙΖΕΤΑΙ ΓΙΑΤΙ ΑΛΛΙΩΣ ΤΟ «ΚΕΝΤΡΟ» ΕΙΝΑΙ ΨΕΥΤΙΚΟ.
   Τα υπομενου εχουν `margin-left: 10px` (πρωτο επιπεδο) και `20px` (δευτερο).
   Με κεντραρισμενο κειμενο μια ΜΟΝΟΠΛΕΥΡΗ εσοχη δεν διαβαζεται ως ιεραρχια —
   διαβαζεται ως λαθος στοιχιση, γιατι καθε γραμμη κεντραρεται σε διαφορετικο
   αξονα απο την προηγουμενη. Μηδενιζονται ωστε ολες οι γραμμες να μοιραζονται
   τον ιδιο καθετο αξονα.

   ⚠️ ΣΥΝΕΠΕΙΑ ΠΟΥ ΠΡΕΠΕΙ ΝΑ ΞΕΡΕΙ ΚΑΠΟΙΟΣ: μαζι με την εσοχη χανεται και η
   ΟΠΤΙΚΗ ΔΙΑΚΡΙΣΗ γονεα-παιδιου. Αν ζητηθει πισω, ΔΕΝ επιστρεφει η εσοχη —
   θα ξαναχαλαγε το κεντραρισμα. Οι δρομοι που το λυνουν χωρις να σπασουν τον
   αξονα ειναι μικροτερη γραμματοσειρα, χαμηλοτερη αδιαφανεια, η διαχωριστικο.

   ΤΟ ΒΕΛΑΚΙ ΜΕΤΑΚΙΝΗΘΗΚΕ ΔΙΠΛΑ ΣΤΗ ΛΕΞΗ — βλ. το επομενο μπλοκ. */
.nq-mobpanel-full .nq-nav-link {
  text-align: center;
}

/* ΚΑΙ ΟΙ ΥΠΟΚΑΤΗΓΟΡΙΕΣ ΚΕΝΤΡΑΡΙΣΜΕΝΕΣ (ιδιοκτητης 2026-09-08).
   Ο κανονας των υπομενου (`.nq-mobpanel .nq-subnav .nq-nav-link`) εχει
   `margin-left: 10px; padding-left: 15px` — εσοχη που δηλωνε ιεραρχια οταν
   ολα ησαν αριστερα στοιχισμενα. Εχει ΤΡΕΙΣ κλασεις, αρα νικαει το
   `margin: 0 auto` του γονικου κανονα (δυο κλασεις) και τα υπομενου εμεναν
   μετατοπισμενα ενω ολα τα αλλα κεντραρονταν.
   Εδω μηδενιζεται ΜΟΝΟ για το πληρους οθονης πανελ. */
.nq-mobpanel-full .nq-subnav .nq-nav-link,
.nq-mobpanel-full .nq-subnav .nq-subnav-link {
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

/* ΥΠΟΚΑΤΗΓΟΡΙΕΣ: πιο μαζεμενες απο τις κατηγοριες (ιδιοκτητης 2026-09-08).
   ΤΟ ΥΨΟΣ ΓΙΝΕΤΑΙ auto ΕΠΙΤΗΔΕΣ: ο γονικος κανονας εχει `height: 50px` και
   `line-height: 47px`, οποτε ΟΣΟ κι αν μικρυνε το padding δεν θα φαινοταν
   τιποτα — το υψος ειναι καρφωτο. Με auto, το padding οριζει πραγματικα τη
   γραμμη. Το `line-height: 1.4` αντικαθιστα το καρφωτο 47px, που σε 18px
   γραμματα θα εδινε τεραστιο κενο. */
.nq-mobpanel-full .nq-subnav .nq-nav-link {
  /* 🔴 `!important` ΑΝΑΓΚΑΣΤΙΚΑ: το Skin εκπεμπει inline
     `.nq-subnav .nq-nav-link{text-transform:uppercase!important}` (ρυθμιση
     2ου επιπεδου, Skin -> Main Menu). Χωρις `!important` εδω, ο κανονας
     χανει οσες κλασεις κι αν εχει. */
  text-transform: capitalize !important;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 20px;
  line-height: 1.4;
}
.nq-mobpanel-full .nq-subnav .nq-nav-item {
  border-bottom: 0;
}

/* Η ΓΡΑΜΜΗ ΤΩΝ ΚΑΤΗΓΟΡΙΩΝ ΣΤΟ 60% (ιδιοκτητης 2026-09-08).
   ΜΕΤΑΦΕΡΕΤΑΙ ΑΠΟ ΤΟ <li> ΣΤΟΝ ΣΥΝΔΕΣΜΟ, και αυτο ειναι ολο το κολπο: το <li>
   πιανει ολο το πλατος του πανελ, ενω ο συνδεσμος ειναι ηδη `width: 60%` με
   `margin: 0 auto`. Βαζοντας τη γραμμη εκει, βγαινει 60% ΚΑΙ κεντραρισμενη
   χωρις καμια νεα τιμη — αν αυριο αλλαξει το 60%, η γραμμη το ακολουθει μονη.
   Το `> .nq-nav >` κραταει τον κανονα στις ΚΑΤΗΓΟΡΙΕΣ: οι υποκατηγοριες ζουν
   σε `.nq-subnav`, οποτε δεν τον πιανουν. */
.nq-mobpanel-full .nq-nav-item {
  border-bottom: 0;
}
/* 🔴 Η ΓΡΑΜΜΗ ΕΦΥΓΕ ΑΠΟ ΤΟΝ ΣΥΝΔΕΣΜΟ ΚΑΙ ΕΓΙΝΕ ΨΕΥΔΟΣΤΟΙΧΕΙΟ ΤΟΥ <li>.
   ΓΙΑΤΙ: οταν ο συνδεσμος απεκτησε ελαστικο πλατος (fit-content, 60-90%) ωστε
   να μην κοβεται το κειμενο, η γραμμη — που ηταν border ΤΟΥ συνδεσμου —
   ακολουθησε το κειμενο και **αλλαζε μηκος σε καθε κατηγορια**. Ομοιομορφη
   γραμμη και ελαστικο πλατος κειμενου δεν γινονται με το ιδιο κουτι.
   Το ψευδοστοιχειο ζει στο <li>, που ειναι ΠΑΝΤΑ ολο το πλατος, οποτε το 60%
   μετραει σταθερα πανω σε αυτο — ιδιο μηκος για ολες, οσο μακρυ κι αν ειναι
   το κειμενο. Και δεν χρειαστηκε ουτε ενα <span> στο markup του μενου, που
   παραγεται αλλου. */
.nq-mobpanel-full .nq-nav > .nq-nav-item::after {
  content: "";
  display: block;
  width: 15%;
  margin: 0 auto;
  border-bottom: 2px solid #e1ceff47;
}
/* Η ΤΕΛΕΥΤΑΙΑ ΚΑΤΗΓΟΡΙΑ ΔΕΝ ΕΧΕΙ ΓΡΑΜΜΗ: το διαχωριστικο υπαρχει για να
   ΧΩΡΙΖΕΙ δυο κατηγοριες — κατω απο την τελευταια δεν χωριζει τιποτα και
   διαβαζεται ως ορφανη διακοσμηση. */
.nq-mobpanel-full .nq-nav > .nq-nav-item:last-child::after {
  content: none;
}

/* ΑΝΑΣΑ ΜΕΤΑ ΤΗΝ ΤΕΛΕΥΤΑΙΑ ΥΠΟΚΑΤΗΓΟΡΙΑ (ιδιοκτητης 2026-09-08): το κενο
   πριν την επομενη ΚΑΤΗΓΟΡΙΑ πρεπει να ειναι μεγαλυτερο απο το κενο μεταξυ
   των υποκατηγοριων, ωστε να διαβαζεται που τελειωνει η ομαδα.
   Μπαινει στο ΤΕΛΕΥΤΑΙΟ στοιχειο και οχι ως `margin-bottom` στη λιστα, ωστε
   να μη μαζευεται με τυχον περιθωριο της επομενης κατηγοριας. */
.nq-mobpanel-full .nq-subnav > .nq-nav-item:last-child > .nq-nav-link {
  padding-bottom: 26px;
}
.nq-mobpanel-full .nq-subnav .nq-nav-link,
.nq-mobpanel-full .nq-subnav .nq-subnav .nq-nav-link {
  margin-left: auto;
  margin-right: auto;
}

/* ══════════════════════════════════════════════════════════════════
   ΤΟ ΒΕΛΑΚΙ ΤΟΥ ΥΠΟΜΕΝΟΥ ΔΙΠΛΑ ΣΤΗ ΛΕΞΗ (ιδιοκτητης, 2026-09-07)
   «το βελακι δεξια να ερθει κοντα στην κατηγορια»
   ══════════════════════════════════════════════════════════════════

   🔴 ΤΟ ΠΡΟΦΑΝΕΣ ΚΑΤΑΣΤΡΕΦΕΙ ΤΟΝ ΣΤΟΧΟ ΤΟΥ ΔΑΧΤΥΛΟΥ. Το `.nq-sub-toggle` ειναι
   `position: absolute; left: 0; right: 0` ΕΠΙΤΗΔΕΣ: ολοκληρη η γραμμη ανοιγει
   το υπομενου. Αν γινοταν `static` και εμπαινε διπλα στο κειμενο, ο στοχος θα
   επεφτε απο ολη τη γραμμη σε **7px** — αδυνατο στο κινητο.

   Η ΛΥΣΗ ΞΕΧΩΡΙΖΕΙ ΤΑ ΔΥΟ: το κουμπι μενει ακριβως οπου ηταν, αορατο, και
   κραταει ολη τη γραμμη ως στοχο· το βελακι ζωγραφιζεται ΜΕΣΑ στον συνδεσμο,
   αμεσως μετα το `<span>` του κειμενου. Ετσι ακολουθει αυτοματα το κεντρο, οσο
   κι αν αλλαξει το μηκος της λεξης — καμια τιμη δεν χρειαζεται να μαντευτει.

   ΙΔΙΟ ΣΧΗΜΑ, ΟΧΙ ΝΕΟ: αντιγραφονται οι ΑΚΡΙΒΕΙΣ τιμες του παλιου βελους
   (7×7, δυο περιγραμματα 2px, στροφη 45°, ιδιο `translateY`, opacity .7) ωστε
   να μη φαινεται οτι αλλαξε εικονιδιο — μονο θεση.

   ΤΟ ΑΝΟΙΓΜΑ ΔΙΑΤΗΡΕΙΤΑΙ: η κλαση `nq-open` μπαινει στο <li>, οποτε η στροφη
   προς τα πανω (-135°) ξαναγραφεται για το νεο βελακι. Χωρις αυτο, το βελος θα
   εμενε να δειχνει κατω με το υπομενου ανοιχτο.

   ΔΕΝ ΧΡΗΣΙΜΟΠΟΙΗΘΗΚΕ ΤΟ ΥΠΑΡΧΟΝ `.nq-nav-caret` ΤΟΥ ΣΥΝΔΕΣΜΟΥ, αν και ειναι
   ηδη εκει και ηδη διπλα στο κειμενο: ειναι εικονιδιο γραμματοσειρας feather
   (`fe-chevron-down`), δηλαδη ΑΛΛΟ σχημα απο το CSS chevron που βλεπει σημερα ο
   ιδιοκτητης. Μενει `display: none` οπως ηταν.

   ΜΟΝΟ ΣΤΟ `-full`: σε μορφη συρταριου το κειμενο ειναι αριστερα στοιχισμενο
   και το βελακι στη δεξια ακρη ειναι σωστο. */
.nq-mobpanel-full .nq-sub-toggle::before {
  display: none;
}
.nq-mobpanel-full .nq-has-sub > .nq-nav-link > span::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 10px;
  vertical-align: middle;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .7;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.nq-mobpanel-full .nq-nav-item.nq-open > .nq-nav-link > span::after {
  transform: translateY(2px) rotate(-135deg);
}

/* ══════════════════════════════════════════════════════════════════
   ΙΕΡΑΡΧΙΑ ΥΠΟΜΕΝΟΥ ΜΕ ΜΕΓΕΘΟΣ, ΟΧΙ ΜΕ ΕΣΟΧΗ (2026-09-07)
   ══════════════════════════════════════════════════════════════════
   Η εσοχη των υπομενου αφαιρεθηκε οταν κεντραριστηκαν τα links — μονοπλευρη
   εσοχη σε κεντραρισμενη στοιχιση διαβαζεται ως λαθος αξονα, οχι ως ιεραρχια.
   Μαζι της ομως χαθηκε και η διακριση γονεα-παιδιου.

   🔴 ΤΟ ΧΡΩΜΑ ΔΕΝ ΕΙΝΑΙ ΕΠΙΛΟΓΗ ΕΔΩ — ΜΕΤΡΗΘΗΚΕ ΟΤΙ ΔΕΝ ΠΙΑΝΕΙ. Το αρχειο
   οριζει `--nq-accent-2` στα κυρια και `#fff` στα υπομενου, αλλα ΖΩΝΤΑΝΑ και
   τα δυο βγαινουν `rgb(255,255,255)`: κατι τα ισοπεδωνει, πιθανοτατα το Skin.
   Το μεγεθος δεν ισοπεδωνεται απο κανεναν — γι' αυτο ειναι το σωστο σημα.

   16 / 22 ≈ 73%: αρκετα μικροτερο για να διαβαζεται αμεσως ως δευτερο επιπεδο,
   αρκετα μεγαλο για να παραμενει ανετος στοχος για το δαχτυλο.

   ΜΟΝΟ ΣΤΟ `-full`: σε μορφη συρταριου η εσοχη υπαρχει ακομη και κανει τη
   δουλεια της· εκει μια δευτερη διαφορα θα ηταν περιττη. */
.nq-mobpanel-full .nq-subnav .nq-nav-link {
  /* 16px -> 18px: ρητο αιτημα ιδιοκτητη (2026-09-08). Ο κανονας εμεινε εδω
     γιατι ερχεται ΜΕΤΑ τον κανονα των υποκατηγοριων πιο πανω και θα τον νικουσε
     σιωπηλα — δυο ιδιοι selector, κερδιζει ο τελευταιος. */
  font-size: 20px;
}


/* ΚΑΝΕΝΑ ΦΟΝΤΟ ΣΕ ΚΑΜΙΑ ΕΠΙΛΕΓΜΕΝΗ ΚΑΤΑΣΤΑΣΗ ΜΕΣΑ ΣΤΟ ΠΑΝΕΛ.
   Πιανει και τις υποκατηγοριες και το `hover`/`focus`, που αλλιως θα αφηναν
   φοντο σε αλλη στιγμη και θα εμοιαζε με «μισοδιορθωμενο». Το χρωμα κειμενου
   ΔΕΝ αγγιζεται — αυτο ειναι το μονο σημα επιλογης που ζητηθηκε. */
.nq-mobpanel .nq-nav-item.is-current > .nq-nav-link,
.nq-mobpanel .nq-nav-item.is-current-parent > .nq-nav-link,
.nq-mobpanel .nq-subnav .nq-nav-item.is-current > .nq-nav-link,
.nq-mobpanel .nq-nav-link:hover,
.nq-mobpanel .nq-nav-link:focus {
  background: transparent !important;
}


/* ════════════════════════════════════════════════════════════════
   ΚΑΤΗΓΟΡΙΑ ΜΕ ΣΥΝΔΕΣΜΟ *ΚΑΙ* ΥΠΟΜΕΝΟΥ — ΤΟ ΚΕΙΜΕΝΟ ΟΔΗΓΕΙ, Η ΥΠΟΛΟΙΠΗ
   ΓΡΑΜΜΗ ΑΝΟΙΓΕΙ (ιδιοκτητης, 2026-09-08)

   ΤΟ ΑΙΤΗΜΑ: «στο mobile menu δεν μπορουμε να κανουμε click σε κατηγορια που
   εχει link και υποκατηγοριες. Οπως και στο desktop, click πανω στον τιτλο να
   σε πηγαινει στο link (αν δεν εχει link, απλως ανοιγει το υπομενου). Για να
   ανοιξεις το υπομενου κανεις click δεξια/αριστερα απο το κειμενο.»

   Η ΑΙΤΙΑ, ΜΕΤΡΗΜΕΝΗ ΜΕ `elementFromPoint` στα 390:
   το `.nq-sub-toggle` ειναι `position:absolute` 353x40 με `z-index:2` πανω σε
   ΟΛΗ τη γραμμη. Και στα τρια σημεια — κεντρο του κειμενου, αριστερα, δεξια —
   ο παραληπτης του κλικ ηταν το κουμπι. Ο `<a class="nq-nav-link">` με το
   πραγματικο href ηταν απο κατω και δεν τον ακουμπουσε ποτε κανεις.
   (Στα items ΧΩΡΙΣ υπομενου δεν υπαρχει κουμπι, γι' αυτο εκεινα δουλευαν.)

   Η ΛΥΣΗ: ανεβαινει ΜΟΝΟ το `<span>` του κειμενου πανω απο το κουμπι. Ο,τι
   αλλο εχει η γραμμη — τα κενα δεξια/αριστερα, το βελακι — μενει κατω απο το
   κουμπι, αρα ανοιγει υπομενου. Ακριβως ο διαχωρισμος που ζητηθηκε.

   🔴 ΤΟ `:not([href="#"])` ΕΙΝΑΙ Ο ΟΡΟΣ «ΑΝ ΔΕΝ ΕΧΕΙ LINK»: η `core/menu.php`
   γραφει `href="#"` οταν το item δεν εχει διευθυνση. Τετοιο item ΔΕΝ πρεπει να
   σηκωθει — το κειμενο του οφειλει να ανοιγει το υπομενου, οπως πριν. Το μενου
   εχει σημερα και τις δυο περιπτωσεις («Υπηρεσιες» με `/nea-ypiresies-demo5`
   και δευτερη «Υπηρεσιες» με `#`), οποτε ο ορος δεν ειναι θεωρητικος.

   ΓΙΑΤΙ ΣΤΟ span ΚΑΙ ΟΧΙ ΣΤΟΝ <a>: ο συνδεσμος ειναι `width: fit-content` με
   `min-width: 90%`, δηλαδη ΠΟΛΥ πλατυτερος απο τη λεξη. Αν σηκωναμε αυτον, το
   «δεξια/αριστερα απο το κειμενο» θα εξακολουθουσε να οδηγει στη σελιδα και το
   υπομενου δεν θα ανοιγε ποτε. Το `<span>` ειναι inline — η περιοχη του ΕΙΝΑΙ
   η λεξη.

   ΚΛΕΙΔΩΜΕΝΟ ΣΤΟ `.nq-mobpanel`: το desktop μενου δεν εχει αυτο το προβλημα
   (το υπομενου ανοιγει με hover) και δεν το αγγιζει αυτος ο κανονας.
   ════════════════════════════════════════════════════════════════ */
.nq-mobpanel .nq-nav-item > .nq-nav-link:not([href="#"]) > span {
  position: relative;
  z-index: 3;
}