/* ==========================================================================
 * theme/css/theme.css — GLOBAL CSS του frontend.
 * Φορτώνεται αυτόματα σε ΚΑΘΕ σελίδα (κάθε .css του theme/css/ μπαίνει μόνο του,
 * αλφαβητικά, μετά το Bootstrap και πριν τα per-page assets).
 * Εδώ ζει μόνο το «κέλυφος»: header, μενού, footer, container. Το styling των
 * blocks έρχεται από τον PageBuilder (frontend.css + scoped ce CSS).
 * ======================================================================== */

:root {
  /* Ύψος header: ακολουθεί το λογότυπο. Αν μεγαλώσεις το `.nq-brand img`
     πιο κάτω, ανέβασε κι αυτό — αλλιώς το λογότυπο ακουμπά στις άκρες. */
  --nq-header-h: 88px;
  /* Ίδιο με το .container του Bootstrap (xxl) ώστε header/footer να ευθυγραμμίζονται
     ΑΚΡΙΒΩΣ με το περιεχόμενο που βγάζει ο PageBuilder. Αλλάζοντας το εδώ, αλλάζει
     μόνο το κέλυφος — το Bootstrap μένει όπως είναι. */
  --nq-max: 1320px;
  --nq-fg: #111827;
  --nq-muted: #6b7280;
  --nq-line: #e5e7eb;
  --nq-accent: var(--volgh-primary, #4f46e5);
  /* ΣΚΟΥΡΟ ΚΕΛΥΦΟΣ: το header ακολουθεί το hero και το footer, ώστε το site να
     διαβάζεται σαν ένα κομμάτι. Για λευκό header, άλλαξε ΜΟΝΟ αυτές τις τρεις. */
  --nq-header-bg: #0b0f1a;
  --nq-header-fg: #e8ebf3;
  --nq-header-line: rgba(255, 255, 255, .1);
}

body.nq-front { margin: 0; color: var(--nq-fg); }

/* ΚΑΜΙΑ ΟΡΙΖΟΝΤΙΑ ΚΥΛΙΣΗ — ΠΟΤΕ.
   ---------------------------------------------------------------------------
   Οι full-bleed ενότητες μέσα σε περιεχόμενο χρήστη χρησιμοποιούν το κλασικό
   `width:100vw; margin-inline:calc(50% - 50vw)`. Το `100vw` όμως μετρά ΚΑΙ τη
   μπάρα κύλισης: σε desktop με ορατή μπάρα (~15px) η ενότητα βγαίνει πιο φαρδιά
   από το ορατό πλάτος και η σελίδα αποκτά οριζόντια κύλιση.
   `clip` (ΟΧΙ `hidden`): κόβει την υπερχείλιση ΧΩΡΙΣ να φτιάχνει scroll
   container — άρα το `position: sticky` της κεφαλίδας συνεχίζει να δουλεύει.
   Αυτό πιάνει και κάθε μελλοντική ενότητα με το ίδιο κόλπο. */
html { overflow-x: clip; }
#nq-main { min-height: 40vh; }
/* Σελίδες χωρίς builder (σκέτο HTML): παίρνουν container + λίγο αέρα, ώστε να μην
   κολλάνε στην άκρη της οθόνης. Οι builder σελίδες ΔΕΝ τυλίγονται — φτιάχνουν
   μόνες τους το layout τους (full-bleed sections κ.λπ.). */
#nq-main.nq-boxed .nq-content { padding-block: 40px; }

.nq-container { width: 100%; max-width: var(--nq-max); margin-inline: auto; padding-inline: 12px; }

/* ───────────────────────────── Top bar ─────────────────────────────────── */
.nq-topbar { background: #111827; color: #e5e7eb; font-size: 13px; }
.nq-topbar .nq-nav { justify-content: flex-end; gap: 14px; }
.nq-topbar .nq-nav-link { color: #d1d5db; padding: 7px 0; }
.nq-topbar .nq-nav-link:hover { color: #fff; }

/* ───────────────────────────── Header ──────────────────────────────────── */
.nq-header { background: var(--nq-header-bg); border-bottom: 1px solid var(--nq-header-line); position: sticky; top: 0; z-index: 900; }
.nq-header-in { display: flex; align-items: center; gap: 20px; min-height: var(--nq-header-h); }

/* ── Σκούρο κέλυφος: κείμενο, σύνδεσμοι, burger, υπομενού ─────────────────
   ΠΡΟΣΟΧΗ ΣΤΟΝ ΣΤΟΧΟ: τα κομμάτια της κεφαλίδας ΔΕΝ ζουν όλα μέσα στο
   `#header`. Ο σκελετός βάζει το μενού σε αδελφό `<nav>` και τη λεπτή γραμμή σε
   `#Bottom_header`. Με στόχο `header > #header` τα links του μενού έμεναν
   σκούρα πάνω σε σκούρο — τεχνικά σωστά, πρακτικά αόρατα.
   Στόχος είναι πλέον ΟΛΟ το `<header>` του σκελετού. */
header, .nq-header, .nq-sticky { color: var(--nq-header-fg); }
header .nq-nav-link,
.nq-header .nq-nav-link,
.nq-sticky .nq-nav-link { color: rgba(232, 235, 243, .8); }
header .nq-nav-link:hover,
.nq-header .nq-nav-link:hover,
.nq-sticky .nq-nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
header .nq-nav-item.is-current > .nq-nav-link,
.nq-header .nq-nav-item.is-current > .nq-nav-link,
.nq-sticky .nq-nav-item.is-current > .nq-nav-link { color: #fff; }
header .nq-burger,
.nq-header .nq-burger,
.nq-sticky .nq-burger { background: transparent; border-color: rgba(255, 255, 255, .24); }
header .nq-burger span,
.nq-header .nq-burger span,
.nq-sticky .nq-burger span { background: #fff; }
/* Υπομενού και πτυσσόμενο μενού κινητού: σκούρα, αλλιώς θα άνοιγαν λευκά κουτιά. */
header .nq-subnav, .nq-header .nq-subnav, .nq-sticky .nq-subnav,
header .nq-nav-wrap.is-open, .nq-header .nq-nav-wrap.is-open, .nq-sticky .nq-nav-wrap.is-open {
  background: #0f1424; border-color: var(--nq-header-line); }

/* ── ΤΟ ΦΟΝΤΟ ΤΗΣ ΚΕΦΑΛΙΔΑΣ ΜΠΑΙΝΕΙ ΕΔΩ, ΜΙΑ ΦΟΡΑ ─────────────────────────
   Ήταν καρφωμένο ανά μπάρα (#Top_header, header > #header, > nav, > #Bottom_header)
   σε τρία αρχεία, οπότε ΚΑΘΕ νέα γραμμή που πρόσθετε ο builder έβγαινε άβαφη
   πάνω στο λευκό <body>. Τώρα βάφεται το ίδιο το <header> και οι μπάρες κρατούν
   μόνο τη ΔΙΑΦΟΡΑ τους (γραμμές, ύψη, δικό τους χρώμα αν χρειαστεί).
   ΣΤΟΧΟΣ ΑΜΕΣΟ ΠΑΙΔΙ ΤΟΥ BODY: σκέτο `header` πιάνει και τα <header> που βγάζουν
   blocks μέσα στο περιεχόμενο (π.χ. .nq-services-prime__head). */
body.nq-front > header { background: var(--nq-header-bg); }

/* Σελίδα ΜΕ πρότυπο: η γραμμή του λογότυπου. ΔΕΝ γίνεται sticky: μέσα στο
   <header> του σκελετού θα ξεκολλούσε μόλις αυτό έβγαινε από την οθόνη — το
   «κολλητό» είναι δουλειά της ζώνης «Sticky header». Φόντο δεν κρατά — το
   κληρονομεί από το <header> (βλ. από πάνω). */
/* ⚠️ ΕΙΔΙΚΟΤΗΤΑ — ΠΡΟΕΠΙΛΟΓΗ, ΟΧΙ ΕΝΤΟΛΗ (2026-08-10)
   Η γραμμή μπαίνει σε `:where()`, δηλαδή με ειδικότητα 0,0,0. Ο builder γράφει τις
   ρυθμίσεις της γραμμής ως `#header { … }` (1,0,0)· με στόχο `header > #header`
   (1,0,1) το theme ΝΙΚΟΥΣΕ ΠΑΝΤΑ, οπότε το «Bottom Border» του builder δεν είχε
   ΚΑΜΙΑ ορατή επίδραση — χωρίς κανένα σφάλμα, απλώς δεν εφαρμοζόταν.
   Το `position` ΔΕΝ μπαίνει εδώ: είναι σκελετός (άγκυρα για το μενού που πέφτει
   από κάτω), όχι εμφάνιση — αν το έσβηνε ο builder θα έσπαγε η διάταξη. */
:where(header > #header) { border-bottom: 1px solid var(--nq-header-line); }
header > #header { position: relative; }
/* ── Μενού ως ΚΑΤΑΚΟΡΥΦΗ ΛΙΣΤΑ (block «Menu» → Διάταξη: λίστα) ─────────────
   Για στήλη υποσέλιδου ή πλαϊνή στήλη. Κρατά ΜΟΝΟ τη διάταξη· χρώματα και
   αποστάσεις τα δίνει το περιβάλλον (π.χ. `.nq-fcol a` στο υποσέλιδο), ώστε το
   ίδιο block να δείχνει σωστά όπου κι αν μπει. */
.nq-menu-stack .nq-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0;
  list-style: none; margin: 0; padding: 0; }
.nq-menu-stack .nq-nav-link { display: block; }
/* Υπομενού: στο υποσέλιδο δεν αιωρείται — απλώς μπαίνει μέσα. */
.nq-menu-stack .nq-nav .nq-nav { padding-left: 12px; }

/* ── Breadcrumbs ──────────────────────────────────────────────────────────
   Ο διαχωριστής μπαίνει με ::before και custom property, ΟΧΙ ως στοιχείο της
   λίστας: ένα ψεύτικο <li> το διαβάζει ο αναγνώστης οθόνης σαν βήμα διαδρομής. */
.nq-crumbs-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.5; }
.nq-crumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.nq-crumb + .nq-crumb::before { content: var(--nq-crumb-sep, "›"); opacity: .45; }
.nq-crumb a { color: inherit; text-decoration: none; opacity: .72; }
.nq-crumb a:hover { opacity: 1; text-decoration: underline; }
.nq-crumb.is-current { font-weight: 600; }
/* Σε στενή οθόνη οι μεγάλοι τίτλοι έσπρωχναν τη διαδρομή σε τρεις σειρές. */
@media (max-width: 575.98px) {
  .nq-crumbs-list { font-size: 12.5px; gap: 6px; }
  .nq-crumb.is-current { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.nq-brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.nq-brand img { max-height: 60px; width: auto; display: block; }
.nq-brand-txt { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
/* ── Ποιο λογότυπο δείχνει ────────────────────────────────────────────────
   ΔΥΟ άξονες, και οι δύο με CSS (χωρίς JS, χωρίς «πήδημα» του header):
     πλάτος οθόνης → οριζόντιο (desktop) ή τετράγωνο (<576px)
     φόντο κελύφους → κανονικό (.nq-on-light) ή για σκούρο (.nq-on-dark)
   Και τα τέσσερα αρχεία είναι στο markup· ο browser κατεβάζει μόνο όποιο
   εμφανίζεται — το display:none δεν ζητά εικόνα.
   ΠΡΟΣΟΧΗ: όλα ξεκινούν κρυφά και ανοίγουν ΡΗΤΑ. Αν αφήσεις κάποιο «default
   ορατό», σε κάποιον συνδυασμό θα δεις δύο λογότυπα το ένα δίπλα στο άλλο. */
.nq-brand img { display: none; }
.nq-brand .nq-brand-wide.nq-on-light { display: block; }

:is(.nq-header, header, .nq-sticky) .nq-brand .nq-brand-wide.nq-on-light { display: none; }
:is(.nq-header, header, .nq-sticky) .nq-brand .nq-brand-wide.nq-on-dark  { display: block; }

/* Σε στενή οθόνη το οριζόντιο δίνει τη θέση του στο τετράγωνο — ΜΟΝΟ αν υπάρχει
   τετράγωνο. Το `:has(.nq-brand-icon)` είναι ο φύλακας: χωρίς αυτό, σε
   εγκατάσταση που έχει ορίσει μόνο οριζόντιο λογότυπο, το header στο κινητό
   έμενε ΑΔΕΙΟ (κρύβαμε το οριζόντιο και δεν υπήρχε τι να μπει στη θέση του). */
@media (max-width: 575px) {
  .nq-brand:has(.nq-brand-icon) .nq-brand-wide.nq-on-light { display: none; }
  .nq-brand:has(.nq-brand-icon) .nq-brand-icon.nq-on-light { display: block; }
  :is(.nq-header, header, .nq-sticky) .nq-brand:has(.nq-brand-icon) .nq-brand-wide.nq-on-dark { display: none; }
  :is(.nq-header, header, .nq-sticky) .nq-brand:has(.nq-brand-icon) .nq-brand-icon.nq-on-light { display: none; }
  :is(.nq-header, header, .nq-sticky) .nq-brand:has(.nq-brand-icon) .nq-brand-icon.nq-on-dark  { display: block; }
  .nq-brand img { max-height: 46px; }
}

.nq-nav-wrap { margin-left: auto; }
.nq-nav { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nq-nav-item { position: relative; }
.nq-nav-link { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--nq-fg);
  padding: 10px 14px; border-radius: 8px; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.nq-nav-link:hover { color: var(--nq-accent); background: rgba(0, 0, 0, .035); }
.nq-nav-item.is-current > .nq-nav-link { color: var(--nq-accent); font-weight: 600; }
.nq-nav-ico { font-size: 15px; opacity: .8; }
.nq-nav-caret { font-size: 13px; opacity: .6; }

/* Υπομενού: hover σε desktop, click σε mobile (βλ. .nq-open από το theme.js). */
.nq-subnav { list-style: none; margin: 0; padding: 6px; position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--nq-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 20; }
.nq-nav-item:hover > .nq-subnav,
.nq-nav-item.nq-open > .nq-subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.nq-subnav .nq-subnav { top: -7px; left: 100%; }
.nq-subnav .nq-nav-link { padding: 8px 12px; font-size: 14.5px; }
.nq-subnav .nq-nav-caret { margin-left: auto; transform: rotate(-90deg); }
.nq-sub-toggle { display: none; }

/* Burger (mobile) */
.nq-burger { display: none; width: 42px; height: 42px; margin-left: auto; border: 1px solid var(--nq-line);
  background: #fff; border-radius: 9px; cursor: pointer; padding: 0; }
.nq-burger span { display: block; width: 18px; height: 2px; margin: 3px auto; background: var(--nq-fg); border-radius: 2px;
  transition: transform .2s, opacity .2s; }
.nq-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nq-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nq-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 991.98px) {
  .nq-burger { display: block; }
  .nq-nav-wrap { position: fixed; inset: var(--nq-header-h) 0 auto 0; background: #fff; border-bottom: 1px solid var(--nq-line);
    max-height: calc(100dvh - var(--nq-header-h)); overflow: auto; padding: 8px 16px 18px;
    display: none; margin-left: 0; }
  .nq-nav-wrap.is-open { display: block; }
  /* Με πρότυπο, το μενού κρέμεται από το ΙΔΙΟ το header (top:100%) και όχι από
     σταθερό offset — αλλιώς με top bar από πάνω θα έπεφτε πάνω στο header. */
  #header .nq-nav-wrap { position: absolute; inset: 100% 0 auto 0; max-height: 70dvh; }
  .nq-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nq-nav-item { border-bottom: 1px solid var(--nq-line); }
  .nq-nav-link { padding: 13px 4px; }
  /* Σε mobile ο γονέας ανοίγει με το κουμπί, ώστε το ίδιο το link να παραμένει κλικαρίσιμο. */
  .nq-has-sub > .nq-sub-toggle { display: block; position: absolute; top: 4px; right: 0; width: 44px; height: 44px;
    border: 0; background: none; cursor: pointer; }
  .nq-subnav { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none;
    padding: 0 0 6px 14px; display: none; min-width: 0; }
  .nq-nav-item.nq-open > .nq-subnav { display: block; }
  .nq-nav-item:hover > .nq-subnav { display: none; }
  .nq-nav-item.nq-open:hover > .nq-subnav { display: block; }
  .nq-subnav .nq-nav-caret { transform: none; }
}

/* ─────────────────────── Sticky header (ζώνη Sticky_header) ────────────── */
/* Δεν είναι το header με position:sticky — είναι ΞΕΧΩΡΙΣΤΗ μπάρα που εμφανίζεται
   όταν το κανονικό header βγει από την οθόνη (theme/js/modules/sticky-header.js).
   Έτσι δουλεύει και μέσα στο <header> του σκελετού, όπου το sticky ξεκολλάει. */
.nq-sticky { position: fixed; inset: 0 0 auto 0; z-index: 950; background: var(--nq-header-bg);
  border-bottom: 1px solid var(--nq-line); box-shadow: 0 6px 20px rgba(16, 24, 40, .07);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .22s ease, opacity .22s ease, visibility .22s; }
.nq-sticky.is-on { transform: translateY(0); opacity: 1; visibility: visible; }
.nq-sticky .nq-header-in { min-height: 66px; }        /* λίγο χαμηλότερη από το κανονικό */
.nq-sticky .nq-brand img { max-height: 44px; }
/* ── Η STICKY ΩΣ ΓΡΑΜΜΗ ΤΟΥ BUILDER (2026-08-09) ──────────────────────────
   Όταν την ΙΔΙΑ τη γραμμή `#Sticky_header` τη βάφει το `.nq-sticky` (υποδοχή
   κελύφους, PageBuilder::shellSlots), το `.nq-header-in` δεν υπάρχει πια — το
   περιεχόμενο είναι ΣΤΗΛΕΣ. Τα τρία που έδινε εκείνο (container, κάθετο
   κεντράρισμα, ύψος) μπαίνουν εδώ, στο πλέγμα.
   ⚠️ Το `justify-content:space-between` ΔΕΝ χρειάζεται: οι στήλες έχουν πλάτη. */
/* ⚠️ ΕΙΔΙΚΟΤΗΤΑ: το `.nq-sticky` (0,1,0) ΧΑΝΕΙ από το `.pb-row-box{position:relative}`
   του frontend.css — ίδια ειδικότητα, αλλά εκείνο φορτώνεται ΜΕΤΑ (το τυπώνει ο
   PageBuilder μέσα στο σώμα). Αποτέλεσμα: η μπάρα έμενε στη ροή, κυλούσε με τη
   σελίδα και φούσκωνε την κεφαλίδα από 127px σε 194px. Χρειάζεται id + κλάση. */
header > #Sticky_header.nq-sticky {
  position: fixed; inset: 0 0 auto 0; z-index: 950;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
}
header > #Sticky_header.nq-sticky.is-on { transform: translateY(0); opacity: 1; visibility: visible; }

#Sticky_header.nq-sticky > .pb-row {
  width: 100%; max-width: var(--nq-max); margin-inline: auto; padding-inline: 12px;
  align-items: center; min-height: 66px;
}
/* ΔΕΝ μπαίνει `margin-left:auto` στο μενού: η θέση ανήκει στη ΣΤΗΛΗ (πεδίο
   «Οριζόντια στοίχιση» της στήλης), όχι σε κανόνα CSS που αγνοεί τον builder. */
@media print { .nq-sticky { display: none; } }

/* ───────────────────────────── Footer ──────────────────────────────────── */
.nq-footer { margin-top: 60px; border-top: 1px solid var(--nq-line); background: #f9fafb; }
.nq-footer-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px; }
.nq-footer-nav .nq-nav { gap: 2px; }
.nq-footer-nav .nq-nav-link { padding: 6px 10px; font-size: 14px; color: var(--nq-muted); }
.nq-copy { margin: 0; color: var(--nq-muted); font-size: 14px; }

/* ─────────────────── Τυπογραφία περιεχομένου (σελίδες κειμένου) ────────── */
/* Ισχύει για σελίδες χωρίς builder: τίτλος, εισαγωγή, παράγραφοι. Κρατά το ίδιο
   μέτρο ανάγνωσης με το hero (~62ch) ώστε το site να διαβάζεται ενιαία. */
.nq-content h1 { margin: 0 0 18px; font-size: clamp(30px, 4vw, 46px); line-height: 1.12;
  letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
.nq-content h2 { margin: 44px 0 14px; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.25;
  letter-spacing: -.02em; font-weight: 700; }
.nq-content p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--nq-muted); max-width: 62ch; }
/* Η πρώτη παράγραφος μετά από h1 είναι η «εισαγωγή» — λίγο μεγαλύτερη και σκούρα. */
.nq-content h1 + p { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--nq-fg); margin-bottom: 26px; }
.nq-content a { color: var(--nq-accent); }

/* ───────────────────────────── 404 ─────────────────────────────────────── */
.nq-404 { text-align: center; padding: 80px 16px; }
.nq-404 h1 { font-size: 72px; margin: 0 0 6px; letter-spacing: -.04em; }
.nq-404 p { color: var(--nq-muted); }

/* ─────────────────────── Μπάρα συντάκτη (logged-in) ────────────────────── */
.nq-editbar { position: fixed; left: 14px; bottom: 14px; z-index: 1000; display: flex; align-items: center; gap: 12px;
  background: rgba(17, 24, 39, .92); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 13px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28); backdrop-filter: blur(4px); }
.nq-editbar a { color: #c7d2fe; text-decoration: none; }
.nq-editbar a:hover { color: #fff; text-decoration: underline; }
.nq-editbar-t { opacity: .85; }
@media print { .nq-editbar { display: none; } }