/* ==========================================================================
* mobpanel.css — ΤΟ ΚΟΙΝΟ ΠΑΝΕΛ ΚΙΝΗΤΟΥ (2026-08-23)
* --------------------------------------------------------------------------
* Φορτώνεται ΜΟΝΟ όπου υπάρχει κουμπί burger του νέου μοντέλου (το το
* τυπώνει η 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 όταν ανοίγει»). ΑΙΤΙΑ, μετρημένη: το `` έχει
z-index **1350**, το πάνελ είχε 1000. Το παλιό συρτάρι δεν το πάθαινε
γιατί ζούσε ΜΕΣΑ στην κεφαλίδα — κληρονομούσε το δικό της επίπεδο. Το
κοινό πάνελ ζει στο , άρα πρέπει να το ξεπεράσει ρητά.
Μεταβλητή, ώστε ένα 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: 12px;
right: 12px;
width: 34px;
height: 34px;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
}
.nq-mobpanel-x::before,
.nq-mobpanel-x::after {
content: "";
position: absolute;
left: 8px;
top: 16px;
width: 18px;
height: 2px;
background: currentColor;
}
.nq-mobpanel-x::before { transform: rotate(45deg); }
.nq-mobpanel-x::after { transform: rotate(-45deg); }
/* ── Το μενού μέσα στο πάνελ ──────────────────────────────────────────────
Κάθετη λίστα με τα υπομενού inline, όπως στο συρτάρι που ήδη ξέρει ο
επισκέπτης. Το άνοιγμα υπομενού το χειρίζεται ΗΔΗ καθολικά το theme.js
(`.nq-sub-toggle` → κλάση `nq-open` στο
) — δεν ξαναγράφεται. */
/* ΕΔΩ ΜΟΝΟ ΣΥΜΠΕΡΙΦΟΡΑ (ανοιχτό/κλειστό υπομενού) και οι μηδενισμοί που
χρειάζονται επειδή το ίδιο `.nq-subnav` είναι αιωρούμενο dropdown στο
desktop. Η ΕΜΦΑΝΙΣΗ (χρώματα, μεγέθη, αποστάσεις) είναι στις προεπιλογές
στο τέλος του αρχείου — αλλιώς καμία κεφαλίδα δεν θα μπορούσε να την αλλάξει. */
.nq-mobpanel .nq-nav { display: block; list-style: none; }
.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 βγάζει το συρτάρι πάντα αριστερά· εδώ η πλευρά είναι ρύθμιση. */
.nq-mobpanel {
padding: 50px 15px 0 0;
background: #1d1e20;
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;
height: 40px;
padding: 0 15px;
overflow: hidden;
border: 0;
background: transparent;
border-radius: 0;
color: #fff;
font-size: 12px;
font-weight: 400;
line-height: 40px;
text-transform: uppercase;
white-space: nowrap;
}
.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 {
background: rgba(0, 136, 204, .14);
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;
color: #fff;
}
.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, όπου είχε αποτύχει): εδώ ο μόνος
«αντίπαλος» είναι η ΚΛΗΡΟΝΟΜΙΑ από το , και κάθε κανόνας — ακόμη και
μηδενικής ειδικότητας — νικά την κληρονομιά. Έτσι το Skin → Mobile Panel
(«Χρώμα κειμένου», `.nq-h1-mobmenu{color:…}`) συνεχίζει να κερδίζει
κανονικά· αν γραφόταν με κλάση, το mobpanel.css φορτώνει ΑΡΓΟΤΕΡΑ από το