/* header-1.css — η κεφαλίδα «Header 1» (4 parts, 4 ζώνες).
   Μπαίνει στη ζώνη «Head — CSS / JS» του προτύπου που τη χρησιμοποιεί.

   Δεν ξαναγράφει το κέλυφος: το σκούρο φόντο και το ύψος τα δίνει ήδη το
   theme.css μέσω των --nq-header-* . Εδώ μπαίνει μόνο η διάταξη των κομματιών. */

/* ── Κύρια γραμμή: λογότυπο | ενέργειες ─────────────────────────────────── */
.nq-h1-brand { display: flex; align-items: center; gap: 20px; min-height: var(--nq-header-h, 88px); }
.nq-h1-logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.nq-h1-logo img { max-height: 56px; width: auto; display: block; }
.nq-h1-logotxt { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

.nq-h1-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nq-h1-tel { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600;
  color: inherit; text-decoration: none; white-space: nowrap; }
.nq-h1-tel svg { width: 17px; height: 17px; opacity: .7; }
.nq-h1-tel:hover { color: #fff; }
.nq-h1-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px;
  background: var(--nq-accent); color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: filter .16s, transform .16s; }
.nq-h1-cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }

/* 🔴 currentColor, ΟΧΙ καρφωτό λευκό (2026-08-10). Ήταν `#fff` και περίγραμμα
   rgba(255,255,255,.24): σε ΑΝΟΙΧΤΗ κεφαλίδα το κουμπί γινόταν αόρατο — λευκό
   πάνω σε λευκό. Τώρα ακολουθεί το χρώμα κειμένου της κεφαλίδας, δηλαδή το ίδιο
   token που ορίζει και το Skin. Οι πρώτες δηλώσεις μένουν ως δίχτυ για browser
   χωρίς color-mix. */
/* ⚠️ `color: inherit` ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ: τα <button> ΔΕΝ κληρονομούν χρώμα (ο
   browser τους δίνει `buttontext`, δηλαδή μαύρο). Χωρίς αυτό το currentColor
   έβγαινε ΜΑΥΡΟ πάνω σε σκούρα κεφαλίδα — μετρήθηκε rgb(0,0,0) ενώ το <header>
   είχε rgb(232,235,243). Αυτός ήταν και ο λόγος που ο αρχικός κώδικας είχε
   καρφώσει `#fff`. */
.nq-h1-burger { display: none; width: 42px; height: 42px; padding: 0; border-radius: 9px; cursor: pointer;
  color: inherit; background: transparent; border: 1px solid rgba(255, 255, 255, .24);
  border-color: color-mix(in srgb, currentColor 32%, transparent); }
.nq-h1-burger span { display: block; width: 18px; height: 2px; margin: 3px auto; background: #fff; border-radius: 2px;
  background: currentColor; transition: transform .2s, opacity .2s; }
/* «Να φαίνεται πάντα» — πεδίο του block «Mobile Menu», ανά στιγμιότυπο. */
.nq-h1-burgerwrap.is-always .nq-h1-burger { display: block; }
/* Με εικονίδιο αντί για γραμμές: κεντράρισμα και μέγεθος από το κουμπί. */
.nq-h1-burger.has-icon { display: none; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }
@media (max-width: 991.98px) { .nq-h1-burger.has-icon { display: flex; } }
.nq-h1-burgerwrap.is-always .nq-h1-burger.has-icon { display: flex; }
.nq-h1-burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nq-h1-burger.is-open span:nth-child(2) { opacity: 0; }
.nq-h1-burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ── Η ΓΡΑΜΜΗ #header ΕΙΝΑΙ ΠΛΕΓΜΑ ΤΟΥ BUILDER (2026-08-08) ────────────────
   Λογότυπο, μενού και ενέργειες είναι ΤΡΙΑ ΚΟΜΜΑΤΙΑ ΣΕ ΤΡΕΙΣ ΣΤΗΛΕΣ — τα
   σέρνεις και τα ρυθμίζεις από τον καμβά. Εδώ μπαίνει ΜΟΝΟ ό,τι δεν μπορεί να
   δώσει το πλέγμα: το πλάτος του container, η κάθετη στοίχιση και το ύψος.

   ⚠️ Πρώτη εκδοχή έβαζε τα δύο parts στην ΙΔΙΑ στήλη και τα «ένωνε» με
   `display:contents`. Δούλευε οπτικά, αλλά στον builder φαίνονταν δύο στοιχεία
   στοιβαγμένα και οι στήλες ήταν ψεύτικες. Το CSS δεν πρέπει να κρύβει λάθος δομή. */
