/* 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; }
}