/* ΤΟ ΥΨΟΣ ΠΑΕΙ ΣΤΟ ΟΡΑΤΟ ΚΟΥΤΙ, ΟΧΙ ΣΤΟ ΕΣΩΤΕΡΙΚΟ GRID.
   `#header` είναι το `.pb-row-box` (η σκούρα μπάρα)· μέσα του το `.pb-row.row`
   είναι μόνο το πλέγμα. Με το min-height στο πλέγμα, η μπάρα έπαιρνε ύψος από
   το περιεχόμενο και το λογότυπο κόλλαγε ψηλά. */
/* ⚠️ ΕΙΔΙΚΟΤΗΤΑ: το theme.css έχει `header > #header` (0,1,1). Σκέτο `#header`
   (0,1,0) χάνει και το κεντράρισμα δεν εφαρμοζόταν — το περιεχόμενο κόλλαγε στην
   κορυφή με ~33px κενό από κάτω. Ίδια ειδικότητα + φορτώνει μετά ⇒ κερδίζει. */
header > #header { display: flex; align-items: center; min-height: var(--nq-header-h, 88px); }
#header > .pb-row {
  width: 100%; max-width: var(--nq-max); margin-inline: auto; padding-inline: 12px;
  align-items: center;
}
/* Το μενού μέσα σε στήλη δεν χρειάζεται δικό του container — το δίνει η γραμμή.
   Και ΔΕΝ κρατά δικό του min-height: πρόσθετε ύψος πάνω από το κεντράρισμα της
   στήλης και το μενού έπεφτε 5px χαμηλότερα από το CTA. */
#header .nq-h1-navbar { max-width: none; padding-inline: 0; min-height: 0; }

/* ── ΚΕΦΑΛΙΔΑ ΚΙΝΗΤΟΥ — υποδοχή «Main head (κινητό)» ──────────────────────────
   ⚠️ ΔΕΝ ΕΧΕΙ id, ΚΑΙ ΔΕΝ ΠΡΕΠΕΙ ΝΑ ΑΠΟΚΤΗΣΕΙ: η υποδοχή μπαίνει ΠΟΛΛΕΣ φορές
   στην ίδια κεφαλίδα (μία διάταξη ανά ανάλυση), και τρία ίδια id είναι άκυρη HTML.
   Άρα ό,τι έδινε το `#header` πρέπει να το δώσει εδώ η ΚΛΑΣΗ `.nq-mob-head`.

   Χωρίς αυτό το μπλοκ η γραμμή έβγαινε χωρίς container: το λογότυπο ακουμπούσε
   στην αριστερή άκρη και κοβόταν, και το ύψος έπεφτε στα 49px (το έδινε μόνο το
   περιεχόμενο). Είναι ΑΚΡΙΒΩΣ τα ίδια τρία πράγματα με το `header > #header`:
   κάθετο κεντράρισμα, container, ύψος. */
header > .nq-mob-head { display: flex; align-items: center; min-height: 64px; }
.nq-mob-head > .pb-row {
  width: 100%; max-width: var(--nq-max); margin-inline: auto; padding-inline: 12px;
  align-items: center;
}
/* Μικρότερο λογότυπο από το desktop: στο μισό πλάτος της γραμμής, τα 56px του
   `.nq-h1-logo img` ξεχείλιζαν τη στήλη. */
.nq-mob-head .nq-h1-logo img { max-height: 40px; }

/* ── Διάταξη «burger | λογότυπο | τηλέφωνο» ──────────────────────────────────
   Τα τρία parts (`h1-burger`, `h1-logo`, `h1-tel`) είναι ΤΡΕΙΣ ΣΤΗΛΕΣ. Το πλέγμα
   δίνει τα πλάτη· εδώ μπαίνει μόνο η ΟΡΙΖΟΝΤΙΑ στοίχιση μέσα σε κάθε στήλη, που
   το πλέγμα δεν μπορεί να ξέρει: αριστερά κολλητά, κέντρο, δεξιά κολλητά.
   Χωρίς αυτό και τα τρία θα κάθονταν αριστερά στη στήλη τους και το λογότυπο
   δεν θα ήταν στο οπτικό κέντρο της μπάρας. */
   Το `align-items:center` είναι για ΜΕΣΑ στο wrapper· η κάθετη στοίχιση των ΙΔΙΩΝ
   των στηλών έρχεται από τη γραμμή («Ρυθμίσεις γραμμής → Content position →
   Middle»), που γράφεται INLINE και κανένα CSS δεν τη νικά. */
.nq-mob-head .nq-h1-burgerwrap { display: flex; align-items: center; justify-content: flex-start; }

/* ── ΤΟ ΠΤΥΣΣΟΜΕΝΟ ΜΕΝΟΥ ΒΓΑΙΝΕΙ ΕΞΩ ΑΠΟ ΤΟ ΠΛΕΓΜΑ ──────────────────────────
   Ζει μέσα στο `h1-burger.php`, άρα στη ΣΤΗΛΗ ΤΟΥ BURGER — αλλά με absolute
   δεν πιάνει καθόλου χώρο στο πλέγμα και απλώνεται σε ΟΛΟ το πλάτος της μπάρας.
   Έτσι ο καμβάς δείχνει 3 στήλες (burger · λογότυπο · τηλέφωνο), όσα ακριβώς
   βλέπει και ο επισκέπτης — αντί για μια τέταρτη «φάντασμα» στήλη μόνο και μόνο
   για να χωρέσει το μενού.
   Το άγκυρο είναι η ΓΡΑΜΜΗ, όχι η στήλη.
   ⚠️ ΤΟ `.pb-col` ΕΧΕΙ `position:relative` ΚΑΘΟΛΙΚΑ (frontend.css), οπότε γινόταν
   αυτό το άγκυρο και το μενού άνοιγε στο πλάτος της στήλης του burger — 87px αντί
   για όλη τη μπάρα. Οι στήλες ΑΥΤΗΣ της γραμμής δεν έχουν φόντο/overlay (που είναι
   ο λόγος ύπαρξης του relative), άρα το `static` εδώ δεν κοστίζει τίποτα. */
header > .nq-mob-head { position: relative; }
.nq-mob-head > .pb-row > .pb-col { position: static; }
.nq-mob-head .nq-h1-mobmenu { position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  background: var(--nq-header-bg, #0b0f1a);
  border-top: 1px solid var(--nq-header-line, rgba(255, 255, 255, .1)); }
/* Κλειστό = ΚΑΝΕΝΑ ίχνος: το `.nq-h1-navwrap` είναι ήδη display:none όσο δεν έχει
   `.is-open` (header-1.css, mobile block), οπότε το πάνελ μένει κενό και αόρατο. */
.nq-mob-head .nq-h1-mobmenu:not(:has(.is-open)) { display: none; }
.nq-mob-head .nq-h1-navwrap.is-open { padding: 6px 16px 14px; }
/* ⚠️ `display:flex`, ΟΧΙ το `inline-flex` της βάσης: ως inline το <a> κάθεται σε
   baseline και κρατά χώρο για descender — το λογότυπο έβγαινε 3,5px ψηλότερα από
   burger και τηλέφωνο, ενώ όλα τα άλλα ήταν σωστά. */
.nq-mob-head .nq-h1-logo       { display: flex; align-items: center; justify-content: center; width: 100%; }
.nq-mob-head .nq-h1-telwrap    { display: flex; align-items: center; justify-content: flex-end; }
/* Ίδιος λόγος με το `#header .nq-h1-navbar`: το μενού είναι στήλη της γραμμής,
   δεν χρειάζεται δικό του container ούτε δικό του ύψος. */
.nq-mob-head .nq-h1-navbar { max-width: none; padding-inline: 0; min-height: 0; }

/* Το μενού ΕΚΤΟΣ #header (π.χ. αν μπει στην υποδοχή «Navigation») κρατά τη
   συμπεριφορά της χωριστής μπάρας — δεν σπάει παλιό στήσιμο. */
header > nav:has(.nq-h1-navbar) { border-bottom: 1px solid var(--nq-header-line, rgba(255, 255, 255, .1)); }
.nq-h1-navbar { display: flex; align-items: center; min-height: 52px; }
.nq-h1-navwrap .nq-nav { gap: 2px; }
.nq-h1-navwrap .nq-nav-link { padding: 9px 14px; font-size: 14.5px; }

/* ── Λεπτή γραμμή σημείων ───────────────────────────────────────────────── */
/* Φόντο δεν κρατά: το βάφει το ίδιο το <header> (theme.css → `body.nq-front >
   header`). Εδώ μένει μόνο η λεπτή γραμμή που τη χωρίζει από την επόμενη μπάρα. */
/* `:where()` = προεπιλογή 0,0,0, ώστε να τη νικά το «Bottom Border» του builder
   (`#Bottom_header`, 1,0,0). Βλ. ίδιο ζήτημα σε theme.css και top-bar.css. */
:where(header > #Bottom_header:has(.nq-h1-usps)) { border-bottom: 1px solid var(--nq-header-line, rgba(255, 255, 255, .1)); }
.nq-h1-usps { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 9px 0;
  font-size: 12.5px; color: rgba(232, 235, 243, .62); }
.nq-h1-usp { display: inline-flex; align-items: center; gap: 7px; }
.nq-h1-usp svg { width: 13px; height: 13px; color: var(--nq-accent); }

/* ── Κολλητή μπάρα ──────────────────────────────────────────────────────── */
.nq-h1-stickyin { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.nq-h1-sticky .nq-h1-logo img { max-height: 38px; }
.nq-h1-sticky .nq-h1-navwrap { margin-left: auto; }
.nq-h1-sticky .nq-h1-cta { height: 38px; padding: 0 16px; font-size: 13.5px; }

/* ── Κινητό: το μενού πέφτει κάτω από τη γραμμή που το άνοιξε ────────────── */
@media (max-width: 991.98px) {
  .nq-h1-burger { display: block; }
  .nq-h1-tel span { display: none; }               /* μένει μόνο το εικονίδιο */
  .nq-h1-navbar { min-height: 0; padding: 0; }
  .nq-h1-navwrap { display: none; width: 100%; }
  .nq-h1-navwrap.is-open { display: block; padding: 6px 0 14px; }
  /* Σε κινητό οι τρεις στήλες στοιβάζονται (Bootstrap col-lg-*). Το μενού πρέπει
     να πιάνει όλο το πλάτος κάτω από λογότυπο + CTA· η στήλη του δεν πρέπει να
     κρατά ύψος όταν το μενού είναι κλειστό. */
  #header > .pb-row { min-height: 0; }
  #header .nq-h1-navbar { min-height: 0; }
  .nq-h1-navwrap .nq-nav { flex-direction: column; align-items: stretch; }
  .nq-h1-navwrap .nq-nav-item { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .nq-h1-sticky .nq-h1-navwrap.is-open { position: absolute; left: 0; right: 0; top: 100%;
    background: var(--nq-header-bg, #0b0f1a); padding: 6px 16px 14px; }
  .nq-h1-sticky .nq-h1-stickyin { position: relative; }

  /* ΤΟ ΙΔΙΟ, ΓΙΑ ΤΟ ΜΕΝΟΥ ΩΣ BLOCK ΤΟΥ BUILDER.
     Ο παραπάνω κανόνας πιάνει το ΠΑΛΙΟ part (`.nq-h1-sticky > .nq-h1-stickyin`).
     Ως block το μενού ζει σε ΣΤΗΛΗ — στην κολλητή μπάρα σε col-4, δηλαδή 117px στα
     390px. Ανοιχτό μέσα εκεί έβγαινε στενή κατακόρυφη λίστα στην άκρη, όχι πάνελ.
     Άγκυρα γίνεται η ΓΡΑΜΜΗ: η στήλη γυρίζει `static` (είναι `relative` μόνο για
     φόντο/overlay, που αυτές οι στήλες δεν έχουν) και το `.pb-row` είναι ήδη
     `relative`. Το `top:100%` μετριέται τότε από τη ΓΡΑΜΜΗ, όχι από τη στήλη.
     Δεν χρειάζεται στένεμα σε «κολλητή»: η desktop γραμμή είναι ήδη κρυμμένη κάτω
     από 992px, και όπου φανεί, αυτό ΕΙΝΑΙ η επιθυμητή συμπεριφορά. */
  .pb-row > .pb-col:has(> .nq-h1-navbar) { position: static; }
  .pb-col > .nq-h1-navbar > .nq-h1-navwrap.is-open {
    position: absolute; left: 0; right: 0; top: 100%; width: auto; z-index: 45;
    background: var(--nq-header-bg, #0b0f1a);
    border-top: 1px solid var(--nq-header-line, rgba(255, 255, 255, .1));
    padding: 6px 16px 14px;
    /* Μενού με πολλά στοιχεία σε χαμηλή οθόνη: να κυλά, να μη βγαίνει εκτός. */
    max-height: 78vh; overflow-y: auto; }
}
@media (max-width: 575.98px) {
  .nq-h1-cta { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .nq-h1-logo img { max-height: 42px; }
}


/* nq-sec: Mobile head · Burger θέση και μέγεθος
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): 40×40, πάνω-αριστερά στα 10px.

   🔴 ΓΙΑΤΙ `!important` ΚΑΙ ΓΙΑΤΙ ΕΔΩ: τις τιμές τις εκπέμπει το Skin inline
   στο <head>, με δικό του `!important`:
       .nq-h1-burger{width:30px!important;height:30px!important;…}
       .nq-h1-burger:not(.nq-sticky *){position:absolute!important;top:15px!important}
   Ενας κανόνας μιας κλάσης δεν τους νικά. Εδώ ο selector έχει ΔΥΟ κλάσεις,
   άρα κερδίζει σε ειδικότητα ανεξάρτητα από σειρά φόρτωσης.

   ΤΟ `.nq-mob-head` ΔΕΝ ΕΙΝΑΙ ΔΙΑΚΟΣΜΗΤΙΚΟ: κρατάει τον κανόνα ΜΟΝΟ στο
   κέλυφος του κινητού, ώστε να μην πειραχτεί ο burger του sticky — που έχει
   δική του διάταξη (`order: -1`, `margin-right`) και θα έσπαγε με absolute.

   ⚠️ Το `position: absolute` στηρίζεται στο `header > .nq-mob-head
   { position: relative }` παρακάτω σε αυτό το αρχείο. Αν φύγει εκείνο, ο
   burger θα αγκυρωθεί στο viewport. */
/* ⚠️ ΤΟ `header` ΜΠΡΟΣΤΑ ΔΕΝ ΠΕΡΙΣΣΕΥΕΙ: ο κανόνας του Skin για τη ΘΕΣΗ είναι
   `.nq-h1-burger:not(.nq-sticky *)`, δηλαδή ΔΥΟ κλάσεις — ίδια ειδικότητα με
   `.nq-mob-head .nq-h1-burger`. Σε ισοπαλία κερδίζει ό,τι φορτώνεται τελευταίο,
   και το Skin γράφεται inline στο <head> ΜΕΤΑ τα φύλλα μας. Μετρημένο: το
   `top` έμενε 15px. Με το στοιχείο μπροστά γίνεται (0,2,1) και κερδίζει. */
header .nq-mob-head .nq-h1-burger {
  position: absolute !important;
  top: 10px !important;
  left: 20px !important;
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  justify-content: flex-start !important;
}

/* nq-sec: Mobile head · Γραμμές burger — μεγαλύτερες και άνισες
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «να φύγει το περίγραμμα, να μεγαλώσουν οι
   γραμμές, αλλά να είναι ασύμμετρες στο width».

   ΟΙ ΤΡΕΙΣ ΓΡΑΜΜΕΣ ΕΙΝΑΙ ΑΡΙΣΤΕΡΑ ΣΤΟΙΧΙΣΜΕΝΕΣ (`margin-right: auto`), οχι
   κεντραρισμενες: με ανισα πλατη το κεντραρισμα διαβαζεται ως λαθος
   ευθυγραμμιση, ενω η κοινη αριστερη ακμη το κανει σαφως σκοπιμο.

   ⚠️ ΤΟ ΥΨΟΣ ΤΟΥΣ ΜΠΑΙΝΕΙ ΣΤΟΝ ΥΠΟΛΟΓΙΣΜΟ ΤΟΥ X: οι κανονες
   `.nq-h1-burger.is-open span:nth-child(1|3)` μετακινουν κατα ±5px για να
   συναντηθουν στη μεση. Με 3px υψος και 5px κενο, το κεντρο καθε ακραιας
   γραμμης απεχει ακριβως 8px απο τη μεσαια — γι' αυτο το ±5 δουλευει ακομη.
   Αν αλλαξει το υψος ή το κενο, πρεπει να ξαναβγει και εκεινο το ±5. */
header .nq-mob-head .nq-h1-burger span {
  height: 3px;
  margin: 5px 0;
  margin-right: auto;
  border-radius: 2px;
}
header .nq-mob-head .nq-h1-burger span:nth-child(1) { width: 26px; }
header .nq-mob-head .nq-h1-burger span:nth-child(2) { width: 18px; }
header .nq-mob-head .nq-h1-burger span:nth-child(3) { width: 22px; }


/* nq-sec: Mobile head · Ο burger γίνεται X πάνω από το πάνελ
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «το animation όταν πατάς τον διακόπτη να
   γίνεται X, όπως στο almyrayachtscorfu.com».

   🔴 Η ΜΕΤΑΜΟΡΦΩΣΗ ΥΠΗΡΧΕ ΗΔΗ ΚΑΙ ΔΟΥΛΕΥΕ — απλώς ΔΕΝ ΦΑΙΝΟΤΑΝ.
   Το `mobpanel.js` βάζει `is-open` στο κουμπί, και οι κανόνες
   `.nq-h1-burger.is-open span:nth-child(…)` το γυρίζουν σε X με
   `transition: transform .2s`. Το πρόβλημα ήταν η ΣΤΟΙΒΑΞΗ: το πάνελ έχει
   `z-index: 1400` και ο <header> 1350, οπότε μόλις ανοίξει το πάνελ σκεπάζει
   τον burger και η κίνηση γίνεται από κάτω, αόρατη.

   ΓΙ' ΑΥΤΟ ΤΟ `fixed` ΚΑΙ ΟΧΙ ΑΠΛΩΣ ΨΗΛΟΤΕΡΟ z-index: ο burger ζει μέσα στον
   <header>, που είναι stacking context με 1350 — ένα παιδί του ΔΕΝ μπορεί να
   ξεπεράσει τον γονιό του όσο ψηλό z-index κι αν πάρει. Με `fixed` βγαίνει
   από τη ροή και αγκυρώνεται στο viewport, στην ΙΔΙΑ οπτική θέση (10/10),
   οπότε το X εμφανίζεται ακριβώς εκεί που ήταν οι τρεις γραμμές. */
header .nq-mob-head .nq-h1-burger.is-open {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 1500 !important;
}

/* 🔴 ΤΟ X ΤΟΥ ΠΑΝΕΛ ΕΠΑΝΗΛΘΕ. Το ειχα κρυψει υποθετοντας οτι ο burger θα
   γινοταν X απο πανω — ΔΕΝ γινεται: ο burger του mobile header δεν φερει την
   κλαση `nq-mp-open`, οποτε το `mobpanel.js` δεν του βαζει ποτε `is-open`
   (μετρημενο: πανελ is-open true, burger is-open FALSE). Αποτελεσμα: ο
   επισκεπτης εμενε χωρις κανενα κουμπι κλεισιματος. Μενει ορατο μεχρι να
   λυθει η αιτια στο markup, οχι στο CSS. */


/* nq-sec: Sticky header · Ο ΙΔΙΟΣ burger με το mobile header
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): ιδια θεση, ιδιο μεγεθος, ιδιο σχημα.

   ΓΙΑΤΙ ΔΕΝ ΑΡΚΕΣΕ ΝΑ ΜΠΕΙ ΣΤΟΝ ΙΔΙΟ ΚΑΝΟΝΑ με το `.nq-mob-head`: ο κανονας
   θεσης του Skin ειναι `.nq-h1-burger:not(.nq-sticky *)`, δηλαδη ΕΞΑΙΡΕΙ ρητα
   το sticky — εκει ο burger ειναι flex αντικειμενο με `order: -1` και
   `margin-right: 16px` (header-demo-1.css). Δυο διαφορετικες αφετηριες, αρα
   δυο κανονες· οι ΤΙΜΕΣ ομως ειναι σκοπιμα ιδιες.

   ⚠️ ΟΤΑΝ ΑΛΛΑΞΕΙ Η ΘΕΣΗ ΣΤΟ ΕΝΑ, ΠΡΕΠΕΙ ΝΑ ΑΛΛΑΞΕΙ ΚΑΙ ΣΤΟ ΑΛΛΟ. Αυτη τη
   στιγμη: top 10px / left 20px / 40x40. Το `.nq-sticky` ειναι `position:
   fixed`, αρα λειτουργει ως αγκυρα για το absolute χωρις τιποτα αλλο. */
@media (max-width: 991.98px) {
  .nq-sticky .nq-h1-burger {
    position: absolute !important;
    /* ΤΟ 4px ΔΕΝ ΕΙΝΑΙ ΑΥΘΑΙΡΕΤΟ: η μπαρα ειναι 48px και το κουμπι 40px, αρα
       (48-40)/2 = 4 το κραταει ΚΕΝΤΡΑΡΙΣΜΕΝΟ καθετα. Στο mobile header μενει
       10px γιατι εκει η μπαρα ειναι ψηλοτερη. Αν αλλαξει το υψος της μπαρας,
       αλλαζει και αυτο — αλλιως ο burger ξεφευγει απο το κατω χειλος. */
    top: 4px !important;
    left: 20px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border: 0 !important;
    justify-content: flex-start !important;
  }
  .nq-sticky .nq-h1-burger span {
    height: 3px;
    margin: 5px 0;
    margin-right: auto;
    border-radius: 2px;
  }
  .nq-sticky .nq-h1-burger span:nth-child(1) { width: 26px; }
  .nq-sticky .nq-h1-burger span:nth-child(2) { width: 18px; }
  .nq-sticky .nq-h1-burger span:nth-child(3) { width: 22px; }
}


/* nq-sec: Sticky header · Κεντραρισμένο λογότυπο στο κινητό
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): αλλαξε τη δομη του sticky απο τρεις στηλες σε
   δυο (δεξια το desktop μενου). Στο desktop δουλευει· στο κινητο το λογοτυπο
   επρεπε να ερθει στη ΜΕΣΗ της μπαρας.

   ΜΕΤΡΗΜΕΝΟ στα 390: μπαρα 0-375 (κεντρο 188), αριστερη στηλη 12-188
   (κεντρο 100), λογοτυπο κεντρο **100** — δηλαδη κεντραρισμενο στη ΣΤΗΛΗ του,
   οχι στη μπαρα.

   ΓΙΑΤΙ ΜΕ absolute ΚΑΙ ΟΧΙ ΠΕΙΡΑΖΟΝΤΑΣ ΤΙΣ ΣΤΗΛΕΣ: αν εδινα 100% πλατος στην
   πρωτη στηλη, η δευτερη θα τυλιγοταν σε δευτερη γραμμη και θα ψηλωνε η
   μπαρα· αν την εκρυβα, θα εξαφανιζοταν μαζι της ο,τι ζει μεσα της — και ο
   burger ειναι absolute, αρα ενα `display:none` στον γονεα θα τον εσβηνε
   κιολας. Το `.nq-sticky` ειναι ηδη `position: fixed`, αρα λειτουργει ως
   αγκυρα χωρις καμια αλλη αλλαγη.

   Ο burger μενει στα 20px αριστερα και δεν συγκρουεται: το λογοτυπο ειναι
   ~98px πλατος γυρω απο το κεντρο, δηλαδη ξεκιναει στα ~139. */
@media (max-width: 991.98px) {
  /* 🔴 ΤΟ `position: static` ΣΤΙΣ ΣΤΗΛΕΣ ΕΙΝΑΙ Ο ΛΟΓΟΣ ΠΟΥ ΔΟΥΛΕΥΕΙ ΤΟ ΚΕΝΤΡΑΡΙΣΜΑ.
     Το `.pb-col` εχει `position: relative` ΚΑΘΟΛΙΚΑ απο το frontend.css του
     builder. Χωρις αυτη τη γραμμη, το `left: 50%` του λογοτυπου μετραγε 50%
     ΤΗΣ ΣΤΗΛΗΣ, οχι της μπαρας — μετρημενο: κεντρο 100 αντι για 188. Με τις
     στηλες στατικες, αγκυρα γινεται το ιδιο το `.nq-sticky`, που ειναι fixed
     και πιανει ολο το πλατος.
     Ωφελει και τον burger: το `left: 20px` του μετραει πλεον απο τη μπαρα. */
  /* 🔴 ΙΔΙΑ ΠΕΡΙΘΩΡΙΑ ΜΕ ΤΟΝ MOBILE HEADER (ιδιοκτητης 2026-09-08: «σε 986 και
     κατω ο sticky εχει διαφορετικα αριστερα/δεξια περιθωρια απο τον κανονικο»).
     ΑΙΤΙΑ, δικη μου: οταν η γραμμη του sticky εγινε «boxed» για να ευθυγραμμιστει
     με τη σελιδα στο desktop, απεκτησε `.container` — που κατω απο 992 βαζει δικα
     του περιθωρια. Ο mobile header ειναι `stretch_row_content_no_spaces` με σκετο
     `padding-inline: 12px`. Δυο διαφορετικα πλατη στην ιδια θεση.
     Εδω ο sticky ξαναγινεται πληρους πλατους ΜΟΝΟ στο κινητο. */
  .nq-sticky .container {
    max-width: none;
    padding-inline: 12px;
  }
  .nq-sticky .pb-col {
    position: static;
  }
  .nq-sticky .nq-h1-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
  }

  /* ΜΙΚΡΟΤΕΡΟ ΛΟΓΟΤΥΠΟ ΚΑΙ ΧΑΜΗΛΟΤΕΡΗ ΜΠΑΡΑ (ιδιοκτητης 2026-09-08).
     ΤΟ ΥΨΟΣ ΤΗΣ ΜΠΑΡΑΣ ΔΕΝ ΟΡΙΖΕΤΑΙ ΜΕ height: το λογοτυπο ειναι πλεον
     absolute, αρα ΔΕΝ μετραει στο υψος — αυτο το δινει η γραμμη με το padding
     της. Γι' αυτο μικραινει εκει και οχι στο <img>. */
  .nq-sticky .nq-h1-logo img {
    max-height: 32px;
  }
  /* ⚠️ `!important` ΓΙΑΤΙ ΤΟ ΥΨΟΣ ΕΙΝΑΙ INLINE: η γραμμη του sticky κουβαλαει
     `min-height: 66px` γραμμενο ΜΕΣΑ στο style attribute απο τις ρυθμισεις της
     γραμμης στον builder (Template Parts). Inline στυλ νικαει καθε κανονα
     χωρις `!important` — μετρημενο, το 52px αγνοηθηκε τελειως.
     🔴 Η ΣΩΣΤΗ ΘΕΣΗ ΤΗΣ ΤΙΜΗΣ ΕΙΝΑΙ Ο MANAGER: αν καποτε αλλαξει εκει, αυτο
     εδω θα την ακυρωνει σιωπηλα. Μενει ως γρηγορη λυση για το κινητο. */
  .nq-sticky > .pb-row,
  .nq-sticky .pb-row {
    min-height: 48px !important;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}


/* nq-sec: Sticky header · Κεντραρισμένο μενού (ιδιοκτητης 2026-09-08)
   ΜΕΤΡΗΜΕΝΟ στα 1286: το `.nq-nav` πιανει 660→1162 μεσα σε στηλη 636→1206 με
   `justify-content: normal`, δηλαδη τα στοιχεια στοιβαζονται απο την ΑΡΧΗ της
   στηλης. Με `center` μοιραζεται το περισσευουμενο πλατος και στις δυο πλευρες.

   ΜΟΝΟ ≥992px: κατω απο αυτο το μενου του sticky δεν εμφανιζεται καθολου —
   τη θεση του παιρνει ο burger, που ειναι absolute και δεν επηρεαζεται. */
@media (min-width: 992px) {
  /* ⚠️ ΤΟ `justify-content` ΜΟΝΟ ΤΟΥ ΔΕΝ ΕΚΑΝΕ ΤΙΠΟΤΑ: το `.nq-nav` εχει
     πλατος ισο με το περιεχομενο του, αρα δεν υπαρχει ελευθερος χωρος να
     μοιραστει. Το κεντραρισμα πρεπει να γινει στο ΠΕΡΙΤΥΛΙΓΜΑ, που πιανει ολη
     τη στηλη — γι' αυτο του δινεται ρητα `display: flex` και `width: 100%`. */
  /* ΚΕΝΤΡΟ ΤΗΣ ΜΠΑΡΑΣ, ΟΧΙ ΤΗΣ ΣΤΗΛΗΣ (διευκρινιση ιδιοκτητη 2026-09-08).
     Η πρωτη εκδοχη το κεντραρε μεσα στη στηλη του (κεντρο 921) — σωστο αλλα
     οχι το ζητουμενο: το μενου φαινοταν δεξια, γιατι δεξια ειναι και η στηλη.

     🔴 ΤΟ `position: static` ΣΤΙΣ ΣΤΗΛΕΣ ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ, ΟΧΙ ΚΑΛΛΩΠΙΣΤΙΚΟ:
     το `.pb-col` ειναι `position: relative` καθολικα απο τον builder, οποτε
     ενα `left: 50%` θα μετραγε το μισο ΤΗΣ ΣΤΗΛΗΣ. Με στατικες στηλες, αγκυρα
     γινεται το `.nq-sticky` που ειναι fixed και πιανει ολο το πλατος.
     (Ιδια παγιδα με το λογοτυπο στο κινητο, πιο πανω σε αυτο το αρχειο.) */
  .nq-sticky .pb-col {
    position: static;
  }
  .nq-sticky .nq-h1-navwrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: auto;
    justify-content: center;
  }
  .nq-sticky .nq-nav {
    justify-content: center;
  }
}